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

Opt/light mode #23

Merged
Christoph merged 3 commits from opt/light_mode into main 2026-07-10 16:22:07 +00:00
Conversation 0 Commits 3 Files Changed 8
+103 -107
2 changed files with 103 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit de8832a919 - Show all commits
src/app.css
+86 -88
View File
@@ -1,53 +1,49 @@
@import "tailwindcss";
@theme {
--color-ink: #f5f7ff;
--color-ink-muted: #a8b1d8;
--color-ink-faint: #687197;
--color-ink-dim: #838cb8;
--color-ink-quiet: #949bc8;
--color-ink: #edf3ff;
--color-ink-muted: #b1bad0;
--color-ink-faint: #6f7c96;
--color-ink-dim: #8895ad;
--color-ink-quiet: #98a4bb;
--color-surface: rgba(22, 22, 36, 0.82);
--color-surface-alt: #0b0b14;
--color-surface-dim: rgba(18, 18, 30, 0.9);
--color-surface-hover: rgba(47, 48, 78, 0.76);
--color-surface-raised: rgba(28, 29, 48, 0.88);
--color-surface-solid: #1c1d30;
--color-surface: rgba(18, 23, 34, 0.88);
--color-surface-alt: #090d14;
--color-surface-dim: rgba(15, 20, 30, 0.94);
--color-surface-hover: rgba(36, 45, 64, 0.78);
--color-surface-raised: rgba(23, 29, 43, 0.92);
--color-surface-solid: #171d2b;
--color-border: rgba(100, 108, 255, 0.28);
--color-border-subtle: rgba(255, 255, 255, 0.08);
--color-border-input: rgba(65, 209, 255, 0.26);
--color-border: rgba(90, 111, 154, 0.3);
--color-border-subtle: rgba(226, 232, 240, 0.08);
--color-border-input: rgba(77, 182, 214, 0.26);
--color-primary: #646cff;
--color-primary-dark: #535bf2;
--color-accent: #41d1ff;
--color-primary: #6f8cff;
--color-primary-dark: #5d74e8;
--color-accent: #4db6d6;
--color-bar: rgba(9, 9, 18, 0.92);
--color-bar-text: #f4f6ff;
--color-bar-muted: #7b84b2;
--color-bar: rgba(7, 10, 16, 0.94);
--color-bar-text: #f1f5ff;
--color-bar-muted: #7f8ba3;
--font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
:root {
--app-color-scheme: dark;
--app-bg:
radial-gradient(circle at 22% 8%, rgba(189, 52, 254, 0.28), transparent 34%),
radial-gradient(circle at 74% 10%, rgba(65, 209, 255, 0.22), transparent 30%),
radial-gradient(circle at 88% 78%, rgba(255, 211, 67, 0.1), transparent 26%),
linear-gradient(135deg, #090912 0%, #111122 45%, #0b0b14 100%);
--app-button-bg: linear-gradient(180deg, rgba(42, 43, 70, 0.9), rgba(27, 28, 48, 0.92));
--app-input-bg: rgba(13, 14, 26, 0.78);
--app-select-option-bg: #1c2033;
--app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.045), transparent 72%);
--app-panel-shadow: 0 18px 60px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
--app-dialog-backdrop: #050712;
--app-dialog-bg: #111321;
--app-dialog-chrome: #171a2b;
--app-dialog-shadow: 0 24px 72px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0,0,0,0.4);
--app-settings-row-bg: #151827;
--app-scrollbar-thumb: #2a2f45;
--app-scrollbar-thumb-hover: #3a3f58;
--app-bg: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%);
--app-button-bg: linear-gradient(180deg, rgba(36, 45, 64, 0.92), rgba(22, 28, 42, 0.94));
--app-input-bg: rgba(10, 14, 22, 0.82);
--app-select-option-bg: #171d2b;
--app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%);
--app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
--app-dialog-backdrop: #070a10;
--app-dialog-bg: #101622;
--app-dialog-chrome: #141b29;
--app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32);
--app-settings-row-bg: #141b29;
--app-scrollbar-thumb: #303a4f;
--app-scrollbar-thumb-hover: #44506a;
}
:root[data-theme="light"] {
@@ -188,28 +184,28 @@
.btn-sm { min-height: 26px; padding: 0 8px; font-size: 12px; }
.btn-primary {
border-color: rgba(100, 108, 255, 0.75);
border-color: rgba(111, 140, 255, 0.72);
color: #ffffff;
background: linear-gradient(135deg, #646cff 0%, #bd34fe 100%);
box-shadow: 0 0 24px rgba(100, 108, 255, 0.2);
background: linear-gradient(135deg, #5f7df2 0%, #238eb4 100%);
box-shadow: 0 10px 24px rgba(77, 182, 214, 0.16);
font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
border-color: rgba(65, 209, 255, 0.82);
background: linear-gradient(135deg, #747bff 0%, #c966ff 100%);
border-color: rgba(77, 182, 214, 0.78);
background: linear-gradient(135deg, #6f8cff 0%, #2da0c7 100%);
color: #ffffff;
}
.btn-secondary {
border-color: rgba(65, 209, 255, 0.32);
color: #b9e9ff;
background: linear-gradient(180deg, rgba(65, 209, 255, 0.12), rgba(100, 108, 255, 0.1));
border-color: rgba(77, 182, 214, 0.3);
color: #b8e7f6;
background: linear-gradient(180deg, rgba(77, 182, 214, 0.1), rgba(111, 140, 255, 0.07));
font-weight: 700;
}
.btn-secondary:hover:not(:disabled) {
border-color: rgba(65, 209, 255, 0.64);
border-color: rgba(77, 182, 214, 0.58);
color: #ffffff;
background: linear-gradient(180deg, rgba(65, 209, 255, 0.18), rgba(100, 108, 255, 0.16));
background: linear-gradient(180deg, rgba(77, 182, 214, 0.16), rgba(111, 140, 255, 0.12));
}
.btn-danger {
@@ -245,7 +241,7 @@
min-height: 46px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border-subtle);
background: linear-gradient(90deg, rgba(100,108,255,0.09), rgba(65,209,255,0.025));
background: linear-gradient(90deg, rgba(111,140,255,0.07), rgba(77,182,214,0.025));
}
.section-head h2 { margin: 1px 0 0; color: var(--color-ink); font-size: 14px; line-height: 1.2; font-weight: 600; }
@@ -528,7 +524,7 @@
align-items: center;
height: var(--app-titlebar-height);
background:
linear-gradient(90deg, rgba(100,108,255,0.16), rgba(65,209,255,0.08), rgba(255,211,67,0.035)),
linear-gradient(90deg, rgba(111,140,255,0.08), rgba(77,182,214,0.045), rgba(255,255,255,0.012)),
var(--color-bar);
color: var(--color-bar-text);
user-select: none;
@@ -580,9 +576,9 @@
height: 100%;
overflow: hidden;
}
.titlebar-info svg { color: #41d1ff; flex-shrink: 0; }
.titlebar-info svg { color: var(--color-accent); flex-shrink: 0; }
.tb-repo { color: #8e95c9; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.tb-repo { color: var(--color-bar-muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.tb-sep { color: rgba(255,255,255,0.22); font-size: 13px; }
.tb-branch { color: #f5f7ff; font-size: 12px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
@@ -590,7 +586,7 @@
.tb-sync.ahead { color: #e0a040; background: rgba(224,160,64,0.13); }
.tb-sync.behind { color: #7aacff; background: rgba(122,172,255,0.13); }
.tb-no-repo { color: #7b84b2; font-size: 12px; font-style: italic; }
.tb-no-repo { color: var(--color-bar-muted); font-size: 12px; font-style: italic; }
.titlebar-right { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); }
.titlebar-actions { display: flex; align-items: stretch; }
@@ -611,7 +607,7 @@
transition: background 120ms ease, color 120ms ease;
-webkit-app-region: no-drag;
}
.tb-action:hover:not(:disabled) { background: rgba(255,255,255,0.07); border-color: transparent; color: #c0cce0; }
.tb-action:hover:not(:disabled) { background: rgba(255,255,255,0.06); border-color: transparent; color: #d6def0; }
.tb-action:disabled { opacity: 0.3; cursor: not-allowed; }
.tb-action.auto-toggle.active { color: #4eca76; }
.tb-action.auto-toggle.active:hover:not(:disabled) { color: #6ee090; background: rgba(78,202,118,0.1); }
@@ -632,22 +628,22 @@
border: none;
border-radius: 0;
background: transparent;
color: #3a4a5c;
color: #536078;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
-webkit-app-region: no-drag;
}
.tb-btn:hover:not(:disabled) { background: rgba(255,255,255,0.09); border-color: transparent; color: #c0cce0; }
.tb-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: transparent; color: #d6def0; }
.tb-btn.close:hover:not(:disabled) { background: #c0392b; color: #ffffff; }
/* --- Top bar (repo form) --- */
.topbar {
padding: 9px 10px;
border: 1px solid rgba(100,108,255,0.28);
border: 1px solid var(--color-border);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(189,52,254,0.1), rgba(65,209,255,0.075), rgba(255,211,67,0.035)),
linear-gradient(90deg, rgba(111,140,255,0.055), rgba(77,182,214,0.045), rgba(255,255,255,0.012)),
var(--color-surface);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(16px);
@@ -1111,7 +1107,7 @@
inset: 0 auto 0 0;
min-width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #41d1ff, #646cff, #bd34fe);
background: linear-gradient(90deg, #4db6d6, #6f8cff, #238eb4);
transition: width 160ms ease;
}
.update-progress.indeterminate span {
@@ -1139,14 +1135,14 @@
font-weight: 800;
}
.update-toast-primary {
border-color: rgba(100,108,255,0.72);
border-color: rgba(111,140,255,0.72);
color: #ffffff;
background: linear-gradient(135deg, #646cff, #bd34fe);
background: linear-gradient(135deg, #5f7df2, #238eb4);
}
.update-toast-primary:hover:not(:disabled) {
border-color: rgba(65,209,255,0.74);
border-color: rgba(77,182,214,0.74);
color: #ffffff;
background: linear-gradient(135deg, #747bff, #c966ff);
background: linear-gradient(135deg, #6f8cff, #2da0c7);
}
.update-toast-secondary {
border-color: rgba(255,255,255,0.1);
@@ -2370,7 +2366,7 @@
padding: 22px;
overflow: hidden;
background:
radial-gradient(circle at center 42%, rgba(151, 118, 255, 0.12), transparent 52%),
radial-gradient(circle at center 42%, rgba(111, 140, 255, 0.1), transparent 52%),
linear-gradient(180deg, rgba(15, 18, 31, 0.55), transparent);
}
@@ -2386,7 +2382,7 @@
.file-history-loading-halo {
position: absolute;
inset: 10px;
border: 1px solid rgba(151, 118, 255, 0.24);
border: 1px solid rgba(111, 140, 255, 0.22);
border-radius: 18px;
transform: rotate(45deg);
animation: fhl-halo-breathe 2.4s ease-in-out infinite;
@@ -2406,14 +2402,14 @@
stroke-linecap: round;
stroke-dasharray: 92;
stroke-dashoffset: 92;
filter: drop-shadow(0 0 6px rgba(151, 118, 255, 0.5));
filter: drop-shadow(0 0 6px rgba(77, 182, 214, 0.3));
animation: fhl-trace-draw 2.4s ease-in-out infinite;
}
.file-history-loading-traces .fhl-trace-main {
stroke: #9b70ff;
stroke: #6f8cff;
}
.file-history-loading-traces .fhl-trace-branch {
stroke: #ff6d26;
stroke: #4db6d6;
animation-delay: 0.28s;
}
@@ -2425,7 +2421,7 @@
object-fit: contain;
filter:
drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 12px rgba(151, 118, 255, 0.28));
drop-shadow(0 0 12px rgba(77, 182, 214, 0.2));
animation: fhl-icon-float 2.4s ease-in-out infinite;
}
@@ -2441,15 +2437,15 @@
height: 3px;
overflow: hidden;
border-radius: 999px;
background: rgba(151, 118, 255, 0.14);
background: rgba(111, 140, 255, 0.14);
}
.file-history-loading-bar span {
position: absolute;
inset: 0;
width: 46%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #9b70ff 42%, #ff6d26 74%, transparent);
box-shadow: 0 0 12px rgba(255, 109, 38, 0.26);
background: linear-gradient(90deg, transparent, #6f8cff 42%, #4db6d6 74%, transparent);
box-shadow: 0 0 12px rgba(77, 182, 214, 0.24);
animation: fhl-bar-slide 1.35s ease-in-out infinite;
}
@@ -2503,8 +2499,10 @@
position: relative;
align-self: stretch;
min-width: 42px;
border-right: 1px solid rgba(94,110,156,0.12);
background: rgba(7,8,16,0.2);
border-right: 1px solid rgba(226,232,240,0.08);
background:
linear-gradient(90deg, rgba(111,140,255,0.025), transparent),
rgba(7,10,16,0.24);
}
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph-svg path {
@@ -2534,8 +2532,8 @@
height: 12px;
border-radius: 999px;
background: var(--dot-color, #5a8cf8);
border: 2px solid #111321;
box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
border: 2px solid var(--app-dialog-bg);
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.22);
transform: translate(-50%, -50%);
transition: transform 120ms ease, box-shadow 120ms ease;
}
@@ -2557,7 +2555,7 @@
height: 15px;
background: var(--color-surface-alt);
border-color: var(--dot-color, #5a8cf8);
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.graph-hover-branches {
position: absolute;
@@ -2587,8 +2585,8 @@
border: 1px solid rgba(91,209,138,0.28);
border-radius: 999px;
color: #b2f0c2;
background: rgba(20,35,29,0.94);
box-shadow: 0 8px 22px rgba(0,0,0,0.3);
background: rgba(14,36,27,0.94);
box-shadow: 0 8px 22px rgba(0,0,0,0.24);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 750;
@@ -2621,28 +2619,28 @@
gap: 5px;
min-width: 0;
padding: 8px 10px;
background: rgba(28,29,48,0.34);
background: rgba(18,24,36,0.5);
transition: background 120ms ease;
}
.graph-row + .graph-row .commit-body { border-top: 1px solid rgba(94,110,156,0.1); }
.graph-row + .graph-row .commit-body { border-top: 1px solid rgba(226,232,240,0.075); }
.graph-row.graph-ahead-row .commit-body {
box-shadow: inset 3px 0 0 rgba(224,160,64,0.72);
}
.graph-row.graph-behind-row .commit-body {
box-shadow: inset 3px 0 0 rgba(122,172,255,0.72);
}
.graph-row:hover .commit-body { background: rgba(37,40,62,0.54); }
.graph-row:hover .commit-body { background: rgba(30,39,57,0.72); }
.graph-row:hover .graph-svg path { opacity: 1; stroke-width: 2.65; }
.graph-row:hover .graph-svg path.hidden-branch { opacity: 0.12; stroke-width: 2.2; }
.graph-row:hover .graph-dot { transform: translate(-50%, -50%) scale(1.12); }
.graph-row:hover .graph-dot.hidden-branch { transform: translate(-50%, -50%) scale(1); }
.graph-row.merge-row .commit-body {
background: rgba(36,31,54,0.46);
background: rgba(26,27,43,0.56);
}
.graph-row.tip-row .commit-body {
background:
linear-gradient(90deg, rgba(105,167,255,0.055), transparent 32%),
rgba(28,29,48,0.38);
linear-gradient(90deg, rgba(111,140,255,0.065), transparent 34%),
rgba(20,27,40,0.62);
}
/* --- Compare panel --- */
@@ -4290,9 +4288,9 @@
gap: 6px;
min-height: 36px;
padding: 0 16px;
border: 1px solid rgba(100,108,255,0.78);
border: 1px solid rgba(111,140,255,0.72);
border-radius: 7px;
background: linear-gradient(135deg, #646cff, #bd34fe);
background: linear-gradient(135deg, #5f7df2, #238eb4);
color: #ffffff;
font-size: 13px;
font-weight: 700;
@@ -4300,8 +4298,8 @@
transition: background 0.12s, border-color 0.12s;
}
.cred-submit:hover:not(:disabled) {
background: linear-gradient(135deg, #747bff, #c966ff);
border-color: rgba(65,209,255,0.7);
background: linear-gradient(135deg, #6f8cff, #2da0c7);
border-color: rgba(77,182,214,0.7);
}
.cred-submit:disabled { opacity: 0.45; cursor: not-allowed; }
src/lib/components/RepoLoadingOverlay.svelte
+17 -19
View File
@@ -41,9 +41,7 @@
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 50% 42%, rgba(137, 92, 255, 0.18), transparent 34%),
linear-gradient(135deg, #050712 0%, #080b16 46%, #120b18 100%);
background: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%);
animation: overlay-in 180ms ease;
}
@@ -52,8 +50,8 @@
inset: 0;
opacity: 0.28;
background-image:
linear-gradient(rgba(151, 118, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 109, 38, 0.08) 1px, transparent 1px);
linear-gradient(rgba(111, 140, 255, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(77, 182, 214, 0.07) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
animation: grid-drift 10s linear infinite;
@@ -67,14 +65,14 @@
gap: 18px;
width: min(420px, calc(100vw - 42px));
padding: 30px 34px 28px;
border: 1px solid rgba(160, 124, 255, 0.24);
border: 1px solid rgba(90, 111, 154, 0.28);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(23, 26, 43, 0.9), rgba(12, 15, 27, 0.92)),
linear-gradient(180deg, rgba(23, 29, 43, 0.92), rgba(12, 17, 27, 0.94)),
var(--color-surface-raised);
box-shadow:
0 26px 90px rgba(0, 0, 0, 0.62),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
0 26px 78px rgba(0, 0, 0, 0.54),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.repo-loading-mark {
@@ -89,7 +87,7 @@
.repo-loading-halo {
position: absolute;
inset: 10px;
border: 1px solid rgba(151, 118, 255, 0.24);
border: 1px solid rgba(111, 140, 255, 0.22);
border-radius: 34px;
transform: rotate(45deg);
}
@@ -98,7 +96,7 @@
}
.repo-loading-halo.halo-two {
inset: 24px;
border-color: rgba(255, 109, 38, 0.26);
border-color: rgba(77, 182, 214, 0.24);
animation: halo-breathe 2.4s ease-in-out infinite reverse;
}
@@ -116,18 +114,18 @@
stroke-linecap: round;
stroke-dasharray: 165;
stroke-dashoffset: 165;
filter: drop-shadow(0 0 8px rgba(151, 118, 255, 0.55));
filter: drop-shadow(0 0 8px rgba(77, 182, 214, 0.32));
animation: trace-draw 2.6s ease-in-out infinite;
}
.repo-loading-traces .trace-main {
stroke: #9b70ff;
stroke: #6f8cff;
}
.repo-loading-traces .trace-branch {
stroke: #ff6d26;
stroke: #4db6d6;
animation-delay: 0.28s;
}
.repo-loading-traces .trace-cut {
stroke: rgba(255, 255, 255, 0.42);
stroke: rgba(177, 186, 208, 0.42);
stroke-dasharray: 128;
stroke-dashoffset: 128;
animation-delay: 0.55s;
@@ -141,7 +139,7 @@
object-fit: contain;
filter:
drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 18px rgba(151, 118, 255, 0.28));
drop-shadow(0 0 18px rgba(77, 182, 214, 0.2));
animation: icon-float 2.4s ease-in-out infinite;
}
@@ -175,15 +173,15 @@
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(151, 118, 255, 0.14);
background: rgba(111, 140, 255, 0.14);
}
.repo-loading-bar span {
position: absolute;
inset: 0;
width: 46%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #9b70ff 40%, #ff6d26 74%, transparent);
box-shadow: 0 0 16px rgba(255, 109, 38, 0.32);
background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent);
box-shadow: 0 0 16px rgba(77, 182, 214, 0.26);
animation: bar-slide 1.35s ease-in-out infinite;
}