MediaWiki:Common.css - Revision history

Comuter at 21:40, 16 April 2026

2026-04-16T21:40:20Z

← Older revision		Revision as of 23:40, 16 April 2026
Line 1:		Line 1:
	/* --- COMUTER WIKI ~~UNIVERSAL~~ STYLING --- */		/* --- COMUTER WIKI CLEAN STYLING --- */

	/* 1. Global Font */		/* 1. Global Font */
Line 26:		Line 26:

	/* 4. The Wordmark/Text */		/* 4. The Wordmark/Text */
			/* We use var(--color-base) to automatically flip text color when the theme changes */
	.mw-logo-wordmark {		.mw-logo-wordmark {
	display: block !important;		display: block !important;
Line 33:		Line 34:
	font-weight: bold !important;		font-weight: bold !important;
	font-size: 1.2em !important;		font-size: 1.2em !important;
	color: #202122 !important; ~~/* Default Black for Light Mode */~~		color: var(--color-base, #202122) !important;
	}		}

	/* 5. Header ~~Background (Default~~/~~Light Mode)~~ */		/* 5. Header Sizing */
			/* We removed all hardcoded background colors so Vector 2022 can handle itself natively */
	.mw-header {		.mw-header {
	height: auto !important;		height: auto !important;
	min-height: 160px !important;		min-height: 160px !important;
	~~background-color: #ffffff !important;~~
	}		}

	/* 6~~. THE DARK MODE FIX (Covers Manual Toggle AND Automatic/System Setting) */~~		/* 6. Sticky Header (Scroll View) */
	~~@media (prefers-color-scheme: dark) {~~
	~~.mw-header { background-color: #101418 !important; }~~
	~~.mw-logo-wordmark { color: #eaecf0 !important; }~~
	}

	~~html.skin-theme-clientpref-night .mw-header {~~
	~~background-color: #101418 !important;~~
	}

	~~html.skin-theme-clientpref-night .mw-logo-wordmark {~~
	~~color: #eaecf0 !important;~~
	}

	~~/* 7~~. Sticky Header (Scroll View) */
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;

Comuter at 21:38, 16 April 2026

2026-04-16T21:38:06Z

← Older revision		Revision as of 23:38, 16 April 2026
Line 1:		Line 1:
	/* --- COMUTER WIKI ~~FULL~~ STYLING --- */		/* --- COMUTER WIKI UNIVERSAL STYLING --- */

	/* 1. Global Font */		/* 1. Global Font */
Line 25:		Line 25:
	}		}

	/* 4. The Wordmark ~~ICON (The image that says "Comuter Wiki")~~ */		/* 4. The Wordmark/Text */
	.mw-logo-wordmark {		.mw-logo-wordmark {
	display: block !important; ~~/* Forces it to show up */~~		display: block !important;
	~~width~~: ~~150px~~ !important; ~~/* Adjust this to fit your image width */~~		text-align: center !important;
	height: auto !important; ~~/* Let the height scale naturally */~~		height: auto !important;
	~~max~~-~~height~~: ~~none~~ !important;		width: auto !important;
	~~margin~~-~~top~~: ~~10px~~ !important;		font-weight: bold !important;
			font-size: 1.2em !important;
			color: #202122 !important; /* Default Black for Light Mode */
	}		}

	/* 5. Header Background (Light Mode) */		/* 5. Header Background (Default/Light Mode) */
	.mw-header {		.mw-header {
	height: auto !important;		height: auto !important;
	min-height: ~~190px~~ !important;		min-height: 160px !important;
	background-color: #ffffff !important;		background-color: #ffffff !important;
	}		}

	/* 6. DARK MODE ~~COLORS~~ */		/* 6. THE DARK MODE FIX (Covers Manual Toggle AND Automatic/System Setting) */
			@media (prefers-color-scheme: dark) {
			.mw-header { background-color: #101418 !important; }
			.mw-logo-wordmark { color: #eaecf0 !important; }
			}

	html.skin-theme-clientpref-night .mw-header {		html.skin-theme-clientpref-night .mw-header {
	background-color: #101418 !important;		background-color: #101418 !important;
			}

			html.skin-theme-clientpref-night .mw-logo-wordmark {
			color: #eaecf0 !important;
	}		}

	/* 7. Sticky Header (Scroll View) */		/* 7. Sticky Header (Scroll View) */
	~~/* This makes them side-by-side again when you scroll so it's not huge */~~
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;
Line 59:		Line 69:

	.vector-sticky-header .mw-logo-wordmark {		.vector-sticky-header .mw-logo-wordmark {
	~~width: 100px !important; /* Shorter width for the sticky header */~~
	~~margin-top: 0 !important;~~
	margin-left: 10px !important;		margin-left: 10px !important;
			font-size: 1em !important;
	}		}

Comuter at 21:36, 16 April 2026

2026-04-16T21:36:11Z

← Older revision		Revision as of 23:36, 16 April 2026
Line 1:		Line 1:
	/* --- COMUTER WIKI FULL STYLING --- */		/* --- COMUTER WIKI FULL STYLING --- */

	/* 1. Font ~~Styling~~ */		/* 1. Global Font */
	body {		body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	}		}

	/* 2. ~~Header &~~ Logo ~~Layout~~ */		/* 2. Logo Container */
	.mw-logo {		.mw-logo {
	display: flex !important;		display: flex !important;
	flex-direction: column !important;		flex-direction: column !important;
	align-items: center !important;		align-items: center !important;
			text-decoration: none !important;
			background: transparent !important;
	height: auto !important;		height: auto !important;
	padding: 10px !important;		padding: 10px !important;
	~~text-decoration: none !important;~~
	~~background: transparent !important;~~
	}		}

	/* 3. Icon ~~Sizing~~ */		/* 3. The Icon (Computer Head) */
	.mw-logo-icon {		.mw-logo-icon {
	width: 120px !important;		width: 120px !important;
Line 23:		Line 23:
	max-width: none !important;		max-width: none !important;
	max-height: none !important;		max-height: none !important;
	~~margin-bottom: 5px !important;~~
	}		}

	/* 4. Wordmark (The ~~Text~~) */		/* 4. The Wordmark ICON (The image that says "Comuter Wiki") */
	.mw-logo-wordmark {		.mw-logo-wordmark {
	display: block !important;		display: block !important; /* Forces it to show up */
	~~text-align~~: ~~center~~ !important;		width: 150px !important; /* Adjust this to fit your image width */
	height: auto !important;		height: auto !important; /* Let the height scale naturally */
	~~width: auto !important;~~		max-height: none !important;
	~~font~~-~~weight~~: ~~bold~~ !important;		margin-top: 10px !important;
	~~font~~-~~size: 1.2em !important; /* Makes the title a bit bigger */~~
	~~color~~: ~~#202122~~ !important; ~~/* Default dark text for light mode */~~
	}		}

	/* 5. Header ~~Sizing & Colors~~ (Light Mode) */		/* 5. Header Background (Light Mode) */
	.mw-header {		.mw-header {
	height: auto !important;		height: auto !important;
	min-height: ~~160px~~ !important;		min-height: 190px !important;
	background-color: #ffffff !important;		background-color: #ffffff !important;
	}		}

	/* 6. DARK MODE ~~COMPATIBILITY~~ */		/* 6. DARK MODE COLORS */
	html.skin-theme-clientpref-night .mw-header {		html.skin-theme-clientpref-night .mw-header {
	background-color: #101418 !important;		background-color: #101418 !important;
	}

	~~/* Explicitly force the text to be light grey/white in Dark Mode */~~
	~~html.skin-theme-clientpref-night .mw-logo-wordmark {~~
	~~color: #eaecf0 !important;~~
	}		}

	/* 7. Sticky Header (Scroll View) */		/* 7. Sticky Header (Scroll View) */
			/* This makes them side-by-side again when you scroll so it's not huge */
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;
	padding: 0 !important;		padding: 0 !important;
	~~margin-left: 5px !important;~~
	}		}

