Changeset 977f65d in Klonkt for src/assets/css/style.css

Timestamp:

06/19/2026 08:25:35 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

ca507ef

Parents:

13b2986

Message:

ui: date/time picker in site theme (dark/light follows toggle) + accent color

color-scheme tied to data-theme (instead of OS preference) so the native date/time
popup is dark on a dark site; accent-color on date/time/datetime inputs → the
highlighted day gets the site accent instead of browser blue; picker icon with
cleaner hover/opacity. (The popup itself stays a browser widget; fonts/borders
not styleable.)
style.css v10->v11.

Co-Authored-By: Claude <noreply@…>

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -65 +65 @@
     color-scheme: light dark;
 }
+
+/* Native controls (datum/tijd-picker, scrollbars) het SITE-thema laten volgen i.p.v.
+   de OS-voorkeur, en de datum/tijd-velden de site-accentkleur geven. Zo staat de
+   ingebouwde kalender-popup in dark + accent (de popup zelf is een browser-widget,
+   dus fonts/randen blijven van de browser). */
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+input[type="date"], input[type="time"], input[type="datetime-local"] { accent-color: var(--accent, #6b8f71); }
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
+input[type="date"]:hover::-webkit-calendar-picker-indicator,
+input[type="time"]:hover::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
 
 /* ============================================================