mirror of
https://gitea.augustin64.fr/piair/MsRewards-Reborn.git
synced 2025-06-21 09:44:31 +02:00
updated webUI according to param changes
This commit is contained in:
piair
405
Flask/static/css/flask.css
Normal file
405
Flask/static/css/flask.css
Normal file
@ -0,0 +1,405 @@
|
||||
@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;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
|
||||
width: 90%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type=password] {
|
||||
|
||||
width: 90%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
text-align: center;
|
||||
border: 2px solid var(--color-border1);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background1);
|
||||
}
|
||||
|
||||
.button{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: var(--color-background1);
|
||||
color: var(--color-text);
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.left-button{
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.ban{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-red);
|
||||
background-size: 200% 100%;
|
||||
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: var(--color-text);
|
||||
padding: 12px 0px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
}
|
||||
.ban:hover{
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
.confirm{
|
||||
color: var(--color-text);
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
background-size: 200% 100%;
|
||||
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 var(--color-border1);
|
||||
}
|
||||
|
||||
.confirm:hover{
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
.confirm{
|
||||
color: var(--color-text);
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
background-size: 200% 100%;
|
||||
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 var(--color-border1);
|
||||
}
|
||||
|
||||
.confirm:hover{
|
||||
background-position: -100% 0;
|
||||
}
|
||||
.unselected{
|
||||
border-radius: 4px;
|
||||
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 var(--color-border1);
|
||||
background-color: var(--color-background2);
|
||||
color: var(--color-text);
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
button:hover{
|
||||
border: 2px solid var(--color-border0);
|
||||
cursor: pointer;
|
||||
}
|
||||
input:hover{
|
||||
border: 2px solid var(--color-border0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.submit{
|
||||
border-radius: 4px;
|
||||
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: var(--color-background0);
|
||||
color: var(--color-text);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left-pannel{
|
||||
flex: 1;
|
||||
margin: 20px;
|
||||
border: 1px solid var(--color-border0);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
|
||||
}
|
||||
|
||||
.content{
|
||||
flex: 3;
|
||||
margin: 20px;
|
||||
border: 1px solid var(--color-border0);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
height: 90%;
|
||||
|
||||
}
|
||||
|
||||
.content > ul {
|
||||
display: inline-block;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.row-item {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#image img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 20%;
|
||||
}
|
||||
.comlumn-name{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
For toggle switch
|
||||
*/
|
||||
|
||||
|
||||
input.toogle[type=checkbox]{
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 8px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--color-switch-background);
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*
|
||||
width: height of label /2 ;
|
||||
height: height of label /2px;
|
||||
*/
|
||||
label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-switch-button);
|
||||
border-radius: 90px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
background: var(--color-lime);
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
left: calc(100% - 5px);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
/*changer l'épaisseur du click */
|
||||
label:active:after {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 90%;
|
||||
/*height: 100%;*/
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border: 2px solid var(--color-border0);
|
||||
}
|
||||
|
||||
|
||||
input[type="time"] {
|
||||
width: 70%;
|
||||
padding: 8px 12px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="time"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user