Шаблон:ColorPalette: различия между версиями
Aylong (обсуждение | вклад) (Переработанная палитра) |
Aylong (обсуждение | вклад) (Гуйд) |
||
Строка 1: | Строка 1: | ||
<includeonly> | |||
{{#switch: {{{1}}} | {{#switch: {{{1}}} | ||
| Civilian = | | Civilian = | ||
Строка 190: | Строка 191: | ||
}} | }} | ||
}} | }} | ||
</includeonly><noinclude> | |||
= Что это? = | |||
Это гибкая палитра цветов, сделанная специально для WIKI. <br> | |||
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами. | |||
<br> | |||
=== В чём её преимущество? === | |||
В том что она, при использовании, вставляет CSS переменную. <br> | |||
Например, когда вы пишите <nowiki>{{ColorPalette|Cyan|Primary}}</nowiki><br> | |||
Оно возвращает: {{ColorPalette|Cyan|Primary}} | |||
Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета. | |||
<br> | |||
=== С какой целью это сделано? === | |||
В первую очередь ради возможности сделать 2 темы: светлую и тёмную. <br> | |||
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.<br> | |||
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли? | |||
<b>НАСТОЯТЕЛЬНО</b> рекомендуется использовать <b>ТОЛЬКО</b> шаблон ColorPalette, если вы хотите разукрасить свой шаблон. <br> | |||
В противном случае, он может быть нечитабельным на противоположной теме. | |||
<br> | |||
=== Как использовать? === | |||
Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:<br> | |||
background-color: <nowiki>{{ColorPalette|{{{Color}}}|Primary}}</nowiki>; | |||
<br><br> | |||
Таким образом, при использовании шаблона, вам достаточно ввести в поле <b>Color</b> нужный цвет, примерно вот так:<br> | |||
<code><nowiki>{| Имя шаблона | Text = Тестовый текст | Color = Security |}</nowiki></code> | |||
<br><br> | |||
У каждого цвета имеется 2 дополнительные вариации, и 3 цвета текста:<br><br> | |||
<b>Opaque</b> - Непрозрачный. Используется в основном у обводки (border)<br> | |||
<b>Primary</b> - Слегка прозрачный. Основной цвет на котором текст<br> | |||
<b>Secondary</b> - Полу-прозрачный. Дополнительный цвет, используется как правило в качестве фона<br> | |||
<b>Static Text</b> - Статичный цвет. НЕ меняется в зависимости от темы, всегда один и тот же<br> | |||
<b>Dynamic Text</b> - Динамичный цвет. Меняется в зависимости от темы, на тёмной - белый, на светлой - чёрный<br> | |||
<b>Link Text</b> - Цвет ссылки, такой же как у обычных гиперссылок<br> | |||
<br> | |||
Цвета текста, использовать ТОЛЬКО для текста! Например:<br> | |||
<code>color: <nowiki>{{ColorPalette|{{{Color}}}|Static Text}}</nowiki>;</code> | |||
<br><br> | |||
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо <b>Primary</b><br> | |||
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.<br> | |||
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы. | |||
= Имеющиеся цвета = | |||
Ниже перечислен список всех имеющихся на данный момент цветов. С фоном <b>Primary</b>, обводкой <b>Opaque</b> и цветом текста <b>Static</b>.<br> | |||
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает. | |||
<br> | |||
<div style="display: block; font-weight: bold; text-align: center; column-count: 3; column-gap: 0.5em;"> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Civilian}}; color: {{ColorPalette|Civilian|Static Text}}; border: 1px solid {{ColorPalette|Civilian|Opaque}}">Civilian</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Medical}}; color: {{ColorPalette|Medical|Static Text}}; border: 1px solid {{ColorPalette|Medical|Opaque}}">Medical</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Supply}}; color: {{ColorPalette|Supply|Static Text}}; border: 1px solid {{ColorPalette|Supply|Opaque}}">Supply</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Science}}; color: {{ColorPalette|Science|Static Text}}; border: 1px solid {{ColorPalette|Science|Opaque}}">Science</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Engineering}}; color: {{ColorPalette|Engineering|Static Text}}; border: 1px solid {{ColorPalette|Engineering|Opaque}}">Engineering</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Security}}; color: {{ColorPalette|Security|Static Text}}; border: 1px solid {{ColorPalette|Security|Opaque}}">Security</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Antag}}; color: {{ColorPalette|Antag|Static Text}}; border: 1px solid {{ColorPalette|Antag|Opaque}}">Antag</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Legal}}; color: {{ColorPalette|Legal|Static Text}}; border: 1px solid {{ColorPalette|Legal|Opaque}}">Legal</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Command}}; color: {{ColorPalette|Command|Static Text}}; border: 1px solid {{ColorPalette|Command|Opaque}}">Command</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Synthetic}}; color: {{ColorPalette|Synthetic|Static Text}}; border: 1px solid {{ColorPalette|Synthetic|Opaque}}">Synthetic</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|CentComm}}; color: {{ColorPalette|CentComm|Static Text}}; border: 1px solid {{ColorPalette|CentComm|Opaque}}">CentComm</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Special}}; color: {{ColorPalette|Special|Static Text}}; border: 1px solid {{ColorPalette|Special|Opaque}}">Special</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Cyan}}; color: {{ColorPalette|Cyan|Static Text}}; border: 1px solid {{ColorPalette|Cyan|Opaque}}">Cyan</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Blue}}; color: {{ColorPalette|Blue|Static Text}}; border: 1px solid {{ColorPalette|Blue|Opaque}}">Blue</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Green}}; color: {{ColorPalette|Green|Static Text}}; border: 1px solid {{ColorPalette|Green|Opaque}}">Green</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Yellow}}; color: {{ColorPalette|Yellow|Static Text}}; border: 1px solid {{ColorPalette|Yellow|Opaque}}">Yellow</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Red}}; color: {{ColorPalette|Red|Static Text}}; border: 1px solid {{ColorPalette|Red|Opaque}}">Red</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Pink}}; color: {{ColorPalette|Pink|Static Text}}; border: 1px solid {{ColorPalette|Pink|Opaque}}">Pink</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Brown}}; color: {{ColorPalette|Brown|Static Text}}; border: 1px solid {{ColorPalette|Brown|Opaque}}">Brown</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette|Black}}; color: {{ColorPalette|Black|Static Text}}; border: 1px solid {{ColorPalette|Black|Opaque}}">Black</div> | |||
<div style="margin-bottom: 0.5em; background-color: {{ColorPalette}}; color: {{ColorPalette||Static Text}}; border: 1px solid {{ColorPalette||Opaque}}">Default (Gray)</div> | |||
</div> |
Версия от 23:25, 11 мая 2024
Что это?
Это гибкая палитра цветов, сделанная специально для WIKI.
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами.
В чём её преимущество?
В том что она, при использовании, вставляет CSS переменную.
Например, когда вы пишите {{ColorPalette|Cyan|Primary}}
Оно возвращает:
var(--cyan-primary)
Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета.
С какой целью это сделано?
В первую очередь ради возможности сделать 2 темы: светлую и тёмную.
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли?
НАСТОЯТЕЛЬНО рекомендуется использовать ТОЛЬКО шаблон ColorPalette, если вы хотите разукрасить свой шаблон.
В противном случае, он может быть нечитабельным на противоположной теме.
Как использовать?
Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:
background-color: {{ColorPalette|{{{Color}}}|Primary}};
Таким образом, при использовании шаблона, вам достаточно ввести в поле Color нужный цвет, примерно вот так:
{| Имя шаблона | Text = Тестовый текст | Color = Security |}
У каждого цвета имеется 2 дополнительные вариации, и 3 цвета текста:
Opaque - Непрозрачный. Используется в основном у обводки (border)
Primary - Слегка прозрачный. Основной цвет на котором текст
Secondary - Полу-прозрачный. Дополнительный цвет, используется как правило в качестве фона
Static Text - Статичный цвет. НЕ меняется в зависимости от темы, всегда один и тот же
Dynamic Text - Динамичный цвет. Меняется в зависимости от темы, на тёмной - белый, на светлой - чёрный
Link Text - Цвет ссылки, такой же как у обычных гиперссылок
Цвета текста, использовать ТОЛЬКО для текста! Например:
color: {{ColorPalette|{{{Color}}}|Static Text}};
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо Primary
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.
Имеющиеся цвета
Ниже перечислен список всех имеющихся на данный момент цветов. С фоном Primary, обводкой Opaque и цветом текста Static.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.