MediaWiki:Common.css - История изменений

Алисофаг в 21:55, 22 сентября 2025

2025-09-22T21:55:16Z

← Предыдущая версия		Версия от 00:55, 23 сентября 2025
Строка 1:		Строка 1:
	/* Размещённый здесь CSS будет применяться ко всем темам оформления */		/* Размещённый здесь CSS будет применяться ко всем темам оформления */
	.spoiler {		.spoiler {
	background-color: ~~D3D3D3~~; /* Or any other color to obscure the text */		background-color: PapayaWhip; /* Or any other color to obscure the text */
	color: transparent;		color: transparent;
	user-select: none; /* Prevents text selection while hidden */		user-select: none; /* Prevents text selection while hidden */

Алисофаг в 22:18, 21 сентября 2025

2025-09-21T22:18:12Z

← Предыдущая версия		Версия от 01:18, 22 сентября 2025
Строка 11:		Строка 11:
	}		}

	/* ~~Основной~~ контейнер~~: будет подстраиваться под ширину картинки~~ */		/* CloudImage thumb — основной контейнер */
	figure.cimg {		figure.cimg {
	display: inline-block; ~~/* shrink-wrap по контенту */~~		display: inline-block;
	clear: both;		clear: both;
	margin: 0.6em 0.6em;		margin: 0.6em 0.6em;
	border: 1px solid #c8ccd1;		border: 1px solid #c8ccd1;
	background-color: #fbfcfd;		background-color: #fbfcfd;
	~~font-size~~: 0.~~95em;~~		padding: 0.25em;
	~~line-height: 1.2;~~
	~~-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;~~
	~~box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset~~;
	vertical-align: top;		vertical-align: top;
	~~padding: 0.25em;~~
	}		}

	/* ~~Картинка — адаптивна~~ внутри контейнера */		/* Убедимся, что картинка растягивается правильно внутри контейнера */
	figure.cimg img {		figure.cimg img {
	display: block;		display: block;
Строка 34:		Строка 30:

	/* Подпись */		/* Подпись */
	~~figcaption~~.~~cimgcaption,~~		figure.cimg figcaption.cimgcaption {
	figcaption.cimgcaption p {
	padding: 0.25em 0.35em 0.35em;		padding: 0.25em 0.35em 0.35em;
			margin: 0;
			font-size: 0.92em;
			color: #222;
	text-align: left;		text-align: left;
	~~color: #222;~~
	~~font-size: 0.92em;~~
	~~margin: 0;~~
	}		}

	/* ~~Плавающие выравнивания — используем простые классы, похожие на MW~~ */		/* --- Выравнивание: применяем float/центрирование к фигуре (высокая специфичность) --- */
	figure.cimg.tright {		figure.cimg.tright {
	float: right;		float: right !important;
	margin-left: 1em;		margin-left: 1em !important;
	margin-bottom: 0.6em;		margin-bottom: 0.6em !important;
	}		}

	figure.cimg.tleft {		figure.cimg.tleft {
	float: left;		float: left !important;
	margin-right: 1em;		margin-right: 1em !important;
	margin-bottom: 0.6em;		margin-bottom: 0.6em !important;
	}		}

	~~/* Центрирование: блок по центру с подписью по центру */~~
	figure.cimg.tcenter {		figure.cimg.tcenter {
	display: block; ~~/* центрируем как блочный элемент */~~		display: block !important;
	margin-left: auto;		margin-left: auto !important;
	margin-right: auto;		margin-right: auto !important;
	text-align: center;		text-align: center !important;
	}		}

	/* ~~Отключить float (встроенный)~~ */		/* none */
	figure.cimg.tnone {		figure.cimg.tnone {
	float: none;		float: none !important;
	display: block;		display: block !important;
	margin-left: 0;		margin-left: 0 !important;
	margin-right: 0;		margin-right: 0 !important;
	}

	~~/* Небольшая адаптивная логика: при узком экране картинка занимает максимум ширины */~~
	~~@media (max-width: 560px) {~~
	~~figure.cimg, figure.cimg.tcenter, figure.cimg.tnone {~~
	~~display: block;~~
	~~width: auto~~ !important;
	~~max-width: 100%;~~
	~~margin-left: 0.25em;~~
	~~margin-right: 0.25em;~~
	}
	}		}

			/* --- Небольшой fallback: если по каким-то причинам класс остался на <img> --- */
	figure.cimg img.tcenter {		figure.cimg img.tcenter {
	display: block;		display: block;
Строка 89:		Строка 73:
	}		}

	~~/* float-fallback — когда класс на img, плавающий эффект всё равно применяется */~~
	figure.cimg img.tright {		figure.cimg img.tright {
	float: right;		float: right;
Строка 102:		Строка 85:
	}		}

	/* ~~если вы захотите, чтобы при наличии tcenter~~ на ~~img и~~ узком экране ~~фигура вела себя как block~~ */		/* Адаптив: на узком экране делаем thumb блочным и полушироким */
	@media (max-width: 560px) {		@media (max-width: 560px) {
	figure.cimg ~~img~~.tcenter { max-width: 100%; }		figure.cimg, figure.cimg.tcenter, figure.cimg.tnone {
			display: block !important;
			width: auto !important;
			max-width: 100% !important;
			margin-left: 0.25em !important;
			margin-right: 0.25em !important;
			}
	}		}

Алисофаг в 22:08, 21 сентября 2025

2025-09-21T22:08:54Z

@@ Строка 81: / Строка 81: @@
      margin-right: 0.25em;
+   }
+}

Алисофаг: Про картинки с облака.

2025-09-21T21:56:40Z

Про картинки с облака.

@@ Строка 1: / Строка 1: @@
 /* Размещённый здесь CSS будет применяться ко всем темам оформления */
    .spoiler {
-     background-color: gray; /* Or any other color to obscure the text */
+     background-color: D3D3D3; /* Or any other color to obscure the text */
      color: transparent;
      user-select: none; /* Prevents text selection while hidden */
@@ Строка 10: / Строка 10: @@
      color: inherit; /* Reveals the text color */
+   }

Алисофаг: Новая страница: «/* Размещённый здесь CSS будет применяться ко всем темам оформления / .spoiler { background-color: gray; / Or any other color to obscure the text / color: transparent; user-select: none; / Prevents text selection while hidden / } .spoiler:hover { background-color: inherit; / Reverts to parent background / color: inherit; / Reveals the text color */ }»

2025-09-21T04:57:20Z

Новая страница: «Размещённый здесь CSS будет применяться ко всем темам оформления: .spoiler { background-color: gray; Or any other color to obscure the text: color: transparent; user-select: none; Prevents text selection while hidden: } .spoiler:hover { background-color: inherit; Reverts to parent background: color: inherit; Reveals the text color: }»

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

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.spoiler {
background-color: gray; /* Or any other color to obscure the text */
color: transparent;
user-select: none; /* Prevents text selection while hidden */
}

.spoiler:hover {
background-color: inherit; /* Reverts to parent background */
color: inherit; /* Reveals the text color */
}