Шаблон:Sports table/styles.css
Материал из вики «Вече»
Дополнительные действия
/* Оформление семейства спортивных таблиц.
Модули: [[Модуль:Sports table]], [[Модуль:Sports results]] и стилевые подмодули.
Файл общий для турнирной таблицы и таблицы личных встреч: они одного семейства,
и правила у них пересекаются. Классы различаются приставкой:
st- у турнирной таблицы, sr- у таблицы личных встреч, общие — без приставки.
Встроенными стилями модули задают только то, значение чего приходит из параметров вызова:
заливку по коду результата, ширину столбцов, размер шрифта. Всё остальное описано здесь. */
/* ------------------------------------------------------------------
Турнирная таблица
------------------------------------------------------------------ */
.st-table {
text-align: center;
}
/* Название команды — единственная ячейка строки, выровненная по левому краю.
Перенос запрещён: название с флагом и уточнением иначе рвётся посередине. */
.st-table .st-team {
text-align: left;
white-space: nowrap;
}
.st-table .st-pos {
text-align: center;
}
/* Полужирным выделяются очки и проценты, а также буквы статуса — и в строке команды,
и в легенде под таблицей. Легенда лежит вне самой таблицы, но внутри обёртки
прокрутки, поэтому для букв статуса область правила — обёртка, а не таблица.
Обёрток две: у турнирной таблицы и у таблицы личных встреч. */
.st-table .st-bold,
.st-scroll-outer .st-status,
.sr-scroll-outer .st-status {
font-weight: bold;
}
.st-table .st-perc {
font-weight: bold;
text-align: right;
}
/* Слово с дефисом или тире внутри в столбце квалификации: «2-й», «плей-офф», «3—5».
Браузер переносит после дефиса и тире, как после пробела, и разорвал бы такое слово
на узком экране. Места переноса в этом столбце расставляет модуль —
см. ppp.wrap_result_text в [[Модуль:Sports table/sub]]. */
.st-table .st-nobr {
white-space: nowrap;
}
/* Выделение команды по showteam задаётся встроенным стилем, а не классом:
насыщенность собирается в переменную вместе с другими свойствами ячейки
и подставляется в общий атрибут style. */
/* Ведущие нули для выравнивания разрядов. Скрыты вдвойне — и прозрачностью,
и невидимостью: первое убирает цвет, второе исключает из чтения экранными
дикторами, но сохраняет занимаемое место. */
.st-pad {
visibility: hidden;
color: transparent;
}
/* Разделительная ячейка между блоками столбцов: сама по себе пустая, нужна лишь
чтобы развести соседние блоки. Рамки снимаются, иначе она читается как столбец. */
.st-table .st-spacer {
background-color: transparent;
border-top: transparent;
border-bottom: transparent;
}
/* Строка, разделяющая группы позиций (параметры split4, split8 и подобные).
Высота строки мала намеренно: это полоса, а не строка с содержимым. Заливка —
цвет разделительных линий оформления MediaWiki, свой в светлой и тёмной теме
(ppp.split_colors); её правила выводит генератор палитры и стоят они в разделе
«Палитра». */
.st-table .st-split {
line-height: 3pt;
}
/* Обёртка горизонтальной прокрутки. Столбцов у таблицы до одиннадцати, и на узком
экране она шире его: без обёртки горизонтально едет вся страница, а с обёрткой —
только сама таблица. Внешний блок обрезает, внутренний прокручивает. */
.st-scroll-outer {
overflow: hidden;
}
.st-scroll-inner {
overflow: auto;
}
/* Узкие экраны. Запрет переноса в названии команды снимается: он держит столбец
шириной в самое длинное название, и вместе с восемью числовыми столбцами это
и есть то, что не даёт таблице поместиться.
На широком экране перенос ни к чему — название и так помещается, —
а на узком он лучше горизонтальной прокрутки.
Таблица личных встреч этому правилу не подчиняется: там название выводится в одну
строку всегда, а при нехватке места таблица прокручивается. Перенос разрешается
только тогда, когда название длиннее максимальной ширины столбца, и решает это
модуль — см. ppp.measure_team_width. */
@media all and (max-width: 560px) {
.st-table .st-team {
white-space: normal;
}
}
/* Числовые столбцы: сыграно, победы, ничьи, поражения, забито, пропущено, разница, очки.
Ширина у них общая и рассчитана на два знака.
Без этого столбцы расходятся по содержимому: столбец поражений, где встретилось число 10,
становится шире столбца ничьих если их число не превысило 9 для каждой из команд.
Выигрыш в ширине там мизерный, а неровный ряд бросается в глаза сразу.
Сама ширина задаётся не здесь, а модулем — заголовку столбца.
Пользовательские свойства CSS в TemplateStyles не поддерживаются,
а ширина столбца и так определяется его заголовком, так что отдельное правило тут не нужно.
Выравнивание содержимого не трогается — числа остаются по центру. Разрядность через
digitpad задаёт только редактор: невидимые нули занимают место, и центрирование
сдвигало бы видимое число влево. */
/* ------------------------------------------------------------------
Таблица личных встреч
------------------------------------------------------------------ */
.sr-table {
text-align: center;
}
/* Обёртка для горизонтальной прокрутки на узких экранах: у таблицы личных встреч
столбцов столько же, сколько команд, и на телефоне она шире экрана. */
.sr-scroll-outer {
overflow: hidden;
}
.sr-scroll-inner {
overflow: auto;
}
.sr-table .sr-score {
white-space: nowrap;
}
/* Клетка с текстом вместо счёта: дата предстоящего матча, «перенесён», пояснение.
Мельче счёта, чтобы не спорить с ним и не раздвигать столбец; 85% — нижняя граница
по ВП:РТ. Шахматка внутри турнирной таблицы лежит в .st-table. В шахматке,
уменьшенной параметром font_size, модуль пересчитывает размер встроенным стилем. */
.sr-table .sr-text,
.st-table .sr-text {
font-size: 85%;
}
/* Расписание ([[Модуль:Sports results/schedule]]). Подпись соперника с отметкой места
матча — «ЗЕН (Д)» — не разрывается: отметка без кода непонятна. */
.sr-table .sr-opp {
white-space: nowrap;
}
/* Список матчей: хозяева прижаты к счёту справа, гости — слева, и счёт стоит посередине
между названиями, какой бы длины они ни были. */
.sr-series .sr-home {
text-align: right;
}
.sr-series .sr-away {
text-align: left;
}
/* Блоки расписания и туры списка матчей (series_split) — отдельные таблицы, выложенные
сеткой. Число колонок приходит из параметра (block_columns, series_columns), поэтому
задаётся модулем встроенным стилем; здесь — остальное. */
.sr-blocks {
display: grid;
gap: 1em;
align-items: start;
}
/* Столбец с названиями команд закрепляется при горизонтальной прокрутке: у таблицы
столько же столбцов, сколько команд, и на двадцати участниках, прокрутив до
середины, читатель уже не видит, чья это строка.
Фон задаётся явно — прозрачная ячейка пропускала бы под себя уезжающие столбцы.
Цвет тот же, что у заголовков таблиц оформления. */
.sr-table th[scope="row"] {
position: sticky;
left: 0;
z-index: 1;
background: #eaecf0;
}
/* Ширина столбцов результатов задаётся не здесь, а модулем: она вычисляется по самому
длинному счёту в конкретной таблице и одинакова у всех столбцов.
Правило с фиксированной шириной перебивало бы вычисленную и сводило подбор на нет. */
/* Служебная ячейка: команда против самой себя либо скрытый результат — в шахматке
и в клетках результатов турнирной таблицы при show_matches=yes. Матча за ней нет,
поэтому заливка нейтральная — neutral палитры, та же, которой карточка помечает
несостоявшуюся игру; её правила выводит генератор палитры и стоят они в разделе
«Палитра». Тире в содержимом ставит модуль: одной заливки мало, чтобы отличить
служебную клетку от матча, результат которого просто не заполнен. */
.st-table .sr-void,
.sr-table .sr-void {
color: #202122;
}
/* В тёмной теме цвет текста снимается: на приглушённой заливке он читается своим обычным. */
@media screen {
html.skin-theme-clientpref-night .st-table .sr-void,
html.skin-theme-clientpref-night .sr-table .sr-void {
color: inherit;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .st-table .sr-void,
html.skin-theme-clientpref-os .sr-table .sr-void {
color: inherit;
}
}
/* Граница между кругами задаётся встроенным стилем, а не классом: значение
подставляется внутрь атрибута style заголовка столбца (см. ppp.colhead),
и отдельным атрибутом там быть не может. */
/* ------------------------------------------------------------------
Палитра
------------------------------------------------------------------ */
/* Цвета утверждённых имён палитры. Модуль выводит имя классом, а не цветом:
встроенный стиль правилом CSS не перебить иначе как через !important на каждый
цвет, и варианта для тёмной темы у заливки тогда быть не может.
Произвольные написания — шестнадцатеричный код, название CSS — модуль
выводит встроенным стилем: их значения известны только ему. Тёмного варианта они
не получают, и это ещё один довод переводить разметку на имена палитры.
Блок ниже — вывод генератора print_styles из [[Модуль:Sports table/sub]]: цвета
палитры (ppp.colors и ppp.colors_dark), а за ними заливки служебных элементов —
полосы-разделителя и служебной клетки шахматки. Правится не здесь, а в модуле;
сюда блок переносится целиком. */
.st-table td.st-green1,
.st-table th.st-green1,
.sr-table td.st-green1 {
background: #bbf3bb;
}
.st-table td.st-green2,
.st-table th.st-green2,
.sr-table td.st-green2 {
background: #ccf9cc;
}
.st-table td.st-green3,
.st-table th.st-green3,
.sr-table td.st-green3 {
background: #ddfcdd;
}
.st-table td.st-green4,
.st-table th.st-green4,
.sr-table td.st-green4 {
background: #eeffee;
}
.st-table td.st-blue1,
.st-table th.st-blue1,
.sr-table td.st-blue1 {
background: #bbf3ff;
}
.st-table td.st-blue2,
.st-table th.st-blue2,
.sr-table td.st-blue2 {
background: #ccf9ff;
}
.st-table td.st-blue3,
.st-table th.st-blue3,
.sr-table td.st-blue3 {
background: #ddfcff;
}
.st-table td.st-blue4,
.st-table th.st-blue4,
.sr-table td.st-blue4 {
background: #eeffff;
}
.st-table td.st-yellow1,
.st-table th.st-yellow1,
.sr-table td.st-yellow1 {
background: #ffffbb;
}
.st-table td.st-yellow2,
.st-table th.st-yellow2,
.sr-table td.st-yellow2 {
background: #ffffcc;
}
.st-table td.st-yellow3,
.st-table th.st-yellow3,
.sr-table td.st-yellow3 {
background: #ffffdd;
}
.st-table td.st-yellow4,
.st-table th.st-yellow4,
.sr-table td.st-yellow4 {
background: #ffffee;
}
.st-table td.st-violet1,
.st-table th.st-violet1,
.sr-table td.st-violet1 {
background: #bbbbff;
}
.st-table td.st-violet2,
.st-table th.st-violet2,
.sr-table td.st-violet2 {
background: #ccccff;
}
.st-table td.st-violet3,
.st-table th.st-violet3,
.sr-table td.st-violet3 {
background: #ddddff;
}
.st-table td.st-violet4,
.st-table th.st-violet4,
.sr-table td.st-violet4 {
background: #eeeeff;
}
.st-table td.st-red1,
.st-table th.st-red1,
.sr-table td.st-red1 {
background: #ffbbbb;
}
.st-table td.st-red2,
.st-table th.st-red2,
.sr-table td.st-red2 {
background: #ffcccc;
}
.st-table td.st-red3,
.st-table th.st-red3,
.sr-table td.st-red3 {
background: #ffdddd;
}
.st-table td.st-red4,
.st-table th.st-red4,
.sr-table td.st-red4 {
background: #ffeeee;
}
.st-table td.st-black1,
.st-table th.st-black1,
.sr-table td.st-black1 {
background: #bbbbbb;
}
.st-table td.st-black2,
.st-table th.st-black2,
.sr-table td.st-black2 {
background: #cccccc;
}
.st-table td.st-black3,
.st-table th.st-black3,
.sr-table td.st-black3 {
background: #dddddd;
}
.st-table td.st-black4,
.st-table th.st-black4,
.sr-table td.st-black4 {
background: #eeeeee;
}
.st-table td.st-orange1,
.st-table th.st-orange1,
.sr-table td.st-orange1 {
background: #feead5;
}
.st-table td.st-orange2,
.st-table th.st-orange2,
.sr-table td.st-orange2 {
background: #fff5e8;
}
.st-table td.st-gold1,
.st-table th.st-gold1,
.sr-table td.st-gold1 {
background: #f7f6a8;
}
.st-table td.st-silver1,
.st-table th.st-silver1,
.sr-table td.st-silver1 {
background: #dce5e5;
}
.st-table td.st-bronze1,
.st-table th.st-bronze1,
.sr-table td.st-bronze1 {
background: #ffdab9;
}
.st-table td.st-accent,
.st-table th.st-accent,
.sr-table td.st-accent {
background: #eaf3ff;
}
.st-table td.st-neutral,
.st-table th.st-neutral,
.sr-table td.st-neutral {
background: #f8f9fa;
}
.st-table tr.st-split {
background: #c8ccd1;
}
.st-table td.sr-void,
.sr-table td.sr-void {
background: #f8f9fa;
}
@media screen {
html.skin-theme-clientpref-night .st-table td.st-green1,
html.skin-theme-clientpref-night .st-table th.st-green1,
html.skin-theme-clientpref-night .sr-table td.st-green1 {
background: #194319;
}
html.skin-theme-clientpref-night .st-table td.st-green2,
html.skin-theme-clientpref-night .st-table th.st-green2,
html.skin-theme-clientpref-night .sr-table td.st-green2 {
background: #153715;
}
html.skin-theme-clientpref-night .st-table td.st-green3,
html.skin-theme-clientpref-night .st-table th.st-green3,
html.skin-theme-clientpref-night .sr-table td.st-green3 {
background: #112c11;
}
html.skin-theme-clientpref-night .st-table td.st-green4,
html.skin-theme-clientpref-night .st-table th.st-green4,
html.skin-theme-clientpref-night .sr-table td.st-green4 {
background: #0d210d;
}
html.skin-theme-clientpref-night .st-table td.st-blue1,
html.skin-theme-clientpref-night .st-table th.st-blue1,
html.skin-theme-clientpref-night .sr-table td.st-blue1 {
background: #193b43;
}
html.skin-theme-clientpref-night .st-table td.st-blue2,
html.skin-theme-clientpref-night .st-table th.st-blue2,
html.skin-theme-clientpref-night .sr-table td.st-blue2 {
background: #153337;
}
html.skin-theme-clientpref-night .st-table td.st-blue3,
html.skin-theme-clientpref-night .st-table th.st-blue3,
html.skin-theme-clientpref-night .sr-table td.st-blue3 {
background: #112a2c;
}
html.skin-theme-clientpref-night .st-table td.st-blue4,
html.skin-theme-clientpref-night .st-table th.st-blue4,
html.skin-theme-clientpref-night .sr-table td.st-blue4 {
background: #0d2121;
}
html.skin-theme-clientpref-night .st-table td.st-yellow1,
html.skin-theme-clientpref-night .st-table th.st-yellow1,
html.skin-theme-clientpref-night .sr-table td.st-yellow1 {
background: #414118;
}
html.skin-theme-clientpref-night .st-table td.st-yellow2,
html.skin-theme-clientpref-night .st-table th.st-yellow2,
html.skin-theme-clientpref-night .sr-table td.st-yellow2 {
background: #373715;
}
html.skin-theme-clientpref-night .st-table td.st-yellow3,
html.skin-theme-clientpref-night .st-table th.st-yellow3,
html.skin-theme-clientpref-night .sr-table td.st-yellow3 {
background: #2c2c11;
}
html.skin-theme-clientpref-night .st-table td.st-yellow4,
html.skin-theme-clientpref-night .st-table th.st-yellow4,
html.skin-theme-clientpref-night .sr-table td.st-yellow4 {
background: #21210d;
}
html.skin-theme-clientpref-night .st-table td.st-violet1,
html.skin-theme-clientpref-night .st-table th.st-violet1,
html.skin-theme-clientpref-night .sr-table td.st-violet1 {
background: #191943;
}
html.skin-theme-clientpref-night .st-table td.st-violet2,
html.skin-theme-clientpref-night .st-table th.st-violet2,
html.skin-theme-clientpref-night .sr-table td.st-violet2 {
background: #151537;
}
html.skin-theme-clientpref-night .st-table td.st-violet3,
html.skin-theme-clientpref-night .st-table th.st-violet3,
html.skin-theme-clientpref-night .sr-table td.st-violet3 {
background: #11112c;
}
html.skin-theme-clientpref-night .st-table td.st-violet4,
html.skin-theme-clientpref-night .st-table th.st-violet4,
html.skin-theme-clientpref-night .sr-table td.st-violet4 {
background: #0d0d21;
}
html.skin-theme-clientpref-night .st-table td.st-red1,
html.skin-theme-clientpref-night .st-table th.st-red1,
html.skin-theme-clientpref-night .sr-table td.st-red1 {
background: #431919;
}
html.skin-theme-clientpref-night .st-table td.st-red2,
html.skin-theme-clientpref-night .st-table th.st-red2,
html.skin-theme-clientpref-night .sr-table td.st-red2 {
background: #371515;
}
html.skin-theme-clientpref-night .st-table td.st-red3,
html.skin-theme-clientpref-night .st-table th.st-red3,
html.skin-theme-clientpref-night .sr-table td.st-red3 {
background: #2c1111;
}
html.skin-theme-clientpref-night .st-table td.st-red4,
html.skin-theme-clientpref-night .st-table th.st-red4,
html.skin-theme-clientpref-night .sr-table td.st-red4 {
background: #210d0d;
}
html.skin-theme-clientpref-night .st-table td.st-black1,
html.skin-theme-clientpref-night .st-table th.st-black1,
html.skin-theme-clientpref-night .sr-table td.st-black1 {
background: #2e2e2e;
}
html.skin-theme-clientpref-night .st-table td.st-black2,
html.skin-theme-clientpref-night .st-table th.st-black2,
html.skin-theme-clientpref-night .sr-table td.st-black2 {
background: #262626;
}
html.skin-theme-clientpref-night .st-table td.st-black3,
html.skin-theme-clientpref-night .st-table th.st-black3,
html.skin-theme-clientpref-night .sr-table td.st-black3 {
background: #1f1f1f;
}
html.skin-theme-clientpref-night .st-table td.st-black4,
html.skin-theme-clientpref-night .st-table th.st-black4,
html.skin-theme-clientpref-night .sr-table td.st-black4 {
background: #171717;
}
html.skin-theme-clientpref-night .st-table td.st-orange1,
html.skin-theme-clientpref-night .st-table th.st-orange1,
html.skin-theme-clientpref-night .sr-table td.st-orange1 {
background: #432e19;
}
html.skin-theme-clientpref-night .st-table td.st-orange2,
html.skin-theme-clientpref-night .st-table th.st-orange2,
html.skin-theme-clientpref-night .sr-table td.st-orange2 {
background: #342614;
}
html.skin-theme-clientpref-night .st-table td.st-gold1,
html.skin-theme-clientpref-night .st-table th.st-gold1,
html.skin-theme-clientpref-night .sr-table td.st-gold1 {
background: #4c3d00;
}
html.skin-theme-clientpref-night .st-table td.st-silver1,
html.skin-theme-clientpref-night .st-table th.st-silver1,
html.skin-theme-clientpref-night .sr-table td.st-silver1 {
background: #3f3f3f;
}
html.skin-theme-clientpref-night .st-table td.st-bronze1,
html.skin-theme-clientpref-night .st-table th.st-bronze1,
html.skin-theme-clientpref-night .sr-table td.st-bronze1 {
background: #5c361f;
}
html.skin-theme-clientpref-night .st-table td.st-accent,
html.skin-theme-clientpref-night .st-table th.st-accent,
html.skin-theme-clientpref-night .sr-table td.st-accent {
background: #192b43;
}
html.skin-theme-clientpref-night .st-table td.st-neutral,
html.skin-theme-clientpref-night .st-table th.st-neutral,
html.skin-theme-clientpref-night .sr-table td.st-neutral {
background: #222425;
}
html.skin-theme-clientpref-night .st-table tr.st-split {
background: #54595d;
}
html.skin-theme-clientpref-night .st-table td.sr-void,
html.skin-theme-clientpref-night .sr-table td.sr-void {
background: #222425;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .st-table td.st-green1,
html.skin-theme-clientpref-os .st-table th.st-green1,
html.skin-theme-clientpref-os .sr-table td.st-green1 {
background: #194319;
}
html.skin-theme-clientpref-os .st-table td.st-green2,
html.skin-theme-clientpref-os .st-table th.st-green2,
html.skin-theme-clientpref-os .sr-table td.st-green2 {
background: #153715;
}
html.skin-theme-clientpref-os .st-table td.st-green3,
html.skin-theme-clientpref-os .st-table th.st-green3,
html.skin-theme-clientpref-os .sr-table td.st-green3 {
background: #112c11;
}
html.skin-theme-clientpref-os .st-table td.st-green4,
html.skin-theme-clientpref-os .st-table th.st-green4,
html.skin-theme-clientpref-os .sr-table td.st-green4 {
background: #0d210d;
}
html.skin-theme-clientpref-os .st-table td.st-blue1,
html.skin-theme-clientpref-os .st-table th.st-blue1,
html.skin-theme-clientpref-os .sr-table td.st-blue1 {
background: #193b43;
}
html.skin-theme-clientpref-os .st-table td.st-blue2,
html.skin-theme-clientpref-os .st-table th.st-blue2,
html.skin-theme-clientpref-os .sr-table td.st-blue2 {
background: #153337;
}
html.skin-theme-clientpref-os .st-table td.st-blue3,
html.skin-theme-clientpref-os .st-table th.st-blue3,
html.skin-theme-clientpref-os .sr-table td.st-blue3 {
background: #112a2c;
}
html.skin-theme-clientpref-os .st-table td.st-blue4,
html.skin-theme-clientpref-os .st-table th.st-blue4,
html.skin-theme-clientpref-os .sr-table td.st-blue4 {
background: #0d2121;
}
html.skin-theme-clientpref-os .st-table td.st-yellow1,
html.skin-theme-clientpref-os .st-table th.st-yellow1,
html.skin-theme-clientpref-os .sr-table td.st-yellow1 {
background: #414118;
}
html.skin-theme-clientpref-os .st-table td.st-yellow2,
html.skin-theme-clientpref-os .st-table th.st-yellow2,
html.skin-theme-clientpref-os .sr-table td.st-yellow2 {
background: #373715;
}
html.skin-theme-clientpref-os .st-table td.st-yellow3,
html.skin-theme-clientpref-os .st-table th.st-yellow3,
html.skin-theme-clientpref-os .sr-table td.st-yellow3 {
background: #2c2c11;
}
html.skin-theme-clientpref-os .st-table td.st-yellow4,
html.skin-theme-clientpref-os .st-table th.st-yellow4,
html.skin-theme-clientpref-os .sr-table td.st-yellow4 {
background: #21210d;
}
html.skin-theme-clientpref-os .st-table td.st-violet1,
html.skin-theme-clientpref-os .st-table th.st-violet1,
html.skin-theme-clientpref-os .sr-table td.st-violet1 {
background: #191943;
}
html.skin-theme-clientpref-os .st-table td.st-violet2,
html.skin-theme-clientpref-os .st-table th.st-violet2,
html.skin-theme-clientpref-os .sr-table td.st-violet2 {
background: #151537;
}
html.skin-theme-clientpref-os .st-table td.st-violet3,
html.skin-theme-clientpref-os .st-table th.st-violet3,
html.skin-theme-clientpref-os .sr-table td.st-violet3 {
background: #11112c;
}
html.skin-theme-clientpref-os .st-table td.st-violet4,
html.skin-theme-clientpref-os .st-table th.st-violet4,
html.skin-theme-clientpref-os .sr-table td.st-violet4 {
background: #0d0d21;
}
html.skin-theme-clientpref-os .st-table td.st-red1,
html.skin-theme-clientpref-os .st-table th.st-red1,
html.skin-theme-clientpref-os .sr-table td.st-red1 {
background: #431919;
}
html.skin-theme-clientpref-os .st-table td.st-red2,
html.skin-theme-clientpref-os .st-table th.st-red2,
html.skin-theme-clientpref-os .sr-table td.st-red2 {
background: #371515;
}
html.skin-theme-clientpref-os .st-table td.st-red3,
html.skin-theme-clientpref-os .st-table th.st-red3,
html.skin-theme-clientpref-os .sr-table td.st-red3 {
background: #2c1111;
}
html.skin-theme-clientpref-os .st-table td.st-red4,
html.skin-theme-clientpref-os .st-table th.st-red4,
html.skin-theme-clientpref-os .sr-table td.st-red4 {
background: #210d0d;
}
html.skin-theme-clientpref-os .st-table td.st-black1,
html.skin-theme-clientpref-os .st-table th.st-black1,
html.skin-theme-clientpref-os .sr-table td.st-black1 {
background: #2e2e2e;
}
html.skin-theme-clientpref-os .st-table td.st-black2,
html.skin-theme-clientpref-os .st-table th.st-black2,
html.skin-theme-clientpref-os .sr-table td.st-black2 {
background: #262626;
}
html.skin-theme-clientpref-os .st-table td.st-black3,
html.skin-theme-clientpref-os .st-table th.st-black3,
html.skin-theme-clientpref-os .sr-table td.st-black3 {
background: #1f1f1f;
}
html.skin-theme-clientpref-os .st-table td.st-black4,
html.skin-theme-clientpref-os .st-table th.st-black4,
html.skin-theme-clientpref-os .sr-table td.st-black4 {
background: #171717;
}
html.skin-theme-clientpref-os .st-table td.st-orange1,
html.skin-theme-clientpref-os .st-table th.st-orange1,
html.skin-theme-clientpref-os .sr-table td.st-orange1 {
background: #432e19;
}
html.skin-theme-clientpref-os .st-table td.st-orange2,
html.skin-theme-clientpref-os .st-table th.st-orange2,
html.skin-theme-clientpref-os .sr-table td.st-orange2 {
background: #342614;
}
html.skin-theme-clientpref-os .st-table td.st-gold1,
html.skin-theme-clientpref-os .st-table th.st-gold1,
html.skin-theme-clientpref-os .sr-table td.st-gold1 {
background: #4c3d00;
}
html.skin-theme-clientpref-os .st-table td.st-silver1,
html.skin-theme-clientpref-os .st-table th.st-silver1,
html.skin-theme-clientpref-os .sr-table td.st-silver1 {
background: #3f3f3f;
}
html.skin-theme-clientpref-os .st-table td.st-bronze1,
html.skin-theme-clientpref-os .st-table th.st-bronze1,
html.skin-theme-clientpref-os .sr-table td.st-bronze1 {
background: #5c361f;
}
html.skin-theme-clientpref-os .st-table td.st-accent,
html.skin-theme-clientpref-os .st-table th.st-accent,
html.skin-theme-clientpref-os .sr-table td.st-accent {
background: #192b43;
}
html.skin-theme-clientpref-os .st-table td.st-neutral,
html.skin-theme-clientpref-os .st-table th.st-neutral,
html.skin-theme-clientpref-os .sr-table td.st-neutral {
background: #222425;
}
html.skin-theme-clientpref-os .st-table tr.st-split {
background: #54595d;
}
html.skin-theme-clientpref-os .st-table td.sr-void,
html.skin-theme-clientpref-os .sr-table td.sr-void {
background: #222425;
}
}
/* ------------------------------------------------------------------
Тёмная тема
------------------------------------------------------------------ */
/* Заливка утверждённых имён палитры в тёмной теме приглушена (см. раздел выше),
поэтому текст и ссылки читаются на ней своими обычными цветами.
Остаются произвольные написания: их значение известно только модулю, он выводит
его встроенным стилем, и в тёмной теме такая заливка остаётся светлой. Ссылка на
ней окрашивается правилом скина в светлый цвет — получается светлое по светлому.
Правило действует на ячейки со встроенной заливкой. У имени палитры её нет — цвет
приходит из класса на строке, — поэтому отбор по атрибуту точно выделяет
произвольные написания, не задевая остальные.
Значения transparent и inherit исключены: это не цвет, а его отсутствие.
Служебная ячейка таблицы личных встреч (sr-void) закрашена из стилей и тёмный
вариант получает там же. */
@media screen {
html.skin-theme-clientpref-night .st-table td[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]),
html.skin-theme-clientpref-night .st-table th[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]),
html.skin-theme-clientpref-night .st-table td[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-night .st-table th[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]) a {
color: #202122 !important;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .st-table td[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]),
html.skin-theme-clientpref-os .st-table th[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]),
html.skin-theme-clientpref-os .st-table td[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-os .st-table th[style*="background-color:"]:not([style*="transparent"]):not([style*="inherit"]) a {
color: #202122 !important;
}
}
/* [[Категория:Шаблоны:Подстраницы CSS]] */