Line 64:		Line 56:
	width: 35px !important;		width: 35px !important;
	height: 35px !important;		height: 35px !important;
	~~margin-bottom: 0 !important;~~
	}		}

	.vector-sticky-header .mw-logo-wordmark {		.vector-sticky-header .mw-logo-wordmark {
			width: 100px !important; /* Shorter width for the sticky header */
			margin-top: 0 !important;
	margin-left: 10px !important;		margin-left: 10px !important;
	~~font-size: 1em !important; /* Shrink text back for sticky header */~~
	}		}

Comuter at 21:29, 16 April 2026

2026-04-16T21:29:21Z

← Older revision		Revision as of 23:29, 16 April 2026
Line 7:		Line 7:

	/* 2. Header & Logo Layout */		/* 2. Header & Logo Layout */
	~~/* Stacks the icon on top of the title */~~
	.mw-logo {		.mw-logo {
	display: flex !important;		display: flex !important;
Line 18:		Line 17:
	}		}

	/* 3. Icon Sizing ~~(The Computer Head)~~ */		/* 3. Icon Sizing */
	.mw-logo-icon {		.mw-logo-icon {
	width: 120px !important;		width: 120px !important;
Line 33:		Line 32:
	height: auto !important;		height: auto !important;
	width: auto !important;		width: auto !important;
	font-weight: bold;		font-weight: bold !important;
			font-size: 1.2em !important; /* Makes the title a bit bigger */
			color: #202122 !important; /* Default dark text for light mode */
	}		}

