Полностью вертикальное меню для мобильной версии MoeMesto, реализовано по лучшим практикам UI/UX.
目前為
/* ==UserStyle==
@name MoeMesto REST — Вертикальное мобильное меню (UX Best)
@namespace moemesto.rest
@version 3.0.4
@description Полностью вертикальное меню для мобильной версии MoeMesto, реализовано по лучшим практикам UI/UX.
@match https://moemesto.rest/*
==/UserStyle== */
/* Мобильная вертикальная навигация */
@media (max-width: 900px) {
/* Контейнер меню */
.v-toolbar__content, .v-toolbar, .header, .main-menu, .top-menu, .nav, nav {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
background: #23272b !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: unset !important;
z-index: 1000 !important;
}
/* Кнопки и ссылки меню */
.v-toolbar__content > *, .v-toolbar > *, .header > *, .main-menu > *, .top-menu > *, .nav > *, nav > * {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 16px 18px !important;
margin: 0 !important;
font-size: 1.15rem !important;
font-weight: 500 !important;
color: #e3e3e3 !important;
background: none !important;
border: none !important;
border-bottom: 1px solid #31353a !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: background 0.2s, color 0.2s;
cursor: pointer !important;
}
/* Активный пункт меню */
.v-toolbar__content > .router-link-exact-active,
.v-toolbar__content > .active,
.main-menu > .router-link-exact-active,
.main-menu > .active,
.top-menu > .router-link-exact-active,
.top-menu > .active,
.nav > .router-link-exact-active,
.nav > .active,
nav > .router-link-exact-active,
nav > .active {
background: #2a3136 !important;
color: #3fa6ff !important;
font-weight: 700 !important;
}
/* Наведение */
.v-toolbar__content > *:hover,
.main-menu > *:hover,
.top-menu > *:hover,
.nav > *:hover,
nav > *:hover {
background: #1b1e21 !important;
color: #3fa6ff !important;
}
/* Последний пункт без границы */
.v-toolbar__content > *:last-child,
.main-menu > *:last-child,
.top-menu > *:last-child,
.nav > *:last-child,
nav > *:last-child {
border-bottom: none !important;
}
/* Логотип/заголовок сверху */
.v-toolbar-title, .header-title, .logo {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
padding: 18px 0 10px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #31353a !important;
background: #23272b !important;
color: #3fa6ff !important;
letter-spacing: 2px !important;
}
/* Скрыть горизонтальное меню, если оно есть */
.horizontal-menu, .desktop-nav {
display: none !important;
}
/* Убрать лишние отступы у body */
body {
padding-top: 0 !important;
}
}
/* ==UserStyle==
@name MoeMesto REST — Вертикальные фильтры на мобильных
@namespace moemesto.rest
@version 1.0.0
@description Фильтры поиска (дата, время, имя, телефон, гости) располагаются вертикально на мобильных для максимального удобства.
@match https://moemesto.rest/*
==/UserStyle== */
@media (max-width: 900px) {
/* Найди основной контейнер фильтров по классу (например, .filters, .filter-bar, .search-filters) */
.filters, .filter-bar, .search-filters, .v-row, .filter-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Каждый фильтр — на всю ширину */
.filters > *, .filter-bar > *, .search-filters > *, .v-row > *, .filter-row > * {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Подписи над фильтрами */
.filters label, .filter-bar label, .search-filters label, .v-row label, .filter-row label {
margin-bottom: 6px !important;
font-size: 1rem !important;
font-weight: 500 !important;
color: #fff !important;
display: block !important;
}
/* Сами поля фильтра */
.filters input, .filters select, .filters .v-input,
.filter-bar input, .filter-bar select, .filter-bar .v-input,
.search-filters input, .search-filters select, .search-filters .v-input,
.v-row input, .v-row select, .v-row .v-input,
.filter-row input, .filter-row select, .filter-row .v-input {
width: 100% !important;
font-size: 1.1rem !important;
border-radius: 8px !important;
padding: 14px 12px !important;
background: #35393e !important;
color: #fff !important;
border: none !important;
margin-bottom: 0 !important;
box-shadow: 0 2px 8px 0 rgba
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址