Открыть поиск
Открыть меню
58
2,1 тыс.
79
6,6 тыс.
Celadon | Wiki Shiptest
Переключить меню настроек
Открыть персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

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

Материал из Celadon | Wiki Shiptest
Дополнительные действия
← Предыдущая правкаСледующая правка →
ВизуальныйВики-текст
мНет описания правки
Обновлена страница палитры цветов под новый формат, с примерами внедрения переменных из таблицы в шаблонах и стилях.
Строка 1: Строка 1:
<includeonly>{{#switch: {{{1}}}
<includeonly>{{#switch: {{{1}}}
| NT =  
| Red =
  {{#switch: {{{2|Primary}}}
{{#switch: {{{2|Primary}}}
  | Border        = rgba(26, 35, 77, 0.7)
| Opaque = var(--red-opaque)
  | Primary Bold  = rgba(40, 54, 116, 0.8)
| Primary = var(--red-primary)
  | Primary        = rgba(55, 85, 184, 0.6)
| Secondary = var(--red-secondary)
  | Secondary     = rgba(222, 235, 249, 0.5)
| Light = var(--red-light)
  | Text          = rgba(255, 255, 255, 0.9)
| Transparent = var(--red-transparent)
  | Text Black    = rgba(0, 0, 0, 0.9)
}}
  | Text White    = rgba(255, 255, 255, 0.95)
| Blue =
  | Header        = rgba(255, 255, 255, 0.9)
{{#switch: {{{2|Primary}}}
  | Header Black  = rgba(0, 0, 0, 0.9)
| Opaque = var(--blue-opaque)
  | Header White  = rgba(255, 255, 255, 0.95)
| Primary = var(--blue-primary)
  | Link Text      = rgba(5, 10, 84, 0.8)
| Secondary = var(--blue-secondary)
  }}
| Light = var(--blue-light)
| INDEPENDENT =  
| Transparent = var(--blue-transparent)
  {{#switch: {{{2|Primary}}}
}}
  | Border        = rgba(153, 153, 153, 0.7)
| Green =
  | Primary Bold  = rgba(127, 127, 127, 0.8)
{{#switch: {{{2|Primary}}}
  | Primary        = rgba(229, 229, 229, 0.6)
| Opaque = var(--green-opaque)
  | Secondary     = rgba(242, 242, 242, 0.5)
| Primary = var(--green-primary)
  | Text          = rgba(0, 0, 0, 0.9)
| Secondary = var(--green-secondary)
  | Text Black    = rgba(0, 0, 0, 0.9)
| Light = var(--green-light)
  | Text White    = rgba(255, 255, 255, 0.95)
| Transparent = var(--green-transparent)
  | Header        = rgba(0, 0, 0, 0.9)
}}
  | Header Black  = rgba(0, 0, 0, 0.9)
| Yellow =
  | Header White  = rgba(255, 255, 255, 0.95)
{{#switch: {{{2|Primary}}}
  | Link Text      = rgba(5, 10, 84, 0.8)
| Opaque = var(--yellow-opaque)
  }}
| Primary = var(--yellow-primary)
| SYNDICATE =  
| Secondary = var(--yellow-secondary)
  {{#switch: {{{2|Primary}}}
| Light = var(--yellow-light)
  | Border        = rgba(191, 19, 19, 0.7)
| Transparent = var(--yellow-transparent)
  | Primary Bold  = rgba(191, 38, 38, 0.9)
}}
  | Primary        = rgba(191, 76, 76, 0.6)
| Cyan =
  | Secondary     = rgba(242, 242, 242, 0.5)
{{#switch: {{{2|Primary}}}
  | Text          = rgba(255, 255, 255, 0.9)
| Opaque = var(--cyan-opaque)
  | Text Black    = rgba(0, 0, 0, 0.9)
| Primary = var(--cyan-primary)
  | Text White    = rgba(255, 255, 255, 0.95)
| Secondary = var(--cyan-secondary)
  | Header        = rgba(255, 255, 255, 0.9)
| Light = var(--cyan-light)
  | Header Black  = rgba(0, 0, 0, 0.9)
| Transparent = var(--cyan-transparent)
  | Header White  = rgba(255, 255, 255, 0.9)
}}
  | Link Text      = rgba(5, 10, 84, 0.8)
| Pink =
  }}
{{#switch: {{{2|Primary}}}
| INTEQ =  
| Opaque = var(--pink-opaque)
  {{#switch: {{{2|Primary}}}
| Primary = var(--pink-primary)
  | Border        = rgba(122, 69, 12, 0.7)
| Secondary = var(--pink-secondary)
  | Primary Bold  = rgba(124, 76, 24, 0.9)
| Light = var(--pink-light)
  | Primary       = rgba(119, 85, 47, 0.6)
| Transparent = var(--pink-transparent)
  | Secondary     = rgba(249, 234, 220, 0.5)
}}
  | Text          = rgba(255, 186, 76, 0.9)
| Black =
  | Text Black    = rgba(0, 0, 0, 0.9)
{{#switch: {{{2|Primary}}}
  | Text White    = rgba(255, 255, 255, 0.95)
| Opaque = var(--black-opaque)
  | Header        = rgba(255, 186, 76, 0.9)
| Primary = var(--black-primary)
  | Header Black  = rgba(0, 0, 0, 0.9)
| Secondary = var(--black-secondary)
  | Header White  = rgba(255, 255, 255, 0.9)
| Light = var(--black-light)
  | Link Text      = rgba(255, 186, 76, 0.8)
| Transparent = var(--black-transparent)
  }}
}}
| SF =  
| Gray =
  {{#switch: {{{2|Primary}}}
{{#switch: {{{2|Primary}}}
  | Border        = rgba(204, 136, 0, 0.7)
| Opaque = var(--gray-opaque)
  | Primary Bold  = rgba(229, 158, 31, 0.9)
| Primary = var(--gray-primary)
  | Primary       = rgba(255, 186, 76, 0.6)
| Secondary = var(--gray-secondary)
  | Secondary     = rgba(242, 233, 222, 0.5)
| Light = var(--gray-light)
  | Text          = rgba(0, 0, 0, 0.9)
| Transparent = var(--gray-transparent)
  | Text Black    = rgba(0, 0, 0, 0.9)
}}
  | Text White    = rgba(255, 255, 255, 0.95)
| White = var(--color-white)
  | Header        = rgba(0, 0, 0, 0.9)
| Black-Solid = var(--color-black)
  | Header Black  = rgba(0, 0, 0, 0.9)
| Text-Light = var(--color-text-light)
  | Header White  = rgba(255, 255, 255, 0.8)
| Text-Dark = var(--color-text-dark)
  | Link Text      = rgba(6, 69, 173, 0.8)
  }}
| SEPARATISTS =  
  {{#switch: {{{2|Primary}}}
  | Border        = rgba(15, 150, 26, 0.7)
  | Primary Bold  = rgba(42, 150, 51, 0.9)
  | Primary       = rgba(101, 179, 108, 0.6)
  | Secondary     = rgba(235, 242, 236, 0.5)
  | Text          = rgba(255, 255, 255, 0.9)
  | Text Black    = rgba(0, 0, 0, 0.9)
  | Text White    = rgba(255, 255, 255, 0.95)
  | Header        = rgba(255, 255, 255, 0.9)
  | Header Black  = rgba(0, 0, 0, 0.9)
  | Header White  = rgba(255, 255, 255, 0.8)
  | Link Text      = rgba(5, 10, 84, 0.8)
  }}
| PIRATE =  
  {{#switch: {{{2|Primary}}}
  | Border        = rgba(22, 2, 2, 0.7)
  | Primary Bold  = rgba(25, 5, 5, 0.9)
  | Primary       = rgba(76, 30, 30, 0.6)
  | Secondary     = rgba(250, 234, 234, 0.5)
  | Text          = rgba(0, 187, 255, 0.9)
  | Text Black    = rgba(0, 0, 0, 0.9)
  | Text White    = rgba(255, 255, 255, 0.95)
  | Header        = rgba(216, 10, 10, 0.9)
  | Header Black  = rgba(0, 0, 0, 0.9)
  | Header White  = rgba(255, 255, 255, 0.8)
  | Link Text      = rgba(5, 10, 84, 0.8)
  }}
| Engineering =
  {{#switch: {{{2|Primary}}}
  | Primary Bold  = rgba(255, 165, 0, 0.8)
  | Primary       = rgba(255, 170, 25, 0.8)
  | Secondary     = rgba(255, 186, 76, 0.7)
  | Tertiary      = rgba(255, 193, 102, 0.6)
  | Light          = rgba(204, 192, 177, 0.5)
  | Very Light     = rgba(242, 233, 222, 0.4)
  | Header Text    = rgba(0, 0, 0, 0.9)
  | Secondary Text = rgba(0, 0, 0, 0.8)
  | Link Text      = rgba(0, 0, 128, 0.8)
  }}
|
  {{#switch: {{{2|Primary}}}
  | Border        = rgba(153, 153, 153, 0.7)
  | Primary Bold  = rgba(153, 153, 153, 0.8)
  | Primary        = rgba(127, 127, 127, 0.7)
  | Secondary      = rgba(127, 127, 127, 0.6)
  | Text          = rgba(0, 0, 0, 0.9)
  | Text Black     = rgba(0, 0, 0, 0.9)
  | Text White    = rgba(255, 255, 255, 0.95)
  | Header        = rgba(0, 0, 0, 0.9)
  | Header Black  = rgba(0, 0, 0, 0.9)
  | Header White  = rgba(255, 255, 255, 0.95)
  | Link Text     = rgba(5, 10, 84, 0.8)
  }}
}}</includeonly><noinclude>
}}</includeonly><noinclude>
<div style="display: flex; flex-wrap: wrap; text-align: center;">
 
