Шаблон:ColorPalette: различия между версиями
Aylong (обсуждение | вклад) (Новая палитра, плюс с объяснением) |
Aylong (обсуждение | вклад) Нет описания правки |
||
| Строка 5: | Строка 5: | ||
| Primary = var(--civilian-primary) | | Primary = var(--civilian-primary) | ||
| Secondary = var(--civilian-secondary) | | Secondary = var(--civilian-secondary) | ||
| Transparent = var(--civilian-transparent) | |||
}} | }} | ||
| Medical = | | Medical = | ||
| Строка 11: | Строка 12: | ||
| Primary = var(--medical-primary) | | Primary = var(--medical-primary) | ||
| Secondary = var(--medical-secondary) | | Secondary = var(--medical-secondary) | ||
| Transparent = var(--medical-transparent) | |||
}} | }} | ||
| Supply = | | Supply = | ||
| Строка 17: | Строка 19: | ||
| Primary = var(--supply-primary) | | Primary = var(--supply-primary) | ||
| Secondary = var(--supply-secondary) | | Secondary = var(--supply-secondary) | ||
| Transparent = var(--supply-transparent) | |||
}} | }} | ||
| Science = | | Science = | ||
| Строка 23: | Строка 26: | ||
| Primary = var(--science-primary) | | Primary = var(--science-primary) | ||
| Secondary = var(--science-secondary) | | Secondary = var(--science-secondary) | ||
| Transparent = var(--science-transparent) | |||
}} | }} | ||
| Engineering = | | Engineering = | ||
| Строка 29: | Строка 33: | ||
| Primary = var(--engineer-primary) | | Primary = var(--engineer-primary) | ||
| Secondary = var(--engineer-secondary) | | Secondary = var(--engineer-secondary) | ||
| Transparent = var(--engineer-transparent) | |||
}} | }} | ||
| Security = | | Security = | ||
| Строка 35: | Строка 40: | ||
| Primary = var(--security-primary) | | Primary = var(--security-primary) | ||
| Secondary = var(--security-secondary) | | Secondary = var(--security-secondary) | ||
| Transparent = var(--security-transparent) | |||
}} | }} | ||
| Antag = | | Antag = | ||
| Строка 41: | Строка 47: | ||
| Primary = var(--antag-primary) | | Primary = var(--antag-primary) | ||
| Secondary = var(--antag-secondary) | | Secondary = var(--antag-secondary) | ||
| Transparent = var(--antag-transparent) | |||
}} | }} | ||
| Legal = | | Legal = | ||
| Строка 47: | Строка 54: | ||
| Primary = var(--legal-primary) | | Primary = var(--legal-primary) | ||
| Secondary = var(--legal-secondary) | | Secondary = var(--legal-secondary) | ||
| Transparent = var(--legal-transparent) | |||
}} | }} | ||
| Command = | | Command = | ||
| Строка 53: | Строка 61: | ||
| Primary = var(--command-primary) | | Primary = var(--command-primary) | ||
| Secondary = var(--command-secondary) | | Secondary = var(--command-secondary) | ||
| Transparent = var(--command-transparent) | |||
}} | }} | ||
| Synthetic = | | Synthetic = | ||
| Строка 59: | Строка 68: | ||
| Primary = var(--synthetic-primary) | | Primary = var(--synthetic-primary) | ||
| Secondary = var(--synthetic-secondary) | | Secondary = var(--synthetic-secondary) | ||
| Transparent = var(--synthetic-transparent) | |||
}} | }} | ||
| CentCom = | | CentCom = | ||
| Строка 65: | Строка 75: | ||
| Primary = var(--centcom-primary) | | Primary = var(--centcom-primary) | ||
| Secondary = var(--centcom-secondary) | | Secondary = var(--centcom-secondary) | ||
| Transparent = var(--centcom-transparent) | |||
}} | }} | ||
| Special = | | Special = | ||
| Строка 71: | Строка 82: | ||
| Primary = var(--special-primary) | | Primary = var(--special-primary) | ||
| Secondary = var(--special-secondary) | | Secondary = var(--special-secondary) | ||
| Transparent = var(--special-transparent) | |||
}} | }} | ||
| Cyan = | | Cyan = | ||
| Строка 77: | Строка 89: | ||
| Primary = var(--cyan-primary) | | Primary = var(--cyan-primary) | ||
| Secondary = var(--cyan-secondary) | | Secondary = var(--cyan-secondary) | ||
| Transparent = var(--cyan-transparent) | |||
}} | }} | ||
| Blue = | | Blue = | ||
| Строка 83: | Строка 96: | ||
| Primary = var(--blue-primary) | | Primary = var(--blue-primary) | ||
| Secondary = var(--blue-secondary) | | Secondary = var(--blue-secondary) | ||
| Transparent = var(--blue-transparent) | |||
}} | }} | ||
| Green = | | Green = | ||
| Строка 89: | Строка 103: | ||
| Primary = var(--green-primary) | | Primary = var(--green-primary) | ||
| Secondary = var(--green-secondary) | | Secondary = var(--green-secondary) | ||
| Transparent = var(--green-transparent) | |||
}} | }} | ||
| Yellow = | | Yellow = | ||
| Строка 95: | Строка 110: | ||
| Primary = var(--yellow-primary) | | Primary = var(--yellow-primary) | ||
| Secondary = var(--yellow-secondary) | | Secondary = var(--yellow-secondary) | ||
| Transparent = var(--yellow-transparent) | |||
}} | }} | ||
| Red = | | Red = | ||
| Строка 101: | Строка 117: | ||
| Primary = var(--red-primary) | | Primary = var(--red-primary) | ||
| Secondary = var(--red-secondary) | | Secondary = var(--red-secondary) | ||
| Transparent = var(--red-transparent) | |||
}} | }} | ||
| Pink = | | Pink = | ||
| Строка 107: | Строка 124: | ||
| Primary = var(--pink-primary) | | Primary = var(--pink-primary) | ||
| Secondary = var(--pink-secondary) | | Secondary = var(--pink-secondary) | ||
| Transparent = var(--pink-transparent) | |||
}} | }} | ||
| Brown = | | Brown = | ||
| Строка 113: | Строка 131: | ||
| Primary = var(--brown-primary) | | Primary = var(--brown-primary) | ||
| Secondary = var(--brown-secondary) | | Secondary = var(--brown-secondary) | ||
| Transparent = var(--brown-transparent) | |||
}} | |||
| Lavaland = | |||
{{#switch: {{{2|Primary}}} | |||
| Opaque = var(--lavaland-opaque) | |||
| Primary = var(--lavaland-primary) | |||
| Secondary = var(--lavaland-secondary) | |||
| Transparent = var(--lavaland-transparent) | |||
}} | |||
| Cultist = | |||
{{#switch: {{{2|Primary}}} | |||
| Opaque = var(--cult-opaque) | |||
| Primary = var(--cult-primary) | |||
| Secondary = var(--cult-secondary) | |||
| Transparent = var(--cult-transparent) | |||
}} | |||
| Ratvar = | |||
{{#switch: {{{2|Primary}}} | |||
| Opaque = var(--ratvar-opaque) | |||
| Primary = var(--ratvar-primary) | |||
| Secondary = var(--ratvar-secondary) | |||
| Transparent = var(--ratvar-transparent) | |||
}} | |||
| Wizard = | |||
{{#switch: {{{2|Primary}}} | |||
| Opaque = var(--wizard-opaque) | |||
| Primary = var(--wizard-primary) | |||
| Secondary = var(--wizard-secondary) | |||
| Transparent = var(--wizard-transparent) | |||
}} | }} | ||
| Black = | | Black = | ||
| Строка 119: | Строка 166: | ||
| Primary = var(--black-primary) | | Primary = var(--black-primary) | ||
| Secondary = var(--black-secondary) | | Secondary = var(--black-secondary) | ||
| Transparent = var(--black-transparent) | |||
}} | }} | ||
| | | | ||
| Строка 125: | Строка 173: | ||
| Primary = var(--gray-primary) | | Primary = var(--gray-primary) | ||
| Secondary = var(--gray-secondary) | | Secondary = var(--gray-secondary) | ||
| Transparent = var(--gray-transparent) | |||
}} | }} | ||
}}</includeonly><noinclude> | }}</includeonly><noinclude> | ||
Версия от 09:20, 23 мая 2024
Что это?
Это гибкая палитра цветов, сделанная специально для WIKI.
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами.
В чём её преимущество?
В том что она, при использовании, вставляет CSS переменную.
Например, когда вы пишите {{ColorPalette|Cyan|Primary}}
Оно возвращает: var(--cyan-primary)
Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета.
С какой целью это сделано?
В первую очередь ради возможности сделать 2 темы: светлую и тёмную.
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли?
НАСТОЯТЕЛЬНО рекомендуется использовать ТОЛЬКО шаблон ColorPalette, если вы хотите разукрасить свой шаблон.
В противном случае, он может быть нечитабельным на противоположной теме.
Как использовать?
Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:
background-color: {{ColorPalette|{{{Color}}}|Primary}};
Таким образом, при использовании шаблона, вам достаточно ввести в поле Color нужный цвет, примерно вот так:
{| Имя шаблона | Text = Тестовый текст | Color = Security |}
У каждого цвета имеется 2 дополнительные вариации:
Opaque - Непрозрачный. Используется в основном у обводки (border)
Primary - Слегка прозрачный. Основной цвет на котором текст
Secondary - Полу-прозрачный. Дополнительный цвет, используется как правило в качестве фона
Использовать в стилях достаточно легко. Пример:
background-color: var(--security-primary)
Однако, если вы хотите покрасить текст, рекомендуется использовать CSS переменные. Их список вы найдёте нажав F12 и прокрутив в самый низ. Пример:
color: var(--color-white);
color: var(--color-olive);
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо Primary
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.
Имеющиеся цвета
Ниже перечислен список всех имеющихся на данный момент цветов. С фоном Primary и обводкой Opaque.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.