piair
/
MsRewards
mirror of https://gitea.augustin64.fr/piair/MsRewards-Reborn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css: use variables for colors

This commit is contained in:
augustin64 2023-08-29 15:21:44 +02:00
parent 7f21301da0
commit fcc7f4d46e
1 changed files with 60 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,20 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url('https://fonts.googleapis.com/css?family=Montserrat');
: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);
}
html { html {
text-align: center; text-align: center;
font-family: Montserrat; font-family: Montserrat;
@ -21,7 +37,7 @@ table {
} }
a { a {
color: white; color: var(--color-text);
} }
@ -30,11 +46,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 +60,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 +83,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 +99,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 +116,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 +133,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 +152,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 +164,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 +183,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,7 +194,7 @@ 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%; width: 80%;
@ -228,7 +244,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 +261,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 +284,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 +301,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;
} }