.pagebutton {
user-select: none;
position: relative;
display: inline-flex;
flex-direction: column;
overflow: hidden;
position: relative;
outline: 1px outset var(--tmp-25);
border-radius: var(--border-radius-small);
transition-property: box-shadow, transform;
transition-duration: calc(var(--transition-time) * 2);
transition-timing-function: var(--linear-bounce);
z-index: 1;
}

.pagebutton:hover {
--tmp-100: var(--hover-100, var(--tmp-100)) !important;
--tmp-75: var(--hover-75, var(--tmp-75)) !important;
--tmp-50: var(--hover-50, var(--tmp-50)) !important;
--tmp-25: var(--hover-25, var(--tmp-25)) !important;
--tmp-10: var(--hover-10, var(--tmp-10)) !important;
box-shadow: 0 0.2rem 0.4rem var(--tmp-75);
transform: translateY(-0.25rem);
transition-duration: var(--transition-time);
transition-timing-function: ease;
z-index: 2;
}

.pagebutton-image {
flex: 1;
display: inline-flex;
justify-content: center;
background-color: var(--tmp-10);
}

.pagebutton-image a {
transition-property: filter;
transition-duration: var(--transition-time);
}

.pagebutton:active .pagebutton-image a {
filter: drop-shadow(0 0 6px var(--tmp-75));
transition-duration: 0s;
}

.pagebutton-image a,
.pagebutton-image span {
display: inline-flex;
justify-content: center;
width: 100%;
}

.pagebutton-image img {
padding: 0.5em;
}

.pagebutton-text {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(1.25rem + 1px);
font-weight: bold;
white-space: nowrap;
background-color: hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bg-l));
color: var(--color-white) !important;
border-top: 1px solid hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bd-l));
}

.pagebutton-text a {
color: var(--color-white) !important;
}

.pagebutton-text a:before {
content: '';
position: absolute;
inset: 0;
}

2025-07-23T05:25:22Z

Aylong:

Шаблон:PageButton/styles.css

2025-07-23T05:24:32Z

Aylong:

.pagebutton {
user-select: none;
position: relative;
display: inline-flex;
flex-direction: column;
overflow: hidden;
position: relative;
outline: 1px outset var(--tmp-25);
border-radius: var(--border-radius-small);
transition-property: box-shadow, outline-color, transform;
transition-duration: calc(var(--transition-time) * 2);
transition-timing-function: var(--linear-bounce);
z-index: 1;
}

.pagebutton:hover {
outline-color: var(--tmp-25);
outline-color: var(--hover-25);
box-shadow: 0 0.2rem 0.4rem var(--tmp-75);
box-shadow: 0 0.2rem 0.4rem var(--hover-75);
transform: translateY(-0.25rem);
transition-duration: var(--transition-time);
transition-timing-function: ease;
z-index: 2;
}

.pagebutton-image {
flex: 1;
display: inline-flex;
justify-content: center;
background-color: var(--tmp-10);
transition-property: background-color;
transition-duration: calc(var(--transition-time) * 2);
}

.pagebutton:hover .pagebutton-image {
background-color: var(--tmp-10);
background-color: var(--hover-10);
transition-duration: var(--transition-time);
transition-timing-function: ease;
}

.pagebutton-image a {
transition-property: filter;
transition-duration: var(--transition-time);
}

.pagebutton:active .pagebutton-image a {
filter: drop-shadow(0 0 6px var(--tmp-75));
filter: drop-shadow(0 0 6px var(--hover-75));
transition-duration: 0s;
}

.pagebutton-image a,
.pagebutton-image span {
display: inline-flex;
justify-content: center;
width: 100%;
}

.pagebutton-image img {
padding: 0.5em;
}

.pagebutton-text {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(1.25rem + 1px);
font-weight: bold;
white-space: nowrap;
background-color: hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bg-l));
color: var(--color-white) !important;
border-top: 1px solid hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bd-l));
transition-property: background-color, border-color;
transition-duration: calc(var(--transition-time) * 2);
}

.pagebutton:hover .pagebutton-text {
background-color: hsl(from var(--hover-75) h var(--adjust-s) var(--adjust-bg-l));
border-color: hsl(from var(--hover-75) h var(--adjust-s) var(--adjust-bd-l));
transition-duration: var(--transition-time);
transition-timing-function: ease;
}

.pagebutton-text a {
color: var(--color-white) !important;
}

.pagebutton-text a:before {
content: '';
position: absolute;
inset: 0;
}

Шаблон:PageButton/styles.css

2025-07-23T05:23:55Z

Aylong:

.pagebutton {
user-select: none;
position: relative;
display: inline-flex;
flex-direction: column;
overflow: hidden;
position: relative;
outline: 1px outset var(--tmp-25);
border-radius: var(--border-radius-small);
transition-property: box-shadow, outline-color, transform;
transition-duration: calc(var(--transition-time) * 2);
transition-timing-function: var(--linear-bounce);
z-index: 1;
}

