Home Explore Help
Sign In
archive
/
MusareReact
mirror of https://github.com/Musare/MusareReact
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Used better class and id names and sassified the styles

Jonathan 9 years ago
parent
110e4ef9f7
commit
01fe8eec3c
3 changed files with 400 additions and 189 deletions
Split View Show Diff Stats
  1. 0 0
      public/css/main.css
  2. 66 70
      public/index.html
  3. 334 119
      src/sass/main.scss

File diff suppressed because it is too large
+ 0 - 0
public/css/main.css


+ 66 - 70
public/index.html
View File 

@@ -15,80 +15,76 @@
 
 	<body>
 
 		<div id="app">
 
 			<div class="loading" style="display: block;" v-show="!(home.visible || room.visible)"></div>
 
-			<div class="header" style="display: none;" v-show="home.visible || room.visible">
 
-				<div class="header-home" v-show="home.visible">
 
-					<div class="header-home-title">Musare</div>
 
-					<div class="header-home-link" v-on:click="showModal('account')">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
 
-					<div class="header-home-link" v-on:click="showModal('donate')">Donate</div>
 
-					<div class="header-home-link" v-on:click="showModal('project')">The Project</div>
 
+			<header style="display: none;" v-show="home.visible || room.visible">
 
+				<div id="header-home" v-show="home.visible">
 
+					<div class="title">Musare</div>
 
+					<div class="link" v-on:click="showModal('account')">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
 
+					<div class="link" v-on:click="showModal('donate')">Donate</div>
 
+					<div class="link" v-on:click="showModal('project')">The Project</div>
 
 				</div>
 
-				<div class="header-room" v-show="room.visible">
 
-					<div class="header-room-linkLeft" v-on:click="leaveRoom"><i class="fa fa-home" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkLeft"><i class="fa fa-plus" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkLeft"><i class="fa fa-flag" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkLeft"><i class="fa fa-step-forward" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkCenter">{{ room.name }}</div>
 
-					<div class="header-room-linkRight"><i class="fa fa-users" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkRight"><i class="fa fa-comment" aria-hidden="true"></i></div>
 
-					<div class="header-room-linkRight"><i class="fa fa-list" aria-hidden="true"></i></div>
 
+				<div id="header-room" v-show="room.visible">
 
+					<div class="left-link" v-on:click="leaveRoom"><i class="fa fa-home" aria-hidden="true"></i></div>
 
+					<div class="left-link"><i class="fa fa-plus" aria-hidden="true"></i></div>
 
+					<div class="left-link"><i class="fa fa-flag" aria-hidden="true"></i></div>
 
+					<div class="left-link"><i class="fa fa-step-forward" aria-hidden="true"></i></div>
 
+					<div class="center-link">{{ room.name }}</div>
 
+					<div class="right-link"><i class="fa fa-users" aria-hidden="true"></i></div>
 
+					<div class="right-link"><i class="fa fa-comment" aria-hidden="true"></i></div>
 
+					<div class="right-link"><i class="fa fa-list" aria-hidden="true"></i></div>
 
 				</div>
 
-			</div>
 
-			<div class="body" style="display: none;" v-show="home.visible || room.visible">
 
-				<div class="body-home" v-show="home.visible">
 
-					<div class="body-home-group" v-for="group in home.groups">
 
-						<div class="body-home-group-title">{{ group.name }}</div>
 
-						<div class="body-home-group-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
 
-						<div class="body-home-group-rooms">
 
-							<div class="body-home-group-rooms-room" v-for="room in group.rooms" v-on:click="enterRoom(room)">
 
-								<img class="body-home-group-rooms-room-image" :src="room.thumbnail" />
 
-								<div class="body-home-group-rooms-room-info">
 
-									<div class="body-home-group-rooms-room-grid-left">
 
+			</header>
 
+			<main style="display: none;" v-show="home.visible || room.visible">
 
