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

Admin: Стили веб-проигрывателя .cl-audio

2026-07-20T19:34:03Z

Стили веб-проигрывателя .cl-audio

← Предыдущая версия		Версия от 19:34, 20 июля 2026
Строка 44:		Строка 44:
	/* ===== Логотип: вписывать целиком, не обрезать ===== */		/* ===== Логотип: вписывать целиком, не обрезать ===== */
	#p-logo a{background-size:contain !important;background-position:center center !important;background-repeat:no-repeat !important;}		#p-logo a{background-size:contain !important;background-position:center center !important;background-repeat:no-repeat !important;}

			/* ===== Веб-проигрыватель (.cl-audio, разметка создаётся в MediaWiki:Common.js) ===== */
			.cl-audio {
			margin: 0.5em 0 1.4em 0;
			}
			.cl-audio-ready {
			display: flex;
			align-items: center;
			gap: 0.8em;
			max-width: 560px;
			padding: 0.6em 0.9em;
			background: #f8f9fa;
			border: 1px solid #c8ccd1;
			border-left: 4px solid #8b0000;
			border-radius: 6px;
			box-sizing: border-box;
			}
			.cl-audio-ico {
			flex: 0 0 auto;
			font-size: 1.6em;
			line-height: 1;
			color: #8b0000;
			}
			.cl-audio-meta {
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 0.4em;
			}
			.cl-audio-head {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			gap: 0.5em;
			line-height: 1.2;
			}
			.cl-audio-title {
			font-weight: bold;
			}
			.cl-audio-artist {
			font-size: 0.85em;
			color: #54595d;
			}
			.cl-audio-el {
			width: 100%;
			height: 36px;
			display: block;
			}
			@media ( max-width: 640px ) {
			.cl-audio-ready {
			max-width: 100%;
			}
			}

Admin: Логотип вписывать целиком (background-size:contain)

2026-07-19T09:44:33Z

Логотип вписывать целиком (background-size:contain)

← Предыдущая версия		Версия от 09:44, 19 июля 2026
Строка 41:		Строка 41:
	body:has(.cl-right):not(:has(.cl-left)) .cl-right{width:calc(100vw - 1000px + 60px);}		body:has(.cl-right):not(:has(.cl-left)) .cl-right{width:calc(100vw - 1000px + 60px);}
	}		}

			/* ===== Логотип: вписывать целиком, не обрезать ===== */
			#p-logo a{background-size:contain !important;background-position:center center !important;background-repeat:no-repeat !important;}

Admin: Боковой фон: одна картинка → контент прижат к противоположному краю

2026-07-19T08:44:56Z

Боковой фон: одна картинка → контент прижат к противоположному краю

← Предыдущая версия		Версия от 08:44, 19 июля 2026
Строка 1:		Строка 1:
	/* ===== Боковой кино-фон (тип «Боковой фон») ===== */		/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
	~~/* по умолчанию скрыт (узкие экраны / нет поддержки) */~~
	.cl-sidebg{display:none;}		.cl-sidebg{display:none;}

	@media (min-width:1151px){		@media (min-width:1151px){
	.cl-sidebg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}		.cl-sidebg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
	.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden~~;width:calc((100vw - 1000px)/2 + 60px)~~;}		.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden;}
	.cl-sidebg .cl-left{left:0;}		.cl-sidebg .cl-left{left:0;}
	.cl-sidebg .cl-right{right:0;}		.cl-sidebg .cl-right{right:0;}
