/* screens-more.css — слой экрана поверх brand.css (DESIGN-3.md). Только var(), только transform/opacity в движении. Экраны: «Ещё» (профиль), «Учёба» / «Глаголы» и их игры, «Смотрим вместе», «Расклад», «Разбор по дате» / «Вместе», шторка уведомлений, шторка идей. Классы экранов: .me-page .learn-page .verbs-page .films-page .astro-page .bd-page; шторки — по их собственным классам (.notif-list, .vh-row, .game-opts). */ /* ---------- общее: лид-иконка строки/карточки-входа (как .quiz-card .qc-ic) ---------- */ .me-page .lead, .learn-page .lead, .verbs-page .lead, .films-page .lead, .notif-row .lead { width: 44px; height: 44px; border-radius: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--us-soft); color: var(--text); font-size: 20px; } /* орб пустого состояния несёт иконку — она белая на авроре */ .empty .orb { color: #fff; } .empty .orb .ic { stroke-width: 1.6; } /* ---------- «Ещё»: карточка человека, входы, строки настроек ---------- */ .me-hero { display: flex; align-items: center; gap: 14px; padding: 22px 18px; } .me-hero .avatar.me-ava { width: 60px; height: 60px; font-size: 24px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), var(--shadow); } .me-hero-txt { min-width: 0; flex: 1; } .me-name { font-size: 30px; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-meta { margin-top: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; } .me-entries { padding: 4px 16px; } .me-entry { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; transition: transform var(--t-fast) var(--ease-out); } .me-entry:active { transform: scale(.985); } .me-entry .lbl { min-width: 0; } .me-entry .lbl small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-page .set-row { padding: 12px 2px; } .me-page .set-row .lbl small { line-height: 1.4; } .me-page .section-title { margin-top: 10px; display: flex; align-items: center; gap: 6px; } .me-page .seg { padding: 3px; } .me-page .seg button { min-height: 36px; font-size: 13px; } /* тумблер в админ-строке «прикреплять место»: подпись растягивается, тумблер справа */ .me-page .set-row > div > .lbl { flex: 1; } /* Оригинал переведённой идеи партнёра — под переводом с небольшим отступом */ .idea-row .idea-orig { margin-top: 4px; } /* ---------- «Учёба» / «Глаголы»: герой с кольцом, вход, слова ---------- */ .learn-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 20px 18px; } /* Кольцо — первый ребёнок: при «1fr auto» оно забирало остаток ширины, а текст шёл max-content и упирался в правый край («Тренировка» срезана). Теперь кольцо по размеру, текст — остаток. */ .learn-hero > .btn { grid-column: 1 / -1; } .learn-hero .ring .track { stroke: rgba(255, 255, 255, .16); } .learn-hero .ring-val { color: #fff; font-size: 17px; } .learn-hero-txt { flex: 1; min-width: 140px; } .learn-hero-title { font-size: 26px; line-height: 1.05; margin-bottom: 8px; } /* .hero-card .display (brand.css, 36px) той же специфичности и раньше перебивал 26px */ .learn-hero .learn-hero-title.display { font-size: 26px; overflow-wrap: break-word; } /* Статус дня «не пройдено» — строка из словаря, написанная для середины фразы; заголовком героя она стояла со строчной. Заглавную даёт первая буква, текст словаря не трогаем. */ .learn-hero-title::first-letter { text-transform: uppercase; } .learn-hero .streak-badge { background: rgba(255, 255, 255, .16); box-shadow: var(--shadow-inset); } /* Герой тёмный в обеих темах, а --gold-text светлой темы — тёмное золото для светлого фона: «День 3» на авроре почти пропадал. Берём золото тёмной темы (app.css, --gold). */ .learn-hero .streak-badge { color: #E0B968; } .learn-hero-sub { margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; } .learn-hero > .btn-primary { flex: none; } .learn-hero-acts { display: flex; flex-direction: row; gap: 8px; grid-column: 1 / -1; } .learn-hero-acts .btn { flex: 1; min-width: 0; } .learn-hero-acts .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .26); } .learn-entry { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: transform var(--t-fast) var(--ease-out); } .learn-entry:active { transform: scale(.985); } .learn-entry-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .learn-entry-tx b { font-size: 15.5px; } .learn-entry-tx small { font-size: 12.5px; line-height: 1.35; } /* карточка слова: слово — display-шрифтом, перевод — muted, статус — чип */ .vh-w { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; } .vh-row { padding: 10px 2px; border-bottom: 1px solid var(--hairline); } .vh-row .speak-btn { width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; } .vh-row .speak-btn:active { transform: scale(.9); } .vh-chip { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } /* «новое»: в app.css фон color-mix(var(--us)) — а --us в бренде градиент, color-mix от него недействителен, и чип оставался без плашки рядом с «ур. 1» в плашке */ .vh-chip.new { background: var(--him-soft); color: var(--him); } .vh-hard { color: var(--gold); vertical-align: -2px; } /* Мия учит русский: кириллица Cormorant стилизована («л» как Λ, «д» как Δ) и мешает узнавать буквы — её слова, вопрос игры и поле ввода набираем шрифтом текста (класс ставит vocab.js, learnsRu) */ .vh-ru .vh-w { font-family: var(--font-body); font-size: 18px; letter-spacing: 0; line-height: 1.2; } .vh-ru .game-word.display, .vh-ru .game-type-input { font-family: var(--font-body); letter-spacing: 0; } /* «Мои слова» на «Учёбе» — в карточке, как «На повторении»; первый день без верхнего отступа */ .learn-history > .vh-day:first-child { margin-top: 2px; } .vh-stat .ic { margin-right: 4px; } /* день в истории слов: «4 октября» шрифтом текста с ровными цифрами, а не ISO в Cormorant */ .date-head.vh-day { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; margin: 14px 2px 2px; } /* заголовок группы неправильных глаголов: название строкой, пояснение под ним */ .vt-grp { margin: 14px 2px 4px; } .vt-grp:first-child { margin-top: 2px; } .vt-grp b { display: block; font-size: 13px; font-weight: 700; color: var(--text); } .vt-grp small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; } .vt-irr-mark .ic { color: var(--gold); vertical-align: -2px; } .vt-veil .ic { color: var(--muted); } .vh-stat { border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; min-height: 34px; display: inline-flex; align-items: center; } .learn-note { line-height: 1.5; } /* игры: варианты — как кнопки квиза, верный/неверный — токены */ .game-word { font-size: 32px; font-weight: 600; } .game-word .speak-btn { width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; vertical-align: middle; } .game-opts button { min-height: 48px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--r-sm); font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .game-opts button:active { transform: scale(.98); } .game-opts button.right { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 16%, var(--surface-2)); } .game-opts button.wrong { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, var(--surface-2)); } .game-type-input { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .vg-chip { border-radius: var(--r-sm); font-weight: 600; transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .vg-tag { font-weight: 700; } /* таблица времён: клетки — бумага на бумаге, без жёсткой рамки */ .verbs-page .vt-cell { border-color: var(--hairline); background: var(--surface-2); } .verbs-page .vt-verb-btn { border-color: var(--hairline); border-radius: var(--r-md); font-family: inherit; } .verbs-page .vt-verb-btn b { font-family: var(--font-display); font-weight: 600; font-size: 20px; } .verbs-page .vt-pron { border-color: transparent; } .verbs-page .vt-pron.active { background: var(--him-soft); border-color: transparent; } .verbs-page .seg button { flex: 1; } /* ---------- «Смотрим вместе»: постер 16 с тенью, полоса досмотра — аврора ---------- */ .film-addcard { padding: 14px 16px 12px; } .film-addcard .film-add { margin-bottom: 0; } .film-card { padding: 10px; border-radius: var(--r-lg); margin-bottom: 0; } .film-row { margin-bottom: 10px; } .film-row:last-of-type { margin-bottom: 0; } /* кнопки своего ролика (колокол, урна) — внутри карточки в правом верхнем углу, а не колонкой снаружи: так все карточки ленты одной ширины. Текст карточки уступает им место. */ .film-row.has-acts { position: relative; } .film-row.has-acts .film-card { padding-right: 44px; } .film-row.has-acts .film-row-acts { position: absolute; top: 4px; right: 4px; gap: 0; } .film-row-acts .mini-del, .film-row-acts .mini-bell, .film-arc-acts .mini-del { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } .film-row-acts .mini-del, .film-arc-acts .mini-del { color: var(--muted); opacity: .8; } /* зона нажатия ≥44 при видимых 36: невидимый слой на 4px шире каждой стороны. Между колоколом и урной зазор 8px — ровно два таких поля, чтобы зоны соседних кнопок не налезали друг на друга. */ .film-row-acts .mini-del, .film-row-acts .mini-bell, .film-arc-acts .mini-del { position: relative; } .film-row-acts .mini-del::after, .film-row-acts .mini-bell::after, .film-arc-acts .mini-del::after { content: ''; position: absolute; inset: -4px; } .film-row.has-acts .film-row-acts { gap: 8px; } /* настройки озвучки свёрнуты в одну строку со сводкой выбранного */ .film-dubbox { margin-top: 8px; } .film-dubbox > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-height: 44px; padding: 4px 0; -webkit-tap-highlight-color: transparent; } .film-dubbox > summary::-webkit-details-marker { display: none; } .film-dubbox-ttl { font-size: 13.5px; font-weight: 700; } .film-dubbox-chev { color: var(--muted); transition: transform var(--t-fast); } .film-dubbox[open] .film-dubbox-chev { transform: rotate(90deg); } .film-dubsum { flex-basis: 100%; font-size: 12px; } .film-dubbox .film-dubpick { margin-top: 2px; } /* два серых пояснения формы — один отступ, кегль и цвет: раньше одно было 11.5 с прозрачностью, другое 12 с полями 2px и стояло на 2px правее */ .film-addcard .film-dubnote, .film-addhint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; opacity: 1; } .film-w { display: inline-flex; align-items: center; gap: 4px; } /* подпись над рядом выбора озвучки; «Без озвучки» прячет ряд вместе с подписью */ .film-dub-grp { display: flex; flex-direction: column; gap: 4px; } .film-dub-grp[hidden] { display: none; } .film-thumb { border-radius: 16px; box-shadow: var(--shadow-lift); background-color: #1A1426; } .film-play { width: 34px; height: 34px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .35); padding-left: 0; } .film-play .ic { stroke: #fff; fill: #fff; } .film-prog { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 0 2px 2px 0; background: var(--us); box-shadow: var(--glow-us); } .film-ttl { font-size: 14.5px; } .film-status { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } /* 12 между «Я …» и «Мия …»: при 6 две группы сливались в одну */ .film-status .chip { min-height: 24px; padding: 2px 9px; font-size: 11px; } .film-badge-new { color: var(--her); background: var(--her-soft); border-color: transparent; } .film-badge-proc { color: var(--him); background: var(--him-soft); border-color: transparent; } .film-badge-err { color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent); border-color: transparent; } .films-page .empty p { max-width: 320px; line-height: 1.5; } /* карточка ролика */ .film-player { border-radius: var(--r-lg); box-shadow: var(--shadow-lift); background: #1A1426; } .film-ttl-full { font-size: 22px; line-height: 1.15; margin: 12px 2px 6px; } .film-top .del { color: var(--muted); } .film-explain { border-left-color: var(--gold); } .film-transcript { border-color: var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow), var(--shadow-inset); } .film-transcript > summary { display: flex; align-items: center; gap: 6px; } .film-tline.on { background: var(--him-soft); } .film-view-row { border-radius: var(--r-sm); } .film-src { color: var(--him); border-color: transparent; } /* ---------- «Расклад»: космос остаётся, токены — бренда ---------- */ .astro-hero.hero-card { background: #1A1426; margin-bottom: 14px; } .astro-hero.hero-card .astro-hero-in h2 { color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 600; } .astro-hero.hero-card .astro-hero-in .hint { color: rgba(255, 255, 255, .74); } .astro-sym { display: flex; justify-content: center; } .astro-headline { font-weight: 600; } .ar-ico { background: var(--surface-2); border-radius: 10px; width: 28px; height: 28px; } .ar-block p, .ar-person p, .astro-advice li { max-width: 62ch; } .astro-page .card { box-shadow: var(--shadow), var(--shadow-inset); } .astro-syn .syn-bar > i { background: var(--us); } .syn-score { background: var(--us); -webkit-background-clip: text; background-clip: text; } .arc { border-radius: var(--r-sm); } /* Четыре аркана делили ряд поровну (flex-basis 0, по 64px под текст), и «Императрица», «Справедливость», «Умеренность» вылезали за рамку плашки. Основа ширины — по содержимому: длинное имя берёт место у «Шута» и «Силы», а не помещающиеся вчетвером переносятся рядом. */ .ap-arc .arc { flex: 1 1 auto; } .astro-birth-head { font-weight: 600; font-size: 18px; } /* ---------- «Разбор по дате» / «Вместе»: герой-число на тёмном стекле, вкладки — сегменты ---------- */ .bd-hero.hero-card { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-xl); padding: 20px 16px; } .bd-hero.hero-card .bd-hero-main { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -.01em; } .bd-hero.hero-card .bd-hero-sub { color: rgba(255, 255, 255, .78); font-size: 13px; margin-top: 8px; } .bd-hero.hero-card .bd-hero-sub2 { color: rgba(255, 255, 255, .62); font-size: 12px; margin-top: 3px; } .bd-hero.hero-card .bd-hero-grid > div { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-sm); } .bd-hero.hero-card .bd-hero-grid span { color: rgba(255, 255, 255, .66); } .bd-hero.hero-card .bd-hero-grid b { color: #fff; } .bd-hero.hero-card .bd-note, .bd-hero.hero-card .hint { color: rgba(255, 255, 255, .7); } .bd-tabs.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); position: sticky; top: 0; z-index: 5; box-shadow: 0 0 0 6px var(--bg); } .bd-tabs.seg button { border: 0; border-radius: 999px; background: transparent; color: var(--muted); min-height: 36px; padding: 8px 12px; transition: background var(--t-base), color var(--t-base); } .bd-tabs.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .bd-whoswitch button { border-radius: 999px; border-color: transparent; background: var(--surface-2); min-height: 44px; } .bd-whoswitch button.active { background: var(--surface); box-shadow: var(--shadow), inset 0 -2px 0 var(--uc); border-color: transparent; } .bd-sec { border-radius: var(--r-md); border-color: var(--border); box-shadow: var(--shadow), var(--shadow-inset); } .bd-page .bd-jump .chip { min-height: 36px; } /* Липнет обёртка вкладок с фоном страницы (раньше — кольцо box-shadow у самого ряда): ряду нужна маска для гаснущего края, а маска срезала бы кольцо. Отрицательные поля держат прежний ритм страницы. */ .bd-tabs-wrap { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0; margin: -6px 0; } .bd-tabs-wrap .bd-tabs.seg { position: static; box-shadow: none; } .bd-tabs.more-r, .bd-jump.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .bd-tabs.more-l, .bd-jump.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); } .bd-tabs.more-l.more-r, .bd-jump.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } /* Переходы прилипают вплотную под вкладками (высоту ставит stickyBar в breakdown.js), при прокрутке вниз уезжают под них, при прокрутке вверх возвращаются. */ .bd-page .bd-jump { top: var(--bd-tabs-h, 56px); transition: transform var(--t-base, .2s), opacity var(--t-base, .2s); } .bd-page.jump-hide .bd-jump { transform: translateY(-100%); opacity: 0; pointer-events: none; } .bd-page .bd-jump .chip { gap: 5px; font-size: 13px; font-weight: 600; padding: 6px 12px; } .bd-page .bd-jump .chip span { font-size: 15px; line-height: 1; } .bd-warn { background: var(--gold-soft); } .bd-chip.warn { background: var(--gold-soft); } .bd-why { background: var(--surface-2); } .bd-center { background: var(--surface-2); border-radius: var(--r-sm); } .bd-body .bd-note, .bd-body p, .bd-saying, .bd-say, .bd-trust { max-width: 62ch; } .bd-page .empty .orb:empty { animation: orbBreathe 1.6s ease-in-out infinite; } /* ---------- уведомления: строки с лидами по типу, время muted, непрочитанные — точка ---------- */ .notif-row { align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--hairline); gap: 12px; } .notif-row .lead { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; } .notif-row time { color: var(--muted); font-variant-numeric: tabular-nums; } .notif-row.unread { position: relative; } .notif-row.unread .notif-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--her); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--her-soft); } .notif-title { color: var(--muted); } .notif-text { color: var(--text); } .notif-nudge { display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border-radius: 12px; } .await-row { border-radius: var(--r-md); } .notif-list .date-head { margin-top: 12px; } /* строка с сегментом (голос муж./жен.): сегмент компактный, подпись получает ширину */ .set-row .seg { flex: 0 0 auto; } .set-row .seg button { padding: 7px 10px; font-size: 13px; min-height: 36px; } .set-row .lbl { flex: 1 1 130px; min-width: 0; } /* Колоночная строка (подпись, под ней поле/кнопки). Раньше это был инлайн flex-direction:column, и правило выше превращало flex-basis 130px в ВЫСОТУ подписи: в «Как подключить Claude», «Геопозиции», «Мой chat ID» зияли пустоты по ~130 px. */ .set-row.col { flex-direction: column; align-items: stretch; gap: 8px; } .set-row.col > .lbl { flex: none; } /* Строка «подпись + выбор»: на 390 px выбор рядом сжимал подпись до слова в строку («Then» вместо «Theme», «Change / PIN»). Подпись занимает первую строку (рядом только лид 44 + зазор 12), выбор переносится под неё во всю ширину. */ .set-row.stack { flex-wrap: wrap; row-gap: 10px; } .set-row.stack > .lbl { flex: 1 1 calc(100% - 56px); } .set-row.stack > .lbl:first-child { flex-basis: 100%; } /* строка без лида (дайджест, маскировка) */ .set-row.stack > .seg { flex: 1 1 100%; } .set-row.stack > .seg button { flex: 1; } .set-row.stack > .input { flex: 1 1 0; min-width: 0; } /* обёртка секции ради метки admin-only — внутри тот же ритм, что у .page */ .me-group { display: flex; flex-direction: column; gap: 14px; } /* провайдер ИИ: точка-индикатор вместо эмодзи-кружка */ .prov-val { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; text-align: right; } .prov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); margin-right: 6px; vertical-align: 1px; } .prov-val .prov-dot { margin-right: 0; } .prov-subscription, .prov-api_key { background: var(--ok); } .prov-openai_fallback { background: var(--gold); } .prov-none { background: var(--danger); } /* ---- «Файлы» (посылки) и рукописный почерк — перенесено из v1 (25.08.2026) при переезде основного адреса на 2.0. Полоска загрузки привязана к .up-prog: глобальный .up-bar уже занят загрузкой роликов (app.css), и правило отсюда сломало бы ту полоску. ---- */ /* ---- Раздел «Файлы»: посылки --------------------------------------------------- Оформление намеренно повторяет карточки роликов и записей дневника: раздел новый, а язык интерфейса тот же, иначе он читался бы как чужая вставка. */ .up-card { padding: 14px 14px 12px; margin-bottom: 12px; } .up-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .up-head b { font-size: 14px; } .up-head time { font-size: 11.5px; color: var(--muted); margin-left: auto; } /* урна — линейная иконка набора (была эмодзи 🗑), приглушённым цветом и с пальцем 36 px */ .up-del { background: none; border: 0; color: var(--muted); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: -6px -8px -6px 0; } .up-del:active { color: var(--text); } .up-note { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; } /* перевод подписи: оригинал и тумблер прижаты к подписи, а не разнесены ритмом карточки */ .up-orig { margin: -4px 0 8px; } .up-orig-t { margin: -6px 0 8px; } .up-meta { font-size: 11.5px; color: var(--muted); margin: 8px 0 10px; } .up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } @media (max-width: 380px) { .up-grid { grid-template-columns: repeat(2, 1fr); } } .up-tile { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--border); text-decoration: none; color: inherit; display: block; } .up-tile img, .up-tile video { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #000; } .up-tile > span { display: block; padding: 6px 7px 7px; font-size: 10.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; padding: 8px; text-align: center; gap: 2px; } .up-doc b { font-size: 17px; font-weight: 800; color: var(--us); } /* Имя файла — РОВНО две строки с многоточием. Раньше стоял max-height с overflow:hidden, и третья строка обрезалась посередине буквы: выглядело как ошибка вёрстки, а не как сокращение. line-clamp обрывает по строке и сам ставит многоточие. */ .up-doc > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; padding: 0; border: 0; } .up-doc i { font-style: normal; font-size: 10px; color: var(--muted); } /* Битый или недокачанный файл не должен показывать чёрный прямоугольник: подложка в цвет карточки честнее — видно, что превью нет, а не «видео без картинки». */ .up-tile img { background: var(--bg); } .up-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 0; color: #fff; background: rgba(20,16,14,.6); font-size: 12px; cursor: pointer; z-index: 2; } .up-add { width: 100%; } /* Публичная ссылка — блок виден только в админ-режиме (у Мии его нет в разметке). */ .up-share { width: 100%; margin-top: 8px; } .up-link { margin-top: 10px; padding: 10px 11px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); border: 1px solid var(--border); } .up-link-row { display: flex; gap: 7px; } /* 16 px, а не 12: поле мельче 16 px iOS увеличивает при фокусе — а его фокусирует и касание, и запасной путь копирования (select()). Пока в index.html стоит запрет зума, это незаметно, но снять запрет можно, только когда все поля не мельче 16 px (передача play, волна 4). */ .up-link-row .input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; } .up-link-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--muted); } .up-link-meta button { margin-left: auto; background: none; border: 0; color: var(--danger); font-size: 11.5px; font-weight: 700; cursor: pointer; } /* Окно новой посылки */ .up-drop { display: block; text-align: center; padding: 22px 14px; border-radius: var(--r-md); border: 1px dashed var(--border); background: var(--bg); cursor: pointer; } .up-drop-ico { font-size: 26px; } .up-drop-t { font-size: 15px; font-weight: 700; margin: 4px 0 2px; } .up-picked { margin-top: 8px; } .up-pick-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .up-pick-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .up-pick-row span { color: var(--muted); font-size: 11.5px; } .up-pick-row button { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; } /* Полоса загрузки */ .up-prog { padding: 12px 14px; margin-bottom: 10px; } .up-prog-t { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; } .up-prog .up-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; } .up-prog .up-bar i { display: block; height: 100%; background: var(--us); border-radius: 99px; transition: width .25s ease; } /* Выбор оформления публичной страницы при сборке посылки. */ .up-themes { display: flex; gap: 8px; margin-bottom: 10px; } .up-theme { flex: 1; padding: 12px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); cursor: pointer; text-align: center; transition: border-color .2s, background .2s; } .up-theme b { display: block; font-size: 20px; line-height: 1.2; } .up-theme span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 2px; } .up-theme.active { border-color: var(--us); background: color-mix(in srgb, var(--us) 10%, transparent); } .up-theme.active span { color: var(--text); } .up-badge { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--text); } /* Заголовок поля в окне сборки посылки. Раньше у полей были только серые подсказки ВНУТРИ — снаружи окно читалось как «ничего не подписано». */ .up-lbl { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 6px; } .up-lbl:first-of-type { margin-top: 4px; } /* Прячем file-input, НЕ убирая его из потока отрисовки: display:none у такого поля внутри