Шаблон:Сообщение/styles.css

/* Общий лист стилей шаблонов-сообщений Amereco Wiki.
 *
 * Подключается строкой  из
 * шаблонов «Предупреждение», «Осторожно», «Исправить», «Примечание» и «Совет».
 *
 * Лист один на все пять шаблонов намеренно: классы у них пересекаются, а
 * TemplateStyles вставляет каждый подключённый лист отдельным блоком <style>,
 * так что пять мелких файлов на одной статье обошлись бы дороже одного общего.
 *
 * Иконок здесь нет и не будет: TemplateStyles запрещает url() на внешние
 * ресурсы, а картинки к нам приходят с Викисклада через InstantCommons.
 * Поэтому иконку вставляет сам шаблон обычной ссылкой на файл, а CSS
 * отвечает только за цвета, рамки и раскладку.
 *
 * ── Две особенности санитайзера, из-за которых лист выглядит именно так ──
 *
 * Первое: var() принимается в сокращённом свойстве border, но НЕ в отдельном
 * border-color — санитайзер TemplateStyles разбирает его как список цветов и
 * на var() ругается «Invalid or unsupported value for property». Поэтому во
 * всех модификаторах рамка задаётся целиком: border: 1px solid var(...).
 * Если написать border-color — страница просто не сохранится.
 *
 * Второе: логические свойства (padding-inline-start, margin-block) санитайзер
 * пропускает не везде, поэтому отступы записаны обычными физическими
 * свойствами. Для русской вики это ничего не меняет — направление письма
 * у нас всегда слева направо, и шаблон {{dir}} с mediawiki.org нам не нужен.
 *
 * ── Цвета ──
 *
 * Заданы переменными Codex с запасным значением. Если скин их определяет
 * (Vector 2022, в том числе тёмная тема) — коробка перекрасится вместе с
 * темой сама; если нет (MonoBook, наш скин по умолчанию) — возьмётся
 * запасной светлый цвет.
 *
 * Отсюда два правила, которые нельзя нарушать.
 *
 * Первое: background-color и color берутся из переменных только парой. Если
 * фон задан переменной, которой в наборе нет, а цвет текста — той, которая
 * есть, то в тёмной теме светлый текст ляжет на светлый запасной фон. Поэтому
 * в модификаторах цвет текста не повторяется: он один раз задан в .amsg и
 * .note и наследуется, а фон всюду взят из переменной, которая заведомо есть.
 *
 * Второе: одному токену — одно запасное значение по всему листу. Иначе на
 * скине с Codex красная коробка и красное примечание совпадут, а на скине
 * без Codex разъедутся, и разницу потом никто не объяснит.
 *
 * ── Разметка, на которую рассчитан лист ──
 *
 *   Коробка (Предупреждение, Осторожно):
 *     <div class="amsg amsg-warning">
 *       <span class="amsg-icon">иконка</span>
 *       <span class="amsg-label">Предупреждение:</span>
 *       <div class="amsg-body">текст</div>
 *     </div>
 *
 *   Без параметра коробки нет вовсе: в поток абзаца выводятся только
 *   .amsg-icon и .amsg-label, поэтому их базовые правила не должны ничего
 *   ломать в обычном тексте и не должны зависеть от наличия .amsg сверху.
 */

/* ------------------------------------------------------------------ *
 * Коробка сообщения: Предупреждение и Осторожно
 * ------------------------------------------------------------------ */

/* Базовая коробка. Схему цвета добавляют модификаторы .amsg-warning и
   .amsg-caution, поэтому здесь нейтральные цвета — если модификатор забудут,
   сообщение всё равно останется читаемым, а не бесцветным.
   Флекс повторяет две колонки исходной таблицы с mediawiki.org, но с
   flex-wrap текст переносится под подпись сам, как только колонке не хватает
   места. min-width: 0 у текстовой колонки обязателен: по умолчанию
   флекс-элемент не сжимается уже своего содержимого, и одно длинное слово
   (ссылка, путь к файлу) распирает коробку за пределы колонки статьи. */