Строка 12:		Строка 11:
	.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%);}		.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%);}

	/* ~~контент по центру,~~ сайдбар скрыт, ~~поля освобождены под арт~~ */		/* общий режим: сайдбар скрыт, контент/футер над артом, шапка по ширине контента */
	body:has(.cl-sidebg) #mw-panel{display:none;}		body:has(.cl-sidebg) #mw-panel{display:none;}
	body:has(.cl-sidebg) #content{~~margin-left~~:~~auto!important~~;~~margin~~-~~right~~:~~auto!important~~;max-width:1000px~~;position:relative;z-index:1~~;box-shadow:0 0 45px rgba(0,0,0,.28);}		body:has(.cl-sidebg) #content{position:relative;z-index:1;max-width:1000px;box-shadow:0 0 45px rgba(0,0,0,.28);}
	body:has(.cl-sidebg) #footer{~~margin-left~~:~~auto~~;~~margin~~-~~right~~:~~auto~~;max-width:1000px~~;position:relative;z-index:1~~;}		body:has(.cl-sidebg) #footer{position:relative;z-index:1;max-width:1000px;}
			body:has(.cl-sidebg) #mw-head{width:1050px;max-width:1050px;}
	~~/* ШАПКА — выровнять по ширине контента */~~
	body:has(.cl-sidebg) #mw-head{~~left:50%!important;right:auto!important;transform:translateX(-50%);~~width:1050px;max-width:1050px;}
	body:has(.cl-sidebg) #left-navigation{margin-left:0!important;}		body:has(.cl-sidebg) #left-navigation{margin-left:0!important;}
	body:has(.cl-sidebg) #mw-head-base{~~margin-left:auto!important;margin-right:auto!important;~~max-width:1050px;}		body:has(.cl-sidebg) #mw-head-base{max-width:1050px;}
	body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}		body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}

			/* ОБЕ картинки → контент по центру */
			body:has(.cl-left):has(.cl-right) #content,
			body:has(.cl-left):has(.cl-right) #footer,
			body:has(.cl-left):has(.cl-right) #mw-head-base{margin-left:auto!important;margin-right:auto!important;}
			body:has(.cl-left):has(.cl-right) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);}
			body:has(.cl-left):has(.cl-right) .cl-side{width:calc((100vw - 1000px)/2 + 60px);}

			/* ТОЛЬКО ЛЕВАЯ → контент прижат ВПРАВО, арт на всё левое поле */
			body:has(.cl-left):not(:has(.cl-right)) #content,
			body:has(.cl-left):not(:has(.cl-right)) #footer,
			body:has(.cl-left):not(:has(.cl-right)) #mw-head-base{margin-left:auto!important;margin-right:0!important;}
			body:has(.cl-left):not(:has(.cl-right)) #mw-head{left:auto!important;right:0!important;transform:none;}
			body:has(.cl-left):not(:has(.cl-right)) .cl-left{width:calc(100vw - 1000px + 60px);}

			/* ТОЛЬКО ПРАВАЯ → контент прижат ВЛЕВО, арт на всё правое поле */
			body:has(.cl-right):not(:has(.cl-left)) #content,
			body:has(.cl-right):not(:has(.cl-left)) #footer,
			body:has(.cl-right):not(:has(.cl-left)) #mw-head-base{margin-left:0!important;margin-right:auto!important;}
			body:has(.cl-right):not(:has(.cl-left)) #mw-head{left:0!important;right:auto!important;transform:none;}
			body:has(.cl-right):not(:has(.cl-left)) .cl-right{width:calc(100vw - 1000px + 60px);}
	}		}

Admin: Боковой фон: выравнивание шапки по ширине контента + рефактор в min-width

2026-07-19T08:38:36Z

Боковой фон: выравнивание шапки по ширине контента + рефактор в min-width

