MediaWiki:Common.css - Revision history

Admin at 13:43, 2 September 2025

2025-09-02T13:43:54Z

Admin at 13:36, 2 September 2025

2025-09-02T13:36:27Z

Admin at 13:29, 2 September 2025

2025-09-02T13:29:01Z

← Older revision		Revision as of 13:29, 2 September 2025
Line 219:		Line 219:
	.item-card{ min-height:130px; padding:14px 10px; }		.item-card{ min-height:130px; padding:14px 10px; }
	}		}

			/* FIX: pusta pierwsza kratka przez węzły tekstowe */
			.items-wrap{
			font-size: 0; /* białe znaki nie zajmują miejsca w gridzie */
			line-height: 0;
			grid-auto-flow: dense; /* wypełnia ewentualne luki */
			}

			/* Przywracamy normalne rozmiary tekstu wewnątrz kafelków */
			.items-wrap .item-card,
			.items-wrap .item-card .item-label,
			.items-wrap a { font-size: initial; line-height: initial; }

			/* Extra: ukryj automatyczne <br> / puste elementy */
			.items-wrap > br,
			.items-wrap > .mw-empty-elt { display: none !important; }

Admin at 13:20, 2 September 2025

2025-09-02T13:20:53Z

← Older revision		Revision as of 13:20, 2 September 2025
Line 171:		Line 171:
	max-width: 100%;		max-width: 100%;
	}		}
			/* === SIATKA LADNYCH KAFELKÓW === */
	/* ~~---~~ SIATKA KAFELKÓW ~~Z ITEMAMI ---~~ */		.items-wrap{
	.items-wrap {		display:grid;
	display: grid;		grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));		gap:16px;
	gap: 16px;		padding:10px 4px;
	padding: 10px 4px;
	}		}

	/* ~~Kafelek~~ */		/* MediaWiki lubi wstawiać <p> – niech nie zajmują komórek grida */
	.~~item~~-~~card~~ {		.items-wrap > p{ display:contents !important; margin:0 !important; }
	~~background~~: ~~#f7f9fc~~;
	~~border-radius~~: ~~16px;~~
	~~box-shadow: 0 2px 10px rgba(0,0,~~0~~,.06);~~
	~~display: flex;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	~~text-align: center;~~
	~~padding: 18px 14px;~~
	~~min-height: 150px~~;
	~~transition: transform .08s ease, box-shadow .2s ease;~~
	}

	/* ~~Klikalny~~ cały ~~kafelek~~ */		/* Link obejmuje cały kafel */
	.item-~~card a~~ {		.item-link{
	display: ~~flex;~~		display:block;
	~~flex-direction: column;~~		text-decoration:none !important;
	~~align-items: center;~~		color:inherit !important;
	~~gap: 10px~~;
	text-decoration: none !important;
	color: ~~#0f172a~~ !important; ~~/* normalny kolor */~~
	}		}

	/* ~~Redlink (strona nie istnieje) – też normalny kolor~~ */		/* Kafelek */
	.item-card ~~a.new~~ { ~~color~~: #~~0f172a !important~~; }		.item-card{
			background:#f7f9fc;
	~~/* Obrazek */~~		border-radius:16px;
	~~.item~~-~~card img {~~		box-shadow:0 2px 10px rgba(0,0,0,.06);
	~~width~~: ~~48px~~; height: ~~auto~~;		display:flex;
	~~image~~-~~rendering: pixelated~~;		flex-direction:column;
			align-items:center;
			justify-content:center;
			text-align:center;
			padding:18px 14px;
			min-height:150px;
			transition:transform .08s ease, box-shadow .2s ease;
	}		}

	/* ~~Podpis~~ */		/* Obrazek i podpis */
	.item-card .item-label {		.item-card img{ width:48px; height:auto; image-rendering:pixelated; }
	font-weight: 700;		.item-card .item-label{ margin-top:10px; font-weight:700; line-height:1.15; }
	line-height: 1.2;
	}

	/* Hover */		/* Hover */
	.item-card:hover {		.item-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	}

	/* ~~Tło sekcji (opcjonalnie)~~ */		/* Sekcje z miękkim tłem */
	.section-soft {		.section-soft{ background:#e9eff5; border-radius:16px; padding:16px; }
	background: #e9eff5;
	border-radius: 16px;
	padding: 16px;
	}

	/* Mobile ~~dopieszczone~~ */		/* Mobile */
	@media (max-width: 700px) {		@media (max-width:700px){
	.items-wrap { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }		.items-wrap{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
	.item-card { min-height: 130px; padding: 14px 10px; }		.item-card{ min-height:130px; padding:14px 10px; }
	}		}

Admin at 13:08, 2 September 2025

2025-09-02T13:08:36Z

← Older revision		Revision as of 13:08, 2 September 2025
Line 172:		Line 172:
	}		}

	/* ~~GRID na kafelki z itemami~~ */		/* --- SIATKA KAFELKÓW Z ITEMAMI --- */
	.~~item~~-~~grid~~ { display:~~flex~~; ~~flex~~-~~wrap~~:~~wrap~~; gap:~~10px~~; padding:10px 0; }		.items-wrap {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
			gap: 16px;
			padding: 10px 4px;
			}

	/* ~~Każdy link w siatce wygląda jak kafelek~~ */		/* Kafelek */
	.item-~~grid a~~ {		.item-card {
	~~display~~:~~flex~~;		background: #f7f9fc;
	~~flex~~-~~direction~~:~~column~~;		border-radius: 16px;
	~~align~~-~~items~~:~~center~~;		box-shadow: 0 2px 10px rgba(0,0,0,.06);
	~~gap~~:~~6px~~;		display: flex;
	~~padding:12px 14px;~~		align-items: center;
	~~min~~-~~width~~:~~160px~~;		justify-content: center;
	~~border~~-~~radius~~:~~12px;~~		text-align: center;
	~~background:#fff~~;		padding: 18px 14px;
	text-~~decoration~~:~~none~~;		min-height: 150px;
	~~color~~:~~inherit~~;		transition: transform .08s ease, box-shadow .2s ease;
	~~box~~-~~shadow~~:~~0 1px 2px rgba(0,0,0,.06)~~;
	transition:transform .~~05s~~ ease, box-shadow .2s ease;
	}		}

	/* ~~Sam obrazek~~ */		/* Klikalny cały kafelek */
	.item-~~grid~~ a img { image-rendering:pixelated; }		.item-card a {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			text-decoration: none !important;
			color: #0f172a !important; /* normalny kolor */
			}

			/* Redlink (strona nie istnieje) – też normalny kolor */
			.item-card a.new { color: #0f172a !important; }

			/* Obrazek */
			.item-card img {
			width: 48px; height: auto;
			image-rendering: pixelated;
			}

	/* ~~PODPIS – automatycznie z atrybutu title linku~~ */		/* Podpis */
	.item-~~grid a::after~~ {		.item-card .item-label {
	~~content: attr(title); /* ← TU magia */~~		font-weight: 700;
	font-weight:~~600~~;		line-height: 1.2;
	~~text~~-~~align~~:~~center~~;
	}		}

	/* Hover */		/* Hover */
	.item-~~grid a~~:hover {		.item-card:hover {
	transform: translateY(-~~1px~~);		transform: translateY(-2px);
	box-shadow:0 ~~4px 14px~~ rgba(0,0,0,.08);		box-shadow: 0 6px 18px rgba(0,0,0,.12);
	}		}

	/* ~~Dark mode~~ (opcjonalnie) */		/* Tło sekcji (opcjonalnie) */
	~~@media (prefers~~-~~color-scheme: dark)~~ {		.section-soft {
	~~.item-grid a {~~ background:#~~111827~~; ~~box~~-~~shadow~~:~~0 1px 2px rgba(0,0,0,.5)~~; }		background: #e9eff5;
			border-radius: 16px;
			padding: 16px;
	}		}

	/* Mobile */		/* Mobile dopieszczone */
	@media (max-width: ~~800px~~) {		@media (max-width: 700px) {
	.item-~~grid a~~ { min-~~width~~:~~140px~~; padding:10px ~~12px~~; }		.items-wrap { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
			.item-card { min-height: 130px; padding: 14px 10px; }
	}		}

Admin at 13:01, 2 September 2025

2025-09-02T13:01:17Z

@@ Line 170: / Line 170: @@
    overflow: auto;
    max-width: 100%;
+}

Admin at 10:41, 18 July 2025

2025-07-18T10:41:16Z

← Older revision		Revision as of 10:41, 18 July 2025
Line 70:		Line 70:
	.wikitable td {		.wikitable td {
	padding: 8px 12px !important;		padding: 8px 12px !important;
	~~white-space: nowrap !important;~~
	min-width: auto !important;		min-width: auto !important;
	}		}

Admin at 10:40, 18 July 2025

2025-07-18T10:40:20Z

← Older revision		Revision as of 10:40, 18 July 2025
Line 20:		Line 20:
	border: none !important;		border: none !important;
	vertical-align: middle !important;		vertical-align: middle !important;
	~~white-space: nowrap; /* nie łamie tekstu w nagłówkach */~~
	}		}

Admin at 10:39, 18 July 2025

2025-07-18T10:39:00Z

← Older revision		Revision as of 10:39, 18 July 2025
Line 57:		Line 57:


			/* --- RESPONSYWNE PRZEWIJANIE I CENTROWANIE NA MOBILNYCH --- */
	@media screen and (max-width: 800px) {		@media screen and (max-width: 800px) {
	~~/* pozwól, żeby ikony w kolumnie “Rewards” łamały się na kolejne wiersze */~~		.wikitable {
	.wikitable~~.custom-quests td:nth-child(2)~~ {		overflow-x: auto !important;
	~~display~~: ~~flex~~ !important;		margin: 0.5em auto !important; /* centrowanie */
	~~flex-wrap~~: ~~wrap~~ !important;		max-width: calc(100% - 1em) !important; /* uwzględnia padding artykułu */
	~~justify~~-~~content~~: ~~flex~~-~~start~~ !important;		padding: 0 0.1em; /* opcjonalny wewnętrzny margines */
	~~white~~-~~space~~: ~~normal~~ !important;		/* upewniamy się, że nie blokuje min-width */
			min-width: 0 !important;
	}		}
	~~/* zmniejsz ikonki~~, ~~żeby się lepiej zmieściły */~~		.wikitable th,
	.wikitable~~.custom-quests~~ td~~:nth-child(2) img~~ {		.wikitable td {
	~~width~~: ~~24px~~ !important;		padding: 8px 12px !important;
	~~height~~: ~~auto~~ !important;		white-space: nowrap !important;
	~~margin~~: ~~2px 4px 2px 0~~ !important;		min-width: auto !important;
	}		}
	/* ~~także pozwól mapce w kolumnie “Image” ładnie się zmieścić~~ */
	.~~wikitable~~.~~custom~~-~~quests td~~:~~nth~~-~~child(4~~) {		/* Infoboxy (np. Ancient Tiara) analogicznie */
	~~white~~-~~space~~: ~~normal~~ !important;		table.infobox {
			display: block !important;
			overflow-x: auto !important;
			margin: 0.5em auto !important;
			max-width: calc(100% - 1em) !important;
			min-width: 0 !important;
	}		}
	.~~wikitable.custom-quests~~ td~~:nth-child(4) img~~ {		table.infobox td {
	~~max~~-~~width: 80px !important;~~		white-space: nowrap !important;
	~~width: auto !important;~~
	~~margin~~: ~~0 auto~~ !important;
	}		}
	}		}

