/* ============================================================================ Нижняя капсула UGC-ленты — принятый канон (mock/pub-bottom-nav-canon.html). Подключается ТОЛЬКО на ?page=publications при DC_PUB_FEED=1 (page_header.php). Только для авторизованных: гостю разметка не печатается вовсе. Фирменный цвет — исключительно у центральной кнопки «Создать». ========================================================================== */ .pnav{ /* ФИРМЕННЫЙ ОРАНЖЕВЫЙ CLIKE.RU (логотип #ff3f00→#ff7f12→#ffb830, токен --ds-brand-1 #e8651c) */ --pn-c1:#ffb830; /* тёплый верхний блик */ --pn-c2:#ff8a18; /* янтарный */ --pn-c3:#ff6410; /* насыщенный оранжевый — доминирует */ --pn-c4:#f04400; /* глубокий низ */ --pn-c5:#c92f00; /* край */ --pn-ringdark:#25130d; /* тёплое тёмное кольцо 3px */ --pn-ringline:rgba(255,103,16,.9); /* яркая оранжевая линия 1.5px */ --pn-glow:rgba(255,92,18,.65); /* мягкое фирменное свечение */ --pn-inner-bottom:rgba(145,42,0,.35);/* внутренняя нижняя тень */ --pn-center:72px; /* ширина центральной колонки */ /* Центр РАБОЧЕЙ области, а не экрана: под админом слева стоит постоянная колонка сайдбара, и без сдвига капсула уезжала влево относительно карточек публикаций. --pub-work-left задаётся один раз в pub-feed.css; по умолчанию 0 — у обычного пользователя и на мобиле поведение прежнее. */ position:fixed;left:calc(50% + var(--pub-work-left,0px) / 2);transform:translateX(-50%); /* --dc-vv-shortfall — недобор высоты видимой области на первом кадре (в PWA iOS она приходит короче итоговой ровно на верхнюю safe-area). Для fixed-элемента top = V − bottom − height, поэтому при КОРОТКОМ V вернуть элемент на конечное место можно только УМЕНЬШИВ bottom. Проверка числами (V=873, height=62, базовый bottom=50, недобор 59): 50 − 59 = −9 → top = 873 − (−9) − 62 = 820 — та же координата, что и в устойчивом кадре (V=932, bottom=50 → top=820). Прибавление давало бы top=702, то есть удваивало скачок. Отрицательный bottom допустим: CSS его не ограничивает, элемент просто заходит под нижнюю границу короткой видимой области — и это ровно то, что нужно. В устойчивом состоянии, при открытой клавиатуре и вне установленного приложения величина равна нулю, поэтому обычное поведение не меняется. Safe-area сохранена. */ bottom:calc(16px + env(safe-area-inset-bottom,0px) - var(--dc-vv-shortfall,0px)); z-index:5000; width:min(392px,calc(100vw - var(--pub-work-left,0px) - 52px));height:62px;box-sizing:border-box; background:rgba(24,23,33,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.05);border-radius:999px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--pn-center) minmax(0,1fr) minmax(0,1fr); align-items:center;padding:0 10px;box-shadow:0 10px 24px rgba(0,0,0,.38); /* ⚠ Боевой assets/style.css в @media(max-width:767px) задаёт `nav{display:grid; grid-template-columns:repeat(3,…);gap:10px}` — этот gap съедал ширину колонок и обрезал подпись «Сообщения». Зануляем явно (боевой файл не трогаем). */ gap:0;column-gap:0;row-gap:0} /* Узкие экраны: центр уже + меньше боковой padding, чтобы «Сообщения» не обрезались. */ /* Сдвиг рабочей области под постоянным сайдбаром. На ленте его задаёт pub-feed.css (body.pub-feed-open.dc-has-sidebar), но этот файл на экране личных сообщений не подключается — из-за чего капсула центровалась по ВСЕМУ окну, а не по рабочей области, и при переходе лента ↔ ЛС заметно смещалась. Задаём ту же величину для поверхности ЛС здесь: файл капсулы подключён на обеих страницах, значит и сдвиг у них общий. */ @media (min-width:768px){ body.dmx-surface.dc-has-sidebar{--pub-work-left:var(--ash-sidebar-w,264px)} } /* ============================================================================ КАПСУЛА И ПОСТОЯННЫЙ САЙДБАР — ОДНО ПРАВИЛО НА ВСЕ РАЗДЕЛЫ. Там, где сайдбар закреплён (десктоп), нижняя капсула не нужна: это одна и та же навигация в двух видах. Раньше её убирал страничный CSS личных сообщений и только для своей поверхности — на Ленте капсула оставалась в раскладке, и при переходе нижние 62 px то занимались, то нет. Правило живёт у владельца капсулы и от раздела не зависит; display, а не visibility — место в потоке не резервируется нигде. ========================================================================== */ @media (min-width:901px){ body.dc-has-sidebar nav.pnav{ display:none !important; } } @media (max-width:374px){.pnav{--pn-center:62px;padding:0 6px}} @media (max-width:340px){.pnav{--pn-center:56px}.pnav .pnav__item{letter-spacing:0}} /* Пункты — нейтральные серо-белые. Ссылки и кнопки выглядят одинаково. ⚠ Боевой style.css задаёт `nav a{margin-left:14px;padding:9px 12px;border:1px solid …; border-radius:12px}` — гасим здесь, чтобы легаси-правила не смещали пункты капсулы. */ .pnav a.pnav__item{margin:0;border:0;border-radius:14px} .pnav__item{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;min-height:50px;padding:4px 2px;border:0;background:transparent;cursor:pointer; color:#8f93a3;text-decoration:none;letter-spacing:.01em;white-space:nowrap; -webkit-tap-highlight-color:transparent; /* без font-shorthand: clamp()/наследование внутри `font:` ломает объявление */ font-family:Arial,Helvetica,sans-serif;font-weight:500;line-height:1;font-size:9.5px} /* ВСЕ состояния рисует ВНУТРЕННИЙ псевдоэлемент: подложка и focus-рамка физически не могут выйти за скруглённый торец капсулы и не обрезаются им. Ширина меню при этом не меняется. */ .pnav__item::after{content:"";position:absolute;inset:4px 5px;border-radius:14px;pointer-events:none} .pnav__item svg{position:relative;/* 24px — утверждённый размер значка капсулы. В файле стояло 22: расхождение нашлось замером на стенде, глазом такая разница не видна, но стандарт один. */ width:24px;height:24px;fill:none;stroke:#cfd2dd;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){ .pnav__item:hover{color:#c6c9d4} .pnav__item:hover svg{stroke:#fff} .pnav__item:hover::after{background:rgba(255,255,255,.05)} } /* Нажатие рисуем через КЛАСС .is-pressed (менеджер в page_footer), а НЕ через :active. Причина (root cause «серой области»): :active — это UA-состояние активации, которое ЗАЛИПАЕТ, когда тап открывает оверлей (шторка «Создать»/drawer) и перехватывает pointer — pointerup не приходит на кнопку, и её :active::after (светлая подложка) остаётся висеть после закрытия окна. CSS/синтетика :active снять не могут. Класс снимается на pointerup/pointercancel/lostpointercapture/blur/visibilitychange на уровне документа — гарантированно гаснет даже при перехвате указателя. */ .pnav__item.is-pressed{transform:scale(.95)} .pnav__item.is-pressed::after{background:rgba(255,255,255,.08)} /* Обычное нажатие (мышь/тач) рамки НЕ оставляет: постоянный контур рисует только :focus-visible, то есть клавиатурная навигация. border у пунктов нет вовсе — рамка существует в одном экземпляре, внутренним box-shadow псевдоэлемента. */ .pnav__item{border:0} .pnav__item:focus{outline:none} .pnav__item:focus-visible{outline:none} /* Клавиатурный контур — ТОЛЬКО при реальной клавиатурной модальности ввода (html[data-nav-input="keyboard"], ставит трекер в page_footer). Указатель/тач НЕ показывает его никогда — в т.ч. когда фокус ПРОГРАММНО возвращается на триггер после закрытия шторки «Создать»/drawer (pub-bottom-nav.js). Браузерная эвристика :focus-visible на таком .focus() иногда ложно срабатывает и оставляла «светлую рамку/область» вокруг кнопки — визуал развязан от неё и привязан к фактической модальности. */ html[data-nav-input="keyboard"] .pnav__item:focus-visible::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)} /* active — нейтральное осветление, БЕЗ фирменного цвета, свечения и подложки */ .pnav__item.is-active{color:#d6d9e2} .pnav__item.is-active svg{stroke:#fff} /* Центральная кнопка «Создать» — единственный фирменный элемент капсулы. */ .pnav__center{ display:flex;flex-direction:column;align-items:center;gap:6px; border:0;background:transparent;cursor:pointer;padding:0; /* ПОДЪЁМ ЦЕНТРА НА 12px — через position:relative/top, а НЕ transform. Почему: сама .pnav промотирована в композиторный слой (у неё transform:translateX(-50%) + backdrop-filter). Отдельный transform на центре создавал ВЛОЖЕННЫЙ слой, и на iOS при ПОЛНОЙ загрузке нового документа (full-nav Лента→Каналы) базовый слой с 4 боковыми пунктами компоновался первым, а слой центра — на кадр позже: центр «пропадал» на мгновение (визуальный «прыжок» меню). position:relative/top даёт ТУ ЖЕ геометрию (место в потоке зарезервировано там же, визуально сдвиг вверх на 12px), но БЕЗ отдельного слоя — центр красится вместе с капсулой, единым кадром. Ни timeout, ни opacity-хака. */ position:relative;top:-12px;color:#8f93a3; font-family:Arial,Helvetica,sans-serif;font-weight:500;line-height:1;font-size:10px} .pnav__plus{ position:relative;width:48px;height:48px;border-radius:50%; background:radial-gradient(circle at 50% 30%,var(--pn-c1) 0%,var(--pn-c2) 28%, var(--pn-c3) 58%,var(--pn-c4) 82%,var(--pn-c5) 100%); display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -5px 12px var(--pn-inner-bottom), 0 0 0 3px var(--pn-ringdark),0 0 0 4.5px var(--pn-ringline), 0 0 16px var(--pn-glow),0 8px 18px rgba(0,0,0,.48)} .pnav__plus::before{content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 45% 24%,rgba(255,255,255,.28),transparent 40%)} .pnav__plus svg{position:relative;width:24px;height:24px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round} .pnav__center.is-pressed .pnav__plus{transform:scale(.94);filter:brightness(.94)} .pnav__center:focus{outline:none} .pnav__center:focus-visible{outline:none} /* Фокус — ОДИН тонкий контур, а не третье кольцо поверх двух базовых. Раньше к кольцам 3px и 4.5px добавлялось ещё одно 7px, и вокруг кнопки читалось двойное-тройное кольцо. outline рисуется вне box-shadow и не смешивается с ним; геометрия не меняется. */ html[data-nav-input="keyboard"] .pnav__center:focus-visible .pnav__plus{ outline:2px solid var(--pn-ringline);outline-offset:3px} /* ⚠ Боевой assets/dc-responsive.css задаёт `.btn, button {font-size:13px !important}` на ≤360px — без защиты подписи капсулы раздуваются до 13px. Правила ниже должны идти ПОСЛЕ базовых: при равной специфичности выигрывает последнее. Боевой файл при этом не изменяется. */ .pnav .pnav__item{font-size:9.5px!important} .pnav .pnav__center{font-size:10px!important} @media (max-width:340px){.pnav .pnav__item{font-size:9px!important}} /* Клавиатура: капсула уходит вниз по существующему контракту dc-viewport-keyboard.js. */ body.dc-keyboard-open .pnav{transform:translate(-50%,220%)} /* Desktop-админ: кнопка «Меню» — no-op (сайдбар в доке и не сворачивается). aria-disabled ставит drawer-скрипт по реальной ширине; hover/курсор/focus-ring не должны обещать открытие меню. Вид кнопки в капсуле не меняется. */ .pnav__item[aria-disabled="true"]{pointer-events:none;cursor:default} /* Страховка: без класса авторизованной страницы капсула не показывается. .dmx-surface — экран личных сообщений, .chn-surface — поверхности Каналов: они используют ТУ ЖЕ капсулу (единый рендер в подвале), но своего pub-feed-auth не ставят (это класс поверхности ленты). Правило живёт В ЭТОМ head-файле, поэтому капсула показана уже на ПЕРВОМ кадре — без FOUC «скрыта→появилась». Раньше видимость на каналах включал body-загружаемый channels.css, и капсула мелькала скрытой. */ body:not(.pub-feed-auth):not(.dmx-surface):not(.chn-surface) .pnav{display:none} /* ---------- Счётчик непрочитанных ЛС в капсуле --------------------------------- Живое значение ставит assets/dmx-badge.js; сервер печатает начальное. */ .pnav__item{ position:relative; } /* Счётчик непрочитанных — КАНОНИЧЕСКИЙ .ds-counter-badge (assets/ds/components). Здесь остаётся только размещение над иконкой: собственная заливка и обводка кольцом цвета капсулы делали значок непохожим на такой же счётчик в боковом меню. */ .pnav__badge{ position:absolute; top:2px; left:calc(50% + 6px); } .pnav__badge[hidden]{ display:none!important; } /* ============================================================================ СВЕТЛАЯ ТЕМА. До этого блока в файле не было НИ ОДНОГО правила под светлую тему — капсула оставалась тёмной плашкой посреди светлой страницы, а подписи цвета #8f93a3 на ней не читались. Ниже — отдельный слой: он идёт последним, перекрывает только цвет, тень и кольцо, и не трогает ни геометрию, ни сетку, ни размеры шрифта. Поэтому тёмная тема остаётся байт-в-байт прежней, а safe-area, fixed-позиция и поведение при клавиатуре наследуются из базовых правил без изменений. Селектор светлой темы — тот же, что у остальной светлой темы ленты (assets/pub-feed.css), плюс поверхность личных сообщений: капсула там ТА ЖЕ, но своего pub-feed-auth экран ЛС не ставит, и без второго класса весь светлый блок мимо него проходил — капсула оставалась тёмной на светлой теме. :is() берёт специфичность самого «тяжёлого» аргумента, оба — классы, поэтому соотношение с базовыми правилами не изменилось и тёмная тема осталась прежней. ========================================================================== */ html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav{ /* Кольцо вокруг «Создать» — цвета САМОЙ капсулы. Тёмное кольцо #25130d на светлом фоне читалось как дырка, из-за чего кнопка выглядела оторванной от капсулы. Геометрию (подъём −12px, диаметр 48px) не меняем: она общая для обеих тем. */ /* ОДНО кольцо вместо двух. Раньше вокруг кнопки шли белое 3px и оранжевое 4.5px — на белой капсуле белое не читалось, а оранжевая линия выглядела второй обводкой. Кольцо-разделитель остаётся цвета капсулы, декоративная линия убрана (прозрачная). */ --pn-ringdark:rgba(255,255,255,.94); --pn-ringline:transparent; --pn-glow:rgba(232,101,28,.20); --pn-inner-bottom:rgba(160,52,0,.28); /* Стекло: белая полупрозрачная подложка + saturate. Без saturate размытый фон обесцвечивается и капсула уходит в грязно-серый. Непрозрачность .86, а не .7 — под лентой проезжают тёмные кадры публикаций, и на них более прозрачная подложка сереет. */ background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(17,24,39,.09); /* Мягкая тень вместо чёрного ореола 0 10px 24px rgba(0,0,0,.38). */ box-shadow:0 8px 28px rgba(17,24,39,.10),0 2px 6px rgba(17,24,39,.05)} /* Подписи и иконки — тёмно-серые, одного визуального веса. Иконка чуть темнее подписи: обводка 1.7px тоньше глифа и при равном цвете читалась бы бледнее. */ html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item{color:#454b57} html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item svg{stroke:#3f4552} /* Активный пункт — усиление того же серого, БЕЗ фирменного цвета: тот же принцип, что и в тёмной теме (оранжевый в капсуле принадлежит только кнопке «Создать»). */ html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item.is-active{color:#1b2028} html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item.is-active svg{stroke:#11161d} /* Состояния — фирменный оранжевый вместо белых плашек тёмной темы. Чёрных подложек в светлой теме нет ни в одном состоянии. */ @media (hover:hover){ html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item:hover{color:var(--ds-brand-1,#e8651c)} html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item:hover svg{stroke:var(--ds-brand-1,#e8651c)} html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item:hover::after{background:rgba(232,101,28,.08)} } html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item.is-pressed::after{background:rgba(232,101,28,.13)} html[data-theme="light"][data-nav-input="keyboard"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__item:focus-visible::after{ box-shadow:inset 0 0 0 1.5px rgba(232,101,28,.55)} /* «Создать»: сам круг фирменный и в светлой теме не меняется — переопределяются только кольцо (через переменные выше) и тень, чтобы под кнопкой не висел чёрный ореол. */ html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__center{color:#454b57} html[data-theme="light"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__plus{ box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -5px 12px var(--pn-inner-bottom), 0 0 0 3px var(--pn-ringdark),0 0 0 4.5px var(--pn-ringline), 0 0 14px var(--pn-glow),0 6px 14px rgba(232,101,28,.30)} /* Белое кольцо фокуса на белой капсуле невидимо — в светлой теме оно оранжевое. */ html[data-theme="light"][data-nav-input="keyboard"] body:is(.pub-feed-auth,.dmx-surface,.chn-surface,.dc-l2-ctxbar) .pnav__center:focus-visible .pnav__plus{ outline:2px solid var(--ds-brand-1,#e8651c);outline-offset:3px} /* Центральный слот PLACEHOLDER (кабинетные страницы): оранжевая форма НА МЕСТЕ, пустая, некликабельная, не в фокусе; соседние пункты не двигаются (та же колонка --pn-center сетки). Действия у слота нет — только визуальная преемственность. */ /* PLACEHOLDER использует ТУ ЖЕ базу .pnav__center и .pnav__plus (см. выше) — геометрия, круг, тень, translate идентичны ACTIVE. Здесь только: не интерактивна + резерв высоты подписи (пустая метка той же высоты, что «Создать»). Никакой отдельной тени/круга. */ .pnav__center--placeholder{ cursor:default; pointer-events:none; } .pnav__ph-lbl{ font-size:10px; line-height:1; } /* высота = подписи ACTIVE → колонки равны */ /* Item 7: убрать некрасивое native tap/focus-выделение. У .pnav__center (Создать) не было -webkit-tap-highlight-color → после тапа появлялся большой системный прямоугольник. Гасим для ВСЕХ интерактивных элементов капсулы + снимаем UA-appearance у кнопок. Клавиатурный :focus-visible остаётся аккуратным локальным (правила выше не трогаем). */ .pnav :is(a,button){ -webkit-tap-highlight-color:transparent; } .pnav button{ appearance:none; -webkit-appearance:none; }