/* ============================================================ Glanz Login - palettes & layout Palettes are applied through the data-palette attribute on . Each palette defines the same CSS variables (spec 2.4). ============================================================ */ /* 1. glanz - purple & black (DEFAULT, spec 2.6) */ [data-palette="glanz"] { --gl-header-text: #e9e4f2; --gl-header-accent: #b79df8; --gl-bg: #3e354f; --gl-surface: #1e1727; --gl-header-bg: #0d0a11; --gl-primary: #8b5cf6; --gl-primary-contrast: #ffffff; --gl-text: #e9e4f2; --gl-muted: #a99cc0; --gl-border: #3a2f4d; --gl-accent: #b79df8; --gl-link: #c4b5fd; } /* 2. infosubtle - bg-info-subtle & white (spec 2.7) */ /* 4. onyx - black & dark gray (owner request) */ [data-palette="onyx"] { --gl-header-text: #f0f0f0; --gl-header-accent: #d0d0d0; --gl-bg: #333333; --gl-surface: #262626; --gl-header-bg: #000000; --gl-primary: #e6e6e6; --gl-primary-contrast: #141414; --gl-text: #eaeaea; --gl-muted: #9a9a9a; --gl-border: #4a4a4a; --gl-accent: #d0d0d0; --gl-link: #dedede; } /* 5. pearl - white & light gray (owner request) */ [data-palette="pearl"] { --gl-header-text: #ffffff; --gl-header-accent: #e6e6e6; --gl-bg: #f2f2f2; --gl-surface: #ffffff; --gl-header-bg: #2e2e2e; --gl-primary: #444444; --gl-primary-contrast: #ffffff; --gl-text: #1a1a1a; --gl-muted: #6c6c6c; --gl-border: #d9d9d9; --gl-accent: #2e2e2e; --gl-link: #3d3d3d; } [data-palette="infosubtle"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #cff4fc; --gl-surface: #ffffff; --gl-header-bg: #06596a; --gl-primary: #0aa2c0; --gl-primary-contrast: #ffffff; --gl-text: #1b2b30; --gl-muted: #4d6970; --gl-border: #9eeaf9; --gl-accent: #087990; --gl-link: #066477; } /* 3. emerald */ [data-palette="emerald"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #f2faf5; --gl-surface: #ffffff; --gl-header-bg: #0f5132; --gl-primary: #198754; --gl-primary-contrast: #ffffff; --gl-text: #12281c; --gl-muted: #4f6f5e; --gl-border: #cde8d9; --gl-accent: #0f5132; --gl-link: #146c43; } /* 4. ocean */ [data-palette="ocean"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #eef5fb; --gl-surface: #ffffff; --gl-header-bg: #0b3a5e; --gl-primary: #1971b8; --gl-primary-contrast: #ffffff; --gl-text: #10273a; --gl-muted: #4e6a80; --gl-border: #cfe2f1; --gl-accent: #0b3a5e; --gl-link: #135a94; } /* 5. rose */ [data-palette="rose"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #fdf1f5; --gl-surface: #ffffff; --gl-header-bg: #7d1f3f; --gl-primary: #c2185b; --gl-primary-contrast: #ffffff; --gl-text: #3a1220; --gl-muted: #7d5361; --gl-border: #f4d3df; --gl-accent: #7d1f3f; --gl-link: #a01a4d; } /* 6. amber */ [data-palette="amber"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #fdf7ec; --gl-surface: #ffffff; --gl-header-bg: #6d4b12; --gl-primary: #b8860b; --gl-primary-contrast: #ffffff; --gl-text: #33270e; --gl-muted: #77653f; --gl-border: #f0e2c4; --gl-accent: #6d4b12; --gl-link: #96700c; } /* 7. teal */ [data-palette="teal"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #eefaf9; --gl-surface: #ffffff; --gl-header-bg: #0f4d4a; --gl-primary: #14867f; --gl-primary-contrast: #ffffff; --gl-text: #0e2a29; --gl-muted: #4b6f6d; --gl-border: #cdeae8; --gl-accent: #0f4d4a; --gl-link: #11706a; } /* 8. slate */ [data-palette="slate"] { --gl-header-text: #ffffff; --gl-header-accent: #ffffff; --gl-bg: #f2f4f7; --gl-surface: #ffffff; --gl-header-bg: #2c3440; --gl-primary: #4c5a6b; --gl-primary-contrast: #ffffff; --gl-text: #1e242c; --gl-muted: #5d6b7c; --gl-border: #d6dce4; --gl-accent: #2c3440; --gl-link: #3d4a5a; } /* 9. forest */ [data-palette="forest"] { --gl-header-text: #e3ecdf; --gl-header-accent: #7dc383; --gl-bg: #2d4029; --gl-surface: #1b241a; --gl-header-bg: #0a0f09; --gl-primary: #4c9a52; --gl-primary-contrast: #ffffff; --gl-text: #e3ecdf; --gl-muted: #9db29a; --gl-border: #35442f; --gl-accent: #7dc383; --gl-link: #9ed3a3; } /* 10. midnight */ [data-palette="midnight"] { /* owner correction 2026-08-14: gold didn't fit the tonality of glanz/ forest - replaced with a blue family anchored on DodgerBlue (#1e90ff) for --gl-primary, with lighter tints of the same hue for the accent/ link roles, mirroring how glanz (purple) and forest (green) each derive their accent/link shades from one saturated hue. */ --gl-header-text: #e7ebf5; --gl-header-accent: #6ab3fb; --gl-bg: #273960; --gl-surface: #151e33; --gl-header-bg: #070c17; --gl-primary: #1e90ff; --gl-primary-contrast: #ffffff; --gl-text: #e7ebf5; --gl-muted: #9aa6c0; --gl-border: #2a3654; --gl-accent: #6ab3fb; --gl-link: #aad2f8; } /* Bridge Bootstrap's OWN theme variables to the palette ones above. Bootstrap utilities/ components read --bs-body-color and --bs-secondary-color directly (.text-muted, .form-text, .form-control-plaintext, disabled controls, etc.) - none of those are redefined per palette above, so they always rendered with Bootstrap's fixed defaults, invisible on the dark palettes (glanz, forest, midnight). One rule here fixes every such class, present and future, instead of patching each one individually as it gets reported (owner correction 2026-09-01, after separately patching .form-text alone the round before). --bs-body-bg had to join the bridge too (2026-09-01, second correction): bridging only --bs-body-color made TEXT palette-aware everywhere, including inside components that carry their OWN background tied to --bs-body-bg (plain .form-control outside a .gl-card, and .card/.card-header, whose --bs-card-bg defaults to var(--bs-body-bg) in Bootstrap 5.3) - left unbridged, that background stayed white while the text turned light-on-dark-palette, producing light text on a white box (e.g. TransImob's Analysis/Iniciar matrícula input and the "Andamento da Análise" card, neither wrapped in .gl-card). If another Bootstrap surface variable (--bs-tertiary-bg, --bs-secondary-bg, etc.) turns up with the same symptom, it belongs in this same rule, not a one-off override. --bs-emphasis-color joined on a THIRD pass the same day: it's a separate Bootstrap root variable, never derived from --bs-body-color, so the first two passes missed it entirely. .table's own --bs-table-color reads var(--bs-emphasis-color) (not --bs-body-color) - with it still hardcoded to Bootstrap's fixed #000, every (Usuários Autorizados, Transações Não Encerradas, ...) rendered black text on the now-dark --bs-body-bg cell background, invisible. Bootstrap's tooltip is built the same fixed way but INVERTED on purpose - --bs-tooltip-bg: var(--bs-emphasis-color) and --bs-tooltip-color: var(--bs-body-bg) - so bridging only --bs-body-bg earlier left tooltips with dark text (var(--gl-bg)) on a black bubble (var(--bs-emphasis-color) still unbridged), just as unreadable as before, only differently broken. Bridging --bs-emphasis-color to --gl-text (a light, high-contrast foreground) fixes both at once: tables get light text on the dark cell background, and tooltips flip to a light bubble with dark text - readable, and still visually distinct from the dark page per Bootstrap's own inverted tooltip design, just mirrored to the palette. FOURTH pass, same day, done PROACTIVELY instead of waiting for the next reactive bug report (owner request): pulled Bootstrap 5.3.3's actual compiled `:root,[data-bs-theme=light]` block from the CDN file itself (117 custom properties total - not from memory) and checked every color-related one against live-rendered elements before deciding. Four more confirmed broken the same way and added here: --bs-border-color: var(--gl-border) - .table/.form-control/.form-select/.card/.accordion/ .list-group/.pagination/.nav-tabs/.input-group-text all border off this; was Bootstrap's fixed #dee2e6 (light gray) regardless of palette. Confirmed via screenshot (getComputedStyle reports a stale border-color in this dev/automation browser even when the rendered color is genuinely correct - trust the screenshot over that one property here). --bs-secondary-bg: var(--gl-surface) - .form-control:disabled/.form-select:disabled read this for their background; still Bootstrap's fixed light gray (#e9ecef) made disabled fields on TransImob's own screens (Serventias/EditarContratacao's Meses/Valor/Data do 1º Pagamento, disabled by tipo="Cortesia") show light --gl-text on a near-white box - the same invisible-text bug as the first three passes, just not yet reported. --bs-tertiary-bg: var(--gl-surface) - used by .dropdown-menu/.input-group-text/.pagination/ .list-group for a step-further-muted surface; Bootstrap's own tiers (secondary vs tertiary) collapse to the one --gl-surface tone the palette system actually has. --bs-tertiary-color: var(--gl-muted) - the even-more-muted foreground tier (Bootstrap default rgba(33,37,41,.5) - dark, fixed, same failure mode); collapses to --gl-muted for the same reason. Deliberately NOT bridged, with reasons, so this isn't revisited reactively later: - --bs-success/--bs-danger/--bs-warning/--bs-info/--bs-primary/--bs-secondary (and their -rgb/-text-emphasis/-bg-subtle/-border-subtle variants) are semantic status colors (form validation, alert/badge severity, .ti-log-entry levels) - meant to stay red/green/yellow regardless of palette; re-mapping them would break that meaning, not fix a bug. - --bs-form-valid-color/--bs-form-valid-border-color/--bs-form-invalid-*: same reasoning, tied to validation state, not palette. - --bs-link-color/--bs-link-hover-color: GlanzLogin already has an explicit `a { color: var(--gl-link); }` covering plain links; no live-confirmed instance yet of a Bootstrap component using the variable directly in a way that rule doesn't already reach. - --bs-focus-ring-color: cosmetic (focus glow), not a contrast/visibility bug - still visible either way. - --bs-heading-color: Bootstrap's own default is `inherit` (confirmed from the fetched CSS) - nothing to fix, headings already take the correctly-bridged --bs-body-color. - Every `-rgb` counterpart of a bridged variable (--bs-body-color-rgb, --bs-body-bg-rgb, --bs-secondary-color-rgb, --bs-emphasis-color-rgb, --bs-tertiary-*-rgb): these back rgba() based effects (hover/active tints, some box-shadows) and can't be bridged with a plain `var()` re-point - they need an actual "R, G, B" tuple string, which would mean adding a --gl-*-rgb tuple per color per palette (10 palettes × several colors) - a real structural addition, not a one-line fix, and not yet justified by a confirmed visible bug (worst case today is a slightly off-tint hover overlay, not invisible content). Revisit if one is ever reported. - Typography/sizing/shadow variables (--bs-font-*, --bs-border-width/-radius*, --bs-box- shadow*, --bs-gradient, --bs-code-color, --bs-highlight-*): not color-contrast-relevant to the palette system at all. FIFTH correction, reported the day after the fourth pass shipped: bridging --bs-body-bg made every plain Bootstrap .card (--bs-card-bg defaults to var(--bs-body-bg)) share the EXACT same background as the page itself - on dark palettes the card's border (already bridged to --gl-border) still reads as a visible outline, so the card looked fine; on the 7 light palettes, --gl-border sits too close in value to --gl-bg for that border to carry the card on its own, and the card visually disappeared into the page ("Andamento da Análise" in Analysis/Executar.cshtml, reported first, not wrapped in .gl-card). The real fix isn't another --bs-body-bg tweak: a card is supposed to sit on a DISTINCT surface, not the raw page background - GlanzLogin's own `.gl-card` class already encodes exactly that (`background: var(--gl-surface)`), so plain Bootstrap `.card` should get the same tone via its own variable instead of falling through to --bs-body-bg's default chain. --bs-card-bg can't just join the flat [data-palette] block like the others above: Bootstrap's own `.card` rule re-declares `--bs-card-bg: var(--bs-body-bg)` directly ON the .card element itself. A custom property's value for a given element is resolved from whichever rule matches THAT element directly, if any exists - an inherited value from an ancestor selector like [data-palette] never even enters the competition once .card supplies its own declaration, no matter the specificity or source order of the ancestor rule. Verified live: `[data-palette]` resolved --bs-card-bg to --gl-surface correctly at the level, yet the .card element's OWN computed --bs-card-bg still came back as --gl-bg (the color card visually looked distinct at first, but getComputedStyle confirmed it was accidental box-shadow, not a real background change - card and body background were byte-for-byte identical). Fix: target `.card` directly via a descendant selector, so this rule also matches the .card element itself and wins outright on specificity ((0,0,2,0) vs. Bootstrap's own (0,0,1,0)) rather than trying to win through inheritance, which was structurally impossible. */ [data-palette] { --bs-body-color: var(--gl-text); --bs-secondary-color: var(--gl-muted); --bs-body-bg: var(--gl-bg); --bs-emphasis-color: var(--gl-text); --bs-border-color: var(--gl-border); --bs-secondary-bg: var(--gl-surface); --bs-tertiary-bg: var(--gl-surface); --bs-tertiary-color: var(--gl-muted); } [data-palette] .card { --bs-card-bg: var(--gl-surface); } /* ---------------- base ---------------- */ html, body { height: 100%; } body { background: var(--gl-bg); color: var(--gl-text); display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 1 auto; } a { color: var(--gl-link); } /* ---------------- header (spec 2.1) ---------------- */ .gl-header { background: var(--gl-header-bg); color: var(--gl-header-text); } .gl-brand { color: var(--gl-header-accent); white-space: nowrap; } /* Header buttons always follow the header text color so they stay visible on palettes whose header is dark while the page body is light (fix #1). */ .gl-header .gl-btn { color: var(--gl-header-text); border-color: color-mix(in srgb, var(--gl-header-text) 40%, transparent); } .gl-username { color: var(--gl-header-accent); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; } .gl-footer { color: var(--gl-muted); } .gl-btn { color: var(--gl-text); border: 1px solid var(--gl-border); background: transparent; } .gl-btn:hover { background: var(--gl-primary); color: var(--gl-primary-contrast); border-color: var(--gl-primary); } .gl-btn-primary { /* define bootstrap's own button variables so .btn:hover / :active never fall back to undefined values (which made the button turn invisible) */ --bs-btn-color: var(--gl-primary-contrast); --bs-btn-bg: var(--gl-primary); --bs-btn-border-color: var(--gl-primary); --bs-btn-hover-color: var(--gl-primary-contrast); --bs-btn-hover-bg: var(--gl-primary); --bs-btn-hover-border-color: var(--gl-primary); --bs-btn-active-color: var(--gl-primary-contrast); --bs-btn-active-bg: var(--gl-primary); --bs-btn-active-border-color: var(--gl-primary); background: var(--gl-primary); color: var(--gl-primary-contrast); border: 1px solid var(--gl-primary); } .gl-btn-primary:hover { background: var(--gl-primary); border-color: var(--gl-primary); color: var(--gl-primary-contrast); filter: brightness(1.12); } /* Cancel/Return buttons use plain Bootstrap background utilities (bg-warning, bg-warning-subtle) rather than the full btn-warning variant, so they carry none of Bootstrap's built-in hover/active shading - add it explicitly, same brightness-filter approach as gl-btn-primary above. */ .btn.bg-warning, .btn.bg-warning-subtle { transition: filter .15s ease; } .btn.bg-warning:hover { filter: brightness(0.88); } .btn.bg-warning-subtle:hover { filter: brightness(0.92); } /* "Cancel" buttons (owner request): fixed DarkOrange, not palette-derived, same universal-cue reasoning as bg-warning/bg-warning-subtle. Dark text required - white on this orange only reaches 2.33:1 contrast. */ .gl-btn-dark-orange { background-color: #FF8C00; border-color: #FF8C00; color: #1a1200; transition: filter .15s ease; } .gl-btn-dark-orange:hover { background-color: #FF8C00; border-color: #FF8C00; color: #1a1200; filter: brightness(0.88); } /* "Send"/"Login"/"Register"/"Save Changes" main-action buttons (owner request): fixed Bootstrap success green via bg-success, same reasoning - bg-success is a plain background utility with no built-in hover shading, same gap as bg-warning had before. */ .btn.bg-success { transition: filter .15s ease; } .btn.bg-success:hover { filter: brightness(0.88); } /* "Retornar" background darkened (owner request 2026-09-04, item 6): Bootstrap's own bg-warning-subtle is a very pale yellow tint, too light to read as an actual button at rest. Solid Gold (#FFD700, the color the owner asked for) instead, with a dark enough text color for contrast - fixed, not palette-derived, same reasoning as the comment above (a universal cue regardless of palette, not part of the --gl-* system). Affects every "Retornar"/"Cancel" button in BOTH modules (GlanzLogin and TransImob.IA), since both share this same stylesheet and this exact class combo, used nowhere else in either codebase besides these buttons. !important REQUIRED here (confirmed the hard way, 2026-09-04: without it the override was silently losing and never rendered, despite correct specificity/source-order) - unlike Bootstrap's COMPONENT classes (.card, .form-control, .modal-content, all fixed earlier in this file without !important), Bootstrap's UTILITY classes (.bg-*-subtle, .text-*-emphasis, and bg-/ text- utilities generally) are compiled WITH !important by default (Bootstrap's utility API, $enable-important-utilities: true) - no amount of specificity or cascade order beats an !important rule with a non-!important one, so matching it here is the only way to win. */ .btn.bg-warning-subtle { background-color: #FFD700 !important; } .btn.text-warning-emphasis { color: #4d3b00 !important; } /* Secondary-but-noticeable buttons (owner request): a tint of the palette's own primary color, sitting between gl-btn's plain transparent look and gl-btn-primary's full-strength color, so these stand out without outranking the page's main action button. */ .gl-btn-accent { background: color-mix(in srgb, var(--gl-primary) 35%, var(--gl-surface)); color: var(--gl-text); border: 1px solid color-mix(in srgb, var(--gl-primary) 55%, var(--gl-border)); } .gl-btn-accent:hover { background: var(--gl-primary); color: var(--gl-primary-contrast); border-color: var(--gl-primary); } /* Delete Account (owner request): back to red - a genuine warning color for an irreversible action - but as a solid filled button with a background slightly darker than Bootstrap's standard btn-danger (#dc3545), rather than the original outline-only style which has no visible background at rest. Fixed color, not palette-derived, matching how bg-warning / bg-warning-subtle are also used as universal cues regardless of palette. */ .gl-btn-danger-deep { background: #b02a37; border-color: #b02a37; color: #fff; } .gl-btn-danger-deep:hover { background: #8f222c; border-color: #8f222c; color: #fff; } /* ---------------- cards / forms ---------------- */ .gl-card { background: var(--gl-surface); color: var(--gl-text); border: 1px solid var(--gl-border); } .gl-card .form-control, .gl-card .form-select { background: var(--gl-bg); color: var(--gl-text); border-color: var(--gl-border); } .gl-card .form-control:focus, .gl-card .form-select:focus { border-color: var(--gl-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--gl-primary) 25%, transparent); background: var(--gl-bg); color: var(--gl-text); } .gl-card .form-control:disabled { opacity: .65; } .gl-accent { color: var(--gl-accent); } /* Login form (spec 4.1): email min. 360px, password half of it */ .gl-email { min-width: 360px; } .gl-password { width: 50%; min-width: 180px; } /* Registration (spec 4.3): the password pair defines the width */ /* width now follows the fields (360px min, like the Login form); owner change 2026-08-09, supersedes the fixed 34rem of 4.2.2 */ .gl-register { max-width: 95vw; } .gl-password-fixed { width: 100%; } /* ---------------- palette picker thumbnails (spec 2.4) ---------------- */ .gl-palette-thumb { display: inline-flex; flex-direction: column; width: 44px; height: 34px; padding: 0; border: 2px solid var(--gl-border); border-radius: 4px; overflow: hidden; cursor: pointer; background: none; } .gl-palette-thumb.active { border-color: var(--gl-accent); } .gl-palette-thumb.readonly { cursor: default; } .gl-palette-thumb .t-header { height: 8px; } .gl-palette-thumb .t-body { flex: 1; display: flex; align-items: center; justify-content: space-around; } .gl-palette-thumb .t-card { width: 12px; height: 10px; border-radius: 2px; } .gl-palette-thumb .t-btn { width: 10px; height: 6px; border-radius: 2px; } /* Per-palette thumbnail colors (mini "screens") */ .gl-palette-thumb[data-palette-id="glanz"] .t-header, .gl-palette-thumb[data-static-palette="glanz"] .t-header { background:#0d0a11; } .gl-palette-thumb[data-palette-id="glanz"] .t-body, .gl-palette-thumb[data-static-palette="glanz"] .t-body { background:#3e354f; } .gl-palette-thumb[data-palette-id="glanz"] .t-card, .gl-palette-thumb[data-static-palette="glanz"] .t-card { background:#1e1727; } .gl-palette-thumb[data-palette-id="glanz"] .t-btn, .gl-palette-thumb[data-static-palette="glanz"] .t-btn { background:#8b5cf6; } .gl-palette-thumb[data-palette-id="onyx"] .t-header, .gl-palette-thumb[data-static-palette="onyx"] .t-header { background:#000000; } .gl-palette-thumb[data-palette-id="onyx"] .t-body, .gl-palette-thumb[data-static-palette="onyx"] .t-body { background:#333333; } .gl-palette-thumb[data-palette-id="onyx"] .t-card, .gl-palette-thumb[data-static-palette="onyx"] .t-card { background:#262626; } .gl-palette-thumb[data-palette-id="onyx"] .t-btn, .gl-palette-thumb[data-static-palette="onyx"] .t-btn { background:#e6e6e6; } .gl-palette-thumb[data-palette-id="pearl"] .t-header, .gl-palette-thumb[data-static-palette="pearl"] .t-header { background:#2e2e2e; } .gl-palette-thumb[data-palette-id="pearl"] .t-body, .gl-palette-thumb[data-static-palette="pearl"] .t-body { background:#f2f2f2; } .gl-palette-thumb[data-palette-id="pearl"] .t-card, .gl-palette-thumb[data-static-palette="pearl"] .t-card { background:#ffffff; border:1px solid #d9d9d9; } .gl-palette-thumb[data-palette-id="pearl"] .t-btn, .gl-palette-thumb[data-static-palette="pearl"] .t-btn { background:#444444; } .gl-palette-thumb[data-palette-id="infosubtle"] .t-header, .gl-palette-thumb[data-static-palette="infosubtle"] .t-header { background:#06596a; } .gl-palette-thumb[data-palette-id="infosubtle"] .t-body, .gl-palette-thumb[data-static-palette="infosubtle"] .t-body { background:#cff4fc; } .gl-palette-thumb[data-palette-id="infosubtle"] .t-card, .gl-palette-thumb[data-static-palette="infosubtle"] .t-card { background:#ffffff; } .gl-palette-thumb[data-palette-id="infosubtle"] .t-btn, .gl-palette-thumb[data-static-palette="infosubtle"] .t-btn { background:#0aa2c0; } .gl-palette-thumb[data-palette-id="emerald"] .t-header, .gl-palette-thumb[data-static-palette="emerald"] .t-header { background:#0f5132; } .gl-palette-thumb[data-palette-id="emerald"] .t-body, .gl-palette-thumb[data-static-palette="emerald"] .t-body { background:#f2faf5; } .gl-palette-thumb[data-palette-id="emerald"] .t-card, .gl-palette-thumb[data-static-palette="emerald"] .t-card { background:#ffffff; border:1px solid #cde8d9; } .gl-palette-thumb[data-palette-id="emerald"] .t-btn, .gl-palette-thumb[data-static-palette="emerald"] .t-btn { background:#198754; } .gl-palette-thumb[data-palette-id="ocean"] .t-header, .gl-palette-thumb[data-static-palette="ocean"] .t-header { background:#0b3a5e; } .gl-palette-thumb[data-palette-id="ocean"] .t-body, .gl-palette-thumb[data-static-palette="ocean"] .t-body { background:#eef5fb; } .gl-palette-thumb[data-palette-id="ocean"] .t-card, .gl-palette-thumb[data-static-palette="ocean"] .t-card { background:#ffffff; border:1px solid #cfe2f1; } .gl-palette-thumb[data-palette-id="ocean"] .t-btn, .gl-palette-thumb[data-static-palette="ocean"] .t-btn { background:#1971b8; } .gl-palette-thumb[data-palette-id="rose"] .t-header, .gl-palette-thumb[data-static-palette="rose"] .t-header { background:#7d1f3f; } .gl-palette-thumb[data-palette-id="rose"] .t-body, .gl-palette-thumb[data-static-palette="rose"] .t-body { background:#fdf1f5; } .gl-palette-thumb[data-palette-id="rose"] .t-card, .gl-palette-thumb[data-static-palette="rose"] .t-card { background:#ffffff; border:1px solid #f4d3df; } .gl-palette-thumb[data-palette-id="rose"] .t-btn, .gl-palette-thumb[data-static-palette="rose"] .t-btn { background:#c2185b; } .gl-palette-thumb[data-palette-id="amber"] .t-header, .gl-palette-thumb[data-static-palette="amber"] .t-header { background:#6d4b12; } .gl-palette-thumb[data-palette-id="amber"] .t-body, .gl-palette-thumb[data-static-palette="amber"] .t-body { background:#fdf7ec; } .gl-palette-thumb[data-palette-id="amber"] .t-card, .gl-palette-thumb[data-static-palette="amber"] .t-card { background:#ffffff; border:1px solid #f0e2c4; } .gl-palette-thumb[data-palette-id="amber"] .t-btn, .gl-palette-thumb[data-static-palette="amber"] .t-btn { background:#b8860b; } .gl-palette-thumb[data-palette-id="teal"] .t-header, .gl-palette-thumb[data-static-palette="teal"] .t-header { background:#0f4d4a; } .gl-palette-thumb[data-palette-id="teal"] .t-body, .gl-palette-thumb[data-static-palette="teal"] .t-body { background:#eefaf9; } .gl-palette-thumb[data-palette-id="teal"] .t-card, .gl-palette-thumb[data-static-palette="teal"] .t-card { background:#ffffff; border:1px solid #cdeae8; } .gl-palette-thumb[data-palette-id="teal"] .t-btn, .gl-palette-thumb[data-static-palette="teal"] .t-btn { background:#14867f; } .gl-palette-thumb[data-palette-id="slate"] .t-header, .gl-palette-thumb[data-static-palette="slate"] .t-header { background:#2c3440; } .gl-palette-thumb[data-palette-id="slate"] .t-body, .gl-palette-thumb[data-static-palette="slate"] .t-body { background:#f2f4f7; } .gl-palette-thumb[data-palette-id="slate"] .t-card, .gl-palette-thumb[data-static-palette="slate"] .t-card { background:#ffffff; border:1px solid #d6dce4; } .gl-palette-thumb[data-palette-id="slate"] .t-btn, .gl-palette-thumb[data-static-palette="slate"] .t-btn { background:#4c5a6b; } .gl-palette-thumb[data-palette-id="forest"] .t-header, .gl-palette-thumb[data-static-palette="forest"] .t-header { background:#0a0f09; } .gl-palette-thumb[data-palette-id="forest"] .t-body, .gl-palette-thumb[data-static-palette="forest"] .t-body { background:#2d4029; } .gl-palette-thumb[data-palette-id="forest"] .t-card, .gl-palette-thumb[data-static-palette="forest"] .t-card { background:#1b241a; } .gl-palette-thumb[data-palette-id="forest"] .t-btn, .gl-palette-thumb[data-static-palette="forest"] .t-btn { background:#4c9a52; } .gl-palette-thumb[data-palette-id="midnight"] .t-header, .gl-palette-thumb[data-static-palette="midnight"] .t-header { background:#070c17; } .gl-palette-thumb[data-palette-id="midnight"] .t-body, .gl-palette-thumb[data-static-palette="midnight"] .t-body { background:#273960; } .gl-palette-thumb[data-palette-id="midnight"] .t-card, .gl-palette-thumb[data-static-palette="midnight"] .t-card { background:#151e33; } .gl-palette-thumb[data-palette-id="midnight"] .t-btn, .gl-palette-thumb[data-static-palette="midnight"] .t-btn { background:#1e90ff; } /* ---------------- flags (spec 2.5) ---------------- */ .gl-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } .gl-flag-lg { width: 34px; height: 23px; } .gl-flag-btn { background: none; border: 2px solid transparent; border-radius: 4px; padding: 2px; cursor: pointer; } .gl-flag-btn.active, .gl-flag-btn:hover { border-color: var(--gl-accent); } /* dropdown menus follow the palette */ .gl-palette-menu, .gl-language-menu { background: var(--gl-surface); border: 1px solid var(--gl-border); color: var(--gl-text); } /* ---------------- RTL details ---------------- */ /* email inputs are always LTR internally (correct for addresses), but in right-to-left layouts the value should sit at the right edge */ [dir="rtl"] input[type="email"] { text-align: right; } /* ---------------- show-password toggle ---------------- */ .gl-pass-toggle { --bs-btn-color: var(--gl-text); --bs-btn-bg: var(--gl-bg); --bs-btn-border-color: var(--gl-border); --bs-btn-hover-color: var(--gl-text); --bs-btn-hover-bg: var(--gl-bg); --bs-btn-hover-border-color: var(--gl-border); --bs-btn-active-color: var(--gl-text); --bs-btn-active-bg: var(--gl-bg); --bs-btn-active-border-color: var(--gl-border); color: var(--gl-text); background: var(--gl-bg); border: 1px solid var(--gl-border); } .gl-pass-toggle:hover { filter: brightness(1.08); } /* ---------------- form title panels ---------------- */ /* separate panel above Login/Registration, colored from the active palette */ .gl-title-card { background: var(--gl-primary); color: var(--gl-primary-contrast); border-color: var(--gl-primary); }