117 lines
2.3 KiB
CSS
117 lines
2.3 KiB
CSS
/* ----------------------------- */
|
|
/* -------- PWA Styling -------- */
|
|
/* ----------------------------- */
|
|
html,
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
height: calc(100% + env(safe-area-inset-bottom));
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
|
|
env(safe-area-inset-left);
|
|
}
|
|
|
|
main {
|
|
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
|
}
|
|
|
|
#container {
|
|
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
|
}
|
|
|
|
/* No Scrollbar - IE, Edge, Firefox */
|
|
* {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* No Scrollbar - WebKit */
|
|
*::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* -------- CSS Button -------- */
|
|
/* ----------------------------- */
|
|
.css-button:checked + div {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.css-button + div {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* ------- User Dropdown ------- */
|
|
/* ----------------------------- */
|
|
#user-dropdown-button:checked + #user-dropdown {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#user-dropdown {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* ----- Mobile Navigation ----- */
|
|
/* ----------------------------- */
|
|
#mobile-nav-button span {
|
|
transform-origin: 5px 0px;
|
|
transition:
|
|
transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
|
|
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
|
|
opacity 0.55s ease;
|
|
}
|
|
|
|
#mobile-nav-button span:first-child {
|
|
transform-origin: 0% 0%;
|
|
}
|
|
|
|
#mobile-nav-button span:nth-last-child(2) {
|
|
transform-origin: 0% 100%;
|
|
}
|
|
|
|
#mobile-nav-button input:checked ~ span {
|
|
opacity: 1;
|
|
transform: rotate(45deg) translate(2px, -2px);
|
|
}
|
|
|
|
#mobile-nav-button input:checked ~ span:nth-last-child(3) {
|
|
opacity: 0;
|
|
transform: rotate(0deg) scale(0.2, 0.2);
|
|
}
|
|
|
|
#mobile-nav-button input:checked ~ span:nth-last-child(2) {
|
|
transform: rotate(-45deg) translate(0, 6px);
|
|
}
|
|
|
|
#mobile-nav-button input:checked ~ div {
|
|
transform: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
#mobile-nav-button input ~ div {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
#menu {
|
|
top: 0;
|
|
padding-top: env(safe-area-inset-top);
|
|
transform-origin: 0% 0%;
|
|
transform: translate(-100%, 0);
|
|
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#menu {
|
|
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
|
|
}
|
|
}
|