color vars

This commit is contained in:
2025-01-31 16:04:59 +01:00
parent dc97a9ced9
commit 10849aa3eb
2 changed files with 28 additions and 25 deletions

View File

@@ -1,7 +1,21 @@
.login-container { /*color vars*/
margin: auto; :root {
padding: 30px; --main_bg: #1e1e1e;
width: 200px; --main_text_color: #d3d3d3;
background-color: lightblue; --main_color: #3399cc;
--hover_main_color: #3399ccb0;
} }
body {
background-color: var(--main_bg);
color: var(--main_text_color);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

View File

@@ -1,22 +1,11 @@
body {
background-color: #1e1e1e;
color: #d3d3d3;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.register_link { .register_link {
color:#d3d3d3; color:var(--main_text_color);
background-color: #2e2e2e; background-color: #2e2e2e;
} }
.register_button { .register_button {
color:#d3d3d3; color:var(--main_text_color);
background-color: #2e2e2e; background-color: #2e2e2e;
border-radius: 5px; border-radius: 5px;
border:none; border:none;
@@ -32,11 +21,11 @@ body {
width: 400px; width: 400px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
border: 2px solid #da1f3d; border: 2px solid var(--main_color);
} }
.login-header { .login-header {
color: #d3d3d3; color: var(--main_text_color);
font-size: 24px; font-size: 24px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -59,7 +48,7 @@ body {
border: 1px solid #555; border: 1px solid #555;
border-radius: 15px; border-radius: 15px;
background-color: #4a4a4a; background-color: #4a4a4a;
color: #d3d3d3; color: var(--main_text_color);
outline: none; outline: none;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@@ -67,15 +56,15 @@ body {
.input-group input:focus { .input-group input:focus {
transform: scale(1.06); transform: scale(1.06);
border-color: #da1f3d; border-color: var(--main_color);
} }
.login-button { .login-button {
width: 50%; width: 50%;
padding: 13px; padding: 13px;
background-color: #da1f3d; background-color: var(--main_color);
color: #d3d3d3; color: var(--main_text_color);
border: none; border: none;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
@@ -88,7 +77,7 @@ body {
.login-button:hover { .login-button:hover {
background-color: #d2324d; background-color: var(--hover_main_color);
transform: scale(1.06); transform: scale(1.06);
} }