Added styles for station page.

frontend/app/js/views/Station/Seekerbar.jsx

@@ -48,7 +48,9 @@ export default class Seekerbar extends Component {
 
 	render() {
 		return (
-			<span style={{"width": this.state.percentage + "%", "background-color": "blue", "height": "100%", "display": "inline-block"}}/>
+			<div className="seekerbar-container">
+				<span style={{"width": this.state.percentage + "%"}}/>
+			</div>
 		);
 	}
 }

frontend/app/js/views/Station/VolumeSlider.jsx

@@ -31,7 +31,6 @@ export default class VolumeSlider extends Component {
 	render() {
 		return (
 			<div className="volume-container">
-				<h2>{ this.props.volume }. Muted: { (this.props.muted) ? "true" : "false" }</h2>
 				{
 					(this.props.muted) ? ([
 						<i className="material-icons" key="unmuteButton" onClick={ this.unmuteVolume }>volume_off</i>,

frontend/app/js/views/Station/index.jsx

@@ -307,11 +307,15 @@ export default class Station extends Component {
 			else dislikeButton = <i className="material-icons" onClick={ this.dislike }>thumb_down</i>;
 		}
 
-		return <div>
-			{ likeButton }
-			{ likes }
-			{ dislikeButton }
-			{ dislikes }
+		return <div className="ratings-container">
+			<div>
+				{ likeButton }
+				{ likes }
+			</div>
+			<div>
+				{ dislikeButton }
+				{ dislikes }
+			</div>
 		</div>;
 	};
 
@@ -354,56 +358,52 @@ export default class Station extends Component {
 			<main id="station">
 				<Overlays t={ this.props.t } />
 
-				<aside>
-					<h2>Sidebar</h2>
-					<button onClick={ () => { this.props.dispatch(openOverlay1("users")) } }>Users</button>
-					<button onClick={ () => { this.props.dispatch(openOverlay1("queueList")) } }>Queue</button>
-					<button onClick={ () => { this.props.dispatch(openOverlay1("playlists")) } }>Playlists</button>
+				<div id="sidebar">
+					<button onClick={ () => { this.props.dispatch(openOverlay1("users")) } }><i className="material-icons">people</i></button>
+					<button onClick={ () => { this.props.dispatch(openOverlay1("queueList")) } }><i className="material-icons">queue_music</i></button>
+					<button onClick={ () => { this.props.dispatch(openOverlay1("playlists")) } }><i className="material-icons">library_music</i></button>
+					<hr/>
 					{
 						(this.isOwner())
 						? (this.props.station.paused)
-							? <button onClick={ this.resumeStation }>Resume</button>
-							: <button onClick={ this.pauseStation }>Pause</button>
+							? <button onClick={ this.resumeStation }><i className="material-icons">play_arrow</i></button>
+							: <button onClick={ this.pauseStation }><i className="material-icons">pause</i></button>
 						: null
 					}
 					{
 						(this.isOwner())
-						? <button onClick={ this.skipStation }>Skip</button>
+						? <button onClick={ this.skipStation }><i className="material-icons">skip_next</i></button>
 						: null
 					}
 					{
 						(this.isOwner())
-						? <button onClick={ () => { this.props.dispatch(openOverlay1("settings")) } }>Settings</button>
+						? <button onClick={ () => { this.props.dispatch(openOverlay1("settings")) } }><i className="material-icons">settings</i></button>
 						: null
 					}
-					<hr/>
-				</aside>
+				</div>
 
 				<h1>{ this.props.station.displayName }</h1>
 
-				<hr/>
-				<div className={(!this.props.songExists) ? "hidden" : ""}>
-					<Player onRef={ ref => (this.player = ref) }/>
-					{ (this.props.station.paused) ? <div><span>Paused</span><i className="material-icons">pause</i></div> : null }
+				<div className={(!this.props.songExists) ? "player-container hidden" : "player-container"}>
+					<div className="iframe-container">
+						<Player onRef={ ref => (this.player = ref) }/>
+						{ (this.props.station.paused) ? <div className="paused-overlay"><span>Paused</span><i className="material-icons">pause</i></div> : null }
+					</div>
+					<Seekerbar/>
 				</div>
 
 				{ (this.props.songExists) ? (
 				[
-					<div key="content">
-						<h1>Title: { this.props.songTitle }</h1>
-						<br/>
-						<span>Artists: { this.props.songArtists.join(", ") }</span>
-						<br/>
-						<span key="time">
-							{ formatTime(this.props.songTimeElapsed) } - { formatTime(this.props.songDuration) }
+					<div key="content" className="content">
+						<span className="title">{ this.props.songTitle }</span>
+						<span className="artists">{ this.props.songArtists.join(", ") }</span>
+						<span className="time">
+							{ formatTime(this.props.songTimeElapsed) } / { formatTime(this.props.songDuration) }
 						</span>
-						<div key="seekerbar" className="seekerbar-container" style={{"width": "100%", "background-color": "yellow", "height": "20px", "display": "block"}}>
-							<Seekerbar/>
-						</div>
+						<VolumeSlider/>
 						{
 							(!this.props.simpleSong) ? this.getRatings() : null
 						}
-						<VolumeSlider key="volumeSlider"/>
 					</div>,
 				]) : (
 					<h1>No song playing</h1>

frontend/app/styles/_colors.scss

@@ -10,11 +10,9 @@ $musare_color_dark_blue: #4977C8;
 $musare_color_light_gray: #C4C4C4;
 $musare_shadow_color: hsla(0, 0, 0, .2);
 
-/* Font-weight:
-100 = light
-300 = semilight
-400 = regular
-500 = semibold
-700 = bold
-900 = black
-*/
+$font_weight_light: 100;
+$font_weight_semilight: 300;
+$font_weight_regular: 400;
+$font_weight_semibold: 500;
+$font_weight_bold: 700;
+$font_weight_black: 900;

frontend/app/styles/main.scss

@@ -10,6 +10,7 @@
 @import "profile";
 @import "team";
 @import "home";
+@import "station";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");

frontend/app/styles/specific/form.scss

@@ -52,4 +52,95 @@ label {
 	&:-ms-input-placeholder, &::-ms-input-placeholder {
 		@content;
 	}
+}
+
+// TODO: Optimize this
+input[type=range] {
+	height: 26px;
+	-webkit-appearance: none;
+	margin: 10px 0;
+	width: 100%;
+}
+input[type=range]:focus {
+	outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 6px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #C4C4C4;
+	border-radius: 0px;
+	border: 0px solid #C4C4C4;
+}
+input[type=range]::-webkit-slider-thumb {
+	box-shadow: 0px 0px 0px #000000;
+	border: 0px solid #000000;
+	height: 20px;
+	width: 20px;
+	border-radius: 50px;
+	background: #2FBEFF;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -7px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+	background: #C4C4C4;
+}
+input[type=range]::-moz-range-track {
+	width: 100%;
+	height: 6px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #C4C4C4;
+	border-radius: 0px;
+	border: 0px solid #C4C4C4;
+}
+input[type=range]::-moz-range-thumb {
+	box-shadow: 0px 0px 0px #000000;
+	border: 0px solid #000000;
+	height: 20px;
+	width: 20px;
+	border-radius: 50px;
+	background: #2FBEFF;
+	cursor: pointer;
+}
+input[type=range]::-ms-track {
+	width: 100%;
+	height: 6px;
+	cursor: pointer;
+	animate: 0.2s;
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+	background: #C4C4C4;
+	border: 0px solid #C4C4C4;
+	border-radius: 0px;
+	box-shadow: 0px 0px 0px #000000;
+}
+input[type=range]::-ms-fill-upper {
+	background: #C4C4C4;
+	border: 0px solid #C4C4C4;
+	border-radius: 0px;
+	box-shadow: 0px 0px 0px #000000;
+}
+input[type=range]::-ms-thumb {
+	margin-top: 1px;
+	box-shadow: 0px 0px 0px #000000;
+	border: 0px solid #000000;
+	height: 20px;
+	width: 20px;
+	border-radius: 50px;
+	background: #2FBEFF;
+	cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+	background: #C4C4C4;
+}
+input[type=range]:focus::-ms-fill-upper {
+	background: #C4C4C4;
 }

frontend/app/styles/station.scss

@@ -0,0 +1,170 @@
+@import "colors";
+@import "breakpoints";
+
+
+@mixin aspect-ratio($width, $height) {
+	position: relative;
+	&:before {
+		display: block;
+		content: "";
+		width: 100%;
+		padding-top: ($height / $width) * 100%;
+	}
+	> * {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+main#station {
+	width: calc(100% - 88px);
+	margin-left: 76px;
+
+	// Sidebar
+	div#sidebar {
+		width: 64px;
+		height: calc(100% - 64px);
+		position: absolute;
+		top: 64px;
+		bottom: 0;
+		left: 0;
+		background-color: $musare_color_primary_blue;
+
+		button {
+			width: 64px;
+			height: 64px;
+			margin: 0;
+			padding: 0;
+
+			i {
+				font-size: 32px;
+				margin-top: 8px;
+			}
+		}
+
+		hr {
+			width: 64px;
+			height: 0;
+			padding: .5px;
+			background-color: white;
+		}
+	}
+
+	.player-container {
+		.iframe-container {
+			@include aspect-ratio(16, 9);
+
+			#player {
+				width: 100%;
+				height: 100%;
+			}
+
+			.paused-overlay {
+				width: 100%;
+				height: 100%;
+				background-color: rgba(0,0,0,.6);
+				pointer-events: none;
+			}
+		}
+
+		.seekerbar-container {
+			display: block;
+			width: 100%;
+			height: 4px;
+			background-color: $musare_color_white;
+
+			span {
+				display: inline-block;
+				background-color: $musare_color_primary_blue;
+				height: 100%;
+				float: left;
+			}
+		}
+	}
+
+	.content {
+		text-align: center;
+		margin-top: 16px;
+
+		.title {
+			font-size: 24px;
+			display: block;
+		}
+
+		.artists {
+			font-size: 20px;
+			font-weight: $font_weight_semilight;
+			display: block;
+			margin-top: 8px;
+		}
+
+		.time {
+			font-size: 16px;
+			display: block;
+			margin-top: 24px;
+		}
+
+		.volume-container {
+			display: block;
+			height: 24px;
+			margin-top: 6px;
+
+			i {
+				font-size: 24px;
+				float: left;
+			}
+
+			input[type="range"] {
+				width: calc(100% - 26px);
+				margin-left: 2px;
+				margin-top: 2px;
+				margin-bottom: 2px;
+				height: 20px;
+				float: left;
+			}
+		}
+
+		.ratings-container {
+			height: 24px;
+			display: inline-block;
+			margin-top: 16px;
+
+			div {
+				float: left;
+
+				&:last-child {
+					margin-left: 24px;
+				}
+
+				i {
+					font-size: 24px;
+					float: left;
+					color: $musare_color_secondary_gray;
+					cursor: pointer;
+
+					&:focus, &:hover {
+						color: $musare_color_primary_gray;
+					}
+				}
+
+				span {
+					font-size: 18px;
+					margin-left: 8px;
+					float: left;
+					color: #4A4A4A;
+				}
+			}
+		}
+	}
+
+	@include responsive(smallest) {
+
+	}
+
+	@include responsive(small) {
+
+	}
+}