MediaWiki:Common.css - Revision history

Niebieski at 21:20, 2 February 2026

2026-02-02T21:20:14Z

← Older revision		Revision as of 21:20, 2 February 2026
Line 197:		Line 197:
	}		}

	~~/* Tooltip wrapper */~~
	~~/* Tooltip wrapper */~~
	.tooltip-wrapper {		.tooltip-wrapper {
	position: relative;		position: relative;
Line 205:		Line 203:

	.tooltip-wrapper img {		.tooltip-wrapper img {
	cursor: pointer; ~~/* tylko obrazek reaguje wizualnie */~~		cursor: pointer;
	}		}

	~~/* Tooltip główny */~~
	.tooltip-wrapper .custom-tooltip {		.tooltip-wrapper .custom-tooltip {
	position: absolute;		position: absolute;
Line 217:		Line 214:
	visibility: hidden;		visibility: hidden;
	transition: opacity 0.15s ease-in-out;		transition: opacity 0.15s ease-in-out;

	background: rgba(24, 18, 61, 0.95);		background: rgba(24, 18, 61, 0.95);
	padding: 8px;		padding: 8px;
Line 226:		Line 222:
	line-height: 1.3;		line-height: 1.3;
	z-index: 9999;		z-index: 9999;

	width: auto;		width: auto;
	max-width: 90vw; ~~/* tooltip nie wychodzi poza ekran */~~		max-width: 90vw;
	overflow: visible;		overflow: visible;
	white-space: normal;		white-space: normal;

	~~/* FLEX dla całego tooltipa, pionowo: górna część i tabele */~~
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 244:		Line 237:
	}		}

	~~/* Obrazek i nazwa (górna część) */~~
	.tooltip-header {		.tooltip-header {
	display: flex;		display: flex;
Line 261:		Line 253:
	}		}

	~~/* Kontener tabel */~~
	.tooltip-tables-container {		.tooltip-tables-container {
	display: grid;		display: grid;
	grid-template-columns: repeat(3, 1fr); ~~/* maksymalnie 3 tabele w rzędzie */~~		grid-template-columns: repeat(3, 1fr);
	gap: 5px;		gap: 5px;
	width: 100%;		width: 100%;
Line 270:		Line 261:
	}		}

	~~/* Każda tabela w tooltipie */~~
	.tooltip-table-container {		.tooltip-table-container {
	width: 100%;		width: 100%;
Line 284:		Line 274:
	}		}

	~~/* Tabele */~~
	.tooltip-wrapper .custom-tooltip table {		.tooltip-wrapper .custom-tooltip table {
	width: 100% !important;		width: 100% !important;
Line 309:		Line 298:
	}		}

	~~/* Linki */~~
	.tooltip-wrapper .custom-tooltip a {		.tooltip-wrapper .custom-tooltip a {
	color: #cbb4ff;		color: #cbb4ff;

Niebieski at 21:16, 2 February 2026

2026-02-02T21:16:16Z

← Older revision		Revision as of 21:16, 2 February 2026
Line 197:		Line 197:
	}		}

			/* Tooltip wrapper */
	/* Tooltip wrapper */		/* Tooltip wrapper */
	.tooltip-wrapper {		.tooltip-wrapper {
Line 228:		Line 229:
	width: auto;		width: auto;
	max-width: 90vw; /* tooltip nie wychodzi poza ekran */		max-width: 90vw; /* tooltip nie wychodzi poza ekran */
	~~height: auto;~~
	overflow: visible;		overflow: visible;
	white-space: normal;		white-space: normal;

	/* 🔹 FLEX dla ~~zawartości~~ tooltipa ~~(góra/dół)~~ */		/* FLEX dla całego tooltipa, pionowo: górna część i tabele */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	align-items: center;		align-items: center;
	gap: ~~5px~~;		gap: 6px;
	}		}

Line 244:		Line 244:
	}		}

	/* Obrazek + nazwa ~~w tooltipie~~ */		/* Obrazek i nazwa (górna część) */
			.tooltip-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 3px;
			}

	.tooltip-item-image {		.tooltip-item-image {
	text-align: center;		text-align: center;
	~~margin-bottom: 3px;~~
	}		}

