diff --git a/src/app.css b/src/app.css index 71fcbe3..6dc8864 100644 --- a/src/app.css +++ b/src/app.css @@ -44,6 +44,27 @@ --app-settings-row-bg: #141b29; --app-scrollbar-thumb: #303a4f; --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"] { @@ -89,6 +110,27 @@ --app-settings-row-bg: #f8fafd; --app-scrollbar-thumb: #c2cada; --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 { @@ -3124,7 +3166,7 @@ gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--color-border-subtle); - background: #171a2b; + background: var(--code-surface-raised); font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-muted); @@ -3146,7 +3188,7 @@ font-size: 12px; line-height: 1.5; tab-size: 2; - background: #111321; + background: var(--code-surface); } .split-pane { @@ -3170,8 +3212,8 @@ white-space: pre-wrap; word-break: break-all; } - .split-span.split-meta { color: var(--color-ink-faint); background: #0c0e18; font-size: 11px; } - .split-span.split-hunk { color: #7aacff; background: rgba(122,172,255,0.08); padding: 3px 10px; } + .split-span.split-meta { color: var(--color-ink-faint); background: var(--code-surface-meta); font-size: 11px; } + .split-span.split-hunk { color: var(--code-hunk-text); background: var(--code-hunk-bg); padding: 3px 10px; } .split-num { padding: 0 6px 0 4px; @@ -3180,11 +3222,11 @@ font-size: 11px; user-select: none; 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.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.empty { background: #10131e; } + .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: var(--code-add-gutter-bg); color: var(--code-add-strong); border-right-color: rgba(78,202,118,0.2); } + .split-num.empty { background: var(--code-surface-muted); } .split-cell { padding: 0 8px; @@ -3193,20 +3235,20 @@ min-width: 0; overflow: visible; } - .split-cell.del { background: rgba(232,96,96,0.1); color: #ef8080; } - .split-cell.add { background: rgba(78,202,118,0.09); color: #5dd88a; } - .split-cell.empty { background: #10131e; } + .split-cell.del { background: var(--code-delete-bg); color: var(--code-delete-text); } + .split-cell.add { background: var(--code-add-bg); color: var(--code-add-text); } + .split-cell.empty { background: var(--code-surface-muted); } /* Search-hit highlight: amber, distinct from add (green) / del (red). Higher specificity so it overrides the add/del backgrounds on a matched line. */ .split-diff .split-cell.match { - background: rgba(240,182,72,0.22); - color: #f3c969; + background: var(--code-match-bg); + color: var(--code-match-text); box-shadow: inset 2px 0 0 rgba(240,182,72,0.9); } .split-diff .split-num.match { - background: rgba(240,182,72,0.2); - color: rgba(240,182,72,0.9); + background: var(--code-match-gutter-bg); + color: var(--code-match-text); border-right-color: rgba(240,182,72,0.35); } @@ -3226,7 +3268,7 @@ text-transform: uppercase; letter-spacing: 0.05em; 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-hash { @@ -3338,7 +3380,7 @@ .line-patch-scroll { min-height: 0; overflow: auto; - background: #0b0b14; + background: var(--code-surface); } .line-patch-hunk { @@ -3358,7 +3400,7 @@ min-width: 100%; padding: 7px 10px; 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 { color: var(--color-accent); @@ -3378,23 +3420,23 @@ padding: 0 8px; border: 1px solid var(--color-border-subtle); border-radius: 3px; - background: rgba(255, 255, 255, 0.03); + background: var(--code-surface-subtle); color: var(--color-ink); font-size: 12px; font-weight: 700; line-height: 1; } .line-patch-hunk-button:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.08); + background: var(--code-hover-bg); } .line-patch-hunk-button.discard { border-color: rgba(255, 90, 103, 0.7); - color: #ffccd1; + color: var(--code-delete-text); } .line-patch-hunk-button.stage, .line-patch-hunk-button.unstage { border-color: rgba(78, 202, 118, 0.72); - color: #bff1ce; + color: var(--code-add-text); } .line-patch-lines { @@ -3412,12 +3454,12 @@ color: var(--color-ink-muted); } .line-patch-row.add { - background: rgba(78, 202, 118, 0.09); - color: #bff1ce; + background: var(--code-add-bg); + color: var(--code-add-text); } .line-patch-row.delete { - background: rgba(255, 90, 103, 0.1); - color: #ffccd1; + background: var(--code-delete-bg); + color: var(--code-delete-text); } .line-patch-row.meta { color: var(--color-ink-faint); @@ -3427,8 +3469,8 @@ text-align: center; user-select: none; } - .line-patch-row.add .line-patch-prefix { color: #4eca76; } - .line-patch-row.delete .line-patch-prefix { color: #ff6b7a; } + .line-patch-row.add .line-patch-prefix { color: var(--code-add-strong); } + .line-patch-row.delete .line-patch-prefix { color: var(--code-delete-strong); } .line-patch-row code { white-space: pre; font-family: var(--font-mono); @@ -3437,7 +3479,7 @@ .blame-body { min-height: 0; overflow: hidden; - background: #111321; + background: var(--code-surface); } .blame-code-header strong { @@ -3455,7 +3497,7 @@ min-height: 38px; padding: 6px 10px; border-bottom: 1px solid var(--color-border-subtle); - background: #111321; + background: var(--code-surface); } .blame-search-bar svg { position: absolute; @@ -3469,7 +3511,7 @@ padding: 0 34px; border: 1px solid var(--color-border-subtle); border-radius: 6px; - background: #0b0e18; + background: var(--code-input-bg); color: var(--color-ink); font-size: 12px; } @@ -3522,7 +3564,7 @@ border-bottom: 1px solid var(--color-border-subtle); } .blame-group.uncommitted { - background: #171725; + background: var(--code-surface-raised); } .blame-meta { @@ -3535,8 +3577,8 @@ min-width: 0; padding: 8px 12px; border-right: 1px solid var(--color-border-subtle); - background: #0d101a; - box-shadow: 8px 0 18px rgba(0, 0, 0, 0.18); + background: var(--code-surface-subtle); + box-shadow: 8px 0 18px color-mix(in srgb, var(--color-ink) 8%, transparent); } .blame-hash { align-self: flex-start; @@ -3545,7 +3587,7 @@ padding: 2px 7px; border: 1px solid rgba(90,140,248,0.2); border-radius: 5px; - background: #141b2d; + background: var(--code-surface-raised); color: var(--color-accent); font-size: 10.5px; font-weight: 700; @@ -3562,7 +3604,7 @@ } .blame-summary { overflow: hidden; - color: #aeb6d8; + color: var(--color-ink-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; @@ -3572,7 +3614,7 @@ font-size: 10.5px; } .blame-group:hover .blame-meta { - background: #111728; + background: var(--code-hover-bg); } .blame-group.uncommitted .blame-hash, .blame-group.uncommitted .blame-author { @@ -3580,7 +3622,7 @@ } .blame-group.uncommitted .blame-hash { border-color: rgba(232, 180, 90, 0.26); - background: #271f14; + background: color-mix(in srgb, #e8b45a 13%, var(--code-surface)); } .blame-lines { @@ -3595,16 +3637,16 @@ min-height: 20px; } .blame-group:hover .blame-line-number { - background: #111728; + background: var(--code-hover-bg); } .blame-group:hover .blame-line-code { - background: #151a2b; + background: var(--code-hover-bg); } .blame-search-hit { padding: 0 1px; border-radius: 3px; - background: rgba(240,182,72,0.28); - color: #f3d487; + background: var(--code-match-bg); + color: var(--code-match-text); } .global-search-body { @@ -3800,8 +3842,9 @@ margin: 0; padding: 8px 10px; border-radius: 7px; - color: #5dd88a; - background: rgba(78,202,118,0.08); + border: 1px solid color-mix(in srgb, var(--code-add-strong) 18%, transparent); + color: var(--code-add-text); + background: var(--code-add-bg); font-family: var(--font-mono); font-size: 12px; line-height: 1.45; @@ -4321,14 +4364,14 @@ } .diff-line { display: block; white-space: pre-wrap; word-break: break-word; } .diff-line.meta { color: var(--color-ink-faint); } - .diff-line.hunk { color: #7aacff; background: rgba(122,172,255,0.07); } - .diff-line.add { color: #4eca76; background: rgba(78,202,118,0.09); } - .diff-line.del { color: #e86060; background: rgba(232,96,96,0.09); } + .diff-line.hunk { color: var(--code-hunk-text); background: var(--code-hunk-bg); } + .diff-line.add { color: var(--code-add-text); background: var(--code-add-bg); } + .diff-line.del { color: var(--code-delete-text); background: var(--code-delete-bg); } .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 .adds { color: #4eca76; } - .diff-counts .dels { color: #e86060; } + .diff-counts .adds { color: var(--code-add-strong); } + .diff-counts .dels { color: var(--code-delete-strong); } /* --- Conflict resolver --- */ @@ -4399,7 +4442,7 @@ overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: 6px; - background: rgba(0,0,0,0.12); + background: var(--code-surface); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; @@ -4431,19 +4474,19 @@ font-weight: 800; 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 { padding: 0 6px 0 4px; border-right: 1px solid var(--color-border-subtle); color: var(--color-ink-faint); - background: rgba(0,0,0,0.14); + background: var(--code-surface-subtle); text-align: right; 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.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.empty { background: rgba(0,0,0,0.07); } + .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: var(--code-hunk-text); background: var(--code-hunk-bg); border-right-color: rgba(122,172,255,0.2); } + .resolve-num.empty { background: var(--code-surface-muted); } .resolve-cell { min-width: 0; @@ -4452,9 +4495,9 @@ color: var(--color-ink-muted); white-space: pre; } - .resolve-cell.ours { color: #5dd88a; background: rgba(78,202,118,0.1); } - .resolve-cell.theirs { color: #8fb4ff; background: rgba(90,140,248,0.11); } - .resolve-cell.empty { background: rgba(0,0,0,0.06); } + .resolve-cell.ours { color: var(--code-add-text); background: var(--code-add-bg); } + .resolve-cell.theirs { color: var(--code-hunk-text); background: var(--code-hunk-bg); } + .resolve-cell.empty { background: var(--code-surface-muted); } .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); } @@ -4474,13 +4517,13 @@ .resolve-side.dimmed { opacity: 0.4; filter: grayscale(0.5); } .resolve-side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; } - .resolve-side.ours .resolve-side-label { color: #4eca76; } - .resolve-side.theirs .resolve-side-label { color: #6a9aff; } + .resolve-side.ours .resolve-side-label { color: var(--code-add-strong); } + .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-line { display: block; white-space: pre-wrap; word-break: break-word; } - .resolve-line.ours { color: #4eca76; } - .resolve-line.theirs { color: #7aacff; } + .resolve-line.ours { color: var(--code-add-text); } + .resolve-line.theirs { color: var(--code-hunk-text); } .resolve-line.context { color: var(--color-ink-muted); } .resolve-binary { display: grid; align-content: start; gap: 12px; padding: 4px; } @@ -4834,22 +4877,75 @@ 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"] .resolve-split-marker { 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-expiry input[type="date"] { background: rgba(255,255,255,0.92);