/* Workbench v0.4 module: 00-tokens-themes.css */ /* Workbench CSS v0.4.2 Compact, dark, multi-purpose UI system for static pages, app shells, document readers, 2D/3D tooling, data tables, overlays, and theme editing. Root usage: Modules in this single lightweight file: 1. tokens + themes 2. scoped base 3. app shells + panels 4. controls + atoms 5. rows/tables/trees/inspectors 6. viewport/tooling helpers 7. windows/overlays 8. Theme Studio primitives 9. v0.4 component completion primitives 10. v0.4.1 interaction sizing primitives 11. v0.4.2 generic track editor primitives */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ .workbench { color-scheme: dark; /* surfaces */ --wb-bg: #101418; --wb-panel: #1f252b; --wb-panel-2: #2b333c; --wb-input: #171c21; --wb-row: #1a2026; --wb-row-alt: #1a2026; /* structure */ --wb-line: #3a444e; --wb-line-2: #4d5965; --wb-shadow: none; /* text */ --wb-text: #e9eef2; --wb-muted: #98a4ad; --wb-inverse-text: #080a0c; /* action and state */ --wb-accent: #e6a340; --wb-select: #33445a; --wb-good: #93e6a4; --wb-warn: #ffd166; --wb-bad: #ff6b6b; --wb-info: #8cd8f2; --wb-focus: var(--wb-accent); /* viewport/editor tokens */ --wb-view-bg: var(--wb-bg); --wb-grid-minor: #2f3a45; --wb-grid-major: #52677e; --wb-reference: #e6a340; --wb-axis-x: #df5a51; --wb-axis-y: #70d06b; --wb-axis-z: #4c88ea; --wb-entity-primary: #8f9aa6; --wb-entity-secondary: #b195d6; --wb-edge: #171b20; --wb-selected-edge: #ff4ce6; --wb-bounds: #f0808c; --wb-gizmo-face: #ffc454; --wb-gizmo-extrude: #ffaa46; --wb-vertex-source: #ffca66; --wb-vertex-target: #edf2f7; /* window/overlay tokens */ --wb-overlay-bg: rgba(0,0,0,.46); --wb-window-bg: var(--wb-panel); --wb-window-head: var(--wb-panel-2); --wb-window-line: var(--wb-line-2); --wb-window-shadow: 0 18px 54px rgba(0,0,0,.45); --wb-z-menu: 5000; --wb-z-overlay: 9000; --wb-z-toast: 9500; /* metrics */ --wb-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wb-mono: Consolas, "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, monospace; --wb-sans: var(--wb-font); --wb-radius: 0px; --wb-control-radius: 0px; --wb-pad: 4px; --wb-gap: 4px; --wb-row-h: 20px; --wb-top-h: 34px; --wb-control-h: 25px; --wb-toolbar-h: 34px; --wb-left-w: 270px; --wb-right-w: 380px; --wb-right-min-w: 320px; --wb-context-h: 300px; --wb-split: 8px; --wb-left-min-w: 180px; --wb-left-max-w: 460px; --wb-right-max-w: 580px; --wb-center-min-w: 360px; --wb-context-min-h: 160px; --wb-context-max-h: 560px; --wb-window-min-w: 380px; --wb-window-min-h: 220px; --wb-scrollbar-size: 10px; --wb-scrollbar-track: var(--wb-input); --wb-scrollbar-thumb: color-mix(in srgb, var(--wb-line-2) 76%, var(--wb-panel)); --wb-scrollbar-thumb-hover: color-mix(in srgb, var(--wb-accent) 70%, var(--wb-line-2)); --wb-splitter-bg: var(--wb-bg); --wb-resize-handle: 16px; --wb-resize-hit: 12px; --wb-resize-grip: color-mix(in srgb, var(--wb-muted) 78%, transparent); --wb-resize-grip-active: var(--wb-accent); --wb-grip-size: 18px; --wb-grip-color: var(--wb-resize-grip); --wb-grip-color-hot: var(--wb-accent); --wb-handle-size: 14px; --wb-handle-fill: var(--wb-panel-2); --wb-handle-line: var(--wb-line-2); --wb-handle-active: var(--wb-accent); /* legacy aliases for gradual migration from current tools */ --bg: var(--wb-bg); --panel: var(--wb-panel); --panel2: var(--wb-panel-2); --line: var(--wb-line); --line2: var(--wb-line-2); --text: var(--wb-text); --ink: var(--wb-text); --muted: var(--wb-muted); --accent: var(--wb-accent); --select: var(--wb-select); --input: var(--wb-input); --field: var(--wb-input); --row: var(--wb-row); --rowAlt: var(--wb-row-alt); --warn: var(--wb-warn); --bad: var(--wb-bad); --good: var(--wb-good); --radius: var(--wb-radius); --controlRadius: var(--wb-control-radius); --pad: var(--wb-pad); --rowH: var(--wb-row-h); --topH: var(--wb-top-h); --toolbarH: var(--wb-toolbar-h); --font: var(--wb-font); --mono: var(--wb-mono); --shadow: var(--wb-shadow); margin: 0; background: var(--wb-bg); color: var(--wb-text); font: 12px/1.35 var(--wb-font); } /* -------------------------------------------------------------------------- 2. Theme variants -------------------------------------------------------------------------- */ .workbench-amber, .workbench:not(.workbench-spreadsheet):not(.workbench-charcoal):not(.workbench-terminal):not(.workbench-blueprint):not(.workbench-custom) { --wb-bg: #101418; --wb-panel: #1f252b; --wb-panel-2: #2b333c; --wb-line: #3a444e; --wb-line-2: #4d5965; --wb-text: #e9eef2; --wb-muted: #98a4ad; --wb-accent: #e6a340; --wb-select: #33445a; --wb-input: #171c21; --wb-row: #1a2026; --wb-row-alt: #1a2026; --wb-radius: 0px; --wb-control-radius: 0px; --wb-pad: 4px; --wb-row-h: 20px; --wb-top-h: 34px; --wb-toolbar-h: 34px; } .workbench-spreadsheet { --wb-bg: #101214; --wb-panel: #15181b; --wb-panel-2: #1a1e22; --wb-line: #2f343a; --wb-line-2: #424850; --wb-text: #eef0f1; --wb-muted: #9aa0a6; --wb-accent: #7aa6d8; --wb-select: #26384d; --wb-input: #0e1012; --wb-row: #14171a; --wb-row-alt: #14171a; --wb-radius: 0px; --wb-control-radius: 0px; } .workbench-charcoal { --wb-bg: #0f1011; --wb-panel: #17191b; --wb-panel-2: #202326; --wb-line: #31363b; --wb-line-2: #4a5158; --wb-text: #e6e8ea; --wb-muted: #9aa1a8; --wb-accent: #b7bec7; --wb-select: #2b3138; --wb-input: #111315; --wb-row: #17191b; --wb-row-alt: #141618; } .workbench-terminal { --wb-bg: #050805; --wb-panel: #0d120d; --wb-panel-2: #131913; --wb-line: #2b3a2b; --wb-line-2: #415641; --wb-text: #d7f7d0; --wb-muted: #8eb389; --wb-accent: #8cff66; --wb-select: #173117; --wb-input: #070a07; --wb-row: #0b0f0b; --wb-row-alt: #090d09; --wb-grid-minor: #173117; --wb-grid-major: #2b5b2b; --wb-info: #8cff66; } .workbench-blueprint { --wb-bg: #081522; --wb-panel: #0d1f31; --wb-panel-2: #132b42; --wb-line: #274866; --wb-line-2: #3f6f99; --wb-text: #e8f6ff; --wb-muted: #9bb7c9; --wb-accent: #70c7ff; --wb-select: #193d5f; --wb-input: #081827; --wb-row: #0c2033; --wb-row-alt: #0a1b2b; --wb-grid-minor: #1c3852; --wb-grid-major: #4578a8; --wb-reference: #70c7ff; } .workbench-density-tiny { --wb-control-h: 20px; --wb-row-h: 18px; --wb-top-h: 30px; --wb-pad: 3px; } .workbench-density-comfy { --wb-control-h: 29px; --wb-row-h: 26px; --wb-top-h: 40px; --wb-pad: 7px; } .workbench-round { --wb-radius: 6px; --wb-control-radius: 5px; } /* Workbench v0.4 module: 01-base-layout.css */ /* -------------------------------------------------------------------------- 3. Scoped base -------------------------------------------------------------------------- */ .workbench *, .workbench *::before, .workbench *::after { box-sizing: border-box; } .workbench button, .workbench input, .workbench select, .workbench textarea { font: inherit; } .workbench button, .workbench .wb-btn, .workbench select { min-height: var(--wb-control-h); border: 1px solid var(--wb-line-2); background: var(--wb-panel-2); color: var(--wb-text); border-radius: var(--wb-control-radius); padding: 3px 7px; cursor: pointer; line-height: 1.2; } .workbench button:hover, .workbench .wb-btn:hover, .workbench select:hover { border-color: var(--wb-accent); } .workbench button:focus-visible, .workbench .wb-btn:focus-visible, .workbench input:focus-visible, .workbench select:focus-visible, .workbench textarea:focus-visible { outline: 1px solid var(--wb-focus); outline-offset: -1px; } .workbench button:disabled, .workbench .wb-btn:disabled, .workbench select:disabled, .workbench input:disabled, .workbench textarea:disabled, .workbench .wb-disabled { opacity: .45; cursor: not-allowed; } .workbench .wb-primary, .workbench button.wb-primary { border-color: var(--wb-accent); } .workbench .wb-danger, .workbench button.wb-danger { border-color: color-mix(in srgb, var(--wb-bad) 70%, var(--wb-line)); color: var(--wb-bad); } .workbench .wb-active, .workbench button.wb-active, .workbench .wb-tab.wb-active { outline: 1px solid var(--wb-accent); outline-offset: -2px; background: var(--wb-select); border-color: var(--wb-accent); color: var(--wb-text); } .workbench input, .workbench textarea, .workbench select { border: 1px solid var(--wb-line-2); background: var(--wb-input); color: var(--wb-text); border-radius: var(--wb-control-radius); padding: 3px 6px; } .workbench input, .workbench select { min-height: calc(var(--wb-control-h) - 1px); } .workbench input[type="color"] { padding: 0; min-width: 32px; } .workbench input[type="checkbox"], .workbench input[type="radio"] { min-height: 0; width: auto; } .workbench textarea { min-height: 90px; resize: vertical; font-family: var(--wb-mono); font-size: 12px; line-height: 1.35; } .workbench label { color: var(--wb-muted); } .workbench hr { border: 0; border-top: 1px solid var(--wb-line); margin: 8px 0; } .workbench code, .workbench pre, .workbench .wb-mono { font-family: var(--wb-mono); } .workbench pre { margin: 0; white-space: pre-wrap; } /* -------------------------------------------------------------------------- 4. Layouts -------------------------------------------------------------------------- */ .wb-app { min-height: 100vh; background: var(--wb-bg); color: var(--wb-text); } .wb-fill, .wb-fill .wb-app, .wb-app.wb-fill { width: 100%; height: 100vh; overflow: hidden; } .wb-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: var(--wb-top-h) minmax(0, 1fr); } .wb-main { min-height: 0; min-width: 0; display: grid; grid-template-columns: var(--wb-left-w) minmax(360px, 1fr) var(--wb-right-w); } .wb-main.wb-with-splitters { grid-template-columns: var(--wb-left-w) var(--wb-split) minmax(360px, 1fr) var(--wb-split) var(--wb-right-w); } .wb-main-2 { min-height: 0; display: grid; grid-template-columns: var(--wb-left-w) minmax(360px, 1fr); } .wb-static { max-width: 1080px; margin: 0 auto; padding: 18px; } .wb-doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px; } .wb-left, .wb-right, .wb-panel, .wb-center { min-height: 0; min-width: 0; } .wb-left, .wb-right, .wb-panel { background: var(--wb-panel); box-shadow: var(--wb-shadow); } .wb-left { border-right: 1px solid var(--wb-line); } .wb-right { border-left: 1px solid var(--wb-line); min-width: var(--wb-right-min-w); } .wb-center { background: var(--wb-bg); } .wb-stack { display: grid; gap: var(--wb-gap); } .wb-flex { display: flex; gap: var(--wb-gap); align-items: center; } .wb-scroll { overflow: auto; min-height: 0; } .wb-hidden { display: none !important; } .wb-spacer { flex: 1 1 auto; min-width: 8px; } /* Workbench v0.4 module: 02-shell-atoms-forms.css */ /* -------------------------------------------------------------------------- 5. Shell components -------------------------------------------------------------------------- */ .wb-top { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; padding: 5px 8px; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel); box-shadow: var(--wb-shadow); } .wb-brand { font-weight: 750; color: var(--wb-text); white-space: nowrap; margin-right: 8px; } .wb-brand span { color: var(--wb-accent); } .wb-brand em { font-style: normal; color: var(--wb-muted); font-weight: 650; margin-left: 4px; font-size: 11px; } .wb-top-label { color: var(--wb-muted); font-size: 10px; white-space: nowrap; } .wb-head { padding: var(--wb-pad); border-bottom: 1px solid var(--wb-line); background: var(--wb-panel-2); } .wb-title, .wb-section-title, .wb-kicker { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-muted); } .wb-subtitle, .wb-sub { font-size: 11px; color: var(--wb-muted); margin-top: 2px; line-height: 1.25; } .wb-body { padding: var(--wb-pad); overflow: auto; min-height: 0; } .wb-section { background: var(--wb-panel); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); padding: var(--wb-pad); margin-bottom: 6px; } .wb-section > h2, .wb-section-title { margin: 0 0 6px; padding: 0 0 5px; border-bottom: 1px solid var(--wb-line); } .wb-card { border: 1px solid var(--wb-line); background: var(--wb-panel); padding: 8px; border-radius: var(--wb-radius); } .wb-card.wb-card-hot { border-color: color-mix(in srgb, var(--wb-accent) 70%, var(--wb-line)); box-shadow: inset 2px 0 0 var(--wb-accent); } /* -------------------------------------------------------------------------- 6. Text/status atoms -------------------------------------------------------------------------- */ .wb-small { font-size: 11px; color: var(--wb-muted); } .wb-micro { font-size: 10px; color: var(--wb-muted); } .wb-muted { color: var(--wb-muted); } .wb-good { color: var(--wb-good); } .wb-warn { color: var(--wb-warn); } .wb-bad { color: var(--wb-bad); } .wb-info { color: var(--wb-info); } .wb-accent { color: var(--wb-accent); } .wb-strong { font-weight: 750; color: var(--wb-text); } .wb-pill, .wb-chip, .wb-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 360px; min-height: 18px; padding: 2px 6px; border: 1px solid var(--wb-line); border-radius: var(--wb-control-radius); background: var(--wb-panel-2); color: var(--wb-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-chip { min-width: 30px; justify-content: center; height: 16px; padding: 1px 4px; border-color: var(--wb-line-2); background: var(--wb-input); font-size: 10px; } .wb-badge { font-size: 10px; } .wb-pill.wb-version { color: var(--wb-accent); border-color: color-mix(in srgb, var(--wb-accent) 70%, var(--wb-line)); } .wb-pill.wb-good { color: var(--wb-good); border-color: color-mix(in srgb, var(--wb-good) 45%, var(--wb-line)); } .wb-pill.wb-warn { color: var(--wb-warn); border-color: color-mix(in srgb, var(--wb-warn) 45%, var(--wb-line)); } .wb-pill.wb-bad { color: var(--wb-bad); border-color: color-mix(in srgb, var(--wb-bad) 45%, var(--wb-line)); } .wb-kbd { display: inline-block; padding: 1px 4px; border: 1px solid var(--wb-line-2); border-bottom-color: var(--wb-line); background: var(--wb-input); color: var(--wb-text); font: 11px/1.2 var(--wb-mono); } .wb-note { color: var(--wb-muted); font-size: 11px; line-height: 1.35; } .wb-callout { border: 1px solid color-mix(in srgb, var(--wb-accent) 42%, var(--wb-line)); background: color-mix(in srgb, var(--wb-accent) 5%, var(--wb-panel)); color: var(--wb-muted); padding: 7px; font-size: 11px; line-height: 1.35; } .wb-code { display: block; overflow: auto; padding: 7px; border: 1px solid var(--wb-line); background: var(--wb-input); color: var(--wb-text); font: 11px/1.45 var(--wb-mono); } .wb-progress { height: 18px; border: 1px solid var(--wb-line); background: var(--wb-input); position: relative; overflow: hidden; } .wb-progress > span { display: block; height: 100%; width: var(--wb-value, 50%); background: color-mix(in srgb, var(--wb-accent) 70%, var(--wb-select)); } /* -------------------------------------------------------------------------- 7. Forms, grids, rows -------------------------------------------------------------------------- */ .wb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 5px 0; } .wb-row.wb-nowrap { flex-wrap: nowrap; } .wb-row > * { min-width: 0; } .wb-full { width: 100%; } .wb-grid { display: grid; grid-template-columns: repeat(var(--wb-cols, 2), minmax(0, 1fr)); gap: 6px; } .wb-field { display: grid; gap: 2px; min-width: 0; } .wb-field label, .wb-field > span { color: var(--wb-muted); font-size: 10px; } .wb-check { display: inline-flex; align-items: center; gap: 4px; color: var(--wb-muted); font-size: 11px; } .wb-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px; min-height: var(--wb-row-h); border: 1px solid transparent; border-radius: var(--wb-radius); background: var(--wb-row); } .wb-entry:nth-child(even) { background: var(--wb-row-alt); } .wb-entry:hover { background: var(--wb-panel-2); border-color: var(--wb-line); } .wb-entry.wb-selected, .wb-entry.wb-active { background: var(--wb-select); border-color: var(--wb-line); box-shadow: inset 2px 0 0 var(--wb-accent); } /* Workbench v0.4 module: 03-data-inspector.css */ /* -------------------------------------------------------------------------- 8. Tabs, tables, trees -------------------------------------------------------------------------- */ .wb-tabs { display: flex; gap: 3px; padding: 6px 7px 0; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel-2); } .wb-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; height: 26px; } .wb-tab.wb-active { border-color: var(--wb-accent); border-bottom-color: var(--wb-panel); background: var(--wb-panel); } .wb-pane { display: none; padding: var(--wb-pad); overflow: auto; min-height: 0; } .wb-pane.wb-active { display: block; } .wb-table { width: 100%; border-collapse: collapse; font-size: 12px; } .wb-table th, .wb-table td { border-bottom: 1px solid var(--wb-line); padding: 3px 6px; text-align: left; white-space: nowrap; } .wb-table th { position: sticky; top: 0; z-index: 1; background: var(--wb-panel-2); color: var(--wb-muted); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; } .wb-table tr:hover td { background: var(--wb-panel-2); } .wb-table tr.wb-selected td { background: var(--wb-select); box-shadow: inset 2px 0 0 var(--wb-accent); } .wb-tree { border: 1px solid var(--wb-line); background: var(--wb-panel); border-radius: var(--wb-radius); overflow: hidden; } .wb-tree-head, .wb-tree-row { display: grid; grid-template-columns: var(--wb-tree-cols, minmax(170px, 1fr) 58px 42px 70px 34px); align-items: center; } .wb-tree-head { min-height: var(--wb-row-h); background: var(--wb-panel-2); color: var(--wb-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--wb-line); } .wb-tree-row { min-height: var(--wb-row-h); border-bottom: 1px solid var(--wb-line); background: var(--wb-row); } .wb-tree-row:nth-child(even) { background: var(--wb-row-alt); } .wb-tree-row:hover { background: var(--wb-panel-2); } .wb-tree-row.wb-selected { background: var(--wb-select); box-shadow: inset 2px 0 0 var(--wb-accent); } .wb-cell { min-width: 0; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--wb-line); } .wb-cell:last-child { border-right: 0; } .wb-tree-name { display: flex; align-items: center; gap: 4px; } .wb-fold { width: 18px; flex: 0 0 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--wb-accent); font-size: 15px; font-weight: 800; } .wb-icon { width: 13px; flex: 0 0 13px; text-align: center; } /* -------------------------------------------------------------------------- 9. Inspector and properties -------------------------------------------------------------------------- */ .wb-inspector { border-top: 1px solid var(--wb-line); font-size: 12px; } .wb-inspector-title-row { display: flex; align-items: center; gap: 5px; min-height: 23px; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel-2); padding: 3px 5px; } .wb-inspector-title { font-weight: 650; font-size: 12px; } .wb-muted-note { margin-left: auto; color: var(--wb-muted); font-size: 10px; } .wb-prop-row, .wb-vector-row { display: grid; align-items: center; min-height: 27px; border-bottom: 1px solid var(--wb-line); padding: 2px 0; } .wb-prop-row { grid-template-columns: 74px 1fr; gap: 6px; } .wb-prop-row > label, .wb-vector-label { color: var(--wb-muted); font-size: 11px; padding-left: 5px; } .wb-vector-row { grid-template-columns: 74px 1fr 1fr 1fr; gap: 4px; } .wb-vector-row label { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 2px; color: var(--wb-muted); font-size: 10px; } .wb-vector-row input, .wb-prop-row input, .wb-prop-row select { min-width: 0; height: 22px; min-height: 22px; padding: 2px 5px; font-size: 12px; } /* Workbench v0.4 module: 04-viewport-tooling.css */ /* -------------------------------------------------------------------------- 10. Viewport/editor module -------------------------------------------------------------------------- */ .wb-viewport { position: relative; min-height: 0; overflow: hidden; background: var(--wb-view-bg); } .wb-viewport-grid::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--wb-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--wb-grid-minor) 1px, transparent 1px); background-size: 32px 32px; opacity: .22; pointer-events: none; } .wb-viewport-grid.wb-grid-major::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--wb-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--wb-grid-major) 1px, transparent 1px); background-size: 128px 128px; opacity: .16; pointer-events: none; } .wb-canvas, .wb-viewport canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: var(--wb-input); border: 1px solid var(--wb-line); } .wb-toolbar-shelf { position: absolute; top: 18px; z-index: 80; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 6px; border: 1px solid var(--wb-line-2); background: color-mix(in srgb, var(--wb-panel) 96%, transparent); box-shadow: 0 8px 20px rgba(0,0,0,.24); backdrop-filter: blur(2px); } .wb-shelf-left { left: 18px; } .wb-shelf-right { right: 18px; } .wb-toolbar-shelf .wb-group { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; min-width: 0; padding-right: 6px; border-right: 1px solid var(--wb-line); } .wb-toolbar-shelf .wb-group:last-child { padding-right: 0; border-right: 0; } .wb-toolbar-shelf button, .wb-toolbar-shelf select { height: 22px; min-height: 22px; max-width: 128px; min-width: 0; font-size: 11px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-toolbar-label { color: var(--wb-muted); font-size: 10px; white-space: nowrap; margin-right: 1px; } .wb-fake-shape { position: absolute; left: 50%; top: 49%; width: 170px; height: 120px; transform: translate(-50%, -50%) skewY(-10deg) rotate(-8deg); border: 2px solid var(--wb-accent); background: color-mix(in srgb, var(--wb-accent) 14%, transparent); box-shadow: 24px -18px 0 color-mix(in srgb, var(--wb-accent) 8%, transparent), 24px -18px 0 2px color-mix(in srgb, var(--wb-accent) 62%, transparent); } .wb-fake-shape::before, .wb-fake-shape::after { content: ""; position: absolute; border: 2px solid var(--wb-muted); background: color-mix(in srgb, var(--wb-muted) 10%, transparent); } .wb-fake-shape::before { width: 85px; height: 72px; left: -115px; top: 24px; transform: skewY(20deg); } .wb-fake-shape::after { width: 78px; height: 108px; right: -120px; top: -7px; border-radius: 99px 99px 6px 6px; } .wb-gizmo { position: absolute; left: 50%; top: 50%; height: 2px; transform-origin: left center; } .wb-gizmo-x { width: 115px; background: var(--wb-axis-x); transform: translate(0,-1px) rotate(-9deg); } .wb-gizmo-y { width: 95px; background: var(--wb-axis-y); transform: translate(0,-1px) rotate(-88deg); } .wb-gizmo-z { width: 105px; background: var(--wb-axis-z); transform: translate(0,-1px) rotate(42deg); } .wb-viewport-foot { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; color: var(--wb-muted); font-size: 11px; } .wb-statusbar { display: grid; grid-template-columns: minmax(220px, 470px) minmax(220px, 1fr); gap: 12px; align-items: center; min-height: 60px; padding: 7px 8px; border-top: 1px solid var(--wb-line); background: var(--wb-panel); overflow: hidden; } .wb-timeline { position: relative; height: 42px; min-width: 0; border: 1px solid var(--wb-line); background: var(--wb-input); overflow: hidden; } .wb-timeline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 23px, var(--wb-line) 23px 24px); opacity: .8; } .wb-playhead { position: absolute; top: 0; bottom: 0; left: var(--wb-playhead, 38%); width: 2px; background: var(--wb-accent); box-shadow: 0 0 6px var(--wb-accent); } /* Workbench v0.4 module: 05-windows-theme-studio.css */ /* -------------------------------------------------------------------------- 11. Splitters, menus, boards -------------------------------------------------------------------------- */ .wb-splitter { position: relative; background: var(--wb-bg); } .wb-splitter.wb-vertical { cursor: col-resize; border-left: 1px solid var(--wb-line); border-right: 1px solid var(--wb-line); } .wb-splitter.wb-horizontal { cursor: row-resize; border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); } .wb-splitter:hover, .wb-splitter.wb-active { background: var(--wb-accent); } .wb-context-menu { position: fixed; z-index: var(--wb-z-menu); min-width: 210px; border: 1px solid var(--wb-line-2); background: var(--wb-panel); box-shadow: 0 12px 28px rgba(0,0,0,.35); padding: 4px; } .wb-menu-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; color: var(--wb-text); font-size: 12px; cursor: pointer; } .wb-menu-item:hover { background: var(--wb-panel-2); } .wb-menu-item.wb-disabled { opacity: .42; pointer-events: none; } .wb-menu-sep { height: 1px; background: var(--wb-line); margin: 4px 1px; } .wb-board { display: grid; grid-template-columns: repeat(var(--wb-board-cols, 4), minmax(180px, 1fr)); gap: 8px; min-width: 0; } .wb-lane { min-width: 0; border: 1px solid var(--wb-line); background: var(--wb-bg); display: flex; flex-direction: column; min-height: 0; } .wb-lane-head { padding: 6px 7px; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel-2); font-size: 11px; font-weight: 750; color: var(--wb-muted); text-transform: uppercase; letter-spacing: .04em; } .wb-board-card { margin: 6px; padding: 7px; border: 1px solid var(--wb-line); background: var(--wb-panel); } .wb-board-card.wb-current { border-color: var(--wb-accent); box-shadow: inset 2px 0 0 var(--wb-accent); } /* -------------------------------------------------------------------------- 12. Window / Overlay system -------------------------------------------------------------------------- */ .wb-overlay { position: fixed; inset: 0; z-index: var(--wb-z-overlay); display: none; background: var(--wb-overlay-bg); } .wb-overlay.wb-open { display: block; } .wb-window { position: absolute; left: 50%; top: 50%; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); transform: translate(-50%, -50%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--wb-window-line); background: var(--wb-window-bg); color: var(--wb-text); box-shadow: var(--wb-window-shadow); min-width: min(420px, calc(100vw - 32px)); } .wb-window-sm { width: min(520px, calc(100vw - 32px)); } .wb-window-md { width: min(760px, calc(100vw - 32px)); } .wb-window-lg { width: min(1040px, calc(100vw - 32px)); } .wb-window-fill { inset: 28px; left: 28px; top: 28px; width: auto; max-height: none; transform: none; } .wb-window-head, .wb-window-foot { display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: var(--wb-window-head); } .wb-window-head { border-bottom: 1px solid var(--wb-line); } .wb-window-foot { border-top: 1px solid var(--wb-line); justify-content: flex-end; } .wb-window-title { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-text); } .wb-window-subtitle { margin-top: 2px; font-size: 10px; color: var(--wb-muted); } .wb-window-body { min-height: 0; overflow: auto; padding: 8px; background: var(--wb-panel); } .wb-window-close { width: 25px; min-width: 25px; padding: 0; font-weight: 750; } .wb-popover { position: absolute; z-index: var(--wb-z-menu); border: 1px solid var(--wb-line-2); background: var(--wb-panel); box-shadow: 0 12px 28px rgba(0,0,0,.35); padding: 4px; } .wb-toast { position: fixed; right: 12px; bottom: 12px; z-index: var(--wb-z-toast); border: 1px solid var(--wb-line-2); background: var(--wb-panel); color: var(--wb-text); padding: 8px 10px; box-shadow: var(--wb-window-shadow); font-size: 12px; } /* -------------------------------------------------------------------------- 13. Theme Studio component -------------------------------------------------------------------------- */ .wb-theme-studio { display: grid; grid-template-columns: 270px minmax(320px, 1fr) 280px; gap: 8px; min-height: 560px; } .wb-theme-token-list { border: 1px solid var(--wb-line); background: var(--wb-input); overflow: auto; min-height: 0; } .wb-theme-token-group { padding: 6px 7px; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel-2); color: var(--wb-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; } .wb-theme-token { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-height: 28px; padding: 3px 6px; border-bottom: 1px solid var(--wb-line); cursor: pointer; } .wb-theme-token:hover { background: var(--wb-panel-2); } .wb-theme-token.wb-selected { background: var(--wb-select); box-shadow: inset 2px 0 0 var(--wb-accent); } .wb-theme-swatch { width: 18px; height: 18px; border: 1px solid var(--wb-line-2); background: var(--wb-panel-2); } .wb-theme-token-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-theme-token-var { color: var(--wb-muted); font: 10px/1.2 var(--wb-mono); } .wb-color-preview { min-height: 86px; border: 1px solid var(--wb-line-2); background: var(--wb-panel-2); display: grid; grid-template-columns: 92px 1fr; align-items: stretch; } .wb-color-big { border-right: 1px solid var(--wb-line); background: var(--wb-accent); } .wb-color-meta { padding: 8px; display: grid; align-content: center; gap: 4px; } .wb-color-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .wb-color-fields .wb-span-3 { grid-column: 1 / -1; } .wb-color-fields .wb-field input { width: 100%; text-transform: uppercase; } .wb-theme-preview-rig { border: 1px solid var(--wb-line); background: var(--wb-bg); padding: 6px; display: grid; gap: 6px; min-height: 0; } .wb-theme-preview-rig .wb-mini-top { min-height: 26px; display: flex; align-items: center; gap: 5px; padding: 3px 5px; border: 1px solid var(--wb-line); background: var(--wb-panel); } .wb-theme-preview-rig .wb-mini-main { display: grid; grid-template-columns: 95px 1fr; gap: 6px; } .wb-theme-preview-rig .wb-mini-cell { border: 1px solid var(--wb-line); background: var(--wb-panel); min-height: 74px; padding: 5px; } .wb-theme-export { min-height: 90px; width: 100%; resize: vertical; } /* Workbench v0.4 module: 06-responsive.css */ /* -------------------------------------------------------------------------- 14. Responsive defaults -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .workbench { --wb-left-w: 220px; --wb-right-w: 320px; --wb-right-min-w: 300px; } .wb-brand { font-size: 11px; } .wb-top button { padding-left: 5px; padding-right: 5px; } .wb-pill { max-width: 190px; } .wb-doc-grid { grid-template-columns: 1fr; } .wb-theme-studio { grid-template-columns: 220px minmax(280px, 1fr); } .wb-theme-studio .wb-theme-preview-col { grid-column: 1 / -1; } } @media (max-width: 760px) { .wb-main, .wb-main.wb-with-splitters, .wb-main-2 { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr) auto; } .wb-splitter { display: none; } .wb-left, .wb-right { border: 0; border-bottom: 1px solid var(--wb-line); min-width: 0; } .wb-toolbar-shelf { position: static; margin: 6px; flex-wrap: wrap; } .wb-statusbar { grid-template-columns: 1fr; } .wb-theme-studio { grid-template-columns: 1fr; } .wb-window { min-width: calc(100vw - 16px); width: calc(100vw - 16px); max-height: calc(100vh - 16px); } .wb-window-fill { inset: 8px; left: 8px; top: 8px; } } /* Workbench v0.4 module: 07-components-v04.css */ /* -------------------------------------------------------------------------- 15. v0.4 component completion layer -------------------------------------------------------------------------- */ .wb-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .wb-cluster { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .wb-cluster.wb-end { justify-content:flex-end; } .wb-stack-xs { display:grid; gap:3px; } .wb-stack-sm { display:grid; gap:6px; } .wb-stack-lg { display:grid; gap:10px; } .wb-divider { height:1px; background:var(--wb-line); margin:6px 0; } .wb-alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:start; border:1px solid var(--wb-line); background:var(--wb-panel); padding:7px; font-size:12px; line-height:1.35; } .wb-alert::before { content:""; width:7px; height:7px; margin-top:5px; background:var(--wb-muted); box-shadow:0 0 0 1px var(--wb-line-2); } .wb-alert-title { font-weight:750; color:var(--wb-text); margin-bottom:2px; } .wb-alert-body { color:var(--wb-muted); } .wb-alert.wb-info { border-color:color-mix(in srgb,var(--wb-info) 65%,var(--wb-line)); background:color-mix(in srgb,var(--wb-info) 6%,var(--wb-panel)); } .wb-alert.wb-info::before { background:var(--wb-info); } .wb-alert.wb-good { border-color:color-mix(in srgb,var(--wb-good) 65%,var(--wb-line)); background:color-mix(in srgb,var(--wb-good) 6%,var(--wb-panel)); } .wb-alert.wb-good::before { background:var(--wb-good); } .wb-alert.wb-warn { border-color:color-mix(in srgb,var(--wb-warn) 65%,var(--wb-line)); background:color-mix(in srgb,var(--wb-warn) 7%,var(--wb-panel)); } .wb-alert.wb-warn::before { background:var(--wb-warn); } .wb-alert.wb-bad { border-color:color-mix(in srgb,var(--wb-bad) 65%,var(--wb-line)); background:color-mix(in srgb,var(--wb-bad) 7%,var(--wb-panel)); } .wb-alert.wb-bad::before { background:var(--wb-bad); } .wb-empty { min-height:140px; display:grid; place-items:center; padding:16px; border:1px dashed var(--wb-line-2); background:color-mix(in srgb,var(--wb-input) 76%,transparent); color:var(--wb-muted); text-align:center; } .wb-empty-icon { font-size:24px; color:var(--wb-accent); line-height:1; margin-bottom:6px; } .wb-empty-title { color:var(--wb-text); font-weight:750; margin-bottom:2px; } .wb-empty-actions { margin-top:8px; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; } .wb-loading-block { min-height:120px; display:grid; place-items:center; gap:8px; border:1px solid var(--wb-line); background:var(--wb-input); color:var(--wb-muted); padding:12px; } .wb-spinner { width:22px; height:22px; border:2px solid var(--wb-line-2); border-top-color:var(--wb-accent); border-radius:50%; animation:wb-spin .8s linear infinite; } @keyframes wb-spin { to { transform:rotate(360deg); } } .wb-skeleton { display:grid; gap:5px; width:100%; } .wb-skeleton span { display:block; height:12px; border:1px solid var(--wb-line); background:linear-gradient(90deg,var(--wb-input),var(--wb-panel-2),var(--wb-input)); background-size:180% 100%; animation:wb-shimmer 1.2s linear infinite; } .wb-skeleton span:nth-child(2) { width:72%; } .wb-skeleton span:nth-child(3) { width:48%; } @keyframes wb-shimmer { to { background-position:-180% 0; } } .wb-progress.wb-labeled { height:22px; } .wb-progress-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--wb-text); font:10px/1.1 var(--wb-mono); text-shadow:0 1px 2px rgba(0,0,0,.55); } .wb-meter { display:grid; gap:3px; } .wb-meter-head { display:flex; justify-content:space-between; gap:8px; color:var(--wb-muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; } .wb-toast-stack { position:fixed; right:12px; bottom:12px; z-index:var(--wb-z-toast); display:grid; gap:6px; width:min(360px,calc(100vw - 24px)); pointer-events:none; } .wb-toast-stack .wb-toast { position:relative; right:auto; bottom:auto; pointer-events:auto; } .wb-toast { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; min-width:240px; } .wb-toast.wb-good { border-color:color-mix(in srgb,var(--wb-good) 65%,var(--wb-line)); } .wb-toast.wb-warn { border-color:color-mix(in srgb,var(--wb-warn) 70%,var(--wb-line)); } .wb-toast.wb-bad { border-color:color-mix(in srgb,var(--wb-bad) 70%,var(--wb-line)); } .wb-toast-close { height:20px; min-height:20px; width:20px; padding:0; } .wb-command-palette { display:grid; gap:7px; } .wb-command-search { display:grid; grid-template-columns:1fr auto; gap:6px; } .wb-command-list { border:1px solid var(--wb-line); background:var(--wb-input); max-height:340px; overflow:auto; } .wb-command-item { width:100%; min-height:31px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:7px; align-items:center; padding:5px 7px; border:0; border-bottom:1px solid var(--wb-line); background:transparent; color:var(--wb-text); text-align:left; } .wb-command-item:hover, .wb-command-item.wb-active { background:var(--wb-select); box-shadow:inset 2px 0 0 var(--wb-accent); } .wb-command-item small { color:var(--wb-muted); display:block; font-size:10px; margin-top:1px; } .wb-command-empty { padding:10px; color:var(--wb-muted); font-size:11px; } .wb-dock-layout { min-height:0; display:grid; grid-template-columns:48px minmax(0,1fr); border:1px solid var(--wb-line); background:var(--wb-bg); } .wb-dock-rail { background:var(--wb-panel); border-right:1px solid var(--wb-line); display:grid; align-content:start; gap:4px; padding:4px; } .wb-dock-tab { width:100%; height:36px; padding:0; display:grid; place-items:center; color:var(--wb-muted); } .wb-dock-tab.wb-active { color:var(--wb-text); border-color:var(--wb-accent); background:var(--wb-select); outline:0; } .wb-dock-panel { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--wb-panel); } .wb-dock-panel-head { display:flex; align-items:center; gap:6px; min-height:30px; border-bottom:1px solid var(--wb-line); background:var(--wb-panel-2); padding:5px 7px; } .wb-dock-panel-body { min-height:0; overflow:auto; padding:7px; } .wb-dock-strip { display:flex; gap:3px; padding:4px; border-bottom:1px solid var(--wb-line); background:var(--wb-panel-2); } .wb-dock-strip .wb-tab { min-height:23px; } .wb-dropzone { display:grid; place-items:center; gap:6px; min-height:132px; border:1px dashed var(--wb-line-2); background:color-mix(in srgb,var(--wb-accent) 4%,var(--wb-input)); color:var(--wb-muted); text-align:center; padding:14px; cursor:pointer; } .wb-dropzone:hover, .wb-dropzone.wb-dragover { border-color:var(--wb-accent); background:color-mix(in srgb,var(--wb-accent) 8%,var(--wb-input)); } .wb-dropzone strong { color:var(--wb-text); } .wb-dropzone input[type=file] { display:none; } .wb-asset-list { display:grid; gap:5px; } .wb-asset-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:7px; align-items:center; padding:6px; border:1px solid var(--wb-line); background:var(--wb-row); min-height:48px; } .wb-asset-item:hover { background:var(--wb-panel-2); border-color:var(--wb-line-2); } .wb-asset-item.wb-selected { background:var(--wb-select); box-shadow:inset 2px 0 0 var(--wb-accent); } .wb-thumb { width:40px; height:32px; display:grid; place-items:center; border:1px solid var(--wb-line-2); background:var(--wb-input); color:var(--wb-accent); font:10px/1 var(--wb-mono); overflow:hidden; } .wb-thumb img { max-width:100%; max-height:100%; display:block; } .wb-asset-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--wb-text); font-weight:650; } .wb-asset-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--wb-muted); font:10px/1.25 var(--wb-mono); } .wb-shortcut-table { display:grid; border:1px solid var(--wb-line); background:var(--wb-input); } .wb-shortcut-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; min-height:28px; padding:4px 6px; border-bottom:1px solid var(--wb-line); } .wb-shortcut-row:last-child { border-bottom:0; } .wb-shortcut-row span:first-child { color:var(--wb-muted); } .wb-kbd-group { display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; } .wb-tooltip-host { position:relative; } .wb-tooltip { position:absolute; z-index:var(--wb-z-menu); bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); min-width:160px; max-width:260px; display:none; padding:5px 6px; border:1px solid var(--wb-line-2); background:var(--wb-panel); color:var(--wb-muted); box-shadow:0 8px 20px rgba(0,0,0,.28); font-size:11px; line-height:1.3; } .wb-tooltip-host:hover .wb-tooltip, .wb-tooltip-host:focus-within .wb-tooltip { display:block; } .wb-popover-card { width:min(320px,calc(100vw - 24px)); padding:7px; display:grid; gap:6px; } .wb-code-block { border:1px solid var(--wb-line); background:var(--wb-input); display:grid; grid-template-rows:auto minmax(0,1fr); } .wb-code-head { min-height:26px; display:flex; align-items:center; gap:6px; padding:4px 6px; border-bottom:1px solid var(--wb-line); background:var(--wb-panel-2); color:var(--wb-muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; } .wb-code-block pre { margin:0; padding:8px; overflow:auto; color:var(--wb-text); font:11px/1.45 var(--wb-mono); } .wb-inline-code { font:11px/1.2 var(--wb-mono); background:var(--wb-input); border:1px solid var(--wb-line); padding:1px 4px; color:var(--wb-text); } .wb-stepper { display:grid; grid-template-columns:repeat(var(--wb-steps,4), minmax(0,1fr)); gap:4px; } .wb-step { min-height:32px; display:grid; align-content:center; gap:1px; padding:5px 6px; border:1px solid var(--wb-line); background:var(--wb-input); color:var(--wb-muted); } .wb-step.wb-done { border-color:color-mix(in srgb,var(--wb-good) 60%,var(--wb-line)); color:var(--wb-good); } .wb-step.wb-active { border-color:var(--wb-accent); background:var(--wb-select); color:var(--wb-text); box-shadow:inset 2px 0 0 var(--wb-accent); } .wb-step-title { font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:750; } .wb-step-sub { font-size:10px; } .wb-print-tools { display:flex; justify-content:flex-end; gap:6px; margin-bottom:8px; } .wb-print-page { max-width:860px; margin:0 auto; padding:18px; border:1px solid var(--wb-line); background:var(--wb-panel); } .wb-print-page h1 { margin-top:0; } .wb-print-page p, .wb-print-page li { line-height:1.55; } @media (prefers-reduced-motion: reduce) { .wb-spinner, .wb-skeleton span { animation:none; } } @media print { .workbench { background:white!important; color:#111!important; overflow:visible!important; font:11pt/1.45 Georgia,serif!important; } .wb-top, .wb-left, .wb-right, .wb-toolbar-shelf, .wb-window, .wb-overlay, .wb-preview-shell > .wb-top, .wb-print-tools { display:none!important; } .wb-demo-stage, .wb-demo-page, .wb-demo-page-scroll, .wb-doc-page, .wb-print-page { display:block!important; height:auto!important; overflow:visible!important; max-width:none!important; padding:0!important; border:0!important; background:white!important; color:#111!important; } .wb-section, .wb-card, .wb-callout { border:1px solid #ccc!important; background:white!important; color:#111!important; box-shadow:none!important; } a { color:#111!important; text-decoration:underline; } } /* Workbench v0.4.1 module: 08-interaction-sizing.css */ /* -------------------------------------------------------------------------- Interaction chrome: scrollbars, splitters, handles, grips, and dynamic sizing -------------------------------------------------------------------------- */ .workbench { /* Dynamic layout constraints */ --wb-left-min-w: 180px; --wb-left-max-w: 460px; --wb-right-min-w: 300px; --wb-right-max-w: 580px; --wb-center-min-w: 360px; --wb-context-min-h: 120px; --wb-context-max-h: 560px; --wb-panel-min-w: 180px; --wb-panel-min-h: 120px; --wb-window-min-w: 380px; --wb-window-min-h: 220px; --wb-card-min: 220px; /* Scrollbars */ --wb-scrollbar-size: 10px; --wb-scrollbar-thin-size: 8px; --wb-scrollbar-track: var(--wb-input); --wb-scrollbar-thumb: color-mix(in srgb, var(--wb-line-2) 76%, var(--wb-panel)); --wb-scrollbar-thumb-hover: color-mix(in srgb, var(--wb-accent) 70%, var(--wb-line-2)); --wb-scrollbar-corner: var(--wb-bg); /* Handles + resize chrome */ --wb-handle-size: 14px; --wb-handle-hit: 12px; --wb-handle-line: var(--wb-line-2); --wb-handle-fill: var(--wb-panel-2); --wb-handle-active: var(--wb-accent); --wb-grip-size: 18px; --wb-resize-hit: 12px; --wb-splitter-bg: var(--wb-bg); --wb-resize-grip: color-mix(in srgb, var(--wb-muted) 78%, transparent); --wb-resize-grip-active: var(--wb-accent); --wb-grip-color: var(--wb-resize-grip); --wb-grip-color-hot: var(--wb-resize-grip-active); --wb-resize-outline: color-mix(in srgb, var(--wb-accent) 82%, transparent); } /* Scrollbars are part of the Workbench surface language. */ .workbench, .workbench * { scrollbar-color: var(--wb-scrollbar-thumb) var(--wb-scrollbar-track); scrollbar-width: thin; } .workbench::-webkit-scrollbar, .workbench *::-webkit-scrollbar { width: var(--wb-scrollbar-size); height: var(--wb-scrollbar-size); } .workbench::-webkit-scrollbar-track, .workbench *::-webkit-scrollbar-track { background: var(--wb-scrollbar-track); border-left: 1px solid color-mix(in srgb, var(--wb-line) 70%, transparent); } .workbench::-webkit-scrollbar-thumb, .workbench *::-webkit-scrollbar-thumb { background: var(--wb-scrollbar-thumb); border: 2px solid var(--wb-scrollbar-track); border-radius: 0; min-height: 28px; min-width: 28px; } .workbench::-webkit-scrollbar-thumb:hover, .workbench *::-webkit-scrollbar-thumb:hover { background: var(--wb-scrollbar-thumb-hover); } .workbench::-webkit-scrollbar-corner, .workbench *::-webkit-scrollbar-corner { background: var(--wb-scrollbar-corner); } .workbench *::-webkit-resizer { background: linear-gradient(135deg, transparent 0 44%, var(--wb-line-2) 45% 52%, transparent 53% 62%, var(--wb-line-2) 63% 70%, transparent 71%); } .wb-scroll, .wb-scroll-auto, .wb-scroll-both, .wb-scrollbar-both { overflow: auto; min-width: 0; min-height: 0; } .wb-scroll-y, .wb-scrollbar-y { overflow-y: auto; overflow-x: hidden; min-height: 0; } .wb-scroll-x, .wb-scrollbar-x { overflow-x: auto; overflow-y: hidden; min-width: 0; } .wb-scroll-stable { scrollbar-gutter: stable; } .wb-scroll-thin, .wb-scrollbar-thin { --wb-scrollbar-size: var(--wb-scrollbar-thin-size); } .wb-no-scrollbar, .wb-scrollbar-none { scrollbar-width: none; } .wb-no-scrollbar::-webkit-scrollbar, .wb-scrollbar-none::-webkit-scrollbar { display: none; width: 0; height: 0; } .wb-scroll-frame { border: 1px solid var(--wb-line); background: var(--wb-input); } .wb-overflow-fade { position: relative; } .wb-overflow-fade::after { content:""; position: sticky; display: block; bottom: 0; height: 18px; margin-top: -18px; pointer-events: none; background: linear-gradient(transparent, var(--wb-panel)); } /* Dynamic sizing contract. These utilities prevent grid/flex overflow bugs. */ .wb-min-0 { min-width: 0 !important; min-height: 0 !important; } .wb-min-w-0 { min-width: 0 !important; } .wb-min-h-0 { min-height: 0 !important; } .wb-size-fill, .wb-fill-cell { width: 100%; height: 100%; min-width: 0; min-height: 0; } .wb-fill-x { width: 100%; min-width: 0; } .wb-fill-y { height: 100%; min-height: 0; } .wb-clip { overflow: hidden; min-width: 0; min-height: 0; } .wb-overflow-safe { overflow: auto; min-width: 0; min-height: 0; } .wb-ellipsis, .wb-clamp-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wb-contain-size { contain: layout style size; } .wb-resize-scope, [data-wb-resize-scope], [data-wb-size-root] { min-width: 0; min-height: 0; } .wb-resize-readout, .wb-size-readout { font: 10px/1.25 var(--wb-mono); color: var(--wb-muted); border: 1px solid var(--wb-line); background: var(--wb-input); padding: 3px 5px; } .wb-adaptive-grid, .wb-fluid-grid, .wb-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wb-card-min)), 1fr)); gap: var(--wb-gap); min-width: 0; } .wb-fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: var(--wb-gap); align-items: start; } .wb-fluid-row, .wb-fit-row { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--wb-gap); align-items: center; } .wb-fluid-row > *, .wb-fit-row > * { min-width: 0; } .wb-fluid-col { display: grid; min-height: 0; gap: var(--wb-gap); } .wb-size-sm { --wb-card-min: 160px; max-width: 520px; } .wb-size-md { --wb-card-min: 220px; max-width: 760px; } .wb-size-lg { --wb-card-min: 300px; max-width: 1040px; } .wb-size-readable { max-width: 860px; } /* ResizeObserver helper classes. JS toggles these from data-wb-resize-observe. */ .wb-size-narrow { --wb-observed-mode: narrow; } .wb-size-compact { --wb-observed-density: compact; } .wb-size-short { --wb-observed-height-mode: short; } .wb-size-narrow .wb-hide-when-narrow, .wb-size-compact .wb-hide-when-compact, .wb-size-short .wb-hide-when-short { display:none !important; } .wb-size-narrow .wb-stack-when-narrow { grid-template-columns:1fr !important; flex-direction:column !important; align-items:stretch !important; } /* Splitter-driven app grids. */ .wb-main.wb-dynamic, .wb-dynamic-shell { grid-template-columns: clamp(var(--wb-left-min-w), var(--wb-left-w), var(--wb-left-max-w)) var(--wb-split) minmax(var(--wb-center-min-w), 1fr) var(--wb-split) clamp(var(--wb-right-min-w), var(--wb-right-w), var(--wb-right-max-w)); } .wb-main-2.wb-dynamic { grid-template-columns: clamp(var(--wb-left-min-w), var(--wb-left-w), var(--wb-left-max-w)) minmax(var(--wb-center-min-w), 1fr); } .wb-panel-stack { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); } .wb-panel-stack.wb-with-context { grid-template-rows: minmax(0, 1fr) var(--wb-split) clamp(var(--wb-context-min-h), var(--wb-context-h), var(--wb-context-max-h)); } .wb-size-contract { --wb-left-w: clamp(var(--wb-left-min-w), 24vw, var(--wb-left-max-w)); --wb-right-w: clamp(var(--wb-right-min-w), 28vw, var(--wb-right-max-w)); --wb-context-h: clamp(var(--wb-context-min-h), 30vh, var(--wb-context-max-h)); } .wb-collapse-left { --wb-left-w: 0px; --wb-left-min-w: 0px; } .wb-collapse-right { --wb-right-w: 0px; --wb-right-min-w: 0px; } .wb-collapse-context { --wb-context-h: 0px; --wb-context-min-h: 0px; } /* Resizing state. JS sets these while splitters/handles are active. */ .workbench.wb-is-resizing, .workbench.wb-is-resizing *, body.wb-is-resizing, body.wb-is-resizing * { user-select: none !important; } .workbench.wb-resize-x, .workbench.wb-resize-x *, body.wb-resize-x, body.wb-resize-x *, body.wb-resizing-x, body.wb-resizing-x * { cursor: col-resize !important; } .workbench.wb-resize-y, .workbench.wb-resize-y *, body.wb-resize-y, body.wb-resize-y *, body.wb-resizing-y, body.wb-resizing-y * { cursor: row-resize !important; } .workbench.wb-resize-both, .workbench.wb-resize-both *, body.wb-resize-both, body.wb-resize-both *, body.wb-resize-diag, body.wb-resize-diag * { cursor: nwse-resize !important; } /* Splitter bars. Use data-wb-splitter / data-wb-resize-var for behavior; classes are visual. */ .wb-splitter, .workbench .splitter { position: relative; z-index: 2; display: block; flex: 0 0 var(--wb-split); padding: 0; border: 0; background: var(--wb-splitter-bg, var(--wb-bg)); color: var(--wb-muted); touch-action: none; user-select: none; isolation: isolate; } .wb-splitter.wb-vertical, .workbench .splitter.vertical { width: var(--wb-split); min-width: var(--wb-split); cursor: col-resize; border-left: 1px solid var(--wb-line); border-right: 1px solid var(--wb-line); } .wb-splitter.wb-horizontal, .workbench .splitter.horizontal { height: var(--wb-split); min-height: var(--wb-split); cursor: row-resize; border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); } .wb-splitter::before, .workbench .splitter::before { content:""; position:absolute; inset:0; margin:auto; opacity:.58; background:var(--wb-resize-grip); pointer-events:none; } .wb-splitter.wb-vertical::before, .workbench .splitter.vertical::before { width:2px; height:40px; } .wb-splitter.wb-horizontal::before, .workbench .splitter.horizontal::before { width:40px; height:2px; } .wb-splitter::after, .workbench .splitter::after { content:""; position:absolute; inset:calc(var(--wb-resize-hit) * -0.5); background:color-mix(in srgb, var(--wb-accent) 10%, transparent); opacity:0; z-index:-1; } .wb-splitter:hover, .wb-splitter.wb-active, .workbench .splitter:hover, .workbench .splitter.active { background: color-mix(in srgb, var(--wb-accent) 18%, var(--wb-bg)); } .wb-splitter:hover::before, .wb-splitter.wb-active::before, .workbench .splitter:hover::before, .workbench .splitter.active::before { background: var(--wb-resize-grip-active); opacity:1; } .wb-splitter:hover::after, .wb-splitter.wb-active::after, .workbench .splitter:hover::after, .workbench .splitter.active::after { opacity:1; } .wb-splitter[aria-disabled="true"], .wb-splitter.wb-disabled { opacity:.35; cursor:not-allowed; pointer-events:none; } /* General drag and grip affordances. */ .wb-drag-handle, [data-wb-drag-handle] { cursor: grab; touch-action: none; } .wb-drag-handle:active, [data-wb-drag-handle]:active, .wb-dragging .wb-drag-handle { cursor: grabbing; } .wb-grip, .wb-drag-handle, [data-wb-drag-handle] { position:relative; display:inline-grid; place-items:center; width:var(--wb-grip-size); min-width:var(--wb-grip-size); height:var(--wb-control-h); color:var(--wb-muted); vertical-align:middle; } .wb-grip::before, .wb-drag-handle::before, [data-wb-drag-handle]::before { content:""; width:10px; height:14px; background:radial-gradient(circle, currentColor 1.15px, transparent 1.25px) 0 0 / 5px 5px; opacity:.7; } .wb-grip:hover, .wb-drag-handle:hover, [data-wb-drag-handle]:hover { color:var(--wb-accent); } .wb-grip-line { display:inline-block; width:20px; height:2px; background:var(--wb-resize-grip); vertical-align:middle; } .wb-grip-dots { display:inline-block; width:18px; height:12px; background:radial-gradient(circle, var(--wb-resize-grip) 1.15px, transparent 1.25px) 0 0 / 5px 5px; opacity:.8; } .wb-dragging, .wb-dragging * { cursor: grabbing !important; user-select: none !important; } .wb-drag-ghost { opacity:.45; } .wb-drop-before::before, .wb-drop-after::after { content:""; position:absolute; left:0; right:0; height:2px; background:var(--wb-accent); pointer-events:none; } .wb-drop-before::before { top:0; } .wb-drop-after::after { bottom:0; } .wb-drop-target { box-shadow:inset 3px 0 0 var(--wb-accent); background:var(--wb-panel-2); } /* Column resize strips. */ .wb-tree.wb-tree-resizable .wb-tree-head, .wb-tree.wb-tree-resizable .wb-tree-row { grid-template-columns: var(--wb-tree-name) var(--wb-tree-type) var(--wb-tree-mode) var(--wb-tree-flags) var(--wb-tree-h); } .wb-col-head, .wb-tree-col-head, .tree-col-head { position:relative; height:100%; display:flex; align-items:center; min-width:0; } .wb-tree-col-head > span:first-child, .wb-col-head > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; } .wb-col-resize, .wb-tree-col-resize, .workbench .col-resize { position:absolute; top:0; right:-4px; width:var(--wb-resize-hit); height:100%; cursor:col-resize; z-index:4; touch-action:none; } .wb-col-resize::before, .wb-tree-col-resize::before, .workbench .col-resize::before { content:""; position:absolute; inset:0 -3px; } .wb-col-resize::after, .wb-tree-col-resize::after, .workbench .col-resize::after { content:""; position:absolute; top:4px; bottom:4px; left:50%; width:1px; transform:translateX(-.5px); background:transparent; } .wb-col-resize:hover::after, .wb-col-resize.wb-active::after, .wb-tree-col-resize:hover::after, .wb-tree-col-resize.wb-active::after, .workbench .col-resize:hover::after, .workbench .col-resize.active::after { background:var(--wb-resize-grip-active); } body.wb-column-resizing, body.wb-column-resizing *, body.column-resizing, body.column-resizing * { cursor:col-resize !important; user-select:none !important; } /* Native and JS-friendly resize boxes. */ .wb-resizable, .wb-resizable-both, .wb-resizable-x, .wb-resizable-y, .wb-resize-box, [data-wb-resizable] { position:relative; overflow:auto; min-width:min(var(--wb-panel-min-w), 100%); min-height:var(--wb-panel-min-h); max-width:100%; max-height:100%; } .wb-resizable, .wb-resizable-both { resize: both; } .wb-resizable-x { resize: horizontal; } .wb-resizable-y { resize: vertical; } .wb-resizable-native { resize: both; overflow:auto; } .wb-resize-box { resize: vertical; } .wb-resize-grip, .wb-resize-corner { position:absolute; right:1px; bottom:1px; width:var(--wb-resize-hit); height:var(--wb-resize-hit); pointer-events:none; color:var(--wb-muted); } .wb-resize-grip::before, .wb-resize-corner::before { content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.8; } .wb-resize-box:hover > .wb-resize-grip, .wb-resizable:hover::after { color:var(--wb-accent); } .wb-resizable::after, .wb-resizable-both::after, .wb-resizable-x::after, .wb-resizable-y::after, .wb-resize-corner::before { content:""; position:absolute; right:2px; bottom:2px; width:16px; height:16px; pointer-events:none; opacity:.74; background:linear-gradient(135deg, transparent 0 44%, var(--wb-resize-grip) 45% 50%, transparent 51%), linear-gradient(135deg, transparent 0 62%, var(--wb-resize-grip) 63% 68%, transparent 69%), linear-gradient(135deg, transparent 0 80%, var(--wb-resize-grip) 81% 86%, transparent 87%); } .wb-resizable:hover::after, .wb-resizable-both:hover::after, .wb-resizable-x:hover::after, .wb-resizable-y:hover::after { opacity:1; filter:drop-shadow(0 0 2px var(--wb-accent)); } /* JS resize handles. Attribute with no value is reserved for splitters; directional values are absolute grips. */ [data-wb-resize-handle="e"], [data-wb-resize-handle="w"], [data-wb-resize-handle="s"], [data-wb-resize-handle="n"], [data-wb-resize-handle="se"], [data-wb-resize-handle="sw"], [data-wb-resize-handle="ne"], [data-wb-resize-handle="nw"] { position:absolute; z-index:20; touch-action:none; user-select:none; } [data-wb-resize-handle="e"] { top:0; right:calc(var(--wb-resize-hit) * -.5); width:var(--wb-resize-hit); height:100%; cursor:ew-resize; } [data-wb-resize-handle="w"] { top:0; left:calc(var(--wb-resize-hit) * -.5); width:var(--wb-resize-hit); height:100%; cursor:ew-resize; } [data-wb-resize-handle="s"] { left:0; bottom:calc(var(--wb-resize-hit) * -.5); width:100%; height:var(--wb-resize-hit); cursor:ns-resize; } [data-wb-resize-handle="n"] { left:0; top:calc(var(--wb-resize-hit) * -.5); width:100%; height:var(--wb-resize-hit); cursor:ns-resize; } [data-wb-resize-handle="se"], [data-wb-resize-handle="sw"], [data-wb-resize-handle="ne"], [data-wb-resize-handle="nw"] { width:18px; height:18px; cursor:nwse-resize; } [data-wb-resize-handle="se"] { right:0; bottom:0; } [data-wb-resize-handle="sw"] { left:0; bottom:0; cursor:nesw-resize; } [data-wb-resize-handle="ne"] { right:0; top:0; cursor:nesw-resize; } [data-wb-resize-handle="nw"] { left:0; top:0; } [data-wb-resize-handle="se"]::before, [data-wb-resize-handle="sw"]::before, [data-wb-resize-handle="ne"]::before, [data-wb-resize-handle="nw"]::before { content:""; position:absolute; right:4px; bottom:4px; width:10px; height:10px; border-right:2px solid var(--wb-resize-grip); border-bottom:2px solid var(--wb-resize-grip); } [data-wb-resize-handle="se"]:hover::before, [data-wb-resize-handle="sw"]:hover::before, [data-wb-resize-handle="ne"]:hover::before, [data-wb-resize-handle="nw"]:hover::before, [data-wb-resize-handle="se"].wb-active::before, [data-wb-resize-handle="sw"].wb-active::before, [data-wb-resize-handle="ne"].wb-active::before, [data-wb-resize-handle="nw"].wb-active::before { border-color:var(--wb-resize-grip-active); } .wb-resizing-target { outline:1px solid var(--wb-resize-outline); outline-offset:-1px; } /* Window resize and drag affordances. */ .wb-window { min-width:min(240px, calc(100vw - 24px)); min-height:120px; } .wb-window.wb-resizable, .wb-window.wb-window-resizable { resize:none; overflow:hidden; min-width:min(var(--wb-window-min-w), calc(100vw - 24px)); min-height:min(var(--wb-window-min-h), calc(100vh - 24px)); } .wb-window.wb-resizable .wb-window-body, .wb-window.wb-window-resizable .wb-window-body { overflow:auto; } .wb-window-grip, .wb-window-resize, .wb-window-resize-grip { position:absolute; z-index:4; touch-action:none; } .wb-window-grip-e { top:32px; right:-5px; width:10px; bottom:18px; cursor:ew-resize; } .wb-window-grip-s { left:18px; right:18px; bottom:-5px; height:10px; cursor:ns-resize; } .wb-window-grip-se, .wb-window-resize, .wb-window-resize-grip { right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; } .wb-window-grip-se::before, .wb-window-resize::before, .wb-window-resize-grip::before { content:""; position:absolute; right:4px; bottom:4px; width:10px; height:10px; border-right:2px solid var(--wb-resize-grip); border-bottom:2px solid var(--wb-resize-grip); } .wb-window-grip-se:hover::before, .wb-window-resize:hover::before, .wb-window-resize-grip:hover::before, .wb-window.wb-window-resizing .wb-window-grip-se::before { border-color:var(--wb-resize-grip-active); } .wb-window.wb-window-resizing, .wb-window.wb-window-dragging { outline:1px solid var(--wb-accent); outline-offset:-1px; } .wb-window-head[data-wb-window-drag-handle] { cursor:move; } body.wb-dragging-window, body.wb-dragging-window * { cursor:move !important; user-select:none !important; } /* Viewport/tool handle primitives. App code owns hit testing and transforms. */ .wb-viewport-handles, .wb-handle-layer { position:absolute; inset:0; z-index:90; pointer-events:none; } .wb-handle, .wb-tool-handle, .wb-viewport-handle { position:absolute; left:50%; top:50%; width:var(--wb-handle-size); height:var(--wb-handle-size); min-width:var(--wb-handle-size); min-height:var(--wb-handle-size); padding:0; margin:calc(var(--wb-handle-size) / -2) 0 0 calc(var(--wb-handle-size) / -2); border:1px solid var(--wb-handle-line); background:var(--wb-handle-fill); color:var(--wb-text); pointer-events:auto; cursor:pointer; box-shadow:0 0 0 2px rgba(0,0,0,.28), 0 0 0 var(--wb-handle-hit) transparent; } .wb-handle:hover, .wb-handle.wb-active, .wb-viewport-handle:hover, .wb-viewport-handle.wb-active { border-color:var(--wb-handle-active); color:var(--wb-handle-active); z-index:2; } .wb-handle-round, .wb-handle-point, .wb-handle-dot { border-radius:50%; } .wb-handle-square { border-radius:0; } .wb-handle-diamond { transform:translate(-50%, -50%) rotate(45deg); } .wb-handle-diamond > * { transform:rotate(-45deg); } .wb-handle-axis-x, .wb-handle-x { background:var(--wb-axis-x); border-color:color-mix(in srgb, var(--wb-axis-x) 70%, var(--wb-line)); cursor:ew-resize; } .wb-handle-axis-y, .wb-handle-y { background:var(--wb-axis-y); border-color:color-mix(in srgb, var(--wb-axis-y) 70%, var(--wb-line)); cursor:ns-resize; } .wb-handle-axis-z, .wb-handle-z { background:var(--wb-axis-z); border-color:color-mix(in srgb, var(--wb-axis-z) 70%, var(--wb-line)); cursor:grab; } .wb-handle-vertex-source { background:var(--wb-vertex-source); border-color:color-mix(in srgb, var(--wb-vertex-source) 80%, var(--wb-line)); } .wb-handle-vertex-target { background:var(--wb-vertex-target); border-color:color-mix(in srgb, var(--wb-vertex-target) 70%, var(--wb-line)); } .wb-handle-extrude { border-radius:50%; background:var(--wb-gizmo-extrude); border-color:color-mix(in srgb, var(--wb-gizmo-extrude) 70%, var(--wb-line)); } .wb-handle-extrude::after { content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:#080a0c; font-weight:900; font-size:12px; line-height:1; } .wb-handle-label { position:absolute; left:calc(100% + 5px); top:50%; transform:translateY(-50%); color:var(--wb-muted); background:color-mix(in srgb, var(--wb-panel) 88%, transparent); border:1px solid var(--wb-line); padding:1px 4px; font:10px/1.1 var(--wb-mono); white-space:nowrap; } .wb-axis-line { position:absolute; height:2px; width:96px; left:50%; top:50%; transform-origin:left center; background:var(--wb-accent); pointer-events:none; } .wb-axis-line.wb-x { background:var(--wb-axis-x); } .wb-axis-line.wb-y { background:var(--wb-axis-y); transform:rotate(-90deg); } .wb-axis-line.wb-z { background:var(--wb-axis-z); transform:rotate(42deg); } /* Existing gizmo axes now have terminal handle tips. */ .wb-gizmo { color:var(--wb-accent); } .wb-gizmo-x { color:var(--wb-axis-x); } .wb-gizmo-y { color:var(--wb-axis-y); } .wb-gizmo-z { color:var(--wb-axis-z); } .wb-gizmo::after { content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; transform:translateY(-50%); border:1px solid color-mix(in srgb, currentColor 80%, var(--wb-line)); background:currentColor; box-shadow:0 0 0 2px rgba(0,0,0,.22); } .wb-gizmo-y::after { border-radius:50%; } .wb-gizmo-z::after { transform:translateY(-50%) rotate(45deg); } @media (max-width: 980px) { .wb-main.wb-dynamic, .wb-main.wb-with-splitters { grid-template-columns: 1fr; } .wb-main.wb-dynamic > .wb-splitter, .wb-main.wb-with-splitters > .wb-splitter { display: none; } .wb-panel-stack.wb-with-context { grid-template-rows: minmax(0,1fr); } } /* Compatibility aliases for older preview snippets and early tool experiments. */ .wb-grip-dots { display:inline-grid; place-items:center; width:var(--wb-grip-size); height:var(--wb-control-h); color:var(--wb-grip-color); } .wb-grip-dots::before { content:""; width:10px; height:14px; background:radial-gradient(circle,currentColor 1.15px,transparent 1.25px) 0 0/5px 5px; opacity:.7; } [data-wb-resize-handle="se"] { position:absolute; right:1px; bottom:1px; width:var(--wb-resize-handle); height:var(--wb-resize-handle); cursor:nwse-resize; } [data-wb-resize-handle="se"]::before { content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px; border-right:2px solid var(--wb-resize-grip); border-bottom:2px solid var(--wb-resize-grip); } /* Workbench v0.4.2 module: 09-track-editor.css */ /* -------------------------------------------------------------------------- 17. Track editor / timeline primitives -------------------------------------------------------------------------- Workbench owns the track editor's structure, sizing, interaction states, and visual language. Apps own meaning via data-track/data-kind, custom properties, and app-specific behavior. Canonical structure: .wb-track-editor .wb-transport .wb-ruler .wb-track-stack .wb-track .wb-track-label .wb-track-lane .wb-clip / .wb-marker / .wb-range / .wb-playhead Position contract: --x: left position, usually % --w: width, usually % --y: optional top offset inside a lane --h: optional item height -------------------------------------------------------------------------- */ .workbench { --wb-track-bg: var(--wb-input); --wb-track-line: var(--wb-line); --wb-track-line-2: var(--wb-line-2); --wb-track-label-bg: var(--wb-panel); --wb-track-label-w: 96px; --wb-track-ruler-h: 24px; --wb-track-h: 28px; --wb-track-lane-bg: var(--wb-row); --wb-track-lane-alt-bg: var(--wb-row-alt); --wb-track-grid-minor: color-mix(in srgb, var(--wb-line) 72%, transparent); --wb-track-grid-major: color-mix(in srgb, var(--wb-line-2) 78%, transparent); --wb-track-grid-step: 24px; --wb-track-grid-major-step: 96px; --wb-clip-h: 17px; --wb-clip-min-w: 14px; --wb-clip-tint: var(--wb-select); --wb-clip-line: var(--wb-line-2); --wb-marker-w: 8px; --wb-marker-h: 16px; --wb-marker-tint: var(--wb-accent); --wb-marker-line: var(--wb-line-2); --wb-range-tint: var(--wb-accent); --wb-playhead-color: var(--wb-accent); } .wb-track-editor, .wb-timeline-editor { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; border: 1px solid var(--wb-track-line); background: var(--wb-track-bg); color: var(--wb-text); overflow: hidden; } .wb-track-editor.wb-compact, .wb-timeline-editor.wb-compact { --wb-track-label-w: 78px; --wb-track-ruler-h: 20px; --wb-track-h: 23px; --wb-clip-h: 14px; --wb-marker-h: 13px; } .wb-track-editor.wb-roomy, .wb-timeline-editor.wb-roomy { --wb-track-label-w: 120px; --wb-track-ruler-h: 30px; --wb-track-h: 34px; --wb-clip-h: 22px; --wb-marker-h: 20px; } .wb-transport { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: var(--wb-top-h); padding: 4px 6px; border-bottom: 1px solid var(--wb-track-line); background: var(--wb-panel); overflow: hidden; } .wb-transport button, .wb-transport select, .wb-transport input { min-height: 22px; } .wb-transport .wb-field, .wb-transport label { min-width: 0; color: var(--wb-muted); font-size: 10px; } .wb-track-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; } .wb-ruler, .wb-time-ruler { position: relative; min-width: 0; height: var(--wb-track-ruler-h); margin-left: var(--wb-track-label-w); border-left: 1px solid var(--wb-track-line); border-bottom: 1px solid var(--wb-track-line); background: repeating-linear-gradient(90deg, transparent 0 calc(var(--wb-track-grid-step) - 1px), var(--wb-track-grid-minor) calc(var(--wb-track-grid-step) - 1px) var(--wb-track-grid-step)), repeating-linear-gradient(90deg, transparent 0 calc(var(--wb-track-grid-major-step) - 1px), var(--wb-track-grid-major) calc(var(--wb-track-grid-major-step) - 1px) var(--wb-track-grid-major-step)), var(--wb-panel-2); overflow: hidden; } .wb-ruler-mark, .wb-ruler-label { position: absolute; left: var(--x, 0%); top: 0; bottom: 0; display: flex; align-items: center; padding-left: 3px; border-left: 1px solid var(--wb-track-line-2); color: var(--wb-muted); font: 10px/1.1 var(--wb-mono); pointer-events: none; } .wb-track-stack { display: grid; min-width: 0; min-height: 0; background: var(--wb-track-bg); } .wb-track, .wb-track-row { display: grid; grid-template-columns: var(--wb-track-label-w) minmax(0, 1fr); min-width: 0; min-height: var(--wb-track-h); border-bottom: 1px solid var(--wb-track-line); } .wb-track:last-child, .wb-track-row:last-child { border-bottom: 0; } .wb-track-label { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border-right: 1px solid var(--wb-track-line); background: var(--wb-track-label-bg); color: var(--wb-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-track-label .wb-chip, .wb-track-label .wb-badge { margin-left: auto; } .wb-track-lane { position: relative; min-width: 0; min-height: calc(var(--wb-track-h) - 1px); background: repeating-linear-gradient(90deg, transparent 0 calc(var(--wb-track-grid-step) - 1px), var(--wb-track-grid-minor) calc(var(--wb-track-grid-step) - 1px) var(--wb-track-grid-step)), var(--wb-track-lane-bg); overflow: hidden; } .wb-track:nth-child(even) .wb-track-lane, .wb-track-row:nth-child(even) .wb-track-lane { background-color: var(--wb-track-lane-alt-bg); } .wb-track:hover .wb-track-lane, .wb-track-row:hover .wb-track-lane { background-color: color-mix(in srgb, var(--wb-panel-2) 65%, var(--wb-track-lane-bg)); } .wb-track-editor.wb-sticky-labels .wb-track-label, .wb-timeline-editor.wb-sticky-labels .wb-track-label { position: sticky; left: 0; z-index: 10; } .wb-track-editor.wb-sticky-labels .wb-ruler, .wb-timeline-editor.wb-sticky-labels .wb-ruler { position: sticky; top: 0; z-index: 8; } /* Scoped item styles. `.wb-clip` remains an overflow utility outside a track editor. */ .wb-track-editor .wb-clip, .wb-timeline-editor .wb-clip, .wb-track-clip { position: absolute; left: var(--x, 0%); top: var(--y, 50%); width: var(--w, 8%); min-width: var(--wb-clip-min-w); height: var(--h, var(--wb-clip-h)); transform: translateY(-50%); display: flex; align-items: center; gap: 4px; padding: 0 5px; border: 1px solid var(--wb-clip-line); border-radius: var(--wb-control-radius); background: color-mix(in srgb, var(--wb-clip-tint) 36%, var(--wb-panel)); color: var(--wb-text); font: 10px/1.1 var(--wb-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .wb-track-editor button.wb-clip, .wb-timeline-editor button.wb-clip, button.wb-track-clip { min-height: 0; } .wb-track-editor .wb-marker, .wb-timeline-editor .wb-marker, .wb-track-marker { position: absolute; left: var(--x, 0%); top: var(--y, 50%); width: var(--w, var(--wb-marker-w)); height: var(--h, var(--wb-marker-h)); min-width: 5px; transform: translate(-50%, -50%); border: 1px solid var(--wb-marker-line); border-radius: var(--wb-control-radius); background: var(--wb-marker-tint); color: var(--wb-inverse-text); box-shadow: 0 0 0 1px rgba(0,0,0,.22); min-height: 0; padding: 0; cursor: pointer; } .wb-track-editor .wb-marker::after, .wb-timeline-editor .wb-marker::after, .wb-track-marker::after { content: attr(data-label); position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); color: var(--wb-muted); font: 10px/1.1 var(--wb-mono); white-space: nowrap; } .wb-marker.wb-diamond, .wb-track-marker.wb-diamond { transform: translate(-50%, -50%) rotate(45deg); } .wb-marker.wb-diamond::after, .wb-track-marker.wb-diamond::after { transform: translateY(-50%) rotate(-45deg); transform-origin: left center; } .wb-marker.wb-line, .wb-track-marker.wb-line { width: 2px; border-color: var(--wb-marker-tint); background: var(--wb-marker-tint); box-shadow: 0 0 5px color-mix(in srgb, var(--wb-marker-tint) 70%, transparent); } .wb-track-editor .wb-range, .wb-timeline-editor .wb-range, .wb-track-range { position: absolute; left: var(--x, 0%); top: var(--y, 0); bottom: var(--b, 0); width: var(--w, 10%); border: 1px solid color-mix(in srgb, var(--wb-range-tint) 55%, var(--wb-line)); background: color-mix(in srgb, var(--wb-range-tint) 14%, transparent); pointer-events: none; z-index: 3; } .wb-track-editor .wb-playhead, .wb-timeline-editor .wb-playhead { position: absolute; left: var(--x, var(--wb-playhead, 0%)); top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--wb-playhead-color); box-shadow: 0 0 6px var(--wb-playhead-color); z-index: 20; pointer-events: none; } .wb-track-editor .wb-playhead::after, .wb-timeline-editor .wb-playhead::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; background: var(--wb-playhead-color); clip-path: polygon(50% 100%, 0 0, 100% 0); } /* Generic semantic variants. Apps may add their own [data-kind] colors. */ .wb-track-editor [data-kind="frame"], .wb-timeline-editor [data-kind="frame"] { --wb-clip-tint: var(--wb-accent); } .wb-track-editor [data-kind="sprite"], .wb-timeline-editor [data-kind="sprite"] { --wb-clip-tint: var(--wb-info); } .wb-track-editor [data-kind="position"], .wb-track-editor [data-kind="key"], .wb-timeline-editor [data-kind="position"], .wb-timeline-editor [data-kind="key"] { --wb-marker-tint: var(--wb-good); --wb-clip-tint: var(--wb-good); } .wb-track-editor [data-kind="action"], .wb-track-editor [data-kind="event"], .wb-timeline-editor [data-kind="action"], .wb-timeline-editor [data-kind="event"] { --wb-marker-tint: var(--wb-warn); --wb-clip-tint: var(--wb-warn); } .wb-track-editor [data-kind="sound"], .wb-track-editor [data-kind="audio"], .wb-timeline-editor [data-kind="sound"], .wb-timeline-editor [data-kind="audio"] { --wb-marker-tint: var(--wb-info); --wb-clip-tint: var(--wb-info); } .wb-track-editor [data-kind="bad"], .wb-track-editor [data-kind="error"], .wb-timeline-editor [data-kind="bad"], .wb-timeline-editor [data-kind="error"] { --wb-marker-tint: var(--wb-bad); --wb-clip-tint: var(--wb-bad); } .wb-track-editor .wb-selected, .wb-track-editor .is-selected, .wb-track-editor [aria-selected="true"], .wb-timeline-editor .wb-selected, .wb-timeline-editor .is-selected, .wb-timeline-editor [aria-selected="true"] { outline: 1px solid var(--wb-accent); outline-offset: -1px; box-shadow: inset 2px 0 0 var(--wb-accent), 0 0 0 1px rgba(0,0,0,.18); z-index: 12; } .wb-track-editor .is-active, .wb-timeline-editor .is-active { border-color: var(--wb-accent); } .wb-track-editor .is-muted, .wb-track-editor .is-ghost, .wb-timeline-editor .is-muted, .wb-timeline-editor .is-ghost { opacity: .5; } .wb-track-editor .is-preview, .wb-timeline-editor .is-preview { outline: 1px dashed var(--wb-muted); outline-offset: -2px; } .wb-track-editor .is-invalid, .wb-timeline-editor .is-invalid { border-color: var(--wb-bad); --wb-clip-line: var(--wb-bad); --wb-marker-line: var(--wb-bad); } .wb-track-editor .is-disabled, .wb-track-editor [aria-disabled="true"], .wb-timeline-editor .is-disabled, .wb-timeline-editor [aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; } .wb-track-editor .is-dragging, .wb-timeline-editor .is-dragging { opacity: .72; cursor: grabbing; z-index: 30; } /* Legacy preview aliases. Canonical new markup should use wb-track-editor / wb-track / wb-clip / wb-marker. */ .wb-media-strip { position: relative; min-height: 76px; border: 1px solid var(--wb-track-line); background: var(--wb-track-bg); overflow: hidden; } .wb-media-clip, .wb-audio-clip { position: absolute; left: var(--x, 0%); width: var(--w, 8%); border: 1px solid var(--wb-clip-line); background: color-mix(in srgb, var(--wb-clip-tint) 28%, var(--wb-panel)); } .wb-media-clip { top: 10px; height: 22px; } .wb-audio-clip { bottom: 10px; height: 18px; --wb-clip-tint: var(--wb-info); } @media (max-width: 800px) { .wb-track-editor, .wb-timeline-editor { --wb-track-label-w: 72px; } .wb-track-label { font-size: 9px; padding-inline: 4px; } .wb-ruler, .wb-time-ruler { margin-left: var(--wb-track-label-w); } }