Шаблон:Рамочка/style.css: различия между версиями
Материал из SpaceOnyx
Дополнительные действия
Neyran (обсуждение | вклад) Нет описания правки |
Neyran (обсуждение | вклад) Нет описания правки |
||
| Строка 3: | Строка 3: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
flex: 1 1 auto; /* ← НОВОЕ: растягивается в flex-контейнере */ | |||
align-self: stretch; /* ← НОВОЕ: на всю ширину родителя во flex */ | |||
max-width: 100%; | max-width: 100%; | ||
min-width: 300px; | min-width: 300px; | ||
| Строка 20: | Строка 22: | ||
/* Заголовок рамки */ | /* Заголовок рамки */ | ||
.рамка-заголовок { | .рамка-заголовок { | ||
display: block; | |||
width: 100%; /* ← НОВОЕ: на всю ширину карточки */ | |||
box-sizing: border-box; /* ← НОВОЕ: padding не вылезает */ | |||
background-color: #465298; | background-color: #465298; | ||
border-radius: 3px; | border-radius: 3px; | ||
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
padding: 6px 8px; | padding: 6px 8px; | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
| Строка 36: | Строка 41: | ||
line-height: 1; | line-height: 1; | ||
min-height: 0; | min-height: 0; | ||
width: 100%; /* ← НОВОЕ */ | |||
box-sizing: border-box; /* ← НОВОЕ */ | |||
} | } | ||
| Строка 42: | Строка 49: | ||
padding: 0; | padding: 0; | ||
color: #fff; | color: #fff; | ||
flex-grow: | flex: 1 1 auto; /* ← flex-grow со сжатием */ | ||
min-width: 0; /* ← НОВОЕ: не даёт контенту распирать родителя */ | |||
line-height: 1; | line-height: 1; | ||
font-size: 0.95em; | font-size: 0.95em; | ||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | } | ||
| Строка 81: | Строка 92: | ||
} | } | ||
.рамка:not(.mw-collapsed) .рамка-кнопка::before { | .рамка:not(.mw-collapsed) .рамка-кнопка::before { | ||
content: "▼"; | content: "▼"; | ||
} | } | ||
.рамка.mw-collapsed .рамка-кнопка::before { | .рамка.mw-collapsed .рамка-кнопка::before { | ||
content: "◀"; | content: "◀"; | ||
| Строка 95: | Строка 104: | ||
padding: 5px 8px; | padding: 5px 8px; | ||
display: block; | display: block; | ||
width: 100%; /* ← НОВОЕ */ | |||
box-sizing: border-box; /* ← НОВОЕ */ | |||
flex: 1 1 auto; /* ← НОВОЕ: тянется на всю оставшуюся высоту */ | |||
} | } | ||
Версия от 22:20, 12 сентября 2026
/* Основные стили рамки */
.рамка {
display: flex;
flex-direction: column;
flex: 1 1 auto; /* ← НОВОЕ: растягивается в flex-контейнере */
align-self: stretch; /* ← НОВОЕ: на всю ширину родителя во flex */
max-width: 100%;
min-width: 300px;
width: 100%;
margin: 0.5em 0 5px 0;
border: 1px solid #465298;
padding: 2px;
border-radius: 3px;
box-sizing: border-box;
overflow: hidden;
}
.рамка .wikitable {
margin: 0 !important;
}
/* Заголовок рамки */
.рамка-заголовок {
display: block;
width: 100%; /* ← НОВОЕ: на всю ширину карточки */
box-sizing: border-box; /* ← НОВОЕ: padding не вылезает */
background-color: #465298;
border-radius: 3px;
text-align: center;
cursor: pointer;
padding: 6px 8px;
line-height: 1;
}
.рамка-заголовок-контент {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
margin: 0;
line-height: 1;
min-height: 0;
width: 100%; /* ← НОВОЕ */
box-sizing: border-box; /* ← НОВОЕ */
}
.рамка-название {
margin: 0;
padding: 0;
color: #fff;
flex: 1 1 auto; /* ← flex-grow со сжатием */
min-width: 0; /* ← НОВОЕ: не даёт контенту распирать родителя */
line-height: 1;
font-size: 0.95em;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Кнопка сворачивания */
.рамка-кнопка {
color: #fff;
cursor: pointer;
font-size: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
margin: 0;
background: transparent;
border-radius: 2px;
text-decoration: none !important;
user-select: none;
line-height: 1;
box-sizing: border-box;
vertical-align: middle;
flex: 0 0 auto;
transition: background 0.15s ease;
}
.рамка-кнопка:hover {
background: rgba(0, 0, 0, 0.22);
}
.рамка-кнопка::before {
font-size: 10px;
line-height: 1;
color: #fff;
display: block;
}
.рамка:not(.mw-collapsed) .рамка-кнопка::before {
content: "▼";
}
.рамка.mw-collapsed .рамка-кнопка::before {
content: "◀";
}
/* Содержимое рамки */
.рамка-содержимое {
padding: 5px 8px;
display: block;
width: 100%; /* ← НОВОЕ */
box-sizing: border-box; /* ← НОВОЕ */
flex: 1 1 auto; /* ← НОВОЕ: тянется на всю оставшуюся высоту */
}
.рамка-содержимое p:first-child {
margin-top: 0;
}
.рамка-содержимое p:last-child {
margin-bottom: 0;
}
/* Стили для MediaWiki collapsible */
.mw-collapsible-toggle {
display: inline-block;
user-select: none;
line-height: 1;
}
.mw-collapsible-text {
font-size: 0.9em;
}
@media screen and (max-width: 751px) {
.рамка {
min-width: 0;
}
}