55 lines
1.1 KiB
CSS
55 lines
1.1 KiB
CSS
.sidebar {
|
|
position: fixed;
|
|
width: calc(min(400px, 80vw));
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
left: calc(max(-400px, -80vw));
|
|
top: 0;
|
|
z-index: 5;
|
|
padding: 16px;
|
|
transition: left 0.3s ease-in-out;
|
|
background-color: var(--pico-background-color);
|
|
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
body:has(.sidebar-toggler > input:checked) .sidebar {
|
|
left: 0;
|
|
}
|
|
|
|
body:has(.sidebar-toggler > input:checked) .color-theme-toggle {
|
|
pointer-events: none;
|
|
}
|
|
|
|
label:has(input[type="checkbox"]) {
|
|
transition: left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
background-color: var(--pico-background-color);
|
|
box-shadow: 0 0 0 var(--pico-background-color);
|
|
padding: 4px;
|
|
border-radius: 2px;
|
|
margin-bottom: 0;
|
|
left: 0;
|
|
|
|
&:has(input:checked) {
|
|
left: calc(min(400px, 80vw) + 16px);
|
|
position: relative;
|
|
box-shadow: 0 0 0 16px var(--pico-background-color);
|
|
}
|
|
|
|
svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mb-0 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
main {
|
|
max-width: 95vw !important;
|
|
} |