Line 41:		Line 42:
	min-height: 160px !important;		min-height: 160px !important;
	background-color: #ffffff !important;		background-color: #ffffff !important;
	~~transition: background-color 0.2s ease;~~
	}		}

	/* 6. DARK MODE COMPATIBILITY */		/* 6. DARK MODE COMPATIBILITY */
	~~/* This kicks in when you toggle the Dark Mode switch */~~
	html.skin-theme-clientpref-night .mw-header {		html.skin-theme-clientpref-night .mw-header {
	background-color: #101418 !important; ~~/* Deep grey to match Vector dark mode */~~		background-color: #101418 !important;
	}		}

			/* Explicitly force the text to be light grey/white in Dark Mode */
	html.skin-theme-clientpref-night .mw-logo-wordmark {		html.skin-theme-clientpref-night .mw-logo-wordmark {
	color: #eaecf0 !important; ~~/* Light text for the title */~~		color: #eaecf0 !important;
	}		}

	/* 7. Sticky Header (Scroll View) */		/* 7. Sticky Header (Scroll View) */
	~~/* Shrinks the logo back down so it doesn't block the screen while reading */~~
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;
Line 70:		Line 69:
	.vector-sticky-header .mw-logo-wordmark {		.vector-sticky-header .mw-logo-wordmark {
	margin-left: 10px !important;		margin-left: 10px !important;
			font-size: 1em !important; /* Shrink text back for sticky header */
	}		}

Comuter at 21:22, 16 April 2026

2026-04-16T21:22:44Z

← Older revision		Revision as of 23:22, 16 April 2026
Line 1:		Line 1:
	/* --- ~~COMPREHENSIVE~~ WIKI STYLING --- */		/* --- COMUTER WIKI FULL STYLING --- */

	/* 1. ~~Global~~ Font ~~Update~~ */		/* 1. Font Styling */
	body {		body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	}		}

	/* 2. Header Layout ~~Fix~~ */		/* 2. Header & Logo Layout */
	/* ~~Ensures~~ the ~~menu button and logo stay side-by-side */~~		/* Stacks the icon on top of the title */
	~~.vector-header-start {~~
	~~display: flex !important;~~
	~~flex-direction: row !important;~~
	~~align-items: center !important;~~
	~~height: auto !important;~~
	}

	~~/* 3. Logo Stacking */~~
	~~/* Forces Icon~~ on top ~~and Wordmark (text) below~~ */
	.mw-logo {		.mw-logo {
	display: flex !important;		display: flex !important;
Line 23:		Line 14:
	height: auto !important;		height: auto !important;
	padding: 10px !important;		padding: 10px !important;
	~~margin-left: 15px !important;~~
	text-decoration: none !important;		text-decoration: none !important;
			background: transparent !important;
	}		}

	/* 4. Icon Sizing */		/* 3. Icon Sizing (The Computer Head) */
	.mw-logo-icon {		.mw-logo-icon {
	width: 120px !important; ~~/* Change this to make logo bigger/smaller */~~		width: 120px !important;
	height: 120px !important;		height: 120px !important;
	max-width: none !important;		max-width: none !important;
Line 36:		Line 27:
	}		}

	/* 5. ~~Title/~~Wordmark ~~Styling~~ */		/* 4. Wordmark (The Text) */
	.mw-logo-wordmark {		.mw-logo-wordmark {
	display: block !important;		display: block !important;
Line 45:		Line 36:
	}		}

	/* 6. ~~Main Menu~~ (~~Hamburger~~) ~~Fix */~~		/* 5. Header Sizing & Colors (Light Mode) */
	~~/* Makes sure the button doesn't disappear or get squished */~~
	~~#vector-main-menu-dropdown-label {~~
	~~display: flex !important;~~
	~~align-items: center !important;~~
	~~justify-content: center !important;~~
	~~min-width: 44px !important;~~
	~~min-height: 44px !important;~~
	}

	~~/* 7. Header Height Adjustment~~ */
	.mw-header {		.mw-header {
	height: auto !important;		height: auto !important;
	min-height: 160px !important;		min-height: 160px !important;
	background-color: #ffffff !important;		background-color: #ffffff !important;
			transition: background-color 0.2s ease;
			}

			/* 6. DARK MODE COMPATIBILITY */
			/* This kicks in when you toggle the Dark Mode switch */
			html.skin-theme-clientpref-night .mw-header {
			background-color: #101418 !important; /* Deep grey to match Vector dark mode */
			}

			html.skin-theme-clientpref-night .mw-logo-wordmark {
			color: #eaecf0 !important; /* Light text for the title */
	}		}

	/* 8. Sticky Header ~~Fix~~ */		/* 7. Sticky Header (Scroll View) */
	/* ~~When you scroll down,~~ the logo ~~goes~~ back ~~to normal~~ so it doesn't block the screen */		/* Shrinks the logo back down so it doesn't block the screen while reading */
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;

