Skip to content
Snippets Groups Projects
Commit 889a0cd3 authored by Maddy's avatar Maddy
Browse files

Added :root in main.css to make colors more uniform

parent 1a0f2b77
No related branches found
No related tags found
1 merge request!45Root colors
Pipeline #269930 passed
:root{
--all-background-color:#F2F2F2;
--sidebar-bd-color: #242F40;
--sidebar-item-hover: #CCA43B;
--sidebar-item-active: #CCA43B;
--field-placeholder: #b0b0b0;
--card-background: #d7d7d7;
--text-light-color: #d7d7d7;
--text-dark-color: #242F40;
--danger-color:#d2442b;
--danger-hover:#d9563e;
--safe-color: #242F40;
--safe-hover: #425575;
--safe-active: #425575;
--option-color: #CCA43B;
--option-hover: #b2891b;
--option-active: #D9C590;
}
body { body {
font-family: monospace; font-family: monospace;
margin: 0 0 0 28px; margin: 0 0 0 28px;
background-color: #F2F2F2; background-color: var(--all-background-color);
} }
input { input {
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
background-color: #dedede;
margin-bottom: 10px; margin-bottom: 10px;
font-family: monospace; font-family: monospace;
} }
input::placeholder { input::placeholder {
color: #b0b0b0; color: var(--field-placeholder);
} }
label { label {
...@@ -38,7 +63,7 @@ select{ ...@@ -38,7 +63,7 @@ select{
} }
.course-col{ .course-col{
flex-basis: 31%; flex-basis: 31%;
background: #d7d7d7; background: var(--card-background);
border-radius: 10px; border-radius: 10px;
margin-bottom: 5%; margin-bottom: 5%;
padding: 20px; padding: 20px;
...@@ -49,7 +74,7 @@ select{ ...@@ -49,7 +74,7 @@ select{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
} }
.error-message{ .error-message{
color: #e53a1c; color: var(--danger-color);
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
margin-bottom: 20px; margin-bottom: 20px;
...@@ -57,44 +82,50 @@ select{ ...@@ -57,44 +82,50 @@ select{
.play-btn{ .play-btn{
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
background-color: #242F40; background-color: var(--safe-color);
border-color: transparent; border-color: transparent;
color: #FFFFFF; color: var(--text-light-color);
border-radius: 10px; border-radius: 10px;
} }
.play-btn:hover { .play-btn:hover {
background-color: #425575; background-color: var(--safe-hover);
transition: 0.4s ; transition: 0.4s ;
} }
.play-btn:active{ .play-btn:active{
background-color: #425575; background-color: var(--safe-active);
transition: 0.2s ; transition: 0.2s ;
} }
.edit-btn{ .edit-btn{
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
background-color: #CCA43B; background-color: var(--option-color);
border-color: transparent; border-color: transparent;
color: #242F40; color: #242F40;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} }
.edit-btn:hover{
background-color: var(--option-hover);
}
.edit-btn:active{
background-color: var(--option-active);
}
.delete-btn{ .delete-btn{
padding: 10px; padding: 10px;
background-color: #cc513b; background-color: var(--danger-color);
border-color: transparent; border-color: transparent;
color: #242F40; color: var(--text-dark-color);
border-radius: 10px; border-radius: 10px;
font-family: monospace; font-family: monospace;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
.delete-btn:hover{ .delete-btn:hover{
background-color: #d9563e; background-color: var(--danger-hover);
} }
.add-Btn { .add-Btn {
background-color: #242F40; background-color: var(--safe-color);
color: white; color: white;
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
...@@ -105,14 +136,14 @@ select{ ...@@ -105,14 +136,14 @@ select{
} }
.add-Btn:hover{ .add-Btn:hover{
cursor: pointer; cursor: pointer;
background-color: #2f3d54; background-color: var(--safe-hover);
} }
.add-Btn:active{ .add-Btn:active{
background-color: #425575; background-color: var(--safe-active);
transition: 0.2s ; transition: 0.2s ;
} }
.save-Btn{ .save-Btn{
background-color: #CCA43B; background-color: var(--option-color);
font-size: 24px; font-size: 24px;
padding: 15px; padding: 15px;
border-radius: 20px; border-radius: 20px;
...@@ -121,7 +152,7 @@ select{ ...@@ -121,7 +152,7 @@ select{
cursor: pointer; cursor: pointer;
} }
.close-btn{ .close-btn{
background-color: #d2442b; background-color: var(--danger-color);
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
border-color: transparent; border-color: transparent;
...@@ -132,10 +163,10 @@ select{ ...@@ -132,10 +163,10 @@ select{
color: white; color: white;
} }
.close-btn:hover { .close-btn:hover {
background-color: #e15238; background-color: var(--danger-hover);
} }
.submit-btn{ .submit-btn{
background-color: #CCA43B; background-color: var(--option-color);
font-size: 20px; font-size: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
...@@ -147,12 +178,11 @@ select{ ...@@ -147,12 +178,11 @@ select{
height: 50px; height: 50px;
} }
.submit-btn:hover{ .submit-btn:hover{
background-color: #a67d0e; background-color: var(--option-hover);
color: white; color: var(--text-light-color);
} }
.submit-btn:active{ .submit-btn:active{
background-color: #2D333B; background-color: var(--option-active);
color: white;
} }
@media (max-width: 700px){ @media (max-width: 700px){
......
...@@ -45,11 +45,7 @@ export default { ...@@ -45,11 +45,7 @@ export default {
<style> <style>
:root{
--sidebar-bd-color: #242F40;
--sidebar-item-hover: #CCA43B;
--sidebar-item-active: #CCA43B;
}
</style> </style>
<style scoped> <style scoped>
.sidebar{ .sidebar{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment