|
|
| Строка 5: |
Строка 5: |
| <div class="link-card--сollapsible__content short-scrollbar mw-collapsible-content" style="{{#if: {{{no-scroll|}}} | | max-height:400px; overflow:auto; overflow-x:hidden; }}>{{{content}}}</div> | | <div class="link-card--сollapsible__content short-scrollbar mw-collapsible-content" style="{{#if: {{{no-scroll|}}} | | max-height:400px; overflow:auto; overflow-x:hidden; }}>{{{content}}}</div> |
| </div> | | </div> |
| </div> | | </div><!-- |
| {{#css:
| |
| .link-card--сollapsible {
| |
| display: flex;
| |
| width: 100%;
| |
| background: var(--background-color);
| |
| border: 1px outset rgb(0 0 0 / 30%);
| |
| 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 {
| |
| background: #00000020;
| |
| padding: 4px 8px;
| |
| font-size: 0.9em;
| |
| font-weight: bold;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| flex-wrap: nowrap;
| |
| }
| |
| | |
| /* Изображение в карточке */
| |
| .link-card--сollapsible .link-card--сollapsible__image {
| |
| padding: 4px;
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| /* Контейнер для карточки с отображением */
| |
| .link-card--сollapsible {
| |
| display: block;
| |
| position: relative;
| |
| }
| |
| | |
| /* Шапка карточки, содержащая элементы */
| |
| .link-card--сollapsible__header {
| |
| display: grid;
| |
| grid-template-columns: 0fr 1fr 0fr;
| |
| height: 100%;
| |
| }
| |
| | |
| /* Кнопка сворачивания/разворачивания */
| |
| .link-card--сollapsible__header > .mw-collapsible-toggle {
| |
| position: relative !important;
| |
| font-size: 14px;
| |
| background: #00000020;
| |
| display: flex;
| |
| align-items: center;
| |
| padding-right: 6px;
| |
| }
| |
| | |
| /* Совмещение названия и изображения в заголовке */
| |
| .link-card--сollapsible__name,
| |
| .link-card--сollapsible__image {
| |
| grid-row: 1 / 1;
| |
| }
| |
| | |
| /* Контент, который появляется при разворачивании карточки */
| |
| .link-card--сollapsible__content {
| |
| grid-column: 1 / -1;
| |
| background: #00000020;
| |
| position: absolute !important;
| |
| top: 100%;
| |
| left: 0;
| |
| right: 0;
| |
| display: flex;
| |
| gap: 4px;
| |
| padding: 6px;
| |
| border-radius: 0 0 0.2em 0.2em;
| |
| border: 2px solid #31313b;
| |
| border-top: 0;
| |
| background-color: #24242a;
| |
| box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
| |
| | |
| flex-direction: column;
| |
| }
| |
|
| |
|
| | --><templatestyles src="LinkСard/Сollapsible/styles.css" /><div class="customCSS" style="display:none"> |
| /* Параметры для контента при раскрытом элементе */ | | /* Параметры для контента при раскрытом элементе */ |
| .link-card--сollapsible__content:has(.mw-collapsible-toggle-expanded) { | | .link-card--сollapsible__content:has(.mw-collapsible-toggle-expanded) { |
| min-height: 400px; | | min-height: 400px; |
| } | | } |
| }}
| | </div> |
Страница Шаблон:LinkСard/Сollapsible/styles.css не имеет содержания.
/* Параметры для контента при раскрытом элементе */
.link-card--сollapsible__content:has(.mw-collapsible-toggle-expanded) {
min-height: 400px;
}
