Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

style(css): standardize code surface and highlight colors

Browse Source 
Introduces a comprehensive set of CSS variables defining surfaces, syntax elements, and diff coloring across both light and dark themes. This refactoring replaces numerous hardcoded color values throughout the stylesheet with these new variables, ensuring that all components consistently adhere to the defined theme palette.

- Added detailed variable definitions for code surfaces (e.g., `--code-surface`, `--code-input-bg`).
- Updated diff, hunk, and blame sections to use variable colors for better thematic consistency.
- Replaced fixed hex codes with variables across various component backgrounds and text colors.
This commit is contained in:
Christoph Brandau
2026-07-10 22:16:06 +02:00
parent 8e6811b786
commit d3cde83518
1 changed files with 169 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+169 -73
View File
@@ -44,6 +44,27 @@
--app-settings-row-bg: #141b29; --app-settings-row-bg: #141b29;
--app-scrollbar-thumb: #303a4f; --app-scrollbar-thumb: #303a4f;
--app-scrollbar-thumb-hover: #44506a; --app-scrollbar-thumb-hover: #44506a;
--code-surface: #111321;
--code-surface-raised: #171a2b;
--code-surface-subtle: #0d101a;
--code-surface-muted: #10131e;
--code-surface-meta: #0c0e18;
--code-input-bg: #0b0e18;
--code-hover-bg: #151a2b;
--code-add-text: #5dd88a;
--code-add-strong: #4eca76;
--code-add-bg: rgba(78, 202, 118, 0.09);
--code-add-gutter-bg: rgba(78, 202, 118, 0.1);
--code-delete-text: #ef8080;
--code-delete-strong: #e86060;
--code-delete-bg: rgba(232, 96, 96, 0.1);
--code-delete-gutter-bg: rgba(232, 96, 96, 0.12);
--code-hunk-text: #7aacff;
--code-hunk-bg: rgba(122, 172, 255, 0.08);
--code-match-text: #f3c969;
--code-match-bg: rgba(240, 182, 72, 0.22);
--code-match-gutter-bg: rgba(240, 182, 72, 0.2);
} }
:root[data-theme="light"] { :root[data-theme="light"] {
@@ -89,6 +110,27 @@
--app-settings-row-bg: #f8fafd; --app-settings-row-bg: #f8fafd;
--app-scrollbar-thumb: #c2cada; --app-scrollbar-thumb: #c2cada;
--app-scrollbar-thumb-hover: #aeb8cb; --app-scrollbar-thumb-hover: #aeb8cb;
--code-surface: #fbfcfe;
--code-surface-raised: #f1f5fa;
--code-surface-subtle: #f3f6fb;
--code-surface-muted: #edf1f7;
--code-surface-meta: #e9eef7;
--code-input-bg: #ffffff;
--code-hover-bg: #e8eef7;
--code-add-text: #146c37;
--code-add-strong: #19723d;
--code-add-bg: rgba(25, 114, 61, 0.1);
--code-add-gutter-bg: rgba(25, 114, 61, 0.14);
--code-delete-text: #a91f36;
--code-delete-strong: #b4233b;
--code-delete-bg: rgba(180, 35, 59, 0.09);
--code-delete-gutter-bg: rgba(180, 35, 59, 0.13);
--code-hunk-text: #245cc7;
--code-hunk-bg: rgba(36, 92, 199, 0.09);
--code-match-text: #744500;
--code-match-bg: rgba(230, 158, 31, 0.2);
--code-match-gutter-bg: rgba(230, 158, 31, 0.24);
} }
@layer base { @layer base {
@@ -3124,7 +3166,7 @@
gap: 8px; gap: 8px;
padding: 7px 12px; padding: 7px 12px;
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
background: #171a2b; background: var(--code-surface-raised);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
color: var(--color-ink-muted); color: var(--color-ink-muted);
@@ -3146,7 +3188,7 @@
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
tab-size: 2; tab-size: 2;
background: #111321; background: var(--code-surface);
} }
.split-pane { .split-pane {
@@ -3170,8 +3212,8 @@
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
} }
.split-span.split-meta { color: var(--color-ink-faint); background: #0c0e18; font-size: 11px; } .split-span.split-meta { color: var(--color-ink-faint); background: var(--code-surface-meta); font-size: 11px; }
.split-span.split-hunk { color: #7aacff; background: rgba(122,172,255,0.08); padding: 3px 10px; } .split-span.split-hunk { color: var(--code-hunk-text); background: var(--code-hunk-bg); padding: 3px 10px; }
.split-num { .split-num {
padding: 0 6px 0 4px; padding: 0 6px 0 4px;
@@ -3180,11 +3222,11 @@
font-size: 11px; font-size: 11px;
user-select: none; user-select: none;
border-right: 1px solid var(--color-border-subtle); border-right: 1px solid var(--color-border-subtle);
background: #0d101a; background: var(--code-surface-subtle);
} }
.split-num.del { background: rgba(232,96,96,0.12); color: rgba(232,96,96,0.6); border-right-color: rgba(232,96,96,0.2); } .split-num.del { background: var(--code-delete-gutter-bg); color: var(--code-delete-strong); border-right-color: rgba(232,96,96,0.2); }
.split-num.add { background: rgba(78,202,118,0.1); color: rgba(78,202,118,0.6); border-right-color: rgba(78,202,118,0.2); } .split-num.add { background: var(--code-add-gutter-bg); color: var(--code-add-strong); border-right-color: rgba(78,202,118,0.2); }
.split-num.empty { background: #10131e; } .split-num.empty { background: var(--code-surface-muted); }
.split-cell { .split-cell {
padding: 0 8px; padding: 0 8px;
@@ -3193,20 +3235,20 @@
min-width: 0; min-width: 0;
overflow: visible; overflow: visible;
} }
.split-cell.del { background: rgba(232,96,96,0.1); color: #ef8080; } .split-cell.del { background: var(--code-delete-bg); color: var(--code-delete-text); }
.split-cell.add { background: rgba(78,202,118,0.09); color: #5dd88a; } .split-cell.add { background: var(--code-add-bg); color: var(--code-add-text); }
.split-cell.empty { background: #10131e; } .split-cell.empty { background: var(--code-surface-muted); }
/* Search-hit highlight: amber, distinct from add (green) / del (red). /* Search-hit highlight: amber, distinct from add (green) / del (red).
Higher specificity so it overrides the add/del backgrounds on a matched line. */ Higher specificity so it overrides the add/del backgrounds on a matched line. */
.split-diff .split-cell.match { .split-diff .split-cell.match {
background: rgba(240,182,72,0.22); background: var(--code-match-bg);
color: #f3c969; color: var(--code-match-text);
box-shadow: inset 2px 0 0 rgba(240,182,72,0.9); box-shadow: inset 2px 0 0 rgba(240,182,72,0.9);
} }
.split-diff .split-num.match { .split-diff .split-num.match {
background: rgba(240,182,72,0.2); background: var(--code-match-gutter-bg);
color: rgba(240,182,72,0.9); color: var(--code-match-text);
border-right-color: rgba(240,182,72,0.35); border-right-color: rgba(240,182,72,0.35);
} }
@@ -3226,7 +3268,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--color-ink-faint); color: var(--color-ink-faint);
background: #0d101a; background: var(--code-surface-subtle);
} }
.split-col-label + .split-col-label { border-left: 1px solid var(--color-border-subtle); } .split-col-label + .split-col-label { border-left: 1px solid var(--color-border-subtle); }
.split-col-hash { .split-col-hash {
@@ -3338,7 +3380,7 @@
.line-patch-scroll { .line-patch-scroll {
min-height: 0; min-height: 0;
overflow: auto; overflow: auto;
background: #0b0b14; background: var(--code-surface);
} }
.line-patch-hunk { .line-patch-hunk {
@@ -3358,7 +3400,7 @@
min-width: 100%; min-width: 100%;
padding: 7px 10px; padding: 7px 10px;
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
background: rgba(20, 22, 36, 0.96); background: color-mix(in srgb, var(--code-surface-raised) 96%, transparent);
} }
.line-patch-hunk-head code { .line-patch-hunk-head code {
color: var(--color-accent); color: var(--color-accent);
@@ -3378,23 +3420,23 @@
padding: 0 8px; padding: 0 8px;
border: 1px solid var(--color-border-subtle); border: 1px solid var(--color-border-subtle);
border-radius: 3px; border-radius: 3px;
background: rgba(255, 255, 255, 0.03); background: var(--code-surface-subtle);
color: var(--color-ink); color: var(--color-ink);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
} }
.line-patch-hunk-button:hover:not(:disabled) { .line-patch-hunk-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08); background: var(--code-hover-bg);
} }
.line-patch-hunk-button.discard { .line-patch-hunk-button.discard {
border-color: rgba(255, 90, 103, 0.7); border-color: rgba(255, 90, 103, 0.7);
color: #ffccd1; color: var(--code-delete-text);
} }
.line-patch-hunk-button.stage, .line-patch-hunk-button.stage,
.line-patch-hunk-button.unstage { .line-patch-hunk-button.unstage {
border-color: rgba(78, 202, 118, 0.72); border-color: rgba(78, 202, 118, 0.72);
color: #bff1ce; color: var(--code-add-text);
} }
.line-patch-lines { .line-patch-lines {
@@ -3412,12 +3454,12 @@
color: var(--color-ink-muted); color: var(--color-ink-muted);
} }
.line-patch-row.add { .line-patch-row.add {
background: rgba(78, 202, 118, 0.09); background: var(--code-add-bg);
color: #bff1ce; color: var(--code-add-text);
} }
.line-patch-row.delete { .line-patch-row.delete {
background: rgba(255, 90, 103, 0.1); background: var(--code-delete-bg);
color: #ffccd1; color: var(--code-delete-text);
} }
.line-patch-row.meta { .line-patch-row.meta {
color: var(--color-ink-faint); color: var(--color-ink-faint);
@@ -3427,8 +3469,8 @@
text-align: center; text-align: center;
user-select: none; user-select: none;
} }
.line-patch-row.add .line-patch-prefix { color: #4eca76; } .line-patch-row.add .line-patch-prefix { color: var(--code-add-strong); }
.line-patch-row.delete .line-patch-prefix { color: #ff6b7a; } .line-patch-row.delete .line-patch-prefix { color: var(--code-delete-strong); }
.line-patch-row code { .line-patch-row code {
white-space: pre; white-space: pre;
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -3437,7 +3479,7 @@
.blame-body { .blame-body {
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
background: #111321; background: var(--code-surface);
} }
.blame-code-header strong { .blame-code-header strong {
@@ -3455,7 +3497,7 @@
min-height: 38px; min-height: 38px;
padding: 6px 10px; padding: 6px 10px;
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
background: #111321; background: var(--code-surface);
} }
.blame-search-bar svg { .blame-search-bar svg {
position: absolute; position: absolute;
@@ -3469,7 +3511,7 @@
padding: 0 34px; padding: 0 34px;
border: 1px solid var(--color-border-subtle); border: 1px solid var(--color-border-subtle);
border-radius: 6px; border-radius: 6px;
background: #0b0e18; background: var(--code-input-bg);
color: var(--color-ink); color: var(--color-ink);
font-size: 12px; font-size: 12px;
} }
@@ -3522,7 +3564,7 @@
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
} }
.blame-group.uncommitted { .blame-group.uncommitted {
background: #171725; background: var(--code-surface-raised);
} }
.blame-meta { .blame-meta {
@@ -3535,8 +3577,8 @@
min-width: 0; min-width: 0;
padding: 8px 12px; padding: 8px 12px;
border-right: 1px solid var(--color-border-subtle); border-right: 1px solid var(--color-border-subtle);
background: #0d101a; background: var(--code-surface-subtle);
box-shadow: 8px 0 18px rgba(0, 0, 0, 0.18); box-shadow: 8px 0 18px color-mix(in srgb, var(--color-ink) 8%, transparent);
} }
.blame-hash { .blame-hash {
align-self: flex-start; align-self: flex-start;
@@ -3545,7 +3587,7 @@
padding: 2px 7px; padding: 2px 7px;
border: 1px solid rgba(90,140,248,0.2); border: 1px solid rgba(90,140,248,0.2);
border-radius: 5px; border-radius: 5px;
background: #141b2d; background: var(--code-surface-raised);
color: var(--color-accent); color: var(--color-accent);
font-size: 10.5px; font-size: 10.5px;
font-weight: 700; font-weight: 700;
@@ -3562,7 +3604,7 @@
} }
.blame-summary { .blame-summary {
overflow: hidden; overflow: hidden;
color: #aeb6d8; color: var(--color-ink-muted);
font-size: 11px; font-size: 11px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -3572,7 +3614,7 @@
font-size: 10.5px; font-size: 10.5px;
} }
.blame-group:hover .blame-meta { .blame-group:hover .blame-meta {
background: #111728; background: var(--code-hover-bg);
} }
.blame-group.uncommitted .blame-hash, .blame-group.uncommitted .blame-hash,
.blame-group.uncommitted .blame-author { .blame-group.uncommitted .blame-author {
@@ -3580,7 +3622,7 @@
} }
.blame-group.uncommitted .blame-hash { .blame-group.uncommitted .blame-hash {
border-color: rgba(232, 180, 90, 0.26); border-color: rgba(232, 180, 90, 0.26);
background: #271f14; background: color-mix(in srgb, #e8b45a 13%, var(--code-surface));
} }
.blame-lines { .blame-lines {
@@ -3595,16 +3637,16 @@
min-height: 20px; min-height: 20px;
} }
.blame-group:hover .blame-line-number { .blame-group:hover .blame-line-number {
background: #111728; background: var(--code-hover-bg);
} }
.blame-group:hover .blame-line-code { .blame-group:hover .blame-line-code {
background: #151a2b; background: var(--code-hover-bg);
} }
.blame-search-hit { .blame-search-hit {
padding: 0 1px; padding: 0 1px;
border-radius: 3px; border-radius: 3px;
background: rgba(240,182,72,0.28); background: var(--code-match-bg);
color: #f3d487; color: var(--code-match-text);
} }
.global-search-body { .global-search-body {
@@ -3800,8 +3842,9 @@
margin: 0; margin: 0;
padding: 8px 10px; padding: 8px 10px;
border-radius: 7px; border-radius: 7px;
color: #5dd88a; border: 1px solid color-mix(in srgb, var(--code-add-strong) 18%, transparent);
background: rgba(78,202,118,0.08); color: var(--code-add-text);
background: var(--code-add-bg);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
line-height: 1.45; line-height: 1.45;
@@ -4321,14 +4364,14 @@
} }
.diff-line { display: block; white-space: pre-wrap; word-break: break-word; } .diff-line { display: block; white-space: pre-wrap; word-break: break-word; }
.diff-line.meta { color: var(--color-ink-faint); } .diff-line.meta { color: var(--color-ink-faint); }
.diff-line.hunk { color: #7aacff; background: rgba(122,172,255,0.07); } .diff-line.hunk { color: var(--code-hunk-text); background: var(--code-hunk-bg); }
.diff-line.add { color: #4eca76; background: rgba(78,202,118,0.09); } .diff-line.add { color: var(--code-add-text); background: var(--code-add-bg); }
.diff-line.del { color: #e86060; background: rgba(232,96,96,0.09); } .diff-line.del { color: var(--code-delete-text); background: var(--code-delete-bg); }
.diff-line.context { color: var(--color-ink-muted); } .diff-line.context { color: var(--color-ink-muted); }
.diff-counts { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .diff-counts { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.diff-counts .adds { color: #4eca76; } .diff-counts .adds { color: var(--code-add-strong); }
.diff-counts .dels { color: #e86060; } .diff-counts .dels { color: var(--code-delete-strong); }
/* --- Conflict resolver --- */ /* --- Conflict resolver --- */
@@ -4399,7 +4442,7 @@
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-subtle); border: 1px solid var(--color-border-subtle);
border-radius: 6px; border-radius: 6px;
background: rgba(0,0,0,0.12); background: var(--code-surface);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
@@ -4431,19 +4474,19 @@
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
} }
.resolve-split-marker.unresolved { color: #ef8080; background: rgba(232,96,96,0.12); } .resolve-split-marker.unresolved { color: var(--code-delete-text); background: var(--code-delete-gutter-bg); }
.resolve-num { .resolve-num {
padding: 0 6px 0 4px; padding: 0 6px 0 4px;
border-right: 1px solid var(--color-border-subtle); border-right: 1px solid var(--color-border-subtle);
color: var(--color-ink-faint); color: var(--color-ink-faint);
background: rgba(0,0,0,0.14); background: var(--code-surface-subtle);
text-align: right; text-align: right;
user-select: none; user-select: none;
} }
.resolve-num.ours { color: rgba(78,202,118,0.65); background: rgba(78,202,118,0.11); border-right-color: rgba(78,202,118,0.2); } .resolve-num.ours { color: var(--code-add-strong); background: var(--code-add-gutter-bg); border-right-color: rgba(78,202,118,0.2); }
.resolve-num.theirs { color: rgba(122,172,255,0.65); background: rgba(122,172,255,0.11); border-right-color: rgba(122,172,255,0.2); } .resolve-num.theirs { color: var(--code-hunk-text); background: var(--code-hunk-bg); border-right-color: rgba(122,172,255,0.2); }
.resolve-num.empty { background: rgba(0,0,0,0.07); } .resolve-num.empty { background: var(--code-surface-muted); }
.resolve-cell { .resolve-cell {
min-width: 0; min-width: 0;
@@ -4452,9 +4495,9 @@
color: var(--color-ink-muted); color: var(--color-ink-muted);
white-space: pre; white-space: pre;
} }
.resolve-cell.ours { color: #5dd88a; background: rgba(78,202,118,0.1); } .resolve-cell.ours { color: var(--code-add-text); background: var(--code-add-bg); }
.resolve-cell.theirs { color: #8fb4ff; background: rgba(90,140,248,0.11); } .resolve-cell.theirs { color: var(--code-hunk-text); background: var(--code-hunk-bg); }
.resolve-cell.empty { background: rgba(0,0,0,0.06); } .resolve-cell.empty { background: var(--code-surface-muted); }
.resolve-cell.dimmed { opacity: 0.42; filter: grayscale(0.5); } .resolve-cell.dimmed { opacity: 0.42; filter: grayscale(0.5); }
.resolve-context { margin: 0; padding: 2px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; color: var(--color-ink-muted); } .resolve-context { margin: 0; padding: 2px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; color: var(--color-ink-muted); }
@@ -4474,13 +4517,13 @@
.resolve-side.dimmed { opacity: 0.4; filter: grayscale(0.5); } .resolve-side.dimmed { opacity: 0.4; filter: grayscale(0.5); }
.resolve-side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; } .resolve-side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.resolve-side.ours .resolve-side-label { color: #4eca76; } .resolve-side.ours .resolve-side-label { color: var(--code-add-strong); }
.resolve-side.theirs .resolve-side-label { color: #6a9aff; } .resolve-side.theirs .resolve-side-label { color: var(--code-hunk-text); }
.resolve-lines { margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; } .resolve-lines { margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; }
.resolve-line { display: block; white-space: pre-wrap; word-break: break-word; } .resolve-line { display: block; white-space: pre-wrap; word-break: break-word; }
.resolve-line.ours { color: #4eca76; } .resolve-line.ours { color: var(--code-add-text); }
.resolve-line.theirs { color: #7aacff; } .resolve-line.theirs { color: var(--code-hunk-text); }
.resolve-line.context { color: var(--color-ink-muted); } .resolve-line.context { color: var(--color-ink-muted); }
.resolve-binary { display: grid; align-content: start; gap: 12px; padding: 4px; } .resolve-binary { display: grid; align-content: start; gap: 12px; padding: 4px; }
@@ -4834,22 +4877,75 @@
background: var(--color-surface-hover); background: var(--color-surface-hover);
} }
:root[data-theme="light"] .split-span.split-meta {
background: #e9eef7;
}
:root[data-theme="light"] .resolve-split,
:root[data-theme="light"] .resolve-num,
:root[data-theme="light"] .resolve-cell.empty,
:root[data-theme="light"] .resolve-num.empty {
background: rgba(234,239,248,0.72);
}
:root[data-theme="light"] .diff-line.meta, :root[data-theme="light"] .diff-line.meta,
:root[data-theme="light"] .resolve-split-marker { :root[data-theme="light"] .resolve-split-marker {
color: #64728a; color: #64728a;
} }
:root[data-theme="light"] .global-search-tabs,
:root[data-theme="light"] .file-search-history,
:root[data-theme="light"] .file-search-history-head {
background: var(--color-surface-dim);
}
:root[data-theme="light"] .discard-target {
background: var(--code-surface-subtle);
}
:root[data-theme="light"] .commit-amend-toggle input {
border-color: var(--color-border-input);
background: var(--app-input-bg);
}
:root[data-theme="light"] .commit-amend-toggle input:checked {
border-color: var(--color-primary);
box-shadow: inset 0 0 0 2px #ffffff;
}
:root[data-theme="light"] .cred-segment {
border-color: rgba(49,95,214,0.2);
background: #eef3f9;
}
:root[data-theme="light"] .cred-seg-btn.active {
border-color: rgba(49,95,214,0.26);
background: linear-gradient(135deg, rgba(49,95,214,0.12), rgba(15,143,181,0.08));
box-shadow: 0 8px 18px rgba(28,44,74,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
}
:root[data-theme="light"] .cred-close {
border-color: var(--color-border-subtle);
color: var(--color-ink-dim);
background: rgba(255,255,255,0.76);
}
:root[data-theme="light"] .cred-close:hover:not(:disabled) {
border-color: var(--color-border-input);
color: var(--color-ink);
background: var(--color-surface-hover);
}
:root[data-theme="light"] .status-badge.modified,
:root[data-theme="light"] .resolve-status,
:root[data-theme="light"] .resolve-conflict-label {
color: #8a580a;
}
:root[data-theme="light"] .status-badge.added,
:root[data-theme="light"] .status-badge.untracked,
:root[data-theme="light"] .pill-active,
:root[data-theme="light"] .prepared-tag {
color: #19723d;
}
:root[data-theme="light"] .status-badge.deleted {
color: #b4233b;
}
:root[data-theme="light"] .status-badge.renamed {
color: #245cc7;
}
:root[data-theme="light"] .cred-input input, :root[data-theme="light"] .cred-input input,
:root[data-theme="light"] .cred-expiry input[type="date"] { :root[data-theme="light"] .cred-expiry input[type="date"] {
background: rgba(255,255,255,0.92); background: rgba(255,255,255,0.92);