priv/static/localize_inputs_core.css

Select File:
priv/static/localize_inputs_core.css

/* Localize.Inputs.Core baseline tokens.
 *
 * Imported by consumers via:
 *
 *   @import "localize_inputs_core/priv/static/localize_inputs_core.css";
 *
 * Sibling libraries (localize_number_inputs,
 * localize_datetime_inputs, money_input) reference the same
 * `--li-*` token set, so one override here re-themes the
 * entire input family.
 */

:root {
  --li-border: #d4d4d8;
  --li-border-focus: #047857;
  --li-bg: #ffffff;
  --li-bg-muted: #f5f5f4;
  --li-fg: #1c1917;
  --li-fg-muted: #78716c;
  --li-accent: #047857;
  --li-accent-fg: #ffffff;
  --li-row-hover: rgba(0, 0, 0, 0.04);
  --li-radius: 0.375rem;
}

/* Dark-mode defaults. Honoured automatically when the OS
   prefers dark and the host page hasn't opted into a
   specific theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --li-border: #3f3f46;
    --li-border-focus: #34d399;
    --li-bg: #18181b;
    --li-bg-muted: #27272a;
    --li-fg: #fafafa;
    --li-fg-muted: #a1a1aa;
    --li-accent: #10b981;
    --li-accent-fg: #052e16;
    --li-row-hover: rgba(255, 255, 255, 0.06);
  }
}

/* Explicit dark-theme override for class-based theme toggles
   (e.g. <html data-theme="dark">). */
[data-theme="dark"] {
  --li-border: #3f3f46;
  --li-border-focus: #34d399;
  --li-bg: #18181b;
  --li-bg-muted: #27272a;
  --li-fg: #fafafa;
  --li-fg-muted: #a1a1aa;
  --li-accent: #10b981;
  --li-accent-fg: #052e16;
  --li-row-hover: rgba(255, 255, 255, 0.06);
}

/* Visually-hidden helper for screen-reader-only labels. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile sheet slide-in. Used by every picker overlay that
   supports the `is-sheet` variant; the per-library overlay
   rule positions itself fixed and animates via this
   keyframe set. */
@keyframes li-sheet-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [class*="-overlay"].is-sheet { animation: none; }
}