Шаблон:LinkCard/Сollapsible: различия между версиями
Pok (обсуждение | вклад) Нет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 8: | Строка 8: | ||
{{#css: | {{#css: | ||
.link-card--сollapsible { | .link-card--сollapsible { | ||
display: flex | display: flex; | ||
width: 100%; | width: 100%; | ||
background: var(--background-color); | background: var(--background-color); | ||
border: 1px outset rgb(0 0 0 / 30%); | border: 1px outset rgb(0 0 0 / 30%); | ||
border-radius: 0.3em; | border-radius: 0.3em; | ||
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4); | |||
text-align: left; | |||
} | } | ||
/* Название карточки */ | |||
.link-card--сollapsible .link-card--сollapsible__name { | .link-card--сollapsible .link-card--сollapsible__name { | ||
background: #00000020; | background: #00000020; | ||
padding: 4px 8px; | padding: 4px 8px; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
font-weight: bold; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; | ||
flex-wrap: nowrap; | flex-wrap: nowrap; | ||
} | } | ||
/* Изображение в карточке */ | |||
.link-card--сollapsible .link-card--сollapsible__image { | .link-card--сollapsible .link-card--сollapsible__image { | ||
padding: 4px; | padding: 4px; | ||
} | } | ||
/* Контейнер для карточки с отображением */ | |||
.link-card--сollapsible { | .link-card--сollapsible { | ||
display: block; | display: block; | ||
| Строка 37: | Строка 40: | ||
} | } | ||
/* Шапка карточки, содержащая элементы */ | |||
.link-card--сollapsible__header { | .link-card--сollapsible__header { | ||
display: grid; | display: grid; | ||
| Строка 43: | Строка 47: | ||
} | } | ||
/* Кнопка сворачивания/разворачивания */ | |||
.link-card--сollapsible__header > .mw-collapsible-toggle { | .link-card--сollapsible__header > .mw-collapsible-toggle { | ||
position: relative !important; | position: relative !important; | ||
| Строка 52: | Строка 57: | ||
} | } | ||
/* Совмещение названия и изображения в заголовке */ | |||
.link-card--сollapsible__name, | .link-card--сollapsible__name, | ||
.link-card--сollapsible__image { | .link-card--сollapsible__image { | ||
| Строка 58: | Строка 63: | ||
} | } | ||
/* Контент, который появляется при разворачивании карточки */ | |||
.link-card--сollapsible__content { | .link-card--сollapsible__content { | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
| Строка 79: | Строка 85: | ||
} | } | ||
/* Параметры для контента при раскрытом элементе */ | |||
.link-card--сollapsible__content:has(.mw-collapsible-toggle-expanded) { | .link-card--сollapsible__content:has(.mw-collapsible-toggle-expanded) { | ||
min-height: 400px; | min-height: 400px; | ||
} | } | ||
}} | }} | ||