Шаблон:ColorPaletteStyles - История изменений

Aylong в 11:49, 4 августа 2025

2025-08-04T11:49:25Z

← Предыдущая версия		Версия от 11:49, 4 августа 2025
Строка 138:		Строка 138:
	--{{{2\|tmp}}}-25: var(--wizard-light);		--{{{2\|tmp}}}-25: var(--wizard-light);
	--{{{2\|tmp}}}-10: var(--wizard-transparent);		--{{{2\|tmp}}}-10: var(--wizard-transparent);
			\| Wizard =
			--{{{2\|tmp}}}-100: var(--indigo-opaque);
			--{{{2\|tmp}}}-75: var(--indigo-primary);
			--{{{2\|tmp}}}-50: var(--indigo-secondary);
			--{{{2\|tmp}}}-25: var(--indigo-light);
			--{{{2\|tmp}}}-10: var(--indigo-transparent);
	\| Black =		\| Black =
	--{{{2\|tmp}}}-100: var(--black-opaque);		--{{{2\|tmp}}}-100: var(--black-opaque);

Aylong в 05:11, 23 июля 2025

2025-07-23T05:11:04Z

Внесённые изменения

Aylong в 05:09, 23 июля 2025

2025-07-23T05:09:31Z

Внесённые изменения

Aylong в 11:09, 2 июня 2025

2025-06-02T11:09:59Z

Внесённые изменения

Aylong: Уменьшение символов у переменных и сортировка по нарастающей в DevTools

2025-06-02T10:02:06Z

Уменьшение символов у переменных и сортировка по нарастающей в DevTools

Внесённые изменения

Aylong: Отмена версии 45682, сделанной Aylong (обсуждение)

2025-05-31T04:14:41Z

Отмена версии 45682, сделанной Aylong (обсуждение)

← Предыдущая версия		Версия от 04:14, 31 мая 2025
Строка 176:		Строка 176:
	"		"
	\| #default = style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
	--{{{2\|template}}}-secondary: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.5);		--{{{2\|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
	--{{{2\|template}}}-light: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.25);		--{{{2\|template}}}-light: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
	--{{{2\|template}}}-transparent: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.1);		--{{{2\|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1);
	"		"
	}}</includeonly><noinclude>		}}</includeonly><noinclude>

Aylong в 04:13, 31 мая 2025

2025-05-31T04:13:02Z

← Предыдущая версия		Версия от 04:13, 31 мая 2025
Строка 176:		Строка 176:
	"		"
	\| #default = style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--~~primary~~-lightness));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.75);
	--{{{2\|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.5);		--{{{2\|template}}}-secondary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.5);
	--{{{2\|template}}}-light: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.25);		--{{{2\|template}}}-light: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.25);
	--{{{2\|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.1);		--{{{2\|template}}}-transparent: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.1);
	"		"
	}}</includeonly><noinclude>		}}</includeonly><noinclude>

Aylong в 10:19, 15 мая 2025

2025-05-15T10:19:09Z

← Предыдущая версия		Версия от 10:19, 15 мая 2025
Строка 193:		Строка 193:
	Использование <nowiki>{{ColorPalette\|Civilian\|example}}</nowiki><br>		Использование <nowiki>{{ColorPalette\|Civilian\|example}}</nowiki><br>
	Вернёт следующий код:		Вернёт следующий код:
	<~~pre~~>		<syntaxhighlight lang="html">
	style="		style="
	--example-opaque: var(--civilian-opaque);		--example-opaque: var(--civilian-opaque);
Строка 201:		Строка 201:
	--example-transparent: var(--civilian-transparent);		--example-transparent: var(--civilian-transparent);
	"		"
	</~~pre~~>		</syntaxhighlight>

	Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>		Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>
	Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css		Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css
