augustin64/MsRewards-Reborn
1
0
Fork 0
forked from piair/MsRewards-Reborn
Code Pull Requests Activity

Merge pull request 'Ajout d'un bouton pour activer/désactiver le panneau latéral' (#2) from augustin64/MsRewards-Reborn:master into master

Browse Source 
Reviewed-on: piair/MsRewards-Reborn#2
This commit is contained in:
piair 2023-08-29 18:26:36 +02:00
commit 2433609cd8
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');
/* 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 {
text-align: center;
font-family: Montserrat;
@ -21,7 +45,7 @@ table {
}
a {
color: white;
color: var(--color-text);
}
@ -30,11 +54,11 @@ input[type=text] {
width: 90%;
padding: 12px 20px;
margin: 8px 0;
background-color: #212121;
border: 2px solid grey;
background-color: var(--color-background1);
border: 2px solid var(--color-border1);
border-radius: 4px;
outline: none;
color: white;
color: var(--color-text);
text-align: center;
}
@ -44,18 +68,18 @@ input[type=password] {
padding: 12px 20px;
margin: 8px 0;
text-align: center;
border: 2px solid grey;
border: 2px solid var(--color-border1);
border-radius: 4px;
outline: none;
color: white;
background-color: #212121;
color: var(--color-text);
background-color: var(--color-background1);
}
.button{
border-radius: 4px;
border: 2px solid grey;
background-color: #212121;
color: white;
border: 2px solid var(--color-border1);
background-color: var(--color-background1);
color: var(--color-text);
padding: 12px 20px;
width: 70%;
margin: 10px;
@ -67,13 +91,13 @@ input[type=password] {
.ban{
border-radius: 4px;
border: 2px solid red;
border: 2px solid var(--color-red);
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;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
color: white;
color: var(--color-text);
padding: 12px 0px;
width: 70%;
margin: 10px;
@ -83,16 +107,16 @@ input[type=password] {
}
.confirm{
color: white;
color: var(--color-text);
padding: 12px 20px;
width: 70%;
margin: 10px;
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;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
border: 2px solid grey;
border: 2px solid var(--color-border1);
}
.confirm:hover{
@ -100,16 +124,16 @@ input[type=password] {
}
.confirm{
color: white;
color: var(--color-text);
padding: 12px 20px;
width: 70%;
margin: 10px;
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;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
border: 2px solid grey;
border: 2px solid var(--color-border1);
}
.confirm:hover{
@ -117,18 +141,18 @@ input[type=password] {
}
.unselected{
border-radius: 4px;
border: 2px solid grey;
background-color: #212121;
color: white;
border: 2px solid var(--color-border1);
background-color: var(--color-background1);
color: var(--color-text);
padding: 12px 20px;
width: 70%;
margin: 10px;
}
.selected{
border-radius: 4px;
border: 2px solid grey;
background-color: dimgray;
color: white;
border: 2px solid var(--color-border1);
background-color: var(--color-background2);
color: var(--color-text);
padding: 12px 20px;
width: 70%;
margin: 10px;
@ -136,11 +160,11 @@ input[type=password] {
button:hover{
border: 2px solid white;
border: 2px solid var(--color-border0);
cursor: pointer;
}
input:hover{
border: 2px solid white;
border: 2px solid var(--color-border0);
}
@ -148,17 +172,17 @@ input:hover{
.submit{
border-radius: 4px;
border: 2px solid grey;
background-color: #212121;
color: white;
border: 2px solid var(--color-border1);
background-color: var(--color-background1);
color: var(--color-text);
padding: 12px 20px;
width: 100%;
margin: 10px;
}
body {
background-color: #212121;
color: #fff;
background-color: var(--color-background0);
color: var(--color-text);
height: 100%;
}
@ -167,7 +191,7 @@ body {
.left-pannel{
flex: 1;
margin: 20px;
border: 1px solid #fff;
border: 1px solid var(--color-border0);
border-radius: 5px;
padding: 20px;
width: 80%;
@ -178,10 +202,9 @@ body {
.content{
flex: 3;
margin: 20px;
border: 1px solid #fff;
border: 1px solid var(--color-border0);
border-radius: 5px;
padding: 20px;
width: 80%;
height: 80%;
}
@ -228,7 +251,7 @@ label {
text-indent: -9999px;
width: 100px;
height: 50px;
background: grey;
background: var(--color-switch-background);
display: block;
border-radius: 100px;
position: relative;
@ -245,13 +268,13 @@ label:after {
left: 5px;
width: 40px;
height: 40px;
background: #fff;
background: var(--color-switch-button);
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: #bada55;
background: var(--color-lime);
}
input:checked + label:after {
@ -268,16 +291,16 @@ select {
/*height: 100%;*/
padding: 12px 20px;
margin: 8px 0;
background-color: #212121;
border: 2px solid grey;
background-color: var(--color-background1);
border: 2px solid var(--color-border1);
border-radius: 4px;
outline: none;
color: white;
color: var(--color-text);
text-align: center;
}
select:hover {
border: 2px solid white;
border: 2px solid var(--color-border0);
}
@ -285,11 +308,11 @@ input[type="time"] {
width: 70%;
padding: 8px 12px;
margin: 8px 0;
background-color: #212121;
border: 2px solid grey;
background-color: var(--color-background1);
border: 2px solid var(--color-border1);
border-radius: 4px;
outline: none;
color: white;
color: var(--color-text);
text-align: center;
}
@ -302,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;
}

11
Flask/templates/base.html
View File

@ -12,6 +12,17 @@
</head>
<body>
<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">
{% block left_pannel %}
{% endblock %}