Changeset 977f65d in Klonkt

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@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/shell.ejs (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; }
 
 /* ============================================================

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=10">
+<link rel="stylesheet" href="/assets/css/style.css?v=11">
 
 <!-- Audio player styles: loaded on every page so the mini-player works