From 3bf15ec7058f70190d8dbccd79507ddf858e2bb5 Mon Sep 17 00:00:00 2001
From: Joeli Takala <joeli.takala@helsinki.fi>
Date: Thu, 31 Aug 2023 11:16:45 +0300
Subject: [PATCH] Added Skosmos variant color sheme CSS files

---
 resource/css/color-scheme-1.css | 101 +++++++++++++++++++++++++++++++
 resource/css/color-scheme-2.css | 104 ++++++++++++++++++++++++++++++++
 resource/css/color-scheme-3.css | 102 +++++++++++++++++++++++++++++++
 resource/css/color-scheme-4.css | 103 +++++++++++++++++++++++++++++++
 4 files changed, 410 insertions(+)
 create mode 100644 resource/css/color-scheme-1.css
 create mode 100644 resource/css/color-scheme-2.css
 create mode 100644 resource/css/color-scheme-3.css
 create mode 100644 resource/css/color-scheme-4.css

diff --git a/resource/css/color-scheme-1.css b/resource/css/color-scheme-1.css
new file mode 100644
index 000000000..87f7f2bb7
--- /dev/null
+++ b/resource/css/color-scheme-1.css
@@ -0,0 +1,101 @@
+:root {
+    /* Color definitions */
+    --dark-color: #0d284e;
+    --secondary-dark-color: #1b709d;
+    --medium-color: #dfe5ed;
+    --secondary-medium-color: #b8c9db;
+    --light-color: #f2f5f7;
+    --white-color: #ffffff;
+
+
+    /* Element color definitions */
+    --body-text: var(--dark-color);
+
+
+    --topbar-bg-1: var(--dark-color);
+    --topbar-bg-2: var(--dark-color);
+    --topbar-text-1: var(--white-color);
+    --topbar-text-2: var(--white-color);
+    --topbar-home-1: url("../pics/koti.svg");
+    --topbar-home-2: url("../pics/koti.svg");
+    --topbar-info-1: url("../pics/tietoa.svg");
+    --topbar-info-2: url("../pics/tietoa.svg");
+    --topbar-feedback-1: url("../pics/palaute.svg");
+    --topbar-feedback-2: url("../pics/palaute.svg");
+
+
+    --headerbar-vocab-bg: var(--white-color);
+    --headerbar-text-1: var(--dark-color);
+    --headerbar-text-2: var(--dark-color);
+    --search-bg: var(--white-color);
+    --search-border: var(--medium-color);
+    --search-dropdown-toggle-hover: var(--white-color);
+    --search-dropdown-toggle-show: var(--medium-color);
+    --search-dropdown-item-active: var(--white-color);
+    --search-dropdown-item-hover: var(--medium-color);
+    --search-button-bg: var(--dark-color);
+    --search-button-text: var(--white-color);
+
+
+    --main-bg-1: var(--white-color);
+    --main-bg-2: var(--medium-color);
+    --main-bg-3: var(--light-color);
+
+    --frontpage-stripes-1: url(../pics/viivakuvio-f2f5f7.svg);
+    --frontpage-stripes-2: url(../pics/viivakuvio-dfe5ed.svg);
+    --infopage-stripes: url(../pics/viivakuvio.svg);
+    --feedbackpage-stripes: url(../pics/viivakuvio-dfe5ed.svg);
+    --feedbackpage-stripes-pos: calc(100% + 41px) -55px;
+
+
+    --vocab-box-bg: var(--medium-color);
+    --vocab-box-text: var(--dark-color);
+    --vocab-box-header: var(--dark-color);
+    --vocab-box-link: var(--secondary-dark-color);
+
+    --welcome-box-bg: var(--dark-color);
+    --welcome-box-text: var(--white-color);
+
+    --info-box-bg: var(--medium-color);
+    --info-box-text: var(--dark-color);
+    --info-box-arrow: var(--secondary-dark-color);
+
+
+    --vocab-box-one-bg: var(--dark-color);
+    --vocab-box-one-text: var(--white-color);
+    --vocab-box-one-arrow: var(--secondary-dark-color);
+
+    --welcome-box-one-bg: var(--medium-color);
+    --welcome-box-one-text: var(--dark-color);
+
+    --info-box-one-bg: var(--medium-color);
+    --info-box-one-text: var(--dark-color);
+    --info-box-one-arrow: var(--secondary-dark-color);
+
+
+    --vocab-bg: var(--white-color);
+    --vocab-text: var(--dark-color);
+    --vocab-link: var(--secondary-dark-color);
+    --vocab-table-border: var(--medium-color);
+
+    --sidebar-tab-active-bg: var(--dark-color);
+    --sidebar-tab-active-text: var(--white-color);
+    --sidebar-tab-inactive-bg: var(--light-color);
+    --sidebar-tab-inactive-text: var(--dark-color);
+    --sidebar-scrollbar-bg: var(--light-color);
+    --sidebar-scrollbar-thumb: var(--secondary-medium-color);
+    --sidebar-search-bg: var(--dark-color);
+    --sidebar-search-text: var(--white-color);
+    --sidebar-search-button-bg: var(--secondary-medium-color);
+    --sidebar-search-button-text: var(--dark-color);
+
+
+    --infopage-text: var(--dark-color);
+    --infopage-link: var(--secondary-dark-color);
+
+
+    --feedback-form-bg: var(--white-color);
+    --feedback-form-text: var(--dark-color);
+    --feedback-form-input: var(--light-color);
+    --feedback-form-button-bg: var(--dark-color);
+}
\ No newline at end of file
diff --git a/resource/css/color-scheme-2.css b/resource/css/color-scheme-2.css
new file mode 100644
index 000000000..768061553
--- /dev/null
+++ b/resource/css/color-scheme-2.css
@@ -0,0 +1,104 @@
+:root {
+    /* Color definitions */
+    --dark-color: #0d284e;
+    --secondary-dark-color: #1b709d;
+    --accent-color: #0088ec;
+    --medium-color: #94bbdb;
+    --secondary-medium-color: #82abcb;
+    --light-color: #afdfff;
+    --secondary-light-color: #c9ddec;
+    --lighter-color: #e4eef6;
+    --white-color: #ffffff;
+
+
+    /* Element color definitions */
+    --body-text: var(--dark-color);
+
+
+    --topbar-bg-1: var(--dark-color);
+    --topbar-bg-2: var(--dark-color);
+    --topbar-text-1: var(--white-color);
+    --topbar-text-2: var(--white-color);
+    --topbar-home-1: url("../pics/koti.svg");
+    --topbar-home-2: url("../pics/koti.svg");
+    --topbar-info-1: url("../pics/tietoa.svg");
+    --topbar-info-2: url("../pics/tietoa.svg");
+    --topbar-feedback-1: url("../pics/palaute.svg");
+    --topbar-feedback-2: url("../pics/palaute.svg");
+
+
+    --headerbar-vocab-bg: var(--white-color);
+    --headerbar-text-1: var(--dark-color);
+    --headerbar-text-2: var(--dark-color);
+    --search-bg: var(--white-color);
+    --search-border: var(--secondary-light-color);
+    --search-dropdown-toggle-hover: var(--white-color);
+    --search-dropdown-toggle-show: var(--secondary-light-color);
+    --search-dropdown-item-active: var(--white-color);
+    --search-dropdown-item-hover: var(--lighter-color);
+    --search-button-bg: var(--dark-color);
+    --search-button-text: var(--white-color);
+
+
+    --main-bg-1: var(--medium-color);
+    --main-bg-2: var(--medium-color);
+    --main-bg-3: var(--light-color);
+
+    --frontpage-stripes-1: url(../pics/viivakuvio-afdfff.svg);
+    --frontpage-stripes-2: url(../pics/viivakuvio-82abcb.svg);
+    --infopage-stripes: url(../pics/viivakuvio-82abcb.svg);
+    --feedbackpage-stripes: url(../pics/viivakuvio-94bbdb.svg);
+    --feedbackpage-stripes-pos: calc(100% + 41px) -55px;
+
+
+    --vocab-box-bg: var(--white-color);
+    --vocab-box-text: var(--dark-color);
+    --vocab-box-header: var(--dark-color);
+    --vocab-box-link: var(--accent-color);
+
+    --welcome-box-bg: var(--dark-color);
+    --welcome-box-text: var(--white-color);
+
+    --info-box-bg: var(--light-color);
+    --info-box-text: var(--dark-color);
+    --info-box-arrow: var(--white-color);
+
+
+    --vocab-box-one-bg: var(--dark-color);
+    --vocab-box-one-text: var(--white-color);
+    --vocab-box-one-arrow: var(--accent-color);
+
+    --welcome-box-one-bg: var(--white-color);
+    --welcome-box-one-text: var(--dark-color);
+
+    --info-box-one-bg: var(--light-color);
+    --info-box-one-text: var(--dark-color);
+    --info-box-one-arrow: var(--white-color);
+
+
+    --vocab-bg: var(--white-color);
+    --vocab-text: var(--dark-color);
+    --vocab-link: var(--secondary-dark-color);
+    --vocab-table-border: var(--secondary-light-color);
+
+    --sidebar-tab-active-bg: var(--dark-color);
+    --sidebar-tab-active-text: var(--white-color);
+    --sidebar-tab-inactive-bg: var(--secondary-light-color);
+    --sidebar-tab-inactive-text: var(--dark-color);
+    --sidebar-scrollbar-bg: var(--secondary-light-color);
+    --sidebar-scrollbar-thumb: var(--accent-color);
+    --sidebar-search-bg: var(--dark-color);
+    --sidebar-search-text: var(--white-color);
+    --sidebar-search-button-bg: var(--light-color);
+    --sidebar-search-button-text: var(--dark-color);
+
+
+    --infopage-text: var(--dark-color);
+    --infopage-link: var(--secondary-dark-color);
+
+
+    --feedback-form-bg: var(--white-color);
+    --feedback-form-text: var(--dark-color);
+    --feedback-form-input: var(--lighter-color);
+    --feedback-form-button-bg: var(--dark-color);
+}
\ No newline at end of file
diff --git a/resource/css/color-scheme-3.css b/resource/css/color-scheme-3.css
new file mode 100644
index 000000000..c2b08b134
--- /dev/null
+++ b/resource/css/color-scheme-3.css
@@ -0,0 +1,102 @@
+:root {
+    /* Color definitions */
+    --dark-color: #0d284e;
+    --secondary-dark-color: #1b709d;
+    --accent-color: #0088ec;
+    --medium-color: #8fdbff;
+    --light-color: #d9f0f4;
+    --secondary-light-color: #ebf7f9;
+    --white-color: #ffffff;
+
+
+    /* Element color definitions */
+    --body-text: var(--dark-color);
+
+
+    --topbar-bg-1: var(--white-color);
+    --topbar-bg-2: var(--white-color);
+    --topbar-text-1: var(--dark-color);
+    --topbar-text-2: var(--dark-color);
+    --topbar-home-1: url("../pics/koti-dark.svg");
+    --topbar-home-2: url("../pics/koti-dark.svg");
+    --topbar-info-1: url("../pics/tietoa-dark.svg");
+    --topbar-info-2: url("../pics/tietoa-dark.svg");
+    --topbar-feedback-1: url("../pics/palaute-dark.svg");
+    --topbar-feedback-2: url("../pics/palaute-dark.svg");
+
+
+    --headerbar-vocab-bg: var(--medium-color);
+    --headerbar-text-1: var(--dark-color);
+    --headerbar-text-2: var(--dark-color);
+    --search-bg: var(--secondary-light-color);
+    --search-border: var(--medium-color);
+    --search-dropdown-toggle-hover: var(--secondary-light-color);
+    --search-dropdown-toggle-show: var(--light-color);
+    --search-dropdown-item-active: var(--white-color);
+    --search-dropdown-item-hover: var(--light-color);
+    --search-button-bg: var(--dark-color);
+    --search-button-text: var(--white-color);
+
+
+    --main-bg-1: var(--light-color);
+    --main-bg-2: var(--light-color);
+    --main-bg-3: var(--light-color);
+
+    --frontpage-stripes-1: url(../pics/viivakuvio.svg);
+    --frontpage-stripes-2: url(../pics/viivakuvio.svg);
+    --infopage-stripes: url(../pics/viivakuvio.svg);
+    --feedbackpage-stripes: url(../pics/viivakuvio.svg);
+    --feedbackpage-stripes-pos: calc(100% + 41px) calc(100% + 55px);
+
+
+    --vocab-box-bg: var(--dark-color);
+    --vocab-box-text: var(--medium-color);
+    --vocab-box-header: var(--white-color);
+    --vocab-box-link: var(--white-color);
+
+    --welcome-box-bg: var(--medium-color);
+    --welcome-box-text: var(--dark-color);
+
+    --info-box-bg: var(--medium-color);
+    --info-box-text: var(--dark-color);
+    --info-box-arrow: var(--dark-color);
+
+
+    --vocab-box-one-bg: var(--dark-color);
+    --vocab-box-one-text: var(--white-color);
+    --vocab-box-one-arrow: var(--accent-color);
+
+    --welcome-box-one-bg: var(--medium-color);
+    --welcome-box-one-text: var(--dark-color);
+
+    --info-box-one-bg: var(--medium-color);
+    --info-box-one-text: var(--dark-color);
+    --info-box-one-arrow: var(--white-color);
+
+
+    --vocab-bg: var(--white-color);
+    --vocab-text: var(--dark-color);
+    --vocab-link: var(--secondary-dark-color);
+    --vocab-table-border: var(--light-color);
+
+    --sidebar-tab-active-bg: var(--dark-color);
+    --sidebar-tab-active-text: var(--white-color);
+    --sidebar-tab-inactive-bg: var(--secondary-light-color);
+    --sidebar-tab-inactive-text: var(--dark-color);
+    --sidebar-scrollbar-bg: var(--secondary-light-color);
+    --sidebar-scrollbar-thumb: var(--medium-color);
+    --sidebar-search-bg: var(--dark-color);
+    --sidebar-search-text: var(--white-color);
+    --sidebar-search-button-bg: var(--medium-color);
+    --sidebar-search-button-text: var(--dark-color);
+
+
+    --infopage-text: var(--dark-color);
+    --infopage-link: var(--secondary-dark-color);
+
+
+    --feedback-form-bg: var(--medium-color);
+    --feedback-form-text: var(--dark-color);
+    --feedback-form-input: var(--secondary-light-color);
+    --feedback-form-button-bg: var(--dark-color);
+}
\ No newline at end of file
diff --git a/resource/css/color-scheme-4.css b/resource/css/color-scheme-4.css
new file mode 100644
index 000000000..2680260e5
--- /dev/null
+++ b/resource/css/color-scheme-4.css
@@ -0,0 +1,103 @@
+:root {
+    /* Color definitions */
+    --dark-color: #0d284e;
+    --secondary-dark-color: #1b709d;
+    --darker-color: #270245;
+    --accent-color: #39d796;
+    --medium-color: #0088ec;
+    --light-color: #bfe1fa;
+    --secondary-light-color: #dadee4;
+    --white-color: #ffffff;
+
+
+    /* Element color definitions */
+    --body-text: var(--dark-color);
+
+
+    --topbar-bg-1: var(--white-color);
+    --topbar-bg-2: var(--medium-color);
+    --topbar-text-1: var(--dark-color);
+    --topbar-text-2: var(--white-color);
+    --topbar-home-1: url("../pics/koti-dark.svg");
+    --topbar-home-2: url("../pics/koti.svg");
+    --topbar-info-1: url("../pics/tietoa-dark.svg");
+    --topbar-info-2: url("../pics/tietoa.svg");
+    --topbar-feedback-1: url("../pics/palaute-dark.svg");
+    --topbar-feedback-2: url("../pics/palaute.svg");
+
+
+    --headerbar-vocab-bg: var(--white-color);
+    --headerbar-text-1: var(--white-color);
+    --headerbar-text-2: var(--dark-color);
+    --search-bg: var(--white-color);
+    --search-border: var(--secondary-light-color);
+    --search-dropdown-toggle-hover: var(--white-color);
+    --search-dropdown-toggle-show: var(--light-color);
+    --search-dropdown-item-active: var(--white-color);
+    --search-dropdown-item-hover: var(--light-color);
+    --search-button-bg: var(--dark-color);
+    --search-button-text: var(--white-color);
+
+
+    --main-bg-1: var(--darker-color);
+    --main-bg-2: var(--darker-color);
+    --main-bg-3: var(--darker-color);
+
+    --frontpage-stripes-1: url(../pics/viivakuvio-270245.svg);
+    --frontpage-stripes-2: url(../pics/viivakuvio-0088ec.svg);
+    --infopage-stripes: url(../pics/viivakuvio-0088ec.svg);
+    --feedbackpage-stripes: url(../pics/viivakuvio-0088ec.svg);
+    --feedbackpage-stripes-pos: calc(100% + 41px) calc(100% + 55px);
+
+
+    --vocab-box-bg: var(--white-color);
+    --vocab-box-text: var(--dark-color);
+    --vocab-box-header: var(--dark-color);
+    --vocab-box-link: var(--medium-color);
+
+    --welcome-box-bg: var(--medium-color);
+    --welcome-box-text: var(--white-color);
+
+    --info-box-bg: var(--accent-color);
+    --info-box-text: var(--dark-color);
+    --info-box-arrow: var(--dark-color);
+
+
+    --vocab-box-one-bg: var(--white-color);
+    --vocab-box-one-text: var(--dark-color);
+    --vocab-box-one-arrow: var(--medium-color);
+
+    --welcome-box-one-bg: var(--medium-color);
+    --welcome-box-one-text: var(--white-color);
+
+    --info-box-one-bg: var(--accent-color);
+    --info-box-one-text: var(--dark-color);
+    --info-box-one-arrow: var(--dark-color);
+
+
+    --vocab-bg: var(--white-color);
+    --vocab-text: var(--dark-color);
+    --vocab-link: var(--secondary-dark-color);
+    --vocab-table-border: var(--secondary-light-color);
+
+    --sidebar-tab-active-bg: var(--medium-color);
+    --sidebar-tab-active-text: var(--white-color);
+    --sidebar-tab-inactive-bg: var(--secondary-light-color);
+    --sidebar-tab-inactive-text: var(--dark-color);
+    --sidebar-scrollbar-bg: var(--secondary-light-color);
+    --sidebar-scrollbar-thumb: var(--accent-color);
+    --sidebar-search-bg: var(--medium-color);
+    --sidebar-search-text: var(--white-color);
+    --sidebar-search-button-bg: var(--accent-color);
+    --sidebar-search-button-text: var(--dark-color);
+
+
+    --infopage-text: var(--white-color);
+    --infopage-link: var(--white-color);
+
+
+    --feedback-form-bg: var(--white-color);
+    --feedback-form-text: var(--dark-color);
+    --feedback-form-input: var(--light-color);
+    --feedback-form-button-bg: var(--dark-color);
+}
\ No newline at end of file