.pagebutton:hover {
outline-color: var(--hover-25);
box-shadow: 0 0.2rem 0.4rem var(--tmp-75);
box-shadow: 0 0.2rem 0.4rem var(--hover-75);
transform: translateY(-0.25rem);
transition-duration: var(--transition-time);
transition-timing-function: ease;
z-index: 2;
}

.pagebutton-image {
flex: 1;
display: inline-flex;
justify-content: center;
background-color: var(--tmp-10);
transition-property: background-color;
transition-duration: calc(var(--transition-time) * 2);
}

.pagebutton:hover .pagebutton-image {
background-color: var(--hover-10);
transition-duration: var(--transition-time);
transition-timing-function: ease;
}

.pagebutton-image a {
transition-property: filter;
transition-duration: var(--transition-time);
}

.pagebutton:active .pagebutton-image a {
filter: drop-shadow(0 0 6px var(--tmp-75));
filter: drop-shadow(0 0 6px var(--hover-75));
transition-duration: 0s;
}

.pagebutton-image a,
.pagebutton-image span {
display: inline-flex;
justify-content: center;
width: 100%;
}

.pagebutton-image img {
padding: 0.5em;
}

.pagebutton-text {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(1.25rem + 1px);
font-weight: bold;
white-space: nowrap;
background-color: hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bg-l));
color: var(--color-white) !important;
border-top: 1px solid hsl(from var(--tmp-75) h var(--adjust-s) var(--adjust-bd-l));
transition-property: background-color, border-color;
transition-duration: calc(var(--transition-time) * 2);
}

.pagebutton:hover .pagebutton-text {
background-color: hsl(from var(--hover-75) h var(--adjust-s) var(--adjust-bg-l));
border-color: hsl(from var(--hover-75) h var(--adjust-s) var(--adjust-bd-l));
transition-duration: var(--transition-time);
transition-timing-function: ease;
}

.pagebutton-text a {
color: var(--color-white) !important;
}

.pagebutton-text a:before {
content: '';
position: absolute;
inset: 0;
}

Шаблон:PageButton/styles.css

2025-07-23T05:19:34Z

Aylong:

Aylong:

