diff options
-rw-r--r-- | assets/css/default.css | 45 | ||||
-rw-r--r-- | themes/default/layouts/partials/styles-navigator.html | 9 |
2 files changed, 33 insertions, 21 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 { diff --git a/themes/default/layouts/partials/styles-navigator.html b/themes/default/layouts/partials/styles-navigator.html index b7bb3f0..7485408 100644 --- a/themes/default/layouts/partials/styles-navigator.html +++ b/themes/default/layouts/partials/styles-navigator.html @@ -9,6 +9,11 @@ column-base[position="left"] nav a[href="{{ "" | absURL }}{{ .Link }}"] { } icon-navigator a[href="{{ "" | absURL }}{{ .Link }}"] svg { - fill: #e5f0ff; - fill: var(--active-background-alternate); + fill: #cce0ff; + fill: var(--icon-hover-background); +} + +icon-navigator a[href="{{ "" | absURL }}{{ .Link }}"]:focus svg { + fill: #cce0ff; + fill: var(--icon-focus-background); } |