Шаблон:FunnyTable.css: различия между версиями
Lnnuux (обсуждение | вклад) Нет описания правки |
Lnnuux (обсуждение | вклад) Увеличена высота |
||
| (не показано 9 промежуточных версий этого же участника) | |||
| Строка 2: | Строка 2: | ||
.wrap table { | .wrap table { | ||
width: 100%; | width: 100%; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 10px; | border-spacing: 10px; /* расстояние между кнопками */ | ||
margin-bottom: 40px; | margin-bottom: 40px; | ||
table-layout: fixed; /* одинаковая ширина ячеек */ | |||
background-color: transparent; | |||
} | } | ||
/* Убираем стандартные границы | /* Убираем стандартные границы */ | ||
.wrap table, | .wrap table, | ||
.wrap th, | .wrap th, | ||
| Строка 15: | Строка 16: | ||
} | } | ||
/* Оформляем | /* Оформляем ячейки как кнопки */ | ||
.wrap td { | .wrap td { | ||
border: 1px solid grey; | border: 1px solid grey; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: 35px 8px; /* увеличен вертикальный padding для высоты */ | |||
background-color: | min-height: 60px; /* минимальная высота */ | ||
background-color: transparent; | |||
transition: box-shadow linear 0.15s, border-color linear 0.15s; | transition: box-shadow linear 0.15s, border-color linear 0.15s; | ||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | box-shadow: 0 2px 5px rgba(0,0,0,0.1); | ||
} | } | ||
.wrap td:hover { | .wrap td:hover { | ||
box-shadow: inset 0 2px 20px -5px black, 0 4px 8px rgba(0,0,0,0.2); | box-shadow: inset 0 2px 20px -5px black, 0 4px 8px rgba(0,0,0,0.2); | ||
border-color: #aaa; | border-color: #aaa; | ||
} | } | ||
/* Стили для | /* Стили для ВСЕХ ссылок внутри ячеек */ | ||
.wrap td | .wrap td a, | ||
.wrap td a:link, | |||
.wrap td a:visited, | |||
.wrap td a:hover, | |||
.wrap td a:active { | |||
.wrap td | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | |||
text-decoration: none; | height: 100%; | ||
color: white !important; /* белый цвет для любого состояния */ | |||
text-decoration: none !important; | |||
text-shadow: 0 0 2px rgba(0,0,0,0.5); /* лёгкая тень для читаемости */ | |||
font-size: 20px; /* увеличен размер шрифта до 20px */ | |||
} | } | ||
/* Заголовки таблиц (если используются) */ | |||
/* | |||
.wrap th { | .wrap th { | ||
padding: 10px; | padding: 10px; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
text-align: center; | text-align: center; | ||
background-color: | background-color: transparent; | ||
color: | color: inherit; | ||
} | } | ||
/* | /* Для таблицы .table-elementary задаём ячейкам ширину 50% (по две в ряду) */ | ||
.table-elementary td { | .table-elementary td { | ||
width: 50%; | |||
} | } | ||
.table-elementary | |||
background-color: | /* Обнуляем фоновые цвета у всех цветовых классов таблиц */ | ||
.table-elementary{ | |||
background-color: transparent !important; | |||
} | } | ||
Текущая версия от 16:37, 16 февраля 2026
/* Общие стили для всех таблиц внутри .wrap */
.wrap table {
width: 100%;
border-collapse: separate;
border-spacing: 10px; /* расстояние между кнопками */
margin-bottom: 40px;
table-layout: fixed; /* одинаковая ширина ячеек */
background-color: transparent;
}
/* Убираем стандартные границы */
.wrap table,
.wrap th,
.wrap td {
border: none;
}
/* Оформляем ячейки как кнопки */
.wrap td {
border: 1px solid grey;
border-radius: 12px;
padding: 35px 8px; /* увеличен вертикальный padding для высоты */
min-height: 60px; /* минимальная высота */
background-color: transparent;
transition: box-shadow linear 0.15s, border-color linear 0.15s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.wrap td:hover {
box-shadow: inset 0 2px 20px -5px black, 0 4px 8px rgba(0,0,0,0.2);
border-color: #aaa;
}
/* Стили для ВСЕХ ссылок внутри ячеек */
.wrap td a,
.wrap td a:link,
.wrap td a:visited,
.wrap td a:hover,
.wrap td a:active {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: white !important; /* белый цвет для любого состояния */
text-decoration: none !important;
text-shadow: 0 0 2px rgba(0,0,0,0.5); /* лёгкая тень для читаемости */
font-size: 20px; /* увеличен размер шрифта до 20px */
}
/* Заголовки таблиц (если используются) */
.wrap th {
padding: 10px;
font-size: 1.2em;
text-align: center;
background-color: transparent;
color: inherit;
}
/* Для таблицы .table-elementary задаём ячейкам ширину 50% (по две в ряду) */
.table-elementary td {
width: 50%;
}
/* Обнуляем фоновые цвета у всех цветовых классов таблиц */
.table-elementary{
background-color: transparent !important;
}