mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-09 08:59:40 +02:00
feat(tabs): orbit the working ring around a busy session tab's dot
The desktop home rail and the phone overview both draw a spinning `tab-load-spin` ring around their green dot while a session works; the tab strip itself only pulsed. Same ring on the tab dot now, so "working" reads identically on every surface. Drawn as a ::after border circle rather than a halo: the skin block sets `box-shadow: none` on .tab-status.busy to keep tab dots quiet and outranks any plain class rule, and a pseudo-element sidesteps that without reintroducing the glow. It is absolutely positioned, so it never widens the tab or shifts the label, and it is disabled under prefers-reduced-motion. Phones keep their existing tell (a 9px dot with a glow) and suppress the ring: a 15px ring inside a 32px tab would sit on top of the tab name. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -680,6 +680,13 @@ html.mobile-init .file-browser-panel {
|
|||||||
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
|
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* No orbiting ring on phone tabs (styles.css draws one on desktop/tablet):
|
||||||
|
the dot is already enlarged to 9px with a glow here, and a 15px ring in a
|
||||||
|
32px tab would sit on top of the tab name. The glow is the phone's tell. */
|
||||||
|
.session-tab .tab-status.busy::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Truncate tab names more aggressively on mobile */
|
/* Truncate tab names more aggressively on mobile */
|
||||||
.session-tab .tab-name {
|
.session-tab .tab-name {
|
||||||
max-width: 50px;
|
max-width: 50px;
|
||||||
|
|||||||
@@ -1316,11 +1316,30 @@ html[data-line-anim="packet"] .connection-line.line-enter {
|
|||||||
|
|
||||||
.session-tab .tab-status.idle { background: var(--green); }
|
.session-tab .tab-status.idle { background: var(--green); }
|
||||||
.session-tab .tab-status.busy {
|
.session-tab .tab-status.busy {
|
||||||
|
position: relative;
|
||||||
background: var(--green);
|
background: var(--green);
|
||||||
animation: pulse 1.5s infinite;
|
animation: pulse 1.5s infinite;
|
||||||
/* Performance: GPU acceleration for animation */
|
/* Performance: GPU acceleration for animation */
|
||||||
will-change: opacity;
|
will-change: opacity;
|
||||||
}
|
}
|
||||||
|
/* Orbiting ring on a WORKING tab: the same `tab-load-spin` circle the desktop
|
||||||
|
home rail (.home-sessions-dot--working) and the phone overview
|
||||||
|
(.mobile-overview-dot--working) draw, so "working" reads identically on every
|
||||||
|
surface. Pseudo-element on purpose — the skin block below sets
|
||||||
|
`box-shadow: none` on .tab-status.busy to keep tab dots halo-free, and it
|
||||||
|
outranks any plain class rule here; a ring drawn with a border is untouched by
|
||||||
|
that and keeps the tabs quiet while still showing motion. Absolutely
|
||||||
|
positioned, so it never widens the tab or shifts the label. */
|
||||||
|
.session-tab .tab-status.busy::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -3px;
|
||||||
|
border: 1.5px solid color-mix(in srgb, var(--green) 25%, transparent);
|
||||||
|
border-top-color: var(--green);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: tab-load-spin 0.7s linear infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.session-tab .tab-status.error { background: var(--red); }
|
.session-tab .tab-status.error { background: var(--red); }
|
||||||
.session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
|
.session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
|
||||||
@@ -14298,6 +14317,7 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.session-tab .tab-status.busy::after,
|
||||||
.home-sessions-row,
|
.home-sessions-row,
|
||||||
.home-sessions-dot,
|
.home-sessions-dot,
|
||||||
.home-sessions-dot::after {
|
.home-sessions-dot::after {
|
||||||
|
|||||||
Reference in New Issue
Block a user