Etusivu Tutki Apua
Kirjaudu sisään
yunoadmin
/
bambuddy
peilaus alkaen https://github.com/maziggy/bambuddy
1
0
Haarauta 0
Tiedostot Esitykset 0 Wiki
Selaa lähdekoodia

Tell the browser which colour scheme the page is in

    The parts of a form control the browser draws itself -- a number input's
    stepper, a date field's calendar button and popup, a select's dropdown,
    scrollbars, the autofill tint -- were painted in the light appearance on
    every theme. Bambuddy switches theme by swapping CSS variables under a
    `dark` class, which the browser cannot see, so it assumed the page was
    light and matched the steppers to a white background that was not there.

    Declaring color-scheme alongside the variables fixes all of them at once,
    in both directions. It goes on `.dark` rather than the per-palette
    classes because the kiosk sets `dark` on the root element directly.

    Three date and time fields had been pinned to dark by hand to work
    around this and no longer need to be; being pinned, they were wrong
    under the light theme anyway.
maziggy 3 viikkoa sitten
vanhempi
9b2bd911d8 4a65abe228
sitoutus
9a8c47ee4e
6 muutettua tiedostoa jossa 22 lisäystä ja 5 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 1 1
      frontend/src/components/GitHubBackupSettings.tsx
  2. 17 0
      frontend/src/index.css
  3. 2 2
      frontend/src/pages/StatsPage.tsx
  4. 0 0
      static/assets/index-Bg0yeHsW.js
  5. 0 0
      static/assets/index-D4EtyCBI.css
  6. 2 2
      static/index.html

+ 1 - 1
frontend/src/components/GitHubBackupSettings.tsx
Näytä tiedosto 

@@ -1270,7 +1270,7 @@ export function GitHubBackupSettings() {
 
                       <input
 
                         type="time"
 
                         value={localBackupStatus?.time ?? '03:00'}
 
-                        className="w-full h-10 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none [color-scheme:dark]"
 
+                        className="w-full h-10 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none"
 
                         onChange={async (e) => {
 
                           try {
 
                             await api.updateSettings({ local_backup_time: e.target.value });

+ 17 - 0
frontend/src/index.css
Näytä tiedosto 

@@ -101,6 +101,17 @@ html {
 
   --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
   --glow-color: transparent;
 
 
+  /* Tell the browser which appearance the page is in, so the parts of a form
 
+     control it draws itself follow the theme.  Bambuddy themes by
 
+     swapping CSS variables under a `.dark` class, which the browser cannot
 
+     see: without this declaration it assumes light and paints every native
 
+     widget internal that way -- number-input steppers, the date picker's
 
+     calendar button and its popup, `<select>` dropdowns, scrollbars, the
 
+     autofill highlight.  That is why the quantity steppers in the print
 
+     dialog were pale grey chips inside a dark field.  Only the widget
 
+     internals are affected; anything we set ourselves still wins. */
 
+  color-scheme: light;
 
+
 
   font-family: 'Inter', system-ui, sans-serif;
 
   line-height: 1.5;
 
   font-weight: 400;
 
@@ -112,6 +123,12 @@ html {
 
 
 /* Dark mode base */
 
 .dark {
 
+  /* Pairs with `color-scheme: light` on :root -- see the note there.  This
 
+     sits on `.dark` rather than on each `.dark.bg-*` palette because the
 
+     kiosk adds `dark` to <html> on its own (SpoolBuddyLayout), and every
 
+     palette is a dark one regardless of which background it picks. */
 
+  color-scheme: dark;
 
+
 
   --bg-primary: #1a1a1a;
 
   --bg-secondary: #2d2d2d;
 
   --bg-tertiary: #3d3d3d;

+ 2 - 2
frontend/src/pages/StatsPage.tsx
Näytä tiedosto 

@@ -1370,7 +1370,7 @@ export function StatsPage() {
 
                           value={timeframe.dateFrom || ''}
 
                           max={timeframe.dateTo || new Date().toISOString().split('T')[0]}
 
                           onChange={(e) => setTimeframe(prev => ({ ...prev, dateFrom: e.target.value || undefined }))}
 
-                          className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded-md px-3 py-1.5 text-sm text-white [color-scheme:dark]"
 
+                          className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded-md px-3 py-1.5 text-sm text-white"
 
                         />
 
                       </div>
 
                       <div>
 
@@ -1381,7 +1381,7 @@ export function StatsPage() {
 
                           min={timeframe.dateFrom}
 
                           max={new Date().toISOString().split('T')[0]}
 
                           onChange={(e) => setTimeframe(prev => ({ ...prev, dateTo: e.target.value || undefined }))}
 
-                          className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded-md px-3 py-1.5 text-sm text-white [color-scheme:dark]"
 
+                          className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded-md px-3 py-1.5 text-sm text-white"
 
                         />
 
                       </div>
 
                       <Button

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
static/assets/index-Bg0yeHsW.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
static/assets/index-D4EtyCBI.css


+ 2 - 2
static/index.html
Näytä tiedosto 

@@ -26,8 +26,8 @@
 
 
     <!-- Splash screens for iOS -->
 
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
 
-    <script type="module" crossorigin src="/assets/index-BlVotyTj.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/assets/index-BkuH4t27.css">
 
+    <script type="module" crossorigin src="/assets/index-Bg0yeHsW.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/assets/index-D4EtyCBI.css">
 
   </head>
 
   <body>
 
     <div id="root"></div>

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä