MediaWiki:Common.css
Внешний вид
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/* Основные стили таблицы */
.table-container {
width: 60%;
margin: 2em auto;
}
.wikitable.hover-table {
width: 100%;
border-collapse: separate;
border-spacing: 10px;
background: transparent;
}
/* Исправленный разделитель колонок */
.wikitable.hover-table .column-divider {
position: relative;
}
.wikitable.hover-table .column-divider::after {
content: "";
position: absolute;
top: 0;
right: -5px; /* Смещение от границы */
height: 100%;
width: 2px;
background: #707070;
z-index: 1;
}
/* Стили ячеек */
.hover-cell {
position: relative;
border: 1px solid #4d4d4d;
border-radius: 6px;
background: rgba(45, 45, 45, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-height: 60px;
overflow: visible;
}
/* Увеличенная невидимая кликабельная зона (в 2 раза больше ячейки) */
.hover-cell .click-zone {
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
z-index: 3;
transform: scale(0.5);
transform-origin: center;
opacity: 0;
}
/* Видимая часть ссылки */
.hover-cell .cell-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 12px;
box-sizing: border-box;
text-decoration: none !important;
color: inherit !important;
z-index: 2;
}
/* Эффекты при наведении */
.hover-cell:hover {
transform: scale(1.03);
box-shadow: 0 0 0 2px #4d9de0;
background: rgba(35, 65, 95, 0.8);
}
/* Плавное затухание */
.hover-cell::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(77, 157, 224, 0);
transition: background 0.5s ease;
z-index: 1;
border-radius: 5px;
}
.hover-cell:hover::after {
background: rgba(77, 157, 224, 0.15);
}
/* Оптимизация для ссылок */
.hover-cell .cell-link a {
display: block;
width: 100%;
height: 100%;
text-decoration: none !important;
color: inherit !important;
}