MediaWiki:Citizen.css - Revision history

JoliasEnor at 04:15, 5 February 2025

2025-02-05T04:15:13Z

← Older revision		Revision as of 21:15, 4 February 2025
Line 117:		Line 117:

	/* Header Image Responsive Fix */		/* Header Image Responsive Fix */

	~~.aylhrhead {~~
	~~display: flex;~~
	~~justify-content: center;~~
	~~align-items: center;~~
	~~width: 100vw; /* Makes container span full viewport width */~~
	~~max-width: 100%;~~
	~~height: auto;~~
	~~background: none !important;~~
	~~padding: 0;~~
	}

	~~.aylhrhead img {~~
	~~width: 100%; /* Ensures the image fills the container */~~
	~~max-width: 100%;~~
	~~height: auto;~~
	~~background: none !important;~~
	~~object-fit: contain; /* Keeps aspect ratio */~~
	}

JoliasEnor at 04:12, 5 February 2025

2025-02-05T04:12:27Z

← Older revision		Revision as of 21:12, 4 February 2025
Line 122:		Line 122:
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
			width: 100vw; /* Makes container span full viewport width */
	max-width: 100%;		max-width: 100%;
	height: auto;		height: auto;
	background: none !important;		background: none !important;
	padding: 0;		padding: 0;
Line 129:		Line 130:

	.aylhrhead img {		.aylhrhead img {
			width: 100%; /* Ensures the image fills the container */
	max-width: 100%;		max-width: 100%;
	height: auto;		height: auto;
	background: none !important;		background: none !important;
	}		object-fit: contain; /* Keeps aspect ratio */

	~~.aylhrhead img,~~
	~~img {~~
	~~background~~-~~color~~: ~~transparent !important~~;
	}		}

JoliasEnor at 04:09, 5 February 2025

2025-02-05T04:09:56Z

← Older revision		Revision as of 21:09, 4 February 2025
Line 132:		Line 132:
	height: auto;		height: auto;
	background: none !important;		background: none !important;
			}

			.aylhrhead img,
			img {
			background-color: transparent !important;
	}		}

JoliasEnor at 04:06, 5 February 2025

2025-02-05T04:06:28Z

← Older revision		Revision as of 21:06, 4 February 2025
Line 120:		Line 120:
	.aylhrhead {		.aylhrhead {
	display: flex;		display: flex;
	justify-content: center; ~~/* Centers the image */~~		justify-content: center;
	align-items: center; ~~/* Aligns vertically */~~		align-items: center;
	max-width: 100%; ~~/* Ensures it doesn't exceed the container */~~		max-width: 100%;
	height: auto; ~~/* Maintains aspect ratio */~~		height: auto;
	background: none !important; ~~/* Removes any unwanted background */~~		background: none !important;
	padding: 0; ~~/* Ensures no extra space is added */~~		padding: 0;
	}		}

	.aylhrhead img {		.aylhrhead img {
	max-width: 100%; ~~/* Makes image responsive */~~		max-width: 100%;
	height: auto;		height: auto;
	background: none !important; ~~/* Ensures transparency */~~		background: none !important;
	}		}

JoliasEnor at 04:01, 5 February 2025

2025-02-05T04:01:35Z

← Older revision		Revision as of 21:01, 4 February 2025
Line 119:		Line 119:

	.aylhrhead {		.aylhrhead {
	max-width: 100%;		display: flex;
			justify-content: center; /* Centers the image */
			align-items: center; /* Aligns vertically */
			max-width: 100%; /* Ensures it doesn't exceed the container */
			height: auto; /* Maintains aspect ratio */
			background: none !important; /* Removes any unwanted background */
			padding: 0; /* Ensures no extra space is added */
			}

			.aylhrhead img {
			max-width: 100%; /* Makes image responsive */
	height: auto;		height: auto;
	~~display~~: ~~block;~~		background: none !important; /* Ensures transparency */
	~~margin: 0 auto;~~
	~~text-align: center~~;
	}		}

JoliasEnor at 03:57, 5 February 2025

2025-02-05T03:57:41Z