Line 253:		Line 259:
	text-align: center;		text-align: center;
	font-weight: bold;		font-weight: bold;
	~~margin-bottom: 6px;~~
	}		}

	/* Kontener tabel ~~poniżej obrazka i nazwy~~ */		/* Kontener tabel */
	.tooltip-tables-container {		.tooltip-tables-container {
	display: grid;		display: grid;
	grid-template-columns: repeat(~~auto-fill, minmax(120px~~, 1fr));		grid-template-columns: repeat(3, 1fr); /* maksymalnie 3 tabele w rzędzie */
	gap: 5px;		gap: 5px;
	width: 100%;		width: 100%;
Line 273:		Line 278:
	}		}

	~~/* Nagłówek tabeli */~~
	.tooltip-table-header {		.tooltip-table-header {
	text-align: center;		text-align: center;
Line 305:		Line 309:
	}		}

	/* Linki ~~w tooltipie~~ */		/* Linki */
	.tooltip-wrapper .custom-tooltip a {		.tooltip-wrapper .custom-tooltip a {
	color: #cbb4ff;		color: #cbb4ff;

Niebieski at 21:14, 2 February 2026

2026-02-02T21:14:00Z

← Older revision		Revision as of 21:14, 2 February 2026
Line 197:		Line 197:
	}		}

			/* Tooltip wrapper */
	.tooltip-wrapper {		.tooltip-wrapper {
	position: relative;		position: relative;
Line 206:		Line 207:
	}		}

			/* Tooltip główny */
	.tooltip-wrapper .custom-tooltip {		.tooltip-wrapper .custom-tooltip {
	position: absolute;		position: absolute;
Line 214:		Line 216:
	visibility: hidden;		visibility: hidden;
	transition: opacity 0.15s ease-in-out;		transition: opacity 0.15s ease-in-out;

	~~display: grid;~~
	~~grid-template-columns: repeat(3, minmax(120px, 1fr));~~
	~~gap: 5px;~~

	background: rgba(24, 18, 61, 0.95);		background: rgba(24, 18, 61, 0.95);
	padding: ~~6px~~;		padding: 8px;
	border-radius: 6px;		border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.15);		border: 1px solid rgba(255,255,255,0.15);
Line 231:		Line 229:
	max-width: 90vw; /* tooltip nie wychodzi poza ekran */		max-width: 90vw; /* tooltip nie wychodzi poza ekran */
	height: auto;		height: auto;
	overflow: visible; ~~/* klucz, żeby nic się nie ucinało */~~		overflow: visible;
	white-space: normal;		white-space: normal;

			/* 🔹 FLEX dla zawartości tooltipa (góra/dół) */
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
	}		}

Line 240:		Line 244:
	}		}

			/* Obrazek + nazwa w tooltipie */
			.tooltip-item-image {
			text-align: center;
			margin-bottom: 3px;
			}

			.tooltip-item-name {
			text-align: center;
			font-weight: bold;
			margin-bottom: 6px;
			}

			/* Kontener tabel poniżej obrazka i nazwy */
			.tooltip-tables-container {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
			gap: 5px;
			width: 100%;
			justify-items: center;
			}

			/* Każda tabela w tooltipie */
	.tooltip-table-container {		.tooltip-table-container {
	width: 100% ~~!important~~;		width: 100%;
	min-width: 120px;		min-width: 120px;
			max-width: 300px;
	box-sizing: border-box;		box-sizing: border-box;
	}		}

			/* Nagłówek tabeli */
	.tooltip-table-header {		.tooltip-table-header {
	text-align: center;		text-align: center;
Line 255:		Line 280:
	}		}

	/* ~~tabele NIE mogą mieć 100% z globalnych styli~~ */		/* Tabele */
	.tooltip-wrapper .custom-tooltip table {		.tooltip-wrapper .custom-tooltip table {
	width: 100% !important;		width: 100% !important;
			border-collapse: collapse;
	margin: 0;		margin: 0;
			}

			.tooltip-wrapper .custom-tooltip table th,
			.tooltip-wrapper .custom-tooltip table td {
			border: 1px solid rgba(255, 255, 255, 0.15);
			padding: 0.5em;
			color: #e2d8ff;
			background: rgba(24, 18, 61, 0.85);
			text-align: left;
			}

			.tooltip-wrapper .custom-tooltip table th {
			background: rgba(126, 96, 195, 0.3);
			font-weight: normal;
			}

			.tooltip-wrapper .custom-tooltip table tr:hover td {
			background: rgba(126, 96, 195, 0.2);
			}

			/* Linki w tooltipie */
			.tooltip-wrapper .custom-tooltip a {
			color: #cbb4ff;
			text-decoration: none;
			}

			.tooltip-wrapper .custom-tooltip a:hover {
			color: #e2d8ff;
			text-decoration: underline;
	}		}

Niebieski at 20:41, 2 February 2026

2026-02-02T20:41:15Z

← Older revision		Revision as of 20:41, 2 February 2026
Line 214:		Line 214:
	visibility: hidden;		visibility: hidden;
	transition: opacity 0.15s ease-in-out;		transition: opacity 0.15s ease-in-out;

	display: grid;		display: grid;
	grid-template-columns: repeat(3, minmax(120px, 1fr));		grid-template-columns: repeat(3, minmax(120px, 1fr));
	gap: 5px;		gap: 5px;

	background: rgba(24, 18, 61, 0.95);		background: rgba(24, 18, 61, 0.95);
	padding: 6px;		padding: 6px;
