60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
// Handles the unified rules for the search and nav menus, as well as the footer, user options and page options.
|
|
|
|
#site-header-search-bar,
|
|
.site-nav-menu {
|
|
border-radius: calc(var(--space) / 2);
|
|
background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
|
|
box-shadow: inset 0 0 3px .5px var(--blue-3), 0 0 3px .1px var(--blue-7);
|
|
border-top: 2px solid var(--blue-3);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
|
|
border-top: 2px solid var(--blue-4);
|
|
}
|
|
}
|
|
|
|
.site-header-user button,
|
|
#site-header-user-links,
|
|
#page-header-options-links,
|
|
#site-footer {
|
|
background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
|
|
}
|
|
}
|
|
|
|
#site-header-user-links,
|
|
#page-header-options-links {
|
|
display: none;
|
|
position: absolute;
|
|
margin-top: calc(var(--space) / 2);
|
|
box-shadow: 0 0 3px 1px var(--blue-7);
|
|
z-index: 12;
|
|
right: 0;
|
|
border: 2px solid var(--blue-3);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
box-shadow: 0 0 3px 1px var(--blue-1);
|
|
border: 2px solid var(--blue-2);
|
|
}
|
|
}
|
|
|
|
.site-header-user:focus-within #site-header-user-links,
|
|
#page-header-options:focus-within #page-header-options-links {
|
|
display: flex;
|
|
}
|
|
|
|
.drop-link-list {
|
|
display: flex;
|
|
gap: var(--space);
|
|
flex-direction: column;
|
|
padding: var(--space);
|
|
width: max-content;
|
|
}
|
|
|
|
.drop-link-list a:link,
|
|
.drop-link-list a:visited {
|
|
color: var(--blue-7);
|
|
text-shadow: 0 0 3px var(--blue-1);
|
|
} |