Kemran2933: Поправки под скин TGUI: сброс оформления кнопки-переключателя, стрелка из иконки скина

2026-11-12T15:29:43Z

Поправки под скин TGUI: сброс оформления кнопки-переключателя, стрелка из иконки скина

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

Строка 19:		Строка 20:
	}		}

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

	.ss220-procedure > .ss220-procedure__head:hover {		.ss220-procedure > .ss220-procedure__head:hover,
			.ss220-procedure > .ss220-procedure__head:active {
	background-color: #1f262e;		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 {		.ss220-procedure > .ss220-procedure__head::before {
	~~content: "";~~
	flex: none;		flex: none;
	width: ~~5px~~;		width: 1em;
	~~height: 5px;~~		font-size: 10px;
	~~border~~-~~right: 1.5px solid currentColor;~~
	~~border-bottom: 1.5px solid currentColor;~~
	~~transform~~: ~~rotate(45deg)~~;
	transition: transform 0.25s ease;		transition: transform 0.25s ease;
	}		}

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

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

	/*		/*
	* Плавное раскрытие. ~~Сразу после~~ инициализации (.mw-made-collapsible) высоту		* Плавное раскрытие. После инициализации (.mw-made-collapsible) высоту
	* задаёт grid, а не display:none. До загрузки JS блок скрывает ~~штатный CSS~~		* задаёт grid, а не display:none. До загрузки скриптов блок скрывает
	* MediaWiki, а без JS содержимое остаётся раскрытым.		* штатный CSS MediaWiki, а без JavaScript содержимое остаётся раскрытым.
	*/		*/
	.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {		.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {

Kemran2933: Стили для черновика Шаблон:Procedure (TemplateStyles)

2026-11-12T15:24:56Z

Стили для черновика Шаблон:Procedure (TemplateStyles)

Новая страница

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

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

/* Заголовок целиком служит переключателем. */
.ss220-procedure > .ss220-procedure__head {
display: flex;
align-items: center;
gap: 7px;
float: none;
box-sizing: border-box;
min-height: 27px;
padding: 4px 9px;
font: 700 12px/18px Roboto, Arial, sans-serif;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease;
}

.ss220-procedure > .ss220-procedure__head:hover {
background-color: #1f262e;
}

/* Стрелка: вниз, когда раскрыто, вправо, когда свёрнуто. */
.ss220-procedure > .ss220-procedure__head::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease;
}

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

/*
* Плавное раскрытие. Сразу после инициализации (.mw-made-collapsible) высоту
* задаёт grid, а не display:none. До загрузки JS блок скрывает штатный CSS
* MediaWiki, а без JS содержимое остаётся раскрытым.
*/
.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;
}
}

Участник:Kemran2933/Procedure.css - История изменений

Kemran2933: Поправки под скин TGUI: сброс оформления кнопки-переключателя, стрелка из иконки скина

Kemran2933: Стили для черновика Шаблон:Procedure (TemplateStyles)