diff options
author | tdro <tdro@noreply.example.com> | 2023-08-30 17:02:02 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2023-08-30 17:03:22 -0400 |
commit | e3f3e059c90cbf96005532aaceb899a67477b2bb (patch) | |
tree | 148752c8e561d6bf1e3ec30b79ceca8371c87467 /assets | |
parent | 497f0cf5f7b331db936a9a15c38c9be8211ce608 (diff) | |
download | canory-e3f3e059c90cbf96005532aaceb899a67477b2bb.tar.gz canory-e3f3e059c90cbf96005532aaceb899a67477b2bb.tar.bz2 canory-e3f3e059c90cbf96005532aaceb899a67477b2bb.zip |
themes/default/layouts/partials/styles-navigator: Fix icon hover contrast
Sort color schemes
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/default.css | 45 |
1 files changed, 26 insertions, 19 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 2a68a5a..6e90ce3 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -46,39 +46,40 @@ --primary: 230; --secondary: 258; --accent: 217; - --foreground: hsl(var(--primary), 99%, 5%); - --fade: hsl(var(--primary), 35%, 30%); - --border-lighter: hsl(var(--primary), 35%, 92%); + --background-bolder: hsl(var(--secondary), 99%, 98%); + --background: hsl(var(--secondary), 99%, 99%); --border-darker: hsl(var(--primary), 35%, 80%); --border-darkest: hsl(var(--primary), 35%, 70%); - --background: hsl(var(--secondary), 99%, 99%); - --background-bolder: hsl(var(--secondary), 99%, 98%); - --widget-background: hsl(var(--secondary), 25%, 97%); - --hover-background: hsl(var(--secondary), 25%, 94%); - --focus-within-background: hsl(var(--secondary), 52%, 95%); - --table-even-background: hsl(var(--secondary), 25%, 99%); - --table-odd-background: hsl(var(--secondary), 25%, 97%); - --link: hsl(var(--accent), 99%, 37%); - --hover-background-alternate: hsl(var(--accent), 100%, 96%); - --active-background-alternate: hsl(var(--accent), 100%, 90%); + --border-lighter: hsl(var(--primary), 35%, 92%); --button-background: #fff; --danger-background-lighter: #fff5f5; --danger-background: #fcd2cf; --danger: #8f0000; + --fade: hsl(var(--primary), 35%, 30%); + --focus-within-background: hsl(var(--secondary), 52%, 95%); + --foreground: hsl(var(--primary), 99%, 5%); + --hover-background-alternate: hsl(var(--accent), 100%, 96%); + --hover-background: hsl(var(--secondary), 25%, 94%); + --icon-focus-background: var(--icon-hover-background); + --icon-hover-background: hsl(var(--accent), 100%, 90%); + --link: hsl(var(--accent), 99%, 37%); --shadow: #00000060; --spoiler: #444; --success-background: #d5f3c4; --success: #1d3c0c; + --table-even-background: hsl(var(--secondary), 25%, 99%); + --table-odd-background: hsl(var(--secondary), 25%, 97%); --warning-background: #ffe699; --warning: #332600; + --widget-background: hsl(var(--secondary), 25%, 97%); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { - --active-background-alternate: #425a8a; - --background-bolder: #0d0d0d; --background-rgb: 17, 17, 17; + --foreground-rgb: 221, 221, 221; + --background-bolder: #0d0d0d; --background: rgba(var(--background-rgb), 1); --border-darker: #555; --border-darkest: #999; @@ -89,10 +90,11 @@ --danger: #ff9494; --fade: rgba(var(--foreground-rgb), 0.75); --focus-within-background: #291933; - --foreground-rgb: 221, 221, 221; --foreground: rgba(var(--foreground-rgb), 1); --hover-background-alternate: #1c263a; --hover-background: rgba(var(--foreground-rgb), 0.08); + --icon-focus-background: #88aefb; + --icon-hover-background: #425a8a; --link: #a3c3ff; --shadow: #000; --spoiler: #aaa; @@ -164,7 +166,7 @@ nav a:focus, button:focus, code-block a:focus, context-control a:focus { - outline-offset: -0.15rem !important; + outline-offset: -0.2rem !important; } pre:focus, @@ -652,9 +654,14 @@ column-base[position="left"] nav li:hover a { border-radius: 0.5rem; } -column-base[position="left"] nav li:hover svg { +column-base[position="left"] nav a:hover svg { + fill: #cce0ff; + fill: var(--icon-hover-background); +} + +column-base[position="left"] nav a:focus svg { fill: #cce1ff; - fill: var(--active-background-alternate); + fill: var(--icon-focus-background); } column-base[position="left"] nav a span { |