Шаблон:LinkCard/Сollapsible/styles.css: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) м Pok переименовал страницу Шаблон:LinkСard/Сollapsible/styles.css в Шаблон:LinkCard/Сollapsible/styles.css без оставления перенаправления: Название с ошибкой |
Pok (обсуждение | вклад) м Замена текста — «--theme-bg-color-350» на «--theme-bg-color-300» |
||
| (не показано 11 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
.link-card--сollapsible { | .link-card--сollapsible { | ||
/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */ | |||
/* --alpha из стилей шаблона; по умолчанию: 90% */ | |||
--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100)); | |||
display: flex; | display: flex; | ||
width: 100%; | width: 100%; | ||
background: var(--background-color); | background: var(--background-color); | ||
border: | border: var(--border-outset); | ||
border-radius: | border-radius: var(--border-radius-medium); | ||
box-shadow: | box-shadow: var(--box-shadow); | ||
text-align: left; | text-align: left; | ||
} | } | ||
| Строка 11: | Строка 15: | ||
/* Название карточки */ | /* Название карточки */ | ||
.link-card--сollapsible .link-card--сollapsible__name { | .link-card--сollapsible .link-card--сollapsible__name { | ||
background: | background: rgba(var(--color-darkened--rgb), 0.13); | ||
padding: 4px 8px; | padding: 4px 8px; | ||
font-size: | font-size: var(--font-size-xs); | ||
font-weight: bold; | font-weight: bold; | ||
display: flex; | display: flex; | ||
| Строка 44: | Строка 48: | ||
.link-card--сollapsible__header > .mw-collapsible-toggle { | .link-card--сollapsible__header > .mw-collapsible-toggle { | ||
position: relative !important; | position: relative !important; | ||
font-size: | font-size: var(--font-size-xs); | ||
background: | background: rgba(var(--color-darkened--rgb), 0.13); | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Строка 59: | Строка 63: | ||
/* Контент, который появляется при разворачивании карточки */ | /* Контент, который появляется при разворачивании карточки */ | ||
.link-card--сollapsible__content { | .link-card--сollapsible__content { | ||
position: absolute !important; | position: absolute !important; | ||
top: 100%; | top: 100%; | ||
| Строка 68: | Строка 70: | ||
gap: 4px; | gap: 4px; | ||
padding: 6px; | padding: 6px; | ||
border-radius: 0 0 | border-radius: 0 0 var(--border-radius-low) var(--border-radius-low); | ||
border: 2px solid | flex-direction: column; | ||
border: 2px solid var(--theme-bg-color-250); | |||
background-color: var(--theme-bg-color-150); | |||
box-shadow: var(--box-shadow-inset); | |||
border-top: 0; | border-top: 0; | ||
grid-column: 1 / -1; | |||
} | } | ||
Текущая версия от 21:04, 20 июня 2025
.link-card--сollapsible {
/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */
/* --alpha из стилей шаблона; по умолчанию: 90% */
--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100));
display: flex;
width: 100%;
background: var(--background-color);
border: var(--border-outset);
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow);
text-align: left;
}
/* Название карточки */
.link-card--сollapsible .link-card--сollapsible__name {
background: rgba(var(--color-darkened--rgb), 0.13);
padding: 4px 8px;
font-size: var(--font-size-xs);
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: var(--font-size-xs);
background: rgba(var(--color-darkened--rgb), 0.13);
display: flex;
align-items: center;
padding-right: 6px;
}
/* Совмещение названия и изображения в заголовке */
.link-card--сollapsible__name,
.link-card--сollapsible__image {
grid-row: 1 / 1;
}
/* Контент, который появляется при разворачивании карточки */
.link-card--сollapsible__content {
position: absolute !important;
top: 100%;
left: 0;
right: 0;
display: flex;
gap: 4px;
padding: 6px;
border-radius: 0 0 var(--border-radius-low) var(--border-radius-low);
flex-direction: column;
border: 2px solid var(--theme-bg-color-250);
background-color: var(--theme-bg-color-150);
box-shadow: var(--box-shadow-inset);
border-top: 0;
grid-column: 1 / -1;
}