Шаблон:ColorPaletteStyles: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) мНет описания правки |
||
| (не показано 5 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
<includeonly>{{#switch: {{{1}}} | <includeonly>{{#switch: {{{1}}} | ||
| Civilian = | | Civilian = | ||
-- | --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 = | |||
| Medical = | --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 = | ||
--tmp-100: var(--supply-opaque); | |||
| Supply = | --tmp-75: var(--supply-primary); | ||
-- | --tmp-50: var(--supply-secondary); | ||
-- | --tmp-25: var(--supply-light); | ||
-- | --tmp-10: var(--supply-transparent) | ||
-- | | Science = | ||
-- | --tmp-100: var(--science-opaque); | ||
--tmp-75: var(--science-primary); | |||
| Science = | --tmp-50: var(--science-secondary); | ||
-- | --tmp-25: var(--science-light); | ||
-- | --tmp-10: var(--science-transparent) | ||
-- | | Engineering = | ||
-- | --tmp-100: var(--engineer-opaque); | ||
-- | --tmp-75: var(--engineer-primary); | ||
--tmp-50: var(--engineer-secondary); | |||
| Engineering = | --tmp-25: var(--engineer-light); | ||
-- | --tmp-10: var(--engineer-transparent) | ||
-- | | Security = | ||
-- | --tmp-100: var(--security-opaque); | ||
-- | --tmp-75: var(--security-primary); | ||
-- | --tmp-50: var(--security-secondary); | ||
--tmp-25: var(--security-light); | |||
| Security = | --tmp-10: var(--security-transparent) | ||
-- | | Antag = | ||
-- | --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) | |||
| Antag = | | Legal = | ||
-- | --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 = | |||
| Legal = | --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 = | ||
--tmp-100: var(--synthetic-opaque); | |||
| Command = | --tmp-75: var(--synthetic-primary); | ||
-- | --tmp-50: var(--synthetic-secondary); | ||
-- | --tmp-25: var(--synthetic-light); | ||
-- | --tmp-10: var(--synthetic-transparent) | ||
-- | | CentCom = | ||
-- | --tmp-100: var(--centcom-opaque); | ||
--tmp-75: var(--centcom-primary); | |||
| Synthetic = | --tmp-50: var(--centcom-secondary); | ||
-- | --tmp-25: var(--centcom-light); | ||
-- | --tmp-10: var(--centcom-transparent) | ||
-- | | Special = | ||
-- | --tmp-100: var(--special-opaque); | ||
-- | --tmp-75: var(--special-primary); | ||
--tmp-50: var(--special-secondary); | |||
| CentCom = | --tmp-25: var(--special-light); | ||
-- | --tmp-10: var(--special-transparent) | ||
-- | | Cyan = | ||
--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 = | |||
| Special = | --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 = | ||
--tmp-100: var(--green-opaque); | |||
| Cyan = | --tmp-75: var(--green-primary); | ||
-- | --tmp-50: var(--green-secondary); | ||
-- | --tmp-25: var(--green-light); | ||
-- | --tmp-10: var(--green-transparent) | ||
-- | | Yellow = | ||
-- | --tmp-100: var(--yellow-opaque); | ||
--tmp-75: var(--yellow-primary); | |||
| Blue = | --tmp-50: var(--yellow-secondary); | ||
-- | --tmp-25: var(--yellow-light); | ||
-- | --tmp-10: var(--yellow-transparent) | ||
-- | | Red = | ||
-- | --tmp-100: var(--red-opaque); | ||
-- | --tmp-75: var(--red-primary); | ||
--tmp-50: var(--red-secondary); | |||
| Green = | --tmp-25: var(--red-light); | ||
-- | --tmp-10: var(--red-transparent) | ||
-- | | Pink = | ||
-- | --tmp-100: var(--pink-opaque); | ||
-- | --tmp-75: var(--pink-primary); | ||
-- | --tmp-50: var(--pink-secondary); | ||
--tmp-25: var(--pink-light); | |||
| Yellow = | --tmp-10: var(--pink-transparent) | ||
-- | | Brown = | ||
-- | --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) | |||
| Red = | | Lavaland = | ||
-- | --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 = | |||
| Pink = | --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 = | ||
--tmp-100: var(--ratvar-opaque); | |||
| Brown = | --tmp-75: var(--ratvar-primary); | ||
-- | --tmp-50: var(--ratvar-secondary); | ||
-- | --tmp-25: var(--ratvar-light); | ||
-- | --tmp-10: var(--ratvar-transparent) | ||
-- | | Wizard = | ||
-- | --tmp-100: var(--wizard-opaque); | ||
--tmp-75: var(--wizard-primary); | |||
| Lavaland = | --tmp-50: var(--wizard-secondary); | ||
-- | --tmp-25: var(--wizard-light); | ||
-- | --tmp-10: var(--wizard-transparent) | ||
-- | | Black = | ||
-- | --tmp-100: var(--black-opaque); | ||
-- | --tmp-75: var(--black-primary); | ||
--tmp-50: var(--black-secondary); | |||
| Cultist = | --tmp-25: var(--black-light); | ||
-- | --tmp-10: var(--black-transparent) | ||
-- | | Gray = | ||
-- | --tmp-100: var(--gray-opaque); | ||
-- | --tmp-75: var(--gray-primary); | ||
-- | --tmp-50: var(--gray-secondary); | ||
--tmp-25: var(--gray-light); | |||
| Ratvar = | --tmp-10: var(--gray-transparent) | ||
-- | | #default = | ||
-- | --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) | |||
| Wizard = | |||
-- | |||
-- | |||
-- | |||
-- | |||
-- | |||
| Black = | |||
-- | |||
-- | |||
-- | |||
-- | |||
-- | |||
| Gray = | |||
-- | |||
-- | |||
-- | |||
-- | |||
-- | |||
| | |||
-- | |||
-- | |||
-- | |||
-- | |||
-- | |||
}}</includeonly><noinclude> | }}</includeonly><noinclude> | ||
= Что это? = | = Что это? = | ||
| Строка 193: | Строка 165: | ||
Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br> | Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br> | ||
Использование <nowiki>{{ColorPalette|Civilian | Использование <nowiki>{{ColorPalette|Civilian}}</nowiki><br> | ||
Вернёт следующий код: | Вернёт следующий код: | ||
< | <syntaxhighlight lang="html"> | ||
--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> | ||
</ | |||
Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br> | Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br> | ||
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css | Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css | ||
| Строка 216: | Строка 187: | ||
=== Как использовать? === | === Как использовать? === | ||
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы: | При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы: | ||
< | <syntaxhighlight lang="html"> | ||
<div class="wrapper" {{ColorPaletteStyles|Civilian | <div class="wrapper" style="{{ColorPaletteStyles|Civilian}};"> | ||
<span class="example-text">Обычный текст</span> | <span class="example-text">Обычный текст</span> | ||
</div> | </div> | ||
</ | </syntaxhighlight> | ||
Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br> | Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br> | ||
Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br> | Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br> | ||
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже: | После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже: | ||
< | <syntaxhighlight lang="html"> | ||
<templatestyles src="Notice/styles.css" /> | <templatestyles src="Notice/styles.css" /> | ||
<div class="notice" {{ColorPaletteStyles|Cargo | <div class="notice" style="{{ColorPaletteStyles|Cargo}};"> | ||
<span class="notice-text">Обычный текст</span> | <span class="notice-text">Обычный текст</span> | ||
</div> | </div> | ||
</ | </syntaxhighlight> | ||
Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br> | Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br> | ||
Теперь же, на странице стилей мы можем... стилизовать наш шаблон: | Теперь же, на странице стилей мы можем... стилизовать наш шаблон: | ||
< | <syntaxhighlight lang="css"> | ||
.notice { | .notice { | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
border: 1px solid var(-- | border: 1px solid var(--tmp-25); | ||
} | } | ||
| Строка 243: | Строка 214: | ||
color: var(--color-text); /* Эта переменная создана в самом скине */ | color: var(--color-text); /* Эта переменная создана в самом скине */ | ||
} | } | ||
</ | </syntaxhighlight> | ||
= Имеющиеся цвета = | = Имеющиеся цвета = | ||
См. [[ColorPalette#Имеющиеся_цвета|ColorPalette]] | См. [[ColorPalette#Имеющиеся_цвета|ColorPalette]] | ||
Текущая версия от 11:09, 2 июня 2025
Что это?
Вариант шаблона ColorPalette но для использования вместе с классами.
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.
В чём её преимущество?
В отличии от ColorPalette, этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.
Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам!
Использование {{ColorPalette|Civilian}}
Вернёт следующий код:
--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" style="{{ColorPaletteStyles|Civilian}};">
<span class="example-text">Обычный текст</span>
</div>
Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице Шаблон:Notice
Нам нужно создать страницу Шаблон:Notice/styles.css, это ОБЯЗАТЕЛЬНО
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
<templatestyles src="Notice/styles.css" />
<div class="notice" style="{{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