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

Fire Helper в 16:55, 23 июня 2026

2026-06-23T16:55:37Z

← Предыдущая версия		Версия от 18:55, 23 июня 2026
Строка 94:		Строка 94:
	}		}

	.RoleTable-block_content {		div.RoleTable-block_content {
	padding: 0;		padding: 0;
	line-height: 1.3;		line-height: 1.3;
	font-size: 13px;		font-size: 13px;
			}

			div.RoleTable-block_content p {
			margin: 0 !important;
			padding: 0 !important;
	}		}

Fire Helper в 16:44, 23 июня 2026

2026-06-23T16:44:35Z

← Предыдущая версия		Версия от 18:44, 23 июня 2026
Строка 1:		Строка 1:
	~~div~~.RoleTable-card {		.RoleTable-card {
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Строка 9:		Строка 9:
	}		}

	~~div~~.RoleTable-card_header {		.RoleTable-card_header {
	border-radius: 3px;		border-radius: 3px;
	text-align: center;		text-align: center;
	}		}

	~~div~~.RoleTable-card_header_title {		.RoleTable-card_header_title {
	display: flex;		display: flex;
	justify-content: space-between;		justify-content: space-between;
Строка 21:		Строка 21:
	}		}

	~~div~~.RoleTable-header_icon {		.RoleTable-header_icon {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
Строка 39:		Строка 39:
	}		}

	~~div~~.RoleTable-card_content {		.RoleTable-card_content {
	margin-top: 3px;		margin-top: 3px;
	width: 100%;		width: 100%;
Строка 87:		Строка 87:
	}		}

	~~div~~.RoleTable-block_title {		.RoleTable-block_title {
	font-weight: bold;		font-weight: bold;
	font-size: 12px;		font-size: 12px;
Строка 94:		Строка 94:
	}		}

	~~div~~.RoleTable-block_content {		.RoleTable-block_content {
	padding: 0;		padding: 0;
	line-height: 1.3;		line-height: 1.3;
Строка 115:		Строка 115:
	}		}

	~~div~~.card_headerRole {		.card_headerRole {
	height: 34px;		height: 34px;
	display: flex;		display: flex;
Строка 124:		Строка 124:
	}		}

	~~div~~.card_header_titleRole {		.card_header_titleRole {
	width: 100%;		width: 100%;
	}		}
Строка 161:		Строка 161:
	}		}

	~~div~~.fixed_imageRole {		.fixed_imageRole {
	padding: 2px;		padding: 2px;
	}		}

Fire Helper в 16:40, 23 июня 2026

2026-06-23T16:40:42Z

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

Fire Helper в 16:28, 23 июня 2026

2026-06-23T16:28:55Z

← Предыдущая версия		Версия от 18:28, 23 июня 2026
Строка 30:		Строка 30:
	margin: 0 !important;		margin: 0 !important;
	color: white;		color: white;
	font-size: ~~14px~~;		font-size: 15px;
	font-weight: bold;		font-weight: bold;
	text-align: center;		text-align: center;
Строка 49:		Строка 49:
	flex-direction: row !important;		flex-direction: row !important;
	flex-wrap: wrap !important;		flex-wrap: wrap !important;
	justify-content: ~~flex-start~~ !important;		justify-content: center !important;
	align-items: flex-start !important;		align-items: flex-start !important;
	gap: 8px !important;		gap: 8px !important;
Строка 56:		Строка 56:
	box-sizing: border-box;		box-sizing: border-box;
	width: 100%;		width: 100%;
	~~background~~-~~color: rgba(0~~, 0, 0, 0.~~15)~~;		}

			.RoleTable-content_main > p,
			.RoleTable-content_secondary > p {
			display: contents !important;
			}
			.RoleTable-content_main > br,
			.RoleTable-content_main > p > br,
			.RoleTable-content_secondary > br,
			.RoleTable-content_secondary > p > br {
			display: none !important;
	}		}

Строка 62:		Строка 72:
	display: grid;		display: grid;
	grid-template-columns: repeat(2, 1fr);		grid-template-columns: repeat(2, 1fr);
	gap: ~~3px~~;		gap: 4px;
	margin-top: ~~3px~~;		margin-top: 4px;
	width: 100%;		width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
