MediaWiki:Common.css - Revision history

Ais at 07:13, 29 June 2026

2026-06-29T07:13:11Z

← Older revision		Revision as of 07:13, 29 June 2026
Line 16:		Line 16:
	*Imports will be starting below this very line;		*Imports will be starting below this very line;
	*/		*/
	@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');		@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');


Line 125:		Line 125:
	background-color: var(--theme-body-bg) !important;		background-color: var(--theme-body-bg) !important;
	color: var(--theme-text-primary);		color: var(--theme-text-primary);
	font-family: '~~Fredoka~~', sans-serif;		font-family: 'Inter', sans-serif;
			font-size: 16px;
			line-height: 1.6;
	transition: background-color 0.3s ease, color 0.3s ease;		transition: background-color 0.3s ease, color 0.3s ease;
	}		}
Line 138:		Line 140:
	/* 3. Typography Normalization */		/* 3. Typography Normalization */
	h1, h2, h3, h4, h5, h6 {		h1, h2, h3, h4, h5, h6 {
			font-family: 'Fredoka', sans-serif;
	color: var(--theme-heading-color);		color: var(--theme-heading-color);
	margin-top: 0;		margin-top: 0;
Line 287:		Line 290:
	background-color: var(--theme-card-bg);		background-color: var(--theme-card-bg);
	border-radius: var(--radius-lg); /* From Step 1 */		border-radius: var(--radius-lg); /* From Step 1 */
	padding: 1.~~25rem~~;		padding: 1.5rem;
	border: 1px solid var(--theme-border-color);		border: 1px solid var(--theme-border-color);
	box-shadow: var(--shadow-soft);		box-shadow: var(--shadow-soft);
Line 299:		Line 302:
	background-color: var(--theme-card-bg-hover);		background-color: var(--theme-card-bg-hover);
	transform: translateY(-4px);		transform: translateY(-4px);
	box-shadow: 0 8px ~~16px~~ rgba(~~0, 0, 0~~, 0.15);		box-shadow: 0 8px 24px rgba(var(--theme-border-color-rgb), 0.3);
	border-color: var(--color-primary);		border-color: var(--color-primary);
	}		}
Line 311:		Line 314:
	.mana-text {		.mana-text {
	font-family: 'Fredoka', sans-serif;		font-family: 'Fredoka', sans-serif;
	font-size: 1.~~5rem~~;		font-size: 1.75rem;
	font-weight: 600;		font-weight: 600;
	margin: 0;		margin: 0;
Line 344:		Line 347:

	.heading-char {		.heading-char {
	font-size: 1.~~1rem~~;		font-family: 'Fredoka', sans-serif;
			font-size: 1.2rem;
	font-weight: 600;		font-weight: 600;
	margin: 0.5rem 0;		margin: 1rem 0 0.5rem 0;
	padding~~-bottom~~: ~~0.25rem~~;		padding: 4px 12px;
	~~border~~-~~bottom~~: ~~2px solid~~ var(--theme-border-~~color)~~;		background-color: var(--theme-overlay-bg);
			border-radius: 20px;
	display: inline-block;		display: inline-block;
	transition: ~~border~~-color 0.3s ease;		transition: background-color 0.3s ease;
	}		}

Line 367:		Line 372:
	display: grid;		display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.~~5rem~~;		gap: 0.75rem;
	list-style: none;		list-style: none;
	padding: 0;		padding: 0;
Line 380:		Line 385:
	.auto-grid li a {		.auto-grid li a {
	display: block;		display: block;
	padding: 0.~~35rem~~ 0.~~5rem~~;		padding: 0.5rem 0.75rem;
	color: var(--theme-link-color);		color: var(--theme-link-color);
	text-decoration: none;		text-decoration: none;
Line 386:		Line 391:
	background-color: var(--theme-overlay-bg);		background-color: var(--theme-overlay-bg);
	border: 1px solid transparent;		border: 1px solid transparent;
	transition: ~~all~~ 0.2s ease;		border-left: 2px solid transparent;
			transition: background-color 0.2s ease, transform 0.2s ease, border-left-color 0.2s ease, color 0.2s ease;
	}		}

Line 392:		Line 398:
	color: var(--theme-link-hover);		color: var(--theme-link-hover);
	background-color: var(--theme-body-bg);		background-color: var(--theme-body-bg);
	border-color: var(--~~theme-border~~-~~color~~);		border-left-color: var(--color-accent);
	transform: translateX(~~3px~~);		transform: translateX(4px);
	}		}
	/* ============================================		/* ============================================
Line 427:		Line 433:
	padding: 0.5rem 1rem;		padding: 0.5rem 1rem;
	border-radius: var(--radius-md);		border-radius: var(--radius-md);
	transition: ~~all~~ 0.2s ease;		transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	}		}

Ais at 06:48, 29 June 2026

2026-06-29T06:48:16Z

← Older revision		Revision as of 06:48, 29 June 2026
Line 56:		Line 56:
	--theme-body-bg: var(--color-secondary);		--theme-body-bg: var(--color-secondary);
	--theme-card-bg: rgba(255, 255, 255, 0.85);		--theme-card-bg: rgba(255, 255, 255, 0.85);
	--theme-card-bg-hover: #~~ffffff~~;		--theme-card-bg-hover: #f2f9f8;
			--theme-overlay-bg: color-mix(in srgb, var(--theme-text-primary) 5%, transparent);

	/* 3. Semantic Text Colors */		/* 3. Semantic Text Colors */