{{ColorPalettePreview|NT}}
= Что это? =
{{ColorPalettePreview|INDEPENDENT}}
Палитра цветов, упрощает разработку редакторам вики и приводит все используемые в шаблонах цвета к единой форме, от чего вид страниц становится более лаконичным и приятным глазу, а в самом коде становится удобнее ориентироваться, за счёт упрощённой читаемости.
{{ColorPalettePreview|SYNDICATE}}
 
{{ColorPalettePreview|INTEQ}}
=== Преимущества ===
{{ColorPalettePreview|SF}}
* Внедряет CSS-переменные вместо хардкода цветов.
{{ColorPalettePreview|SEPARATISTS}}
* Поддерживает светлую и тёмную темы автоматически.
{{ColorPalettePreview|PIRATE}}
* Имеет более простую и читаемую структуру.
{{ColorPalettePreview|Engineering}}
 
=== Как использовать? ===
 
'''В шаблонах:'''
<pre>
background-color: {{ColorPalette|Red|Primary}};
border: 1px solid {{ColorPalette|Blue|Opaque}};
color: {{ColorPalette|Text-Dark}};
</pre>
 
'''Пример вызова:'''
 
Для вызова в шаблонах: <code><nowiki>{{ColorPalette|Cyan|Light}}</nowiki></code>
 
