/* ============================================================ «Рандом» — полноэкранная лента случайных кадров. Требует /css/tokens.css. Спецификация: CLAUDE.md → «Дизайн-код GBS». Единственная страница архива, сделанная для большого пальца: кадр занимает весь экран, листается вертикально, под кадром — кто и когда его загрузил. Вокруг фотографии по-прежнему нет карточки (§1.2): рамки, скругления и тени здесь не появляются, кадр держит чёрный фон и размытая подложка из него же. ============================================================ */ /* Прокручивается лента, а не страница: иначе мобильный браузер прятал бы и показывал адресную строку, высота экрана менялась бы на каждом кадре, и прилипание кадров к экрану дёргалось. Класс висит на только здесь. */ .rnd-page { height: 100vh; height: 100dvh; min-height: 0; /* перебивает min-height:100vh из base.css */ overflow: hidden; } /* Высота раздаётся флексом, а не процентами. `height: 100%` здесь не работает в принципе: .main-content — флекс-элемент с min-height:auto, то есть он отказывается сжиматься ниже своего содержимого, содержимое меряется по ленте, лента меряется процентом от него — и вся цепочка разрешается в «авто». Кадры при этом встают в столбик по 280 px. */ .rnd-page .main-content { display: flex; flex-direction: column; min-height: 0; } .rnd { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--void); } .rnd-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rnd-stage::-webkit-scrollbar { display: none; } /* ---------- Кадр ---------- */ .rs { position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; /* Кадр показывается целиком или не показывается: пролистнуть два за раз одним махом пальца здесь некуда — это лента, а не список. */ scroll-snap-stop: always; } /* Подложка — тот же кадр, размытый и притушенный. Берётся из /micro (4.5 КБ), поэтому появляется мгновенно и заодно работает заглушкой, пока едет превью. */ .rs-bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-color: var(--void); filter: blur(32px) brightness(.45) saturate(.85); transform: scale(1.25); } .rs-frame { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0 auto; /* Двойное касание лайкает — браузеру оно ни к чему (иначе зум). */ touch-action: pan-y; } .rs-img { max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; transition: opacity var(--base) var(--ease); } .rs-img.is-ready { opacity: 1; } .rs-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; /* Подпись должна читаться и поверх снега на солнце: к низу почти чёрный, но первые две трети высоты — едва заметные, чтобы не съедать кадр. */ background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, .86)); } /* ---------- Подпись и лайк ---------- */ .rs-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--s4); padding: var(--s4); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); } .rs-meta { flex: 1 1 auto; min-width: 0; } .rs-who { color: var(--text-1); font-size: var(--t-lead); font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-when { margin-top: var(--s1); color: var(--text-2); font-size: var(--t-meta); line-height: 1.35; } /* Альбом — единственная дверь с этого экрана, поэтому он чип, а не ссылка в строке метаданных: 13 пикселей текста дают цель касания в 18, а §7 просит 44. Белая полупрозрачная подложка читается поверх любого кадра. */ .rs-album { /* inline-block, а не flex: у флекс-контейнера text-overflow не работает — длинное название («Трип 2025-2026 Восточная европпа») вылезло бы за чип. */ display: inline-block; max-width: 100%; height: 36px; margin-top: var(--s2); padding: 0 var(--s3); border-radius: var(--r-ui); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text-1); font-size: var(--t-meta); font-weight: 500; line-height: 36px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--fast) var(--ease); } .rs-album:hover { background: rgba(255, 255, 255, .24); text-decoration: none; } /* Подсказка про клавиши — только на первом кадре и только там, где есть клавиатура. На телефоне листают пальцем и объяснять это незачем. */ .rs-keys { display: none; } .rs-like { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-round); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text-1); cursor: pointer; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); } .rs-like:hover { background: rgba(255, 255, 255, .22); } .rs-like:active { transform: scale(.94); } /* Состояние не передаётся одним цветом (§7): сердце становится залитым. */ .rs-like[aria-pressed="true"] svg { fill: currentColor; } .rs-like-n { font-size: var(--t-micro); line-height: 1; font-variant-numeric: tabular-nums; } .rs-like-n:empty { display: none; } /* Сердце в центре кадра — ответ на двойное касание, и больше ничего. */ .rs-burst { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: var(--text-1); opacity: 0; pointer-events: none; } .rs-burst svg { width: 100%; height: 100%; fill: currentColor; } .rs-burst.is-on { animation: rs-pop 620ms var(--ease); } @keyframes rs-pop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.08); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } } /* ---------- Пока едет первая страница ---------- */ .rnd-boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s5); pointer-events: none; } .rnd-boot .skeleton { display: block; width: min(100%, 520px); height: min(70%, 640px); } /* ---------- Пустое состояние и конец ленты ---------- */ .rnd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); height: 100%; padding: var(--s5); text-align: center; } .rnd-empty p { color: var(--text-1); font-size: var(--t-lead); } /* ---------- Телефон: шапка ложится поверх кадра ---------- */ @media (max-width: 768px) { /* 56 пикселей сплошной панели съедали бы у кадра верх; здесь шапка висит над ним на градиенте — пункты остаются читаемыми, кадр остаётся целым. */ .rnd-page .app-header { position: fixed; inset: 0 0 auto 0; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); border-bottom: 0; } /* Полоса «модель не знает вас в лицо» поверх кадра — это карточка вокруг фотографии. Она найдёт человека на любой другой странице. */ .rnd-page .notice { display: none; } } /* ---------- Большой экран ---------- */ @media (min-width: 769px) { /* Кадр не растягивается на всю ширину монитора: горизонтальный снимок ростом в экран и так занимает середину, а подпись должна стоять у его края, а не у края стола. */ .rs-frame { width: min(100%, 1080px); } .rs-foot { padding: var(--s5); } .rs-keys { display: block; margin-top: var(--s2); color: var(--text-3); font-size: var(--t-micro); } .rs-keys kbd { font-family: inherit; font-size: inherit; color: var(--text-2); } }