Строка 75:		Строка 85:
	border-radius: 3px;		border-radius: 3px;
	padding: 6px;		padding: 6px;
	~~font-size: 12px;~~
	~~background-color: rgba(0, 0, 0, 0.1);~~
	}		}

Строка 83:		Строка 91:
	font-size: 12px;		font-size: 12px;
	margin-bottom: 2px;		margin-bottom: 2px;
			text-align: center;
	}		}

Строка 88:		Строка 97:
	padding: 0;		padding: 0;
	line-height: 1.3;		line-height: 1.3;
			font-size: 13px;
	}		}

	~~.RoleTable-content_main > p,~~
	~~.RoleTable-content_secondary > p {~~
	~~display: contents !important;~~
	}

	~~.RoleTable-content_main > br,~~
	~~.RoleTable-content_main > p > br,~~
	~~.RoleTable-content_secondary > br,~~
	~~.RoleTable-content_secondary > p > br {~~
	~~display: none !important;~~
	}

	.cardRole {		.cardRole {
	display: ~~inline-~~flex !important;		display: flex !important;
	flex-direction: column;		flex-direction: column;
	width: 120px !important;		width: 120px !important;
	max-width: 120px !important;		max-width: 120px !important;
	min-width: 120px !important;		min-width: 120px !important;
			height: 125px !important;
	border-radius: 4px;		border-radius: 4px;
	box-sizing: border-box;		box-sizing: border-box;
	~~height: 125px !important~~;
	overflow: hidden;		overflow: hidden;
	background-color: rgba(0, 0, 0, 0.2);		background-color: rgba(0, 0, 0, 0.2);
Строка 124:		Строка 123:
	padding: 2px 4px;		padding: 2px 4px;
	box-sizing: border-box;		box-sizing: border-box;
			}

			.card_header_titleRole {
			width: 100%;
	}		}

Строка 133:		Строка 136:
	line-height: 1.1;		line-height: 1.1;
	text-align: center;		text-align: center;
			word-wrap: break-word;
	}		}

Строка 147:		Строка 151:
	padding: 4px;		padding: 4px;
	box-sizing: border-box;		box-sizing: border-box;
			height: calc(100% - 34px) !important;
	}		}

Строка 152:		Строка 157:
	max-width: 64px !important;		max-width: 64px !important;
	max-height: 64px !important;		max-height: 64px !important;
			width: auto !important;
			height: auto !important;
	object-fit: contain;		object-fit: contain;
	}		}
Строка 165:		Строка 172:
	.cardRole {		.cardRole {
	width: calc(50% - 8px) !important;		width: calc(50% - 8px) !important;
	max-width: ~~100%~~ !important;		max-width: 160px !important;
	min-width: 100px !important;		min-width: 100px !important;
	}		}

Fire Helper в 16:00, 23 июня 2026

2026-06-23T16:00:16Z