Line 62:		Line 63:
	--theme-text-muted: #4a5b6c;		--theme-text-muted: #4a5b6c;
	--theme-heading-color: #0d1b2a;		--theme-heading-color: #0d1b2a;
			--theme-text-success: #158550;
			--theme-text-danger: #d93838;

	/* 4. Borders & Interactive Elements */		/* 4. Borders & Interactive Elements */
Line 96:		Line 99:
	--theme-text-primary: #eaeef2;		--theme-text-primary: #eaeef2;
	--theme-text-muted: #87b4b7;		--theme-text-muted: #87b4b7;
	--theme-heading-color: #~~ffffff~~;		--theme-heading-color: #f2f9f8;
			--theme-text-success: #43b581;
			--theme-text-danger: #f04747;

	/* 4. Borders & Interactive Elements */		/* 4. Borders & Interactive Elements */
Line 167:		Line 172:

	::selection {		::selection {
	background: var(--color~~-primary~~);		background: var(--theme-heading-color);
	color: ~~#000~~;		color: var(--theme-body-bg);
	}		}
	::-moz-selection {		::-moz-selection {
	background: var(--color~~-primary~~);		background: var(--theme-heading-color);
	color: ~~#000~~;		color: var(--theme-body-bg);
	}		}

Line 379:		Line 384:
	text-decoration: none;		text-decoration: none;
	border-radius: var(--radius-sm);		border-radius: var(--radius-sm);
	background-color: ~~rgba~~(~~127, 127, 127, 0.05~~);		background-color: var(--theme-overlay-bg);
	border: 1px solid transparent;		border: 1px solid transparent;
	transition: all 0.2s ease;		transition: all 0.2s ease;