Comuter: Protected "MediaWiki:Common.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

2026-04-16T21:22:23Z

Protected "MediaWiki:Common.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

← Older revision	Revision as of 23:22, 16 April 2026
(No difference)

Comuter at 20:16, 16 April 2026

2026-04-16T20:16:37Z

← Older revision		Revision as of 22:16, 16 April 2026
Line 1:		Line 1:
	/* ~~CSS placed here will be applied to all skins~~ */		/* --- COMPREHENSIVE WIKI STYLING --- */

			/* 1. Global Font Update */
	body {		body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	}		}

			/* 2. Header Layout Fix */
			/* Ensures the menu button and logo stay side-by-side */
			.vector-header-start {
			display: flex !important;
			flex-direction: row !important;
			align-items: center !important;
			height: auto !important;
			}

			/* 3. Logo Stacking */
			/* Forces Icon on top and Wordmark (text) below */
	.mw-logo {		.mw-logo {
	display: flex !important;		display: flex !important;
	flex-direction: column !important;		flex-direction: column !important;
	align-items: center !important; ~~/* Centers the logo above the text */~~		align-items: center !important;
	height: auto !important;		height: auto !important;
	padding: 10px 0;		padding: 10px !important;
			margin-left: 15px !important;
			text-decoration: none !important;
	}		}

			/* 4. Icon Sizing */
	.mw-logo-icon {		.mw-logo-icon {
	width: 120px !important; /* ~~Adjust size as needed~~ */		width: 120px !important; /* Change this to make logo bigger/smaller */
	height: 120px !important;		height: 120px !important;
	max-width: none !important;		max-width: none !important;
	max-height: none !important;		max-height: none !important;
	margin-bottom: ~~8px~~ !important; ~~/* Gap between logo and title */~~		margin-bottom: 5px !important;
	}		}

			/* 5. Title/Wordmark Styling */
	.mw-logo-wordmark {		.mw-logo-wordmark {
	display: block !important; ~~/* Bring it back, but as a block */~~		display: block !important;
	text-align: center !important;		text-align: center !important;
	height: auto !important;		height: auto !important;
	width: auto !important;		width: auto !important;
			font-weight: bold;
			}

			/* 6. Main Menu (Hamburger) Fix */
			/* Makes sure the button doesn't disappear or get squished */
			#vector-main-menu-dropdown-label {
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			min-width: 44px !important;
			min-height: 44px !important;
	}		}

			/* 7. Header Height Adjustment */
	.mw-header {		.mw-header {
	height: auto !important;		height: auto !important;
	min-height: 160px !important;		min-height: 160px !important;
			background-color: #ffffff !important;
	}		}

	/* 5. ~~Fix the '~~Sticky Header~~' (when you scroll down)~~ */		/* 8. Sticky Header Fix */
	/* ~~We usually want it~~ back to normal ~~when scrolling~~ so it doesn't ~~eat~~ the screen */		/* When you scroll down, the logo goes back to normal so it doesn't block the screen */
	.vector-sticky-header .mw-logo {		.vector-sticky-header .mw-logo {
	flex-direction: row !important;		flex-direction: row !important;
	padding: 0 !important;		padding: 0 !important;
			margin-left: 5px !important;
	}		}

Line 39:		Line 74:
	height: 35px !important;		height: 35px !important;
	margin-bottom: 0 !important;		margin-bottom: 0 !important;
			}

			.vector-sticky-header .mw-logo-wordmark {
			margin-left: 10px !important;
	}		}

Comuter at 20:04, 16 April 2026

2026-04-16T20:04:08Z

@@ Line 2: / Line 2: @@
 body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+}

Comuter: Created page with "/* CSS placed here will be applied to all skins */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }"

2026-04-16T18:49:05Z

Created page with "CSS placed here will be applied to all skins: body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }"

New page

/* CSS placed here will be applied to all skins */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}