furizon_webint/res/styles/navbar.css

91 lines
1.7 KiB
CSS

nav#topbar.closed {
top: -10rem;
}
nav#topbar {
background-color :var(--card-background-color);
width: 100vw;
position: sticky;
display: inline-block;
z-index: 9999;
padding: 0.2rem 0.7em;
margin: 0;
white-space: nowrap;
top: 0rem;
transition: top 300ms;
line-height: 2em;
max-width:100%;
overflow-x: hidden;
}
nav#topbar a {
display: inline-block;
padding: 0 0.6em;
line-height: 2em;
margin: 0;
white-space: nowrap;
vertical-align: middle;
}
nav#topbar .navbar-propic {
margin-right: 0.3rem;
border-radius: 0.2rem;
vertical-align: sub;
}
nav#topbar a.align-right {
float: right;
}
nav img {
height: 1.2em;
display: inline;
vertical-align:middle;
box-sizing: border-box;
}
nav a#mobileMenu {
display: none;
}
nav .navbar-container {
overflow: hidden;
}
@media only screen and (max-width: 924px) {
nav#topbar::before {
transition-delay: 200ms;
transition-property: background-image;
}
nav#topbar:has(.navbar-container:not(.open))::before{
background-image: url('/res/furizon.png');
background-size: contain;
background-position: 50%;
background-origin: content-box;
}
nav#topbar.closed {
top: -100rem;
}
nav#topbar a#mobileMenu {
display: block;
max-width: 3rem;
}
nav#topbar .navbar-container {
transition: max-height 200ms;
display: flex;
flex-direction: column;
}
nav#topbar .navbar-container:not(.open) {
max-height: 0rem;
}
nav#topbar .navbar-container.open {
max-height: 30rem;
}
}