bowenliang123
feacf5d906
Row lists (the DNA flat feed, category bodies, tool schemas) previously read as one undifferentiated white field. One rule keyed on the shared .lc-br-elem row factory stripes every list: `nth-child(even of .lc-br-elem)` keeps the phase stable across toolbars, notes and filtered-out rows, the tint is 60% of the theme's interactive hover wash so it sits under hover and open states, and an open row keeps its active highlight alone.
99 lines
13 KiB
CSS
99 lines
13 KiB
CSS
/* The DNA group's margin is zeroed so the delta-baseline `.lc-gran` keeps the row's single auto-margin push. */
|
||
.lc-br-dna-ctl { margin-left: 0; flex: none; }
|
||
/* The card's pinned head: within the capped browser column the title, composition bar, notices and the DNA
|
||
feed's lens stay fixed while the rows scroll beneath. The /context modal scrolls as one card — no pin there. */
|
||
.lc-col-browser .lc-br-head { position: sticky; top: 0; z-index: 2; background: var(--dsw-alias-bg-layer-1); }
|
||
/* The head-pinned DNA lens keeps the feed's 10px bar-to-lens rhythm. */
|
||
.lc-br-head .lc-br-toolctl { margin-top: 10px; }
|
||
/* The divider scales with its band (`min(0.5px, 12.5%)` of its own width): long sessions pin hundreds of bands at ≤1px, where a fixed divider would cover the whole band. A gradient layer, because a fixed inset box-shadow cannot scale. */
|
||
.lc-br-bar-dna .lc-stacked-seg { background-image: linear-gradient(to right, transparent calc(100% - min(0.5px, 12.5%)), var(--dsw-alias-bg-layer-1) 0); }
|
||
/* The block-map toggle anchors the block: a two-row main column (figures above, the bar below) with the button
|
||
as a right column stretching across both rows — it reads as the block's handle, not a rider on the bar. */
|
||
.lc-br-bar { display: flex; align-items: stretch; gap: 10px; }
|
||
.lc-br-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
|
||
.lc-br-map-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: auto; padding: 0; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-tertiary); cursor: pointer; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), border-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-br-map-btn svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.2; }
|
||
.lc-br-map-btn:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l1); }
|
||
.lc-br-map-btn-on, .lc-br-map-btn-on:hover { color: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
|
||
|
||
/* The block map: a measured squarified treemap (browserTreemap.tsx), fixed-height and reflowing on width. */
|
||
.lc-map { position: relative; height: 240px; margin-top: 8px; }
|
||
/* Narrow panes stack taller so regions stay legible instead of crushing into slivers. */
|
||
@container lc-card (max-width: 560px) { .lc-map { height: 320px; } }
|
||
.lc-map-empty { margin-top: 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; }
|
||
.lc-map-cat { position: absolute; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--lc-map-c) 55%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--lc-map-c) 6%, transparent); overflow: hidden; transition: border-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), box-shadow var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-map-cat-open, .lc-map-cat-on { border-color: var(--lc-map-c); box-shadow: 0 0 0 1px var(--lc-map-c); }
|
||
.lc-map-cat-head { display: flex; align-items: center; gap: 6px; width: 100%; height: 16px; padding: 0 5px; border: 0; background: color-mix(in srgb, var(--lc-map-c) 16%, transparent); color: var(--dsw-alias-label-primary); font: inherit; font-size: 10px; cursor: pointer; text-align: left; }
|
||
.lc-map-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
|
||
.lc-map-cat-head b { flex: none; font-weight: 400; color: var(--dsw-alias-label-secondary); }
|
||
.lc-map-block { position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border: 1px solid color-mix(in srgb, var(--lc-map-c) 45%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--lc-map-c) var(--lc-map-a, 20%), transparent); color: var(--dsw-alias-label-primary); font: inherit; font-size: 11px; padding: 0 5px; cursor: pointer; overflow: hidden; text-align: left; transition: background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), opacity var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-map-block:hover, .lc-map-block:focus-visible, .lc-map-block-on { background: color-mix(in srgb, var(--lc-map-c) 55%, transparent); }
|
||
/* A hovered block stays lit while the rest of the map falls back (the composition bar's dimming idiom). */
|
||
.lc-map-dim .lc-map-block:not(.lc-map-block-on):not(:hover) { opacity: 0.4; }
|
||
.lc-map-block:focus-visible, .lc-map-cat-head:focus-visible { outline: 1px solid var(--dsw-alias-brand-primary); outline-offset: -1px; z-index: 1; }
|
||
.lc-map-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
|
||
.lc-map-label em { font-style: normal; font-size: 10px; color: var(--dsw-alias-label-secondary); margin-left: 3px; }
|
||
.lc-map-num { font-size: 10px; color: var(--dsw-alias-label-secondary); line-height: 1.2; font-variant-numeric: tabular-nums; }
|
||
.lc-map-tip { display: flex; flex-direction: column; max-width: 240px; padding: 5px 8px; line-height: 1.45; white-space: nowrap; }
|
||
.lc-map-tip-on { opacity: 1; }
|
||
.lc-br-pick { font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 0.5px solid var(--dsw-alias-border-l4); border-radius: 6px; padding: 3px 6px; max-width: 240px; }
|
||
/* The right figure sits at the main column's edge — the button column takes its own slack, so the figures no longer sit beside the button. */
|
||
.lc-br-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--dsw-alias-label-secondary); }
|
||
.lc-br-meta b { color: var(--dsw-alias-label-primary); }
|
||
.lc-br-meta .lc-est { margin-left: auto; }
|
||
.lc-br-note { margin-top: 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; }
|
||
.lc-br-retry { border: 0; background: transparent; padding: 0; color: var(--dsw-alias-brand-primary); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: filter var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-br-cats { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
|
||
/* The DNA flat feed: one row per context item, newest on top — the model reads oldest-first, so the feed
|
||
presents the reading order bottom-up and the header groups (tools, system prompt) close the list. */
|
||
.lc-br-flat { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
|
||
/* A feed row's 1-based prompt position: the model's k-th message after the header. */
|
||
.lc-br-pos { flex: none; font-size: 11px; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }
|
||
.lc-br-cat { border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-2); overflow: hidden; }
|
||
.lc-br-cat-empty { opacity: 0.55; }
|
||
/* The row stays ONE line: the item counts change as the hovered step moves, and a wrapped row resized the browser
|
||
card (and the page below it) mid-scrub. The figures keep their width; the name yields and ellipsizes instead. */
|
||
.lc-br-cat-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; padding: 7px 10px; cursor: pointer; text-align: left; transition: background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
/* Current-composition hover echo: the shared hover link lights the category row as a physical hover would. */
|
||
.lc-br-cat-on { background: var(--dsw-alias-interactive-bg-hover); }
|
||
.lc-br-cat-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }
|
||
.lc-br-cat-open { background: var(--dsw-alias-interactive-bg-hover); }
|
||
.lc-br-cat-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; transition: box-shadow var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-br-cat-label { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.lc-br-cat-count { color: var(--dsw-alias-label-secondary); font-size: 12px; white-space: nowrap; }
|
||
.lc-br-count-grp { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
|
||
/* A bordered box instead of a ▸ glyph: it rotates about its true center and stays crisp at any zoom. */
|
||
.lc-br-chev { flex: none; width: 12px; height: 14px; display: flex; align-items: center; justify-content: center; color: var(--dsw-alias-label-tertiary); }
|
||
.lc-br-chev::before { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
.lc-br-chev-on::before { transform: rotate(45deg); }
|
||
.lc-br-tokens { flex: none; color: var(--dsw-alias-label-secondary); font-size: 12px; }
|
||
.lc-br-delta, .lc-br-tdelta { flex: none; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
|
||
.lc-br-delta-up, .lc-br-tdelta-up { color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); }
|
||
.lc-br-delta-down, .lc-br-tdelta-down { color: var(--dsw-alias-state-error-primary); background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); }
|
||
.lc-br-tokens-grp { flex: none; min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
|
||
.lc-br-pct { flex: none; width: 36px; text-align: right; color: var(--dsw-alias-label-secondary); font-size: 12px; }
|
||
.lc-br-body { border-top: 1px solid var(--dsw-alias-border-l1); padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }
|
||
.lc-br-elem { border-radius: 6px; }
|
||
/* `of` counts rows only: a toolbar or note never shifts the stripe's phase. */
|
||
.lc-br-elem:nth-child(even of .lc-br-elem):not(.lc-br-elem-on) { background: color-mix(in srgb, var(--dsw-alias-interactive-bg-hover) 60%, transparent); }
|
||
.lc-br-elem-on { background: var(--dsw-alias-interactive-bg-active); }
|
||
.lc-br-elem-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer; text-align: left; border-radius: 6px; transition: background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
|
||
/* The chat's run-state dot, so the failure scans without expanding the row. */
|
||
.lc-br-err-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-error-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); }
|
||
.lc-br-tag { min-width: 0; font-size: 11px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 4px; padding: 0 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
/* One capsule per distinct call name, repeats folded into a ×N multiplier. */
|
||
.lc-br-tags { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
|
||
/* Same face and size as the tool name it tags. */
|
||
.lc-br-tool-plugin { font-size: 12px; border-radius: 6px; color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent); border-color: transparent; }
|
||
.lc-br-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
/* The introducing-step stamp merges with the clock into one nowrap span. */
|
||
.lc-br-time { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }
|
||
/* A PENDING stamp (a live-tail item no request carries yet) is an estimate; its tooltip names the not-yet-sent step. */
|
||
.lc-br-time-pending { text-decoration: underline dotted; text-underline-offset: 2px; }
|
||
/* A DNA band hover echoes onto its feed row: the row's button wears the hover wash while the pointer is on the bar. */
|
||
.lc-br-elem-echo > .lc-br-elem-row { background-color: var(--dsw-alias-interactive-bg-hover); }
|
||
/* Call-hit tally on a tool-definition row. */
|
||
.lc-br-hits { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; }
|
||
.lc-br-content { padding: 2px 6px 8px 26px; display: flex; flex-direction: column; gap: 6px; }
|
||
.lc-br-dim { color: var(--dsw-alias-label-secondary); }
|