Admin at 10:38, 18 July 2025

2025-07-18T10:38:45Z

← Older revision		Revision as of 10:38, 18 July 2025
Line 57:		Line 57:


	~~/* --- RESPONSYWNE PRZEWIJANIE I CENTROWANIE NA MOBILNYCH --- */~~
	@media screen and (max-width: 800px) {		@media screen and (max-width: 800px) {
	.wikitable {		/* pozwól, żeby ikony w kolumnie “Rewards” łamały się na kolejne wiersze */
	~~overflow-x~~: ~~auto~~ !important;		.wikitable.custom-quests td:nth-child(2) {
	~~margin~~: ~~0.5em auto~~ !important; ~~/* centrowanie */~~		display: flex !important;
	~~max~~-~~width~~: ~~calc(100%~~ - ~~1em)~~ !important; ~~/* uwzględnia padding artykułu */~~		flex-wrap: wrap !important;
	~~padding: 0 0.1em; /* opcjonalny wewnętrzny margines */~~		justify-content: flex-start !important;
	~~/* upewniamy się, że nie blokuje min-width */~~		white-space: normal !important;
	~~min~~-~~width~~: 0 !important;
	}		}
	~~.wikitable th~~,		/* zmniejsz ikonki, żeby się lepiej zmieściły */
	.wikitable td {		.wikitable.custom-quests td:nth-child(2) img {
	~~padding~~: ~~8px 12px~~ !important;		width: 24px !important;
	~~white-space~~: ~~nowrap~~ !important;		height: auto !important;
	~~min-width~~: ~~auto~~ !important;		margin: 2px 4px 2px 0 !important;
	}		}
			/* także pozwól mapce w kolumnie “Image” ładnie się zmieścić */
	/* ~~Infoboxy (np. Ancient Tiara) analogicznie~~ */		.wikitable.custom-quests td:nth-child(4) {
	~~table~~.~~infobox {~~		white-space: normal !important;
	~~display: block !important;~~
	~~overflow~~-x: ~~auto !important;~~
	~~margin: 0.5em auto !important;~~
	~~max~~-~~width: calc~~(~~100% - 1em~~) ~~!important;~~
	~~min~~-~~width~~: 0 !important;
	}		}
	~~table~~.~~infobox~~ td {		.wikitable.custom-quests td:nth-child(4) img {
	~~white~~-~~space~~: ~~nowrap~~ !important;		max-width: 80px !important;
			width: auto !important;
			margin: 0 auto !important;
	}		}
	}		}