MusareFork/public/css/app.css

* { 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; }

.header {
	width: 100%;
	height: 64px;
	line-height: 64px;
	text-align: center;
	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 {}

.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;
}

.body-home-group-rooms-room-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
}

.body-home-group-rooms-room-grid-left {
	display: flex;
	flex-direction: column;
	width: 75%;
	text-align: left;
	padding-left: 10px;
}

.body-home-group-rooms-room-grid-left h3, p {
	margin: 0;
	white-space: normal;
}

.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-room {}

.body-room-player {}

.body-room-playlist {}
.body-room-playlist-song {}

.body-room-chat {}
.body-room-chat-message {}
.body-room-chat-input {}
.body-room-chat-send {}

.body-room-users {}

.body-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 90000;
	cursor: pointer;
}

.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;
}

.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;
}
.body-modal-account-button:hover {
	background-color: #dfdfdf;
}

.footer { width: 100%; height: 200px; background-color: #e0e0e0; padding-top: 26px; }

.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; }

.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; }

.footer-message { float: left; width: 100%; height: 50px; line-height: 50px; padding-left: 128px; background-color: #d3d3d3; color: #757575; }