Шаблон:ТаблицаРолей.Тест: различия между версиями
Материал из FIRE STATION WIKI
Дополнительные действия
Нет описания правки |
Нет описания правки |
||
| Строка 1: | Строка 1: | ||
<style> | |||
.RoleTable-content_main { | |||
padding: 8px !important; | |||
display: grid !important; | |||
grid-template-columns: repeat(5, 1fr) !important; /* Строго 5 колонок в ряд */ | |||
gap: 8px !important; | |||
} | |||
.RoleTable-content_main > .cardRole { | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
min-width: 0 !important; | |||
box-sizing: border-box !important; | |||
} | |||
.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) { | |||
grid-column: 3 !important; | |||
} | |||
.RoleTable-content_main .card_imageRole { | |||
width: 100% !important; | |||
display: flex !important; | |||
justify-content: center !important; | |||
align-items: center !important; | |||
box-sizing: border-box !important; | |||
} | |||
.RoleTable-content_main .card_imageRole img { | |||
width: 100% !important; | |||
height: auto !important; | |||
max-width: 128px !important; | |||
object-fit: contain !important; | |||
} | |||
/* Мобильная адаптация */ | |||
@media (max-width: 768px) { | |||
.RoleTable-content_main { | |||
grid-template-columns: repeat(3, 1fr) !important; /* По 3 в ряд на планшетах */ | |||
} | |||
.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) { | |||
grid-column: auto !important; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.RoleTable-content_main { | |||
grid-template-columns: repeat(2, 1fr) !important; /* По 2 в ряд на телефонах */ | |||
} | |||
} | |||
</style> | |||
<div class="RoleTable-card" style="display: inline-flex; flex-direction: column; max-width: 100%; min-width: 300px; width: 100%; margin: 0.5em 0 5px 0; padding: 2px; border-radius: 6px; box-sizing: border-box; border: 1px solid {{{Цвет_карточки|#465298}}};"> | <div class="RoleTable-card" style="display: inline-flex; flex-direction: column; max-width: 100%; min-width: 300px; width: 100%; margin: 0.5em 0 5px 0; padding: 2px; border-radius: 6px; box-sizing: border-box; border: 1px solid {{{Цвет_карточки|#465298}}};"> | ||
<div class="RoleTable-card_header" style="border-radius: 3px; text-align: center; cursor: pointer; background-color: {{{Цвет_заголовка|#465298}}};"> | <div class="RoleTable-card_header" style="border-radius: 3px; text-align: center; cursor: pointer; background-color: {{{Цвет_заголовка|#465298}}};"> | ||
| Строка 10: | Строка 61: | ||
</div> | </div> | ||
<div class="RoleTable-card_content" style="margin-top: 3px; width: 100%;"> | <div class="RoleTable-card_content" style="margin-top: 3px; width: 100%;"> | ||
<div class="RoleTable-content_main" style="background-color: {{{Цвет_карточки|#465298}}}47; border: 1px solid {{{Цвет_карточки|#465298}}}57;"> | |||
<div class="RoleTable-content_main" style=" | |||
{{{Содержание|Какое-то содержание}}} | {{{Содержание|Какое-то содержание}}} | ||
</div> | </div> | ||
Версия от 18:32, 22 июня 2026
<style> .RoleTable-content_main {
padding: 8px !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; /* Строго 5 колонок в ряд */ gap: 8px !important;
}
.RoleTable-content_main > .cardRole {
width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
}
.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) {
grid-column: 3 !important;
}
.RoleTable-content_main .card_imageRole {
width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important;
}
.RoleTable-content_main .card_imageRole img {
width: 100% !important; height: auto !important; max-width: 128px !important; object-fit: contain !important;
}
/* Мобильная адаптация */ @media (max-width: 768px) {
.RoleTable-content_main {
grid-template-columns: repeat(3, 1fr) !important; /* По 3 в ряд на планшетах */
}
.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) {
grid-column: auto !important;
}
} @media (max-width: 480px) {
.RoleTable-content_main {
grid-template-columns: repeat(2, 1fr) !important; /* По 2 в ряд на телефонах */
}
} </style>
Название
Какое-то содержание
Как использовать шаблон "ТаблицаРолей"
Это шаблон для отображения ролей в красивой рамке.