From e2635b1c20de40fd59dc24bd4edaa08d09dbd49c Mon Sep 17 00:00:00 2001 From: minie4 Date: Tue, 28 Jun 2022 22:48:52 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20colors=20to=20css?= =?UTF-8?q?=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/base.css | 11 +++++++++++ src/components/loading-element.vue | 2 +- src/components/titlebar-element.vue | 2 +- src/util.js | 4 ++-- src/views/HistoryView.vue | 7 +++---- src/views/LoginView.vue | 12 ++++++------ src/views/SettingsView.vue | 2 +- src/views/SubstitutionView.vue | 2 +- src/views/TimetableView.vue | 2 +- 9 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/assets/base.css b/src/assets/base.css index 9cb526b..eb38093 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,12 +1,23 @@ :root { --bg-color: #353535; + --element-color: #333030; + --element-color-hover: #292424; + --element-border-input: #34631f; + --element-border-action: #1f5b63; --text-color: #bdbdbd; --font-family: "sourcesanspro"; --titlebar-color: #212121; + --titlebar-element-active-color: #335723; --bottomnav-color: #555555; --bottomnav-icon-color: #c7c7c7; --bottomnav-icon-active-color: #456c47; --bottomnav-active-color: #7ca74b; + --loader-color: #7ca74b; + --substitution-background-change: #14587e; + --substitution-background-cancellation: #7d2b2d; + --substitution-background-addition: #476331; + --substitution-background-deletion: #7d2b2d; + --substitution-background-unchanged: #26272a; } html, diff --git a/src/components/loading-element.vue b/src/components/loading-element.vue index 699db7a..fd71e8c 100644 --- a/src/components/loading-element.vue +++ b/src/components/loading-element.vue @@ -34,7 +34,7 @@ defineProps({ width: 48px; height: 48px; border: 5px solid; - border-color: #7ca74b transparent; + border-color: var(--loader-color) transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; diff --git a/src/components/titlebar-element.vue b/src/components/titlebar-element.vue index 50b1ea8..35a53da 100644 --- a/src/components/titlebar-element.vue +++ b/src/components/titlebar-element.vue @@ -61,7 +61,7 @@ a { } a.router-link-active { - background-color: #335723; + background-color: var(--titlebar-element-active-color); border-radius: 5px; } diff --git a/src/util.js b/src/util.js index ab9ceeb..5d5139d 100644 --- a/src/util.js +++ b/src/util.js @@ -29,8 +29,8 @@ export function getSubstitutionColor(substitution) { if (!substitution) return; switch (substitution.type) { case "change": - return "background-color: #14587e;"; + return "background-color: var(--substitution-background-change);"; case "cancellation": - return "background-color: #7d2b2d;"; + return "background-color: var(--substitution-background-cancellation);"; } } diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue index f390436..3683263 100644 --- a/src/views/HistoryView.vue +++ b/src/views/HistoryView.vue @@ -23,11 +23,11 @@ function getChar(type) { function getColor(type) { switch (type) { case "change": - return "background-color: #14587E;"; + return "background-color: var(--substitution-background-change)"; case "addition": - return "background-color: #476331;"; + return "background-color: var(--substitution-background-addition);"; case "deletion": - return "background-color: #7D2B2D;"; + return "background-color: var(--substitution-background-deletion);"; } } @@ -70,7 +70,6 @@ function getColor(type) { .change { display: grid; - background-color: #26272a; min-height: 35px; border-radius: 11px; margin: 10px 0px; diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index b45b8e8..91a513b 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -24,7 +24,7 @@ align-items: center; flex-direction: column; font-family: Arial, Helvetica, sans-serif; - color: #bdbdbd; + color: var(--text-color); } form { @@ -36,10 +36,10 @@ form { input { border: 0px; outline: none; - background-color: #3a3737; + background-color: var(--element-color); padding: 5px 5px; margin: 5px 0; - border: 2px solid #34631f; + border: 2px solid var(--element-border-input); border-radius: 5px; color: #bdbdbd; } @@ -47,9 +47,9 @@ input { button { outline: none; padding: 5px 5px; - border: 2px solid #1f5b63; + border: 2px solid var(--element-border-action); border-radius: 5px; - color: #bdbdbd; - background-color: #242121; + color: var(--text-color); + background-color: var(--element-color); } diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index c9a2587..adbc316 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -87,7 +87,7 @@ select { padding: 5px 0px; margin: 5px 0px; outline: none; - border: 2px solid #34631f; + border: 2px solid var(--element-border-input); border-radius: 5px; } diff --git a/src/views/SubstitutionView.vue b/src/views/SubstitutionView.vue index 75da571..eead3da 100644 --- a/src/views/SubstitutionView.vue +++ b/src/views/SubstitutionView.vue @@ -37,7 +37,7 @@ const substitutions = computed(() => { .substitution { display: grid; - background-color: #26272a; + background-color: var(--substitution-background-unchanged); min-height: 35px; border-radius: 11px; margin: 10px 0px; diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue index 7a9c46e..12f5d05 100644 --- a/src/views/TimetableView.vue +++ b/src/views/TimetableView.vue @@ -95,7 +95,7 @@ function isCancelled(substitution) { .lesson { display: grid; - background-color: #26272a; + background-color: var(--substitution-background-unchanged); min-height: 50px; border-radius: 11px; margin: 10px 0px;