From 39bab175742ce2ee88a96aed6d84477794da86b9 Mon Sep 17 00:00:00 2001 From: 3eef8a28f26fb2bcc514e6f1938929a1f931762 <116031952+3eef8a28f26fb2bcc514e6f1938929a1f931762@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:17:23 -0400 Subject: [PATCH] Light theme CSS --- css/common.css | 1 + css/coursedisplay.css | 9 ++- css/themes.css | 128 ++++++++++++++++++++++++------------------ 3 files changed, 82 insertions(+), 56 deletions(-) diff --git a/css/common.css b/css/common.css index 77c51dab6..20e3e98ab 100644 --- a/css/common.css +++ b/css/common.css @@ -13,6 +13,7 @@ --mid-light-purple: #494766; --light-purple: #5c5980; + --white: #ffffff; --pink: #f53faa; --red: #f53f6a; --green: #3ff57f; diff --git a/css/coursedisplay.css b/css/coursedisplay.css index 837139dbf..7289cd9ee 100644 --- a/css/coursedisplay.css +++ b/css/coursedisplay.css @@ -359,7 +359,14 @@ input[value="detailed"]:checked ~ table .detail-view-container { padding-bottom: 1vmin; padding-top: 1vmin; font-size: 1rem; - font-weight: 600; +} + +.term-course-info { + font-weight: bold; +} + +.course-capacity { + font-style: italic; } .term-course-info{ diff --git a/css/themes.css b/css/themes.css index 2c46c9915..38eecb3fe 100644 --- a/css/themes.css +++ b/css/themes.css @@ -1,56 +1,74 @@ -@media (prefers-color-scheme: dark) { - :root { - --background-color: var(--deep-purple); - --selection-color: var(--mid-light-purple); - --h-text-color: var(--quacs-yellow); - --p-text-color: var(--quacs-white); - --link-text-color: var(--quacs-midtone); - --link-hover-color: var(--quacs-yellow); - --header-color: var(--quacs-yellow); - --input-background-color: var(--quacs-white); - --input-text-color: var(--mid-dark-purple); - --input-selection-color: var(--quacs-yellow); - --search-title-color: var(--quacs-yellow); - --search-term-color: var(--quacs-midtone); - --search-entry-text-color: var(--quacs-white); - --search-entry-bg-color: var(--mid-dark-purple); - --search-entry-bg-hover-color: var(--mid-dark-purple); - --search-entry-title-color: var(--quacs-midtone); - --pill-default-color: var(--quacs-yellow); - --pill-text-color: var(--deep-purple); - --pill-svg-color: var(--deep-purple); - --ci-pill-color: var(--green); - --wi-pill-color: var(--quacs-yellow); - --course-pill-color: var(--quacs-yellow); - --course-pill-hover-color: var(--quacs-midtone); - --pdii-pill-color: var(--red); - --hinq-pill-color: var(--pink); - --table-selection-color: var(--quacs-yellow); - --info-title-color: var(--quacs-white); - --course-name-color: var(--quacs-yellow); - --course-code-color: var(--quacs-midtone); - --or-block-color: var(--blue); - --or-block-bg-color: var(--deep-purple); - --or-text-color: var(--quacs-white); - --and-block-color: var(--red); - --and-text-color: var(--quacs-white); - --none-block-color: var(--red); - --none-text-color: var(--quacs-white); - --unknown-block-color: var(--pink); - --unknown-text-color: var(--quacs-white); - --key-text-color: var(--quacs-midtone); - --yes-color: var(--green); - --no-color: var(--red); - --diff-code-color: var(--quacs-yellow); - --nil-color: var(--mid-light-purple); - --view-select-color: var(--quacs-midtone); - --term-text-color: var(--deep-purple); - --view-select-color-selected: var(--quacs-yellow); - --season-label-color: var(--quacs-midtone); - --year-label-color: var(--quacs-midtone); - --mid-summer-label-color: var(--quacs-white); - --table-link-color: var(--mid-light-purple); - --table-link-hover-color: var(--light-purple); - --table-link-selected-color: var(--light-purple); - } +:root { + --background-color: var(--deep-purple); + --selection-color: var(--mid-light-purple); + --h-text-color: var(--quacs-yellow); + --p-text-color: var(--quacs-white); + --link-text-color: var(--quacs-midtone); + --link-hover-color: var(--quacs-yellow); + --header-color: var(--quacs-yellow); + --input-background-color: var(--quacs-white); + --input-text-color: var(--mid-dark-purple); + --input-selection-color: var(--quacs-yellow); + --search-title-color: var(--quacs-yellow); + --search-term-color: var(--quacs-midtone); + --search-entry-text-color: var(--quacs-white); + --search-entry-bg-color: var(--mid-dark-purple); + --search-entry-bg-hover-color: var(--mid-dark-purple); + --search-entry-title-color: var(--quacs-midtone); + --pill-default-color: var(--quacs-yellow); + --pill-text-color: var(--deep-purple); + --pill-svg-color: var(--deep-purple); + --ci-pill-color: var(--green); + --wi-pill-color: var(--pill-default-color); + --course-pill-color: var(--pill-default-color); + --course-pill-hover-color: var(--quacs-midtone); + --pdii-pill-color: var(--red); + --hinq-pill-color: var(--pink); + --table-selection-color: var(--quacs-yellow); + --info-title-color: var(--quacs-white); + --course-name-color: var(--quacs-yellow); + --course-code-color: var(--quacs-midtone); + --or-block-color: var(--blue); + --or-block-bg-color: var(--background-color); + --or-text-color: var(--quacs-white); + --and-block-color: var(--red); + --and-text-color: var(--or-text-color); + --none-block-color: var(--red); + --none-text-color: var(--or-text-color); + --unknown-block-color: var(--pink); + --unknown-text-color: var(--or-text-color); + --key-text-color: var(--quacs-midtone); + --yes-color: var(--green); + --no-color: var(--red); + --diff-code-color: var(--quacs-yellow); + --nil-color: var(--mid-light-purple); + --view-select-color: var(--key-text-color); + --term-text-color: var(--deep-purple); + --view-select-color-selected: var(--quacs-yellow); + --season-label-color: var(--quacs-midtone); + --year-label-color: var(--quacs-midtone); + --mid-summer-label-color: var(--quacs-white); + --table-link-color: var(--mid-light-purple); + --table-link-hover-color: var(--light-purple); + --table-link-selected-color: var(--light-purple); +} + +@media (prefers-color-scheme: light) { + :root { + --background-color: var(--white); + --selection-color: var(--quacs-yellow); + --h-text-color: var(--mid-light-purple); + --p-text-color: var(--deep-purple); + --course-code-color: var(--mid-purple); + --or-text-color: var(--white); + --key-text-color: var(--mid-light-purple); + --view-select-color-selected: var(--deep-purple); + --season-label-color: var(--deep-purple); + --year-label-color: var(--mid-purple); + --mid-summer-label-color: var(--mid-purple); + --info-title-color: var(--deep-purple); + } + /*#qlog-wordmark { + display: none; + }*/ }