.amsg {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0.5em 0;
	padding: 0.5em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-radius: 2px;
	background-color: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

.amsg > .amsg-body {
	flex: 1 1 15em;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Во флексе пробелы между элементами разметки схлопываются, поэтому зазор
   после иконки и после подписи задаём явно — иначе они слипаются. */
.amsg > .amsg-icon,
.amsg > .amsg-label {
	padding-right: 0.35em;
}

/* Иконка сама по себе. Правило работает и в коротком режиме, когда никакой
   коробки нет и span с картинкой стоит прямо в абзаце: картинку надо
   посадить на базовую линию текста, иначе строка заметно подпрыгивает.
   nowrap висит здесь, а не на «.amsg .amsg-icon»: разрыв строки между
   иконкой и словом «Предупреждение:» одинаково некрасив и в коробке, и в
   коротком режиме — а короткий режим как раз без коробки, и правило с
   .amsg сверху до него не доставало бы. */
.amsg-icon {
	white-space: nowrap;
}

.amsg-icon img {
	vertical-align: text-bottom;
}

.amsg-label {
	font-weight: bold;
}

/* Поля первого и последнего блока внутри текста сообщения гасим: без этого
   сообщение из одного абзаца и сообщение из списка выглядят по-разному —
   у второго сверху и снизу появляется лишний воздух поверх padding коробки. */
.amsg .amsg-body > *:first-child,
.note > *:first-child {
	margin-top: 0;
}

.amsg .amsg-body > *:last-child,
.note > *:last-child {
	margin-bottom: 0;
}

/* Предупреждение — «так делать нельзя»: приглушённый красный фон,
   тёмно-красная рамка. Цвет текста не переопределяем — он наследуется
   из .amsg, и в тёмной теме поедет вместе с фоном, а не отдельно от него. */
.amsg-warning {
	border: 1px solid var( --border-color-error, #9f3526 );
	background-color: var( --background-color-error-subtle, #ffe9e5 );
}

/* Осторожно — «действие необратимо». Цветовая схема та же, что у
   предупреждения, — буквально те же две переменные, а не «похожие»:
   обещание «фон тот же» иначе не выполняется ни на одном скине. Громче
   предупреждения «Осторожно» звучит за счёт треугольной иконки, которую
   ставит шаблон, и удвоенной рамки — третий красный в палитре не нужен. */
.amsg-caution {
	border: 2px solid var( --border-color-error, #9f3526 );
	background-color: var( --background-color-error-subtle, #ffe9e5 );
}

/* ------------------------------------------------------------------ *
 * Примечание, Совет
 * ------------------------------------------------------------------ */

/* overflow: hidden здесь не «на всякий случай», а ради плавающих элементов:
   если в примечание положат миниатюру или инфобокс, без этого они вывалятся
   за рамку и лягут поверх соседнего текста. */
.note {
	box-sizing: border-box;
	overflow: hidden;
	overflow-wrap: break-word;
	margin: 0.5em 0;
	padding: 0.5em;
	border: 1px solid var( --border-color-subtle, #c8ccd1 );
	border-radius: 2px;
	background-color: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

/* Врезка в строку. Примечание становится частью абзаца, поэтому внешние поля
   убираем совсем, а внутренние ужимаем: с полем 0.5em строка абзаца
   расходится по высоте и текст вокруг «гуляет». */
.note-inline {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0.15em 0.5em;
}

/* Синие «к сведению». .note-notice — запасное написание того же типа:
   шаблон его не выводит, но если значение type когда-нибудь назовут так,
   примечание уже будет окрашено. */
.note-info,
.note-notice {
	border: 1px solid var( --border-color-progressive, #a3caff );
	background-color: var( --background-color-progressive-subtle, #eaf3ff );
}

/* Жёлтые «обратите внимание». reminder (он же Совет) и warn выглядят
   одинаково — это не копипаста, а решение оригинала: различаются они
   иконкой, которую ставит шаблон, а не цветом коробки.
   .note-warning — запасное написание .note-warn. */
.note-reminder,
.note-warn,
.note-warning {
	border: 1px solid var( --border-color-warning, #fc3 );
	background-color: var( --background-color-warning-subtle, #fff9ea );
}

/* Красные «этого делать не стоит». Переменные и запасные значения те же,
   что у .amsg-warning: это одна и та же «ошибка» в палитре, и выглядеть она
   обязана одинаково. .note-gotcha — запасное написание .note-error. */
.note-error,
.note-gotcha {
	border: 1px solid var( --border-color-error, #9f3526 );
	background-color: var( --background-color-error-subtle, #ffe9e5 );
}

/* ------------------------------------------------------------------ *
 * Исправить
 * ------------------------------------------------------------------ */

/* Не коробка, а выделение в строку: шаблон вставляют посреди абзаца, поэтому
   inline-block и никаких внешних полей. Толстая полоса слева работает
   маркером, как полоска у цитаты.
   Подсветка задана здесь же, на единственном классе, которым шаблон
   размечает вставку. Держать фон на вложенном элементе нельзя: тогда от
   «Исправить» без текста осталась бы рамка вокруг пустоты.
   Фон и рамка взяты из разных токенов пары content-removed. Это важно:
   у диффов #ffe49c — цвет именно рамки, фон удалённой строки светлее, и
   если подставить #ffe49c в оба места, полоса-маркер сольётся с подсветкой.
   Отступ симметричный: с padding только слева текст упирается в правую рамку. */
.fixtext {
	display: inline-block;
	padding: 0.15em 0.4em;
	border: 1px solid var( --border-color-content-removed, #ffe49c );
	border-left-width: 4px;
	border-radius: 0.33em;
	background-color: var( --background-color-content-removed, #feeec8 );
	color: var( --color-base, #202122 );
}

/* Метка «ИСПРАВЬТЕ:» — только начертание: подсветку несёт вся вставка,
   отдельный фон метке не нужен. user-select: none, как в оригинале, не
   ставим: без него метка копируется вместе с текстом, и это не беда. */
.fixtext-label {
	font-weight: bold;
}

/* ------------------------------------------------------------------ *
 * Узкий экран
 * ------------------------------------------------------------------ */

/* Порог 639px — тот же, что уже используется для инфобоксов в
   MediaWiki:Common.css, чтобы вики перестраивалась везде в одной точке.
   Ломается на телефоне не ширина коробки (она и так во всю колонку), а две
   колонки внутри: подпись «Предупреждение:» стоит с nowrap и на экране 320px
   съедает почти всю строку, тексту остаётся пара символов. Поэтому колонки
   разворачиваем в строки — сверху иконка с подписью, под ними текст.
   Сброс nowrap записан через «.amsg .amsg-icon» — так он сильнее базового
   «.amsg-icon» и снимает запрет только внутри коробки. */
@media all and (max-width: 639px) {
	.amsg {
		display: block;
	}

	.amsg .amsg-icon {
		white-space: normal;
	}

	.amsg .amsg-body {
		padding-top: 0.35em;
	}
}