Make button labels visible on non-green buttons
The global `button` rule pairs a green background with white text. Any variant that overrode the background without also setting `color` kept the white text and rendered invisible against a light background. Four controls were affected, all measured white-on-white or white-on-light-grey: the calendar header's prev/next arrows, the calendar's override-mode toggle, the red-days list's year navigation, and the modal close button. Each now declares its own `color: var(--c-text)`. Using the variable rather than a literal means the high-contrast media query in responsive.css, which redefines --c-text to #000, still applies. Also adds the hover and focus-visible states the Settings and vacation-days Save buttons were missing entirely -- they were the only green buttons in the app that did not react to the pointer. Hover is scoped with :not(:disabled) so a button disabled mid-save stays inert. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RXMhc9nT6sNz1SL4j8dznL
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
color: var(--c-text);
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
@@ -373,6 +374,7 @@
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: var(--c-text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
||||
|
||||
Reference in New Issue
Block a user