+				<div id="home" v-show="home.visible">
 
+					<div class="group" v-for="group in home.groups">
 
+						<div class="group-title">{{ group.name }}</div>
 
+						<div class="group-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
 
+						<div class="group-rooms">
 
+							<div class="rooms-room" v-for="room in group.rooms" v-on:click="enterRoom(room)">
 
+								<img class="room-image" :src="room.thumbnail" />
 
+								<div class="room-info">
 
+									<div class="room-grid-left">
 
 										<h3>{{ room.name }}</h3>
 
-										<p class="body-home-group-rooms-room-info-description">{{ room.description }}</p>
 
+										<p>{{ room.description }}</p>
 
 									</div>
 
-									<div class="body-home-group-rooms-room-grid-right">
 
-										<div class="body-home-group-rooms-room-info-users">{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
 
+									<div class="room-grid-right">
 
+										<div>{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
 
 									</div>
 
 								</div>
 
 							</div>
 
 						</div>
 
-						<div class="body-home-group-nav"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
 
+						<div class="group-nav"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
 
 					</div>
 
 				</div>
 
-				<div class="body-room" v-show="room.visible">
 
-					<div class="body-room-player">
 
+				<div id="room" v-show="room.visible">
 
+					<div class="room-player">
 
 						<!-- Youtube stuff goes here -->
 
 					</div>
 
-					<div class="body-room-playlist">
 
-						<div class="body-room-playlist-song" v-for="song in room.playlist.songs">
 
-
 
-						</div>
 
+					<div class="room-playlist">
 
+						<div class="playlist-song" v-for="song in room.playlist.songs"></div>
 
 					</div>
 
-					<div class="body-room-chat">
 
-						<div class="body-room-chat-message" v-for="message in room.chat.messages">
 
-
 
-						</div>
 
+					<div class="room-chat">
 
+						<div class="chat-message" v-for="message in room.chat.messages"></div>
 
 					</div>
 
 					<div class="body-room-users"></div>
 
 				</div>
 
-				<div class="body-overlay" v-show="modalVisible()" v-on:click="showModal()"></div>
 
-				<div class="body-modal" v-bind:style="modalPositionStyle('register', 350, 400)">
 
-					<div class="body-modal-register-title">Register</div>
 
-					<div class="body-modal-register-exit" v-on:click="showModal()"><i class="fa fa-times" aria-hidden="true"></i></div>
 
-					<input class="body-modal-register-input" type="text" placeholder="Email..." v-model="modals.register.email"/>
 
-					<input class="body-modal-register-input" type="text" placeholder="Username..." v-model="modals.register.username"/>
 
-					<input class="body-modal-register-input" type="password" placeholder="Password..." v-model="modals.register.password"/>
 
-					<div class="g-recaptcha body-modal-register-recaptcha" data-sitekey="6Ld5jygTAAAAAEi0E1IwovUuVFhZKctMvKnY553W"></div>
 
-					<div class="body-modal-register-submit" v-on:click="register()">Submit</div>
 
+				<div id="overlay" v-show="modalVisible()" v-on:click="showModal()"></div>
 
+				<div class="modal" v-bind:style="modalPositionStyle('register', 350, 400)">
 
+					<div class="modal-title">Register</div>
 
+					<div class="modal-exit" v-on:click="showModal()"><i class="fa fa-times" aria-hidden="true"></i></div>
 
+					<input class="modal-input" type="text" placeholder="Email..." v-model="modals.register.email"/>
 
+					<input class="modal-input" type="text" placeholder="Username..." v-model="modals.register.username"/>
 
+					<input class="modal-input" type="password" placeholder="Password..." v-model="modals.register.password"/>
 
+					<div class="g-recaptcha modal-recaptcha" data-sitekey="6Ld5jygTAAAAAEi0E1IwovUuVFhZKctMvKnY553W"></div>
 
+					<div class="modal-submit" v-on:click="register()">Submit</div>
 
 				</div>
 
-				<div class="body-modal" v-bind:style="modalPositionStyle('account', 360, 200)">
 
-					<div class="body-modal-account-button" v-on:click="showModal('register')">Register</div>
 
-					<div class="body-modal-account-button" v-on:click="showModal('login')">Login</div>
 
+				<div class="modal" v-bind:style="modalPositionStyle('account', 360, 200)">
 
+					<div class="modal-account-btn" v-on:click="showModal('register')">Register</div>
 
+					<div class="modal-account-btn" v-on:click="showModal('login')">Login</div>
 
 				</div>
 
-				<div class="body-modal" v-bind:style="modalPositionStyle('donate', 360, 200)">
 
+				<div class="modal" v-bind:style="modalPositionStyle('donate', 360, 200)">
 
 					<p>Donations! Woo! :)</p>
 
 				</div>
 
-				<div class="body-modal" style="padding: 24px;" v-bind:style="modalPositionStyle('project', 600, 468)">
 
+				<div class="modal" style="padding: 24px;" v-bind:style="modalPositionStyle('project', 600, 468)">
 
 					<h2 style="margin: 0 0 8px 0;">What is Musare?</h2>
 
 					<p style="margin: 0 0 16px 0;">Musare is an open-source music website where you can listen to real-time genre specific music stations with your friends, or just alone.</p>
 
 					<h2 style="margin: 0 0 8px 0;">How can I help?</h2>
 
@@ -99,29 +95,29 @@
 
 						<li style="margin-bottom: 16px; text-align: justify;">Send us feedback! Your comments and/or suggestion are extremely valuable to us. In order to improve we need to know what you like, don't like or what you might want on the app.</li>
 
 					</ol>
 
 				</div>
 
-			</div>
 
-			<div class="footer" style="display: none;" v-show="home.visible || room.visible">
 
+			</main>
 
+			<footer style="display: none;" v-show="home.visible || room.visible">
 
 				<div class="footer-left">
 
-					<div class="footer-left-title">Stay Connected</div>
 
-					<div class="footer-left-message">Follow us on social media or send us an email!</div>
 
-					<div class="footer-left-icons">
 
-						<div class="footer-left-icons-icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
 
-						<div class="footer-left-icons-icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
 
-						<div class="footer-left-icons-icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
 
+					<div class="left-title">Stay Connected</div>
 
+					<div class="left-message">Follow us on social media or send us an email!</div>
 
+					<div class="left-icons">
 
+						<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
 
+						<div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
 
+						<div class="icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
 
 					</div>
 
 				</div>
 
 				<div class="footer-right">
 
-					<div class="footer-right-links">
 
-						<div class="footer-right-links-title">Links</div>
 
-						<a class="footer-right-links-link">Github</a>
 
-						<a class="footer-right-links-link">Feedback</a>
 
-						<a class="footer-right-links-link">FAQ</a>
 
-						<a class="footer-right-links-link">Terms</a>
 
-						<a class="footer-right-links-link">Privacy</a>
 
+					<div class="right-links">
 
+						<div class="links-title">Links</div>
 
+						<a class="link">Github</a>
 
+						<a class="link">Feedback</a>
 
+						<a class="link">FAQ</a>
 
+						<a class="link">Terms</a>
 
+						<a class="link">Privacy</a>
 
 					</div>
 
 				</div>
 
 				<div class="footer-message">© Copyright Musare: 2015 - {{ new Date().getFullYear() }}</div>
 
-			</div>
 
+			</footer>
 
 		</div>
 
 	</body>
 
 </html>

+ 334 - 119
src/sass/main.scss
View File 

@@ -1,10 +1,23 @@
 
 * { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
 html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
 
 
-#app { background-color: white; width: 100%; height: 100%; }
 
-.loading { background-color: white; width: 100%; height: 100%; background-image: url("../images/loading.gif"); background-position: center; background-size: 128px 128px; background-repeat: no-repeat; }
 
+#app {
 
+	background-color: white;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
 
-.header {
 
+.loading {
 
+	background-color: white;
 
+	width: 100%;
 
+	height: 100%;
 
+	background-image: url("../images/loading.gif");
 
+	background-position: center;
 
+	background-size: 128px 128px;
 
+	background-repeat: no-repeat;
 
+}
 
+
 
+header {
 
 	width: 100%;
 
 	height: 64px;
 
 	line-height: 64px;
 
@@ -12,134 +25,336 @@ html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
 
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
 }
 
 
-.header-home { width: 100%; height: 100%; background-color: #424242; }
 
-.header-home-title { float: left; height: 100%; color: white; padding: 0 16px 0 16px; font-weight: 300; font-size: 32px; cursor: pointer; }
 
-.header-home-link { z-index: 101; position: relative; float: right; height: 100%; color: white; padding: 0 16px 0 16px; cursor: pointer; }
 
-.header-home-link-title {  }
 
-.header-home-title:hover, .header-home-link:hover { cursor: pointer; background-color: #393939; }
 
-
 
-.header-room { width: 100%; height: 100%; background-color: #0091ea; }
 
-.header-room-linkLeft { float: left; width: 64px; color: white; text-decoration: none; font-weight: 300; font-size: 28px; }
 
-.header-room-linkCenter { display: inline-block; margin: 0 auto; color: white; text-decoration: none; font-weight: 300; font-size: 32px; }
 
-.header-room-linkRight { float: right; width: 64px; color: white; text-decoration: none; font-weight: 300; font-size: 28px; }
 
-.header-room-linkLeft:hover, .header-room-linkRight:hover { cursor: pointer; background-color: #0083d3; }
 
-
 
-.body-home { width: 100%; height: auto; }
 
-.body-home-group { width: 100%; height: 448px; margin: 64px 0 64px 0; }
 
-.body-home-group-title { float: left; clear: none; width: 100%; height: 64px; line-height: 48px; text-align: center; font-size: 48px; }
 
-.body-home-group-nav { background-color: transparent; color: rgba(0, 0, 0, 0.75); float: left; clear: none; width: 64px; height: 384px; line-height: 384px; text-align: center; font-size: 64px; cursor: pointer; }
 
-.body-home-group-nav:hover { color: #222222; }
 
-.body-home-group-rooms { white-space: nowrap; text-align: center; overflow: hidden; float: left; clear: none; width: calc(100% - 128px); height: 384px; }
 
-
 
-.body-home-group-rooms-room {
 
-	position: relative;
 
-	top: 16px;
 
-	display: inline-block;
 
-	clear: none;
 
-	width: 256px;
 
-	height: 345px;
 
-	margin: 0 16px 0 16px;
 
-	box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
-	cursor: pointer;
 
-}
 
+#header-home {
 
+	width: 100%;
 
+	height: 100%;
 
+	background-color: #424242;
 
 
-.body-home-group-rooms-room-info {
 
-	display: flex;
 
-	flex-direction: row;
 
-	align-items: center;
 
-	padding: 5px;
 
-}
 
+	.title {
 
+		float: left;
 
+		height: 100%;
 
+		color: white;
 
+		padding: 0 16px 0 16px;
 
+		font-weight: 300;
 
+		font-size: 32px;
 
+		cursor: pointer;
 
+	}
 
 
-.body-home-group-rooms-room-grid-left {
 
-	display: flex;
 
-	flex-direction: column;
 
-	width: 75%;
 
-	text-align: left;
 
-	padding-left: 10px;
 
-}
 
+	.link {
 
+		z-index: 101;
 
+		position: relative;
 
+		float: right;
 
+		height: 100%;
 
+		color: white;
 
+		padding: 0 16px 0 16px;
 
+		cursor: pointer;
 
+	}
 
 
-.body-home-group-rooms-room-grid-left h3, p {
 
-	margin: 0;
 
-	white-space: normal;
 
+	.title:hover, .link:hover {
 
+		cursor: pointer;
 
+		background-color: #393939;
 
+	}
 
 }
 
 
-.body-home-group-rooms-room-grid-right {
 
-	display: flex;
 
-	flex-direction: column;
 
-	width: 25%;
 
-}
 
-
 
-.body-home-group-rooms-room-image { width: 100%; height: 256px; }
 
-
 
-.body-overlay {
 
-	position: fixed;
 
-	top: 0;
 
-	left: 0;
 
+#header-room {
 
 	width: 100%;
 
 	height: 100%;
 
-	background-color: rgba(0, 0, 0, 0.5);
 
-	z-index: 90000;
 
-	cursor: pointer;
 
-}
 
+	background-color: #0091ea;
 
 
-.body-modal {
 
-	position: fixed;
 
-	display: block;
 
-	box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
-	background-color: white;
 
-	z-index: 90001;
 
-	padding: 12px;
 
-	transition: top 0.5s ease;
 
-	overflow: hidden;
 
-}
 
+	.left-link, .right-link {
 
+		float: left;
 
+		width: 64px;
 
+		color: white;
 
+		text-decoration: none;
 
+		font-weight: 300;
 
+		font-size: 28px;
 
 
-.body-modal-register-title, .body-modal-register-input, .body-modal-register-recaptcha, .body-modal-register-submit {
 
-	display: inline-block;
 
-	width: calc(100% - 24px);
 
-}
 
-.body-modal-register-input, .body-modal-register-recaptcha, .body-modal-register-submit {
 
-	margin: 8px 12px;
 
-}
 
-.body-modal-register-title, .body-modal-register-input, .body-modal-register-submit {
 
-	height: 42px; line-height: 42px;
 
-}
 
-.body-modal-register-title { text-align: center; font-size: 32px; margin: 0 12px; }
 
-.body-modal-register-exit { cursor: pointer; position: absolute; right: 8px; top: 8px; font-size: 24px; }
 
-.body-modal-register-input { outline: none; border: 1px solid #d3d3d3; padding-left: 8px; font-size: 16px; }
 
-.body-modal-register-recaptcha { display: block; height: 76px; overflow: hidden; }
 
-.body-modal-register-submit { cursor: pointer; color: white; background-color: #1976d2; font-size: 24px; text-align: center; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1); }
 
-.body-modal-register-submit:hover { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25); }
 
-
 
-.body-modal-account-button {
 
-	float: left;
 
-	width: 144px;
 
-	height: 144px;
 
-	line-height: 144px;
 
-	text-align: center;
 
-	background-color: #e9e9e9;
 
-	border: 1px solid #d3d3d3;
 
-	border-radius: 5px;
 
-	margin: 12px;
 
-	color: #3a3a3a;
 
-	cursor: pointer;
 
+		&:hover {
 
+			cursor: pointer;
 
+			background-color: #0083d3;
 
+		}
 
+	}
 
+
 
+	.center-link {
 
+		display: inline-block;
 
+		margin: 0 auto;
 
+		color: white;
 
+		text-decoration: none;
 
+		font-weight: 300;
 
+		font-size: 32px;
 
+	}
 
 }
 
-.body-modal-account-button:hover {
 
-	background-color: #dfdfdf;
 
+
 
+main {
 
+
 
+	#home {
 
+		width: 100%;
 
+		height: auto;
 
+
 
+		.group {
 
+			width: 100%;
 
+			height: 448px;
 
+			margin: 64px 0 64px 0;
 
+
 
+			.group-title {
 
+				float: left;
 
+				clear: none;
 
+				width: 100%;
 
+				height: 64px;
 
+				line-height: 48px;
 
+				text-align: center;
 
+				font-size: 48px;
 
+			}
 
+
 
+			.group-nav {
 
+				background-color: transparent;
 
+				color: rgba(0, 0, 0, 0.75);
 
+				float: left; clear: none;
 
+				width: 64px;
 
+				height: 384px;
 
+				line-height: 384px;
 
+				text-align: center;
 
+				font-size: 64px;
 
+				cursor: pointer;
 
+
 
+				&:hover {
 
+					color: #222222;
 
+				}
 
+			}
 
+
 
+			.group-rooms {
 
+				white-space: nowrap;
 
+				text-align: center;
 
+				overflow: hidden;
 
+				float: left;
 
+				clear: none;
 
+				width: calc(100% - 128px);
 
+				height: 384px;
 
+
 
+				.rooms-room {
 
+					position: relative;
 
+					top: 16px;
 
+					display: inline-block;
 
+					clear: none;
 
+					width: 256px;
 
+					height: 345px;
 
+					margin: 0 16px 0 16px;
 
+					box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
+					cursor: pointer;
 
+
 
+					.room-info {
 
+						display: flex;
 
+						flex-direction: row;
 
+						align-items: center;
 
+						padding: 5px;
 
+					}
 
+
 
+					.room-image {
 
+						width: 100%;
 
+						height: 256px;
 
+					}
 
+
 
+					.room-grid-left {
 
+						display: flex;
 
+						flex-direction: column;
 
+						width: 75%;
 
+						text-align: left;
 
+						padding-left: 10px;
 
+
 
+						h3, p {
 
+							margin: 0;
 
+							white-space: normal;
 
+						}
 
+					}
 
+
 
+					.room-grid-right {
 
+						display: flex;
 
+						flex-direction: column;
 
+						width: 25%;
 
+					}
 
+				}
 
+			}
 
+		}
 
+	}
 
+
 
+	#overlay {
 
+		position: fixed;
 
+		top: 0;
 
+		left: 0;
 
+		width: 100%;
 
+		height: 100%;
 
+		background-color: rgba(0, 0, 0, 0.5);
 
+		z-index: 90000;
 
+		cursor: pointer;
 
+	}
 
+
 
+	.modal {
 
+		position: fixed;
 
+		display: block;
 
+		box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
+		background-color: white;
 
+		z-index: 90001;
 
+		padding: 12px;
 
+		transition: top 0.5s ease;
 
+		overflow: hidden;
 
+
 
+		.modal-title {
 
+			text-align: center;
 
+			font-size: 32px;
 
+			margin: 0 12px;
 
+			height: 42px;
 
+			line-height: 42px;
 
+			display: inline-block;
 
+			width: calc(100% - 24px);
 
+		}
 
+
 
+		.modal-exit {
 
+			cursor: pointer;
 
+			position: absolute;
 
+			right: 8px;
 
+			top: 8px;
 
+			font-size: 24px;
 
+		}
 
+
 
+		.modal-input {
 
+			outline: none;
 
+			border: 1px solid #d3d3d3;
 
+			padding-left: 8px;
 
+			font-size: 16px;
 
+			height: 42px;
 
+			line-height: 42px;
 
+			margin: 8px 12px;
 
+			display: inline-block;
 
+			width: calc(100% - 24px);
 
+		}
 
+
 
+		.modal-recaptcha {
 
+			display: block;
 
+			height: 76px;
 
+			overflow: hidden;
 
+			margin: 8px 12px;
 
+			display: inline-block;
 
+			width: calc(100% - 24px);
 
+		}
 
+
 
+		.modal-submit {
 
+			cursor: pointer;
 
+			color: white;
 
+			background-color: #1976d2;
 
+			font-size: 24px;
 
+			text-align: center;
 
+			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
 
+			display: inline-block;
 
+			width: calc(100% - 24px);
 
+			height: 42px;
 
+			line-height: 42px;
 
+			margin: 8px 12px;
 
+
 
+			&:hover {
 
+				box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 
+			}
 
+		}
 
+
 
+		.modal-account-btn {
 
+			float: left;
 
+			width: 144px;
 
+			height: 144px;
 
+			line-height: 144px;
 
+			text-align: center;
 
+			background-color: #e9e9e9;
 
+			border: 1px solid #d3d3d3;
 
+			border-radius: 5px;
 
+			margin: 12px;
 
+			color: #3a3a3a;
 
+			cursor: pointer;
 
+
 
+			&:hover {
 
+				background-color: #dfdfdf;
 
+			}
 
+		}
 
+	}
 
 }
 
 
-.footer { width: 100%; height: 200px; background-color: #e0e0e0; padding-top: 26px; }
 
+footer {
 
+	width: 100%;
 
+	height: 200px;
 
+	background-color: #e0e0e0;
 
+	padding-top: 26px;
 
+
 
+	.footer-left {
 
+		float: left;
 
+		width: 50%;
 
+		height: 150px;
 
+		padding-left: 64px;
 
+
 
+		.left-title {
 
+			font-size: 25px;
 
+			color: #616161;
 
+			margin-bottom: 16px;
 
+		}
 
 
-.footer-left { float: left; width: 50%; height: 150px; padding-left: 64px; }
 
-.footer-left-title { font-size: 25px; color: #616161; margin-bottom: 16px; }
 
-.footer-left-message { font-size: 15px; color: #757575; margin-bottom: 16px; }
 
-.footer-left-icons {}
 
-.footer-left-icons-icon { float: left; font-size: 32px; padding-right: 16px; color: #757575; }
 
-.footer-left-icons-icon:hover { cursor: pointer; color: #222222; }
 
+		.left-message {
 
+			font-size: 15px;
 
+			color: #757575;
 
+			margin-bottom: 16px;
 
+		}
 
 
-.footer-right { float: right; width: 50%; height: 150px; padding-left: 64px; }
 
-.footer-right-links { float: right; width: 200px; }
 
-.footer-right-links-title { float: right; width: 200px; font-size: 25px; color: #616161; margin-bottom: 8px; }
 
-.footer-right-links-link { float: right; width: 200px; clear: both; font-size: 15px; color: #757575; margin-bottom: 2px; }
 
-.footer-right-links-link:hover { cursor: pointer; color: #222222; }
 
+		.left-icons {
 
+			.icon {
 
+				float: left;
 
+				font-size: 32px;
 
+				padding-right: 16px;
 
+				color: #757575;
 
 
-.footer-message { float: left; width: 100%; height: 50px; line-height: 50px; padding-left: 128px; background-color: #d3d3d3; color: #757575; }
 
+				&:hover {
 
+					cursor: pointer;
 
+					color: #222222;
 
+				}
 
+			}
 
+		}
 
+	}
 
+
 
+	.footer-right {
 
+		float: right;
 
+		width: 50%;
 
+		height: 150px;
 
+		padding-left: 64px;
 
+
 
+		.right-links {
 
+			float: right;
 
+			width: 200px;
 
+		}
 
+
 
+		.links-title {
 
+			float: right;
 
+			width: 200px;
 
+			font-size: 25px;
 
+			color: #616161;
 
+			margin-bottom: 8px;
 
+		}
 
+
 
+		.link {
 
+			float: right;
 
+			width: 200px;
 
+			clear: both;
 
+			font-size: 15px;
 
+			color: #757575;
 
+			margin-bottom: 2px;
 
+
 
+			&:hover {
 
+				cursor: pointer;
 
+				color: #222222;
 
+			}
 
+		}
 
+	}
 
+
 
+	.footer-message {
 
+		float: left;
 
+		width: 100%;
 
+		height: 50px;
 
+		line-height: 50px;
 
+		padding-left: 128px;
 
+		background-color: #d3d3d3;
 
+		color: #757575;
 
+	}
 
+}

Some files were not shown because too many files changed in this diff