← Older revision		Revision as of 20:57, 4 February 2025
Line 118:		Line 118:
	/* Header Image Responsive Fix */		/* Header Image Responsive Fix */

	.~~res-img~~ {		.aylhrhead {
	max-width: 100%;		max-width: 100%;
	height: auto;		height: auto;

JoliasEnor at 03:54, 5 February 2025

2025-02-05T03:54:29Z

@@ Line 114: / Line 114: @@
 .mw-ui-button.mw-ui-progressive:hover {
      background-color: #ff3333 !important; /* Darker red on hover */
+}

JoliasEnor at 03:51, 5 February 2025

2025-02-05T03:51:11Z

← Older revision		Revision as of 20:51, 4 February 2025
Line 1:		Line 1:
	:root.skin-theme-clientpref-night {		:root.skin-theme-clientpref-night {
	/* Restore primary color so buttons do NOT break */		/* Restore primary color so buttons do NOT break */
	--color-primary__h: ~~220~~; /* ~~Set primary color back to blue~~ hue */		--color-primary__h: 150; /* Green hue */
	--color-primary__s: 60%; /* ~~Restore~~ saturation */		--color-primary__s: 50%; /* Medium saturation */
	--color-primary__l: 50%; /* ~~Restore~~ lightness */		--color-primary__l: 30%; /* Darker lightness for deep green */

	/* Ensure text is white */		/* Ensure text is white */
Line 17:		Line 17:
	--color-surface-4: #333333; /* Borders and deepest layers */		--color-surface-4: #333333; /* Borders and deepest layers */

	/* ~~Restore button colors~~ */		/* Dark Green Buttons */
	--color-primary: #~~444444~~; /* Dark ~~gray for button background~~ */		--color-primary: #1d4f2d; /* Dark emerald green */
	--color-primary--hover: #~~555555~~; /* Slightly lighter ~~hover color~~ */		--color-primary--hover: #23713e; /* Slightly lighter green */
	--color-primary--active: #~~666666~~; /* ~~Clicked button color~~ */		--color-primary--active: #2a8c50; /* Even lighter when clicked */
	--color-primary-text: #ffffff; /* Ensure button text is white */		--color-primary-text: #ffffff; /* Ensure button text is white */

Line 58:		Line 58:
	#ca-edit a,		#ca-edit a,
	#ca-ve-edit a {		#ca-ve-edit a {
	background-color: #~~444444~~ !important; /* Dark ~~gray button background~~ */		background-color: #1d4f2d !important; /* Dark emerald green */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
	border: 1px solid #~~555555~~ !important; /* ~~Subtle~~ border */		border: 1px solid #23713e !important; /* Slightly lighter green border */
	}		}

Line 67:		Line 67:
	#ca-edit a:hover,		#ca-edit a:hover,
	#ca-ve-edit a:hover {		#ca-ve-edit a:hover {
	background-color: #~~555555~~ !important; /* ~~Slightly lighter~~ on hover */		background-color: #23713e !important; /* Lighter emerald green on hover */
	}		}

Line 74:		Line 74:
	#ca-edit a:active,		#ca-edit a:active,
	#ca-ve-edit a:active {		#ca-ve-edit a:active {
	background-color: #~~666666~~ !important; /* Even lighter when clicked */		background-color: #2a8c50 !important; /* Even lighter when clicked */
	}		}

	/* ---- Fix White Background Issue on All Buttons ---- */		/* ---- Fix White Background Issue on All Buttons ---- */
	.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {		.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {
	background-color: #~~444444~~ !important; /* Dark ~~button background~~ */		background-color: #1d4f2d !important; /* Dark emerald green */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
	}		}
Line 95:		Line 95:
	background-color: #222222 !important; /* Dark background */		background-color: #222222 !important; /* Dark background */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
	border: 1px solid #~~555555~~ !important; /* ~~Subtle~~ border */		border: 1px solid #23713e !important; /* Green border for focus */
	}		}

Line 102:		Line 102:
	select:focus {		select:focus {
	background-color: #333333 !important; /* Slightly lighter on focus */		background-color: #333333 !important; /* Slightly lighter on focus */
	border-color: #66ff66 !important; /* ~~Green~~ border for focus */		border-color: #66ff66 !important; /* Bright green border for focus */
	}		}

JoliasEnor at 03:47, 5 February 2025

2025-02-05T03:47:16Z

