Тут я сделал сразу одним скриптом , но я уже понял как все сделать через 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: 12px 20px; /* широкие и уверенные отступы */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: 600;
color: #e0e0e0;
background: #0d0d0d; /* плотный чёрный фон */
border: 2px solid #2a2a2a; /* тёмно-серый контур */
border-radius: 0; /* без округлений */
box-shadow: none; /* никаких теней */
text-align: center;
vertical-align: middle;
min-width: 140px; /* пошире для текста */
line-height: normal;
}

/* Цифры — чуть светлее для контраста */
ul.switches.forum-pages li.pagesInfo span.curPage,
ul.switches.forum-pages li.pagesInfo span.numPages {
font-weight: 700;
color: #bfbfbf;
}

/* Кнопки навигации */
.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 29px; /* горизонтальный padding оставляем */
height: 29px !important; /* фиксированная высота кнопки */
min-height: 29px !important; /* предотвращаем сплющивание */
font-weight: 700;
line-height: 29px; /* вертикальное выравнивание текста */
display: inline-block; /* обязательно для корректного отображения */
text-align: center;
min-width: 29px; /* можно подогнать под ширину цифры */
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>

Мурчанн

1