75 lines
1.7 KiB
CSS
75 lines
1.7 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);
|
|
border-radius: var(--round);
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
nav#default,
|
|
nav#floating,
|
|
header {
|
|
color: var(--citrus-dark);
|
|
background-attachment: fixed;
|
|
background-image: var(--nav-bg);
|
|
background-size: 6px;
|
|
}
|
|
nav#floating,
|
|
nav#default {
|
|
border-bottom-style: solid;
|
|
border-right-style: solid;
|
|
border-bottom-width: 4px;
|
|
border-right-width: 4px;
|
|
}
|
|
nav#default {
|
|
border-bottom-right-radius: var(--pad-l);
|
|
}
|
|
@media screen and (max-width: 916px) {
|
|
header {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 916px) {
|
|
header {
|
|
display: flex;
|
|
width: var(--view);
|
|
border-right-width: 4px;
|
|
border-right-style: solid;
|
|
border-bottom-width: 4px;
|
|
border-bottom-style: solid;
|
|
border-bottom-right-radius: 100px;
|
|
margin-left: calc(var(--view) - 4px);
|
|
padding: var(--pad-m) 0;
|
|
}
|
|
}
|