New desgin #27
+173
-62
@@ -1,57 +1,57 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-ink: #edf3ff;
|
||||
--color-ink-muted: #b1bad0;
|
||||
--color-ink-faint: #6f7c96;
|
||||
--color-ink-dim: #8895ad;
|
||||
--color-ink-quiet: #98a4bb;
|
||||
--color-ink: #f0f1f2;
|
||||
--color-ink-muted: #c1c3c6;
|
||||
--color-ink-faint: #7f8389;
|
||||
--color-ink-dim: #9da1a6;
|
||||
--color-ink-quiet: #aeb1b5;
|
||||
|
||||
--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-surface: #2b2e34;
|
||||
--color-surface-alt: #1b1c1e;
|
||||
--color-surface-dim: #2e3137;
|
||||
--color-surface-hover: #363a41;
|
||||
--color-surface-raised: #32363d;
|
||||
--color-surface-solid: #222328;
|
||||
|
||||
--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-border: #3a3e45;
|
||||
--color-border-subtle: #34383e;
|
||||
--color-border-input: #465159;
|
||||
|
||||
--color-primary: #6f8cff;
|
||||
--color-primary-dark: #5d74e8;
|
||||
--color-accent: #4db6d6;
|
||||
--color-primary: #25a7c7;
|
||||
--color-primary-dark: #188ca9;
|
||||
--color-accent: #2eb5d1;
|
||||
|
||||
--color-bar: rgba(7, 10, 16, 0.94);
|
||||
--color-bar-text: #f1f5ff;
|
||||
--color-bar-muted: #7f8ba3;
|
||||
--color-bar: #292c30;
|
||||
--color-bar-text: #f0f1f2;
|
||||
--color-bar-muted: #8b8f94;
|
||||
|
||||
--font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
--app-color-scheme: dark;
|
||||
--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-bg: #222328;
|
||||
--app-button-bg: #32363d;
|
||||
--app-input-bg: #22252a;
|
||||
--app-select-option-bg: #32363d;
|
||||
--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: rgba(4, 7, 12, 0.58);
|
||||
--app-dialog-bg: #101622;
|
||||
--app-dialog-chrome: #141b29;
|
||||
--app-dialog-backdrop: rgba(12, 13, 15, 0.7);
|
||||
--app-dialog-bg: #22252a;
|
||||
--app-dialog-chrome: #2b2e34;
|
||||
--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;
|
||||
--app-settings-row-bg: #2b2e34;
|
||||
--app-scrollbar-thumb: #4a4e55;
|
||||
--app-scrollbar-thumb-hover: #60656d;
|
||||
|
||||
--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-surface: #222328;
|
||||
--code-surface-raised: #2b2e34;
|
||||
--code-surface-subtle: #1f2024;
|
||||
--code-surface-muted: #26282d;
|
||||
--code-surface-meta: #1d1e22;
|
||||
--code-input-bg: #22252a;
|
||||
--code-hover-bg: #30343a;
|
||||
--code-add-text: #5dd88a;
|
||||
--code-add-strong: #4eca76;
|
||||
--code-add-bg: rgba(78, 202, 118, 0.09);
|
||||
@@ -190,7 +190,7 @@
|
||||
}
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.22), 0 0 32px rgba(65, 209, 255, 0.08);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 7%, transparent);
|
||||
}
|
||||
input { height: 34px; padding: 0 11px; }
|
||||
textarea { resize: vertical; min-height: 132px; padding: 10px 11px; line-height: 1.45; }
|
||||
@@ -334,15 +334,15 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: rgba(111, 140, 255, 0.72);
|
||||
border-color: color-mix(in srgb, var(--color-primary) 82%, white);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #5f7df2 0%, #238eb4 100%);
|
||||
box-shadow: 0 10px 24px rgba(77, 182, 214, 0.16);
|
||||
background: var(--color-primary);
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
border-color: rgba(77, 182, 214, 0.78);
|
||||
background: linear-gradient(135deg, #6f8cff 0%, #2da0c7 100%);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 78%, white);
|
||||
background: var(--color-accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -6227,22 +6227,23 @@
|
||||
--ui-radius-sm: 5px;
|
||||
--ui-control-height: 32px;
|
||||
--ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
||||
--app-bg: #0d1118;
|
||||
--app-button-bg: #171d27;
|
||||
--app-input-bg: #101620;
|
||||
--app-bg: #222328;
|
||||
--app-button-bg: #32363d;
|
||||
--app-input-bg: #22252a;
|
||||
--app-panel-highlight: none;
|
||||
--app-panel-shadow: none;
|
||||
--color-surface: #111720;
|
||||
--color-surface-alt: #0d121a;
|
||||
--color-surface-dim: #141b25;
|
||||
--color-surface-hover: #1b2431;
|
||||
--color-surface-raised: #151c27;
|
||||
--color-surface-solid: #111720;
|
||||
--color-border: #2a3546;
|
||||
--color-border-subtle: #222c3a;
|
||||
--color-primary: #4d8dff;
|
||||
--color-primary-dark: #3477ed;
|
||||
--color-accent: #65a2ff;
|
||||
--color-surface: #2b2e34;
|
||||
--color-surface-alt: #1b1c1e;
|
||||
--color-surface-dim: #2e3137;
|
||||
--color-surface-hover: #363a41;
|
||||
--color-surface-raised: #32363d;
|
||||
--color-surface-solid: #222328;
|
||||
--color-border: #3a3e45;
|
||||
--color-border-subtle: #34383e;
|
||||
--color-border-input: #465159;
|
||||
--color-primary: #25a7c7;
|
||||
--color-primary-dark: #188ca9;
|
||||
--color-accent: #2eb5d1;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
@@ -6279,8 +6280,8 @@ button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
|
||||
outline-offset: 1px;
|
||||
outline: 2px solid color-mix(in srgb, var(--color-accent) 88%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
input, textarea, select { border-radius: var(--ui-radius-sm); }
|
||||
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
|
||||
@@ -6289,7 +6290,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
.shell-body { gap: 0; padding: 0; }
|
||||
.titlebar {
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
background: var(--color-surface-solid);
|
||||
background: var(--color-bar);
|
||||
}
|
||||
.titlebar-brand { min-width: 140px; padding-left: 14px; border-right: 0; font-size: 14px; }
|
||||
.titlebar-brand-icon,
|
||||
@@ -6332,7 +6333,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
background: var(--color-surface-solid);
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
.repo-toolbar-sync { grid-template-rows: 10px 36px; }
|
||||
.repo-toolbar-group-label { padding-left: 1px; font-size: 8.5px; letter-spacing: .13em; }
|
||||
@@ -6348,7 +6349,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
background: var(--color-border-subtle);
|
||||
row-gap: 0;
|
||||
}
|
||||
.left-sidebar { background: var(--color-surface-solid); }
|
||||
.left-sidebar { background: var(--color-surface); }
|
||||
.main-panel { border: 0; border-radius: 0; background: var(--color-surface-solid); }
|
||||
.history-aside { background: var(--color-border-subtle); row-gap: 0; }
|
||||
|
||||
@@ -6360,6 +6361,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.left-sidebar .panel + .panel { border-top: 1px solid var(--color-border); }
|
||||
.left-sidebar .panel { background: var(--color-surface); }
|
||||
.section-head {
|
||||
min-height: 50px;
|
||||
padding: 8px 12px;
|
||||
@@ -6720,6 +6722,115 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
.repo-section > header { background: var(--color-surface-dim); }
|
||||
.repo-row-main:hover:not(:disabled) { background: var(--color-surface-hover); }
|
||||
|
||||
/* Dark control contrast --------------------------------------------------
|
||||
Keep GitKraken's restrained graphite palette while making interactive
|
||||
boundaries and text states unambiguous on every dark surface. */
|
||||
:root:not([data-theme="light"]) .btn-primary {
|
||||
border-color: #2eb5d1;
|
||||
color: #ffffff;
|
||||
background: #126f84;
|
||||
}
|
||||
:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) {
|
||||
border-color: #55c5dc;
|
||||
color: #ffffff;
|
||||
background: #147c94;
|
||||
}
|
||||
:root:not([data-theme="light"]) .btn-secondary {
|
||||
border-color: #596169;
|
||||
color: #d7dadc;
|
||||
background: #32363d;
|
||||
}
|
||||
:root:not([data-theme="light"]) .btn-secondary:hover:not(:disabled) {
|
||||
border-color: #707982;
|
||||
color: #ffffff;
|
||||
background: #41464d;
|
||||
}
|
||||
:root:not([data-theme="light"]) input,
|
||||
:root:not([data-theme="light"]) textarea,
|
||||
:root:not([data-theme="light"]) select,
|
||||
:root:not([data-theme="light"]) .select-menu-trigger {
|
||||
border-color: #596169;
|
||||
}
|
||||
:root:not([data-theme="light"]) input:hover:not(:disabled),
|
||||
:root:not([data-theme="light"]) textarea:hover:not(:disabled),
|
||||
:root:not([data-theme="light"]) select:hover:not(:disabled),
|
||||
:root:not([data-theme="light"]) .select-menu-trigger:hover:not(:disabled) {
|
||||
border-color: #707982;
|
||||
}
|
||||
:root:not([data-theme="light"]) input:focus,
|
||||
:root:not([data-theme="light"]) textarea:focus,
|
||||
:root:not([data-theme="light"]) select:focus,
|
||||
:root:not([data-theme="light"]) .select-menu.open .select-menu-trigger {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-action-group,
|
||||
:root:not([data-theme="light"]) .dialog-icon-button {
|
||||
border-color: #535a62;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-action:hover:not(:disabled),
|
||||
:root:not([data-theme="light"]) .repo-action.active,
|
||||
:root:not([data-theme="light"]) .dialog-icon-button:hover:not(:disabled) {
|
||||
border-color: #707982;
|
||||
background: #3b4047;
|
||||
}
|
||||
|
||||
/* Dark app chrome separation -------------------------------------------
|
||||
Tabs, command toolbar and workspace should read as three adjacent
|
||||
layers instead of one uninterrupted gray strip. */
|
||||
:root:not([data-theme="light"]) .repo-tabbar {
|
||||
border-bottom-color: #505760;
|
||||
background: #26292f;
|
||||
box-shadow:
|
||||
inset 0 -1px 0 #191b1f,
|
||||
0 1px 0 rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-tabs-scroll {
|
||||
border-left-color: #454b53;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-tab-wrap {
|
||||
border-right-color: #454b53;
|
||||
background: #292c32;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-tab-wrap:hover {
|
||||
background: #30343a;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-tab-wrap.active,
|
||||
:root:not([data-theme="light"]) .repo-tab.management.active {
|
||||
background: #343941;
|
||||
box-shadow:
|
||||
inset 0 -3px 0 var(--color-accent),
|
||||
inset 1px 0 0 #4c535b,
|
||||
inset -1px 0 0 #4c535b,
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.045);
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-tab-add {
|
||||
border-left-color: #454b53;
|
||||
background: #292c32;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-toolbar {
|
||||
border-top: 1px solid #424850;
|
||||
border-bottom-color: #505760;
|
||||
background: #30343a;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.035),
|
||||
0 2px 0 #191b1f;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-action-group {
|
||||
border-color: #596169;
|
||||
background: #292d32;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-action-group > .repo-action,
|
||||
:root:not([data-theme="light"]) .repo-action-group > .repo-history-wrap > .repo-action {
|
||||
border-right-color: #484e55;
|
||||
}
|
||||
:root:not([data-theme="light"]) .repo-toolbar-divider {
|
||||
background: #555c64;
|
||||
}
|
||||
:root:not([data-theme="light"]) .workspace {
|
||||
box-shadow: inset 0 1px 0 #17191c;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.repo-action { padding-inline: 10px; }
|
||||
.repo-toolbar-divider { margin-inline: 2px; }
|
||||
|
||||
Reference in New Issue
Block a user