PCv5/sfiles/light.css

/*
	fonts
*/

@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }


/* Global */

body {
	margin: 0;
	background: #ffffff;
	font-family: sans-serif;
}

nav a {
	color: #ffffff; opacity: .7;
	text-decoration: none;
	transition: opacity .15s ease;
}
nav a:hover,
nav a:focus {
	opacity: 1;
}

.light-hidden {
	display: none;
}

/* Menu */

#light-menu {
	list-style: none;
	display: flex; flex-direction: row; align-items: center;
	width: 100%; height: 40px;
	overflow-x: auto; overflow-y: hidden;
	margin: 0; padding: 0;
	text-indent: 0;
	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

#logo {
	position: relative; display: block;
	height: 100%; opacity: 1;
	background: -moz-linear-gradient(left, #bf1c11, #ba1203);
	background: -webkit-linear-gradient(left, #bf1c11, #ba1203);
}
/*#logo::after {
	position: absolute; left: 100%; top: 50%;
	height: 0; width: 0;
	border: solid transparent; content: " ";
	border-left-color: #ba1203;
	border-width: 4px;
	margin-top: -4px;
}*/
#logo img {
	width: 40px;
	margin: 0; padding: 0;
	margin-bottom: -4.5px;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
	transition: filter .15s ease;
}
#logo:hover img,
#logo:focus img {
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}

#light-menu > li {
	display: flex; flex-direction: column;
	align-items: center; flex-grow: 1;
	height: 100%;
	text-align: center;
	font-family: Raleway; font-size: 13px;
	color: #ffffff;
}
#light-menu li {
	padding: 0 2px;
}
#light-menu li > a {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	width: 100%; height: 100%;
}
#light-menu li > a > div {
	display: none;
	font-size: 12px;
}

#light-menu li > a > svg {
	display: block; width: 20px; flex-shrink: 0;
	margin: 0 auto 5px auto;
}

#light-menu li span[notifications]:not([notifications="0"])::before {
	content: attr(notifications);
	display: inline-block; margin-right: 6px;
	vertical-align: middle;
	padding: 0 5px 0 4px; border-radius: 5px;
	font-family: NotoSans;
	background: #ffffff; color: #000000;
}


#menu {
	width: 100%; height: 0; overflow-x: hidden;
	font-family: NotoSans; font-size: 12px;
	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	transition: .1s ease;
}
#menu.opened {
	height: 100%;
	overflow-y: auto;
}

#menu > div {
	width: 100%;
	display: none;
}
#menu > div.opened {
	display: block;
}
#menu h2 {
	margin: 10px 0 10px 40px;
	font-family: Raleway; font-size: 15px;
	color: #ffffff;
}
#menu h2 > svg {
	width: 30px; vertical-align: middle;
}
#menu h2 > img {
	width: 64px; margin-right: 10px;
	vertical-align: middle; border-radius: 50%;
}

#menu h3 {
	margin: 10px 0 10px 40px;
	font-family: Raleway; font-size: 13px;
	color: #ffffff;
}
#menu hr {
	margin: 10px 15px 0 15px;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, .15);
}

#menu > div > a,
#menu span {
	display: block; margin: 10px 15px;
}
#menu span {
	/*font-style: italic;*/ color: #b8b8b8;
	font-size: 10px;
}
#menu span > a {
	display: inline;
	margin: 0; font-style: normal;
	font-size: 12px;
}
#menu a > img {
	vertical-align: middle;
	margin-right: 15px;
}
#menu a > svg {
	width: 20px; height: 20px; vertical-align: middle;
	margin-right: 10px;
}
#menu ul {
	list-style: none;
	margin: 10px 15px; padding: 0;
	color: #b8b8b8;
}
#menu li {
	margin: 5px 0;
}

@media all and (min-width: 550px) {
	#light-menu {
		height: 60px;
	}
	#logo img {
		width: 60px;
	}
	#light-menu li > a > div {
		display: block;
	}
}

#menu form input {
	display: block;
	margin: 5px 15px; padding: 5px 10px;
	font-size: 14px;
	background: #e8e8e8; transition: background .15s ease;
}
#menu form input:focus {
	background: #ffffff;
}
#menu form input:first-child {
	margin-bottom: 0; border-bottom: none;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
}
#menu form input:nth-child(2) {
	margin-top: 0; border-top: 1px solid #dddddd;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
#menu form a {
	display: block; margin-left: 15px;
}


/* Header */

header {
	padding: 10px 10px 0px 10px;
	background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
}
header svg {
	width: 24px; height: 24px; vertical-align: middle;
	transition: .15s ease;
}
header a:hover > svg,  header a:focus > svg {
	filter: brightness(.5);
}

header input[type="search"] {
	width: 100%;
	border: 0; border-radius: 1px;
	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
}

#spotlight {
	display: flex;
	align-items: center; justify-content: space-around;
}
#spotlight a {
	padding: 5px 10px; margin: 5px 0;
	color: #727272; font-size: 14px;
	/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
	transition: border .15s ease;
	text-decoration: none;
}
#spotlight a:hover, header #spotlight a:focus {
	color: #404040;
}