185 lines
3.5 KiB
CSS
185 lines
3.5 KiB
CSS
/*
|
|
* Site header styling
|
|
*/
|
|
@charset "utf-8";
|
|
|
|
.header {
|
|
text-align: center;
|
|
background: linear-gradient(180deg, #C2AFFE, #CCBAFE);
|
|
box-shadow: 0 0 5px #8364A1;
|
|
}
|
|
|
|
.header .logo {
|
|
background: none;
|
|
height: auto;
|
|
width: auto;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
font: 100 70px/80px "SegoeUI-Light", "Segoe UI", sans-serif;
|
|
color: #B06AC4;
|
|
transition: color .2s, text-shadow .2s;
|
|
}
|
|
|
|
.header .logo:hover {
|
|
color: #C17BD5;
|
|
text-shadow: 0 0 .1em #C17BD5;
|
|
}
|
|
|
|
.header .logo:active {
|
|
color: #A059B3;
|
|
text-shadow: 0 0 .1em #A059B3;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header .logo {
|
|
font: 100 50px/60px "SegoeUI-Light", "Segoe UI", sans-serif;
|
|
}
|
|
}
|
|
|
|
.header .menu {
|
|
border-bottom: 2px solid #9475B2;
|
|
}
|
|
|
|
.header .menu .menu-nav {
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
|
|
.header .menu .menu-ucp {
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
.header .menu .menu-mob {
|
|
display: none;
|
|
}
|
|
|
|
.header .menu .menu-item {
|
|
margin: 0 8px -2px;
|
|
display: inline-block;
|
|
min-width: 75px;
|
|
padding: 5px;
|
|
border-bottom: 2px solid #8364A1;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
transition: border-color .5s, background .3s;
|
|
}
|
|
|
|
.header .menu .menu-item.avatar {
|
|
width: auto;
|
|
padding-left: 36px;
|
|
background: url('/pixel.png') no-repeat scroll left center / contain transparent;
|
|
}
|
|
|
|
.header .menu .menu-item:hover {
|
|
border-color: #503180 !important;
|
|
}
|
|
|
|
.header .menu .menu-item:active {
|
|
border-color: #503180 !important;
|
|
background-color: #503180 !important;
|
|
}
|
|
|
|
.header .menu .menu-donate:hover {
|
|
border-color: #EE9400 !important;
|
|
}
|
|
|
|
.header .menu .menu-donate:active {
|
|
border-color: #EE9400 !important;
|
|
background-color: #EE9400 !important;
|
|
}
|
|
|
|
@media (max-width: 1283px) and (min-width: 930px) {
|
|
|
|
.header .menu {
|
|
border: 0;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.header .menu .menu-nav {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.header .menu .menu-nav,
|
|
.header .menu .menu-ucp {
|
|
display: block;
|
|
float: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.header .menu .menu-item {
|
|
min-width: 120px;
|
|
border: 0;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.header .menu .menu-nav .menu-item {
|
|
min-width: 120px;
|
|
border-bottom: 1px solid #8364A1;
|
|
}
|
|
|
|
.header .menu .menu-ucp .menu-item {
|
|
min-width: 120px;
|
|
border-top: 1px solid #8364A1;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 930px) {
|
|
|
|
.header .menu .menu-nav, .header .menu .menu-ucp {
|
|
float: none;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.header .menu .menu-hid {
|
|
display: block;
|
|
}
|
|
|
|
.header .menu .menu-mob {
|
|
display: block;
|
|
}
|
|
|
|
.header .menu .menu-item.avatar {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.header .menu .menu-mob .menu-item {
|
|
width: 100px;
|
|
}
|
|
|
|
.header .menu .menu-nav .menu-item, .header .menu .menu-ucp .menu-item {
|
|
display: block;
|
|
border-top: 0;
|
|
border-bottom: 1px solid #8364A1;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.header .menu .menu-nav:before {
|
|
content: "Navigation";
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.header .menu .menu-ucp:before {
|
|
content: "User Settings";
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
}
|
|
|
|
.headerNotify {
|
|
margin: 10px auto;
|
|
padding: 10px;
|
|
width: auto;
|
|
max-width: 1024px;
|
|
border: 1px solid #9475B2;
|
|
box-shadow: 0 0 3px #9475B2;
|
|
border-radius: 3px;
|
|
background: #D3BFFF;
|
|
display: block;
|
|
text-align: center;
|
|
}
|