Бывает, что повлиять на классы через CSS-стили практически невозможно — сам уже не раз в этом убеждался. В таких случаях приходится действовать через скрипты.

Я написал небольшой скрипт, который управляет переключателями форума в лентах, при этом не затрагивая работу других переключателей — например, тех, что используются в темах сообщений.

Чтобы всё работало корректно, вставляем скрипт в шаблон форума, в раздел «Вид темы/опроса», в самый низ. Таким образом можно гибко зацепить и настроить под себя всю схему переключателей.

Код

<script>
document.addEventListener("DOMContentLoaded", function() {

  // === Встраиваем CSS напрямую в DOM, чтобы точно сработал ===
  const style = document.createElement("style");
  style.textContent = `
    ul.switches.forum-pages {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px 0;
    }
    ul.switches.forum-pages li {
      list-style: none;
    }

/* Блок информации о странице */
ul.switches.forum-pages li.pagesInfo {
  display: inline-block;
  padding: 16px 22px;               /* компактные внутренние отступы */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #9a49a9, #6a2070); /* гармонирует с кнопками */
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(166, 76, 166, 0.6), inset 0 0 3px rgba(255,255,255,0.15);
  text-align: center;
  vertical-align: middle;
  min-width: 100px;                 /* минимальная ширина для цифр */
  line-height: normal;              /* высота строки по тексту */
  transition: all 0.25s ease;
}

/* Подсветка при наведении */
ul.switches.forum-pages li.pagesInfo:hover {
  background: linear-gradient(135deg, #bb60bb, #a64ca6);
  border-color: #fff;
  box-shadow: 0 3px 8px rgba(166, 76, 166, 0.8), inset 0 0 4px rgba(255,255,255,0.2);
}

/* Стили для цифр внутри */
ul.switches.forum-pages li.pagesInfo span.curPage,
ul.switches.forum-pages li.pagesInfo span.numPages {
  font-weight: 700;
  color: #ffd7ff;
}

    /* Кнопки навигации */
    .forum-nav-btn {
      display: inline-block;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #fff !important;
      background: linear-gradient(135deg, #a64ca6, #702070);
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(166, 76, 166, 0.6);
      text-decoration: none !important;
      transition: all 0.25s ease;
      user-select: none;
      line-height: 1.1;
    }

    .forum-nav-btn:hover {
      border-color: #fff;
      background: linear-gradient(135deg, #bb60bb, #a64ca6);
      box-shadow: 0 3px 10px rgba(166, 76, 166, 0.9), 0 0 5px #fff;
      transform: translateY(-1px);
    }

    .forum-nav-btn:active {
      transform: translateY(1px);
      box-shadow: 0 0 5px rgba(166, 76, 166, 0.6);
    }

/* Активная страница */
ul.switches.forum-pages li.switchActive {
  background: linear-gradient(135deg, #b66cb6, #702070);
  border: 2px solid #fff;
  color: #fff;
  border-radius: 4px;            /* слегка скруглённые углы */
  padding: 0 24px;                /* горизонтальный padding оставляем */
  height: 64px !important;        /* фиксированная высота кнопки */
  min-height: 64px !important;    /* предотвращаем сплющивание */
  font-weight: 700;
  line-height: 64px;              /* вертикальное выравнивание текста */
  display: inline-block;          /* обязательно для корректного отображения */
  text-align: center;
  min-width: 64px;                /* можно подогнать под ширину цифры */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),  /* внешняя тень для объёма */
    inset 0 0 6px rgba(255, 255, 255, 0.25); /* внутреннее свечение */
  transition: all 0.25s ease;
  transform: translateY(-1px);
  vertical-align: middle;
}

ul.switches.forum-pages li.switchActive:hover {
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.45),
    inset 0 0 8px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

ul.switches.forum-pages li.switchActive:hover {
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.45),
    inset 0 0 8px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

    ul.switches.forum-pages li.switchActive:hover {
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 0 8px rgba(255, 255, 255, 0.35);
      transform: translateY(-2px);
    }

    /* Остальные номера страниц */
    ul.switches.forum-pages li a.switchDigit {
      display: inline-block;
      padding: 8px 11px;
      color: #a64ca6;
      border: 1.5px solid rgba(166, 76, 166, 0.4);
      border-radius: 5px;
      font-weight: 500;
      transition: all 0.25s ease;
      text-decoration: none;
      background: rgba(166, 76, 166, 0.08);
      box-shadow: inset 0 0 4px rgba(166, 76, 166, 0.3);
    }

    ul.switches.forum-pages li a.switchDigit:hover {
      border-color: #a64ca6;
      background: rgba(166, 76, 166, 0.25);
      color: #702070;
      box-shadow: 0 0 6px rgba(166, 76, 166, 0.7);
    }

    @keyframes fadeInNav {
      from {opacity: 0; transform: translateY(4px);}
      to {opacity: 1; transform: translateY(0);}
    }
    ul.switches.forum-pages {
      animation: fadeInNav 0.4s ease-in-out;
    }
  `;
  document.head.appendChild(style);

  // === Функция обновления элементов ===
  function updateForumSwitches() {
    document.querySelectorAll("ul.switches.forum-pages").forEach(list => {

      // Кнопка Назад
      list.querySelectorAll("a.switchBack, li.switch-prev a").forEach(btn => {
        if (!btn.dataset.fixed) {
          btn.textContent = "⬅ Назад";
          btn.classList.add("forum-nav-btn");
          btn.dataset.fixed = "true";
        }
      });

      // Кнопка Вперёд
      list.querySelectorAll("a.switchNext, li.switch-next a").forEach(btn => {
        if (!btn.dataset.fixed) {
          btn.textContent = "Вперёд ➡";
          btn.classList.add("forum-nav-btn");
          btn.dataset.fixed = "true";
        }
      });

      // Удаляем « и »
      list.querySelectorAll("span").forEach(span => {
        if (["»", "«"].includes(span.textContent.trim())) span.remove();
      });
    });
  }

  // Первичный запуск
  updateForumSwitches();

  // Наблюдение за изменениями в DOM
  const observer = new MutationObserver(updateForumSwitches);
  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

При этом схема переключателей в сообщениях на форуме остаётся нетронутой — там продолжает работать другой скрипт и настройка CSS.

Упрощенная схема но вполне красивая .

Мурчанн

1