← Предыдущая версия		Версия от 08:38, 19 июля 2026
Строка 1:		Строка 1:
	/* ===== Боковой кино-фон (тип «Боковой фон») ===== */		/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
	~~.cl-sidebg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}~~		/* по умолчанию скрыт (узкие экраны / нет поддержки) */
	~~.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden;width:calc~~(~~(100vw - 1000px~~)/~~2 + 60px);}~~		.cl-sidebg{display:none;}
	.cl-sidebg ~~.cl-left~~{~~left:0;}~~
	~~.cl-sidebg .cl-right{right:0;}~~
	~~.cl-sidebg .cl-side img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width~~:none~~!important;object-fit:cover;}~~
	~~.cl-sidebg .cl-left img{object-position:right center;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent 94%);mask-image:linear-gradient(to right,#000 40%,transparent 94%);}~~
	~~.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%)~~;}

	~~/* страницы этого типа~~: ~~центрируем контент, прячем сайдбар, освобождаем поля под арт */~~		@media (min-width:1151px){
	~~body:has(~~.cl-sidebg~~) #mw-panel~~{display:none;}		.cl-sidebg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
	~~body~~:~~has~~(.cl-sidebg~~) #content~~{~~margin~~-left:~~auto~~!important;~~margin-right~~:~~auto~~!important;max-width:~~1000px~~;position:~~relative~~;z-~~index~~:1;~~box~~-~~shadow~~:~~0 0 45px rgba~~(0,~~0,0~~,~~.28~~);}		.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden;width:calc((100vw - 1000px)/2 + 60px);}
	~~body:has(~~.cl-sidebg~~) #footer~~{~~margin~~-left~~:auto~~;~~margin~~-~~right~~:~~auto~~;~~max~~-~~width~~:~~1000px;position:relative;z~~-~~index:1;}~~		.cl-sidebg .cl-left{left:0;}
	~~body:has~~(~~.cl-sidebg~~) ~~#left-navigation{left:auto~~;}		.cl-sidebg .cl-right{right:0;}
			.cl-sidebg .cl-side img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;}
			.cl-sidebg .cl-left img{object-position:right center;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent 94%);mask-image:linear-gradient(to right,#000 40%,transparent 94%);}
			.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%);}

	/* ~~на узких экранах отключаем эффект~~, ~~возвращаем обычную раскладку~~ */		/* контент по центру, сайдбар скрыт, поля освобождены под арт */
	~~@media~~ (max-width:~~1150px~~){		body:has(.cl-sidebg) #mw-panel{display:none;}
	.cl-sidebg{~~display~~:~~none~~!important;}		body:has(.cl-sidebg) #content{margin-left:auto!important;margin-right:auto!important;max-width:1000px;position:relative;z-index:1;box-shadow:0 0 45px rgba(0,0,0,.28);}
	body:has(.cl-sidebg) #mw-~~panel~~{~~display~~:~~block~~;}		body:has(.cl-sidebg) #footer{margin-left:auto;margin-right:auto;max-width:1000px;position:relative;z-index:1;}
	body:has(.cl-sidebg) #~~content~~{max-width:none;}
			/* ШАПКА — выровнять по ширине контента */
			body:has(.cl-sidebg) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);width:1050px;max-width:1050px;}
			body:has(.cl-sidebg) #left-navigation{margin-left:0!important;}
			body:has(.cl-sidebg) #mw-head-base{margin-left:auto!important;margin-right:auto!important;max-width:1050px;}
			body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}
	}		}

Admin: Боковой кино-фон: стили

2026-07-19T08:20:00Z

Боковой кино-фон: стили

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

/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
.cl-sidebg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden;width:calc((100vw - 1000px)/2 + 60px);}
.cl-sidebg .cl-left{left:0;}
.cl-sidebg .cl-right{right:0;}
.cl-sidebg .cl-side img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;}
.cl-sidebg .cl-left img{object-position:right center;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent 94%);mask-image:linear-gradient(to right,#000 40%,transparent 94%);}
.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%);}

/* страницы этого типа: центрируем контент, прячем сайдбар, освобождаем поля под арт */
body:has(.cl-sidebg) #mw-panel{display:none;}
body:has(.cl-sidebg) #content{margin-left:auto!important;margin-right:auto!important;max-width:1000px;position:relative;z-index:1;box-shadow:0 0 45px rgba(0,0,0,.28);}
body:has(.cl-sidebg) #footer{margin-left:auto;margin-right:auto;max-width:1000px;position:relative;z-index:1;}
body:has(.cl-sidebg) #left-navigation{left:auto;}

/* на узких экранах отключаем эффект, возвращаем обычную раскладку */
@media (max-width:1150px){
.cl-sidebg{display:none!important;}
body:has(.cl-sidebg) #mw-panel{display:block;}
body:has(.cl-sidebg) #content{max-width:none;}
}