верхнего уровня — обёрточные не нужны, а значит не нужен
и кастомный Walker. Плоское меню без вложенности превращается в ровную
сетку карточек само, без пустых заголовков колонок.
-------------------------------------------------------------------------- */
.ms-launcher-menu {
display: grid;
grid-template-columns: repeat(var(--ms-launcher-cols, 4), minmax(0, 1fr));
gap: var(--ms-mega-col-gap);
align-items: start;
margin: 0;
padding: 0;
list-style: none;
}
.ms-launcher-menu > li {
grid-column: span var(--ms-col-span, 1);
position: relative;
}
/* Заголовок колонки.
Селекторы этого блока намеренно двухклассовые (.ms-launcher-menu + класс):
style.css задаёт `.ms-menu-list a { display: flex; gap: 11px }` со
специфичностью 0,1,1 — одноклассовое правило ей проигрывает, и карточка
разложилась бы в строку вместо сетки «иконка / название / описание». */
.ms-launcher-menu .ms-launcher-col-title {
display: block;
margin-bottom: 10px;
padding: 0 0 8px;
border-bottom: 1px solid var(--ms-border-soft);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ms-text-faint);
text-decoration: none;
}
.ms-launcher-menu > li.ms-mega-group-item > .ms-launcher-col-title {
pointer-events: none;
cursor: default;
}
.ms-launcher-menu .ms-launcher-col-title i {
margin-right: 6px;
font-size: 13px;
vertical-align: -1px;
}
.ms-launcher-cards {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.ms-launcher-cards li {
position: relative;
}
/* Карточка раздела — сигнатурный элемент мега-меню */
.ms-launcher-menu .ms-launcher-card {
display: grid;
grid-template-columns: var(--ms-mega-card-icon) 1fr;
align-items: start;
gap: 2px 11px;
padding: 9px 10px;
border-radius: var(--ms-radius-ctl-sm);
color: var(--ms-text-main);
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.ms-launcher-menu .ms-launcher-card > i {
grid-row: span 2;
width: var(--ms-mega-card-icon);
height: var(--ms-mega-card-icon);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ms-radius-ctl-sm);
background: var(--ms-primary-soft);
color: var(--ms-primary);
font-size: 18px;
transition: background 0.2s, color 0.2s;
}
.ms-launcher-menu .ms-launcher-card .ms-menu-text {
display: block;
grid-column: 2;
align-self: center;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
}
.ms-launcher-menu .ms-launcher-card .ms-menu-desc {
display: block;
grid-column: 2;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: var(--ms-text-muted);
}
/* Карточка без описания: название центрируется по высоте плашки */
.ms-launcher-menu .ms-launcher-card:not(:has(.ms-menu-desc)) {
align-items: center;
}
/* Пункт без иконки: не оставляем пустую колонку под плашку.
:has() уже используется темой (style.css, .ms-topbar-filters). */
.ms-launcher-menu .ms-launcher-card:not(:has(> i)) {
grid-template-columns: 1fr;
}
.ms-launcher-menu .ms-launcher-card:not(:has(> i)) .ms-menu-text,
.ms-launcher-menu .ms-launcher-card:not(:has(> i)) .ms-menu-desc {
grid-column: 1;
}
.ms-launcher-menu .ms-launcher-card:hover {
background: var(--ms-primary-soft);
color: var(--ms-primary);
}
.ms-launcher-menu .ms-launcher-card:hover .ms-menu-desc {
color: inherit;
}
.ms-launcher-menu li.current-menu-item > .ms-launcher-card {
background: var(--ms-primary-gradient);
color: var(--ms-btn-text);
box-shadow: var(--ms-primary-glow);
}
.ms-launcher-menu li.current-menu-item > .ms-launcher-card .ms-menu-desc {
color: var(--ms-btn-text);
opacity: 0.85;
}
.ms-launcher-menu li.current-menu-item > .ms-launcher-card > i {
background: rgba(255, 255, 255, 0.18);
color: var(--ms-btn-text);
}
/* Выделенный пункт */
.ms-launcher-item.ms-mega-featured > .ms-launcher-card {
border: 1px solid var(--ms-primary);
}
/* Третий уровень: дизайн рассчитан на два, но глубже структура не должна
выглядеть сломанной. */
.ms-launcher-cards .sub-menu {
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px;
padding: 0 0 0 45px;
list-style: none;
}
.ms-launcher-cards .sub-menu a {
display: block;
padding: 5px 10px;
border-radius: var(--ms-radius-ctl-sm);
color: var(--ms-text-muted);
font-size: 12.5px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.ms-launcher-cards .sub-menu a:hover {
background: var(--ms-primary-soft);
color: var(--ms-primary);
}
/* Подсказки-пустышки */
.ms-launcher-hint {
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid var(--ms-border-soft);
font-size: 12.5px;
color: var(--ms-text-muted);
}
.ms-launcher-hint--limit {
color: var(--ms-warning);
}
/* Блокировка прокрутки под открытой панелью. Ширину скроллбара компенсирует
JS через padding-right, иначе таблицы Tabulator под панелью «поедут». */
body.ms-mega-lock {
overflow: hidden;
}
/* --------------------------------------------------------------------------
9. Бейджи
Плагин grozny-viewer печатает .ms-messages-badge инлайновым стилем к handle
ms-style с position: absolute — это верно для колокольчика в профиле, но
ломает строку меню. Возвращаем бейдж в поток; фон задаём явно, потому что
правило темы .ms-menu-list .ms-menu-badge иначе перекрасит его в --ms-primary.
Источник инлайн-стиля: plugins/grozny-viewer/includes/class-gea-msg-header-injector.php
-------------------------------------------------------------------------- */
.ms-menu-list .ms-menu-badge.ms-messages-badge,
.ms-launcher-menu .ms-menu-badge.ms-messages-badge,
.ms-mega-fav-list .ms-menu-badge.ms-messages-badge {
position: static;
top: auto;
right: auto;
min-width: 0;
height: auto;
padding: 1px 7px;
border-radius: 999px;
box-shadow: none;
background: var(--ms-danger);
color: #fff;
}
.ms-launcher-menu .ms-launcher-card .ms-menu-badge {
position: absolute;
top: 10px;
right: 34px;
}
/* --------------------------------------------------------------------------
10. Мобильные (≤1024px): только аккордеон, никаких плавающих панелей
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.ms-mega-sub.is-flyout {
position: static;
width: auto;
max-height: none;
margin: 2px 0 4px;
padding: 0 0 0 34px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.ms-mega-sub.is-flyout::before {
content: none;
}
/* Крупные тач-таргеты */
.ms-mega-toggle {
top: 4px;
width: 40px;
height: 40px;
}
.ms-mega-toggle i {
font-size: 18px;
}
.ms-sidebar-nav .ms-mega-parent > a {
padding-right: 48px;
}
/* Панель — на весь экран, одна колонка */
.ms-launcher-panel {
top: var(--ms-mega-admin-offset, 0px);
left: 0;
right: 0;
bottom: 0;
max-height: none;
border: none;
border-radius: 0;
--ms-launcher-cols: 1;
}
.ms-launcher-panel::before {
border-radius: 0;
}
.ms-launcher-menu {
gap: 20px;
}
}