Line 225:		Line 227:
	line-height: 1.3;		line-height: 1.3;
	z-index: 9999;		z-index: 9999;

			width: auto;
			max-width: 90vw; /* tooltip nie wychodzi poza ekran */
			height: auto;
			overflow: visible; /* klucz, żeby nic się nie ucinało */
			white-space: normal;
	}		}

Line 231:		Line 239:
	visibility: visible;		visibility: visible;
	}		}

Niebieski at 20:39, 2 February 2026

2026-02-02T20:39:59Z

← Older revision		Revision as of 20:39, 2 February 2026
Line 200:		Line 200:
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
	~~line-height: 0;~~
	~~cursor: pointer;~~
	}		}

	~~/* Tooltip główny */~~
	~~/* === TOOLTIP MULTI-TABLE FIX (FINAL) === */~~

	.tooltip-wrapper img {		.tooltip-wrapper img {
	cursor: pointer; /* tylko obrazek reaguje */		cursor: pointer; /* tylko obrazek reaguje wizualnie */
	}		}

Line 232:		Line 227:
	}		}

	.tooltip-wrapper ~~img~~:hover + .custom-tooltip {		.tooltip-wrapper:hover .custom-tooltip {
	opacity: 1;		opacity: 1;
	visibility: visible;		visibility: visible;
	}		}

Niebieski at 20:38, 2 February 2026

2026-02-02T20:38:12Z

← Older revision		Revision as of 20:38, 2 February 2026
Line 206:		Line 206:
	/* Tooltip główny */		/* Tooltip główny */
	/* === TOOLTIP MULTI-TABLE FIX (FINAL) === */		/* === TOOLTIP MULTI-TABLE FIX (FINAL) === */

			.tooltip-wrapper img {
			cursor: pointer; /* tylko obrazek reaguje */
			}

	.tooltip-wrapper .custom-tooltip {		.tooltip-wrapper .custom-tooltip {
	~~display: none !important;~~
	position: absolute;		position: absolute;
	top: 100%;		top: 100%;
	left: 50%;		left: 50%;
	transform: translateX(-50%);		transform: translateX(-50%);
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.15s ease-in-out;
			display: grid;
			grid-template-columns: repeat(3, minmax(120px, 1fr));
			gap: 5px;
			background: rgba(24, 18, 61, 0.95);
	padding: 6px;		padding: 6px;
	~~background~~: ~~rgba(24, 18, 61, 0.95)~~;		border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.15);		border: 1px solid rgba(255,255,255,0.15);
	~~border-radius: 6px;~~
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	~~z-index: 9999;~~

	font-size: 0.7em;		font-size: 0.7em;
	line-height: 1.3;		line-height: 1.3;
			z-index: 9999;
	~~/* 🔥 GRID zamiast flex */~~
	~~display: grid !important;~~
	~~grid-template-columns: repeat(3, minmax(120px, 1fr));~~
	~~gap: 5px;~~

	~~width: auto !important;~~
	~~max~~-~~width~~: ~~unset !important;~~
	~~min-width: unset !important;~~

	~~white-space: normal;~~
	~~opacity: 0;~~
	~~transition: opacity 0.15s ease-in-out~~;
	}		}

	.tooltip-wrapper:hover .custom-tooltip {		.tooltip-wrapper img:hover + .custom-tooltip {
	~~display: grid !important;~~
	opacity: 1;		opacity: 1;
			visibility: visible;
	}		}


	.tooltip-table-container {		.tooltip-table-container {

Niebieski at 20:37, 2 February 2026

2026-02-02T20:37:02Z

← Older revision		Revision as of 20:37, 2 February 2026
Line 238:		Line 238:
	}		}

	.tooltip-wrapper ~~img~~:hover ~.custom-tooltip {		.tooltip-wrapper:hover .custom-tooltip {
	display: grid !important;		display: grid !important;
	opacity: 1;		opacity: 1;

Niebieski at 20:36, 2 February 2026

2026-02-02T20:36:21Z

← Older revision		Revision as of 20:36, 2 February 2026
Line 238:		Line 238:
	}		}

	.tooltip-wrapper:hover .custom-tooltip {		.tooltip-wrapper img:hover ~.custom-tooltip {
	display: grid !important;		display: grid !important;
	opacity: 1;		opacity: 1;

Niebieski at 20:34, 2 February 2026

2026-02-02T20:34:44Z

← Older revision		Revision as of 20:34, 2 February 2026
Line 238:		Line 238:
	}		}

	.tooltip-wrapper ~~img~~:hover .custom-tooltip {		.tooltip-wrapper:hover .custom-tooltip {
	display: grid !important;		display: grid !important;
	opacity: 1;		opacity: 1;

Niebieski at 20:34, 2 February 2026

2026-02-02T20:34:25Z

← Older revision		Revision as of 20:34, 2 February 2026
Line 238:		Line 238:
	}		}

	.tooltip-wrapper:hover .custom-tooltip {		.tooltip-wrapper img:hover .custom-tooltip {
	display: grid !important;		display: grid !important;
	opacity: 1;		opacity: 1;