mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-06 03:14:00 +00:00
wip(mobile): checkpoint polish round in progress
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01VVYRAqiQj9Y1V9ZfG1RcDH
This commit is contained in:
29 files changed
+9600
-205
No files matched your search
@@ -794,3 +794,187 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Tablet leading pane: header · on the record · chat (DESIGN §12.4) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
.mp-feed,
|
||||
.mp-ch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mp-fh {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mp-fh,
|
||||
.mp-ch {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
color: var(--ink-3);
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.mp-fh > span:first-child,
|
||||
.mp-ch > span:first-child {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.mp-fh .i {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.mp-feed-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 8px 14px 12px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.mp-fi.in {
|
||||
animation: msg-in 420ms var(--spring) both;
|
||||
}
|
||||
|
||||
.mp-fcap {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border-radius: 14px;
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
background: rgba(235, 199, 119, 0.06);
|
||||
box-shadow: inset 0 0 0 0.5px rgba(235, 199, 119, 0.35);
|
||||
}
|
||||
|
||||
.mp-fcap.first {
|
||||
background: rgba(235, 199, 119, 0.1);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(235, 199, 119, 0.8),
|
||||
0 0 22px rgba(235, 199, 119, 0.14);
|
||||
}
|
||||
|
||||
.mp-fcap .cone-thumb {
|
||||
flex: none;
|
||||
width: 96px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mp-fbody {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.mp-fbody .fe {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--b-inside);
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
--seal-ink: #2a1a00;
|
||||
}
|
||||
|
||||
.mp-fbody b {
|
||||
font-size: var(--t-foot);
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.mp-fbody small {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.5625rem;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.mp-side-title {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.mp-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
max-height: 46%;
|
||||
margin-top: 6px;
|
||||
border-top: 0.5px solid var(--hairline);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.mp-ch {
|
||||
display: flex;
|
||||
flex: none;
|
||||
padding-top: 12px;
|
||||
border-top: 0.5px solid var(--hairline);
|
||||
}
|
||||
|
||||
/* Everything at once on a tablet: no segmented switch. */
|
||||
.mp-side-head,
|
||||
.mp-pane[data-pane='record'],
|
||||
.mp-pane[data-pane='captures'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mp-pane[data-pane='chat'] {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.mp-pane[data-pane='chat'] .mp-chat,
|
||||
.mp-pane[data-pane='chat'] .mp-ext {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Chat reads from the top, newest at the bottom. */
|
||||
.mp-chat {
|
||||
justify-content: flex-start;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.mp-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.co.co-tall {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.co.co-tall .co-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
justify-content: flex-start;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
pointer-events: auto;
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
|
||||
mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
|
||||
}
|
||||
|
||||
.co.co-tall .cl.old {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
@@ -1003,3 +1003,52 @@ input[type='range'].slider::-moz-range-thumb {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Content scrolls under the floating glass: a soft scrim behind the tab bar
|
||||
(and its accessory) keeps the last rows legible as they pass beneath. */
|
||||
.app:is([data-tab='today'], [data-tab='rooms'], [data-tab='you'])
|
||||
.tabbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: calc(-12px - var(--safe-l));
|
||||
right: calc(-12px - var(--safe-r));
|
||||
bottom: calc(-1 * var(--tabbar-gap));
|
||||
height: calc(var(--tabbar-h) + var(--tabbar-gap) + 46px);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(5, 7, 11, 0.92) 0,
|
||||
rgba(5, 7, 11, 0.7) 45%,
|
||||
rgba(5, 7, 11, 0) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app:is([data-tab='today'], [data-tab='rooms'], [data-tab='you'])
|
||||
.tabbar.has-accessory::before {
|
||||
height: calc(var(--tabbar-h) + var(--tabbar-gap) + 104px);
|
||||
}
|
||||
|
||||
/* On a tablet the Globe tab's leading pane is a scrolling list too. */
|
||||
@media (min-width: 600px) {
|
||||
.app[data-tab='live'] .tabbar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: calc(-12px - var(--safe-l));
|
||||
right: calc(-12px - var(--safe-r));
|
||||
bottom: calc(-1 * var(--tabbar-gap));
|
||||
height: calc(var(--tabbar-h) + var(--tabbar-gap) + 46px);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(5, 7, 11, 0.92) 0,
|
||||
rgba(5, 7, 11, 0.7) 45%,
|
||||
rgba(5, 7, 11, 0) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app[data-tab='live'] .tabbar.has-accessory::before {
|
||||
height: calc(var(--tabbar-h) + var(--tabbar-gap) + 104px);
|
||||
}
|
||||
}
|
||||
@@ -186,10 +186,12 @@
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Floats above the whole time machine, so it never covers the readout. */
|
||||
.tm-callout {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 6px);
|
||||
bottom: calc(100% + 8px);
|
||||
transform: translateX(-50%);
|
||||
max-width: 82%;
|
||||
padding: 5px 9px;
|
||||
@@ -283,3 +285,47 @@
|
||||
white-space: normal;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* NOW snap: a ring pulses out of the playhead and the NOW pill. */
|
||||
.ribbon.tm.snap .tm-head::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: -5px 0 0 -5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px rgba(255, 69, 58, 0.9);
|
||||
animation: tm-snap 760ms var(--ease-out) both;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ribbon.tm.snap .tm-now {
|
||||
animation: tm-now-pop 520ms var(--spring) both;
|
||||
}
|
||||
|
||||
@keyframes tm-snap {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(6);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tm-now-pop {
|
||||
40% {
|
||||
transform: scale(1.12);
|
||||
box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ribbon.tm.snap .tm-head::after,
|
||||
.ribbon.tm.snap .tm-now {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user