From 2057823b7aeea22c939879481221eb433f25d692 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Wed, 21 Aug 2024 16:13:17 +0100 Subject: [PATCH] setup: flex-ify, light/dark, keep page position on reload got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more flex-[row/col] gap-2's. UI should be more consistent in general, and with the admin UI. The page you were on is actually read from the URL on reload, however does not keep settings (implemented just for ease of UI editing, really). `missing-colors.js` preprocessor script now applies dark prefixes for
s, but like with cards, does not apply a default ~neutral to those without, so that
looks different to
. Light/dark selector added to setup too, and the actual mode given to the browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and controls are now colored according to the theme. --- css/base.css | 14 + html/setup.html | 922 +++++++++++++++++++------------------- lang/setup/en-us.json | 2 + scripts/missing-colors.js | 6 +- ts/modules/theme.ts | 10 +- ts/setup.ts | 108 +++-- 6 files changed, 577 insertions(+), 485 deletions(-) diff --git a/css/base.css b/css/base.css index f8dbdfc..7c1bf35 100644 --- a/css/base.css +++ b/css/base.css @@ -18,6 +18,8 @@ --bg-light: #fff; --bg-dark: #101010; + + color-scheme: light; } .light { @@ -26,6 +28,7 @@ .dark { --settings-section-button-filter: 80%; + color-scheme: dark !important; } .dark body { @@ -456,3 +459,14 @@ input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:befo margin-bottom: -0.5rem; padding-bottom: 0.5rem; } + +section.section:not(.\~neutral) { + background-color: inherit; +} + +@layer components { + .switch input { + @apply mr-1; + } +} + diff --git a/html/setup.html b/html/setup.html index 6853761..b8dc4d9 100644 --- a/html/setup.html +++ b/html/setup.html @@ -7,329 +7,344 @@
-
- - - - - -