← Предыдущая версия		Версия от 18:00, 23 июня 2026
Строка 29:		Строка 29:
	.RoleTable-card_title {		.RoleTable-card_title {
	margin: 0 !important;		margin: 0 !important;
	color :white;		color: white;
	font-size: 14px;		font-size: 14px;
	font-weight: bold;		font-weight: bold;
Строка 46:		Строка 46:

	.RoleTable-content_main {		.RoleTable-content_main {
			display: flex !important;
			flex-direction: row !important;
			flex-wrap: wrap !important;
			justify-content: flex-start !important;
			align-items: flex-start !important;
			gap: 8px !important;
	padding: 8px;		padding: 8px;
	~~display: flex;~~
	~~flex-wrap: wrap;~~
	~~justify-content: center;~~
	~~gap: 8px;~~
	border-radius: 3px;		border-radius: 3px;
	box-sizing: border-box;		box-sizing: border-box;
Строка 101:		Строка 103:

	.cardRole {		.cardRole {
	display: flex;		display: inline-flex !important;
	flex-direction: column;		flex-direction: column;
	width: 120px !important;		width: 120px !important;
Строка 111:		Строка 113:
	overflow: hidden;		overflow: hidden;
	background-color: rgba(0, 0, 0, 0.2);		background-color: rgba(0, 0, 0, 0.2);
	flex-shrink: 0;		flex-shrink: 0 !important;
			margin: 0 !important;
	}		}

Строка 158:		Строка 161:
	@media (max-width: 480px) {		@media (max-width: 480px) {
	.RoleTable-content_main {		.RoleTable-content_main {
	justify-content: center;		justify-content: center !important;
	}		}
	.cardRole {		.cardRole {
Строка 164:		Строка 167:
	max-width: 100% !important;		max-width: 100% !important;
	min-width: 100px !important;		min-width: 100px !important;
	}		}
	.RoleTable-content_secondary {		.RoleTable-content_secondary {
	grid-template-columns: 1fr;		grid-template-columns: 1fr;
	}		}
	}		}

Fire Helper в 15:51, 23 июня 2026

2026-06-23T15:51:50Z

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

Fire Helper в 16:24, 22 июня 2026

2026-06-22T16:24:37Z

← Предыдущая версия		Версия от 18:24, 22 июня 2026
Строка 50:		Строка 50:
	}		}

	~~/* ИСПРАВЛЕНО: Flexbox-версия, которая центрирует остатки во втором ряду */~~
	.RoleTable-content_main {		.RoleTable-content_main {
	padding: 8px;		padding: 8px;
	display: ~~flex~~; ~~/* Включаем Flexbox */~~		display: grid;
	~~flex~~-~~wrap~~: ~~wrap~~; /* ~~Разрешаем перенос~~ */		grid-template-columns: repeat(5, 1fr); /* Ровно 5 равных колонок в ряд */
	~~justify-content: center;~~
	gap: 8px;		gap: 8px;
	border-radius: 3px;		border-radius: 3px;
Строка 62:		Строка 60:
	}		}

	/* ИСПРАВЛЕНО: ~~Карточки занимают ровно столько места, чтобы в один ряд влезало ровно 5 штук~~ */		/* ИСПРАВЛЕНО: Безопасные размеры для карточек ролей внутри Grid */
	.cardRole {		.cardRole {
	~~flex~~: ~~0 1 calc(20~~% - ~~7px)~~;		width: 100% !important;
	min-width: ~~130px~~;		max-width: 100% !important;
			min-width: 0 !important;
	box-sizing: border-box;		box-sizing: border-box;
			}

			/* ФИШКА: Если во втором ряду остается одна карточка (например, 6-я), она автоматически встанет по центру */
			.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) {
			grid-column: 3;
	}		}

Строка 122:		Строка 126:

	/* Адаптация для мобильных телефонов */		/* Адаптация для мобильных телефонов */
	@media (max-width: ~~640px~~) {		@media (max-width: 768px) {
	.cardRole {		.RoleTable-content_main {
	~~flex~~: ~~0 1 calc~~(~~50%~~ - ~~5px~~); /* На телефонах ~~роли автоматически встанут~~ по 2 в ряд */		grid-template-columns: repeat(3, 1fr); /* На планшетах по 3 в ряд */
			}
			.RoleTable-content_main > .cardRole:last-child:nth-child(5n+1) {
			grid-column: auto;
			}
			}

			@media (max-width: 480px) {
			.RoleTable-content_main {
			grid-template-columns: repeat(2, 1fr); /* На телефонах по 2 в ряд */
	}		}

	.RoleTable-content_secondary {		.RoleTable-content_secondary {
	grid-template-columns: 1fr;		grid-template-columns: 1fr;
	}

	~~.RoleTable-content_block {~~
	~~min-width: 100%;~~
	}		}
	}		}

Fire Helper в 16:20, 22 июня 2026

2026-06-22T16:20:36Z

← Предыдущая версия		Версия от 18:20, 22 июня 2026
Строка 50:		Строка 50:
	}		}

	/* ИСПРАВЛЕНО: ~~Жёсткая сетка Grid на 5 колонок с автоподстройкой~~ */		/* ИСПРАВЛЕНО: Flexbox-версия, которая центрирует остатки во втором ряду */
	.RoleTable-content_main {		.RoleTable-content_main {
	padding: 8px;		padding: 8px;
	display: ~~grid~~;		display: flex; /* Включаем Flexbox */
	~~grid~~-~~template~~-~~columns~~: ~~repeat(5, 1fr)~~;		flex-wrap: wrap; /* Разрешаем перенос */
			justify-content: center;
	gap: 8px;		gap: 8px;
	border-radius: 3px;		border-radius: 3px;
Строка 61:		Строка 62:
	}		}

	/* ИСПРАВЛЕНО: ~~Убираем влияние внутренней ширины карточек~~ */		/* ИСПРАВЛЕНО: Карточки занимают ровно столько места, чтобы в один ряд влезало ровно 5 штук */
	.cardRole {		.cardRole {
	~~width~~: ~~100~~% ~~!important;~~		flex: 0 1 calc(20% - 7px);
	~~max~~-~~width: 100% !important~~;		min-width: 130px;
	min-width: ~~0 !important~~;
	box-sizing: border-box;		box-sizing: border-box;
	}		}
