imccyu
a04a223bab
The shell is now a pure composition face: no dictionaries, no locale dependency, and three new chrome content seats (settings.trigger / settings.header / settings.close) whose slot content also carries the accessible names (trigger text, dialog aria-labelledby, visually hidden close label). ui-settings-general returns as the owner of copy that belongs to no single feature: chrome content, the General section with its item slot, and the settings dictionaries. Slot types split homes — trigger/header/close/section live in the shell contract; the settings.general.item entry moves to the locale package (the common dependency of every item registrant), with ui-theme consuming it through a re-export seam; the verbatim duplicate merges are gone and the dependency graph is a clean DAG.
203 lines
4.3 KiB
CSS
203 lines
4.3 KiB
CSS
/* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar
|
|
foot trigger row + centered 1080x700 modal panel. The trigger reproduces
|
|
the former sidebar foot geometry (49px wide row / 36px rail circle); the
|
|
panel is a two-column layout — 188px nav rail + content column with a
|
|
54px header and the 24px-padded options area. */
|
|
|
|
/* Trigger row (former sidebar foot, figma 133:7668): 49px hover pill. */
|
|
.trigger {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
height: 49px;
|
|
margin: 8px 0 0;
|
|
padding: 0 2px 0 6px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
color: var(--dsw-alias-label-primary);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.trigger:hover {
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
/* Rail trigger: the same 36x36 circle box as the other rail controls. */
|
|
.trigger.rail {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin: 18px 0 10px;
|
|
justify-content: center;
|
|
gap: 0;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.triggerLabel {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Full-viewport layer (figma Mask 501:29946 #000@24%, no blur). */
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--dsw-alias-bg-mask-1);
|
|
}
|
|
|
|
/* Panel (figma Settings 501:29947): 1080x700, r24, white, lv3 shadow
|
|
(figma effects match --dsw-shadow-lv3 exactly). */
|
|
.panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
width: 1080px;
|
|
height: 700px;
|
|
max-width: calc(100vw - 48px);
|
|
max-height: calc(100vh - 48px);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
background: var(--dsw-alias-bg-layer-1);
|
|
box-shadow: var(--dsw-shadow-lv3);
|
|
}
|
|
|
|
/* Nav rail (figma .Setting-nav 501:29958): 188 wide, pad (12,22,12,0),
|
|
gap 18, no own fill — the panel white shows through. */
|
|
.nav {
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
width: 188px;
|
|
padding: 22px 12px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Title row (figma 501:29959): 16/500 lh24, 12px side padding. */
|
|
.navTitle {
|
|
padding: 0 12px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
font-weight: 500;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
/* Cell stack (figma 501:29961): gap 4. */
|
|
.navList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Nav cell (figma .Setting-nav-cell 501:29962): 164x40, r12, pad
|
|
(12,9,16,9), gap 8; label 14/400 lh22; selected fill #EBEEF2. */
|
|
.navCell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 40px;
|
|
padding: 9px 16px 9px 12px;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
font-weight: 400;
|
|
color: var(--dsw-alias-label-primary);
|
|
text-align: left;
|
|
}
|
|
|
|
.navCell:hover {
|
|
background: var(--dsw-specific-sidebar-nav-item-hover);
|
|
}
|
|
|
|
.navCell.active {
|
|
background: var(--dsw-specific-sidebar-nav-item-active);
|
|
}
|
|
|
|
.navIcon {
|
|
flex: none;
|
|
}
|
|
|
|
.navLabel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Content column (figma Content 501:29980): header + options. */
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Header (figma .Header 501:29981): h54, pad (10,20,14,8), close right. */
|
|
.header {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
height: 54px;
|
|
padding: 20px 14px 8px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Close button (figma .Icon_container 501:29982): 28x28, r28, 14px glyph. */
|
|
.close {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 28px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.close:hover {
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
/* Options area (figma Options 501:29983): pad (24,0,24,8), scrolls. */
|
|
.options {
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 0 24px 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Visually-hidden text seat (close button accessible name from slot content). */
|
|
.hiddenLabel {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|