Line 521:		Line 526:
	.chat-wrapper { display: flex; flex-direction: column; }		.chat-wrapper { display: flex; flex-direction: column; }
	.chat-player, .chat-npc { display: flex; flex-direction: row; gap: 0.5em; }		.chat-player, .chat-npc { display: flex; flex-direction: row; gap: 0.5em; }
	.chat-player-speaker { white-space: nowrap; min-width: 70px; color: ~~#43b581~~; font-weight: 600; }		.chat-player-speaker { white-space: nowrap; min-width: 70px; color: var(--theme-text-success); font-weight: 600; }
	.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: ~~#f04747~~; font-weight: 600; }		.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: var(--theme-text-danger); font-weight: 600; }

	/* 3. RESPONSIVE IMPROVEMENTS */		/* 3. RESPONSIVE IMPROVEMENTS */
Line 584:		Line 589:

	table.wikitable > tbody > tr:hover {		table.wikitable > tbody > tr:hover {
	background-color: ~~rgba~~(~~127, 127, 127, 0.05~~);		background-color: var(--theme-overlay-bg);
	}		}

Line 660:		Line 665:
	/* Striping for Navbox lists */		/* Striping for Navbox lists */
	.navbox .navbox-even {		.navbox .navbox-even {
	background-color: ~~rgba~~(~~127, 127, 127, 0.03~~);		background-color: var(--theme-overlay-bg);
	}		}
	/* ============================================		/* ============================================
Line 689:		Line 694:
	transform: translateY(-4px);		transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	color: ~~#000~~;		color: var(--theme-heading-color);
	}		}

Ais at 06:46, 19 May 2026

2026-05-19T06:46:50Z

Show changes

Ais at 04:06, 19 May 2026

2026-05-19T04:06:11Z

← Older revision		Revision as of 04:06, 19 May 2026
Line 53:		Line 53:
	--color-accent: #87b4b7;		--color-accent: #87b4b7;

	/* 2. Semantic ~~Backgrounds~~ */		/* 2. Semantic Variables */
	--theme-body-bg: var(--color-secondary);		--theme-body-bg: var(--color-secondary);
	--theme-card-bg: rgba(255, 255, 255, 0.85);		--theme-card-bg: rgba(255, 255, 255, 0.85);
	--theme-card-bg-hover: #ffffff;		--theme-card-bg-hover: #ffffff;
			--theme-text-primary: #1a2b3c;
	~~/* 3. Semantic Text Colors */~~
	--theme-text-primary: #1a2b3c;
	--theme-text-muted: #4a5b6c;		--theme-text-muted: #4a5b6c;
	--theme-heading-color: #0d1b2a;		--theme-heading-color: #0d1b2a;

	~~/* 4. Borders & Interactive Elements */~~
	--theme-border-color: var(--color-accent);		--theme-border-color: var(--color-accent);
	--theme-border-color-rgb: 135, 180, 183;		--theme-border-color-rgb: 135, 180, 183;
Line 69:		Line 65:
	--theme-link-hover: #004a52;		--theme-link-hover: #004a52;

	/* 5. ~~Structures~~ */		/* 3. LEGACY BRIDGE */
			--theme-page-background-color: var(--theme-body-bg);
			--theme-page-background-color--secondary: var(--theme-card-bg);
			--theme-page-text-color: var(--theme-text-primary);
			--accent: var(--color-accent);
			--accent-light: var(--color-primary);
			--gray-050: rgba(0, 0, 0, 0.05);

			/* 4. Structural Tokens */
	--radius-sm: 4px;		--radius-sm: 4px;
	--radius-md: 8px;		--radius-md: 8px;
Line 88:		Line 92:
	--color-accent: #7ff6e3;		--color-accent: #7ff6e3;

	/* 2. Semantic ~~Backgrounds~~ */		/* 2. Semantic Variables */
	--theme-body-bg: var(--color-secondary);		--theme-body-bg: var(--color-secondary);
	--theme-card-bg: var(--color-primary);		--theme-card-bg: var(--color-primary);
	--theme-card-bg-hover: #164f6f;		--theme-card-bg-hover: #164f6f;

	~~/* 3. Semantic Text Colors */~~
	--theme-text-primary: #eaeef2;		--theme-text-primary: #eaeef2;
	--theme-text-muted: #87b4b7;		--theme-text-muted: #87b4b7;
	--theme-heading-color: #ffffff;		--theme-heading-color: #ffffff;

	~~/* 4. Borders & Interactive Elements */~~
	--theme-border-color: var(--color-accent);		--theme-border-color: var(--color-accent);
	--theme-border-color-rgb: 127, 246, 227;		--theme-border-color-rgb: 127, 246, 227;
Line 104:		Line 104:
	--theme-link-hover: #aafff0;		--theme-link-hover: #aafff0;

	/* 5. ~~Structures~~ */		/* 3. LEGACY BRIDGE */
			--theme-page-background-color: var(--theme-body-bg);
			--theme-page-background-color--secondary: var(--theme-card-bg);
			--theme-page-text-color: var(--theme-text-primary);
			--accent: var(--color-accent);
			--accent-light: var(--color-primary);
			--gray-050: rgba(255, 255, 255, 0.05); /* Adjusted for dark theme */

			/* 4. Structural Tokens */
	--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);		--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
	}		}

Ais at 03:19, 19 May 2026

2026-05-19T03:19:37Z

Show changes

Ais at 07:54, 8 May 2026

2026-05-08T07:54:31Z

Show changes

Ais: Undo revision 28404 by Ais (talk)

2026-05-08T07:32:42Z

Undo revision 28404 by Ais (talk)

Show changes

Ais at 07:31, 8 May 2026

2026-05-08T07:31:52Z

Show changes

Ais at 06:38, 20 April 2026

2026-04-20T06:38:12Z

Show changes

Ais at 06:36, 20 April 2026

2026-04-20T06:36:16Z

Show changes