feat(sw): add SW Footer component and Storybook stories
This commit is contained in:
shkim4 committed
1 parent
77a809baa3
commit
6cf885412e
105 files changed
+3288
-3
No files matched your search
@@ -0,0 +1,533 @@
|
||||
/* @hm-design/sw — SW Footer (Figma "레이아웃 분리" 26:10097 bottom bar, components 26:9459 … 26:10097, read
|
||||
through the Figma Plugin API 2026-10-20). Footer-only tokens. Text keeps the SW typography of sw.css
|
||||
(Noto Sans KR instead of Dotum, black OUTSIDE outline as 16 text-shadows, own-color 0.3 / 0.4px strokes removed
|
||||
like the 2026-10-16 header fix). Never touches global selectors, SWHeader or SWPopup classes. */
|
||||
|
||||
.hm-sw-header,
|
||||
.hm-sw-theme {
|
||||
/* Bar (26:10098 background, 72px high, #060606) */
|
||||
--hm-sw-footer-height: 72px;
|
||||
--hm-sw-footer-background: #060606;
|
||||
--hm-sw-footer-text: #f6f4f2;
|
||||
--hm-sw-footer-muted: #d4cbbd;
|
||||
--hm-sw-footer-accent: #ff5c00;
|
||||
--hm-sw-footer-red: #e60403;
|
||||
--hm-sw-footer-disabled-opacity: 0.4;
|
||||
|
||||
/* Side buttons 74 × 71 (26:10189 보조기능 / 26:10192 명령어 전체보기): side-bg.svg + 8px 60% black drop shadow
|
||||
towards the bar content. */
|
||||
--hm-sw-footer-side-width: 74px;
|
||||
--hm-sw-footer-side-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
--hm-sw-footer-side-shadow-offset: 5px;
|
||||
|
||||
/* Auxiliary toggles 104 × 33 (26:10104, 3 × 2, gap 2px) */
|
||||
--hm-sw-footer-aux-width: 104px;
|
||||
--hm-sw-footer-aux-height: 33px;
|
||||
--hm-sw-footer-aux-gap: 2px;
|
||||
--hm-sw-footer-aux-background: linear-gradient(0deg, #262218 8%, #4a3c2b 34%, #594c31 55%, #312a1b 90%);
|
||||
--hm-sw-footer-aux-border-color: #886d35;
|
||||
--hm-sw-footer-aux-radius: 3px;
|
||||
--hm-sw-footer-aux-font-size: 13px;
|
||||
/* Not in Figma (Default only): the reference screen (2026-10-20) draws an ON toggle with an orange border and text. */
|
||||
--hm-sw-footer-aux-pressed-border-color: #da6813;
|
||||
|
||||
/* Command group (26:10111 groop명령어): 68 × 47 slots over a 24px category row, 71px high */
|
||||
--hm-sw-footer-slot-width: 68px;
|
||||
--hm-sw-footer-slot-height: 47px;
|
||||
--hm-sw-footer-group-background: linear-gradient(0deg, #2f281a 0%, #312a1b 5%, #332b1c 36%, #463c29 58%, #38301f 79%, #19160e 98%);
|
||||
--hm-sw-footer-group-border-color: #886d35;
|
||||
--hm-sw-footer-group-radius: 4px;
|
||||
/* bg_vacant 26:10113: the darker surface after the last command (empty slots and the rest of the bar). */
|
||||
--hm-sw-footer-vacant-background: linear-gradient(0deg, #18150e 28%, #262015 41%, #332b1c 58%, #38301f 81%, #18150e 100%);
|
||||
--hm-sw-footer-divider: linear-gradient(0deg, #20190e 0.27%, #8a7a5b 45.15%, #f3dba8 70.08%, #423625 100%);
|
||||
--hm-sw-footer-divider-shadow: -1px 0 1px #000;
|
||||
|
||||
/* Category row (menu_bg 26:10127): the active tab is a pocket opened into the slots above */
|
||||
--hm-sw-footer-menu-height: 24px;
|
||||
--hm-sw-footer-menu-top: #574b30;
|
||||
--hm-sw-footer-menu-bottom: #282216;
|
||||
--hm-sw-footer-menu-edge-top: #685a3b;
|
||||
--hm-sw-footer-menu-pocket-edge: #675a3b;
|
||||
--hm-sw-footer-menu-divider: #000;
|
||||
--hm-sw-footer-menu-tab-min-width: 43px;
|
||||
|
||||
/* Empty-slot guide (26:9242 Variant2 / guide_바로가기 등록 26:9096): 208 × 149, 4px above the slot */
|
||||
--hm-sw-footer-guide-width: 208px;
|
||||
--hm-sw-footer-guide-height: 149px;
|
||||
--hm-sw-footer-guide-background: #0e3c2e;
|
||||
--hm-sw-footer-guide-border-color: #da6813;
|
||||
--hm-sw-footer-guide-caption: #b6d0c9;
|
||||
|
||||
/* Layout tabs (26:9942 탭 상태변화, layout01 / layout02 / layout03 / model / btn_add_layout) */
|
||||
--hm-sw-footer-tab-height: 22px;
|
||||
--hm-sw-footer-tab-font-size: 12px;
|
||||
--hm-sw-footer-tab-text: #161410;
|
||||
--hm-sw-footer-tab-background: #c3b79e;
|
||||
--hm-sw-footer-tab-hover-overlay: rgba(0, 0, 0, 0.2);
|
||||
--hm-sw-footer-tab-on-background: linear-gradient(0deg, #7c6c4c 0.48%, #7c6c4c 85.07%, #a6946f 100%);
|
||||
--hm-sw-footer-tab-editing-background: #0f0d0a;
|
||||
--hm-sw-footer-tab-border-color: rgba(0, 0, 0, 0.05);
|
||||
--hm-sw-footer-tab-hover-border-color: #da6813;
|
||||
--hm-sw-footer-tab-inset-shadow: inset 0 -3px 4px rgba(56, 48, 31, 0.25);
|
||||
/* 12px tab text: rgba(0, 0, 0, .7) 1.3px OUTSIDE stroke under the hover / on / editing text. */
|
||||
--hm-sw-footer-tab-outline-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
/* Command line (26:10048 / 26:10056): 566px, 71px collapsed, 270px expanded */
|
||||
--hm-sw-footer-command-width: 566px;
|
||||
--hm-sw-footer-command-height: 71px;
|
||||
--hm-sw-footer-command-expanded-height: 270px;
|
||||
--hm-sw-footer-command-background: linear-gradient(180deg, #635537 0%, #262218 5%, #281f16 10%, #282216 100%);
|
||||
--hm-sw-footer-command-expanded-background: #282216;
|
||||
--hm-sw-footer-command-input-background: #16130d;
|
||||
--hm-sw-footer-command-input-shadow: 0 -1px 2px rgba(255, 255, 255, 0.25), inset 0 1px 4px #000;
|
||||
--hm-sw-footer-command-font-size: 12px;
|
||||
--hm-sw-footer-command-line-height: 14px;
|
||||
/* Not in Figma (reference screens 2026-10-20): the command line inside the bar keeps at least this width. */
|
||||
--hm-sw-footer-command-min-width: 280px;
|
||||
/* Not in Figma: below this bar width the auxiliary toggles show their icon only (reference screen 2026-10-20). */
|
||||
--hm-sw-footer-aux-compact-width: 45px;
|
||||
}
|
||||
|
||||
.hm-sw-footer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
|
||||
/* ---------- Bar ---------- */
|
||||
.hm-sw-footer {
|
||||
container: hm-sw-footer / inline-size;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--hm-sw-footer-height);
|
||||
background: var(--hm-sw-footer-background);
|
||||
color: var(--hm-sw-footer-text);
|
||||
}
|
||||
/* Layout tabs sit on top of the bar, right aligned (26:10190 at 1823, 986 in the 1920 frame). */
|
||||
.hm-sw-footer__tabs { position: absolute; right: 0; bottom: 100%; z-index: 1; display: flex; }
|
||||
.hm-sw-footer__aux-area { flex: 0 0 auto; display: flex; gap: 2px; margin-right: 4px; }
|
||||
/* 26:10111 starts 1px below the bar top and ends at the bar bottom. */
|
||||
.hm-sw-footer__group {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
margin-top: 1px;
|
||||
border: 1px solid var(--hm-sw-footer-group-border-color);
|
||||
border-right: 0;
|
||||
border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
|
||||
background: var(--hm-sw-footer-group-background);
|
||||
}
|
||||
.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
|
||||
.hm-sw-footer__scroll {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
margin: -1px 0 -1px -1px;
|
||||
}
|
||||
.hm-sw-footer__panel { position: relative; display: flex; flex-direction: column; width: max-content; }
|
||||
.hm-sw-footer__slots { display: flex; height: var(--hm-sw-footer-slot-height); }
|
||||
.hm-sw-footer__group > .hm-sw-footer-side { margin-top: -1px; }
|
||||
/* The rest of the bar is bg_vacant too (26:10113 runs to the frame edge and covers the bottom border). */
|
||||
.hm-sw-footer__trailing { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; margin-bottom: -1px; background: var(--hm-sw-footer-vacant-background); }
|
||||
/* Command line in the bar (reference screen 2026-10-20): free width between the auxiliary grid and the slots,
|
||||
bottom aligned so an expanded line grows upwards. The slots keep their own width before 명령어 전체보기. */
|
||||
.hm-sw-footer__command { position: relative; z-index: 2; flex: 1 1 0; min-width: var(--hm-sw-footer-command-min-width); margin: 1px 4px 0 0; }
|
||||
.hm-sw-footer__command > .hm-sw-footer-command { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: none; }
|
||||
.hm-sw-footer[data-command] .hm-sw-footer__group { flex: 0 1 auto; }
|
||||
.hm-sw-footer[data-command] .hm-sw-footer__trailing { flex: 0 0 auto; }
|
||||
/* Status text above the bar, left (cursor coordinates in the reference screen). */
|
||||
.hm-sw-footer__status { position: absolute; left: 0; bottom: 100%; z-index: 1; padding: 0 0 3px 2px; font-size: 12px; line-height: 14px; color: var(--hm-sw-footer-text); white-space: nowrap; text-shadow: var(--hm-sw-header-label-outline); }
|
||||
/* Bar-level guide: 4px above the empty slot (which starts 2px below the bar top). */
|
||||
.hm-sw-footer > .hm-sw-footer__guide { bottom: calc(100% + 2px); }
|
||||
|
||||
/* ---------- Side buttons (보조기능 / 명령어 전체보기) ---------- */
|
||||
.hm-sw-footer-side {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 0 0 var(--hm-sw-footer-side-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
width: var(--hm-sw-footer-side-width);
|
||||
height: 71px;
|
||||
padding-top: 18px;
|
||||
background: url("../components/sw-footer/assets/side-bg.svg") 0 0 / 74px 71px no-repeat;
|
||||
filter: drop-shadow(var(--hm-sw-footer-side-shadow-offset) 0 8px rgba(0, 0, 0, 0.6));
|
||||
color: var(--hm-sw-footer-text);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
|
||||
.hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
|
||||
.hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
|
||||
/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
|
||||
.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
|
||||
.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
|
||||
.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
|
||||
|
||||
/* ---------- Auxiliary toggles (객체스냅 …) ---------- */
|
||||
.hm-sw-footer-aux {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--hm-sw-footer-aux-columns, 3), var(--hm-sw-footer-aux-width));
|
||||
grid-auto-rows: var(--hm-sw-footer-aux-height);
|
||||
align-content: center;
|
||||
gap: var(--hm-sw-footer-aux-gap);
|
||||
}
|
||||
.hm-sw-footer-aux__button {
|
||||
position: relative;
|
||||
width: var(--hm-sw-footer-aux-width);
|
||||
height: var(--hm-sw-footer-aux-height);
|
||||
border: 1px solid var(--hm-sw-footer-aux-border-color);
|
||||
border-radius: var(--hm-sw-footer-aux-radius);
|
||||
background: var(--hm-sw-footer-aux-background);
|
||||
color: var(--hm-sw-footer-text);
|
||||
font-size: var(--hm-sw-footer-aux-font-size);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
/* Icon box: Figma icons sit at 12px, 8–10px (14–16px boxes); a 17px box at 10, 7 inside the 1px border centers them. */
|
||||
.hm-sw-footer-aux__icon { position: absolute; left: 10px; top: 7px; display: grid; place-items: center; width: 17px; height: 17px; }
|
||||
.hm-sw-footer-aux__icon :is(img, svg) { display: block; flex: none; }
|
||||
.hm-sw-footer-aux__label {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
overflow: hidden;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: var(--hm-sw-header-text-outline);
|
||||
}
|
||||
/* Not in Figma (only Default is drawn): hover = the footer accent text; pressed = accent text + orange border
|
||||
(reference screen 2026-10-20). */
|
||||
.hm-sw-footer-aux__button:hover:not(:disabled) .hm-sw-footer-aux__label,
|
||||
.hm-sw-footer-aux__button[aria-pressed="true"] .hm-sw-footer-aux__label { color: var(--hm-sw-footer-accent); }
|
||||
.hm-sw-footer-aux__button[aria-pressed="true"] { border-color: var(--hm-sw-footer-aux-pressed-border-color); }
|
||||
|
||||
/* ---------- Command slots (Line, PLine … / 빈 칸) ---------- */
|
||||
.hm-sw-footer-slot {
|
||||
position: relative;
|
||||
flex: 0 0 var(--hm-sw-footer-slot-width);
|
||||
width: var(--hm-sw-footer-slot-width);
|
||||
height: var(--hm-sw-footer-slot-height);
|
||||
}
|
||||
/* 1px divider between slots (Rectangle 7461 …: x = 68n, 5 → 42). */
|
||||
.hm-sw-footer-slot + .hm-sw-footer-slot::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
width: 1px;
|
||||
height: 37px;
|
||||
background: var(--hm-sw-footer-divider);
|
||||
box-shadow: var(--hm-sw-footer-divider-shadow);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-tool {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
color: var(--hm-sw-footer-text);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.hm-sw-footer-tool__label {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
top: 6px;
|
||||
overflow: hidden;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
text-shadow: var(--hm-sw-header-text-outline);
|
||||
}
|
||||
.hm-sw-footer-tool__icon { position: absolute; left: 50%; top: 26px; display: grid; place-items: center; width: 18px; height: 18px; transform: translateX(-50%); }
|
||||
.hm-sw-footer-tool__icon :is(img, svg) { display: block; flex: none; }
|
||||
.hm-sw-footer-tool__icon--active { display: none; }
|
||||
/* Variant2 (hover) and Variant3 (selected) are the same in Figma: #FF5C00 text and the orange icon. */
|
||||
.hm-sw-footer-tool:is(:hover:not(:disabled), [aria-pressed="true"]) { color: var(--hm-sw-footer-accent); }
|
||||
.hm-sw-footer-tool[data-active-icon]:is(:hover:not(:disabled), [aria-pressed="true"]) .hm-sw-footer-tool__icon--default { display: none; }
|
||||
.hm-sw-footer-tool[data-active-icon]:is(:hover:not(:disabled), [aria-pressed="true"]) .hm-sw-footer-tool__icon--active { display: grid; }
|
||||
.hm-sw-footer-tool:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
|
||||
|
||||
/* Last slot when the commands do not fit (reference screens 2026-10-20): ico_arrow 26:10023 ▲ opens the panel of
|
||||
the other commands above the slots, ▼ while open. */
|
||||
.hm-sw-footer-more { position: absolute; inset: 0; }
|
||||
.hm-sw-footer-more__icon { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 2px; background: #000 url("../components/sw-footer/assets/arrow-up.svg") 1px 1px / 16px 16px no-repeat; }
|
||||
.hm-sw-footer-more:is(:hover, [data-active]) .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-up-hover.svg"); }
|
||||
.hm-sw-footer-more[aria-expanded="true"] .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-down.svg"); }
|
||||
.hm-sw-footer-more[aria-expanded="true"]:is(:hover, [data-active]) .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-down-hover.svg"); }
|
||||
.hm-sw-footer__more-panel {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
border: 1px solid var(--hm-sw-footer-group-border-color);
|
||||
border-bottom: 0;
|
||||
border-radius: var(--hm-sw-footer-group-radius) var(--hm-sw-footer-group-radius) 0 0;
|
||||
background: var(--hm-sw-footer-group-background);
|
||||
}
|
||||
|
||||
/* Empty slot (btn_add_menu 26:9971): 68 × 46 one pixel below the slot top; hover adds the orange dashed ring. */
|
||||
.hm-sw-footer-add {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
width: var(--hm-sw-footer-slot-width);
|
||||
height: 46px;
|
||||
background: url("../components/sw-footer/assets/slot-add.svg") 0 0 / 68px 46px no-repeat;
|
||||
}
|
||||
.hm-sw-footer-add:is(:hover:not(:disabled), [aria-expanded="true"]) { background-image: url("../components/sw-footer/assets/slot-add-hover.svg"); }
|
||||
.hm-sw-footer-add:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
|
||||
/* Without onSlotAdd the + wells are drawn but inert (no ring, no guide). */
|
||||
.hm-sw-footer-add[data-inert] { pointer-events: none; }
|
||||
.hm-sw-footer-slot:has(.hm-sw-footer-add:hover:not(:disabled))::before { visibility: hidden; }
|
||||
|
||||
/* Guide (가이드 영상 보기): centered over the slot, 4px above it. */
|
||||
.hm-sw-footer-guide {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 3px);
|
||||
width: var(--hm-sw-footer-guide-width);
|
||||
height: var(--hm-sw-footer-guide-height);
|
||||
overflow: hidden;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid var(--hm-sw-footer-guide-border-color);
|
||||
border-radius: 2px;
|
||||
background: var(--hm-sw-footer-guide-background);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-guide[data-standalone] { position: relative; left: auto; bottom: auto; transform: none; }
|
||||
.hm-sw-footer-guide__media { position: absolute; left: 5px; top: 5px; width: 194px; height: 111px; overflow: hidden; border: 1px solid #000; background: #000; }
|
||||
.hm-sw-footer-guide__media > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
.hm-sw-footer-guide__title { position: absolute; left: 5px; top: 123px; font-size: 14px; letter-spacing: 0.04em; line-height: 16px; color: var(--hm-sw-footer-text); text-shadow: var(--hm-sw-header-text-outline); white-space: nowrap; }
|
||||
.hm-sw-footer-guide__caption { position: absolute; right: 6px; top: 124px; font-size: 12px; letter-spacing: 0.02em; line-height: 14px; color: var(--hm-sw-footer-guide-caption); text-shadow: var(--hm-sw-header-label-outline); white-space: nowrap; }
|
||||
|
||||
/* Narrow bar (reference screen 2026-10-20): icon-only toggles, 45 × 33. The label stays as the accessible name. */
|
||||
@container hm-sw-footer (max-width: 1279px) {
|
||||
.hm-sw-footer-aux { --hm-sw-footer-aux-width: var(--hm-sw-footer-aux-compact-width); }
|
||||
.hm-sw-footer-aux__icon { left: 13px; }
|
||||
.hm-sw-footer-aux__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
}
|
||||
|
||||
/* ---------- Category row (도형 수정 편집 …) ---------- */
|
||||
.hm-sw-footer-menu { position: relative; display: flex; align-items: flex-start; height: var(--hm-sw-footer-menu-height); }
|
||||
/* Tabs that do not fit scroll inside the viewport with ◀ ▶ (reference screens 2026-10-20). */
|
||||
.hm-sw-footer-menu__viewport { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: flex-start; height: 100%; padding-left: 7px; overflow: hidden; scrollbar-width: none; }
|
||||
.hm-sw-footer-menu__viewport::-webkit-scrollbar { display: none; }
|
||||
.hm-sw-footer-menu__step { position: relative; flex: 0 0 13px; display: grid; place-items: center; width: 13px; height: 16px; margin-top: 4px; color: var(--hm-sw-footer-text); }
|
||||
.hm-sw-footer-menu__step svg { display: block; filter: drop-shadow(0 0 1px #000); }
|
||||
.hm-sw-footer-menu__step:hover:not(:disabled) { color: var(--hm-sw-footer-accent); }
|
||||
.hm-sw-footer-menu__step:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
|
||||
.hm-sw-footer-menu__step + .hm-sw-footer-menu__step { margin-right: 4px; }
|
||||
.hm-sw-footer-menu__tabs { display: contents; }
|
||||
.hm-sw-footer-menu__surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
|
||||
.hm-sw-footer-menu__tab {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
min-width: var(--hm-sw-footer-menu-tab-min-width);
|
||||
height: 16px;
|
||||
margin-top: 4px;
|
||||
padding: 0 8px;
|
||||
color: var(--hm-sw-footer-muted);
|
||||
font-size: 14px;
|
||||
/* Figma 1.4px (10%) on 레이어 … 구조/배근 (0.56px on the first four): with it the Noto widths meet the Figma
|
||||
boxes (45 / 61 / 43 / 84px). */
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-shadow: var(--hm-sw-header-text-outline);
|
||||
}
|
||||
/* Variant2 (hover) and Variant3 (current) are #FF5C00 in Figma. */
|
||||
.hm-sw-footer-menu__tab:is(:hover:not(:disabled), [aria-selected="true"]) { color: var(--hm-sw-footer-accent); }
|
||||
/* 1px × 10px black divider (Rectangle 7480 …) between tabs; the current tab has its 7px pocket edges instead. */
|
||||
.hm-sw-footer-menu__divider { position: relative; flex: 0 0 1px; width: 1px; height: 10px; margin-top: 7px; background: var(--hm-sw-footer-menu-divider); }
|
||||
.hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
|
||||
.hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
|
||||
.hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
|
||||
/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
|
||||
|
||||
/* ---------- Layout tabs ---------- */
|
||||
.hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
|
||||
.hm-sw-footer-tabs__list { display: contents; }
|
||||
.hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
|
||||
.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
|
||||
.hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
|
||||
.hm-sw-footer-tab__select {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-width: 69px;
|
||||
padding: 0 4px 0 8px;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
}
|
||||
.hm-sw-footer-tab__label { display: block; }
|
||||
.hm-sw-footer-tab__input {
|
||||
width: 57px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
.hm-sw-footer-tab__remove { position: relative; z-index: 1; flex: 0 0 auto; height: 22px; opacity: 0; }
|
||||
.hm-sw-footer-tab__remove:focus-visible { opacity: 1; }
|
||||
|
||||
/* Rounded tab (layout02 / layout03): 1px border, 4px top radius, -3px inset shadow. */
|
||||
/* The Figma border is an inside stroke drawn over the content (it does not widen the 85px tab): ::after. */
|
||||
.hm-sw-footer-tab[data-shape="rounded"] {
|
||||
overflow: hidden;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: var(--hm-sw-footer-tab-background);
|
||||
}
|
||||
.hm-sw-footer-tab[data-shape="rounded"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset: 0;
|
||||
border: 1px solid var(--hm-sw-footer-tab-border-color);
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--hm-sw-footer-tab-inset-shadow);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__label { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__remove { width: 16px; background: url("../components/sw-footer/assets/tab-delete.svg") 0 0 / 16px 22px no-repeat; }
|
||||
.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-delete-hover.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
|
||||
|
||||
/* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
|
||||
.hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
|
||||
.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__label { width: 57px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hm-sw-footer-tab[data-shape="slant"]::before,
|
||||
.hm-sw-footer-tab[data-shape="slant"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scaleX(-1);
|
||||
background: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-footer-tab[data-shape="slant"]::after { z-index: 2; background-image: none; }
|
||||
.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove { width: 28px; background: url("../components/sw-footer/assets/tab-close.svg") 0 0 / 28px 22px no-repeat; }
|
||||
.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
|
||||
/* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
|
||||
.hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }
|
||||
|
||||
/* Text per state (Figma layout01 / layout02 variants). */
|
||||
.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
|
||||
text-shadow:
|
||||
1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
|
||||
0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
|
||||
-1.3px 0 0 var(--hm-sw-footer-tab-outline-color), -0.92px -0.92px 0 var(--hm-sw-footer-tab-outline-color),
|
||||
0 -1.3px 0 var(--hm-sw-footer-tab-outline-color), 0.92px -0.92px 0 var(--hm-sw-footer-tab-outline-color);
|
||||
}
|
||||
.hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
|
||||
.hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
|
||||
.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
|
||||
.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
|
||||
/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
|
||||
/* layout01 "on hover" draws the default beige surface under the orange text. */
|
||||
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
|
||||
/* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
|
||||
.hm-sw-footer-tab:hover .hm-sw-footer-tab__remove { opacity: 1; }
|
||||
.hm-sw-footer-tab .hm-sw-footer-tab__remove:disabled { opacity: 0; cursor: default; }
|
||||
|
||||
/* Model (26:9914): 73 × 22 asset, label 22px from the left. */
|
||||
.hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
|
||||
.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
|
||||
.hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }
|
||||
|
||||
/* ---------- Command line ---------- */
|
||||
.hm-sw-footer-command {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--hm-sw-footer-command-width);
|
||||
max-width: 100%;
|
||||
height: var(--hm-sw-footer-command-height);
|
||||
overflow: hidden;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: var(--hm-sw-footer-command-background) 0 0 / 100% var(--hm-sw-footer-command-height) no-repeat, var(--hm-sw-footer-command-expanded-background);
|
||||
color: var(--hm-sw-footer-text);
|
||||
font-size: var(--hm-sw-footer-command-font-size);
|
||||
letter-spacing: 0.1em;
|
||||
line-height: var(--hm-sw-footer-command-line-height);
|
||||
}
|
||||
.hm-sw-footer-command[data-expanded] { height: var(--hm-sw-footer-command-expanded-height); }
|
||||
.hm-sw-footer-command__history {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 4px 30px 2px 8px;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #574b30 transparent;
|
||||
text-shadow: var(--hm-sw-header-label-outline);
|
||||
}
|
||||
.hm-sw-footer-command__history > li { white-space: pre; }
|
||||
.hm-sw-footer-command:not([data-expanded]) .hm-sw-footer-command__history { overflow: hidden; }
|
||||
.hm-sw-footer-command__history > li { overflow: hidden; text-overflow: ellipsis; }
|
||||
.hm-sw-footer-command__toggle { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 2px; background: #000 url("../components/sw-footer/assets/arrow-up.svg") 1px 1px / 16px 16px no-repeat; }
|
||||
.hm-sw-footer-command__toggle:hover { background-image: url("../components/sw-footer/assets/arrow-up-hover.svg"); }
|
||||
.hm-sw-footer-command__toggle[aria-expanded="true"] { background-image: url("../components/sw-footer/assets/arrow-down.svg"); }
|
||||
.hm-sw-footer-command__toggle[aria-expanded="true"]:hover { background-image: url("../components/sw-footer/assets/arrow-down-hover.svg"); }
|
||||
.hm-sw-footer-command__prompt {
|
||||
flex: 0 0 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 23px;
|
||||
margin: 0 4px;
|
||||
padding: 0 6px;
|
||||
background: var(--hm-sw-footer-command-input-background);
|
||||
box-shadow: var(--hm-sw-footer-command-input-shadow);
|
||||
}
|
||||
.hm-sw-footer-command__label { flex: 0 0 auto; text-shadow: var(--hm-sw-header-label-outline); }
|
||||
.hm-sw-footer-command__input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-shadow: var(--hm-sw-header-label-outline);
|
||||
caret-color: var(--hm-sw-footer-text);
|
||||
}
|
||||
.hm-sw-footer-command__prompt:has(.hm-sw-footer-command__input:focus-visible) { outline: 1px solid var(--hm-sw-header-focus-color); outline-offset: -1px; }
|
||||
Reference in new issue
Block a user