diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css index 644733515d45cb7e5086b4c47a8410d354db7bd4..1dfc827cd415c2e8dd5d4f92e865174378ff76fc 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 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 224aa8f3609a54a59e61b255eafe15b0b2ecb969..df220195220e063ba15d59ccbc22eaa594e4281a 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 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 {