calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai1ywm5xi: Add the Discover sheet with featured, trending, find experts panels and the appearance switch

Browse Source
This commit is contained in:
calcazar
2026-10-20 08:49:11 -06:00
parent 695ebe1095
commit cfdca1f270
10 changed files with 307 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/sheet.css
+62
View File
@@ -88,6 +88,68 @@
.sheet-composer .composer-emoji { left: 0; right: 0; width: auto; top: auto; bottom: 64px; }
.sheet-composer .composer-att.composer-att-indent { margin-left: 0; }
/* Discover sheet (More): soft depth rows, then the Appearance switch. */
.sheet-discover { gap: 14px; }
.sheet-discover .sheet-body { gap: 16px; padding: 4px 4px 4px; overflow-y: auto; }
.sheet-discover .btn-depth { position: relative; overflow: hidden; isolation: isolate; min-height: 72px; }
.sheet-discover .btn-depth-chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: color .3s; }
.sheet-discover .btn-depth:hover .btn-depth-chev,
.sheet-discover .btn-depth:focus-visible .btn-depth-chev { color: var(--on-accent); }
.depth-stack { display: flex; flex: none; }
.depth-stack .hex-avatar { margin-left: -10px; }
.depth-stack .hex-avatar:first-child { margin-left: 0; }
.sheet-sub { margin: 4px 0 -6px 4px; color: var(--ink-3); }
.seg-depth {
display: flex;
gap: 4px;
padding: 4px;
border-radius: var(--r-card);
background: var(--bg);
box-shadow: inset 4px 4px 10px var(--neu-d), inset -4px -4px 10px var(--neu-l);
}
.seg-depth button {
appearance: none;
border: 0;
cursor: pointer;
flex: 1;
height: 44px;
border-radius: var(--r-ctl);
background: transparent;
color: var(--ink-3);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color .25s, color .25s, box-shadow .25s;
}
.seg-depth button svg { width: 18px; height: 18px; }
.seg-depth button.on {
background: var(--bg);
color: var(--ink);
box-shadow: 4px 4px 10px var(--neu-d), -4px -4px 10px var(--neu-l);
}
.seg-depth button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Panel sheets: 80% height, the desktop panels without their tile chrome or repeated heading. */
.sheet-panel { height: 80%; max-height: 80%; }
.sheet-panel .sheet-body { flex: 1; overflow: hidden; }
.sheet-panel .sheet-body > .tile {
flex: 1;
min-height: 0;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.sheet-panel .sheet-body > .tile > .panel-head { display: none; }
.sheet-panel .search-results,
.sheet-panel .trend-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.sheet-panel .search-field input { font-size: 16px; }
.sheet-panel-featured .sheet-body { overflow-y: auto; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.sheet, .sheet-bg { animation: none !important; }
}