<includeonly>{{#switch: {{{1}}}
| Civilian =
--tmp-100: var(--civilian-opaque);
--tmp-75: var(--civilian-primary);
--tmp-50: var(--civilian-secondary);
--tmp-25: var(--civilian-light);
--tmp-10: var(--civilian-transparent)
| Medical =
--tmp-100: var(--medical-opaque);
--tmp-75: var(--medical-primary);
--tmp-50: var(--medical-secondary);
--tmp-25: var(--medical-light);
--tmp-10: var(--medical-transparent)
| Supply =
--tmp-100: var(--supply-opaque);
--tmp-75: var(--supply-primary);
--tmp-50: var(--supply-secondary);
--tmp-25: var(--supply-light);
--tmp-10: var(--supply-transparent)
| Science =
--tmp-100: var(--science-opaque);
--tmp-75: var(--science-primary);
--tmp-50: var(--science-secondary);
--tmp-25: var(--science-light);
--tmp-10: var(--science-transparent)
| Engineering =
--tmp-100: var(--engineer-opaque);
--tmp-75: var(--engineer-primary);
--tmp-50: var(--engineer-secondary);
--tmp-25: var(--engineer-light);
--tmp-10: var(--engineer-transparent)
| Security =
--tmp-100: var(--security-opaque);
--tmp-75: var(--security-primary);
--tmp-50: var(--security-secondary);
--tmp-25: var(--security-light);
--tmp-10: var(--security-transparent)
| Antag =
--tmp-100: var(--antag-opaque);
--tmp-75: var(--antag-primary);
--tmp-50: var(--antag-secondary);
--tmp-25: var(--antag-light);
--tmp-10: var(--antag-transparent)
| Legal =
--tmp-100: var(--legal-opaque);
--tmp-75: var(--legal-primary);
--tmp-50: var(--legal-secondary);
--tmp-25: var(--legal-light);
--tmp-10: var(--legal-transparent)
| Command =
--tmp-100: var(--command-opaque);
--tmp-75: var(--command-primary);
--tmp-50: var(--command-secondary);
--tmp-25: var(--command-light);
--tmp-10: var(--command-transparent)
| Synthetic =
--tmp-100: var(--synthetic-opaque);
--tmp-75: var(--synthetic-primary);
--tmp-50: var(--synthetic-secondary);
--tmp-25: var(--synthetic-light);
--tmp-10: var(--synthetic-transparent)
| CentCom =
--tmp-100: var(--centcom-opaque);
--tmp-75: var(--centcom-primary);
--tmp-50: var(--centcom-secondary);
--tmp-25: var(--centcom-light);
--tmp-10: var(--centcom-transparent)
| Special =
--tmp-100: var(--special-opaque);
--tmp-75: var(--special-primary);
--tmp-50: var(--special-secondary);
--tmp-25: var(--special-light);
--tmp-10: var(--special-transparent)
| Cyan =
--tmp-100: var(--cyan-opaque);
--tmp-75: var(--cyan-primary);
--tmp-50: var(--cyan-secondary);
--tmp-25: var(--cyan-light);
--tmp-10: var(--cyan-transparent)
| Blue =
--tmp-100: var(--blue-opaque);
--tmp-75: var(--blue-primary);
--tmp-50: var(--blue-secondary);
--tmp-25: var(--blue-light);
--tmp-10: var(--blue-transparent)
| Green =
--tmp-100: var(--green-opaque);
--tmp-75: var(--green-primary);
--tmp-50: var(--green-secondary);
--tmp-25: var(--green-light);
--tmp-10: var(--green-transparent)
| Yellow =
--tmp-100: var(--yellow-opaque);
--tmp-75: var(--yellow-primary);
--tmp-50: var(--yellow-secondary);
--tmp-25: var(--yellow-light);
--tmp-10: var(--yellow-transparent)
| Red =
--tmp-100: var(--red-opaque);
--tmp-75: var(--red-primary);
--tmp-50: var(--red-secondary);
--tmp-25: var(--red-light);
--tmp-10: var(--red-transparent)
| Pink =
--tmp-100: var(--pink-opaque);
--tmp-75: var(--pink-primary);
--tmp-50: var(--pink-secondary);
--tmp-25: var(--pink-light);
--tmp-10: var(--pink-transparent)
| Brown =
--tmp-100: var(--brown-opaque);
--tmp-75: var(--brown-primary);
--tmp-50: var(--brown-secondary);
--tmp-25: var(--brown-light);
--tmp-10: var(--brown-transparent)
| Lavaland =
--tmp-100: var(--lavaland-opaque);
--tmp-75: var(--lavaland-primary);
--tmp-50: var(--lavaland-secondary);
--tmp-25: var(--lavaland-light);
--tmp-10: var(--lavaland-transparent)
| Cultist =
--tmp-100: var(--cult-opaque);
--tmp-75: var(--cult-primary);
--tmp-50: var(--cult-secondary);
--tmp-25: var(--cult-light);
--tmp-10: var(--cult-transparent)
| Ratvar =
--tmp-100: var(--ratvar-opaque);
--tmp-75: var(--ratvar-primary);
--tmp-50: var(--ratvar-secondary);
--tmp-25: var(--ratvar-light);
--tmp-10: var(--ratvar-transparent)
| Wizard =
--tmp-100: var(--wizard-opaque);
--tmp-75: var(--wizard-primary);
--tmp-50: var(--wizard-secondary);
--tmp-25: var(--wizard-light);
--tmp-10: var(--wizard-transparent)
| Black =
--tmp-100: var(--black-opaque);
--tmp-75: var(--black-primary);
--tmp-50: var(--black-secondary);
--tmp-25: var(--black-light);
--tmp-10: var(--black-transparent)
| Gray =
--tmp-100: var(--gray-opaque);
--tmp-75: var(--gray-primary);
--tmp-50: var(--gray-secondary);
--tmp-25: var(--gray-light);
--tmp-10: var(--gray-transparent)
| #default =
--tmp-100: hsl(var(--primary-hue), 40%, var(--primary-lightness));
--tmp-75: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
--tmp-50: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
--tmp-25: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
--tmp-10: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1)
}}</includeonly><noinclude>
= Что это? =
Вариант шаблона [[ColorPalette]] но для использования вместе с классами. <br>
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.

=== В чём её преимущество? ===
В отличии от [[ColorPalette]], этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.

Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br>
Использование <nowiki>{{ColorPalette|Civilian}}</nowiki><br>
Вернёт следующий код:
<syntaxhighlight lang="html">
--tmp-100: var(--civilian-opaque);
--tmp-75: var(--civilian-primary);
--tmp-50: var(--civilian-secondary);
--tmp-25: var(--civilian-light);
--tmp-10: var(--civilian-transparent)
</syntaxhighlight>

Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css

=== С какой целью это сделано? ===
Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.<br>
Этот шаблон позволяет:
* Держать вёрстку шаблона в чистоте
* Тонко стилизовать шаблон с помощью <code>TemplateStyles</code>, так как все цвета доступны в виде переменных
* Сохранять преимущества [[ColorPalette]], позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой

=== Как использовать? ===
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
<syntaxhighlight lang="html">
<div class="wrapper" style="{{ColorPaletteStyles|Civilian}};">
<span class="example-text">Обычный текст</span>
</div>
</syntaxhighlight>

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

Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
<syntaxhighlight lang="css">
.notice {
background-color: var(--tmp-75);
border: 1px solid var(--tmp-25);
}

.notice-text {
color: var(--color-text); /* Эта переменная создана в самом скине */
}
</syntaxhighlight>

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

Шаблон:PageButton/styles.css

2025-06-02T11:05:30Z

Aylong:

Шаблон:PageButton/styles.css

2025-06-02T11:01:44Z

Aylong:

Шаблон:PageButton/styles.css

2025-06-02T11:01:00Z

Aylong: