piair/MsRewards
1
0
Fork 0
mirror of https://gitea.augustin64.fr/piair/MsRewards-Reborn.git synced 2025-06-12 14:14:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add sidebar toggling

Browse Source
This commit is contained in:
augustin64
2023-08-29 15:30:03 +02:00
parent fcc7f4d46e
commit 221921e3f3
2 changed files with 95 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Flask/static/css/flask.css
View File

@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* Colors */
:root {
--color-background0: #212121;
--color-background1: #212121;
@ -15,6 +16,13 @@
--color-transparent: rgba(0, 0, 0, 0);
}
/* Sidebar size is the left panel size when opened */
:root {
--sidebar-size: max(20vw, 160px);
--sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
--sidebar-sz-plus30: calc(var(--sidebar-size) + 30px);
}
html {
text-align: center;
font-family: Montserrat;
@ -197,7 +205,6 @@ body {
border: 1px solid var(--color-border0);
border-radius: 5px;
padding: 20px;
width: 80%;
height: 80%;
}
@ -318,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator {
input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/** Sidebar stuff */
#slide-sidebar {
display: none;
}
label[for="slide-sidebar"] {
all: initial;
z-index: 1; /* Always on top */
position: absolute;
top: 20px;
left: var(--sidebar-sz-plus30);
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
background: var(--color-transparent);
}
label[for="slide-sidebar"]:after {
all:unset;
}
input:checked + label[for="slide-sidebar"] {
background: var(--color-transparent);
}
#slide {
border-style: solid;
border-radius: 4px;
border-width: 1px;
border-color: var(--color-border0);
color: var(--color-text);
background-color: var(--color-background0);
padding: 8px 8px 2px 8px;
}
/* When opened behaviour */
.left-pannel {
width: var(--sidebar-size);
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
.content {
position: absolute;
top: 0;
left: var(--sidebar-sz-plus10);
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
padding: 0 25px;
background-color: var(--color-background0); /* we need no transparency when switching */
overflow: hidden;
}
/* When closed behaviour */
input:checked#slide-sidebar~label {
left: 20px;
}
input:checked#slide-sidebar~.left-pannel {
display: none;
transition: display 0s 0.5s;
}
input:checked#slide-sidebar~.content {
left: 0;
}