piair/MsRewards-Reborn
2
2
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout d'un bouton pour activer/désactiver le panneau latéral #2

Merged
piair merged 3 commits from :master into master 2023-08-29 18:26:37 +02:00
Conversation 0 Commits 3 Files Changed 2 +154 -45
2 changed files with 154 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,28 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url('https://fonts.googleapis.com/css?family=Montserrat');
/* Colors */
:root {
--color-background0: #212121;
--color-background1: #212121;
--color-background2: dimgray;
--color-border0: #FFFFFF;
--color-border1: grey;
--color-text: #FFFFFF;
--color-green: green;
--color-lime: #BADA55;
--color-red: red;
--color-switch-button: #FFFFFF;
--color-switch-background: grey;
--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 { html {
text-align: center; text-align: center;
font-family: Montserrat; font-family: Montserrat;
@ -21,7 +45,7 @@ table {
} }
a { a {
color: white; color: var(--color-text);
} }
@ -30,11 +54,11 @@ input[type=text] {
width: 90%; width: 90%;
padding: 12px 20px; padding: 12px 20px;
margin: 8px 0; margin: 8px 0;
background-color: #212121; background-color: var(--color-background1);
border: 2px solid grey; border: 2px solid var(--color-border1);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: white; color: var(--color-text);
text-align: center; text-align: center;
} }
@ -44,18 +68,18 @@ input[type=password] {
padding: 12px 20px; padding: 12px 20px;
margin: 8px 0; margin: 8px 0;
text-align: center; text-align: center;
border: 2px solid grey; border: 2px solid var(--color-border1);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: white; color: var(--color-text);
background-color: #212121; background-color: var(--color-background1);
} }
.button{ .button{
border-radius: 4px; border-radius: 4px;
border: 2px solid grey; border: 2px solid var(--color-border1);
background-color: #212121; background-color: var(--color-background1);
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
@ -67,13 +91,13 @@ input[type=password] {
.ban{ .ban{
border-radius: 4px; border-radius: 4px;
border: 2px solid red; border: 2px solid var(--color-red);
background-size: 200% 100%; background-size: 200% 100%;
background-image: linear-gradient(to right, #212121 50%, red 50%); background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-red) 50%);
-webkit-transition: background-position 0.5s; -webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s; -moz-transition: background-position 0.5s;
transition: background-position 0.5s; transition: background-position 0.5s;
color: white; color: var(--color-text);
padding: 12px 0px; padding: 12px 0px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
@ -83,16 +107,16 @@ input[type=password] {
} }
.confirm{ .confirm{
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
background-size: 200% 100%; background-size: 200% 100%;
background-image: linear-gradient(to right, #212121 50%, green 50%); background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
-webkit-transition: background-position 0.5s; -webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s; -moz-transition: background-position 0.5s;
transition: background-position 0.5s; transition: background-position 0.5s;
border: 2px solid grey; border: 2px solid var(--color-border1);
} }
.confirm:hover{ .confirm:hover{
@ -100,16 +124,16 @@ input[type=password] {
} }
.confirm{ .confirm{
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
background-size: 200% 100%; background-size: 200% 100%;
background-image: linear-gradient(to right, #212121 50%, green 50%); background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
-webkit-transition: background-position 0.5s; -webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s; -moz-transition: background-position 0.5s;
transition: background-position 0.5s; transition: background-position 0.5s;
border: 2px solid grey; border: 2px solid var(--color-border1);
} }
.confirm:hover{ .confirm:hover{
@ -117,18 +141,18 @@ input[type=password] {
} }
.unselected{ .unselected{
border-radius: 4px; border-radius: 4px;
border: 2px solid grey; border: 2px solid var(--color-border1);
background-color: #212121; background-color: var(--color-background1);
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
} }
.selected{ .selected{
border-radius: 4px; border-radius: 4px;
border: 2px solid grey; border: 2px solid var(--color-border1);
background-color: dimgray; background-color: var(--color-background2);
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
@ -136,11 +160,11 @@ input[type=password] {
button:hover{ button:hover{
border: 2px solid white; border: 2px solid var(--color-border0);
cursor: pointer; cursor: pointer;
} }
input:hover{ input:hover{
border: 2px solid white; border: 2px solid var(--color-border0);
} }
@ -148,17 +172,17 @@ input:hover{
.submit{ .submit{
border-radius: 4px; border-radius: 4px;
border: 2px solid grey; border: 2px solid var(--color-border1);
background-color: #212121; background-color: var(--color-background1);
color: white; color: var(--color-text);
padding: 12px 20px; padding: 12px 20px;
width: 100%; width: 100%;
margin: 10px; margin: 10px;
} }
body { body {
background-color: #212121; background-color: var(--color-background0);
color: #fff; color: var(--color-text);
height: 100%; height: 100%;
} }
@ -167,7 +191,7 @@ body {
.left-pannel{ .left-pannel{
flex: 1; flex: 1;
margin: 20px; margin: 20px;
border: 1px solid #fff; border: 1px solid var(--color-border0);
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
width: 80%; width: 80%;
@ -178,10 +202,9 @@ body {
.content{ .content{
flex: 3; flex: 3;
margin: 20px; margin: 20px;
border: 1px solid #fff; border: 1px solid var(--color-border0);
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
width: 80%;
height: 80%; height: 80%;
} }
@ -228,7 +251,7 @@ label {
text-indent: -9999px; text-indent: -9999px;
width: 100px; width: 100px;
height: 50px; height: 50px;
background: grey; background: var(--color-switch-background);
display: block; display: block;
border-radius: 100px; border-radius: 100px;
position: relative; position: relative;
@ -245,13 +268,13 @@ label:after {
left: 5px; left: 5px;
width: 40px; width: 40px;
height: 40px; height: 40px;
background: #fff; background: var(--color-switch-button);
border-radius: 90px; border-radius: 90px;
transition: 0.3s; transition: 0.3s;
} }
input:checked + label { input:checked + label {
background: #bada55; background: var(--color-lime);
} }
input:checked + label:after { input:checked + label:after {
@ -268,16 +291,16 @@ select {
/*height: 100%;*/ /*height: 100%;*/
padding: 12px 20px; padding: 12px 20px;
margin: 8px 0; margin: 8px 0;
background-color: #212121; background-color: var(--color-background1);
border: 2px solid grey; border: 2px solid var(--color-border1);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: white; color: var(--color-text);
text-align: center; text-align: center;
} }
select:hover { select:hover {
border: 2px solid white; border: 2px solid var(--color-border0);
} }
@ -285,11 +308,11 @@ input[type="time"] {
width: 70%; width: 70%;
padding: 8px 12px; padding: 8px 12px;
margin: 8px 0; margin: 8px 0;
background-color: #212121; background-color: var(--color-background1);
border: 2px solid grey; border: 2px solid var(--color-border1);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: white; color: var(--color-text);
text-align: center; text-align: center;
} }
@ -302,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator {
input[type="time"]::-webkit-calendar-picker-indicator:hover { input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1; 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;
}

11
Flask/templates/base.html
View File

@ -12,6 +12,17 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<input id="slide-sidebar" type="checkbox" role="button"/>
<label for="slide-sidebar">
<div id="slide">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 6l16 0"></path>
<path d="M4 12l16 0"></path>
<path d="M4 18l16 0"></path>
</svg>
</div>
</label>
<div class="left-pannel"> <div class="left-pannel">
{% block left_pannel %} {% block left_pannel %}
{% endblock %} {% endblock %}