From 5bcf1d8cee98608c8708a5ed97cd9e0e64c5553c Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sun, 7 Apr 2024 22:40:19 +0200
Subject: [PATCH] Changed all colors in <style> to :root colors
---
.../src/frontend/src/assets/main.css | 4 ++--
.../src/frontend/src/components/TheWelcome.vue | 16 ++++++++--------
.../src/components/shared/sidebar/Sidebar.vue | 2 +-
.../src/frontend/src/views/AboutView.vue | 10 +++++-----
.../src/frontend/src/views/FeedbackView.vue | 4 ++--
.../src/frontend/src/views/LoginView.vue | 4 ++--
.../src/frontend/src/views/ProfileView.vue | 6 +++---
7 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 6447335..1dfc827 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -6,6 +6,7 @@
--sidebar-item-active: #CCA43B;
--field-placeholder: #b0b0b0;
+ --field-background: #E5E5E5;
--card-background: #d7d7d7;
--text-light-color: #d7d7d7;
@@ -19,7 +20,7 @@
--safe-active: #425575;
--option-color: #CCA43B;
- --option-hover: #b2891b;
+ --option-hover: #eebf42;
--option-active: #D9C590;
}
@@ -179,7 +180,6 @@ select{
}
.submit-btn:hover{
background-color: var(--option-hover);
- color: var(--text-light-color);
}
.submit-btn:active{
background-color: var(--option-active);
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 6d3ecb5..2a28a34 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -80,7 +80,7 @@ export default {
}
.text-box{
width: 90%;
- color: #fff;
+ color: var(--text-light-color);
position: absolute;
top: 50%;
left: 50%;
@@ -93,12 +93,12 @@ export default {
.text-box p{
margin: 10px 0 40px;
font-size: 20px;
- color: #fff;
+ color: var(--text-light-color);
}
.hero-btn{
display: inline-block;
text-decoration: none;
- color: #fff;
+ color: var(--text-light-color);
border: 1px solid #fff;
padding: 12px 34px;
font-size: 16px;
@@ -108,7 +108,7 @@ export default {
}
.hero-btn:hover{
border: 1px solid #CCA43B;
- background: #CCA43B;
+ background: var(--option-hover);
transition: 1s;
color: #242F40;
}
@@ -123,7 +123,7 @@ h1{
font-weight: 600;
}
p{
- color: #0f1412;
+ color: var(--text-dark-color);
font-size: 16px;
font-weight: 300;
line-height: 22px;
@@ -145,12 +145,12 @@ h3{
padding: 100px 0;
}
.cta h1{
- color: #F2F2F2;
+ color: var(--text-light-color);
margin-bottom: 40px;
padding: 0;
}
.footer {
- background-color: #242F40;
+ background-color: var(--sidebar-bd-color);
padding: 10px 0;
text-align: center;
}
@@ -173,7 +173,7 @@ h3{
margin-right: 0;
}
.footer ul li a {
- color: #fff;
+ color: var(--text-light-color);
text-decoration: none;
}
.footer ul li a:hover {
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
index 224aa8f..df22019 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -49,7 +49,7 @@ export default {
</style>
<style scoped>
.sidebar{
- color: white;
+ color: var(--text-light-color);
background-color: var(--sidebar-bd-color);
float: left;
position: fixed;
diff --git a/FullstackProsjekt/src/frontend/src/views/AboutView.vue b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
index dae698f..2bdbaf6 100644
--- a/FullstackProsjekt/src/frontend/src/views/AboutView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
@@ -118,21 +118,21 @@ li{
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
- margin: 8px auto; /* Center the cards horizontally */
+ margin: 8px auto;
padding: 10px;
- max-width: 400px; /* Adjust the maximum width of the card */
+ max-width: 400px;
}
.about-section {
padding: 10vh 10vh 10vh 10vh;
text-align: center;
- color: #ffffff;
+ color: var(--text-light-color);
}
.our-team{
- color: #242F40;
+ color: var(--sidebar-bd-color);
}
.container {
padding: 0 16px;
- color: #242F40;
+ color: var(--sidebar-bd-color);
}
.title {
color: grey;
diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index 6dddf29..6772184 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -95,7 +95,7 @@ export default {
}
.feedback {
text-align: center;
- color: #242F40;
+ color: var(--text-dark-color);
border-color: transparent;
border-radius: 15px;
align-items: center;
@@ -113,7 +113,7 @@ export default {
border: none;
width: 50vh;
height: 15vh;
- background-color: #E5E5E5;
+ background-color: var(--field-background);
}
.submit-section {
display: flex;
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index c27e970..649cf88 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -109,13 +109,13 @@ export default {
cursor: pointer;
}
#signUpLink {
- color: #CCA43B;
+ color: var(--option-color);
padding: 10px;
font-size: 16px;
text-decoration: none;
}
#signUpLink:hover{
- color: #242F40;
+ color: var(--option-hover);
transition: 0.3s;
}
.submit-section {
diff --git a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
index 67049b1..63d772b 100644
--- a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
@@ -150,7 +150,7 @@ export default {
}
.user-quizzes .quiz {
border: 1px solid #ccc;
- background-color: #d7d7d7 ;
+ background-color: var(--field-placeholder) ;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
@@ -165,10 +165,10 @@ export default {
}
.profile-options ul li a {
text-decoration: none;
- color: #CCA43B;
+ color: var(--option-color);
}
.profile-options ul li a:hover{
- color: #a2822e;
+ color: var(--option-hover);
text-decoration: underline;
}
.progress-tracking {
--
GitLab