Шаблон:Football box/styles.css

/* Оформление карточки отчёта о матче.
   Модуль: [[Модуль:Football box]].
   Сворачиваемый вариант оформляет [[Шаблон:Football box collapsible/styles.css]];
   порядок правил в обоих файлах одинаков: сначала общие, затем шапка и строка
   команд, затем подробности, затем ширины, затем тёмная тема. */

.footballbox {
	clear: both;
	overflow: auto;
}

.footballbox tr {
	vertical-align: top;
}

.footballbox time {
	display: block;
	overflow: auto;
}

.footballbox .ftitle {
	text-align: center;
	font-weight: bold;
}

.footballbox .fevent {
	width: 100%;
	table-layout: fixed;
	text-align: center;
}

.footballbox .fevent,
.footballbox .fright {
	margin-bottom: 10px;
}

.footballbox .fdate,
.footballbox .ftime {
	display: block;
}

/* Местное время места проведения: меньше времени начала, но ровно 85% — ниже
   ВП:РТ не допускает. Отдельной строкой, чтобы не растягивать колонку даты. */
.footballbox .ftime-local {
	display: block;
	font-size: 85%;
}

.footballbox .fhome,
.footballbox .faway {
	width: 39%;
}

.footballbox .fscore {
	width: 22%;
}

.footballbox .fgoals {
	font-size: 85%;
}

.footballbox .fhome,
.footballbox .fhgoal {
	text-align: right;
}

.footballbox .faway,
.footballbox .fagoal {
	text-align: left;
}

/* Составы команд (squad1, squad2). table-layout здесь не задаётся, в отличие от
   таблицы счёта: свойство распределяет ширину между столбцами, а составы выводятся
   одной ячейкой — распределять нечего. */
.footballbox .fsquads {
	float: left;
	width: 100%;
	text-align: left;
	vertical-align: bottom;
	font-size: 85%;
}

@media all and (min-width: 720px) {
	.footballbox .fdate,
	.footballbox .ftime,
	.footballbox .frnd {
		text-align: right;
	}

	.footballbox .fleft,
	.footballbox .fright {
		float: left;
		padding: 2px 0;
	}

	.footballbox .fleft {
		width: 15%;
		overflow: auto;
	}

	.footballbox .fevent {
		float: left;
		width: 61%;
	}

	.footballbox .fevent,
	.footballbox .fright {
		margin-bottom: 0;
	}

	.footballbox .fright {
		font-size: 85%;
		width: 24%;
	}
}

/* ------------------------------------------------------------------
   Палитра
   ------------------------------------------------------------------ */

/* Цвета утверждённых имён палитры. Модуль выводит имя классом, а не цветом:
   встроенный стиль правилом CSS не перебить иначе как через !important на каждый
   цвет, и варианта для тёмной темы у заливки тогда быть не может.

   Произвольные написания — шестнадцатеричный код, название CSS — модуль
   выводит встроенным стилем: их значения известны только ему.

   Значения повторяют ppp.colors из [[Модуль:Sports table/sub]] и таблицу стилей
   спортивных таблиц. Менять их следует одновременно во всех трёх местах. */

.footballbox.f-green1 {
	background: #bbf3bb;
}

.footballbox.f-green2 {
	background: #ccf9cc;
}

.footballbox.f-green3 {
	background: #ddfcdd;
}

.footballbox.f-green4 {
	background: #eeffee;
}

.footballbox.f-blue1 {
	background: #bbf3ff;
}

.footballbox.f-blue2 {
	background: #ccf9ff;
}

.footballbox.f-blue3 {
	background: #ddfcff;
}

.footballbox.f-blue4 {
	background: #eeffff;
}

.footballbox.f-yellow1 {
	background: #ffffbb;
}

.footballbox.f-yellow2 {
	background: #ffffcc;
}

.footballbox.f-yellow3 {
	background: #ffffdd;
}

.footballbox.f-yellow4 {
	background: #ffffee;
}

.footballbox.f-violet1 {
	background: #bbbbff;
}

.footballbox.f-violet2 {
	background: #ccccff;
}

.footballbox.f-violet3 {
	background: #ddddff;
}

.footballbox.f-violet4 {
	background: #eeeeff;
}

.footballbox.f-red1 {
	background: #ffbbbb;
}

.footballbox.f-red2 {
	background: #ffcccc;
}