Строка 104:		Строка 104:
	}		}

	/* ~~Адаптация под разные экраны (чтобы на планшетах и телефонах не ломалось)~~ */		/* Полная гибкость для любых картинок */
	~~@media (max~~-~~width~~: ~~1024px) {~~		.card_imageRole {
	.~~RoleTable-content_main~~ {		width: 100%;
	~~grid~~-~~template-columns~~: ~~repeat(3, 1fr)~~; ~~/* На планшетах будет по 3 в ряд */~~		display: flex;
	}		justify-content: center;
			align-items: center;
			padding: 5px;
			box-sizing: border-box;
			}

			.card_imageRole img {
			width: 100% !important;
			height: auto !important;
			max-width: 128px;
			object-fit: contain;
	}		}

			/* Адаптация для мобильных телефонов */
	@media (max-width: 640px) {		@media (max-width: 640px) {
	.~~RoleTable-content_main~~ {		.cardRole {
	~~grid-template-columns~~: ~~repeat~~(~~2, 1fr~~); /* На ~~маленьких экранах~~ по 2 в ряд */		flex: 0 1 calc(50% - 5px); /* На телефонах роли автоматически встанут по 2 в ряд */
	}		}

Строка 122:		Строка 133:
	.RoleTable-content_block {		.RoleTable-content_block {
	min-width: 100%;		min-width: 100%;
	}

	~~.RoleTable-content_secondary > .RoleTable-content_block:only-child {~~
	~~grid-column: 1;~~
	}		}
	}		}

Fire Helper в 16:16, 22 июня 2026

2026-06-22T16:16:23Z

← Предыдущая версия		Версия от 18:16, 22 июня 2026
Строка 50:		Строка 50:
	}		}

	/* ИСПРАВЛЕНО: ~~Главный контейнер переведен~~ на ~~Flexbox~~ */		/* ИСПРАВЛЕНО: Жёсткая сетка Grid на 5 колонок с автоподстройкой */
	.RoleTable-content_main {		.RoleTable-content_main {
	padding: ~~5px~~;		padding: 8px;
	display: ~~flex~~; ~~/* Включаем Flexbox */~~		display: grid;
	~~flex~~-~~wrap~~: ~~wrap~~; ~~/* Разрешаем перенос строк */~~		grid-template-columns: repeat(5, 1fr);
	gap: 8px; ~~/* Отступы между карточками ролей */~~		gap: 8px;
	~~justify-content: center;/* Центруем карточки на любых экранах */~~
	border-radius: 3px;		border-radius: 3px;
	width: 100%;		width: 100%;
	box-sizing: border-box; ~~/* Защита от вылетов за края */~~		box-sizing: border-box;
	}		}

	/* ИСПРАВЛЕНО: ~~Правильные гибкие настройки для самих~~ карточек ~~ролей~~ */		/* ИСПРАВЛЕНО: Убираем влияние внутренней ширины карточек */
	.cardRole {		.cardRole {
	~~flex~~: ~~0 1 135px~~; ~~/* Базовая ширина карточки 135px (чтобы 5 штук точно влезали в ряд) */~~		width: 100% !important;
	max-width: ~~180px~~; ~~/* Ограничение, чтобы карточка не становилась слишком огромной */~~		max-width: 100% !important;
			min-width: 0 !important;
	box-sizing: border-box;		box-sizing: border-box;
	}		}
