Lanode: Возвращены значки примечаний: фоновые картинки с Викисклада, как в оригинале (via update-page on MediaWiki MCP Server)

2026-08-04T21:49:11Z

Возвращены значки примечаний: фоновые картинки с Викисклада, как в оригинале (via update-page on MediaWiki MCP Server)

Lanode: Общий лист стилей шаблонов-сообщений (перенос с mediawiki.org) (via create-page on MediaWiki MCP Server)

2026-08-04T21:30:33Z

Общий лист стилей шаблонов-сообщений (перенос с mediawiki.org) (via create-page on MediaWiki MCP Server)

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

/* Общий лист стилей шаблонов-сообщений Amereco Wiki.
*
* Подключается строкой <templatestyles src="Сообщение/styles.css" /> из
* шаблонов «Предупреждение», «Осторожно», «Исправить», «Примечание» и «Совет».
*
* Лист один на все пять шаблонов намеренно: классы у них пересекаются, а
* 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;
}
}

Шаблон:Сообщение/styles.css - История изменений

Lanode: Возвращены значки примечаний: фоновые картинки с Викисклада, как в оригинале (via update-page on MediaWiki MCP Server)

Lanode: Общий лист стилей шаблонов-сообщений (перенос с mediawiki.org) (via create-page on MediaWiki MCP Server)