shkim4
7976801034
- Property Panel compare page: from 1080px, none/all stacked in column 1, circle and expanded side by side (2x2 and 1 column below) - Overview Stage: the property panel is clamped to the Stage height so the Stage gets no scrollbar; the panel body scrolls - Viewer header file name: clamp(140px, calc(45cqw - 256px), 360px) so a 950px header shows no More; 1280px and wider unchanged
96 lines
8.4 KiB
CSS
96 lines
8.4 KiB
CSS
/* Story canvas only: frames that simulate a header width. Never styles the header itself. */
|
||
.sw-story-scroller { max-width: 100%; overflow-x: auto; }
|
||
/* Responsive More pages: the 1920px row (sw-story-responsive-hidden) shows when the page has 1920px of usable width —
|
||
the page (container sw-story-page, not the browser) minus its 40px gutters, so 2000px; with less room the whole row —
|
||
title, header, background, margin — is hidden. 2026-10-23: it stays inside the Story column like every other row (the
|
||
former reach-out of the 80vw Inner, sw-story-responsive-wide, is gone); its preview is at most 1920px wide. */
|
||
.sw-story-responsive { container-type: inline-size; }
|
||
.sb-page:has(.sw-story-responsive) { container: sw-story-page / inline-size; }
|
||
@container sw-story-page (max-width: 1999.98px) { .sw-story-responsive-hidden { display: none; } }
|
||
.sw-story-frame { background: #060606; }
|
||
/* Shared drawing-area canvas of the SW Stories (2026-10-19): the SW/Viewer black grid — 40px cells, 1px lines of
|
||
HM green #266651 at 18%, on #0A0A0B. Used behind the SW Header work area and dropdown room and the viewer frames. */
|
||
.sb-page { --sw-story-canvas: linear-gradient(rgba(38, 102, 81, 0.18) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(38, 102, 81, 0.18) 1px, transparent 1px) 0 0 / 40px 40px, #0a0a0b; }
|
||
.sw-story-composed {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
width: auto;
|
||
height: auto;
|
||
padding: 5px 8px;
|
||
background: var(--hm-sw-header-object-background);
|
||
}
|
||
.sw-story-scroller--menu { padding-bottom: 360px; background: var(--sw-story-canvas); }
|
||
/* Only the two fixed dimension specimens use the full 1920px frame as their anchor. The shared
|
||
runtime dropdown still clamps to the real viewport. Scroll the specimen to see its right edge. */
|
||
.sw-story-fixed-dimension .hm-sw-header__list-menu--dimension-style { left: auto !important; right: 0; }
|
||
.sw-story-fixed-dimension .hm-sw-header__list-menu--dimension-style[data-shifted="true"]::before { top: calc(-1 * var(--hm-sw-header-field-height) - 1px); }
|
||
.sw-story-log { margin: 0 0 8px; font-size: 13px; color: #3d4a45; }
|
||
.sw-story-stack { display: flex; flex-direction: column; gap: 8px; }
|
||
/* Window Move Motion: window controls alone on the window-area surface, magnified for comparison. */
|
||
.sw-story-window { display: flex; width: 152px; height: 48px; background: var(--hm-sw-header-document-background); }
|
||
.sw-story-zoom { zoom: 3; width: max-content; }
|
||
.sw-story-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 16px; }
|
||
.sw-story-stage { margin: 0; }
|
||
.sw-story-stage figcaption { margin-top: 6px; font-size: 13px; color: #3d4a45; }
|
||
.sw-story-layer-state { margin: 0 0 8px; font-size: 12px; color: #3d4a45; white-space: pre-wrap; }
|
||
.sw-story-dynamic { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
|
||
.sw-story-property-room { min-height: 820px; }
|
||
/* Property panel states (2026-10-16): standalone panels at their natural size; the comparison wraps. */
|
||
.sw-story-compare { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
|
||
.sw-story-compare__cell { margin: 0; }
|
||
.sw-story-compare__cell figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
|
||
/* Property panel 4-state comparison at the panels' own size (314px wide, never shrunk).
|
||
2026-10-26 (user request): 3 columns — the short panels (none, all) stacked in column 1, the long ones (circle,
|
||
expanded) side by side in columns 2 and 3. Rows are auto / 1fr so the long panels' height goes to row 2 only and
|
||
"all" sits 24px under "none". Narrower screens: 2 columns × 2 rows (3 × 314 + 2 gaps + gutters do not fit), and one
|
||
column below 720px; no Inner scroller and no sideways scroll (2026-10-22). */
|
||
.sw-story-compare-page .sw-story-log { margin-top: 12px; }
|
||
.sw-story-compare.sw-story-compare--grid { display: grid; grid-template-columns: repeat(2, max-content); align-items: start; gap: 24px; }
|
||
@media (min-width: 1080px) {
|
||
.sw-story-compare.sw-story-compare--grid { grid-template-columns: repeat(3, max-content); grid-template-rows: auto 1fr; }
|
||
.sw-story-compare--grid > [data-compare="none"] { grid-area: 1 / 1; }
|
||
.sw-story-compare--grid > [data-compare="all"] { grid-area: 2 / 1; }
|
||
.sw-story-compare--grid > [data-compare="circle"] { grid-area: 1 / 2 / span 2; }
|
||
.sw-story-compare--grid > [data-compare="expanded"] { grid-area: 1 / 3 / span 2; }
|
||
}
|
||
@media (max-width: 719.98px) { .sw-story-compare.sw-story-compare--grid { grid-template-columns: max-content; } }
|
||
/* Placement-only exception, same as the Overview Stage: the product clamps a panel to the viewport
|
||
height; here the scroller provides the room so the 754px panel keeps its size. */
|
||
.sw-story-compare--grid .hm-sw-property { max-height: none; }
|
||
.sw-story-detail-comparison { overflow-x: auto; padding: 16px; background: var(--hm-sw-header-layer-menu-background); }
|
||
.sw-story-detail-row { display: grid; grid-template-columns: 140px repeat(4, 180px); align-items: center; gap: 16px; min-width: 924px; padding: 12px 0; }
|
||
.sw-story-detail-row > div { display: flex; align-items: center; gap: 8px; }
|
||
|
||
/* Overview host layout only. Native controls below are Storybook data controls, outside the product. */
|
||
.sw-story-overview.sb-page { height: 100dvh; min-height: 0; padding-block: 16px; }
|
||
.sw-story-overview > .sb-page-inner { height: 100%; display: flex; flex-direction: column; gap: 12px; }
|
||
.sw-story-overview .sb-page-header { flex: 0 0 auto; padding-bottom: 8px; }
|
||
.sw-story-overview .sb-page-header .sb-page-kicker { margin-bottom: 4px; }
|
||
.sw-story-overview .sb-page-header .sb-page-title { margin-block: 0 4px; }
|
||
.sw-overview-toolbar { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
|
||
.sw-overview-toolbar select, .sw-overview-data button { font: inherit; padding: 3px 8px; color: inherit; background: var(--hm-sem-bg-surface); border: 1px solid var(--hm-sem-stroke-input-default); border-radius: 4px; }
|
||
.sw-overview-toolbar details { flex-basis: 100%; }
|
||
.sw-overview-toolbar summary { width: max-content; cursor: pointer; }
|
||
.sw-overview-data { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 8px; }
|
||
.sw-overview-data label { display: inline-flex; align-items: center; gap: 4px; }
|
||
.sw-overview-slot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
|
||
.sw-overview-stage { flex: 0 0 auto; overflow: auto; overscroll-behavior: contain; background: var(--sw-story-canvas); outline: 1px solid var(--hm-sem-stroke-input-default); }
|
||
.sw-overview-world { min-width: 390px; min-height: 100%; position: relative; }
|
||
/* Placement-only Storybook exception: the panel sits in the Stage. 2026-10-26 (user request): no Stage scrollbar when
|
||
it opens — the panel is clamped to the Stage height (as the product clamps it to the viewport) and its body scrolls.
|
||
The Stage height comes from the Story (--sw-preview-stage-height): the panel's containing block is the Header.
|
||
Header's public API deliberately excludes panel style; package CSS and other Stories stay untouched. */
|
||
.sw-overview-stage .hm-sw-property { position: absolute !important; left: var(--sw-preview-panel-left) !important; top: var(--sw-preview-panel-top) !important; max-height: calc(var(--sw-preview-stage-height) - var(--sw-preview-panel-top) - 4px) !important; }
|
||
/* The document wrapper otherwise stacks below the independently positioned property Bar. */
|
||
.sw-overview-stage .hm-sw-header__document:has(.hm-sw-header__document-menu) { z-index: 3; }
|
||
/* Responsive More measured section: Storybook controls (width range, host content toggles) above the frame. */
|
||
.sw-story-measured-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; font-size: 13px; }
|
||
.sw-story-measured-controls label { display: inline-flex; align-items: center; gap: 6px; }
|
||
.sw-story-measured-controls input[type="range"] { width: min(480px, 60vw); }
|
||
|
||
/* 2026-10-21 Storybook simplification (SW pages): the components only. Callback logs, state dumps and long page /
|
||
section descriptions are not shown; the log and state elements stay in the DOM because the browser tests read
|
||
their text. Scoped to pages that render SW components, so other Story pages are unaffected. */
|
||
.sb-page:has([class*="hm-sw-"]) :is([data-callback-log], [data-property-log], [data-style-state], .sb-page-description, .sb-page-section-description) { display: none; }
|