115 lines
2.5 KiB
Plaintext
115 lines
2.5 KiB
Plaintext
#topbar {
|
|
display: grid;
|
|
}
|
|
|
|
#top-logo {
|
|
height: fit-content;
|
|
align-self: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#top-logo img{
|
|
max-width: 100%;
|
|
max-height: calc(var(--space) * 4);
|
|
}
|
|
|
|
.searchButton {
|
|
position: absolute;
|
|
right: var(--space);
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
border: none;
|
|
background: none;
|
|
border-left: 1px solid black;
|
|
cursor: pointer;
|
|
padding: var(--space);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#nav-search {
|
|
height: 100%;
|
|
justify-self: center;
|
|
}
|
|
|
|
#nav-search-bar {
|
|
border-radius: calc(var(--space) / 2);
|
|
// background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
|
|
// background-color: var(--blue-2);
|
|
background-color: var(--white);
|
|
border: 1px solid var(--black);
|
|
border-bottom: 3px solid var(--black);
|
|
font-size: calc(var(--space) *2);
|
|
padding: var(--space);
|
|
height: 100%;
|
|
}
|
|
|
|
#nav-search-bar:hover {
|
|
box-shadow: inset 0 0 3px 3px var(--blue-3);
|
|
}
|
|
|
|
#nav-search-bar:focus {
|
|
outline: 3px solid var(--blue-7);
|
|
box-shadow: inset 0 0 3px 3px var(--blue-3);
|
|
background-color: var(--white);
|
|
border-bottom: 3px inset var(--blue-7);
|
|
background-image: none;
|
|
}
|
|
|
|
#nav-search form {
|
|
height: 100%;
|
|
}
|
|
|
|
#user-menu-button, #page-menu-button {
|
|
border-bottom: 3px solid var(--blue-6);
|
|
border-width: 0 0 3px 0;
|
|
}
|
|
|
|
#user-menu-button, #user-menu-list, #page-menu-button, #page-menu-list {
|
|
width: fit-content;
|
|
font-size: 1em;
|
|
overflow: clip;
|
|
text-overflow: ellipsis;
|
|
padding: var(--space);
|
|
background-color: var(--blue-2);
|
|
// border-radius: calc(var(--space) / 2 );
|
|
// box-shadow: inset 0 0 3px 3px var(--blue-1);
|
|
color: var(--blue-7);
|
|
}
|
|
|
|
#user-menu {
|
|
position: relative;
|
|
}
|
|
|
|
#user-menu-button {
|
|
height: 100%;
|
|
}
|
|
|
|
#page-menu-list, #user-menu-list {
|
|
position: absolute;
|
|
margin-top: calc(var(--space) / 2);
|
|
display: none;
|
|
z-index: 1;
|
|
// border-top: 3px solid var(--blue-6);
|
|
border-width: 3px 0 0 0;
|
|
box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
|
|
}
|
|
|
|
#page-actions, #page-views, #user-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: max-content;
|
|
gap: var(--space);
|
|
}
|
|
|
|
#user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button {
|
|
background-color: var(--blue-3);
|
|
box-shadow: inset 0 0 3px 3px var(--blue-4), 0 0 2px .5px var(--blue-7);
|
|
}
|
|
|
|
#user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list {
|
|
display: flex;
|
|
}
|
|
|
|
.page-link-list > .mw-list-item a {
|
|
color: var(--blue-7);
|
|
} |