.footballbox.f-red3 {
	background: #ffdddd;
}

.footballbox.f-red4 {
	background: #ffeeee;
}

.footballbox.f-black1 {
	background: #bbbbbb;
}

.footballbox.f-black2 {
	background: #cccccc;
}

.footballbox.f-black3 {
	background: #dddddd;
}

.footballbox.f-black4 {
	background: #eeeeee;
}

.footballbox.f-orange1 {
	background: #feead5;
}

.footballbox.f-orange2 {
	background: #fff5e8;
}

.footballbox.f-gold1 {
	background: #f7f6a8;
}

.footballbox.f-silver1 {
	background: #dce5e5;
}

.footballbox.f-bronze1 {
	background: #ffdab9;
}

.footballbox.f-accent {
	background: #eaf3ff;
}

.footballbox.f-neutral {
	background: #f8f9fa;
}

/* Тёмная тема: те же имена, приглушённые значения.

   Тон сохранён, меняется светлота — так смысл цвета читается тот же. Верхняя граница
   выбрана по ссылке: выше неё контраст ссылки с заливкой падает ниже 4,5. */
@media screen {
	html.skin-theme-clientpref-night .footballbox.f-green1 {
		background: #194319;
	}

	html.skin-theme-clientpref-night .footballbox.f-green2 {
		background: #153715;
	}

	html.skin-theme-clientpref-night .footballbox.f-green3 {
		background: #112c11;
	}

	html.skin-theme-clientpref-night .footballbox.f-green4 {
		background: #0d210d;
	}

	html.skin-theme-clientpref-night .footballbox.f-blue1 {
		background: #193b43;
	}

	html.skin-theme-clientpref-night .footballbox.f-blue2 {
		background: #153337;
	}

	html.skin-theme-clientpref-night .footballbox.f-blue3 {
		background: #112a2c;
	}

	html.skin-theme-clientpref-night .footballbox.f-blue4 {
		background: #0d2121;
	}

	html.skin-theme-clientpref-night .footballbox.f-yellow1 {
		background: #414118;
	}

	html.skin-theme-clientpref-night .footballbox.f-yellow2 {
		background: #373715;
	}

	html.skin-theme-clientpref-night .footballbox.f-yellow3 {
		background: #2c2c11;
	}

	html.skin-theme-clientpref-night .footballbox.f-yellow4 {
		background: #21210d;
	}

	html.skin-theme-clientpref-night .footballbox.f-violet1 {
		background: #191943;
	}

	html.skin-theme-clientpref-night .footballbox.f-violet2 {
		background: #151537;
	}

	html.skin-theme-clientpref-night .footballbox.f-violet3 {
		background: #11112c;
	}

	html.skin-theme-clientpref-night .footballbox.f-violet4 {
		background: #0d0d21;
	}

	html.skin-theme-clientpref-night .footballbox.f-red1 {
		background: #431919;
	}

	html.skin-theme-clientpref-night .footballbox.f-red2 {
		background: #371515;
	}

	html.skin-theme-clientpref-night .footballbox.f-red3 {
		background: #2c1111;
	}

	html.skin-theme-clientpref-night .footballbox.f-red4 {
		background: #210d0d;
	}

	html.skin-theme-clientpref-night .footballbox.f-black1 {
		background: #2e2e2e;
	}

	html.skin-theme-clientpref-night .footballbox.f-black2 {
		background: #262626;
	}

	html.skin-theme-clientpref-night .footballbox.f-black3 {
		background: #1f1f1f;
	}

	html.skin-theme-clientpref-night .footballbox.f-black4 {
		background: #171717;
	}

	html.skin-theme-clientpref-night .footballbox.f-orange1 {
		background: #432e19;
	}

	html.skin-theme-clientpref-night .footballbox.f-orange2 {
		background: #342614;
	}

	html.skin-theme-clientpref-night .footballbox.f-gold1 {
		background: #4c3d00;
	}

	html.skin-theme-clientpref-night .footballbox.f-silver1 {
		background: #3f3f3f;
	}

	html.skin-theme-clientpref-night .footballbox.f-bronze1 {
		background: #5c361f;
	}

	html.skin-theme-clientpref-night .footballbox.f-accent {
		background: #192b43;
	}

	html.skin-theme-clientpref-night .footballbox.f-neutral {
		background: #222425;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .footballbox.f-green1 {
		background: #194319;
	}

	html.skin-theme-clientpref-os .footballbox.f-green2 {
		background: #153715;
	}

	html.skin-theme-clientpref-os .footballbox.f-green3 {
		background: #112c11;
	}

	html.skin-theme-clientpref-os .footballbox.f-green4 {
		background: #0d210d;
	}

	html.skin-theme-clientpref-os .footballbox.f-blue1 {
		background: #193b43;
	}

	html.skin-theme-clientpref-os .footballbox.f-blue2 {
		background: #153337;
	}

	html.skin-theme-clientpref-os .footballbox.f-blue3 {
		background: #112a2c;
	}

	html.skin-theme-clientpref-os .footballbox.f-blue4 {
		background: #0d2121;
	}

	html.skin-theme-clientpref-os .footballbox.f-yellow1 {
		background: #414118;
	}

	html.skin-theme-clientpref-os .footballbox.f-yellow2 {
		background: #373715;
	}

	html.skin-theme-clientpref-os .footballbox.f-yellow3 {
		background: #2c2c11;
	}

	html.skin-theme-clientpref-os .footballbox.f-yellow4 {
		background: #21210d;
	}

	html.skin-theme-clientpref-os .footballbox.f-violet1 {
		background: #191943;
	}

	html.skin-theme-clientpref-os .footballbox.f-violet2 {
		background: #151537;
	}

	html.skin-theme-clientpref-os .footballbox.f-violet3 {
		background: #11112c;
	}

	html.skin-theme-clientpref-os .footballbox.f-violet4 {
		background: #0d0d21;
	}

	html.skin-theme-clientpref-os .footballbox.f-red1 {
		background: #431919;
	}

	html.skin-theme-clientpref-os .footballbox.f-red2 {
		background: #371515;
	}

	html.skin-theme-clientpref-os .footballbox.f-red3 {
		background: #2c1111;
	}

	html.skin-theme-clientpref-os .footballbox.f-red4 {
		background: #210d0d;
	}

	html.skin-theme-clientpref-os .footballbox.f-black1 {
		background: #2e2e2e;
	}

	html.skin-theme-clientpref-os .footballbox.f-black2 {
		background: #262626;
	}

	html.skin-theme-clientpref-os .footballbox.f-black3 {
		background: #1f1f1f;
	}

	html.skin-theme-clientpref-os .footballbox.f-black4 {
		background: #171717;
	}

	html.skin-theme-clientpref-os .footballbox.f-orange1 {
		background: #432e19;
	}

	html.skin-theme-clientpref-os .footballbox.f-orange2 {
		background: #342614;
	}

	html.skin-theme-clientpref-os .footballbox.f-gold1 {
		background: #4c3d00;
	}

	html.skin-theme-clientpref-os .footballbox.f-silver1 {
		background: #3f3f3f;
	}

	html.skin-theme-clientpref-os .footballbox.f-bronze1 {
		background: #5c361f;
	}

	html.skin-theme-clientpref-os .footballbox.f-accent {
		background: #192b43;
	}

	html.skin-theme-clientpref-os .footballbox.f-neutral {
		background: #222425;
	}
}

/* Тёмная тема.
   Заливка карточки задаётся встроенным стилем и в тёмной теме остаётся светлой,
   а ссылки окрашиваются правилом скина в светлый цвет — получается светлое по
   светлому. Встроенный color этого не лечит: у ссылок собственное правило,
   оно приоритетнее унаследованного цвета, поэтому нужен именно CSS.
   Правила применяются только к карточкам со встроенной заливкой: у имени палитры её нет,
   цвет приходит из класса, и на приглушённой заливке ссылка читается своим обычным цветом.
   Отсюда отбор по атрибуту, а не перечисление тридцати одного класса в исключениях.

   Два блока — для темы, выбранной в настройках, и для темы, унаследованной от системы. */
@media screen {
	html.skin-theme-clientpref-night .ffilled[style*="background"],
	html.skin-theme-clientpref-night .ffilled[style*="background"] a {
		color: #202122 !important;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .ffilled[style*="background"],
	html.skin-theme-clientpref-os .ffilled[style*="background"] a {
		color: #202122 !important;
	}
}

/* [[Категория:Шаблоны:Подстраницы CSS]] */