191 lines
4.3 KiB
SCSS
191 lines
4.3 KiB
SCSS
.browserLayer {
|
|
display: none;
|
|
}
|
|
|
|
@include respond-down(mobile) {
|
|
.browserLayer {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: grid;
|
|
z-index: calc(var(--z-popover, 20) + 2);
|
|
background: color-mix(in srgb, var(--color-canvas) 96%, black 4%);
|
|
}
|
|
|
|
.sheet {
|
|
min-height: 100dvh;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, transparent) 0%, transparent 8rem),
|
|
color-mix(in srgb, var(--color-canvas) 97%, black 3%);
|
|
overflow: clip;
|
|
}
|
|
|
|
.sheetHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
|
|
}
|
|
|
|
.headerActions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.brandBlock {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.sectionLabel {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.brandEyebrow {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.brandTitle {
|
|
@include text-title;
|
|
color: var(--color-text);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.brandContext {
|
|
@include text-caption;
|
|
color: var(--color-text-subtle);
|
|
}
|
|
|
|
.closeButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--control-size-md);
|
|
height: var(--control-size-md);
|
|
padding: 0;
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
|
color: var(--color-text-subtle);
|
|
}
|
|
|
|
.createButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
min-height: var(--control-size-md);
|
|
padding: 0 var(--space-3);
|
|
border: 1px solid color-mix(in srgb, var(--color-border-strong, var(--color-border)) 82%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--color-surface) 94%, var(--color-canvas) 6%);
|
|
color: var(--color-text);
|
|
box-shadow: var(--shadow-soft);
|
|
font: inherit;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.sheetBody {
|
|
min-height: 0;
|
|
display: grid;
|
|
gap: var(--space-5);
|
|
padding: var(--space-5) var(--space-5) calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
|
|
overflow: auto;
|
|
}
|
|
|
|
.sectionBlock {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.treeList,
|
|
.treeListItem {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.treeList {
|
|
display: grid;
|
|
gap: 0;
|
|
border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
|
}
|
|
|
|
.treeListNested {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.treeRow {
|
|
min-width: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
min-height: calc(var(--control-size-lg) + var(--space-3));
|
|
padding: var(--space-4) var(--space-2) var(--space-4) calc(var(--space-2) + (var(--tree-depth, 0) * var(--space-4)));
|
|
border: 0;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
text-align: left;
|
|
}
|
|
|
|
.treeRowActive {
|
|
color: var(--color-text);
|
|
background: color-mix(in srgb, var(--color-surface) 72%, transparent);
|
|
}
|
|
|
|
.treeRowBranch {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.treeRowLead,
|
|
.treeRowTrail {
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.treeRowTrail {
|
|
flex: 0 0 auto;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.treeLabel {
|
|
@include text-label;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.treeMeta {
|
|
@include text-caption;
|
|
min-width: 1rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.treeChevron {
|
|
color: var(--color-text-subtle);
|
|
}
|
|
|
|
.treeListNested > .treeListItem > .treeRow {
|
|
min-height: calc(var(--control-size-lg) + var(--space-1));
|
|
}
|
|
}
|