Строка 104:		Строка 104:
	}		}

	/* Адаптация ~~для мобильных~~ (~~для блоков Особое~~ и ~~Руководства~~) */		/* Адаптация под разные экраны (чтобы на планшетах и телефонах не ломалось) */
			@media (max-width: 1024px) {
			.RoleTable-content_main {
			grid-template-columns: repeat(3, 1fr); /* На планшетах будет по 3 в ряд */
			}
			}

	@media (max-width: 640px) {		@media (max-width: 640px) {
			.RoleTable-content_main {
			grid-template-columns: repeat(2, 1fr); /* На маленьких экранах по 2 в ряд */
			}

	.RoleTable-content_secondary {		.RoleTable-content_secondary {
	grid-template-columns: 1fr;		grid-template-columns: 1fr;

Fire Helper в 16:10, 22 июня 2026

2026-06-22T16:10:10Z

← Предыдущая версия		Версия от 18:10, 22 июня 2026
Строка 50:		Строка 50:
	}		}

			/* ИСПРАВЛЕНО: Главный контейнер переведен на Flexbox */
	.RoleTable-content_main {		.RoleTable-content_main {
	padding: ~~3px~~;		padding: 5px;
	display: ~~grid~~;		display: flex; /* Включаем Flexbox */
	~~grid-template~~-~~columns~~: ~~repeat(5, 1fr)~~;		flex-wrap: wrap; /* Разрешаем перенос строк */
	gap: ~~5px~~;		gap: 8px; /* Отступы между карточками ролей */
			justify-content: center;/* Центруем карточки на любых экранах */
	border-radius: 3px;		border-radius: 3px;
	width: 100%;		width: 100%;
	box-sizing: border-box; /* ~~ИСПРАВЛЕНО: Защищает сетку~~ от ~~вытягивания в один столбец~~ */		box-sizing: border-box; /* Защита от вылетов за края */
	}		}

	~~.RoleTable-content_main >~~ .cardRole {		/* ИСПРАВЛЕНО: Правильные гибкие настройки для самих карточек ролей */
	~~max-width~~: ~~none~~;		.cardRole {
	width: ~~100%~~;		flex: 0 1 135px; /* Базовая ширина карточки 135px (чтобы 5 штук точно влезали в ряд) */
	~~min~~-~~width~~: 0;		max-width: 180px; /* Ограничение, чтобы карточка не становилась слишком огромной */
			box-sizing: border-box;
	}		}

Строка 73:		Строка 76:
	margin-top: 3px;		margin-top: 3px;
	width: 100%;		width: 100%;
	box-sizing: border-box; ~~/* ИСПРАВЛЕНО: Безопасное отображение блоков */~~		box-sizing: border-box;
	}		}

Строка 101:		Строка 104:
	}		}

	/* Адаптация для ~~разных разрешений~~ */		/* Адаптация для мобильных (для блоков Особое и Руководства) */
	~~@media (max-width: 1440px) {~~
	~~.RoleTable-content_main {~~
	~~grid-template-columns: repeat(4, 1fr);~~
	}
	}

	~~@media (max-width: 1200px) {~~
	~~.RoleTable-content_main {~~
	~~grid-template-columns: repeat(3, 1fr);~~
	}
	}

	~~@media (max-width: 900px) {~~
	~~.RoleTable-content_main {~~
	~~grid-template-columns: repeat(2, 1fr);~~
	}
	}

	@media (max-width: 640px) {		@media (max-width: 640px) {
	~~.RoleTable-content_main,~~
	.RoleTable-content_secondary {		.RoleTable-content_secondary {
	grid-template-columns: 1fr;		grid-template-columns: 1fr;