mirror of
https://gh-proxy.org/https://github.com/klinsmaya/workdsh.git
synced 2026-11-08 17:36:57 +08:00
Yif
20720ef238
Fixed sidebar width (never concedes), figma session-row rail (16px twist + status slots, triangle arrows, mount fade), exact brand wordmark svg with tooltip'd rail controls, form controls inheriting the app font stack, and inlined the twist button reset since the tsdown CSS pipeline drops composes.
111 lines
3.0 KiB
CSS
111 lines
3.0 KiB
CSS
.frame {
|
|
position: relative; /* anchors the drag handles, which straddle column borders */
|
|
display: grid;
|
|
grid-template-rows: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--dsw-alias-bg-base);
|
|
/* Collapse/expand animates the tracks on the deepsuite sider curve
|
|
(--ds-ease-in-out / --ds-transition-duration-slow, ui-theme base.css). */
|
|
transition: grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);
|
|
}
|
|
|
|
/* Dragging writes widths at pointer cadence; easing them would detach the
|
|
column from the handle. */
|
|
.frame[data-dragging] {
|
|
transition: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.frame {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.sidebarCol {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
background: var(--dsw-specific-sidebar-fill);
|
|
border-right: 1px solid var(--dsw-alias-border-l1);
|
|
}
|
|
|
|
.centerCol {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detailsCol {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border-left: 1px solid var(--dsw-alias-border-l2);
|
|
}
|
|
|
|
/* The details subtree stays mounted at zero width, so its border must not paint
|
|
a 1px seam. The collapsed sidebar instead retains a bordered compact rail. */
|
|
.frame[data-details-collapsed] .detailsCol {
|
|
border-left: none;
|
|
}
|
|
|
|
/* Drag handles are frame children (columns clip overflow): an 8px hit strip
|
|
centered on the column border via inline left, above column content. The
|
|
visible pill (12x32 r10, riding the border at vertical center) is the figma
|
|
Handle component; the hit strip stays wider than the pill. */
|
|
.handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 8px;
|
|
margin-left: -4px;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
touch-action: none;
|
|
/* Rides the same curve as the tracks so the pill stays on the moving
|
|
border during collapse/expand; paused while dragging (frame rule). */
|
|
transition: left var(--ds-transition-duration-slow) var(--ds-ease-in-out);
|
|
}
|
|
|
|
.frame[data-dragging] .handle {
|
|
transition: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.handle {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
background: var(--dsw-alias-button-floating-fill);
|
|
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
|
|
/* Hover affordance: the pill hides until the pointer is over the owning
|
|
column (data-side pairs handle and column), the strip itself, or a drag. */
|
|
opacity: 0;
|
|
transition:
|
|
opacity var(--ds-transition-duration-slow) var(--ds-ease-in-out),
|
|
background var(--ds-transition-duration-slow) var(--ds-ease-in-out);
|
|
}
|
|
|
|
.sidebarCol:hover ~ .handle[data-side='sidebar']::after,
|
|
.detailsCol:hover ~ .handle[data-side='details']::after,
|
|
.handle:hover::after,
|
|
.handle[data-dragging='true']::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.handle:hover::after,
|
|
.handle[data-dragging='true']::after {
|
|
background: var(--dsw-alias-button-floating-hover);
|
|
border-color: var(--dsw-alias-border-l3);
|
|
}
|