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');
: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 {
text-align: center;
font-family: Montserrat;
@ -21,7 +37,7 @@ table {
}
a {
color: white;
color: var(--color-text);
}
@ -30,11 +46,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 +60,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 +83,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 +99,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 +116,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 +133,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 +152,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 +164,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 +183,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,7 +194,7 @@ body {
.content{
flex: 3;
margin: 20px;
border: 1px solid #fff;
border: 1px solid var(--color-border0);
border-radius: 5px;
padding: 20px;
width: 80%;
@ -228,7 +244,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 +261,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 +284,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 +301,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;
}