Шаблон:FunnyTable.css: различия между версиями
Lnnuux (обсуждение | вклад) Нет описания правки |
Lnnuux (обсуждение | вклад) Увеличена высота |
||
| (не показано 5 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Общие стили для таблиц внутри .wrap */ | /* Общие стили для всех таблиц внутри .wrap */ | ||
.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; /* одинаковая ширина ячеек */ | table-layout: fixed; /* одинаковая ширина ячеек */ | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
/* Убираем стандартные границы */ | |||
.wrap table, | .wrap table, | ||
.wrap th, | .wrap th, | ||
.wrap td { | .wrap td { | ||
border: none; | border: none; | ||
} | } | ||
| Строка 18: | Строка 19: | ||
.wrap td { | .wrap td { | ||
border: 1px solid grey; | border: 1px solid grey; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: 35px 8px; /* увеличен вертикальный padding для высоты */ | |||
background-color: transparent; | 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); | ||
| Строка 31: | Строка 33: | ||
/* Стили для ВСЕХ ссылок внутри ячеек */ | /* Стили для ВСЕХ ссылок внутри ячеек */ | ||
.wrap td a { | .wrap td a, | ||
.wrap td a:link, | |||
.wrap td a:visited, | |||
.wrap td a:hover, | |||
.wrap td a:active { | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
color: white; | color: white !important; /* белый цвет для любого состояния */ | ||
text-decoration: none; | text-decoration: none !important; | ||
text-shadow: 0 0 2px rgba(0,0,0,0.5); /* тень для читаемости | text-shadow: 0 0 2px rgba(0,0,0,0.5); /* лёгкая тень для читаемости */ | ||
font-size: 20px; /* увеличен размер шрифта до 20px */ | |||
font-size: | |||
} | } | ||
| Строка 78: | Строка 63: | ||
} | } | ||
/* Обнуляем фоновые цвета у всех цветовых классов таблиц | /* Обнуляем фоновые цвета у всех цветовых классов таблиц */ | ||
.table-elementary { | .table-elementary{ | ||
background-color: transparent !important; | 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;
}