Вызов происходит в формате: <code><nowiki>{Имя шаблона|Цвет|Вариация}</nowiki></code>
 
Также вариант для вызова в стилях: <code><nowiki>var(--cyan-light)</nowiki></code>
 
=== Вариации цветов ===
 
У каждого цвета есть 5 вариаций прозрачности:
 
* '''Opaque''' - Непрозрачный (alpha: 1.0). Для обводки (border).
* '''Primary''' - Основной (alpha: 0.8). Для фона с текстом.
* '''Secondary''' - Вторичный (alpha: 0.5). Дополнительный цвет.
* '''Light''' - Светлый (alpha: 0.2). Прозрачный фон.
* '''Transparent''' - Прозрачный (alpha: 0.1). Едва заметный фон.
 
=== Цвета для текста ===
 
Для покраски текста рекомендуется использовать следующие цвета:
* '''White''' - Белый цвет
* '''Black-Solid''' - Чёрный цвет
* '''Text-Light''' - Светлый текст (для тёмного фона)
* '''Text-Dark''' - Тёмный текст (для светлого фона)
 
= Таблица доступных цветов =
 
<div style="display: flex; flex-wrap: wrap; gap: 10px; text-align: center;">
 
<div style="width: 150px;">
'''Red (Красный)'''
<div style="background-color: {{ColorPalette|Red|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Red|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Red|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Red|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Red|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
</div>
[[Категория:Шаблоны]]</noinclude>
 
