1
0
www.mikescher.com/www/data/css/styles_header.scss
2018-01-21 19:35:49 +01:00

117 lines
1.9 KiB
SCSS

@import 'styles_config';
#headerdiv {
z-index: 999;
background-color: #333;
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;
.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: #222;
color: $COL_TEXT_NORMAL;
border-left: 1px solid #000;
border-right: 1px solid #000;
font-weight: bold;
text-decoration: none;
margin: 0px 0px 0px 20px;
padding: 2px 5px;
min-width: 64px;
text-align: center;
flex: initial;
&:hover {
cursor: pointer;
background-color: #555;
}
}
.tab_active { background-color: $COL_HIGHLIGHT_RED; }
.tab_split {
flex: auto;
}
.tab_github {
background-color: $COL_GITHUB;
border-left: 1px solid #111;
border-right: none;
color: black;
&:hover {
background-color: #c9510c;
color: black;
}
}
.tab_logout {
background-color: #A00;
border-left: 1px solid #111;
border-right: none;
color: black;
&:hover {
background-color: #c9510c;
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;
}
}