style(ui): enforce square corners and preserve circular markers
Introduce a square UI language by resetting border-radius on controls and surfaces to create consistent square corners app-wide. Add explicit exceptions to preserve circular markers and keep branch-flag shapes so avatars, dots, and graph connections remain recognizable. Remove a few unnecessary !important modifiers to simplify overrides. - Reset border-radius globally for elements and pseudo-elements. - Preserve circular avatars, graph dots, and similar markers. - Keep curved branch flag shapes and targeted corner rules.
This commit is contained in:
+41
-2
@@ -2824,7 +2824,7 @@
|
|||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 34%, transparent);
|
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 34%, transparent);
|
||||||
border-left-width: 2px;
|
border-left-width: 2px;
|
||||||
border-radius: 0 5px 5px 0 !important;
|
border-radius: 0 5px 5px 0;
|
||||||
color: #dce9ff;
|
color: #dce9ff;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 14%, rgba(18,24,36,.96)), rgba(18,24,36,.82));
|
linear-gradient(90deg, color-mix(in srgb, var(--ref-lane-color, #69a7ff) 14%, rgba(18,24,36,.96)), rgba(18,24,36,.82));
|
||||||
@@ -6285,7 +6285,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
|||||||
contain-intrinsic-block-size: 108px;
|
contain-intrinsic-block-size: 108px;
|
||||||
}
|
}
|
||||||
.commit-avatar { border-radius: 50%; }
|
.commit-avatar { border-radius: 50%; }
|
||||||
.commit-kind, .compact-ref-chip { border-radius: 4px !important; }
|
.commit-kind, .compact-ref-chip { border-radius: 4px; }
|
||||||
.workspace-statusbar {
|
.workspace-statusbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -7366,6 +7366,45 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
|||||||
background: var(--color-border);
|
background: var(--color-border);
|
||||||
}
|
}
|
||||||
.ai-review-suggestion { display: grid; gap: 3px; margin-top: 9px; padding: 8px 9px; border-radius: 5px; background: var(--color-surface-dim); }
|
.ai-review-suggestion { display: grid; gap: 3px; margin-top: 9px; padding: 8px 9px; border-radius: 5px; background: var(--color-surface-dim); }
|
||||||
|
|
||||||
|
/* Square UI language: controls and surfaces have no rounded corners. */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preserve shapes that communicate a circular marker rather than a rounded surface. */
|
||||||
|
.commit-avatar,
|
||||||
|
.repo-switch > span,
|
||||||
|
.commit-ref-detail-item > i,
|
||||||
|
.graph-dot,
|
||||||
|
.worktree-rail span,
|
||||||
|
.workspace-health > span,
|
||||||
|
.workspace-auto i {
|
||||||
|
border-radius: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Branch flags keep their flag shape and curved graph connection. */
|
||||||
|
.compact-ref-chip,
|
||||||
|
.compact-ref-overflow {
|
||||||
|
border-radius: 5px !important;
|
||||||
|
}
|
||||||
|
.compact-ref-chip.branch {
|
||||||
|
border-radius: 0 5px 5px 0 !important;
|
||||||
|
}
|
||||||
|
.branch-ref-cluster.local-only .compact-ref-chip.branch {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
.compact-ref-local-marker {
|
||||||
|
border-radius: 0 5px 5px 0 !important;
|
||||||
|
}
|
||||||
|
.commit-body.has-branch-ref::before {
|
||||||
|
border-top-left-radius: 14px !important;
|
||||||
|
}
|
||||||
|
.commit-body.has-branch-ref::after {
|
||||||
|
border-bottom-right-radius: 14px !important;
|
||||||
|
}
|
||||||
.ai-review-suggestion strong { color: var(--color-ink-dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
|
.ai-review-suggestion strong { color: var(--color-ink-dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
|
||||||
.ai-review-suggestion span { color: var(--color-ink-muted); font-size: 11.5px; line-height: 1.45; }
|
.ai-review-suggestion span { color: var(--color-ink-muted); font-size: 11.5px; line-height: 1.45; }
|
||||||
.ai-review-clean-state { display: grid; place-items: center; align-content: center; min-height: 280px; gap: 8px; color: #2da44e; text-align: center; }
|
.ai-review-clean-state { display: grid; place-items: center; align-content: center; min-height: 280px; gap: 8px; color: #2da44e; text-align: center; }
|
||||||
|
|||||||
Reference in New Issue
Block a user