91 lines
1.9 KiB
CSS
91 lines
1.9 KiB
CSS
.navbar {
|
|
color: var(--citrus-dark);
|
|
& section {
|
|
background: var(--details-bg);
|
|
box-shadow: var(--details-shine);
|
|
border: var(--details-border);
|
|
& h3 {
|
|
filter: drop-shadow(2px 0 var(--citrus-dark))
|
|
drop-shadow(-2px 0 var(--citrus-dark))
|
|
drop-shadow(0 2px var(--citrus-dark))
|
|
drop-shadow(0px -2px var(--citrus-dark));
|
|
color: var(--citrus-light);
|
|
}
|
|
}
|
|
& li :is(a, button) {
|
|
background: var(--button-bg);
|
|
box-shadow: var(--button-shine);
|
|
border: var(--button-border);
|
|
color: inherit;
|
|
&[aria-current] {
|
|
background: var(--button-current-bg);
|
|
box-shadow: var(--button-current-shine);
|
|
border: var(--button-current-border);
|
|
color: var(--citrus-light);
|
|
}
|
|
&:is(:hover, :focus):not([aria-current]) {
|
|
background: var(--button-hover-bg);
|
|
box-shadow: var(--button-hover-shine);
|
|
border: var(--button-hover-border);
|
|
transition:
|
|
background-image var(--trans),
|
|
border-color var(--trans),
|
|
box-shadow var(--trans);
|
|
color: var(--citrus-mix-dark);
|
|
}
|
|
}
|
|
}
|
|
.navbar section,
|
|
.navbar li :is(a, button) {
|
|
border-radius: var(--round);
|
|
}
|
|
#default,
|
|
#floating,
|
|
header {
|
|
color: var(--citrus-dark);
|
|
background-attachment: fixed;
|
|
background-image: var(--nav-bg);
|
|
background-size: 6px;
|
|
}
|
|
#floating,
|
|
#default {
|
|
border-bottom-style: solid;
|
|
border-right-style: solid;
|
|
border-bottom-width: 4px;
|
|
border-right-width: 4px;
|
|
}
|
|
#default {
|
|
border-bottom-right-radius: var(--pad-l);
|
|
}
|
|
body {
|
|
position: relative;
|
|
z-index: -3;
|
|
& main {
|
|
position: inherit;
|
|
z-index: -2;
|
|
}
|
|
& #sidebar {
|
|
position: inherit;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 916px) {
|
|
header {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 916px) {
|
|
header {
|
|
border-bottom-right-radius: var(--pad-xl);
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 4px;
|
|
border-right-style: solid;
|
|
border-right-width: 4px;
|
|
display: flex;
|
|
margin-left: calc(var(--view) - 4px);
|
|
padding: var(--pad-m) 0;
|
|
width: var(--view);
|
|
}
|
|
}
|