mirror of
https://github.com/stablyai/orca.git
synced 2026-09-22 16:02:32 +00:00
Make pane locate highlight more obvious (#2211)
Add a dedicated pane locate color token and use a stronger blue rim with longer visible opacity so repeated focus flashes are easier to see.
This commit is contained in:
@@ -103,6 +103,7 @@
|
||||
--border: #e5e5e5;
|
||||
--input: #e5e5e5;
|
||||
--ring: #a1a1a1;
|
||||
--terminal-pane-locate: var(--color-blue-600);
|
||||
--chart-1: var(--color-blue-300);
|
||||
--chart-2: var(--color-blue-500);
|
||||
--chart-3: var(--color-blue-600);
|
||||
@@ -156,6 +157,7 @@
|
||||
--border: rgb(255 255 255 / 0.07);
|
||||
--input: rgb(255 255 255 / 0.15);
|
||||
--ring: #737373;
|
||||
--terminal-pane-locate: var(--color-blue-400);
|
||||
--chart-1: var(--color-blue-300);
|
||||
--chart-2: var(--color-blue-500);
|
||||
--chart-3: var(--color-blue-600);
|
||||
|
||||
@@ -134,18 +134,18 @@
|
||||
inset: 1px;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
border: 1px solid color-mix(in srgb, var(--ring) 82%, transparent);
|
||||
border-radius: 3px;
|
||||
border: 1.5px solid color-mix(in srgb, var(--terminal-pane-locate) 52%, transparent);
|
||||
border-right-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
|
||||
border-left-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--ring) 44%, transparent),
|
||||
0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent),
|
||||
0 0 18px color-mix(in srgb, var(--ring) 28%, transparent);
|
||||
0 0 0 2px color-mix(in srgb, var(--terminal-pane-locate) 34%, transparent),
|
||||
0 0 20px color-mix(in srgb, var(--terminal-pane-locate) 40%, transparent);
|
||||
animation: pane-focus-rim-flash 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes pane-focus-rim-flash {
|
||||
0%,
|
||||
72% {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
|
||||
@@ -42,12 +42,12 @@ describe('flashFocusedPaneRim', () => {
|
||||
const pane = createPaneElement()
|
||||
|
||||
flashFocusedPaneRim(pane)
|
||||
vi.advanceTimersByTime(800)
|
||||
vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
|
||||
flashFocusedPaneRim(pane)
|
||||
vi.advanceTimersByTime(600)
|
||||
vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
|
||||
|
||||
expect(pane.classList.contains('pane-focus-rim-flash')).toBe(true)
|
||||
vi.advanceTimersByTime(900)
|
||||
vi.advanceTimersByTime(100)
|
||||
expect(pane.classList.contains('pane-focus-rim-flash')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user