From 2cbc35b20d2387e9b01af1fa5b277cc433c2d90e Mon Sep 17 00:00:00 2001 From: Jean Date: Sun, 26 Jan 2025 02:00:10 -0800 Subject: [PATCH] Fixing more CSS, fixes #24 --- src/css/colors.css | 60 -------- src/css/dark-palette.css | 149 +++++++++++++++++++ src/css/light-palette.css | 146 ++++++++++++++++++ src/css/shadows.css | 73 --------- src/popup.css | 302 ++++++++++++++++++-------------------- src/popup.html | 4 +- src/popup.js | 21 +-- 7 files changed, 453 insertions(+), 302 deletions(-) delete mode 100644 src/css/colors.css create mode 100644 src/css/dark-palette.css create mode 100644 src/css/light-palette.css delete mode 100644 src/css/shadows.css diff --git a/src/css/colors.css b/src/css/colors.css deleted file mode 100644 index 51e1b48..0000000 --- a/src/css/colors.css +++ /dev/null @@ -1,60 +0,0 @@ -:root { - /* Grayscale */ - --color-l-gray-10: hsla(36, 38%, 98%, 1); - --color-l-gray-20: hsla(35, 36%, 96%, 1); - --color-l-gray-30: hsla(35, 37%, 92%, 1); - --color-l-gray-40: hsla(34, 34%, 90%, 1); - --color-l-gray-50: hsla(36, 35%, 88%, 1); - --color-l-gray-60: hsla(37, 38%, 83%, 1); - --color-l-gray-70: hsla(34, 37%, 70%, 1); - --color-l-gray-80: hsla(34, 29%, 60%, 1); - --color-l-gray-90: hsla(31, 23%, 50%, 1); - --color-l-gray-100: hsla(35, 28%, 40%, 1); - --color-l-gray-110: hsla(34, 30%, 37%, 1); - --color-l-gray-120: hsla(36, 32%, 30%, 1); - --color-l-gray-130: hsla(31, 45%, 24%, 1); - --color-l-gray-140: hsla(33, 54%, 17%, 1); - --color-l-alpha-gray: hsla(34, 37%, 70%, 0.15); - - --color-d-gray-10: hsla(32, 48%, 85%, 1); - --color-d-gray-20: hsla(34, 39%, 74%, 1); - --color-d-gray-30: hsla(34, 31%, 68%, 1); - --color-d-gray-40: hsla(35, 27%, 55%, 1); - --color-d-gray-50: hsla(34, 24%, 46%, 1); - --color-d-gray-60: hsla(33, 27%, 33%, 1); - --color-d-gray-70: hsla(31, 27%, 25%, 1); - --color-d-gray-80: hsla(28, 22%, 19%, 1); - --color-d-gray-90: hsla(33, 20%, 17%, 1); - --color-d-gray-100: hsla(30, 19%, 15%, 1); - --color-d-gray-110: hsla(30, 17%, 14%, 1); - --color-d-gray-120: hsla(29, 16%, 13%, 1); - --color-d-gray-130: hsla(24, 18%, 11%, 1); - --color-d-gray-140: hsla(32, 21%, 9%, 1); - --color-d-alpha-gray: hsla(34, 24%, 40%, 0.2); - - /* Red */ - --color-l-red-10: hsla(4, 59%, 64%, 1); - --color-l-red-20: hsla(4, 72%, 55%, 1); - --color-l-red-30: hsla(4, 56%, 48%, 1); - --color-l-red-40: hsla(4, 72%, 35%, 1); - --color-l-alpha-red: hsla(350, 84%, 63%, 0.2); - - --color-d-red-10: hsla(5, 94%, 73%, 1); - --color-d-red-20: hsla(4, 91%, 67%, 1); - --color-d-red-30: hsla(4, 88%, 61%, 1); - --color-d-red-40: hsla(2, 75%, 52%, 1); - --color-d-alpha-red: hsla(350, 84%, 63%, 0.2); - - /* Green */ - --color-l-green-10: hsla(148, 30%, 65%, 1); - --color-l-green-20: hsla(148, 48%, 47%, 1); - --color-l-green-30: hsla(149, 50%, 39%, 1); - --color-l-green-40: hsla(153, 65%, 29%, 1); - --color-l-alpha-green: hsla(74, 69%, 44%, 0.2); - - --color-d-green-10: hsla(152, 51%, 54%, 1); - --color-d-green-20: hsla(154, 57%, 42%, 1); - --color-d-green-30: hsla(155, 78%, 29%, 1); - --color-d-green-40: hsla(154, 75%, 26%, 1); - --color-d-alpha-green: hsla(74, 69%, 44%, 0.2); -} diff --git a/src/css/dark-palette.css b/src/css/dark-palette.css new file mode 100644 index 0000000..f0309d1 --- /dev/null +++ b/src/css/dark-palette.css @@ -0,0 +1,149 @@ +@media(prefers-color-scheme: dark) { + :root { + /*────────── Color Palette ──────────*/ + color-scheme: dark; + /* Grayscale */ + --color-d-gray-10: hsla(32, 48%, 85%, 1); + --color-d-gray-20: hsla(34, 39%, 74%, 1); + --color-d-gray-30: hsla(34, 31%, 68%, 1); + --color-d-gray-40: hsla(35, 27%, 55%, 1); + --color-d-gray-50: hsla(34, 24%, 46%, 1); + --color-d-gray-60: hsla(33, 27%, 33%, 1); + --color-d-gray-70: hsla(31, 27%, 25%, 1); + --color-d-gray-80: hsla(28, 22%, 19%, 1); + --color-d-gray-90: hsla(33, 20%, 17%, 1); + --color-d-gray-100: hsla(30, 19%, 15%, 1); + --color-d-gray-110: hsla(30, 17%, 14%, 1); + --color-d-gray-120: hsla(29, 16%, 13%, 1); + --color-d-gray-130: hsla(24, 18%, 11%, 1); + --color-d-gray-140: hsla(32, 21%, 9%, 1); + --color-d-alpha-gray: hsla(34, 24%, 40%, 0.2); + /* Red */ + --color-d-red-10: hsla(5, 94%, 73%, 1); + --color-d-red-20: hsla(4, 91%, 67%, 1); + --color-d-red-30: hsla(4, 88%, 61%, 1); + --color-d-red-40: hsla(2, 75%, 52%, 1); + --color-d-alpha-red: hsla(350, 84%, 63%, 0.2); + /* Green */ + --color-d-green-10: hsla(152, 51%, 54%, 1); + --color-d-green-20: hsla(154, 57%, 42%, 1); + --color-d-green-30: hsla(155, 78%, 29%, 1); + --color-d-green-40: hsla(154, 75%, 26%, 1); + --color-d-alpha-green: hsla(74, 69%, 44%, 0.2); + /*────────── Window ──────────*/ + /* Scrollbar */ + --scrollbar-bg: transparent; + --scrollbar-thumb-bg: var(--background-modifier-border); + --scrollbar-active-thumb-bg: var(--background-modifier-border-hover); + /*────────── Foundations ──────────*/ + /* Background */ + --background-primary: var(--color-d-gray-100); + --background-primary-alt: var(--color-d-gray-110); + --background-secondary: var(--color-d-gray-120); + --background-secondary-alt: var(--color-d-gray-120); + --background-modifier-hover: rgba(0, 0, 0, 0.3); + --background-modifier-active-hover: var(--color-d-gray-70); + --background-modifier-border: var(--color-d-gray-80); + --background-modifier-border-hover: color-mix(in srgb, var(--color-d-gray-70) 40%, var(--color-d-gray-80)); + --background-modifier-border-focus: color-mix(in srgb, var(--color-d-gray-70) 40%, var(--color-d-gray-80)); + --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); + /* Text Color */ + --text-normal: var(--color-d-gray-20); + --text-muted: var(--color-d-gray-40); + --text-faint: var(--color-d-gray-50); + --text-selection: var(--color-d-alpha-gray); + /* Icon Colors */ + --icon-color: color-mix(in srgb, var(--color-d-gray-60) 30%, var(--color-d-gray-50)); + --icon-opacity: 1; + --icon-bg: transparent; + --icon-color-hover: color-mix(in srgb, var(--color-d-gray-50) 70%, var(--color-d-gray-40)); + --icon-opacity-hover: 1; + --icon-bg-hover: transparent; + --icon-color-focused: var(--color-d-gray-50); + --icon-bg-pressed: transparent; + --icon-color-active: var(--color-d-gray-40); + --icon-opacity-active: 1; + --icon-bg-active: var(--color-d-gray-80); + --icon-bg-active-menu: transparent; + /*────────── Components ──────────*/ + /* Button */ + --button-inset-shadow-size: 2px; + --button-shadow: var(--input-shadow); + --button-shadow-hover: var(--input-shadow-hover); + --button-shadow-active: var(--input-shadow-active); + --button-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.05), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.24), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), + 0px 2px 6px -1px rgba(0, 0, 0, 0.25), + 0px 0px 0px 3px var(--color-d-alpha-gray); + --button-accent-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.26), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.37), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), + 0px 2px 4px -1px rgba(0, 0, 0, 0.14); + --button-accent-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.34), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.26), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.37), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), + 0px 2px 6px -1px rgba(0, 0, 0, 0.19); + --button-accent-shadow-active: var(--input-shadow-active); + --button-accent-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.11), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), + 0px 2px 6px -1px rgba(0, 0, 0, 0.24), + 0px 0px 0px 3px var(--color-d-alpha-gray); + /* Prompt */ + --prompt-input-background: var(--background-primary); + --prompt-results-background: var(--background-primary); + --prompt-suggestion-color: var(--color-d-gray-40); + --prompt-suggestion-highlight-color: color-mix(in srgb, var(--prompt-suggestion-color) 70%, white); + --prompt-suggestion-color-selected: var(--color-d-gray-20); + --prompt-suggestion-highlight-color-selected: var(--color-d-gray-20); + --prompt-suggestion-background-selected: rgba(0, 0, 0, 0.1); + --prompt-suggestion-shadow-selected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.14), + 0px 2px 6px 0px rgba(0, 0, 0, 0.12); + --prompt-instructions-background: color-mix(in hsl, var(--editor-bg-color) 60%, var(--background-secondary)); + --prompt-separator-border: 1px solid var(--color-d-gray-90); + --prompt-border-color: var(--background-modifier-border-focus); + /* Text Input */ + --background-modifier-form-field: var(--color-d-gray-130); + --input-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.02), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.25), + 0px 2px 4px -1px rgba(0, 0, 0, 0.2); + --input-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), + 0px 2px 6px -1px rgba(0, 0, 0, 0.25); + --input-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.45), + inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.15), + inset 0px 2px 8px 0px rgba(0, 0, 0, 0.57), + 0px 0px 0px 1px rgba(255, 255, 255, 0.02); + --text-input-color: var(--color-d-gray-20); + --text-input-color-focused: var(--color-d-gray-20); + --text-input-bg-active: var(--color-d-gray-140); + --text-input-border-color: var(--color-d-gray-140); + --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.03), + inset 0px -1px 0px 0px rgba(0, 0, 0, 0.39), + 0px 1px 6px 0px rgba(0, 0, 0, 0.37); + /* Emphasis */ + --underline-color: var(--text-normal); + --underline-decoration-color: color-mix(in srgb, currentColor var(--link-decoration-opacity), transparent); + } +} diff --git a/src/css/light-palette.css b/src/css/light-palette.css new file mode 100644 index 0000000..f51b62f --- /dev/null +++ b/src/css/light-palette.css @@ -0,0 +1,146 @@ +:root { + /*────────── Color Palette ──────────*/ + color-scheme: light; + /* Grayscale */ + --color-l-gray-10: hsla(36, 38%, 98%, 1); + --color-l-gray-20: hsla(35, 36%, 96%, 1); + --color-l-gray-30: hsla(35, 37%, 92%, 1); + --color-l-gray-40: hsla(34, 34%, 90%, 1); + --color-l-gray-50: hsla(36, 35%, 88%, 1); + --color-l-gray-60: hsla(37, 38%, 83%, 1); + --color-l-gray-70: hsla(34, 37%, 70%, 1); + --color-l-gray-80: hsla(34, 29%, 60%, 1); + --color-l-gray-90: hsla(31, 23%, 50%, 1); + --color-l-gray-100: hsla(35, 28%, 40%, 1); + --color-l-gray-110: hsla(34, 30%, 37%, 1); + --color-l-gray-120: hsla(36, 32%, 30%, 1); + --color-l-gray-130: hsla(31, 45%, 24%, 1); + --color-l-gray-140: hsla(33, 54%, 17%, 1); + --color-l-alpha-gray: hsla(34, 37%, 70%, 0.15); + /* Red */ + --color-l-red-10: hsla(4, 59%, 64%, 1); + --color-l-red-20: hsla(4, 72%, 55%, 1); + --color-l-red-30: hsla(4, 56%, 48%, 1); + --color-l-red-40: hsla(4, 72%, 35%, 1); + --color-l-alpha-red: hsla(350, 84%, 63%, 0.2); + /* Green */ + --color-l-green-10: hsla(148, 30%, 65%, 1); + --color-l-green-20: hsla(148, 48%, 47%, 1); + --color-l-green-30: hsla(149, 50%, 39%, 1); + --color-l-green-40: hsla(153, 65%, 29%, 1); + --color-l-alpha-green: hsla(74, 69%, 44%, 0.2); + /*────────── Window ──────────*/ + /* Scrollbar */ + --scrollbar-bg: transparent; + --scrollbar-thumb-bg: var(--background-modifier-border); + --scrollbar-active-thumb-bg: var(--background-modifier-border-hover); + /*────────── Foundations ──────────*/ + /* Background */ + --background-primary: var(--color-l-gray-20); + --background-primary-alt: var(--color-l-gray-30); + --background-secondary: var(--color-l-gray-40); + --background-secondary-alt: var(--color-l-gray-40); + --background-modifier-hover: rgba(255, 255, 255, 0.5); + --background-modifier-active-hover: var(--color-l-gray-60); + --background-modifier-border: var(--color-l-gray-60); + --background-modifier-border-hover: color-mix(in hsl, var(--color-l-gray-70) 60%, var(--color-l-gray-60)); + --background-modifier-border-focus: color-mix(in hsl, var(--color-l-gray-70) 60%, var(--color-l-gray-60)); + --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); + /* Text Color */ + --text-normal: var(--color-l-gray-130); + --text-muted: var(--color-l-gray-100); + --text-faint: var(--color-l-gray-80); + --text-selection: var(--color-l-alpha-gray); + /* Icon Colors */ + --icon-color: var(--color-l-gray-80); + --icon-opacity: 1; + --icon-bg: transparent; + --icon-color-hover: var(--color-l-gray-90); + --icon-opacity-hover: 1; + --icon-bg-hover: transparent; + --icon-color-focused: var(--color-l-gray-90); + --icon-bg-pressed: transparent; + --icon-color-active: var(--color-l-gray-100); + --icon-opacity-active: 1; + --icon-bg-active: var(--color-l-gray-60); + --icon-bg-active-menu: transparent; + /*────────── Components ──────────*/ + --disabled-component-opacity: 0.3; + /* Button */ + --button-inset-shadow-size: 2px; + --button-shadow: var(--input-shadow); + --button-shadow-hover: var(--input-shadow-hover); + --button-shadow-active: var(--input-shadow-active); + --button-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), + 0px 2px 4px -1px rgba(0, 0, 0, 0.05), + 0px 0px 0px 3px var(--color-l-alpha-gray); + --button-accent-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.22), + 0px 2px 4px -1px rgba(0, 0, 0, 0.19); + --button-accent-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.19), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), + 0px 2px 6px -1px rgba(0, 0, 0, 0.24); + --button-accent-shadow-active: var(--input-shadow-active); + --button-accent-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.15), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), + 0px 2px 6px -1px rgba(0, 0, 0, 0.24), + 0px 0px 0px 3px var(--color-l-alpha-gray); + /* Prompt */ + --prompt-input-background: var(--background-primary); + --prompt-border-color: var(--background-modifier-border-focus); + --prompt-results-background: var(--background-primary); + --prompt-suggestion-color: var(--color-l-gray-90); + --prompt-suggestion-highlight-color: color-mix(in srgb, var(--prompt-suggestion-color) 70%, black); + --prompt-suggestion-color-selected: var(--color-l-gray-130); + --prompt-suggestion-highlight-color-selected: var(--color-l-gray-130); + --prompt-suggestion-background-selected: rgba(255, 255, 255, 0.35); + --prompt-suggestion-shadow-selected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08), + 0px 2px 6px 0px rgba(0, 0, 0, 0.03); + --prompt-instructions-background: color-mix(in hsl, var(--background-primary) 60%, var(--background-secondary)); + --prompt-separator-border: 1px solid var(--color-l-gray-40); + --prompt-border-color: var(--background-modifier-border-focus); + /* Text Input */ + --background-modifier-form-field: var(--color-l-gray-30); + --input-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), + 0px 2px 4px -1px rgba(0, 0, 0, 0.05); + --input-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.15), + 0px 2px 6px -1px rgba(0, 0, 0, 0.1); + --input-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), + inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.09), + inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2), + 0px 0px 0px 1px rgba(255, 255, 255, 0.6); + --text-input-color: var(--color-l-gray-130); + --text-input-color-focused: var(--color-l-gray-130); + --text-input-bg-active: color-mix(in hsl, var(--background-modifier-form-field) 40%, var(--color-l-gray-10)); + --text-input-border-color: var(--color-l-gray-60); + --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04), 0px 1px 6px 0px rgba(0, 0, 0, 0.07); + /* Emphasis */ + --underline-color: var(--text-normal); + --underline-decoration-color: color-mix(in srgb, currentColor var(--underline-decoration-opacity), transparent); diff --git a/src/css/shadows.css b/src/css/shadows.css deleted file mode 100644 index 070da28..0000000 --- a/src/css/shadows.css +++ /dev/null @@ -1,73 +0,0 @@ -:root { - --button-inset-shadow-size: 2px; - - --shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), - 0px 2px 4px -1px rgba(0, 0, 0, 0.05); - - --shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.15), - 0px 2px 6px -1px rgba(0, 0, 0, 0.1); - - --shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), - inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.09), - inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2), - 0px 0px 0px 1px rgba(255, 255, 255, 0.6); - - --shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), - 0px 2px 4px -1px rgba(0, 0, 0, 0.05), - 0px 0px 0px 3px var(--color-l-alpha-gray); - - --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04), 0px 1px 6px 0px rgba(0, 0, 0, 0.07); -} - -@media(prefers-color-scheme: dark) { - :root { - --shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.02), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.25), - 0px 2px 4px -1px rgba(0, 0, 0, 0.2); - - --shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), - 0px 2px 6px -1px rgba(0, 0, 0, 0.25); - - --shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.45), - inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.15), - inset 0px 2px 8px 0px rgba(0, 0, 0, 0.57), - 0px 0px 0px 1px rgba(255, 255, 255, 0.02); - - --button-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.05), - inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3), - inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.24), - inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25), - 0px 4px 4px -5.6px rgba(0, 0, 0, 0.55), - 0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), - 0px 2px 6px -1px rgba(0, 0, 0, 0.25), - 0px 0px 0px 3px var(--color-d-alpha-gray); - - --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.03), - inset 0px -1px 0px 0px rgba(0, 0, 0, 0.39), - 0px 1px 6px 0px rgba(0, 0, 0, 0.37); - } -} diff --git a/src/popup.css b/src/popup.css index c288dd3..adf3669 100644 --- a/src/popup.css +++ b/src/popup.css @@ -1,5 +1,5 @@ -@import "css/colors.css"; -@import "css/shadows.css"; +@import "css/light-palette.css"; +@import "css/dark-palette.css"; :root { --font-features: "calt" 1, "case" 0, "ccmp" 1, "ss03" 1, "cv01" 1, "cv05" 1, "cv06" 1, "cv08" 0, "cv11" 1, "cv12" 0, "cv13" 0; @@ -22,7 +22,7 @@ --spacer-medium: 8px; --spacer-large: 12px; - --spacer-select: 26px; + --spacer-select: 24px; --spacer-other: 18px; --spacer-button-grid: 34px; @@ -34,98 +34,37 @@ --total-height-prompt: 33.5px; } -/* Light theme */ +/* Light theme elements */ :root { - --text-color: var(--color-l-gray-120); - --desc-color: blue; - --desc-color: var(--color-l-gray-110); - --link-color: var(--color-l-gray-90); - - --icon-color: var(--color-l-gray-80); - --icon-color-hover: var(--color-l-gray-90); - --border-color: var(--color-l-gray-50); - --border-color-hover: var(--color-l-gray-60); - --scrollbar-color: var(--color-l-gray-70); - - --body-background-color: var(--color-l-gray-30); - --section-background-color: var(--color-l-gray-10); - - /* State */ - --state-text-color-disabled: var(--color-l-red-20); - --state-text-color-enabled: var(--color-l-green-20); - - /* Text input */ - --text-input-background-color-focus: var(--color-l-gray-10); - --text-input-placeholder-color: var(--color-l-gray-70); - --text-input-background-color: var(--color-l-gray-20); - - /* Select */ - --select-background-color: var(--color-l-gray-20); - --select-icon: url("data:image/svg+xml,") no-repeat; - - /* Button */ - --button-background-color: var(--color-l-gray-20); - --button-background-color-hover: var(--color-l-gray-10); - - /* Save button */ - --save-button-text-color: var(--color-l-gray-10); - --save-button-background-color: var(--color-l-gray-90); - --save-button-background-color-hover: var(--color-l-gray-80); - --save-button-background-color-active: var(--color-l-gray-90); - - /* State button */ - --state-button-text-color: var(--color-l-gray-10); - --state-button-background-color-disabled: var(--color-l-red-20); - --state-button-background-color-disabled-hover: var(--color-l-red-10); - --state-button-background-color-enabled: var(--color-l-green-20); - --state-button-background-color-enabled-hover: var(--color-l-green-10); + --text-contrast: var(--color-l-gray-10); + --text-state-enabled: var(--color-l-green-20); + --text-state-disabled: var(--color-l-red-20); + --button-bg: var(--background-primary); + --button-bg-hover: var(--color-l-gray-10); + --button-state-enabled-bg: var(--color-l-green-20); + --button-state-enabled-bg-hover: var(--color-l-green-10); + --button-state-disabled-bg: var(--color-l-red-20); + --button-state-disabled-bg-hover: var(--color-l-red-10); + --button-save-bg: var(--color-l-gray-90); + --button-save-bg-hover: var(--color-l-gray-80); + --select-icon: url("data:image/svg+xml,") no-repeat; } -/* Dark theme */ +/* Dark theme elements */ @media (prefers-color-scheme: dark) { :root { - --text-color: var(--color-d-gray-10); - --desc-color: var(--color-d-gray-20); - --link-color: var(--color-d-gray-50); - - --icon-color: var(--color-d-gray-50); - --icon-color-hover: var(--color-d-gray-40); - --border-color: var(--color-d-gray-90); - --border-color-hover: var(--color-d-gray-80); - --scrollbar-color: var(--color-d-gray-90); - - --body-background-color: var(--color-d-gray-120); - --section-background-color: var(--color-d-gray-100); - - /* State */ - --state-text-color-disabled: var(--color-d-red-30); - --state-text-color-enabled: var(--color-d-green-20); - - /* Text input */ - --text-input-background-color-focus: var(--color-d-gray-90); - --text-input-placeholder-color: var(--color-d-gray-50); - --text-input-background-color: var(--color-d-gray-100); - - /* Select */ - --select-background-color: var(--color-d-gray-110); - --select-icon: url("data:image/svg+xml,") no-repeat; - - /* Button */ - --button-background-color: var(--color-d-gray-110); - --button-background-color-hover: var(--color-d-gray-100); - - /* Save button */ - --save-button-text-color: var(--color-d-gray-10); - --save-button-background-color: var(--color-d-gray-70); - --save-button-background-color-hover: var(--color-d-gray-60); - --save-button-background-color-active: var(--color-d-gray-70); - - /* State button */ - --state-button-text-color: var(--color-d-gray-10); - --state-button-background-color-disabled: var(--color-d-red-40); - --state-button-background-color-disabled-hover: var(--color-d-red-30); - --state-button-background-color-enabled: var(--color-d-green-30); - --state-button-background-color-enabled-hover: var(--color-d-green-20); + --text-contrast: var(--color-d-gray-10); + --text-state-enabled: var(--color-d-green-20); + --text-state-disabled: var(--color-d-red-30); + --button-bg: var(--background-primary); + --button-bg-hover: var(--color-d-gray-90); + --button-state-enabled-bg: var(--color-d-green-30); + --button-state-enabled-bg-hover: var(--color-d-green-20); + --button-state-disabled-bg: var(--color-d-red-40); + --button-state-disabled-bg-hover: var(--color-d-red-30); + --button-save-bg: var(--color-d-gray-70); + --button-save-bg-hover: var(--color-d-gray-60); + --select-icon: url("data:image/svg+xml,") no-repeat; } } @@ -134,7 +73,7 @@ /* Common */ html { - scrollbar-color: var(--scrollbar-color) transparent; + scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg); } * { @@ -143,9 +82,13 @@ html { font-size: var(--text-large); } +*::selection { + background-color: var(--text-selection); +} + body { - background-color: var(--body-background-color); - color: var(--text-color); + background-color: var(--background-secondary); + color: var(--text-normal); width: var(--window-width); height: var(--window-height); padding-left: var(--window-margin); @@ -154,9 +97,9 @@ body { } section { - background-color: var(--section-background-color); + background-color: var(--background-primary); padding: var(--text-large) var(--window-margin); - border: 1px solid var(--border-color); + border: 1px solid var(--background-modifier-border); border-radius: var(--border-radius-section); margin-top: var(--text-small); } @@ -170,23 +113,31 @@ ul { /* Common button */ -button:not(.delete) { - font-weight: 600; - border: 1px solid var(--border-color); - padding: var(--spacer-small); +button { cursor: pointer; - box-shadow: var(--shadow); outline: none; } +button:not(.delete) { + font-weight: 600; + border: 1px solid var(--background-modifier-border); + padding: var(--spacer-small); + box-shadow: var(--button-shadow); +} + button:not(.delete):hover { - transition-duration: var(--speed-slow); - box-shadow: var(--shadow-hover); + transition: var(--speed-slow); + box-shadow: var(--button-shadow-hover); +} + +button:not(.delete):focus-visible { + transition: var(--speed-fast); + box-shadow: var(--button-shadow-focus); } button:not(.delete):active { transition: var(--speed-slow); - box-shadow: var(--shadow-active); + box-shadow: var(--button-shadow-active); } button:not(.delete) > svg { @@ -220,16 +171,16 @@ button:not(.delete):active > svg { } #site-details p { - color: var(--desc-color); + color: var(--text-muted); } #state { - color: var(--state-text-color-disabled); + color: var(--text-state-disabled); transition: var(--speed-slow); } #state.is-on { - color: var(--state-text-color-enabled); + color: var(--text-state-enabled); transition: var(--speed-slow); } @@ -241,80 +192,85 @@ button:not(.delete):active > svg { align-self: center; margin-left: var(--toggle-margin-left); margin-right: var(--toggle-margin-right); - background-color: var(--state-button-background-color-disabled); - color: var(--state-button-text-color); + background-color: var(--button-state-disabled-bg); + color: var(--text-contrast); } -#toggle:hover, #toggle:focus { - background-color: var(--state-button-background-color-disabled-hover); +#toggle:hover { + background-color: var(--button-state-disabled-bg-hover); } #toggle:active { - background-color: var(--state-button-background-color-disabled); -} + background-color: var(--button-state-disabled-bg); +} /*TODO is this redundant? */ #toggle.is-on { - background-color: var(--state-button-background-color-enabled); - color: var(--state-button-text-color); + background-color: var(--button-state-enabled-bg); + color: var(--text-contrast); } -#toggle.is-on:hover, #toggle.is-on:focus { - background-color: var(--state-button-background-color-enabled-hover); +#toggle.is-on:hover { + background-color: var(--button-state-enabled-bg-hover); } #toggle.is-on:active { - background-color: var(--state-button-background-color-enabled); -} + background-color: var(--button-state-enabled-bg); +} /*TODO same deal as above */ /* Configuration section */ #config input, select { - border: 1px solid var(--border-color); + border: 1px solid var(--background-modifier-border); border-radius: var(--border-radius-input); font-size: var(--text-large); - color: var(--text-color); + color: var(--text-normal); outline: none; } #config input { - background-color: var(--text-input-background-color); + background-color: var(--background-modifier-form-field); box-sizing: border-box; width: 100%; padding: var(--spacer-tiny) var(--spacer-medium); } #config input::placeholder { - color: var(--text-input-placeholder-color); + color: var(--text-faint); } #config input:hover { - border: 1px solid var(--border-color-hover); + border: 1px solid var(--background-modifier-border-hover); transition: var(--speed-fast); } #config input:focus { transition: var(--speed-fast); - border: 1px solid var(--border-color-hover); - background-color: var(--text-input-background-color-focus); + color: var(--text-input-color-focused); + border: 1px solid var(--text-input-border-color); + background-color: var(--text-input-bg-active); box-shadow: var(--text-input-shadow-active); } #config select { padding: var(--spacer-small); padding-right: var(--spacer-select); - box-shadow: var(--shadow); + box-shadow: var(--button-shadow); appearance: none; background: var(--select-icon); - background-position-x: calc(100% - 2px); + background-position-x: calc(100% - 8px); background-position-y: calc(50% - 2px); - background-color: var(--select-background-color); + background-color: var(--prompt-input-background); } -#config select:active, #config select:focus { +#config select:focus-visible { + transition-duration: var(--speed-fast); + box-shadow: var(--button-shadow-focus); +} + +#config select:active { outline: none; - box-shadow: var(--shadow-focus); } #config label { @@ -351,7 +307,7 @@ button:not(.delete):active > svg { #other li label { font-size: var(--text-small); - color: var(--desc-color); + color: var(--text-muted); text-align: right; text-wrap: nowrap; } @@ -371,16 +327,20 @@ button:not(.delete):active > svg { /* Also replacements */ +#prompt-final { + margin-bottom: 0; +} + #also li { display: flex; align-items: center; gap: var(--spacer-small); - margin-top: var(--spacer-small); + margin-bottom: var(--spacer-small); height: var(--total-height-also-li); } #also li label { - color: var(--desc-color); + color: var(--text-muted); } .lhs { @@ -399,16 +359,19 @@ button:not(.delete):active > svg { transition: all var(--speed-fast) allow-discrete; } -.delete:hover, .delete:focus { +.delete:hover { color: var(--icon-color-hover); - outline: none; } -.delete-disabled button { - visibility: hidden; - scale: 0; +.delete:focus { + color: var(--icon-color-focused); } +.delete:active { + color: var(--icon-color-active); +} + + /* Button grid */ @@ -442,31 +405,39 @@ button:not(.delete):active > svg { /* Save */ #save { - background-color: var(--save-button-background-color); - color: var(--save-button-text-color); + background-color: var(--button-save-bg); + color: var(--text-contrast); + box-shadow: var(--button-accent-shadow); } -#save:hover, #save:focus { - background-color: var(--save-button-background-color-hover); +#save:hover { + background-color: var(--button-save-bg-hover); + box-shadow: var(--button-accent-shadow-hover); +} + +#save:focus-visible { + background-color: var(--button-save-bg-hover); + box-shadow: var(--button-accent-shadow-focus); } #save:active { - background-color: var(--save-button-background-color-active); + background-color: var(--button-save-bg); + box-shadow: var(--button-accent-shadow-active); } /* Restore */ #restore { - background-color: var(--button-background-color); - color: var(--text-color); + background-color: var(--button-bg); + color: var(--text-normal); } -#restore:hover, #restore:focus { - background-color: var(--button-background-color-hover); +#restore:hover { + background-color: var(--button-bg-hover); } #restore:active { -background-color: var(--button-background-color-active); + background-color: var(--button-bg); } @@ -486,14 +457,14 @@ background-color: var(--button-background-color-active); display: flex; justify-content: flex-end; text-align: right; - color: var(--link-color); + color: var(--text-faint); text-decoration: underline; - text-decoration-color: color-mix(in srgb, currentColor 22%, transparent); + text-decoration-color: var(--underline-decoration-color); transition-duration: var(--speed-fast); } #links a:hover, #links a:focus{ - color: var(--text-color); + color: var(--text-normal); outline: none; } @@ -521,19 +492,36 @@ background-color: var(--button-background-color-active); /* Transition elements */ .hide { + visibility: hidden; + scale: 0; +} + +.shrink { + scale: 0 !important; + height: 0 !important; + opacity: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.flat { height: 0 !important; overflow: hidden !important; opacity: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; } -.unhide-slow { +.reveal-slow { transition: - height var(--speed-slow) ease-out, - opacity var(--speed-slow) linear !important; + all var(--speed-slow) ease-out !important; } -.unhide-fast { +.reveal-fast { transition: - height var(--speed-fast) ease-out, - opacity var(--speed-fast) linear !important; + all var(--speed-fast) ease-out !important; } diff --git a/src/popup.html b/src/popup.html index 794f4e4..fe7806d 100644 --- a/src/popup.html +++ b/src/popup.html @@ -40,7 +40,7 @@ -