diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index ebc926199781370b6e85d81f4c97d87ee5a05ce1..1dfc827cd415c2e8dd5d4f92e865174378ff76fc 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -1,19 +1,45 @@
+:root{
+ --all-background-color:#F2F2F2;
+
+ --sidebar-bd-color: #242F40;
+ --sidebar-item-hover: #CCA43B;
+ --sidebar-item-active: #CCA43B;
+
+ --field-placeholder: #b0b0b0;
+ --field-background: #E5E5E5;
+ --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: #eebf42;
+ --option-active: #D9C590;
+}
+
+
body {
font-family: monospace;
margin: 0 0 0 28px;
- background-color: #F2F2F2;
+ background-color: var(--all-background-color);
}
input {
padding: 5px;
border-radius: 5px;
border: none;
- background-color: #dedede;
margin-bottom: 10px;
font-family: monospace;
}
input::placeholder {
- color: #b0b0b0;
+ color: var(--field-placeholder);
}
label {
@@ -38,7 +64,7 @@ select{
}
.course-col{
flex-basis: 31%;
- background: #d7d7d7;
+ background: var(--card-background);
border-radius: 10px;
margin-bottom: 5%;
padding: 20px;
@@ -49,7 +75,7 @@ select{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
.error-message{
- color: #e53a1c;
+ color: var(--danger-color);
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
@@ -57,44 +83,50 @@ select{
.play-btn{
padding: 10px;
text-decoration: none;
- background-color: #242F40;
+ background-color: var(--safe-color);
border-color: transparent;
- color: #FFFFFF;
+ color: var(--text-light-color);
border-radius: 10px;
}
.play-btn:hover {
- background-color: #425575;
+ background-color: var(--safe-hover);
transition: 0.4s ;
}
.play-btn:active{
- background-color: #425575;
+ background-color: var(--safe-active);
transition: 0.2s ;
}
.edit-btn{
padding: 10px;
text-decoration: none;
- background-color: #CCA43B;
+ background-color: var(--option-color);
border-color: transparent;
color: #242F40;
border-radius: 10px;
cursor: pointer;
}
+.edit-btn:hover{
+ background-color: var(--option-hover);
+}
+.edit-btn:active{
+ background-color: var(--option-active);
+}
.delete-btn{
padding: 10px;
- background-color: #cc513b;
+ background-color: var(--danger-color);
border-color: transparent;
- color: #242F40;
+ color: var(--text-dark-color);
border-radius: 10px;
font-family: monospace;
cursor: pointer;
text-decoration: none;
}
.delete-btn:hover{
- background-color: #d9563e;
+ background-color: var(--danger-hover);
}
.add-Btn {
- background-color: #242F40;
+ background-color: var(--safe-color);
color: white;
font-size: 16px;
padding: 10px;
@@ -105,14 +137,14 @@ select{
}
.add-Btn:hover{
cursor: pointer;
- background-color: #2f3d54;
+ background-color: var(--safe-hover);
}
.add-Btn:active{
- background-color: #425575;
+ background-color: var(--safe-active);
transition: 0.2s ;
}
.save-Btn{
- background-color: #CCA43B;
+ background-color: var(--option-color);
font-size: 24px;
padding: 15px;
border-radius: 20px;
@@ -121,7 +153,7 @@ select{
cursor: pointer;
}
.close-btn{
- background-color: #d2442b;
+ background-color: var(--danger-color);
padding: 10px;
border-radius: 5px;
border-color: transparent;
@@ -132,10 +164,10 @@ select{
color: white;
}
.close-btn:hover {
- background-color: #e15238;
+ background-color: var(--danger-hover);
}
.submit-btn{
- background-color: #CCA43B;
+ background-color: var(--option-color);
font-size: 20px;
padding: 10px;
border-radius: 5px;
@@ -147,12 +179,10 @@ select{
height: 50px;
}
.submit-btn:hover{
- background-color: #a67d0e;
- color: white;
+ background-color: var(--option-hover);
}
.submit-btn:active{
- background-color: #2D333B;
- color: white;
+ background-color: var(--option-active);
}
@media (max-width: 700px){
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 6d3ecb5bfdfff166c20cdce32e4843991bdbec77..2a28a34e4a0921861842b8cdcc0afd8643559cfa 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 c5397b268fb657cec76063b08e91b21dfe7ccc53..df220195220e063ba15d59ccbc22eaa594e4281a 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -45,15 +45,11 @@ export default {
<style>
-:root{
- --sidebar-bd-color: #242F40;
- --sidebar-item-hover: #CCA43B;
- --sidebar-item-active: #CCA43B;
-}
+
</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 dae698f15d4a4bfb9b72244cb11fb47db6cbf5e0..2bdbaf6e7131c451c9aff2be4af512bd362987cf 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 6dddf29697557ae630d7328bb7d4a29791dd2b4d..6772184191eb218edd1ee13de1dcabe20d577375 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 c27e97017548472a59774577d39cd8bd9d8535f0..649cf886614c14c9f9e9c8ebe1d576f9c00372e4 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 67049b128445ec83d07d85c19b1a9632cdd83e8d..63d772bbb72c9f85f19ae76708a8137447501d83 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 {