Шаблон:ColorPaletteStyles: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) мНет описания правки |
||
Строка 73: | Строка 73: | ||
--{{{2|template}}}-opaque: var(--centcom-opaque); | --{{{2|template}}}-opaque: var(--centcom-opaque); | ||
--{{{2|template}}}-primary: var(--centcom-primary); | --{{{2|template}}}-primary: var(--centcom-primary); | ||
--{{{2|template}}}-secondary: var(--centcom-secondary); | |||
--{{{2|template}}}-light: var(--centcom-light); | --{{{2|template}}}-light: var(--centcom-light); | ||
--{{{2|template}}}-transparent: var(--centcom-transparent); | --{{{2|template}}}-transparent: var(--centcom-transparent); | ||
Строка 177: | Строка 175: | ||
--{{{2|template}}}-transparent: var(--gray-transparent); | --{{{2|template}}}-transparent: var(--gray-transparent); | ||
" | " | ||
| style=" | | #default = style=" | ||
--{{{2|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness)); | --{{{2|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness)); | ||
--{{{2|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75); | --{{{2|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75); |
Версия от 22:56, 13 мая 2025
Что это?
Вариант шаблона ColorPalette но для использования вместе с классами.
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.
В чём её преимущество?
В отличии от ColorPalette, этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.
Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам!
Использование {{ColorPalette|Civilian|example}}
Вернёт следующий код:
style=" --example-opaque: var(--civilian-opaque); --example-primary: var(--civilian-primary); --example-secondary: var(--civilian-secondary); --example-light: var(--civilian-light); --example-transparent: var(--civilian-transparent); "
Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css
С какой целью это сделано?
Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.
Этот шаблон позволяет:
- Держать вёрстку шаблона в чистоте
- Тонко стилизовать шаблон с помощью
TemplateStyles
, так как все цвета доступны в виде переменных - Сохранять преимущества ColorPalette, позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой
Как использовать?
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
<div class="wrapper" {{ColorPaletteStyles|Civilian|example}}> <span class="example-text">Обычный текст</span> </div>
Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице Шаблон:Notice
Нам нужно создать страницу Шаблон:Notice/styles.css
, это ОБЯЗАТЕЛЬНО
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
<templatestyles src="Notice/styles.css" /> <div class="notice" {{ColorPaletteStyles|Cargo|notice}}> <span class="notice-text">Обычный текст</span> </div>
Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
.notice { background-color: var(--notice-primary); border: 1px solid var(--notice-light); } .notice-text { color: var(--color-text); /* Эта переменная создана в самом скине */ }
Имеющиеся цвета
См. ColorPalette