Шаблон:ColorPalette: различия между версиями

(Гуйд)
Нет описания правки
Метка: отменено
Строка 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.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.

Civilian
Medical
Supply
Science
Engineering
Security
Antag
Legal
Command
Synthetic
CentComm
Special
Cyan
Blue
Green
Yellow
Red
Pink
Brown
Black
Default (Gray)