shkim4
9394050c72
- Add StoryNotice and a withSWNotice decorator so every visible SW Story shows the common notice above its title; non-SW Stories are unaffected. - Align the SW Header overview with the common SW Story page layout, let the preview Stage fill the available width and keep inner scroll on narrow screens. - Rename SW/Footer to SW/하단 명령어바 (sidebar title only, Story IDs fixed via id: "sw-footer"), drop the top SWHeader from its preview and lower the workspace height bounds by the removed 49px.
42 lines
3.8 KiB
CSS
42 lines
3.8 KiB
CSS
/* Story-owned layout for SW/Footer. Like a consuming program it arranges public components; it never styles
|
|
hm-sw-* classes. Surfaces behind standalone parts read the public --hm-sw-footer-* tokens. */
|
|
.sw-footer-story-screen { position: relative; display: flex; flex-direction: column; background: #060606; }
|
|
.sw-footer-story-canvas { position: relative; background: var(--sw-story-canvas); }
|
|
/* 2026-10-22: the workspace fits the viewport under the page title (720px at most), so the page itself does not
|
|
scroll where there is room; a short window keeps 480px and the page scrolls instead of clipping.
|
|
2026-11-09: the 49px SWHeader above the drawing area was removed, so every bound is 49px lower (drawing area and footer unchanged). */
|
|
.sw-footer-story-workspace { display: flex; flex-direction: column; height: clamp(431px, calc(100dvh - 259px), 671px); background: #060606; }
|
|
.sw-footer-story-canvas--fill { flex: 1 1 auto; min-height: 0; }
|
|
.sw-footer-story-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
|
|
.sw-footer-story-node { margin: 0; padding: 12px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; }
|
|
.sw-footer-story-node figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
|
|
.sw-footer-story-node figcaption code { font-size: 11px; color: #6e6759; }
|
|
.sw-footer-story-node figcaption small { color: #6e6759; }
|
|
.sw-footer-story-node__pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
|
|
.sw-footer-story-node__pair > div { min-width: 0; }
|
|
.sw-footer-story-node__pair img { display: block; max-width: 100%; }
|
|
.sw-footer-story-node__label { margin: 0 0 4px; font-size: 11px; color: #6e6759; }
|
|
.sw-footer-story-node__live { display: inline-block; padding: 20px; border-radius: 4px; background: #fff; }
|
|
.sw-footer-story-node__wide { width: min(1920px, calc(100vw - 160px)); overflow-x: auto; padding-top: 24px; background: #060606; }
|
|
.sw-footer-story-node[data-node-id="26:10097"] .sw-footer-story-node__pair { flex-direction: column; }
|
|
.sw-footer-story-node[data-node-id="26:10097"] img { width: min(1920px, calc(100vw - 160px)); }
|
|
.sw-footer-story-column { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
|
|
.sw-footer-story-pin { display: contents; }
|
|
.sw-footer-story-group-surface { padding: 6px; border-radius: 4px; background: var(--hm-sw-footer-group-background); }
|
|
.sw-footer-story-guide-room { gap: 160px; padding: 170px 80px 6px; }
|
|
.sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; }
|
|
.sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; }
|
|
.sw-footer-story-lucide { display: grid; place-items: center; }
|
|
.sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; }
|
|
.sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
|
|
.sw-footer-story-row--tight { gap: 0; }
|
|
.sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
|
|
.sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
|
|
/* The hidden 1920px row (Responsive More, narrower than 1920px) takes its gap with it. */
|
|
@container sw-story-page (max-width: 2039.98px) { .sw-story-responsive-hidden + .sw-footer-story-width { margin-top: 0; } }
|
|
.sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
|
|
.sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
|
|
.sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }
|
|
.sw-footer-story-aux-row img { display: block; flex: none; }
|
|
.sw-footer-story-aux-states { display: flex; flex-direction: column; gap: 9px; padding: 8px; }
|