, отдельно от
, поэтому конфликта нет. */
}
/* ============================================================
5. Доработки раскладки постов и списков (2026-07-11)
============================================================ */
/* --- (#4) Блок CODE в стиле цитаты: без верхнего хедера, кнопка Copy —
оверлеем в правом верхнем углу поверх кода. Контейнер (bg/border/radius)
уже совпадает с blockquote. --- */
.codebox {
position: relative;
}
.codebox p { /* штатный заголовок «Code: Select all» больше не нужен */
display: none;
}
.code-copy-btn {
position: absolute;
top: 7px;
right: 9px;
z-index: 3;
margin: 0;
background: rgba(18, 22, 32, 0.85);
backdrop-filter: blur(2px);
}
/* Типографика CODE — buквально те же стили, что и у quote (blockquote):
тот же шрифт (наследуется от .content через .codebox/.pre, а не Monaco из
базовой темы), тот же кегль/интерлиньяж/цвет, что задаёт правило
`blockquote { font-size: 12px; ... }`, и одинаковый padding: 5px. */
.codebox pre {
margin: 0;
font-family: inherit;
font-size: 12px;
line-height: 1.72;
font-weight: 400;
}
.codebox code {
font-family: inherit;
font-size: 12px;
line-height: 1.72;
font-weight: 400;
padding: 12px 5px;
color: var(--midnight-soft, #cbd5e1);
}
/* --- (#5) Блоки code / quote шире: правый край выровнен с кнопками поста;
у цитаты убираем и левый отступ — на одном уровне с текстом сообщения --- */
.postbody .content .codebox {
margin-left: 0;
margin-right: 0;
}
.postbody .content > blockquote {
margin-left: 0;
}
.postbody .content blockquote {
margin-right: 0;
}
/* --- (#6) Аватары: единый размер как у плейсхолдера no_avatar (96×96) --- */
.postprofile .avatar img {
width: 96px !important;
height: 96px !important;
max-width: 96px;
object-fit: cover;
border-radius: 8px;
}
/* --- Центрируем содержимое профиля в видимом блоке (левый край поста →
вертикальный разделитель). Колонка сдвинута вправо на 18px left-padding
у .post > .inner; компенсируем правым паддингом (box-sizing: border-box). --- */
.postprofile {
padding-right: 18px;
}
/* --- (#1) Дата поста — относительным временем в правом верхнем углу блока,
вплотную к верхнему краю (без отступа сверху) --- */
.post-when {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin: 0;
padding: 4px 12px;
font-size: 11px;
line-height: 1.4;
color: var(--midnight-muted);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--midnight-border);
border-top: 0;
border-right: 0;
border-radius: 0 0 0 10px;
text-decoration: none;
}
a.post-when:hover {
color: var(--midnight-accent-2);
}
.postbody .content:before {
content: "";
float: right;
width: var(--post-when-space, 88px);
height: 1px;
pointer-events: none;
}
/* --- Ранг — компактная «пилюль» на своём исходном месте (после аватара
и ника, перед Posts/Joined), вместо обычного текста. --- */
.postprofile > dd.profile-rank {
margin: 6px 0 8px !important;
padding: 2px 10px;
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--midnight-accent-2);
background: rgba(255, 88, 11, 0.12);
border: 1px solid rgba(255, 88, 11, 0.32);
border-radius: 999px;
overflow: visible;
}
.postprofile > dd.profile-rank img {
max-height: 14px;
vertical-align: middle;
}
/* --- (#9) Статистика профиля: подпись слева, значение справа; компактно --- */
.postprofile .profile-posts,
.postprofile .profile-joined {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
text-align: left;
margin: 3px 10px;
}
.postprofile .profile-posts strong,
.postprofile .profile-joined strong {
white-space: nowrap;
}
/* --- .post — контекст позиционирования для кнопок (в самый низ блока).
.postbody в базе Midnight имеет position:relative и перехватывала бы
абсолютное позиционирование — снимаем, чтобы якорем стал .post. --- */
.post {
position: relative;
}
.post .postprofile + .postbody {
position: static;
}
.postprofile + .postbody > div {
padding-bottom: 44px;
}
/* --- (#8/#3) Штатная строка автора/даты в постбоди больше не нужна:
дату вынесли в профиль над аватаром (см. .post-when) --- */
.postbody p.author {
display: none;
}
/* --- (#1/#4) Кнопки поста: квадратные, в самом низу блока поста справа --- */
.has-profile .post-buttons {
position: absolute;
top: auto;
bottom: 14px;
right: 18px;
margin: 0;
max-width: none;
}
.post-buttons .button.button-icon-only {
width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- (#2) Кнопка перехода наверх убрана --- */
.back2top {
display: none;
}
/* --- (#3) Пагинация не нужна при активной бесконечной прокрутке ---
В постраничном режиме класс infinite-scroll-on не ставится вовсе, так что
штатная пагинация phpBB остаётся видимой и рабочей. */
body.infinite-scroll-on .action-bar .pagination ul {
display: none;
}
/* ============================================================
Липкая полоса заголовка темы (только в ленте, infinite-topic.js)
============================================================ */
/* z-index ниже плавающей кнопки цитирования (1000): та должна всплывать
над полосой, если выделение оказалось у верхнего края. */
.midnight-topic-sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 900;
border-bottom: 1px solid var(--midnight-border, rgba(255, 255, 255, 0.09));
background: rgba(18, 22, 32, 0.92);
backdrop-filter: blur(10px);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform 200ms ease, opacity 200ms ease, visibility 200ms;
}
.midnight-topic-sticky.is-visible {
transform: none;
opacity: 1;
visibility: visible;
}
.midnight-topic-sticky-inner {
display: flex;
align-items: center;
gap: 10px;
height: 44px;
}
/* Слэш между путём и названием темы — той же тональности, что разделители
в хлебных крошках (.midnight-forum-trail span). */
.midnight-sticky-sep {
flex: 0 0 auto;
color: rgba(255, 255, 255, 0.28);
font-size: 13px;
font-weight: 800;
}
/* Название темы забирает остаток строки и обрезается многоточием: путь
слева и кнопка справа имеют фиксированную цену, а заголовок — нет.
Ярче и жирнее звеньев пути — это конечная точка, а не переход. */
.midnight-sticky-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--midnight-text, #f3f4f6);
font-size: 14px;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Доля пути в полосе ограничена: без потолка он и название делят строку
пропорционально своей длине, и на средних ширинах глубокий путь
отжимал название до пары букв, а сам всё равно не влезал — последнее
звено схлопыванию не подлежит и обрезалось краем блока. С потолком
схлопнутый путь («… / родитель») укладывается в бюджет с запасом. */
.midnight-sticky-trail {
flex: 0 1 auto;
max-width: 40%;
min-height: 0;
}
.midnight-topic-sticky .midnight-sticky-home,
.midnight-topic-sticky .midnight-sticky-trail a,
.midnight-sticky-start {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex: 0 0 auto;
height: 28px;
min-height: 28px;
padding: 0 9px;
font: inherit;
font-size: 12px;
font-weight: 800;
color: var(--midnight-soft, #cbd5e1);
border: 1px solid var(--midnight-border, rgba(255, 255, 255, 0.09));
border-radius: 7px;
background: rgba(255, 255, 255, 0.04);
white-space: nowrap;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.midnight-topic-sticky .midnight-sticky-home {
width: 28px;
padding: 0;
}
.midnight-sticky-start {
cursor: pointer;
}
.midnight-sticky-start .icon {
margin-right: 5px;
}
.midnight-topic-sticky .midnight-sticky-home:hover,
.midnight-topic-sticky .midnight-sticky-trail a:hover,
.midnight-sticky-start:hover {
border-color: rgba(255, 88, 11, 0.45);
background: rgba(255, 88, 11, 0.12);
color: #ffffff;
}
.midnight-sticky-start:focus-visible {
outline: 2px solid var(--midnight-accent-2, #ff7a2e);
outline-offset: 2px;
}
/* Узкий экран: путь уходит целиком. Название темы и переход к её началу
полезнее посреди чтения, чем звенья, которые всё равно схлопнулись бы
до «… / родитель». Дом остаётся — он одна иконка. */
@media (max-width: 700px) {
.midnight-sticky-trail {
display: none;
}
.midnight-sticky-start span {
display: none;
}
.midnight-sticky-start {
width: 28px;
padding: 0;
}
.midnight-sticky-start .icon {
margin: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.midnight-topic-sticky {
transition: opacity 200ms ease, visibility 200ms;
transform: none;
}
}
/* ============================================================
Верхний ряд управления темой
============================================================
Тема прячет .action-bar.bar-top целиком (midnight.css § «action-bar»).
Возвращаем его, когда в теме больше одной страницы: в постраничном
режиме — ради номеров страниц, в ленте — ради переключателя режима.
Так кнопка режима стоит на одном месте и не прыгает при переключении.
Разметка пагинации сверху и снизу одна и та же (оба ряда включают
pagination.html), поэтому специально «копировать» нечего — достаточно
не отбирать у верхнего ряда общие стили кнопок (см. `.action-bar .button`
в midnight.css).
Всё прижато вправо, переключатель — последним, сразу за номерами. */
body.topic-controls-top .action-bar.bar-top {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 0 0 12px;
}
/* Кнопка «Ответить», тулзы темы и поиск дублируют нижний ряд и раздували бы
шапку — сверху остаются только номера страниц и переключатель. */
body.topic-controls-top .action-bar.bar-top > *:not(.pagination):not(.topic-mode-toggle) {
display: none;
}
/* Пагинация в phpBB float:right внутри своего блока; в flex-ряду это лишнее
и ломает вертикальное выравнивание с переключателем. */
body.topic-controls-top .action-bar.bar-top .pagination {
float: none;
margin: 0;
}
/* Переключатель «лента / страницы» (infinite-topic.js). Геометрия — как у
кнопок пагинации рядом, но цвет тише и рамка пунктирная: это настройка
просмотра, а не навигация. */
.topic-mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex: 0 0 auto;
height: 32px;
min-height: 32px;
padding: 0 10px;
font: inherit;
font-size: 13px;
font-weight: 800;
color: var(--midnight-dim);
border: 1px dashed rgba(255, 255, 255, 0.14);
border-radius: 7px;
background: transparent;
cursor: pointer;
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.topic-mode-toggle .icon {
margin: 0 5px 0 0;
}
.topic-mode-toggle:hover {
border-color: rgba(255, 88, 11, 0.45);
background: rgba(255, 88, 11, 0.12);
color: #ffffff;
}
.topic-mode-toggle:focus-visible {
outline: 2px solid var(--midnight-accent-2, #ff7a2e);
outline-offset: 2px;
}
@media (max-width: 700px) {
.topic-mode-toggle span {
display: none;
}
.topic-mode-toggle {
width: 32px;
padding: 0;
}
.topic-mode-toggle .icon {
margin: 0;
}
/* Список страниц на узком экране разворачивается в два-три ряда кнопок —
в самом начале темы это дороже, чем удобно. Сверху остаётся счётчик и
переключатель одной строкой, а полная пагинация — внизу, как обычно. */
body.topic-controls-top .action-bar.bar-top .pagination ul {
display: none;
}
}
/* ============================================================
Полоса перехода по теме (справа, только в ленте)
============================================================ */
/* Ниже липкой полосы (900) и кнопки цитирования (1000): это фоновый
ориентир, а не то, что должно перекрывать активные элементы. */
.midnight-topic-scrubber {
position: absolute;
top: 0;
/* Отступ от края: вплотную полоса вставала бы рядом с системным
скроллбаром, и две вертикальные линии читались бы как одна деталь. */
left: 0;
z-index: 880;
display: flex;
align-items: flex-start;
width: 30px;
pointer-events: none;
}
.midnight-topic-scrubber.is-stuck {
position: fixed;
}
/* Рельс узкий, но хватать нужно за что-то шире — поэтому подложка во всю
ширину блока и прозрачная, а видимая линия рисуется фоном по центру. */
.midnight-scrubber-track {
position: relative;
width: 100%;
height: min(56vh, 460px);
cursor: pointer;
pointer-events: auto;
touch-action: none;
background:
linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))
center / 2px 100% no-repeat;
}
/* Ползунок занимает всю ширину колонки: внутри него живёт номер текущего
сообщения, ради которого шкала и нужна. */
.midnight-scrubber-handle {
position: absolute;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 26px;
border-radius: 8px;
background: var(--midnight-card, #171b26);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
transition: background 160ms ease, border-color 160ms ease;
}
.midnight-scrubber-num {
color: var(--midnight-text, #f3f4f6);
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.2px;
}
/* Общее число — статичной меткой под шкалой: без неё номер на ползунке не с
чем соотнести. */
.midnight-scrubber-total {
position: absolute;
top: 100%;
right: 0;
left: 0;
margin-top: 6px;
color: var(--midnight-dim, #687084);
font-size: 10px;
font-weight: 800;
line-height: 1;
text-align: center;
}
.midnight-scrubber-track:hover .midnight-scrubber-handle,
.midnight-topic-scrubber.is-active .midnight-scrubber-handle {
border-color: rgba(255, 88, 11, 0.55);
background: var(--midnight-panel, #121620);
}
.midnight-scrubber-handle:focus-visible {
outline: 2px solid var(--midnight-accent-2, #ff7a2e);
outline-offset: 2px;
}
/* Развёрнутая выноска: номер из общего числа и дата сообщения. Появляется
при наведении и перетаскивании — она шире колонки и ложится поверх
текста, поэтому висеть постоянно ей нечего. Дата берётся из уже
загруженного сообщения и пустует, пока его нет в документе. */
.midnight-scrubber-chip {
opacity: 0;
transition: opacity 160ms ease;
position: absolute;
top: 50%;
right: calc(100% + 8px);
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
padding: 4px 8px;
border: 1px solid var(--midnight-border, rgba(255, 255, 255, 0.09));
border-radius: 7px;
background: rgba(18, 22, 32, 0.94);
line-height: 1.15;
white-space: nowrap;
transition: border-color 160ms ease;
pointer-events: none;
}
.midnight-scrubber-pos {
color: var(--midnight-text, #f3f4f6);
font-size: 12px;
font-weight: 800;
}
.midnight-scrubber-date {
color: var(--midnight-dim, #687084);
font-size: 11px;
font-weight: 700;
}
.midnight-scrubber-date:empty {
display: none;
}
.midnight-scrubber-track:hover .midnight-scrubber-chip,
.midnight-topic-scrubber.is-active .midnight-scrubber-chip {
opacity: 1;
border-color: rgba(255, 88, 11, 0.45);
}
/* Узкий экран: полосы нет. Тянуть 30-пиксельный рельс пальцем неудобно, и
он налезал бы на текст — там для переходов остаётся пагинация. */
@media (max-width: 700px) {
.midnight-topic-scrubber {
display: none;
}
}
/* Подгрузка предыдущих страниц (infinite-topic.js) сама компенсирует прирост
высоты через window.scrollBy, чтобы вставка постов ВЫШЕ видимой области не
сдвигала картинку под пользователем. Браузерное scroll anchoring (включено
по умолчанию у html — корневого скролл-контейнера) пытается делать то же
самое своим способом и конфликтует с этим расчётом (двойная компенсация) —
отключаем его, оставляя единственным источником компенсации наш
детерминированный JS. */
html {
overflow-anchor: none;
}
/* --- (#1) Списки: убрать «Views» в темах и «Topics/Posts» в форумах --- */
.topiclist.topics dd.views {
display: none;
}
/* Скрываем счётчики тем/сообщений в списках форумов. Высокая специфичность —
Midnight задаёт колонки dd.topics/dd.posts правилом .forabg ul.topiclist.forums… */
.forabg ul.topiclist.forums li.row dl.row-item dd.topics,
.forabg ul.topiclist.forums li.row dl.row-item dd.posts,
.forumbg ul.topiclist.forums li.row dl.row-item dd.topics,
.forumbg ul.topiclist.forums li.row dl.row-item dd.posts,
.forabg ul.topiclist li.header dd.topics,
.forabg ul.topiclist li.header dd.posts,
.forabg ul.topiclist.forums li.header dd.topics,
.forabg ul.topiclist.forums li.header dd.posts {
display: none;
}
/* Список тем не рисует строку заголовков колонок («карточный» дизайн без
шапки-таблицы) — само число ответов неочевидно без подписи. Добавляем
маленькую иконку сообщения перед числом вместо текстовой подписи.
Также центрируем dd.posts/dd.lastpost по вертикали относительно строки:
dt (заголовок темы) может занимать 1-3 строки в зависимости от ширины
экрана и длины названия, а dd-колонки — float, «прилипающие» к верху.
dl.row-item уже position:relative и растягивается по высоте вместе с dt
(float clearfix), поэтому absolute top:0/bottom:0 растягивает dd на всю
реальную высоту строки (а не только на высоту контента — иначе разделитель
border-left не доходит до краёв строки), а содержимое центрируется ВНУТРИ
этой растянутой колонки через flex. Ширины 95px/250px — явные значения из
prosilver (dd.posts,.topics,.views{width:95px}; dd.lastpost{width:250px}),
не зависят от float. Фон отдельным цветом (midnight.css: `dd.topics,
dd.posts, dd.lastpost{background:rgba(0,0,0,.08)}`) убираем — оставляем
только вертикальный разделитель (border-left), фон карточки единый. */
.topiclist.topics li.row dd.posts,
.topiclist.topics li.row dd.lastpost {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
background: transparent;
}
.topiclist.topics li.row dd.lastpost {
right: 0;
}
.topiclist.topics li.row dd.posts {
right: 250px;
justify-content: center;
gap: 6px;
}
.topiclist.topics li.row dd.posts::before {
content: "\f0e5";
font-family: FontAwesome;
font-size: 13px;
color: var(--midnight-accent-2, #ff7a2e);
opacity: 0.8;
}
/* ============================================================
6. Кроссбраузерные скроллбары для code/quote и прочих скролл-зон
============================================================
Chromium уже стилизуется через ::-webkit-scrollbar в midnight.css, но
Firefox эти псевдоэлементы игнорирует и рисует системный (обычно широкий
серый) скроллбар. Добавляем эквивалент через scrollbar-width/-color —
единственный способ затронуть Firefox. */
.codebox code,
.postbody .content,
#topicreview,
#post_details,
.attachbox dd,
.attach-image,
.dropdown-extended ul {
scrollbar-width: thin;
scrollbar-color: rgba(255, 88, 11, 0.55) rgba(255, 255, 255, 0);
}
/* Chromium: укорачиваем сам трек (margin на ::-webkit-scrollbar-track сдвигает
начало/конец бегунка внутрь), чтобы скроллбар не доходил до скруглений
родительского контейнера (border-radius: 14px) и не «вылезал» за них. */
.codebox code::-webkit-scrollbar-track,
.postbody .content::-webkit-scrollbar-track,
#topicreview::-webkit-scrollbar-track,
#post_details::-webkit-scrollbar-track,
.attachbox dd::-webkit-scrollbar-track,
.attach-image::-webkit-scrollbar-track,
.dropdown-extended ul::-webkit-scrollbar-track {
margin: 8px;
background: transparent;
}
/* Полупрозрачные квадраты по краям скроллбара — это стандартные Chromium
::-webkit-scrollbar-button (стрелки вверх/вниз) и ::-webkit-scrollbar-corner
(угол схождения вертикального и горизонтального треков). Ни то ни другое
не вписано в трек с отступом от margin выше, поэтому вылезает за
border-radius контейнера. Убираем оба полностью — тонкому минималистичному
скроллбару кнопки-стрелки не нужны. !important и все под-псевдоклассы
(:start/:end/:increment/:decrement) — в части версий Chromium одного
display:none на ::-webkit-scrollbar-button недостаточно, кнопка всё равно
резервирует место под себя, пока не обнулены явно все 4 варианта. */
.codebox code::-webkit-scrollbar-button,
.postbody .content::-webkit-scrollbar-button,
#topicreview::-webkit-scrollbar-button,
#post_details::-webkit-scrollbar-button,
.attachbox dd::-webkit-scrollbar-button,
.attach-image::-webkit-scrollbar-button,
.dropdown-extended ul::-webkit-scrollbar-button,
.codebox code::-webkit-scrollbar-button:start:decrement,
.postbody .content::-webkit-scrollbar-button:start:decrement,
#topicreview::-webkit-scrollbar-button:start:decrement,
#post_details::-webkit-scrollbar-button:start:decrement,
.attachbox dd::-webkit-scrollbar-button:start:decrement,
.attach-image::-webkit-scrollbar-button:start:decrement,
.dropdown-extended ul::-webkit-scrollbar-button:start:decrement,
.codebox code::-webkit-scrollbar-button:end:increment,
.postbody .content::-webkit-scrollbar-button:end:increment,
#topicreview::-webkit-scrollbar-button:end:increment,
#post_details::-webkit-scrollbar-button:end:increment,
.attachbox dd::-webkit-scrollbar-button:end:increment,
.attach-image::-webkit-scrollbar-button:end:increment,
.dropdown-extended ul::-webkit-scrollbar-button:end:increment {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.codebox code::-webkit-scrollbar-corner,
.postbody .content::-webkit-scrollbar-corner,
#topicreview::-webkit-scrollbar-corner,
#post_details::-webkit-scrollbar-corner,
.attachbox dd::-webkit-scrollbar-corner,
.attach-image::-webkit-scrollbar-corner,
.dropdown-extended ul::-webkit-scrollbar-corner {
background: transparent !important;
display: none;
}
/* На мобильной ширине кнопки поста остаются в правом нижнем углу карточки. */
@media (max-width: 700px) {
.post,
.post > .inner,
.post .postprofile,
.post .postbody,
.post .postbody > div {
overflow: visible;
}
.post.dropdown-visible,
.post:has(.dropdown-visible) {
z-index: 20;
}
.postprofile dt {
display: block !important;
position: relative;
min-height: 52px;
padding: 0 86px;
text-align: center;
}
.postprofile dt > a.username,
.postprofile dt > a.username-coloured,
.postprofile dt > strong {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.has-profile .post-buttons {
position: absolute;
top: auto;
right: 14px;
bottom: 14px;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 4px;
width: auto;
max-width: none;
margin: 0;
text-align: right;
z-index: 6;
}
.hasjs .postbody .post-buttons,
.hastouch .post-buttons {
max-width: none;
margin-right: 0;
}
.post-buttons > li {
float: none;
margin: 0;
flex: 0 0 auto;
}
.postprofile + .postbody > div {
padding-bottom: 64px;
}
.postprofile {
padding-right: 0;
}
.postprofile .profile-posts,
.postprofile .profile-joined {
display: none !important;
}
.postprofile .has-avatar .avatar-container,
.postprofile .no-avatar .avatar-container {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
min-width: 48px;
margin: 0;
padding-right: 0;
float: none;
}
.postprofile .avatar {
display: block;
width: 48px;
height: 48px;
margin: 0;
float: none;
}
.postprofile .avatar img {
width: 48px !important;
height: 48px !important;
max-width: 48px;
max-height: 48px;
object-fit: cover;
}
.post-buttons .dropdown {
top: auto;
right: 0;
bottom: 38px;
z-index: 30;
}
.post-buttons .dropdown .dropdown-contents {
max-height: none;
overflow: visible;
}
/* На этой ширине у темы уже есть собственный мобильный блок
span.responsive-show.left-box "Replies: N" внутри заголовка темы —
dd.posts с нашей иконкой (плюс dfn "Replies", который база показывает
на этой ширине) полностью дублирует его. Скрываем dd.posts целиком. */
.topiclist.topics li.row dd.posts {
display: none !important;
}
/* dd.lastpost (position:absolute, задан выше без учёта ширины экрана)
на узких экранах наезжает на заголовок темы — своей колонке уже не
хватает места рядом с текстом. У базовой темы уже есть штатный дубль
этой информации внутри dt (div.responsive-show "Last post by...") —
поэтому на этой ширине саму колонку просто убираем целиком, как и
dd.posts выше, а не пытаемся вписать её у́же. */
.topiclist.topics li.row dd.lastpost {
display: none !important;
}
/* На этой ширине у базовой темы уже есть явный сброс для #wrap (карточки
форума/тем внутри него становятся edge-to-edge: margin:0; padding:0 5px
— см. stylesheet.css, @media max-width:700px), но СИММЕТРИЧНОГО сброса
для #page-header (баннер шапки, самостоятельный .page-width — брат
#wrap, а не потомок) нет: он остаётся центрированным с обычным
margin:auto от .page-width, из-за чего у баннера видны отступы
слева/справа, а у карточек под ним — нет (визуальная нестыковка).
Повторяем для шапки тот же edge-to-edge паттерн, что тема уже применяет
к #wrap, чтобы оба блока были выровнены одинаково. */
#page-header {
margin: 0;
}
#page-header.page-width,
#wrap.page-width {
width: 100%;
max-width: none;
min-width: 0;
box-sizing: border-box;
}
#site-description.site-description .midnight-brand-copy .sitename {
display: block !important;
max-width: 100%;
overflow: hidden;
font-size: clamp(13px, 4.2vw, 21px);
line-height: 1.05;
white-space: nowrap;
text-overflow: clip;
}
.midnight-forum-heading .forum-title,
.midnight-topic-heading .topic-title {
min-width: 0;
}
.midnight-forum-heading .forum-title a,
.midnight-topic-heading .topic-title a {
display: block;
max-width: 100%;
font-size: clamp(15px, 4.7vw, 22px);
line-height: 1.08;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* nowrap/overflow теперь в базовом правиле (midnight.css) — здесь только
уплотнение под узкий экран. Обрезка текста внутри пилюль убрана: за
переполнение отвечает схлопывание звеньев в «…». */
.midnight-forum-trail {
gap: 4px;
font-size: clamp(9px, 2.65vw, 12px);
}
.midnight-forum-trail a {
height: 32px;
min-height: 32px;
padding: 0 8px;
}
.midnight-forum-trail .midnight-trail-home {
width: 32px;
min-width: 32px;
padding: 0;
}
.midnight-forum-trail span {
flex: 0 0 auto;
}
}