Space Station 14 Вики

MediaWiki:Common.css: различия между версиями

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
мНет описания правки
мНет описания правки
Строка 128: Строка 128:
/*== Палитра цветов фонов ==*/
/*== Палитра цветов фонов ==*/
--brightness-hsl: 0%;
--brightness-hsl: 0%;
--color-shift-percent-50: 23%;
--color-shift-percent-50: -4%;
--color-shift-percent-100: 0%;
--color-shift-percent-100: 0%;
--color-shift-percent-150: 4%;
--color-shift-percent-150: 4%;
--color-shift-percent-dark: 23%;
--color-shift-percent-subtle: 30%;
--color-shift-percent-subtle: 30%;


Строка 136: Строка 137:
--bg-color-red--hsl: 0.00deg 54.79%;
--bg-color-red--hsl: 0.00deg 54.79%;
--bg-color-red--hsl-alpha: 28.63%;
--bg-color-red--hsl-alpha: 28.63%;
--bg-color-red-50: color-mix(in srgb, var(--bg-color-red-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-red-50: hsl(var(--bg-color-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-red--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-red-100: hsl(var(--bg-color-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-red--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-red-100: hsl(var(--bg-color-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-red--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-red-150: hsl(var(--bg-color-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-red--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-red-150: hsl(var(--bg-color-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-red--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-red-dark: color-mix(in srgb, var(--bg-color-red-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-red-subtle: color-mix(in srgb, var(--bg-color-red-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-red-subtle: color-mix(in srgb, var(--bg-color-red-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));


/* Orange */
--bg-color-orange--hsl: 18.21deg 73.68%;
--bg-color-orange--hsl-alpha: 29.8%;
--bg-color-orange-50: hsl(var(--bg-color-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-orange--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-orange-100: hsl(var(--bg-color-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-orange--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-orange-150: hsl(var(--bg-color-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-orange--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-orange-dark: color-mix(in srgb, var(--bg-color-orange-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-orange-subtle: color-mix(in srgb, var(--bg-color-orange-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
/* Yellow */
/* Yellow */
--bg-color-yellow--hsl: 45.33deg 64.29%;
--bg-color-yellow--hsl: 45.33deg 64.29%;
--bg-color-yellow--hsl-alpha: 27.45%;
--bg-color-yellow--hsl-alpha: 27.45%;
--bg-color-yellow-50: color-mix(in srgb, var(--bg-color-yellow-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-yellow-50: hsl(var(--bg-color-yellow--hsl) calc(var(--brightness-hsl) + var(--bg-color-yellow--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-yellow-100: hsl(var(--bg-color-yellow--hsl) calc(var(--brightness-hsl) + var(--bg-color-yellow--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-yellow-100: hsl(var(--bg-color-yellow--hsl) calc(var(--brightness-hsl) + var(--bg-color-yellow--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-yellow-150: hsl(var(--bg-color-yellow--hsl) calc(var(--brightness-hsl) + var(--bg-color-yellow--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-yellow-150: hsl(var(--bg-color-yellow--hsl) calc(var(--brightness-hsl) + var(--bg-color-yellow--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-yellow-dark: color-mix(in srgb, var(--bg-color-yellow-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-yellow-subtle: color-mix(in srgb, var(--bg-color-yellow-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-yellow-subtle: color-mix(in srgb, var(--bg-color-yellow-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Brown */
/* Brown */
--bg-color-brown--hsl: 29.43deg 45.30%;
--bg-color-brown--hsl: 29.43deg 45.30%;
--bg-color-brown--hsl-alpha: 22.94%;
--bg-color-brown--hsl-alpha: 22.94%;
--bg-color-brown-50: color-mix(in srgb, var(--bg-color-brown-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-brown-50: hsl(var(--bg-color-brown--hsl) calc(var(--brightness-hsl) + var(--bg-color-brown--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-brown-100: hsl(var(--bg-color-brown--hsl) calc(var(--brightness-hsl) + var(--bg-color-brown--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-brown-100: hsl(var(--bg-color-brown--hsl) calc(var(--brightness-hsl) + var(--bg-color-brown--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-brown-150: hsl(var(--bg-color-brown--hsl) calc(var(--brightness-hsl) + var(--bg-color-brown--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-brown-150: hsl(var(--bg-color-brown--hsl) calc(var(--brightness-hsl) + var(--bg-color-brown--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-brown-dark: color-mix(in srgb, var(--bg-color-brown-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-brown-subtle: color-mix(in srgb, var(--bg-color-brown-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-brown-subtle: color-mix(in srgb, var(--bg-color-brown-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Blue */
/* Blue */
--bg-color-blue--hsl: 210.79deg 55.07%;
--bg-color-blue--hsl: 210.79deg 55.07%;
--bg-color-blue--hsl-alpha: 27.06%;
--bg-color-blue--hsl-alpha: 27.06%;
--bg-color-blue-50: color-mix(in srgb, var(--bg-color-blue-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-blue-50: hsl(var(--bg-color-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-blue--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-blue-100: hsl(var(--bg-color-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-blue-100: hsl(var(--bg-color-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-blue-150: hsl(var(--bg-color-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-blue-150: hsl(var(--bg-color-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-blue-dark: color-mix(in srgb, var(--bg-color-blue-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-blue-subtle: color-mix(in srgb, var(--bg-color-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-blue-subtle: color-mix(in srgb, var(--bg-color-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Sky Blue */
/* Skyblue */
--bg-color-sky-blue--hsl: 211.11deg 54.36%;
--bg-color-sky-blue--hsl: 211.11deg 54.36%;
--bg-color-sky-blue--hsl-alpha: 29.22%;
--bg-color-sky-blue--hsl-alpha: 29.22%;
--bg-color-sky-blue-50: color-mix(in srgb, var(--bg-color-sky-blue-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-sky-blue-50: hsl(var(--bg-color-sky-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-sky-blue--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-sky-blue-100: hsl(var(--bg-color-sky-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-sky-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-sky-blue-100: hsl(var(--bg-color-sky-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-sky-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-sky-blue-150: hsl(var(--bg-color-sky-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-sky-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-sky-blue-150: hsl(var(--bg-color-sky-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-sky-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-sky-blue-dark: color-mix(in srgb, var(--bg-color-sky-blue-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-sky-blue-subtle: color-mix(in srgb, var(--bg-color-sky-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-sky-blue-subtle: color-mix(in srgb, var(--bg-color-sky-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Turquoise */
/* Turquoise */
--bg-color-turquoise--hsl: 185.05deg 95.96%;
--bg-color-turquoise--hsl: 185.05deg 95.96%;
--bg-color-turquoise--hsl-alpha: 19.41%;
--bg-color-turquoise--hsl-alpha: 19.41%;
--bg-color-turquoise-50: color-mix(in srgb, var(--bg-color-turquoise-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-turquoise-50: hsl(var(--bg-color-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-turquoise--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-turquoise-100: hsl(var(--bg-color-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-turquoise--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-turquoise-100: hsl(var(--bg-color-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-turquoise--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-turquoise-150: hsl(var(--bg-color-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-turquoise--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-turquoise-150: hsl(var(--bg-color-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-turquoise--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-turquoise-dark: color-mix(in srgb, var(--bg-color-turquoise-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-turquoise-subtle: color-mix(in srgb, var(--bg-color-turquoise-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-turquoise-subtle: color-mix(in srgb, var(--bg-color-turquoise-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Azure */
/* Azure */
--bg-color-azure--hsl: 195.29deg 100.00%;
--bg-color-azure--hsl: 195.29deg 100.00%;
--bg-color-azure--hsl-alpha: 20.00%;
--bg-color-azure--hsl-alpha: 20.00%;
--bg-color-azure-50: color-mix(in srgb, var(--bg-color-azure-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-azure-50: hsl(var(--bg-color-azure--hsl) calc(var(--brightness-hsl) + var(--bg-color-azure--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-azure-100: hsl(var(--bg-color-azure--hsl) calc(var(--brightness-hsl) + var(--bg-color-azure--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-azure-100: hsl(var(--bg-color-azure--hsl) calc(var(--brightness-hsl) + var(--bg-color-azure--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-azure-150: hsl(var(--bg-color-azure--hsl) calc(var(--brightness-hsl) + var(--bg-color-azure--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-azure-150: hsl(var(--bg-color-azure--hsl) calc(var(--brightness-hsl) + var(--bg-color-azure--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-azure-dark: color-mix(in srgb, var(--bg-color-azure-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-azure-subtle: color-mix(in srgb, var(--bg-color-azure-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-azure-subtle: color-mix(in srgb, var(--bg-color-azure-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Purple */
/* Purple */
--bg-color-purple--hsl: 273.95deg 55.07%;
--bg-color-purple--hsl: 273.95deg 55.07%;
--bg-color-purple--hsl-alpha: 27.06%;
--bg-color-purple--hsl-alpha: 27.06%;
--bg-color-purple-50: color-mix(in srgb, var(--bg-color-purple-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-purple-50: hsl(var(--bg-color-purple--hsl) calc(var(--brightness-hsl) + var(--bg-color-purple--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-purple-100: hsl(var(--bg-color-purple--hsl) calc(var(--brightness-hsl) + var(--bg-color-purple--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-purple-100: hsl(var(--bg-color-purple--hsl) calc(var(--brightness-hsl) + var(--bg-color-purple--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-purple-150: hsl(var(--bg-color-purple--hsl) calc(var(--brightness-hsl) + var(--bg-color-purple--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-purple-150: hsl(var(--bg-color-purple--hsl) calc(var(--brightness-hsl) + var(--bg-color-purple--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-purple-dark: color-mix(in srgb, var(--bg-color-purple-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-purple-subtle: color-mix(in srgb, var(--bg-color-purple-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-purple-subtle: color-mix(in srgb, var(--bg-color-purple-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Violet */
/* Violet */
--bg-color-violet--hsl: 266.57deg 53.03%;
--bg-color-violet--hsl: 266.57deg 53.03%;
--bg-color-violet--hsl-alpha: 25.88%;
--bg-color-violet--hsl-alpha: 25.88%;
--bg-color-violet-50: color-mix(in srgb, var(--bg-color-violet-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-violet-50: hsl(var(--bg-color-violet--hsl) calc(var(--brightness-hsl) + var(--bg-color-violet--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-violet-100: hsl(var(--bg-color-violet--hsl) calc(var(--brightness-hsl) + var(--bg-color-violet--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-violet-100: hsl(var(--bg-color-violet--hsl) calc(var(--brightness-hsl) + var(--bg-color-violet--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-violet-150: hsl(var(--bg-color-violet--hsl) calc(var(--brightness-hsl) + var(--bg-color-violet--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-violet-150: hsl(var(--bg-color-violet--hsl) calc(var(--brightness-hsl) + var(--bg-color-violet--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-violet-dark: color-mix(in srgb, var(--bg-color-violet-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-violet-subtle: color-mix(in srgb, var(--bg-color-violet-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-violet-subtle: color-mix(in srgb, var(--bg-color-violet-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pink */
/* Pink */
--bg-color-pink--hsl: 313deg 48%;
--bg-color-pink--hsl: 313deg 48%;
--bg-color-pink--hsl-alpha: 33%;
--bg-color-pink--hsl-alpha: 33%;
--bg-color-pink-50: color-mix(in srgb, var(--bg-color-pink-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pink-50: hsl(var(--bg-color-pink--hsl) calc(var(--brightness-hsl) + var(--bg-color-pink--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pink-100: hsl(var(--bg-color-pink--hsl) calc(var(--brightness-hsl) + var(--bg-color-pink--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pink-100: hsl(var(--bg-color-pink--hsl) calc(var(--brightness-hsl) + var(--bg-color-pink--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pink-150: hsl(var(--bg-color-pink--hsl) calc(var(--brightness-hsl) + var(--bg-color-pink--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pink-150: hsl(var(--bg-color-pink--hsl) calc(var(--brightness-hsl) + var(--bg-color-pink--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pink-dark: color-mix(in srgb, var(--bg-color-pink-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pink-subtle: color-mix(in srgb, var(--bg-color-pink-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pink-subtle: color-mix(in srgb, var(--bg-color-pink-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Green */
/* Green */
--bg-color-green--hsl: 124.55deg 48.53%;
--bg-color-green--hsl: 124.55deg 48.53%;
--bg-color-green--hsl-alpha: 26.67%;
--bg-color-green--hsl-alpha: 26.67%;
--bg-color-green-50: color-mix(in srgb, var(--bg-color-green-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-green-50: hsl(var(--bg-color-green--hsl) calc(var(--brightness-hsl) + var(--bg-color-green--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-green-100: hsl(var(--bg-color-green--hsl) calc(var(--brightness-hsl) + var(--bg-color-green--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-green-100: hsl(var(--bg-color-green--hsl) calc(var(--brightness-hsl) + var(--bg-color-green--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-green-150: hsl(var(--bg-color-green--hsl) calc(var(--brightness-hsl) + var(--bg-color-green--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-green-150: hsl(var(--bg-color-green--hsl) calc(var(--brightness-hsl) + var(--bg-color-green--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-green-dark: color-mix(in srgb, var(--bg-color-green-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-green-subtle: color-mix(in srgb, var(--bg-color-green-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-green-subtle: color-mix(in srgb, var(--bg-color-green-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Emerald */
/* Emerald */
--bg-color-emerald--hsl: 155.00deg 94.12%;
--bg-color-emerald--hsl: 155.00deg 94.12%;
--bg-color-emerald--hsl-alpha: 20.00%;
--bg-color-emerald--hsl-alpha: 20.00%;
--bg-color-emerald-50: color-mix(in srgb, var(--bg-color-emerald-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-emerald-50: hsl(var(--bg-color-emerald--hsl) calc(var(--brightness-hsl) + var(--bg-color-emerald--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-emerald-100: hsl(var(--bg-color-emerald--hsl) calc(var(--brightness-hsl) + var(--bg-color-emerald--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-emerald-100: hsl(var(--bg-color-emerald--hsl) calc(var(--brightness-hsl) + var(--bg-color-emerald--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-emerald-150: hsl(var(--bg-color-emerald--hsl) calc(var(--brightness-hsl) + var(--bg-color-emerald--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-emerald-150: hsl(var(--bg-color-emerald--hsl) calc(var(--brightness-hsl) + var(--bg-color-emerald--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-emerald-dark: color-mix(in srgb, var(--bg-color-emerald-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-emerald-subtle: color-mix(in srgb, var(--bg-color-emerald-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-emerald-subtle: color-mix(in srgb, var(--bg-color-emerald-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Red */
/* Pastel Red */
--bg-color-pastel-red--hsl: 351.21deg 66.67%;
--bg-color-pastel-red--hsl: 351.21deg 66.67%;
--bg-color-pastel-red--hsl-alpha: 34.12%;
--bg-color-pastel-red--hsl-alpha: 34.12%;
--bg-color-pastel-red-50: color-mix(in srgb, var(--bg-color-pastel-red-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-red-50: hsl(var(--bg-color-pastel-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-red--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-red-100: hsl(var(--bg-color-pastel-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-red--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-red-100: hsl(var(--bg-color-pastel-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-red--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-red-150: hsl(var(--bg-color-pastel-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-red--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-red-150: hsl(var(--bg-color-pastel-red--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-red--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-red-dark: color-mix(in srgb, var(--bg-color-pastel-red-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-red-subtle: color-mix(in srgb, var(--bg-color-pastel-red-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-red-subtle: color-mix(in srgb, var(--bg-color-pastel-red-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Blue */
/* Pastel Blue */
--bg-color-pastel-blue--hsl: 246.32deg 28.93%;
--bg-color-pastel-blue--hsl: 246.32deg 28.93%;
--bg-color-pastel-blue--hsl-alpha: 38.63%;
--bg-color-pastel-blue--hsl-alpha: 38.63%;
--bg-color-pastel-blue-50: color-mix(in srgb, var(--bg-color-pastel-blue-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-blue-50: hsl(var(--bg-color-pastel-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-blue--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-blue-100: hsl(var(--bg-color-pastel-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-blue-100: hsl(var(--bg-color-pastel-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-blue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-blue-150: hsl(var(--bg-color-pastel-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-blue-150: hsl(var(--bg-color-pastel-blue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-blue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-blue-dark: color-mix(in srgb, var(--bg-color-pastel-blue-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-blue-subtle: color-mix(in srgb, var(--bg-color-pastel-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-blue-subtle: color-mix(in srgb, var(--bg-color-pastel-blue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Skyblue */
/* Pastel Skyblue */
--bg-color-pastel-skyblue--hsl: 195.00deg 41.10%;
--bg-color-pastel-skyblue--hsl: 195.00deg 41.10%;
--bg-color-pastel-skyblue--hsl-alpha: 28.63%;
--bg-color-pastel-skyblue--hsl-alpha: 28.63%;
--bg-color-pastel-skyblue-50: color-mix(in srgb, var(--bg-color-pastel-skyblue-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-skyblue-50: hsl(var(--bg-color-pastel-skyblue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-skyblue--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-skyblue-100: hsl(var(--bg-color-pastel-skyblue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-skyblue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-skyblue-100: hsl(var(--bg-color-pastel-skyblue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-skyblue--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-skyblue-150: hsl(var(--bg-color-pastel-skyblue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-skyblue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-skyblue-150: hsl(var(--bg-color-pastel-skyblue--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-skyblue--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-skyblue-dark: color-mix(in srgb, var(--bg-color-pastel-skyblue-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-skyblue-subtle: color-mix(in srgb, var(--bg-color-pastel-skyblue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-skyblue-subtle: color-mix(in srgb, var(--bg-color-pastel-skyblue-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Magenta */
/* Pastel Magenta */
--bg-color-pastel-magenta--hsl: 309.35deg 44.51%;
--bg-color-pastel-magenta--hsl: 309.35deg 44.51%;
--bg-color-pastel-magenta--hsl-alpha: 33.92%;
--bg-color-pastel-magenta--hsl-alpha: 33.92%;
--bg-color-pastel-magenta-50: color-mix(in srgb, var(--bg-color-pastel-magenta-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-magenta-50: hsl(var(--bg-color-pastel-magenta--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-magenta--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-magenta-100: hsl(var(--bg-color-pastel-magenta--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-magenta--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-magenta-100: hsl(var(--bg-color-pastel-magenta--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-magenta--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-magenta-150: hsl(var(--bg-color-pastel-magenta--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-magenta--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-magenta-150: hsl(var(--bg-color-pastel-magenta--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-magenta--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-magenta-dark: color-mix(in srgb, var(--bg-color-pastel-magenta-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-magenta-subtle: color-mix(in srgb, var(--bg-color-pastel-magenta-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-magenta-subtle: color-mix(in srgb, var(--bg-color-pastel-magenta-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Lime */
/* Pastel Lime */
--bg-color-pastel-lime--hsl: 85.71deg 47.19%;
--bg-color-pastel-lime--hsl: 85.71deg 47.19%;
--bg-color-pastel-lime--hsl-alpha: 34.90%;
--bg-color-pastel-lime--hsl-alpha: 34.90%;
--bg-color-pastel-lime-50: color-mix(in srgb, var(--bg-color-pastel-lime-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-lime-50: hsl(var(--bg-color-pastel-lime--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-lime--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-lime-100: hsl(var(--bg-color-pastel-lime--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-lime--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-lime-100: hsl(var(--bg-color-pastel-lime--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-lime--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-lime-150: hsl(var(--bg-color-pastel-lime--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-lime--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-lime-150: hsl(var(--bg-color-pastel-lime--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-lime--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-lime-dark: color-mix(in srgb, var(--bg-color-pastel-lime-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-lime-subtle: color-mix(in srgb, var(--bg-color-pastel-lime-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-lime-subtle: color-mix(in srgb, var(--bg-color-pastel-lime-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Turquoise */
/* Pastel Turquoise */
--bg-color-pastel-turquoise--hsl: 176.84deg 35.40%;
--bg-color-pastel-turquoise--hsl: 176.84deg 35.40%;
--bg-color-pastel-turquoise--hsl-alpha: 31.57%;
--bg-color-pastel-turquoise--hsl-alpha: 31.57%;
--bg-color-pastel-turquoise-50: color-mix(in srgb, var(--bg-color-pastel-turquoise-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-turquoise-50: hsl(var(--bg-color-pastel-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-turquoise--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-turquoise-100: hsl(var(--bg-color-pastel-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-turquoise--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-turquoise-100: hsl(var(--bg-color-pastel-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-turquoise--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-turquoise-150: hsl(var(--bg-color-pastel-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-turquoise--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-turquoise-150: hsl(var(--bg-color-pastel-turquoise--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-turquoise--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-turquoise-dark: color-mix(in srgb, var(--bg-color-pastel-turquoise-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-turquoise-subtle: color-mix(in srgb, var(--bg-color-pastel-turquoise-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-turquoise-subtle: color-mix(in srgb, var(--bg-color-pastel-turquoise-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
 
/* Pastel Grey */
/* Pastel Grey */
--bg-color-pastel-grey--hsl: 45.00deg 5.41%;
--bg-color-pastel-grey--hsl: 45.00deg 5.41%;
--bg-color-pastel-grey--hsl-alpha: 43.53%;
--bg-color-pastel-grey--hsl-alpha: 43.53%;
--bg-color-pastel-grey-50: color-mix(in srgb, var(--bg-color-pastel-grey-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-grey-50: hsl(var(--bg-color-pastel-grey--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-grey--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-grey-100: hsl(var(--bg-color-pastel-grey--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-grey--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-grey-100: hsl(var(--bg-color-pastel-grey--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-grey--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-grey-150: hsl(var(--bg-color-pastel-grey--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-grey--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-grey-150: hsl(var(--bg-color-pastel-grey--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-grey--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-grey-dark: color-mix(in srgb, var(--bg-color-pastel-grey-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-grey-subtle: color-mix(in srgb, var(--bg-color-pastel-grey-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-grey-subtle: color-mix(in srgb, var(--bg-color-pastel-grey-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));


Строка 288: Строка 317:
--bg-color-pastel-orange--hsl: 15.43deg 54.40%;
--bg-color-pastel-orange--hsl: 15.43deg 54.40%;
--bg-color-pastel-orange--hsl-alpha: 37.84%;
--bg-color-pastel-orange--hsl-alpha: 37.84%;
--bg-color-pastel-orange-50: color-mix(in srgb, var(--bg-color-pastel-orange-100) var(--color-shift-percent-50), var(--theme-bg-color-100));
--bg-color-pastel-orange-50: hsl(var(--bg-color-pastel-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-orange--hsl-alpha) + var(--color-shift-percent-50)));
--bg-color-pastel-orange-100: hsl(var(--bg-color-pastel-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-orange--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-orange-100: hsl(var(--bg-color-pastel-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-orange--hsl-alpha) + var(--color-shift-percent-100)));
--bg-color-pastel-orange-150: hsl(var(--bg-color-pastel-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-orange--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-orange-150: hsl(var(--bg-color-pastel-orange--hsl) calc(var(--brightness-hsl) + var(--bg-color-pastel-orange--hsl-alpha) + var(--color-shift-percent-150)));
--bg-color-pastel-orange-dark: color-mix(in srgb, var(--bg-color-pastel-orange-100) var(--color-shift-percent-dark), var(--theme-bg-color-100));
--bg-color-pastel-orange-subtle: color-mix(in srgb, var(--bg-color-pastel-orange-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));
--bg-color-pastel-orange-subtle: color-mix(in srgb, var(--bg-color-pastel-orange-100) var(--color-shift-percent-subtle), var(--theme-bg-color-250));


Источник — https://station14.ru/wiki/MediaWiki:Common.css