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

(Откат)
Метка: отмена
мНет описания правки
 
(не показано 25 промежуточных версий 3 участников)
Строка 1: Строка 1:
{{#switch: {{{1}}}
<includeonly>{{#switch: {{{1}}}
| Civilian =  
| Civilian =
  {{#switch: {{{2|Primary}}}
{{#switch: {{{2|Primary}}}
  | Primary Bold  = var(--palette-civ-primary-bold)
| Opaque = var(--civilian-opaque)
  | Primary       = var(--palette-civ-primary)
| Primary = var(--civilian-primary)
  | Secondary     = var(--palette-civ-secondary)
| Secondary = var(--civilian-secondary)
  | Tertiary      = var(--palette-civ-tertiary)
| Light = var(--civilian-light)
  | Light         = var(--palette-civ-light)
| Transparent = var(--civilian-transparent)
  | Very Light    = var(--palette-civ-very-light)
}}
  | Header Text    = var(--color-text)
| Medical =
  | Secondary Text = var(--color-text-darker)
{{#switch: {{{2|Primary}}}
  | Link Text      = var(--color-hyperlink)
| Opaque = var(--medical-opaque)
  }}
| Primary = var(--medical-primary)
| Engineering & Requisitions=
| Secondary = var(--medical-secondary)
  {{#switch: {{{2|Primary}}}
| Light = var(--medical-light)
  | Primary Bold  = var(--palette-eng-primary-bold)
| Transparent = var(--medical-transparent)
  | Primary       = var(--palette-eng-primary)
}}
  | Secondary     = var(--palette-eng-secondary)
| Supply =
  | Tertiary      = var(--palette-eng-tertiary)
{{#switch: {{{2|Primary}}}
  | Light         = var(--palette-eng-light)
| Opaque = var(--supply-opaque)
  | Very Light    = var(--palette-eng-very-light)
| Primary = var(--supply-primary)
  | Header Text    = var(--color-text)
| Secondary = var(--supply-secondary)
  | Secondary Text = var(--color-text-darker)
| Light = var(--supply-light)
  | Link Text      = var(--color-hyperlink)
| Transparent = var(--supply-transparent)
  }}
}}
| Command =  
| Science =
  {{#switch: {{{2|Primary}}}
{{#switch: {{{2|Primary}}}
  | Primary Bold  = var(--palette-comm-primary-bold)
| Opaque = var(--science-opaque)
  | Primary       = var(--palette-comm-primary)
| Primary = var(--science-primary)
  | Secondary     = var(--palette-comm-secondary)
| Secondary = var(--science-secondary)
  | Tertiary      = var(--palette-comm-tertiary)
| Light = var(--science-light)
  | Light         = var(--palette-comm-light)
| Transparent = var(--science-transparent)
  | Very Light    = var(--palette-comm-very-light)
}}
  | Header Text    = var(--color-text)
| Engineering =
  | Secondary Text = var(--color-text-darker)
{{#switch: {{{2|Primary}}}
  | Link Text      = var(--color-hyperlink)
| Opaque = var(--engineer-opaque)
  }}
| Primary = var(--engineer-primary)
| Medical =  
| Secondary = var(--engineer-secondary)
  {{#switch: {{{2|Primary}}}
| Light = var(--engineer-light)
  | Primary Bold  = var(--palette-med-primary-bold)
| Transparent = var(--engineer-transparent)
  | Primary       = var(--palette-med-primary)
}}
  | Secondary     = var(--palette-med-secondary)
| Security =
  | Tertiary      = var(--palette-med-tertiary)
{{#switch: {{{2|Primary}}}
  | Light         = var(--palette-med-light)
| Opaque = var(--security-opaque)
  | Very Light    = var(--palette-med-very-light)
| Primary = var(--security-primary)
  | Header Text    = var(--color-text)
| Secondary = var(--security-secondary)
  | Secondary Text = var(--color-text-darker)
| Light = var(--security-light)
  | Link Text      = var(--color-hyperlink)
| Transparent = var(--security-transparent)
  }}
}}
| Synthetic =  
| Antag =
  {{#switch: {{{2|Primary}}}  
{{#switch: {{{2|Primary}}}
  | Primary Bold  = var(--palette-synth-primary-bold)
| Opaque = var(--antag-opaque)
  | Primary        = var(--palette-synth-primary)
| Primary = var(--antag-primary)
  | Secondary      = var(--palette-synth-secondary)
| Secondary = var(--antag-secondary)
  | Tertiary      = var(--palette-synth-tertiary)
| Light = var(--antag-light)
  | Light         = var(--palette-synth-light)
| Transparent = var(--antag-transparent)
  | Very Light    = var(--palette-synth-very-light)
}}
  | Header Text    = var(--color-text)
| Legal =
  | Secondary Text = var(--color-text-darker)
{{#switch: {{{2|Primary}}}
  | Link Text      = var(--color-hyperlink)
| Opaque = var(--legal-opaque)
  }}
| Primary = var(--legal-primary)
| Xenomorph =  
| Secondary = var(--legal-secondary)
  {{#switch: {{{2|Primary}}}  
| Light = var(--legal-light)
  | Primary Bold  = var(--palette-xeno-primary-bold)
| Transparent = var(--legal-transparent)
  | Primary       = var(--palette-xeno-primary)
}}
  | Secondary     = var(--palette-xeno-secondary)
| Command =
  | Tertiary      = var(--palette-xeno-tertiary)
{{#switch: {{{2|Primary}}}
  | Light          = var(--palette-xeno-light)
| Opaque = var(--command-opaque)
  | Very Light     = var(--palette-xeno-very-light)
| Primary = var(--command-primary)
  | Header Text    = var(--color-text)
| Secondary = var(--command-secondary)
  | Secondary Text = var(--color-text-darker)
| Light = var(--command-light)
  | Link Text      = var(--color-hyperlink)
| Transparent = var(--command-transparent)
  }}
}}
| Marine =  
| Synthetic =
  {{#switch: {{{2|Primary}}}  
{{#switch: {{{2|Primary}}}
  | Primary Bold  = var(--palette-cc-primary-bold)
| Opaque = var(--synthetic-opaque)
  | Primary        = var(--palette-cc-primary)
| Primary = var(--synthetic-primary)
  | Secondary      = var(--palette-cc-secondary)
| Secondary = var(--synthetic-secondary)
  | Tertiary      = var(--palette-cc-tertiary)
| Light = var(--synthetic-light)
  | Light         = var(--palette-cc-light)
| Transparent = var(--synthetic-transparent)
  | Very Light    = var(--palette-cc-very-light)
}}
  | Header Text    = var(--color-text)
| CentCom =
  | Secondary Text = var(--color-text-darker)
{{#switch: {{{2|Primary}}}
  | Link Text      = var(--color-hyperlink)
| Opaque = var(--centcom-opaque)
  }}
| Primary = var(--centcom-primary)
| Secondary = var(--centcom-secondary)
| Light = var(--centcom-light)
| Transparent = var(--centcom-transparent)
}}
| Special =
{{#switch: {{{2|Primary}}}
| Opaque = var(--special-opaque)
| Primary = var(--special-primary)
| Secondary = var(--special-secondary)
| Light = var(--special-light)
| Transparent = var(--special-transparent)
}}
| Cyan =
{{#switch: {{{2|Primary}}}
| Opaque = var(--cyan-opaque)
| Primary = var(--cyan-primary)
| Secondary = var(--cyan-secondary)
| Light = var(--cyan-light)
| Transparent = var(--cyan-transparent)
}}
| Blue =
{{#switch: {{{2|Primary}}}
| Opaque = var(--blue-opaque)
| Primary = var(--blue-primary)
| Secondary = var(--blue-secondary)
| Light = var(--blue-light)
| Transparent = var(--blue-transparent)
}}
| Green =
{{#switch: {{{2|Primary}}}
| Opaque = var(--green-opaque)
| Primary = var(--green-primary)
| Secondary = var(--green-secondary)
| Light = var(--green-light)
| Transparent = var(--green-transparent)
}}
| Yellow =
{{#switch: {{{2|Primary}}}
| Opaque = var(--yellow-opaque)
| Primary = var(--yellow-primary)
| Secondary = var(--yellow-secondary)
| Light = var(--yellow-light)
| Transparent = var(--yellow-transparent)
}}
| Red =
{{#switch: {{{2|Primary}}}
| Opaque = var(--red-opaque)
| Primary = var(--red-primary)
| Secondary = var(--red-secondary)
| Light = var(--red-light)
| Transparent = var(--red-transparent)
}}
| Pink =
{{#switch: {{{2|Primary}}}
| Opaque = var(--pink-opaque)
| Primary = var(--pink-primary)
| Secondary = var(--pink-secondary)
| Light = var(--pink-light)
| Transparent = var(--pink-transparent)
}}
| Brown =
{{#switch: {{{2|Primary}}}
| Opaque = var(--brown-opaque)
| Primary = var(--brown-primary)
| Secondary = var(--brown-secondary)
| Light = var(--brown-light)
| Transparent = var(--brown-transparent)
}}
| Lavaland =
{{#switch: {{{2|Primary}}}
| Opaque = var(--lavaland-opaque)
| Primary = var(--lavaland-primary)
| Secondary = var(--lavaland-secondary)
| Light = var(--lavaland-light)
| Transparent = var(--lavaland-transparent)
}}
| Cultist =
{{#switch: {{{2|Primary}}}
| Opaque = var(--cult-opaque)
| Primary = var(--cult-primary)
| Secondary = var(--cult-secondary)
| Light = var(--cult-light)
| Transparent = var(--cult-transparent)
}}
| Ratvar =
{{#switch: {{{2|Primary}}}
| Opaque = var(--ratvar-opaque)
| Primary = var(--ratvar-primary)
| Secondary = var(--ratvar-secondary)
| Light = var(--ratvar-light)
| Transparent = var(--ratvar-transparent)
}}
| Wizard =
{{#switch: {{{2|Primary}}}
| Opaque = var(--wizard-opaque)
| Primary = var(--wizard-primary)
| Secondary = var(--wizard-secondary)
| Light = var(--wizard-light)
| Transparent = var(--wizard-transparent)
}}
| Black =
{{#switch: {{{2|Primary}}}
| Opaque = var(--black-opaque)
| Primary = var(--black-primary)
| Secondary = var(--black-secondary)
| Light = var(--black-light)
| Transparent = var(--black-transparent)
}}
| Gray =
{{#switch: {{{2|Primary}}}
| Opaque = var(--gray-opaque)
| Primary = var(--gray-primary)
| Secondary = var(--gray-secondary)
| Light = var(--gray-light)
| Transparent = var(--gray-transparent)
}}
|
|
  {{#switch: {{{2|Primary}}}
{{#switch: {{{2|Primary}}}
  | Primary Bold  = var(--palette-primary-bold)
| Opaque = hsl(var(--primary-hue), 40%, var(--primary-lightness))
  | Primary       = var(--palette-primary)
| Primary = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75)
  | Secondary      = var(--palette-secondary)
| Secondary = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5)
  | Tertiary      = var(--palette-tertiary)
| Light = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25)
  | Light          = var(--palette-light)
| Transparent = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1)
  | Very Light     = var(--palette-very-light)
  | Header Text    = var(--color-text)
  | Secondary Text = var(--color-text-darker)
  | Link Text      = var(--color-hyperlink)
  }}
}}
}}
}}</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>
У каждого цвета имеется несколько вариация, они же оттенки:<br><br>
<b>Opaque</b> - Непрозрачный. Используется в основном у обводки (border)<br>
<b>Primary</b> - Слегка прозрачный. Основной цвет на котором текст<br>
<b>Secondary</b> - Дополнительный цвет, чуть прозрачнее чем основной<br>
<b>Light</b> - Прозрачный цвет, можно использовать в качестве дополнительного фона<br>
<b>Transparent</b> - Самый прозрачный из имеющихся, если быть конкретнее, то он прозрачен на 90%. Идеален для разбавления фона<br>
<br>
Использовать в стилях достаточно легко. Пример:
<code>background-color: {{ColorPalette|Security|Primary}}</code><br>
Однако, если вы хотите покрасить текст, рекомендуется использовать CSS переменные. Их список вы найдёте нажав F12 и прокрутив в самый низ. Пример:<br>
<code>color: var(--color-white);</code><br>
<code>color: var(--color-olive);</code>
<br><br>
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо <b>Primary</b><br>
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.<br>
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.
<br>
= Имеющиеся цвета =
Ниже перечислен список всех имеющихся на данный момент цветов, со всеми возможными вариациями.<br>
Цвет текста во всех динамический, зависящий от выбранной темы, так что не удивляйтесь чёрному тексту на чёрном фоне.<br>
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.<br>
<div style="display: flex; flex-wrap: wrap; text-align: center;">
{{ColorPalettePreview|Civilian}}
{{ColorPalettePreview|Medical}}
{{ColorPalettePreview|Supply}}
{{ColorPalettePreview|Science}}
{{ColorPalettePreview|Engineering}}
{{ColorPalettePreview|Security}}
{{ColorPalettePreview|Antag}}
{{ColorPalettePreview|Legal}}
{{ColorPalettePreview|Command}}
{{ColorPalettePreview|Synthetic}}
{{ColorPalettePreview|CentCom}}
{{ColorPalettePreview|Special}}
{{ColorPalettePreview|Cyan}}
{{ColorPalettePreview|Blue}}
{{ColorPalettePreview|Green}}
{{ColorPalettePreview|Yellow}}
{{ColorPalettePreview|Red}}
{{ColorPalettePreview|Pink}}
{{ColorPalettePreview|Brown}}
{{ColorPalettePreview|Lavaland}}
{{ColorPalettePreview|Cultist}}
{{ColorPalettePreview|Ratvar}}
{{ColorPalettePreview|Wizard}}
{{ColorPalettePreview|Black}}
{{ColorPalettePreview|Gray}}
{{ColorPalettePreview}}
</div>

Текущая версия от 21:25, 26 ноября 2024


Что это?

Это гибкая палитра цветов, сделанная специально для WIKI.
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами.

В чём её преимущество?

В том что она, при использовании, вставляет CSS переменную.
Например, когда вы пишите {{ColorPalette|Cyan|Primary}}
Оно возвращает: var(--cyan-primary) Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета.

С какой целью это сделано?

В первую очередь ради возможности сделать 2 темы: светлую и тёмную.
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли?

НАСТОЯТЕЛЬНО рекомендуется использовать ТОЛЬКО шаблон ColorPalette, если вы хотите разукрасить свой шаблон.
В противном случае, он может быть нечитабельным на противоположной теме.

Как использовать?

Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:
background-color: {{ColorPalette|{{{Color}}}|Primary}};

Таким образом, при использовании шаблона, вам достаточно ввести в поле Color нужный цвет, примерно вот так:
{| Имя шаблона | Text = Тестовый текст | Color = Security |}

У каждого цвета имеется несколько вариация, они же оттенки:

Opaque - Непрозрачный. Используется в основном у обводки (border)
Primary - Слегка прозрачный. Основной цвет на котором текст
Secondary - Дополнительный цвет, чуть прозрачнее чем основной
Light - Прозрачный цвет, можно использовать в качестве дополнительного фона
Transparent - Самый прозрачный из имеющихся, если быть конкретнее, то он прозрачен на 90%. Идеален для разбавления фона

