Шаблон:DepartmentTabs/styles.css - История изменений

Admin: Переработка навигационных вкладок отделов: спокойные чипы в стиле вики

2026-09-21T23:43:25Z

Переработка навигационных вкладок отделов: спокойные чипы в стиле вики

← Предыдущая версия		Версия от 23:43, 21 сентября 2026
Строка 1:		Строка 1:
			/* DepartmentTabs — understated chips in the wiki's own panel style.
			Department colour comes from the --deptab-* variables set inline by
			{{ColorPaletteStyles\|Color\|deptab}}; it only accents the tab that matters. */

	.department-tabs {		.department-tabs {
	~~overflow: auto;~~
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	~~flex-grow~~: 1;		gap: 0.35rem;
	~~gap~~: ~~0.25rem~~;		overflow: auto;
	}		}

	.department-tab {		.department-tab {
			position: relative;
	display: inline-flex;		display: inline-flex;
	~~position: relative;~~		flex: 1 1 auto;
	flex~~-grow~~: 1;		min-width: 0;
	~~flex~~-~~basis~~: 5%;
	}		}

	.department-tab a {		.department-tab a {
	flex~~-grow~~: 1;		position: relative;
	align-content: center;		overflow: hidden;
			display: flex;
			flex: 1 1 auto;
			align-items: center;
			justify-content: center;
			padding: 0.3em 0.9em;
			font-size: 0.85rem;
			font-weight: bold;
			line-height: 1.4;
			white-space: nowrap;
	text-align: center;		text-align: center;
	~~font-weight: bold;~~		color: var(--ink);
	~~height: 1.5em;~~		background-color: var(--panel);
	~~padding: 0.25em 1em;~~		border: 1px solid var(--border);
	~~background-~~color: var(--~~deptab~~);
	color: ~~rgba~~(~~255, 255, 255, 0.92~~);
	border: 1px solid var(--~~deptab-hover~~);
	border-radius: 6px;		border-radius: 6px;
	transition-property: background-color, color~~, box-shadow~~;		transition-property: background-color, border-color;
	transition-duration: 0.15s;		transition-duration: 0.15s;
	}		}

	.department-tab a:hover {		.department-tab a:hover {
	background-color: var(--deptab-~~hover~~);		background-color: var(--deptab-25);
	color: ~~#ffffff~~;		border: 1px solid var(--deptab-50);
			color: var(--ink);
			text-decoration: none;
			}

			.department-tab a.mw-selflink {
			background-color: var(--deptab-25) !important;
			border: 1px solid var(--deptab-50) !important;
			color: var(--ink) !important;
	}		}

	.department-tab a:~~active~~ {		.department-tab a.mw-selflink:after {
	background-color: var(--deptab);		content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 3px;
			background-color: var(--deptab-75);
	}		}

	.department-tab a~~.mw-selflink~~ {		@media (prefers-reduced-motion: reduce) {
	~~background-color: var(--deptab-hover) !important;~~		.department-tab a {
	~~color: #ffffff !important;~~		transition-duration: 0s;
	~~box~~-~~shadow~~: ~~0 0 0.33em 1px var(--deptab-hover)~~;		}
	~~z-index: 2;~~
	}		}

Admin: Цветные вкладки отделов как на SS220 (TemplateStyles-safe)

2026-08-06T19:25:16Z

Цветные вкладки отделов как на SS220 (TemplateStyles-safe)

← Предыдущая версия		Версия от 19:25, 6 августа 2026
Строка 4:		Строка 4:
	flex-wrap: wrap;		flex-wrap: wrap;
	flex-grow: 1;		flex-grow: 1;
			gap: 0.25rem;
	}		}

Строка 15:		Строка 15:

	.department-tab a {		.department-tab a {

	flex-grow: 1;		flex-grow: 1;
	align-content: center;		align-content: center;
Строка 22:		Строка 21:
	height: 1.5em;		height: 1.5em;
	padding: 0.25em 1em;		padding: 0.25em 1em;
	background-color: ~~#d8dee8~~;		background-color: var(--deptab);
	color: rgba(0,0,0,.55);		color: rgba(255, 255, 255, 0.92);
	border: 1px solid ~~#c9d4e4;~~		border: 1px solid var(--deptab-hover);
	~~border~~-~~color: #9aa8bd~~;
	border-radius: 6px;		border-radius: 6px;
	transition-property: background-color, color;		transition-property: background-color, color, box-shadow;
			transition-duration: 0.15s;
	}		}

	.department-tab a:hover {		.department-tab a:hover {
	background-color: ~~#9aa8bd~~;		background-color: var(--deptab-hover);
	}		color: #ffffff;

	~~.department-tab a:active {~~
	~~background-~~color: #~~d8dee8~~;
	}		}

	~~.department-tab a:hover,~~
	.department-tab a:active {		.department-tab a:active {
	color: ~~#fff~~;		background-color: var(--deptab);
	}		}

	.department-tab a.mw-selflink {		.department-tab a.mw-selflink {
	background-color: ~~#9aa8bd~~ !important;		background-color: var(--deptab-hover) !important;
	color: #~~fff~~ !important;		color: #ffffff !important;
	box-shadow: 0 0 0.33em 1px ~~#9aa8bd~~;		box-shadow: 0 0 0.33em 1px var(--deptab-hover);
	z-index: 2;		z-index: 2;
	}		}

Admin: import TemplateStyles CSS

2026-08-02T17:15:09Z

import TemplateStyles CSS

Новая страница

.department-tabs {
overflow: auto;
display: flex;
flex-wrap: wrap;
flex-grow: 1;

}

.department-tab {
display: inline-flex;
position: relative;
flex-grow: 1;
flex-basis: 5%;
}

.department-tab a {

flex-grow: 1;
align-content: center;
text-align: center;
font-weight: bold;
height: 1.5em;
padding: 0.25em 1em;
background-color: #d8dee8;
color: rgba(0,0,0,.55);
border: 1px solid #c9d4e4;
border-color: #9aa8bd;
border-radius: 6px;
transition-property: background-color, color;
}

.department-tab a:hover {
background-color: #9aa8bd;
}

.department-tab a:active {
background-color: #d8dee8;
}

.department-tab a:hover,
.department-tab a:active {
color: #fff;
}

.department-tab a.mw-selflink {
background-color: #9aa8bd !important;
color: #fff !important;
box-shadow: 0 0 0.33em 1px #9aa8bd;
z-index: 2;
}