Участник:Kemran2933/Procedure.css

/*
 * Стили для {{Procedure}}.
 *
 * Своего JavaScript нет. Сворачивание делает встроенный в MediaWiki
 * mw-collapsible: он переключает класс .mw-collapsed и скрывает содержимое
 * через display:none. Анимация и стрелка сделаны здесь, на CSS.
 * Правила, зависящие от состояния, используют дочерний селектор (>),
 * чтобы вложенные процедуры раскрывались независимо.
 */

.ss220-procedure {
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	border: 1px solid #2b3139;
	border-radius: 8px;
	overflow: hidden;
	background: #191f26;
	color: #c5c9ce;
}

/*
 * Заголовок целиком служит переключателем (.mw-collapsible-toggle).
 * Скин TGUI рисует переключатели маленькой синей кнопкой, поэтому его фон,
 * размеры, отступ, тень и белый цвет текста здесь сброшены.
 */
.ss220-procedure > .ss220-procedure__head {
	display: flex;
	align-items: center;
	gap: 7px;
	float: none;
	position: static;
	box-sizing: border-box;
	min-width: 0;
	height: auto;
	min-height: 27px;
	margin: 0;
	padding: 4px 9px;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit !important;
	font: 700 12px/18px Roboto, Arial, sans-serif;
	transition: background-color 0.15s ease;
}

.ss220-procedure > .ss220-procedure__head:hover,
.ss220-procedure > .ss220-procedure__head:active {
	background-color: #1f262e;
	box-shadow: none !important;
}

/* Скин красит всё внутри переключателя в белый и прячет ссылки. */
.ss220-procedure > .ss220-procedure__head * {
	color: inherit !important;
}

.ss220-procedure > .ss220-procedure__head a {
	display: inline;
	text-decoration: underline;
}

/*
 * Стрелка: шеврон FontAwesome, который скин TGUI ставит в ::before
 * переключателя. Свёрнуто — смотрит вправо, раскрыто — вниз.
 */
.ss220-procedure > .ss220-procedure__head::before {
	flex: none;
	width: 1em;
	font-size: 10px;
	transition: transform 0.25s ease;
}

.ss220-procedure.mw-collapsed > .ss220-procedure__head::before {
	transform: rotate(-90deg);
}

.ss220-procedure:not(.mw-collapsed) > .ss220-procedure__head::before {
	transform: none;
}

/*
 * Плавное раскрытие. После инициализации (.mw-made-collapsible) высоту
 * задаёт grid, а не display:none. До загрузки скриптов блок скрывает
 * штатный CSS MediaWiki, а без JavaScript содержимое остаётся раскрытым.
 */
.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {
	display: grid !important;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.ss220-procedure.mw-made-collapsible.mw-collapsed > .mw-collapsible-content {
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
}

.ss220-procedure__body {
	min-height: 0;
	overflow: hidden;
}

.ss220-procedure__inner {
	border-top: 2px solid #405a75;
	padding: 12px 14px;
	line-height: 1.5;
}

.ss220-procedure__inner > :first-child {
	margin-top: 0;
}

.ss220-procedure__inner > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ss220-procedure > .ss220-procedure__head,
	.ss220-procedure > .ss220-procedure__head::before,
	.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {
		transition: none;
	}
}