feat(FN-3245): add fallback for bg-surface token in ScriptsModal
Fixes ScriptsModal CSS by adding a fallback value for the undefined `--bg-surface` token, preventing broken styling when the token isn't defined in the current theme. Fusion-Task-Id: FN-3245
This commit is contained in:
Fusion
@@ -1749,7 +1749,7 @@
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: color-mix(in srgb, var(--bg) 35%, transparent);
|
||||
padding: var(--space-sm) 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -1772,12 +1772,12 @@
|
||||
|
||||
.gm-nav-item:hover {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: color-mix(in srgb, var(--text) 5%, transparent);
|
||||
}
|
||||
|
||||
.gm-nav-item.active {
|
||||
color: var(--text);
|
||||
background: rgba(88, 166, 255, 0.08);
|
||||
background: color-mix(in srgb, var(--todo) 8%, transparent);
|
||||
border-left-color: var(--todo);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1819,8 +1819,8 @@
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-lg);
|
||||
background: rgba(248, 81, 73, 0.1);
|
||||
border: 1px solid rgba(248, 81, 73, 0.2);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
@@ -1911,18 +1911,18 @@
|
||||
|
||||
.gm-status-badge.clean {
|
||||
color: var(--color-success);
|
||||
background: rgba(63, 185, 80, 0.1);
|
||||
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
||||
}
|
||||
|
||||
.gm-status-badge.dirty {
|
||||
color: var(--color-error);
|
||||
background: rgba(248, 81, 73, 0.1);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
}
|
||||
|
||||
.gm-hash {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: color-mix(in srgb, var(--text) 5%, transparent);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--todo);
|
||||
@@ -1972,7 +1972,7 @@
|
||||
}
|
||||
|
||||
.gm-icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: color-mix(in srgb, var(--text) 10%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -2031,7 +2031,7 @@
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(248, 81, 73, 0.1);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
@@ -2128,7 +2128,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: color-mix(in srgb, var(--bg) 55%, transparent);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@@ -2158,7 +2158,7 @@
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
|
||||
font-size: 13px;
|
||||
transition: background var(--transition-fast);
|
||||
cursor: pointer;
|
||||
@@ -2169,11 +2169,11 @@
|
||||
}
|
||||
|
||||
.gm-file-item:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
.gm-file-item.staged {
|
||||
background: rgba(63, 185, 80, 0.03);
|
||||
background: color-mix(in srgb, var(--color-success) 3%, transparent);
|
||||
}
|
||||
|
||||
.gm-file-item.active {
|
||||
@@ -2235,23 +2235,23 @@
|
||||
|
||||
.gm-file-badge-added,
|
||||
.gm-file-badge-untracked {
|
||||
background: rgba(63, 185, 80, 0.15);
|
||||
background: color-mix(in srgb, var(--color-success) 15%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.gm-file-badge-modified {
|
||||
background: rgba(88, 166, 255, 0.15);
|
||||
background: color-mix(in srgb, var(--todo) 15%, transparent);
|
||||
color: var(--todo);
|
||||
}
|
||||
|
||||
.gm-file-badge-deleted {
|
||||
background: rgba(248, 81, 73, 0.15);
|
||||
background: color-mix(in srgb, var(--color-error) 15%, transparent);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.gm-file-badge-renamed,
|
||||
.gm-file-badge-copied {
|
||||
background: rgba(188, 140, 255, 0.15);
|
||||
background: color-mix(in srgb, var(--in-progress) 15%, transparent);
|
||||
color: var(--in-progress);
|
||||
}
|
||||
|
||||
@@ -2520,7 +2520,7 @@
|
||||
}
|
||||
|
||||
.gm-commit-header:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
.gm-commit-top-row {
|
||||
@@ -2551,7 +2551,7 @@
|
||||
font-weight: 600;
|
||||
padding: 1px 5px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(188, 140, 255, 0.15);
|
||||
background: color-mix(in srgb, var(--in-progress) 15%, transparent);
|
||||
color: var(--in-progress);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -2588,7 +2588,7 @@
|
||||
.gm-load-more:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--text-muted);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
/* ── Create Form (branches, stashes) ── */
|
||||
@@ -2637,7 +2637,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
@@ -2646,11 +2646,11 @@
|
||||
}
|
||||
|
||||
.gm-branch-item:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
.gm-branch-item.current {
|
||||
background: rgba(88, 166, 255, 0.05);
|
||||
background: color-mix(in srgb, var(--todo) 5%, transparent);
|
||||
}
|
||||
|
||||
.gm-branch-info {
|
||||
@@ -2693,17 +2693,17 @@
|
||||
/* ── Branch Selection Details ── */
|
||||
|
||||
.gm-branch-item.selected {
|
||||
background: rgba(88, 166, 255, 0.08);
|
||||
background: color-mix(in srgb, var(--todo) 8%, transparent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gm-branch-item.selected:hover {
|
||||
background: rgba(88, 166, 255, 0.12);
|
||||
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
||||
}
|
||||
|
||||
.gm-branch-details {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: color-mix(in srgb, var(--bg) 65%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
@@ -2738,7 +2738,7 @@
|
||||
}
|
||||
|
||||
.gm-branch-commit {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
.gm-branch-commit:last-child {
|
||||
@@ -2761,7 +2761,7 @@
|
||||
}
|
||||
|
||||
.gm-branch-commit-row:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: color-mix(in srgb, var(--text) 3%, transparent);
|
||||
}
|
||||
|
||||
/* ── Worktrees Panel ── */
|
||||
@@ -2837,7 +2837,7 @@
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(88, 166, 255, 0.12);
|
||||
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
||||
color: var(--todo);
|
||||
}
|
||||
|
||||
@@ -2850,12 +2850,12 @@
|
||||
}
|
||||
|
||||
.gm-badge.main {
|
||||
background: rgba(63, 185, 80, 0.15);
|
||||
background: color-mix(in srgb, var(--color-success) 15%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.gm-badge.bare {
|
||||
background: rgba(139, 148, 158, 0.15);
|
||||
background: color-mix(in srgb, var(--text-muted) 15%, transparent);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -2925,34 +2925,44 @@
|
||||
|
||||
.gm-remote-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.gm-remote-indicator {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs, 12px);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gm-remote-indicator .status-dot {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gm-remote-indicator.ahead {
|
||||
background: rgba(63, 185, 80, 0.08);
|
||||
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.gm-remote-indicator.behind {
|
||||
background: rgba(248, 81, 73, 0.08);
|
||||
color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.gm-remote-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.gm-remote-actions .btn {
|
||||
flex: 1 1 calc(var(--space-2xl) * 5);
|
||||
}
|
||||
|
||||
.gm-remote-result {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--card);
|
||||
@@ -2972,24 +2982,24 @@
|
||||
}
|
||||
|
||||
.gm-remotes-layout {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(calc(var(--space-2xl) * 6), calc(var(--space-2xl) * 8)) minmax(0, 1fr);
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Remote Selector (Left Column) ── */
|
||||
|
||||
.gm-remote-selector {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
border-right: 1px solid var(--border);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding-right: var(--space-sm);
|
||||
padding: var(--space-sm);
|
||||
background: color-mix(in srgb, var(--surface) 55%, transparent);
|
||||
}
|
||||
|
||||
.gm-remote-selector-header {
|
||||
@@ -3015,25 +3025,33 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
transition: background var(--transition-fast), border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.gm-remote-selector-item:hover {
|
||||
background: var(--hover);
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.gm-remote-selector-item:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--todo);
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
.gm-remote-selector-item.selected {
|
||||
border: 1px solid var(--primary);
|
||||
background: var(--primary-bg, color-mix(in srgb, var(--primary) 8%, transparent));
|
||||
border-color: var(--todo);
|
||||
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
||||
}
|
||||
|
||||
.gm-remote-selector-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: var(--space-xs);
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -3042,18 +3060,27 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
min-width: 0;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.gm-remote-selector-name-text {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gm-remote-default-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
padding: 1px 6px;
|
||||
font-weight: 600;
|
||||
padding: 0 var(--space-xs);
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in srgb, var(--primary) 15%, transparent);
|
||||
color: var(--primary);
|
||||
background: color-mix(in srgb, var(--todo) 16%, transparent);
|
||||
color: var(--todo);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.gm-remote-selector-host {
|
||||
@@ -3074,6 +3101,7 @@
|
||||
gap: var(--space-md);
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
padding-right: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ── Sync Card ── */
|
||||
@@ -3085,7 +3113,7 @@
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.gm-remote-sync-card-header {
|
||||
@@ -3114,6 +3142,23 @@
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.gm-section-subheader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.gm-section-subheader h5 {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--text-xs, 12px);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.gm-remote-detail-urls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -3122,9 +3167,9 @@
|
||||
|
||||
.gm-remote-detail-url-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs, 12px);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
@@ -3136,10 +3181,21 @@
|
||||
|
||||
.gm-url-value {
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.gm-remote-inline-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gm-remote-remove-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gm-remote-detail-name-row {
|
||||
@@ -3207,7 +3263,7 @@
|
||||
}
|
||||
|
||||
.gm-commit-item-compact:hover {
|
||||
background: var(--hover);
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.gm-commit-compact-hash {
|
||||
@@ -3255,6 +3311,11 @@
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.gm-commit-clickable:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
.gm-commit-expand-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-muted);
|
||||
@@ -3272,7 +3333,7 @@
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
background: var(--bg-surface);
|
||||
background: var(--bg-surface, var(--surface-subtle));
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
@@ -3288,6 +3349,41 @@
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gm-remotes-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gm-remote-selector {
|
||||
max-height: calc(var(--space-2xl) * 8);
|
||||
}
|
||||
|
||||
.gm-remote-selector-header {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.gm-remote-selector-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.gm-remote-selector-name {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gm-remote-detail {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gm-remote-detail-url-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gm-remote-inline-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* Full-screen sheet on mobile — drop overlay padding so the modal
|
||||
actually fills the viewport instead of being pushed below it. */
|
||||
@@ -3401,18 +3497,17 @@
|
||||
}
|
||||
|
||||
.gm-remotes-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gm-remote-selector {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-right: 0;
|
||||
padding-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
@@ -3504,7 +3599,7 @@
|
||||
|
||||
[data-theme="light"] .gm-remote-selector {
|
||||
background: var(--surface-subtle);
|
||||
border-right-color: rgba(0, 0, 0, 0.08);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .gm-remote-selector-item:hover {
|
||||
@@ -3521,21 +3616,21 @@
|
||||
|
||||
[data-theme="light"] .gm-remote-sync-card {
|
||||
background: var(--surface-subtle);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .gm-remote-detail-card {
|
||||
background: var(--surface-subtle);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .gm-remote-form {
|
||||
background: var(--surface-subtle);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .gm-remote-detail-name-row {
|
||||
border-top-color: rgba(0, 0, 0, 0.08);
|
||||
border-top-color: var(--border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .gm-remote-default-badge {
|
||||
|
||||
Reference in New Issue
Block a user