Строка 214:		Строка 215:
	=== Как использовать? ===		=== Как использовать? ===
	При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:		При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
	<~~pre><nowiki~~>		<syntaxhighlight lang="html">
	<div class="wrapper" {{ColorPaletteStyles\|Civilian\|example}}>		<div class="wrapper" {{ColorPaletteStyles\|Civilian\|example}}>
	<span class="example-text">Обычный текст</span>		<span class="example-text">Обычный текст</span>
	</div>		</div>
	</~~nowiki></pre~~>		</syntaxhighlight>

	Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br>		Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br>
	Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br>		Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br>
	После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:		После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
	<~~pre><nowiki~~>		<syntaxhighlight lang="html">
	<templatestyles src="Notice/styles.css" />		<templatestyles src="Notice/styles.css" />
	<div class="notice" {{ColorPaletteStyles\|Cargo\|notice}}>		<div class="notice" {{ColorPaletteStyles\|Cargo\|notice}}>
	<span class="notice-text">Обычный текст</span>		<span class="notice-text">Обычный текст</span>
	</div>		</div>
	</~~nowiki></pre~~>		</syntaxhighlight>

	Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>		Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>
	Теперь же, на странице стилей мы можем... стилизовать наш шаблон:		Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
	<~~pre><nowiki~~>		<syntaxhighlight lang="css">
	.notice {		.notice {
	background-color: var(--notice-primary);		background-color: var(--notice-primary);
Строка 241:		Строка 242:
	color: var(--color-text); /* Эта переменная создана в самом скине */		color: var(--color-text); /* Эта переменная создана в самом скине */
	}		}
	</~~nowiki></pre~~>		</syntaxhighlight>

	= Имеющиеся цвета =		= Имеющиеся цвета =
	См. [[ColorPalette#Имеющиеся_цвета\|ColorPalette]]		См. [[ColorPalette#Имеющиеся_цвета\|ColorPalette]]

Aylong в 22:56, 13 мая 2025

2025-05-13T22:56:21Z

← Предыдущая версия		Версия от 22:56, 13 мая 2025
Строка 73:		Строка 73:
	--{{{2\|template}}}-opaque: var(--centcom-opaque);		--{{{2\|template}}}-opaque: var(--centcom-opaque);
	--{{{2\|template}}}-primary: var(--centcom-primary);		--{{{2\|template}}}-primary: var(--centcom-primary);
			--{{{2\|template}}}-secondary: var(--centcom-secondary);

	--{{{2\|template}}}-secondary: var(--centcom-secondary);
	--{{{2\|template}}}-light: var(--centcom-light);		--{{{2\|template}}}-light: var(--centcom-light);
	--{{{2\|template}}}-transparent: var(--centcom-transparent);		--{{{2\|template}}}-transparent: var(--centcom-transparent);
Строка 177:		Строка 175:
	--{{{2\|template}}}-transparent: var(--gray-transparent);		--{{{2\|template}}}-transparent: var(--gray-transparent);
	"		"
	\| style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);

Aylong в 22:41, 13 мая 2025

2025-05-13T22:41:03Z

← Предыдущая версия		Версия от 22:41, 13 мая 2025
Строка 217:		Строка 217:
	При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:		При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
	<pre><nowiki>		<pre><nowiki>
	<div class="wrapper" {{~~ColorPaletteInline~~\|Civilian\|example}}>		<div class="wrapper" {{ColorPaletteStyles\|Civilian\|example}}>
	<span class="example-text">Обычный текст</span>		<span class="example-text">Обычный текст</span>
	</div>		</div>
Строка 227:		Строка 227:
	<pre><nowiki>		<pre><nowiki>
	<templatestyles src="Notice/styles.css" />		<templatestyles src="Notice/styles.css" />
	<div class="notice" {{~~ColorPaletteInline~~\|Cargo\|notice}}>		<div class="notice" {{ColorPaletteStyles\|Cargo\|notice}}>
	<span class="notice-text">Обычный текст</span>		<span class="notice-text">Обычный текст</span>
	</div>		</div>

← Предыдущая версия		Версия от 11:49, 4 августа 2025
Строка 138:		Строка 138:
	--{{{2\|tmp}}}-25: var(--wizard-light);		--{{{2\|tmp}}}-25: var(--wizard-light);
	--{{{2\|tmp}}}-10: var(--wizard-transparent);		--{{{2\|tmp}}}-10: var(--wizard-transparent);
			\| Wizard =
			--{{{2\|tmp}}}-100: var(--indigo-opaque);
			--{{{2\|tmp}}}-75: var(--indigo-primary);
			--{{{2\|tmp}}}-50: var(--indigo-secondary);
			--{{{2\|tmp}}}-25: var(--indigo-light);
			--{{{2\|tmp}}}-10: var(--indigo-transparent);
	\| Black =		\| Black =
	--{{{2\|tmp}}}-100: var(--black-opaque);		--{{{2\|tmp}}}-100: var(--black-opaque);

← Предыдущая версия		Версия от 04:14, 31 мая 2025
Строка 176:		Строка 176:
	"		"
	\| #default = style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
	--{{{2\|template}}}-secondary: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.5);		--{{{2\|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
	--{{{2\|template}}}-light: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.25);		--{{{2\|template}}}-light: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
	--{{{2\|template}}}-transparent: hsla(var(--primary-hue), ~~calc(var(--palette-saturation) + 20~~%), ~~calc(~~var(--~~palette~~-lightness~~) - 17.5%~~), 0.1);		--{{{2\|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1);
	"		"
	}}</includeonly><noinclude>		}}</includeonly><noinclude>

← Предыдущая версия		Версия от 04:13, 31 мая 2025
Строка 176:		Строка 176:
	"		"
	\| #default = style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--~~primary~~-lightness));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.75);
	--{{{2\|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.5);		--{{{2\|template}}}-secondary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.5);
	--{{{2\|template}}}-light: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.25);		--{{{2\|template}}}-light: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.25);
	--{{{2\|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--~~primary~~-lightness), 0.1);		--{{{2\|template}}}-transparent: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.1);
	"		"
	}}</includeonly><noinclude>		}}</includeonly><noinclude>

← Предыдущая версия		Версия от 22:56, 13 мая 2025
Строка 73:		Строка 73:
	--{{{2\|template}}}-opaque: var(--centcom-opaque);		--{{{2\|template}}}-opaque: var(--centcom-opaque);
	--{{{2\|template}}}-primary: var(--centcom-primary);		--{{{2\|template}}}-primary: var(--centcom-primary);
			--{{{2\|template}}}-secondary: var(--centcom-secondary);

	--{{{2\|template}}}-secondary: var(--centcom-secondary);
	--{{{2\|template}}}-light: var(--centcom-light);		--{{{2\|template}}}-light: var(--centcom-light);
	--{{{2\|template}}}-transparent: var(--centcom-transparent);		--{{{2\|template}}}-transparent: var(--centcom-transparent);
Строка 177:		Строка 175:
	--{{{2\|template}}}-transparent: var(--gray-transparent);		--{{{2\|template}}}-transparent: var(--gray-transparent);
	"		"
	\| style="		\| #default = style="
	--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));		--{{{2\|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
	--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);		--{{{2\|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);