<div style="width: 150px;">
'''Blue (Синий)'''
<div style="background-color: {{ColorPalette|Blue|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Blue|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Blue|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Blue|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Blue|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Green (Зелёный)'''
<div style="background-color: {{ColorPalette|Green|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Green|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Green|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Green|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Green|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Yellow (Жёлтый)'''
<div style="background-color: {{ColorPalette|Yellow|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Yellow|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Yellow|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Yellow|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Yellow|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Cyan (Голубой)'''
<div style="background-color: {{ColorPalette|Cyan|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Cyan|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Cyan|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Cyan|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Cyan|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Pink (Розовый)'''
<div style="background-color: {{ColorPalette|Pink|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Pink|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Pink|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Pink|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Pink|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Black (Чёрный)'''
<div style="background-color: {{ColorPalette|Black|Opaque}}; color: white; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Black|Primary}}; color: white; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Black|Secondary}}; color: white; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Black|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Black|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
<div style="width: 150px;">
'''Gray (Серый)'''
<div style="background-color: {{ColorPalette|Gray|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
<div style="background-color: {{ColorPalette|Gray|Primary}}; padding: 10px; margin: 2px;">Primary</div>
<div style="background-color: {{ColorPalette|Gray|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
<div style="background-color: {{ColorPalette|Gray|Light}}; padding: 10px; margin: 2px;">Light</div>
<div style="background-color: {{ColorPalette|Gray|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
</div>
 
</div>
 
=== Примеры использования ===
 
'''Простой цветной блок:'''
<pre>
<div style="background-color: {{ColorPalette|Blue|Primary}}; color: {{ColorPalette|Text-Light}}; padding: 10px;">
  Клоун, прекрати разбрасывать банановую кожуру офицерам под ноги!
</div>
</pre>
 
'''Таблица с цветами:'''
<pre>
{| style="border: 2px solid {{ColorPalette|Red|Opaque}};"
! style="background-color: {{ColorPalette|Red|Primary}};" | Заголовок
|-
| style="background-color: {{ColorPalette|Red|Light}};" | Содержимое
|}
</pre>
 
[[Категория:Шаблоны]]
[[Категория:Цветовые схемы]]
</noinclude>

Версия от 02:19, 30 декабря 2025


Что это?

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

Преимущества

  • Внедряет CSS-переменные вместо хардкода цветов.
  • Поддерживает светлую и тёмную темы автоматически.
  • Имеет более простую и читаемую структуру.

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

В шаблонах: 

background-color: {{ColorPalette|Red|Primary}};
border: 1px solid {{ColorPalette|Blue|Opaque}};
color: {{ColorPalette|Text-Dark}};

Пример вызова:

Для вызова в шаблонах: {{ColorPalette|Cyan|Light}}

Вызов происходит в формате: {Имя шаблона|Цвет|Вариация}

Также вариант для вызова в стилях: var(--cyan-light)

Вариации цветов

У каждого цвета есть 5 вариаций прозрачности:

  • Opaque - Непрозрачный (alpha: 1.0). Для обводки (border).
  • Primary - Основной (alpha: 0.8). Для фона с текстом.
  • Secondary - Вторичный (alpha: 0.5). Дополнительный цвет.
  • Light - Светлый (alpha: 0.2). Прозрачный фон.
  • Transparent - Прозрачный (alpha: 0.1). Едва заметный фон.

Цвета для текста

Для покраски текста рекомендуется использовать следующие цвета:

  • White - Белый цвет
  • Black-Solid - Чёрный цвет
  • Text-Light - Светлый текст (для тёмного фона)
  • Text-Dark - Тёмный текст (для светлого фона)

Таблица доступных цветов

Red (Красный)

Opaque
Primary
Secondary
Light
Transparent

Blue (Синий)

Opaque
Primary
Secondary
Light
Transparent

Green (Зелёный)

Opaque
Primary
Secondary
Light
Transparent

Yellow (Жёлтый)

Opaque
Primary
Secondary
Light
Transparent

Cyan (Голубой)

Opaque
Primary
Secondary
Light
Transparent

Pink (Розовый)

Opaque
Primary
Secondary
Light
Transparent

Black (Чёрный)

Opaque
Primary
Secondary
Light
Transparent

Gray (Серый)

Opaque
Primary
Secondary
Light
Transparent

Примеры использования

Простой цветной блок: 

<div style="background-color: {{ColorPalette|Blue|Primary}}; color: {{ColorPalette|Text-Light}}; padding: 10px;">
  Клоун, прекрати разбрасывать банановую кожуру офицерам под ноги!
</div>

Таблица с цветами: 

{| style="border: 2px solid {{ColorPalette|Red|Opaque}};"
! style="background-color: {{ColorPalette|Red|Primary}};" | Заголовок
|-
| style="background-color: {{ColorPalette|Red|Light}};" | Содержимое
|}
Источник — https://wiki.celadon.pro/index.php?title=Шаблон:ПалитраЦветов&oldid=6544