BirdNET-stream/www/assets/styles/menu.css

154 lines
2.6 KiB
CSS
Raw Permalink Normal View History

2022-08-15 11:42:28 +02:00
nav {
2022-08-16 07:05:49 +02:00
--nav-width: 20em;
--nav-bg: lightgrey;
--burger-size: 5em;
--burger-weight: 3px;
2022-08-15 11:42:28 +02:00
position: fixed;
top: 0;
left: 0;
2022-08-16 07:05:49 +02:00
width: 0;
2022-08-16 05:21:53 +02:00
z-index: 10;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler {
z-index: 21;
height: var(--burger-size);
width: var(--burger-size);
align-items: center;
justify-content: center;
padding: 0.6rem;
position: fixed;
2022-08-15 11:42:28 +02:00
cursor: pointer;
opacity: 0;
}
2022-08-16 07:05:49 +02:00
.hamburger {
position: fixed;
2022-08-15 11:42:28 +02:00
top: 0;
left: 0;
2022-08-16 07:05:49 +02:00
height: var(--burger-size);
width: var(--burger-size);
padding: 0.6rem;
2022-08-15 11:42:28 +02:00
display: flex;
align-items: center;
justify-content: center;
2022-08-16 07:05:49 +02:00
z-index: 20;
opacity: 1;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.hamburger>div {
2022-08-15 11:42:28 +02:00
position: relative;
top: 0;
left: 0;
background: black;
height: var(--burger-weight);
2022-08-15 11:42:28 +02:00
width: 75%;
2022-08-16 07:05:49 +02:00
transition: all 0.4s ease;
2022-08-15 11:42:28 +02:00
color: #000;
}
2022-08-16 07:05:49 +02:00
.hamburger>div::before,
.hamburger>div::after {
2022-08-15 11:42:28 +02:00
content: '';
position: absolute;
top: 10px;
2022-08-15 11:42:28 +02:00
background: black;
width: 100%;
height: var(--burger-weight);
2022-08-16 07:05:49 +02:00
transition: all 0.4s ease;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.hamburger>div::after {
top: -10px;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div {
background-color: var(--nav-bg);
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div::before {
2022-08-15 11:42:28 +02:00
top: 0;
transform: rotate(45deg);
background: black;
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div::after {
2022-08-15 11:42:28 +02:00
top: 0;
transform: rotate(135deg);
background: black;
}
2022-08-16 07:05:49 +02:00
.menu {
2022-08-15 11:42:28 +02:00
height: 100vh;
width: 0;
visibility: hidden;
}
2022-08-16 07:05:49 +02:00
.toggler:checked~.menu {
2022-08-15 11:42:28 +02:00
width: fit-content;
height: fit-content;
background-color: var(--nav-bg) !important;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.menu>ul {
2022-08-15 11:42:28 +02:00
display: flex;
flex-direction: column;
position: fixed;
width: 0;
height: calc(100vh - var(--burger-size));
2022-08-15 11:42:28 +02:00
padding-left: 1em;
padding-right: 1em;
2022-08-16 07:05:49 +02:00
margin-top: var(--burger-size);
2022-08-15 11:42:28 +02:00
visibility: hidden;
background-color: var(--nav-bg);
2022-08-16 07:05:49 +02:00
z-index: 10;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.menu>ul>li {
2022-08-15 11:42:28 +02:00
list-style: none;
padding: 0.5rem;
}
2022-08-16 07:05:49 +02:00
.menu>ul>li>a {
2022-08-15 11:42:28 +02:00
color: black;
text-decoration: none;
font-size: var(--font-size);
2022-08-15 11:42:28 +02:00
}
.menu>ul>li>a:hover, .menu>ul>li>a.active {
color: orange;
}
2022-08-16 07:05:49 +02:00
.toggler~.fill {
visibility: hidden;
width: 0;
2022-08-16 07:05:49 +02:00
}
.toggler:checked~.fill {
background-color: var(--nav-bg);
position: fixed;
2022-08-15 11:42:28 +02:00
top: 0;
left: 0;
height: var(--burger-size);
2022-08-15 11:42:28 +02:00
width: var(--nav-width);
2022-08-16 07:05:49 +02:00
z-index: 10;
transition: visibility .5s, width .5s;
visibility: visible;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler:checked~.menu>ul {
width: var(--nav-width);
2022-08-15 11:42:28 +02:00
opacity: 1;
transition: visibility .5s, width .5s;
2022-08-15 11:42:28 +02:00
visibility: visible;
}
2022-08-16 07:05:49 +02:00
@media screen and (max-width: 700px) {
nav {
--burger-size: 4em;
}
2022-08-15 11:42:28 +02:00
}