qdpqut37t: Add the frosted bottom dock that likes and comments on the post on screen
This commit is contained in:
+50
-2
@@ -73,7 +73,7 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 84px;
|
||||
bottom: 90px;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -320,12 +320,60 @@
|
||||
}
|
||||
.reel-pill > * { pointer-events: auto; }
|
||||
|
||||
/* Bottom dock (spec "Bottom dock"): a frosted bar 16px above the bottom. Like and
|
||||
comments act on the post on screen. Disabled buttons stay fully opaque and use
|
||||
a solid muted ink instead of fading. */
|
||||
.dock {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
border-radius: 22px;
|
||||
background: var(--glass);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.8);
|
||||
backdrop-filter: blur(24px) saturate(1.8);
|
||||
box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line);
|
||||
}
|
||||
.dk {
|
||||
appearance: none;
|
||||
flex: 1;
|
||||
min-width: 44px;
|
||||
height: 52px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
transition: background-color .25s, color .25s;
|
||||
}
|
||||
.dk svg { width: 22px; height: 22px; flex: none; }
|
||||
@media (hover: hover) { .dk:hover:not(:disabled) { background: var(--tile-3); } }
|
||||
.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
||||
.dk.dk-like-on { color: var(--accent); }
|
||||
.dk-beat svg { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); }
|
||||
.dk:disabled { opacity: 1; color: var(--ink-3); cursor: default; }
|
||||
.btn-spark.btn-spark-fab.dk-plus { flex: 0 0 64px; width: 64px; height: 52px; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.is-cur .slide-meta,
|
||||
.is-cur .slide-quote-w,
|
||||
.slide-skel i,
|
||||
.slide-burst,
|
||||
.slide-hint svg,
|
||||
.reel-pill { animation: none !important; }
|
||||
.reel-pill,
|
||||
.dk-beat svg { animation: none !important; }
|
||||
.slide-art { transition: none !important; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user