Шаблон:ColorPalette: различия между версиями
Aylong (обсуждение | вклад) (Гуйд) |
Aylong (обсуждение | вклад) Нет описания правки Метка: отменено |
||
Строка 8: | Строка 8: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Medical = | | Medical = | ||
Строка 17: | Строка 17: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Supply = | | Supply = | ||
Строка 26: | Строка 26: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Science = | | Science = | ||
Строка 35: | Строка 35: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Engineering = | | Engineering = | ||
Строка 44: | Строка 44: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Security = | | Security = | ||
Строка 53: | Строка 53: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Antag = | | Antag = | ||
Строка 62: | Строка 62: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Legal = | | Legal = | ||
Строка 71: | Строка 71: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Command = | | Command = | ||
Строка 80: | Строка 80: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Synthetic = | | Synthetic = | ||
Строка 89: | Строка 89: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| CentComm = | | CentComm = | ||
Строка 98: | Строка 98: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Special = | | Special = | ||
Строка 107: | Строка 107: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Cyan = | | Cyan = | ||
Строка 116: | Строка 116: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Blue = | | Blue = | ||
Строка 125: | Строка 125: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Green = | | Green = | ||
Строка 134: | Строка 134: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Yellow = | | Yellow = | ||
Строка 143: | Строка 143: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Red = | | Red = | ||
Строка 152: | Строка 152: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Pink = | | Pink = | ||
Строка 161: | Строка 161: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Brown = | | Brown = | ||
Строка 170: | Строка 170: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| Black = | | Black = | ||
Строка 179: | Строка 179: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
| | | | ||
Строка 188: | Строка 188: | ||
| Static Text = var(--color-text-static-white) | | Static Text = var(--color-text-static-white) | ||
| Dynamic Text = var(--color-text-darker) | | Dynamic Text = var(--color-text-darker) | ||
| Link Text = var(--color-hyperlink) | | Link Text = var(--color-hyperlink) !important | ||
}} | }} | ||
}} | }} |
Версия от 23:32, 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.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.