46 lines
1.2 KiB
CSS
46 lines
1.2 KiB
CSS
|
@import url("./variables.css");
|
||
|
|
@import url("../default/variables.css");
|
||
|
|
@import url("./nav.css");
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-attachment: local, fixed;
|
||
|
|
background-color: var(--citrus-primary);
|
||
|
|
background-image: var(--checker),
|
||
|
|
linear-gradient(var(--citrus-primary), var(--citrus-secondary));
|
||
|
|
background-size: 32px, contain;
|
||
|
|
}
|
||
|
|
body > nav {
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-blend-mode: screen;
|
||
|
|
background-image: var(--dot),
|
||
|
|
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
|
||
|
|
background-size: 6px;
|
||
|
|
& a,
|
||
|
|
button {
|
||
|
|
background-image: linear-gradient(
|
||
|
|
var(--citrus-light),
|
||
|
|
var(--citrus-primary) 20%,
|
||
|
|
var(--citrus-primary) 80%,
|
||
|
|
var(--citrus-light) 100%
|
||
|
|
);
|
||
|
|
border-radius: 0 1rem 1rem 0;
|
||
|
|
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||
|
|
inset 0 0 8px 2px var(--citrus-primary);
|
||
|
|
color: var(--citrus-dark) !important;
|
||
|
|
margin: 0 0 var(--pad-sm) 0 !important;
|
||
|
|
&[aria-current] {
|
||
|
|
background-image: linear-gradient(
|
||
|
|
darkorange,
|
||
|
|
var(--citrus-dark) 10%,
|
||
|
|
chocolate
|
||
|
|
);
|
||
|
|
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||
|
|
inset 0 0 4px 2px var(--citrus-dark);
|
||
|
|
color: var(--citrus-light) !important;
|
||
|
|
}
|
||
|
|
&:is(:hover, :focus):not([aria-current="page"]) {
|
||
|
|
box-shadow: 0 0 0 2px var(--citrus-dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|