MoeMesto Mobile Adaptation

MoeMesto REST — Вертикальное мобильное меню (UX Best)

Полностью вертикальное меню для мобильной версии MoeMesto, реализовано по лучшим практикам UI/UX.

目前為 2025-04-24 提交的版本，檢視最新版本。

換行

/* ==UserStyle==
@name         MoeMesto REST — Вертикальное мобильное меню (UX Best)
@namespace    moemesto.rest
@version      3.0.3
@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;
  }
}

欢迎访问Greasy Fork镜像