Использовать в стилях достаточно легко. Пример: background-color: var(--security-primary)
Однако, если вы хотите покрасить текст, рекомендуется использовать CSS переменные. Их список вы найдёте нажав F12 и прокрутив в самый низ. Пример:
color: var(--color-white);
color: var(--color-olive);

Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо Primary
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.

Имеющиеся цвета

Ниже перечислен список всех имеющихся на данный момент цветов, со всеми возможными вариациями.
Цвет текста во всех динамический, зависящий от выбранной темы, так что не удивляйтесь чёрному тексту на чёрном фоне.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.

Civilian
Primary
Secondary
Light
Transparent
Medical
Primary
Secondary
Light
Transparent
Supply
Primary
Secondary
Light
Transparent
Science
Primary
Secondary
Light
Transparent
Engineering
Primary
Secondary
Light
Transparent
Security
Primary
Secondary
Light
Transparent
Antag
Primary
Secondary
Light
Transparent
Legal
Primary
Secondary
Light
Transparent
Command
Primary
Secondary
Light
Transparent
Synthetic
Primary
Secondary
Light
Transparent
CentCom
Primary
Secondary
Light
Transparent
Special
Primary
Secondary
Light
Transparent
Cyan
Primary
Secondary
Light
Transparent
Blue
Primary
Secondary
Light
Transparent
Green
Primary
Secondary
Light
Transparent
Yellow
Primary
Secondary
Light
Transparent
Red
Primary
Secondary
Light
Transparent
Pink
Primary
Secondary
Light
Transparent
Brown
Primary
Secondary
Light
Transparent
Lavaland
Primary
Secondary
Light
Transparent
Cultist
Primary
Secondary
Light
Transparent
Ratvar
Primary
Secondary
Light
Transparent
Wizard
Primary
Secondary
Light
Transparent
Black
Primary
Secondary
Light
Transparent
Gray
Primary
Secondary
Light
Transparent
Misc
Primary
Secondary
Light
Transparent
Источник — https://tg.ss220.club/index.php?title=Шаблон:ColorPalette&oldid=75595