Компонент "Квадратики"

СТОРІНКА ШАБЛОНУ

Це сторінка шаблону, який використовується у цієї Wiki.

Будь ласка, не редагуйте цю сторінку
без дозволу адміністрації сайту


Що це таке

Компонент, який відображає купу кольорових квадратів, щоб продемонструвати стиль тем CSS.

Розроблений WoedenazWoedenaz, оформлення у якості компоненту CroquemboucheCroquembouche, для Української Філії перекладено та адаптовано murzei_chaosmurzei_chaos.

Цей компонент розроблений та використовується для теми CSS, але він може бути використаним для будь-якої сторінки, якщо ви забажаєте.

Як використовувати

На будь-якій Вікі1:

[[include :scp-ukrainian:component:theme-squares -=-
| color1-name=Мій улюблений колір
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

Прошу звернути увагу на "-=-" після імені компоненту. Вам слід додати це — інакше весь текст про то, як використовувати компонент, з'явиться на вашій сторінці.

Для цього компонента є три параметри кольору. Замініть N на номер кольору.

colorN-name Назва кольору. Обирайте який ви бажаєте!
colorN-variable Назва змінної CSS, яка позначає цей колір.
Змінна повинна містити три розділених комами номера, які представляють собою колір. Це згоджується зі змінними в стилі BHL.
Якщо ваша змінна містить щось інше (таке, як повний RGB/RGBA або шістнадцятковий номер коліру), вам потрібно буде змінити колір фону кожного квадрата теми вручну за допомогою CSS.
colorN-info Трохи інформації про колір. Типове відображення значень RGB. Залишайте його коротким.
Якщо ви не бажаєте тут нічого писати, додайте замість того наступний текст: @@ @@, без коми та крапки.
colorN-has-light-text
На вибір. Якщо не вказано, то: 0
Інакше 0 або 1. Визначає колір літер в квадраті. Бажано переконатися, що між кольором фону та кольором тексту достатній контраст.
Якщо ви обираєте 1, використовується значення --swatch-text-light. А якщо не обираєте, то використовується білий колір (255, 255, 255). Інакше використовується --swatch-text-dark, або чорний колір (0, 0, 0). Як і всі змінні кольору CSS у стилі BHL, очікуються три числа, що представляють значення RGB.

Можна використовувати лише той колір, який представлений змінною CSS. Всі кольори з теми Black Highlighter мають відповідні CSS-змінні. Тому для тем BHL цей компонент буде працювати за межами блоку. Однак тема Sigma 9 не використовує змінні CSS, тому єдиними доступними змінними CSS будуть будь-які, які ви визначили у своїй темі.

Цей компонент може містити максимум 6 основних кольорів і 12 додаткових кольорів. Я рекомендую два основних кольори і не більше шести додаткових кольорів.

Щоб додати основний колір, просто додайте до включення три верхні параметри з наведених вище, як показано в прикладі.

Щоб додати додатковий колір, це те саме, але замініть «color» на «subcolor».

Приклад

Нижче наведений великий приклад, який взято з теми Black Highlighter:

[[include :scp-ukrainian:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

Цей код генерує такі кольорові квадратики:

bhl-squares.png

Налаштування

Ви можете налаштувати зовнішній вигляд компонента за допомогою CSS.

Весь компонент має клас .colors-container, і будь-який CSS, який націлений на нього, має містити цей клас, щоб гарантувати, що він не заціпить якісь інші елементи. Кожен кольоровий квадрат має клас .color. Основні кольори мають батьківський елемент .colors, а додаткові — .subcolors.

Вам слід використовувати модифікатор !important, щоб перевантажити фон квадратика.

Наприклад, тема Laughter and Knives додає градієнтний фон для 9-го додаткового кольору наступним чином::

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

Інструмент для перетворення наявного синтаксису до аргументів для цього компоненту

{$color1-name}{$color1-variable}{$color1-info}
{$color2-name}{$color2-variable}{$color2-info}
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}
{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
Якщо не зазначено інше, вміст цієї сторінки доступний на умовах ліцензії Creative Commons Attribution-ShareAlike 3.0 License