129 lines
3.7 KiB
CSS
129 lines
3.7 KiB
CSS
/* The layout model from the measurement: shell inset 8 at the sides · gap 8 · top bar 36 ·
|
|
status bar 28. The bars are pinned to the edges of the window and do NOT step back from them by
|
|
the inset — their content is centred in the bar itself
|
|
(re-measure S3.5, FRONTEND_PLAN.md §5.1). */
|
|
|
|
.shell {
|
|
display: grid;
|
|
grid-template-rows: var(--topbar-height) 1fr var(--statusbar-height);
|
|
height: 100%;
|
|
background-color: var(--color-shell);
|
|
}
|
|
|
|
.topbar {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
padding-inline: var(--bar-inset);
|
|
}
|
|
|
|
.side {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
}
|
|
|
|
.side:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* h1 for the sake of the document structure, not for the sake of the look: the type size and the
|
|
weight are those of the interface. */
|
|
.title {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-ui);
|
|
font-weight: inherit;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.body {
|
|
min-height: 0;
|
|
|
|
/* The inset of the shell belongs to the area of the PANELS, not to the whole window: in Fleet
|
|
the bars are pinned to the edges of the window and count their own inset from them
|
|
(measured: 12.5 on the left, 13.5 on the right). */
|
|
padding-inline: var(--gap);
|
|
}
|
|
|
|
.slot {
|
|
display: grid;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* The separator IS the gap between the panels: the measured 8px and the grab zone are one and the
|
|
same place, which is why no extra inset appears next to it. It is itself ALWAYS TRANSPARENT —
|
|
the black gap between the windows is painted over by nothing (the owner's word, remark 14). */
|
|
.separator {
|
|
position: relative;
|
|
width: var(--gap);
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* A pill centred in the gap. Rules copied verbatim from vojo (`components/page/style.css.ts`):
|
|
rest invisible · hover and keyboard focus 0.25 · focus tinted at 0.45 · drag 0.55 and grows ·
|
|
min stop squished and thickened · max stop stretched. 140ms throughout, as there. */
|
|
.handle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: var(--handle-width);
|
|
height: var(--handle-length);
|
|
transform: translate(-50%, -50%);
|
|
border-radius: var(--radius-bar);
|
|
background-color: var(--color-text-secondary);
|
|
opacity: 0;
|
|
transition:
|
|
opacity 140ms ease,
|
|
height 140ms ease,
|
|
width 140ms ease,
|
|
background-color 140ms ease;
|
|
}
|
|
|
|
.separator[data-separator='hover'] .handle,
|
|
.separator:focus-visible .handle {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* ⚠ The accent is on the drag and on the KEYBOARD focus, but not on any `data-separator="focus"`.
|
|
The library sets that state on an ordinary onFocus (dist: `z ? G = "focus"`), while a mouse
|
|
pointerdown leaves the focus in place — which is why after releasing the drag the pill STUCK
|
|
highlighted (remark 18a). :focus-visible does not do this: a mouse does not show a focus ring. */
|
|
.separator:focus-visible .handle {
|
|
background-color: var(--color-accent);
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.separator[data-separator='active'] .handle {
|
|
height: var(--handle-length-active);
|
|
background-color: var(--color-accent);
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.separator:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* The stop is tactile: crushed at min, stretched at max. The state comes from the shell —
|
|
the library does not report a clamp. */
|
|
.separator[data-separator='active'] .handle[data-limit='min'] {
|
|
width: var(--handle-width-limit);
|
|
height: var(--handle-length-min);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.separator[data-separator='active'] .handle[data-limit='max'] {
|
|
height: var(--handle-length-max);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.statusbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-inline: var(--bar-inset);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|