Шаблон:ColorPaletteStyles: различия между версиями
Aylong (обсуждение | вклад) м Отмена версии 45682, сделанной Aylong (обсуждение) Метка: отмена |
Aylong (обсуждение | вклад) Уменьшение символов у переменных и сортировка по нарастающей в DevTools |
||
| Строка 1: | Строка 1: | ||
<includeonly>{{#switch: {{{1}}} | <includeonly>{{#switch: {{{1}}} | ||
| Civilian = style=" | | Civilian = style=" | ||
-- | --tmp-100: var(--civilian-opaque); | ||
-- | --tmp-75: var(--civilian-primary); | ||
-- | --tmp-50: var(--civilian-secondary); | ||
-- | --tmp-25: var(--civilian-light); | ||
-- | --tmp-10: var(--civilian-transparent); | ||
" | " | ||
| Medical = style=" | | Medical = style=" | ||
-- | --tmp-100: var(--medical-opaque); | ||
-- | --tmp-75: var(--medical-primary); | ||
-- | --tmp-50: var(--medical-secondary); | ||
-- | --tmp-25: var(--medical-light); | ||
-- | --tmp-10: var(--medical-transparent); | ||
" | " | ||
| Supply = style=" | | Supply = style=" | ||
-- | --tmp-100: var(--supply-opaque); | ||
-- | --tmp-75: var(--supply-primary); | ||
-- | --tmp-50: var(--supply-secondary); | ||
-- | --tmp-25: var(--supply-light); | ||
-- | --tmp-10: var(--supply-transparent); | ||
" | " | ||
| Science = style=" | | Science = style=" | ||
-- | --tmp-100: var(--science-opaque); | ||
-- | --tmp-75: var(--science-primary); | ||
-- | --tmp-50: var(--science-secondary); | ||
-- | --tmp-25: var(--science-light); | ||
-- | --tmp-10: var(--science-transparent); | ||
" | " | ||
| Engineering = style=" | | Engineering = style=" | ||
-- | --tmp-100: var(--engineer-opaque); | ||
-- | --tmp-75: var(--engineer-primary); | ||
-- | --tmp-50: var(--engineer-secondary); | ||
-- | --tmp-25: var(--engineer-light); | ||
-- | --tmp-10: var(--engineer-transparent); | ||
" | " | ||
| Security = style=" | | Security = style=" | ||
-- | --tmp-100: var(--security-opaque); | ||
-- | --tmp-75: var(--security-primary); | ||
-- | --tmp-50: var(--security-secondary); | ||
-- | --tmp-25: var(--security-light); | ||
-- | --tmp-10: var(--security-transparent); | ||
" | " | ||
| Antag = style=" | | Antag = style=" | ||
-- | --tmp-100: var(--antag-opaque); | ||
-- | --tmp-75: var(--antag-primary); | ||
-- | --tmp-50: var(--antag-secondary); | ||
-- | --tmp-25: var(--antag-light); | ||
-- | --tmp-10: var(--antag-transparent); | ||
" | " | ||
| Legal = style=" | | Legal = style=" | ||
-- | --tmp-100: var(--legal-opaque); | ||
-- | --tmp-75: var(--legal-primary); | ||
-- | --tmp-50: var(--legal-secondary); | ||
-- | --tmp-25: var(--legal-light); | ||
-- | --tmp-10: var(--legal-transparent); | ||
" | " | ||
| Command = style=" | | Command = style=" | ||
-- | --tmp-100: var(--command-opaque); | ||
-- | --tmp-75: var(--command-primary); | ||
-- | --tmp-50: var(--command-secondary); | ||
-- | --tmp-25: var(--command-light); | ||
-- | --tmp-10: var(--command-transparent); | ||
" | " | ||
| Synthetic = style=" | | Synthetic = style=" | ||
-- | --tmp-100: var(--synthetic-opaque); | ||
-- | --tmp-75: var(--synthetic-primary); | ||
-- | --tmp-50: var(--synthetic-secondary); | ||
-- | --tmp-25: var(--synthetic-light); | ||
-- | --tmp-10: var(--synthetic-transparent); | ||
" | " | ||
| CentCom = style=" | | CentCom = style=" | ||
-- | --tmp-100: var(--centcom-opaque); | ||
-- | --tmp-75: var(--centcom-primary); | ||
-- | --tmp-50: var(--centcom-secondary); | ||
-- | --tmp-25: var(--centcom-light); | ||
-- | --tmp-10: var(--centcom-transparent); | ||
" | " | ||
| Special = style=" | | Special = style=" | ||
-- | --tmp-100: var(--special-opaque); | ||
-- | --tmp-75: var(--special-primary); | ||
-- | --tmp-50: var(--special-secondary); | ||
-- | --tmp-25: var(--special-light); | ||
-- | --tmp-10: var(--special-transparent); | ||
" | " | ||
| Cyan = style=" | | Cyan = style=" | ||
-- | --tmp-100: var(--cyan-opaque); | ||
-- | --tmp-75: var(--cyan-primary); | ||
-- | --tmp-50: var(--cyan-secondary); | ||
-- | --tmp-25: var(--cyan-light); | ||
-- | --tmp-10: var(--cyan-transparent); | ||
" | " | ||
| Blue = style=" | | Blue = style=" | ||
-- | --tmp-100: var(--blue-opaque); | ||
-- | --tmp-75: var(--blue-primary); | ||
-- | --tmp-50: var(--blue-secondary); | ||
-- | --tmp-25: var(--blue-light); | ||
-- | --tmp-10: var(--blue-transparent); | ||
" | " | ||
| Green = style=" | | Green = style=" | ||
-- | --tmp-100: var(--green-opaque); | ||
-- | --tmp-75: var(--green-primary); | ||
-- | --tmp-50: var(--green-secondary); | ||
-- | --tmp-25: var(--green-light); | ||
-- | --tmp-10: var(--green-transparent); | ||
" | " | ||
| Yellow = style=" | | Yellow = style=" | ||
-- | --tmp-100: var(--yellow-opaque); | ||
-- | --tmp-75: var(--yellow-primary); | ||
-- | --tmp-50: var(--yellow-secondary); | ||
-- | --tmp-25: var(--yellow-light); | ||
-- | --tmp-10: var(--yellow-transparent); | ||
" | " | ||
| Red = style=" | | Red = style=" | ||
-- | --tmp-100: var(--red-opaque); | ||
-- | --tmp-75: var(--red-primary); | ||
-- | --tmp-50: var(--red-secondary); | ||
-- | --tmp-25: var(--red-light); | ||
-- | --tmp-10: var(--red-transparent); | ||
" | " | ||
| Pink = style=" | | Pink = style=" | ||
-- | --tmp-100: var(--pink-opaque); | ||
-- | --tmp-75: var(--pink-primary); | ||
-- | --tmp-50: var(--pink-secondary); | ||
-- | --tmp-25: var(--pink-light); | ||
-- | --tmp-10: var(--pink-transparent); | ||
" | " | ||
| Brown = style=" | | Brown = style=" | ||
-- | --tmp-100: var(--brown-opaque); | ||
-- | --tmp-75: var(--brown-primary); | ||
-- | --tmp-50: var(--brown-secondary); | ||
-- | --tmp-25: var(--brown-light); | ||
-- | --tmp-10: var(--brown-transparent); | ||
" | " | ||
| Lavaland = style=" | | Lavaland = style=" | ||
-- | --tmp-100: var(--lavaland-opaque); | ||
-- | --tmp-75: var(--lavaland-primary); | ||
-- | --tmp-50: var(--lavaland-secondary); | ||
-- | --tmp-25: var(--lavaland-light); | ||
-- | --tmp-10: var(--lavaland-transparent); | ||
" | " | ||
| Cultist = style=" | | Cultist = style=" | ||
-- | --tmp-100: var(--cult-opaque); | ||
-- | --tmp-75: var(--cult-primary); | ||
-- | --tmp-50: var(--cult-secondary); | ||
-- | --tmp-25: var(--cult-light); | ||
-- | --tmp-10: var(--cult-transparent); | ||
" | " | ||
| Ratvar = style=" | | Ratvar = style=" | ||
-- | --tmp-100: var(--ratvar-opaque); | ||
-- | --tmp-75: var(--ratvar-primary); | ||
-- | --tmp-50: var(--ratvar-secondary); | ||
-- | --tmp-25: var(--ratvar-light); | ||
-- | --tmp-10: var(--ratvar-transparent); | ||
" | " | ||
| Wizard = style=" | | Wizard = style=" | ||
-- | --tmp-100: var(--wizard-opaque); | ||
-- | --tmp-75: var(--wizard-primary); | ||
-- | --tmp-50: var(--wizard-secondary); | ||
-- | --tmp-25: var(--wizard-light); | ||
-- | --tmp-10: var(--wizard-transparent); | ||
" | " | ||
| Black = style=" | | Black = style=" | ||
-- | --tmp-100: var(--black-opaque); | ||
-- | --tmp-75: var(--black-primary); | ||
-- | --tmp-50: var(--black-secondary); | ||
-- | --tmp-25: var(--black-light); | ||
-- | --tmp-10: var(--black-transparent); | ||
" | " | ||
| Gray = style=" | | Gray = style=" | ||
-- | --tmp-100: var(--gray-opaque); | ||
-- | --tmp-75: var(--gray-primary); | ||
-- | --tmp-50: var(--gray-secondary); | ||
-- | --tmp-25: var(--gray-light); | ||
-- | --tmp-10: var(--gray-transparent); | ||
" | " | ||
| #default = style=" | | #default = style=" | ||
-- | --tmp-100: hsl(var(--primary-hue), 40%, var(--primary-lightness)); | ||
-- | --tmp-75: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75); | ||
-- | --tmp-50: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5); | ||
-- | --tmp-25: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25); | ||
-- | --tmp-10: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1); | ||
" | " | ||
}}</includeonly><noinclude> | }}</includeonly><noinclude> | ||
| Строка 191: | Строка 191: | ||
Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br> | Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br> | ||
Использование <nowiki>{{ColorPalette|Civilian | Использование <nowiki>{{ColorPalette|Civilian}}</nowiki><br> | ||
Вернёт следующий код: | Вернёт следующий код: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
style=" | style=" | ||
-- | --tmp-100: var(--civilian-opaque); | ||
-- | --tmp-75: var(--civilian-primary); | ||
-- | --tmp-50: var(--civilian-secondary); | ||
-- | --tmp-25: var(--civilian-light); | ||
-- | --tmp-10: var(--civilian-transparent); | ||
" | " | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 216: | Строка 216: | ||
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы: | При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="wrapper" {{ColorPaletteStyles|Civilian | <div class="wrapper" {{ColorPaletteStyles|Civilian}}> | ||
<span class="example-text">Обычный текст</span> | <span class="example-text">Обычный текст</span> | ||
</div> | </div> | ||
| Строка 226: | Строка 226: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<templatestyles src="Notice/styles.css" /> | <templatestyles src="Notice/styles.css" /> | ||
<div class="notice" {{ColorPaletteStyles|Cargo | <div class="notice" {{ColorPaletteStyles|Cargo}}> | ||
<span class="notice-text">Обычный текст</span> | <span class="notice-text">Обычный текст</span> | ||
</div> | </div> | ||
| Строка 235: | Строка 235: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.notice { | .notice { | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
border: 1px solid var(-- | border: 1px solid var(--tmp-25); | ||
} | } | ||
Версия от 10:02, 2 июня 2025
Что это?
Вариант шаблона ColorPalette но для использования вместе с классами.
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.
В чём её преимущество?
В отличии от ColorPalette, этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.
Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам!
Использование {{ColorPalette|Civilian}}
Вернёт следующий код:
style="
--tmp-100: var(--civilian-opaque);
--tmp-75: var(--civilian-primary);
--tmp-50: var(--civilian-secondary);
--tmp-25: var(--civilian-light);
--tmp-10: var(--civilian-transparent);
"
Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css
С какой целью это сделано?
Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.
Этот шаблон позволяет:
- Держать вёрстку шаблона в чистоте
- Тонко стилизовать шаблон с помощью
TemplateStyles, так как все цвета доступны в виде переменных - Сохранять преимущества ColorPalette, позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой
Как использовать?
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
<div class="wrapper" {{ColorPaletteStyles|Civilian}}>
<span class="example-text">Обычный текст</span>
</div>
Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице Шаблон:Notice
Нам нужно создать страницу Шаблон:Notice/styles.css, это ОБЯЗАТЕЛЬНО
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
<templatestyles src="Notice/styles.css" />
<div class="notice" {{ColorPaletteStyles|Cargo}}>
<span class="notice-text">Обычный текст</span>
</div>
Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
.notice {
background-color: var(--tmp-75);
border: 1px solid var(--tmp-25);
}
.notice-text {
color: var(--color-text); /* Эта переменная создана в самом скине */
}
Имеющиеся цвета
См. ColorPalette