MediaWiki:Common.css: различия между версиями
Внешний вид
LePacko (обсуждение | вклад) Нет описания правки |
LePacko (обсуждение | вклад) Нет описания правки Метка: отменено |
||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* Основные стили | /* Основные стили таблицы */ | ||
.table-container { | .table-container { | ||
width: 60%; | width: 60%; | ||
| Строка 14: | Строка 14: | ||
} | } | ||
/* Заголовок таблицы */ | |||
.table-header-cell { | .table-header-cell { | ||
text-align: center; | text-align: center; | ||
| Строка 23: | Строка 24: | ||
} | } | ||
/* Заголовки групп */ | |||
.table-group-header { | .table-group-header { | ||
text-align: center; | text-align: center; | ||
| Строка 31: | Строка 33: | ||
} | } | ||
/* | /* Основные стили ячеек */ | ||
.hover-cell { | .hover-cell { | ||
position: relative; | |||
border: 1px solid #4d4d4d; | border: 1px solid #4d4d4d; | ||
border-radius: 6px; | border-radius: 6px; | ||
background: rgba(45, 45, 45, 0.6); | background: rgba(45, 45, 45, 0.6); | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
min-height: 60px; | |||
height: auto; | |||
overflow: visible; | |||
padding: 0; | |||
z-index: 1; | |||
height: | |||
} | } | ||
/* Эффект затухания (оставляем как было) */ | |||
.hover-cell::before { | .hover-cell::before { | ||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: rgba(77, 157, 224, 0); | |||
transition: background 0.5s ease-out; | |||
z-index: 0; | |||
border-radius: inherit; | |||
} | } | ||
/* Кликабельная область (ссылка) */ | |||
.hover-cell .cell-link { | .hover-cell .cell-link { | ||
position: absolute; | position: absolute; | ||
| Строка 138: | Строка 80: | ||
} | } | ||
/* Эффект наведения с затуханием */ | |||
.hover-cell:hover { | .hover-cell:hover { | ||
transform: scale(1.03); | |||
z-index: 10; | |||
box-shadow: 0 0 0 2px #4d9de0; | |||
} | } | ||
.hover-cell:hover::before { | .hover-cell:hover::before { | ||
background: rgba(77, 157, 224, 0.15); | |||
} | |||
/* Синхронное увеличение ссылки */ | |||
.hover-cell:hover .cell-link { | |||
transform: scale(1.03); | |||
} | } | ||
/* Стили для текста ссылки */ | |||
.hover-cell .cell-link a { | .hover-cell .cell-link a { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
width: 100%; | |||
text-decoration: none !important; | |||
color: inherit !important; | |||
} | |||
/* Разделитель колонок */ | |||
.column-divider { | |||
border-right: 2px solid #707070 !important; | |||
} | } | ||
. | /* Центрирование содержимого */ | ||
.center-content { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | height: 100%; | ||
} | } | ||
Версия от 15:30, 1 июля 2025
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/* Основные стили таблицы */
.table-container {
width: 60%;
margin: 2em auto;
}
.wikitable.hover-table {
width: 100%;
border-collapse: separate;
border-spacing: 10px;
background: transparent;
}
/* Заголовок таблицы */
.table-header-cell {
text-align: center;
padding: 15px;
font-size: 1.5em;
font-weight: bold;
border: 1px solid #3a3a3a;
border-radius: 8px;
}
/* Заголовки групп */
.table-group-header {
text-align: center;
padding: 10px;
font-weight: bold;
border-bottom: 2px solid #4d4d4d;
margin-bottom: 10px;
}
/* Основные стили ячеек */
.hover-cell {
position: relative;
border: 1px solid #4d4d4d;
border-radius: 6px;
background: rgba(45, 45, 45, 0.6);
transition: all 0.3s ease;
min-height: 60px;
height: auto;
overflow: visible;
padding: 0;
z-index: 1;
}
/* Эффект затухания (оставляем как было) */
.hover-cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(77, 157, 224, 0);
transition: background 0.5s ease-out;
z-index: 0;
border-radius: inherit;
}
/* Кликабельная область (ссылка) */
.hover-cell .cell-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
text-decoration: none !important;
color: inherit !important;
z-index: 2;
transform: scale(1);
transition: inherit;
}
/* Эффект наведения с затуханием */
.hover-cell:hover {
transform: scale(1.03);
z-index: 10;
box-shadow: 0 0 0 2px #4d9de0;
}
.hover-cell:hover::before {
background: rgba(77, 157, 224, 0.15);
}
/* Синхронное увеличение ссылки */
.hover-cell:hover .cell-link {
transform: scale(1.03);
}
/* Стили для текста ссылки */
.hover-cell .cell-link a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
text-decoration: none !important;
color: inherit !important;
}
/* Разделитель колонок */
.column-divider {
border-right: 2px solid #707070 !important;
}
/* Центрирование содержимого */
.center-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}