← Older revision		Revision as of 20:47, 4 February 2025
Line 1:		Line 1:
	:root.skin-theme-clientpref-night {		:root.skin-theme-clientpref-night {
	--color-primary__h: 0; /* ~~Primary~~ hue ~~(not relevant for white)~~ */		/* Restore primary color so buttons do NOT break */
	--color-primary__s: 0%; /* No saturation ~~for grayscale~~ */		--color-primary__h: 220; /* Set primary color back to blue hue */
	--color-primary__l: ~~100~~%; /* ~~Full~~ lightness ~~for white~~ */		--color-primary__s: 60%; /* Restore saturation */
			--color-primary__l: 50%; /* Restore lightness */

	/* Ensure text is white */		/* Ensure text is white */
Line 16:		Line 17:
	--color-surface-4: #333333; /* Borders and deepest layers */		--color-surface-4: #333333; /* Borders and deepest layers */

	/* ~~Standard Buttons (NOT affecting Edit Buttons)~~ */		/* Restore button colors */
	--color-primary: #~~333333~~; /* Dark gray background ~~for buttons~~ */		--color-primary: #444444; /* Dark gray for button background */
	--color-primary--hover: #~~444444~~; /* Slightly lighter hover color */		--color-primary--hover: #555555; /* Slightly lighter hover color */
	--color-primary--active: #~~555555~~; /* Clicked button color */		--color-primary--active: #666666; /* Clicked button color */
	--color-primary-text: #ffffff; /* Ensure button text is white */		--color-primary-text: #ffffff; /* Ensure button text is white */

Line 57:		Line 58:
	#ca-edit a,		#ca-edit a,
	#ca-ve-edit a {		#ca-ve-edit a {
	background-color: #~~222222~~ !important; /* Dark gray button background */		background-color: #444444 !important; /* Dark gray button background */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
	border: 1px solid #555555 !important; /* Subtle border */		border: 1px solid #555555 !important; /* Subtle border */
Line 66:		Line 67:
	#ca-edit a:hover,		#ca-edit a:hover,
	#ca-ve-edit a:hover {		#ca-ve-edit a:hover {
	background-color: #~~444444~~ !important; /* Slightly lighter on hover */		background-color: #555555 !important; /* Slightly lighter on hover */
	}		}

Line 73:		Line 74:
	#ca-edit a:active,		#ca-edit a:active,
	#ca-ve-edit a:active {		#ca-ve-edit a:active {
	background-color: #~~555555~~ !important; /* Even lighter when clicked */		background-color: #666666 !important; /* Even lighter when clicked */
	}		}

	/* ---- ~~Ensure Other~~ Buttons ~~Are Fixed Too~~ ---- */		/* ---- Fix White Background Issue on All Buttons ---- */
	.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {		.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {
	background-color: #~~222222~~ !important; /* Dark button background */		background-color: #444444 !important; /* Dark button background */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
			}

			/* ---- Fix Checkboxes and Radio Buttons Visibility ---- */
			input[type="checkbox"],
			input[type="radio"] {
			filter: invert(100%); /* Make them visible on dark background */
			}

			/* ---- Fix Form Inputs & Dropdowns ---- */
			input,
			textarea,
			select {
			background-color: #222222 !important; /* Dark background */
			color: #ffffff !important; /* White text */
			border: 1px solid #555555 !important; /* Subtle border */
			}

			input:focus,
			textarea:focus,
			select:focus {
			background-color: #333333 !important; /* Slightly lighter on focus */
			border-color: #66ff66 !important; /* Green border for focus */
	}		}

JoliasEnor at 03:43, 5 February 2025

2025-02-05T03:43:26Z

← Older revision		Revision as of 20:43, 4 February 2025
Line 52:		Line 52:
	}		}

	/* ---- ~~Fix~~ EDIT ~~Button (Remove White Background)~~ ---- */		/* ---- COMPLETELY FIX EDIT BUTTON ---- */
	.mw-editbutton, .mw-ui-button {		.mw-editbutton,
	background-color: #222222 !important; /* Dark gray background */		.mw-ui-button,
			#ca-edit a,
			#ca-ve-edit a {
			background-color: #222222 !important; /* Dark gray button background */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
	border: 1px solid #555555 !important; /* Subtle border */		border: 1px solid #555555 !important; /* Subtle border */
	}		}

	.mw-editbutton:hover, .mw-ui-button:hover {		.mw-editbutton:hover,
			.mw-ui-button:hover,
			#ca-edit a:hover,
			#ca-ve-edit a:hover {
	background-color: #444444 !important; /* Slightly lighter on hover */		background-color: #444444 !important; /* Slightly lighter on hover */
	}		}

	.mw-editbutton:active, .mw-ui-button:active {		.mw-editbutton:active,
			.mw-ui-button:active,
			#ca-edit a:active,
			#ca-ve-edit a:active {
	background-color: #555555 !important; /* Even lighter when clicked */		background-color: #555555 !important; /* Even lighter when clicked */
	}		}

	/* ---- ~~Fix White Background Issue on Main Edit Button~~ ---- */		/* ---- Ensure Other Buttons Are Fixed Too ---- */
	.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {		.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {
	background-color: #222222 !important; /* Dark button background */		background-color: #222222 !important; /* Dark button background */
	color: #ffffff !important; /* White text */		color: #ffffff !important; /* White text */
			}

			/* ---- Fix the "Create Page" Button (For Missing Pages) ---- */
			.mw-ui-button.mw-ui-progressive {
			background-color: #ff6666 !important; /* Red background for missing page buttons */
			color: #ffffff !important; /* White text */
			border: 1px solid #aa4444 !important;
			}

			.mw-ui-button.mw-ui-progressive:hover {
			background-color: #ff3333 !important; /* Darker red on hover */
	}		}