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

/* Общий лист стилей шаблонов-сообщений Amereco Wiki.
 *
 * Подключается строкой  из
 * шаблонов «Предупреждение», «Осторожно», «Исправить», «Примечание» и «Совет».
 *
 * Лист один на все пять шаблонов намеренно: классы у них пересекаются, а
 * TemplateStyles вставляет каждый подключённый лист отдельным блоком <style>,
 * так что пять мелких файлов на одной статье обошлись бы дороже одного общего.
 *
 * ── Откуда берутся значки ──
 *
 * Способа два, и это не непоследовательность, а повторение оригинала.
 *
 * «Предупреждение» и «Осторожно» вставляют значок сами, обычной ссылкой
 * [[Файл:…]] в теле шаблона: значок там стоит в одной строке с подписью
 * и должен уезжать вместе с ней при переносе.
 *
 * «Примечание» и «Совет» получают значок отсюда, фоновой картинкой — как
 * в Template:Note/styles.css на mediawiki.org. Значок зависит от типа
 * примечания, а тип шаблон знает только классом, поэтому развилку удобнее
 * держать в CSS, чем плодить в вики-тексте четыре ветки {{#switch}}.
 *
 * url() на внешний адрес здесь допустим: $wgTemplateStylesAllowedUrls по
 * умолчанию разрешает картинки с upload.wikimedia.org/wikipedia/commons/.
 * Любой другой домен санитайзер отклонит, и страница просто не сохранится.
 * Адреса ведут на те же файлы Викисклада, что и в оригинале.
 *
 * ── Две особенности санитайзера ──
 *
 * Первое: var() принимается в сокращённом свойстве border, но НЕ в отдельном
 * border-color — санитайзер разбирает его как список цветов и на 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>
 *
 *   Примечание и Совет:
 *     <div role="note" class="note note-info">текст</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 );
}

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

/* Значок — фоновая картинка, поэтому слева резервируется место под неё:
   padding-left 40px и min-height 25px под картинку 25px. Само изображение
   приходит из модификатора .note-<тип> ниже.
   overflow: hidden здесь не «на всякий случай», а ради плавающих элементов:
   если в примечание положат миниатюру или инфобокс, без этого они вывалятся
   за рамку и лягут поверх соседнего текста. */
.note {
	box-sizing: border-box;
	overflow: hidden;
	overflow-wrap: break-word;
	min-height: 25px;
	margin: 0.5em 0;
	padding: 0.5em 0.5em 0.5em 40px;
	border: 1px solid var( --border-color-subtle, #c8ccd1 );
	border-radius: 2px;
	background-color: var( --background-color-neutral-subtle, #f8f9fa );
	background-repeat: no-repeat;
	background-position: left 7px top 50%;
	background-size: 25px;
	color: var( --color-base, #202122 );
}

/* Врезка в строку. Примечание становится частью абзаца, поэтому внешние поля
   убираем совсем, а внутренние ужимаем: с полем 0.5em строка абзаца
   расходится по высоте и текст вокруг «гуляет». Значок здесь тоже мельче —
   25px рядом со строчным текстом смотрится великаном, — и место под него
   резервируется меньшее. min-height сбрасываем: он задан под крупный значок
   и раздувал бы врезку по высоте. */
.note-inline {
	display: inline-block;
	vertical-align: middle;
	min-height: 0;
	margin: 0;
	padding: 0.15em 0.5em 0.15em 22px;
	background-position: left 4px top 50%;
	background-size: 14px;
}

/* Синие «к сведению». .note-notice — запасное написание того же типа:
   шаблон его не выводит, но если значение type когда-нибудь назовут так,
   примечание уже будет окрашено. */
.note-info,
.note-notice {
	border: 1px solid var( --border-color-progressive, #a3caff );
	background-color: var( --background-color-progressive-subtle, #eaf3ff );
	/* [[Файл:OOjs UI icon information-progressive.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg);
}

/* Жёлтые «обратите внимание». reminder (он же Совет) и warn различаются
   только значком — лампочка против треугольника, — а цвет коробки у них
   общий: так же сделано в оригинале. */
.note-reminder {
	border: 1px solid var( --border-color-warning, #fc3 );
	background-color: var( --background-color-warning-subtle, #fff9ea );
	/* [[Файл:OOjs UI icon lightbulb-yellow.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
}

/* .note-warning — запасное написание .note-warn. */
.note-warn,
.note-warning {
	border: 1px solid var( --border-color-warning, #fc3 );
	background-color: var( --background-color-warning-subtle, #fff9ea );
	/* [[Файл:OOjs UI icon alert-warning.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
}

/* Красные «этого делать не стоит». Переменные и запасные значения те же,
   что у .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 );
	/* [[Файл:OOjs UI icon notice-destructive.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
}

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

/* Не коробка, а выделение в строку: шаблон вставляют посреди абзаца, поэтому
   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;
	}
}