1
0
www.mikescher.com/www/data/css/styles_header.scss

122 lines
2.1 KiB
SCSS

@import 'styles_config';
#headerdiv {
z-index: 999;
background-color: $COL_HEADER_BG;
display: flex;
border-bottom: 1px solid #111;
box-shadow: 0 0 8px #000000;
position: fixed;
width: 100%;
.logowrapper {
flex: initial;
margin: 0;
padding: 0;
height: 42px;
a { cursor: default; }
.logo {
min-width: 197.5px; // prevents flickering after DOM load
height: 30px;
margin: 4px 0 8px 6px;
flex: initial;
}
}
.tabrow {
display: flex;
flex: auto;
.tab {
display: flex;
justify-content: center;
align-items: center;
background-color: $COL_HEADER_BTN_BG;
color: $COL_HEADER_FG;
border-left: 1px solid #000;
border-right: 1px solid #000;
font-weight: bold;
text-decoration: none;
margin: 0 0 0 20px;
padding: 2px 5px;
min-width: 64px;
text-align: center;
flex: initial;
&:hover {
cursor: pointer;
background-color: $COL_HEADER_HOVER;
}
}
.tab_active { background-color: $COL_HEADER_HIGHLIGHT; }
.tab_admin { background-color: $COL_HEADER_ADMIN; }
.tab_split {
flex: auto;
}
.tab_github {
background-color: $COL_HEADER_GITHUB;
border-left: 1px solid #111;
border-right: none;
color: black;
&:hover {
background-color: $COL_HEADER_GITHUB_HOVER;
color: black;
}
}
.tab_logout {
background-color: $COL_HEADER_LOGOUT;
border-left: 1px solid #111;
border-right: none;
color: black;
min-width: 38px;
&:hover {
background-color: $COL_HEADER_LOGOUT_HOVER;
color: black;
}
}
}
}
@include rdmedia_range(0,1) {
#headerdiv {
position: static;
flex-direction: column;
.logowrapper {
display: flex;
align-items: center;
justify-content: center;
}
.tabrow {
flex-direction: column;
.tab {
border: 1px solid #000;
font-weight: bold;
margin: 5px 10px;
}
}
}
#content {
padding-top: 0;
}
}