Я настраиваю долгоживущую пользовательскую тему и хотел бы придать гамбургер-меню/боковой панели (.menu-panel) тот же полупрозрачный размытый вид, который уже отлично работает для .d-header. Прозрачность работает, но размытие нет — и я хотел бы сообщить об этом как о проблеме, поскольку несколько особенностей того, как ядро стилизует этот компонент, сделали задачу сложнее, чем ожидалось.
Что я пытаюсь достичь
Полупрозрачная панель меню с backdrop-filter: blur() на заднем плане, чтобы контент страницы всё ещё просвечивал через панель, подобно эффекту матового стекла, который используют многие нативные приложения. Мне важны и эффект просвечивания, и размытие — прозрачность без размытия выглядит неопрятно поверх загруженных списков тем.
Что уже работает
Для .d-header достаточно вот этого, и оно работает надёжно (проверено в iOS Safari и настольном Chrome):
.d-header {
background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
-webkit-backdrop-filter: blur(3px) saturate(1.2);
backdrop-filter: blur(3px) saturate(1.2);
}
Что не работает
Тот же самый подход, применённый к .menu-panel, даёт прозрачность, но никогда не даёт размытия в iOS Safari:
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
}
Я пробовал заставить размытие появиться, но ничего не помогло:
- Добавление
!importantк самим объявлениямbackdrop-filter/-webkit-backdrop-filter. - Принудительное создание отдельного слоя композитинга с помощью
transform: translateZ(0)в сочетании сoverflow: hidden(общий обходной путь для Safari при других проблемах с backdrop-filter) — здесь это не дало никакого эффекта, поэтому я снова убрал его, чтобы не оставлять хак, который не оправдывает своего присутствия. - Убедился, что я нацеливаюсь на правильный элемент: согласно
menu-panel.scss, непрозрачный фон устанавливается непосредственно на.menu-panel(а не на дочерний элемент, например.panel-body), что я изначально понял неверно, а затем исправил.
Если кто-то знает, почему .menu-panel ведёт себя иначе, чем .d-header в этом случае, или знает рабочий рецепт, я буду рад узнать об этом.
Вторая проблема: захардкоженные фоны отдельных строк меню
Даже если сделать собственный фон панели прозрачным, несколько элементов внутри неё всё ещё рендерятся непрозрачными, потому что ядро устанавливает их фон напрямую, а не через фон самой панели:
.user-notifications-list .readи.bookmark— прочитанные уведомления и закладки в пользовательском меню получаютbackground-color: var(--secondary)напрямую, поэтому каждая строка отображается как непрозрачный блок, плавающий на полупрозрачной панели..hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container— подвал профиля/входа внизу боковой панели имеет ту же проблему.
Я могу (и уже сделал) переопределить это в своей теме, но это означает, что нужно находить каждый захардкоженный var(--secondary) в menu-panel.scss по одному, и это снова сломается в следующий раз, когда ядро добавит новый элемент с тем же паттерном. Было бы очень полезно, если бы эти элементы использовали CSS-переменную по умолчанию, например, что-то вроде --d-menu-panel-background со значением по умолчанию var(--secondary), чтобы теме нужно было переопределить только одну переменную, чтобы сделать всю панель — включая её строки — последовательно прозрачной, вместо того чтобы гоняться за отдельными селекторами.
С удовольствием поделюсь скриншотами «до/после», если это поможет, и протестирую любое предложенное решение на своей стороне.
