Arclight-MCP-Bot: Fix token text and helper text visibility in dark mode with higher specificity selectors (via update-page on MediaWiki MCP Server)

2026-01-20T04:36:12Z

Fix token text and helper text visibility in dark mode with higher specificity selectors (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 04:36, 20 January 2026
Line 113:		Line 113:
	}		}

	/* Token input fields */		/* Token input fields - with high specificity */
	html.skin-theme-clientpref-night .pfTokens {		html.skin-theme-clientpref-night .pfTokens {
	background-color: #313244 !important;		background-color: #313244 !important;
Line 125:		Line 125:
	}		}

	html.skin-theme-clientpref-night .pfTokens .token .close {		/* Token text - multiple selectors for specificity */
	color: #~~bac2de~~ !important;		html.skin-theme-clientpref-night .pfTokens .token,
			html.skin-theme-clientpref-night .pfTokens .token span,
			html.skin-theme-clientpref-night .pfTokens .token a,
			html.skin-theme-clientpref-night .pfTokens .token * {
			color: #cdd6f4 !important;
			}

			html.skin-theme-clientpref-night .pfTokens .token .close,
			html.skin-theme-clientpref-night .pfTokens .token .close span {
			color: #f38ba8 !important;
	}		}

Line 132:		Line 141:
	background-color: #313244 !important;		background-color: #313244 !important;
	color: #cdd6f4 !important;		color: #cdd6f4 !important;
			}

			/* Token input placeholder and helper text */
			html.skin-theme-clientpref-night .pfTokens input[type="text"]::placeholder {
			color: #a6adc8 !important;
			opacity: 1 !important;
			}

			html.skin-theme-clientpref-night .pfTokens input::placeholder {
			color: #a6adc8 !important;
			opacity: 1 !important;
	}		}

Line 212:		Line 232:
	}		}

	/* Placeholder text */		/* Placeholder text - all inputs */
	html.skin-theme-clientpref-night input::placeholder,		html.skin-theme-clientpref-night input::placeholder,
	html.skin-theme-clientpref-night textarea::placeholder {		html.skin-theme-clientpref-night textarea::placeholder {
	color: #~~6c7086~~ !important;		color: #a6adc8 !important;
			opacity: 1 !important;
	}		}

Line 268:		Line 289:
	}		}

	html.skin-theme-clientpref-os .pfTokens .token .close {		html.skin-theme-clientpref-os .pfTokens .token,
	color: #~~bac2de~~ !important;		html.skin-theme-clientpref-os .pfTokens .token span,
			html.skin-theme-clientpref-os .pfTokens .token a,
			html.skin-theme-clientpref-os .pfTokens .token * {
			color: #cdd6f4 !important;
			}

			html.skin-theme-clientpref-os .pfTokens .token .close,
			html.skin-theme-clientpref-os .pfTokens .token .close span {
			color: #f38ba8 !important;
	}		}

Line 275:		Line 304:
	background-color: #313244 !important;		background-color: #313244 !important;
	color: #cdd6f4 !important;		color: #cdd6f4 !important;
			}

			html.skin-theme-clientpref-os .pfTokens input[type="text"]::placeholder,
			html.skin-theme-clientpref-os .pfTokens input::placeholder {
			color: #a6adc8 !important;
			opacity: 1 !important;
	}		}

Line 349:		Line 384:
	html.skin-theme-clientpref-os input::placeholder,		html.skin-theme-clientpref-os input::placeholder,
	html.skin-theme-clientpref-os textarea::placeholder {		html.skin-theme-clientpref-os textarea::placeholder {
	color: #~~6c7086~~ !important;		color: #a6adc8 !important;
			opacity: 1 !important;
	}		}

Arclight-MCP-Bot: Add support for info boxes and additional form elements in dark mode (via update-page on MediaWiki MCP Server)

2026-01-20T04:32:28Z

Add support for info boxes and additional form elements in dark mode (via update-page on MediaWiki MCP Server)

Show changes

Arclight: Arclight changed the content model of the page Template:Form styles.css from "wikitext" to "Sanitized CSS"

2026-01-20T04:31:47Z

Arclight changed the content model of the page Template:Form styles.css from "wikitext" to "Sanitized CSS"

← Older revision	Revision as of 04:31, 20 January 2026
(No difference)

Arclight-MCP-Bot: Add dark mode support for Page Forms inputs (via create-page on MediaWiki MCP Server)

2026-01-20T04:29:32Z

Add dark mode support for Page Forms inputs (via create-page on MediaWiki MCP Server)

New page

/* Page Forms Dark Mode Styles */
/* Fixes visibility issues for form inputs in night mode */

/* ===== LIGHT MODE BASE STYLES ===== */

/* Form table styling */
.formtable {
background-color: #ffffff;
}

.formtable th {
color: #333333;
}

.formtable td {
color: #333333;
}

/* Section headers in forms */
.formtable td[style*="background:#f0f0f0"],
.formtable td[style*="background: #f0f0f0"] {
background-color: #f0f0f0 !important;
color: #333333 !important;
}

/* Token input fields (used for file selection) */
.pfTokens {
background-color: #ffffff !important;
border-color: #a2a9b1 !important;
}

.pfTokens .token {
background-color: #f0f0f5 !important;
color: #333333 !important;
border-color: #c0c0c5 !important;
}

.pfTokens .token .close {
color: #666666 !important;
}

.pfTokens input[type="text"] {
background-color: #ffffff !important;
color: #333333 !important;
}

/* Combobox inputs */
.pfComboBox,
.pfComboBox input {
background-color: #ffffff !important;
color: #333333 !important;
}

/* Standard text inputs */
.formtable input[type="text"],
.formtable input[type="url"],
.formtable input[type="number"],
.formtable textarea,
.formtable select {
background-color: #ffffff;
color: #333333;
border-color: #a2a9b1;
}

/* Dropdown/select styling */
.formtable select {
background-color: #ffffff;
color: #333333;
}

/* Autocomplete dropdown */
.ui-autocomplete,
.ui-menu {
background-color: #ffffff !important;
border-color: #a2a9b1 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-menu .ui-menu-item {
color: #333333 !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-focus,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-focus {
background-color: #e8e8e8 !important;
color: #333333 !important;
}

/* ===== DARK MODE STYLES ===== */

/* User preference: night mode */
html.skin-theme-clientpref-night .formtable {
background-color: #1e1e2e;
}

html.skin-theme-clientpref-night .formtable th {
color: #cdd6f4;
}

html.skin-theme-clientpref-night .formtable td {
color: #cdd6f4;
}

/* Section headers - override inline styles */
html.skin-theme-clientpref-night .formtable td[style*="background:#f0f0f0"],
html.skin-theme-clientpref-night .formtable td[style*="background: #f0f0f0"] {
background-color: #45475a !important;
color: #cdd6f4 !important;
}

/* Token input fields */
html.skin-theme-clientpref-night .pfTokens {
background-color: #313244 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-night .pfTokens .token {
background-color: #45475a !important;
color: #cdd6f4 !important;
border-color: #585b70 !important;
}

html.skin-theme-clientpref-night .pfTokens .token .close {
color: #bac2de !important;
}

html.skin-theme-clientpref-night .pfTokens input[type="text"] {
background-color: #313244 !important;
color: #cdd6f4 !important;
}

/* Combobox inputs */
html.skin-theme-clientpref-night .pfComboBox,
html.skin-theme-clientpref-night .pfComboBox input {
background-color: #313244 !important;
color: #cdd6f4 !important;
border-color: #45475a !important;
}

/* Standard text inputs */
html.skin-theme-clientpref-night .formtable input[type="text"],
html.skin-theme-clientpref-night .formtable input[type="url"],
html.skin-theme-clientpref-night .formtable input[type="number"],
html.skin-theme-clientpref-night .formtable textarea,
html.skin-theme-clientpref-night .formtable select {
background-color: #313244 !important;
color: #cdd6f4 !important;
border-color: #45475a !important;
}

/* Dropdown/select styling */
html.skin-theme-clientpref-night .formtable select {
background-color: #313244 !important;
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .formtable select option {
background-color: #313244;
color: #cdd6f4;
}

/* Autocomplete dropdown */
html.skin-theme-clientpref-night .ui-autocomplete,
html.skin-theme-clientpref-night .ui-menu {
background-color: #313244 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item {
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-autocomplete .ui-state-focus,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-menu .ui-state-focus {
background-color: #45475a !important;
color: #cdd6f4 !important;
}

/* Checkboxes and radio buttons labels */
html.skin-theme-clientpref-night .formtable label {
color: #cdd6f4;
}

/* Small help text */
html.skin-theme-clientpref-night .formtable small {
color: #a6adc8;
}

/* Links in forms */
html.skin-theme-clientpref-night .formtable a {
color: #89b4fa;
}

/* Form buttons */
html.skin-theme-clientpref-night input[type="submit"],
html.skin-theme-clientpref-night button {
background-color: #45475a;
color: #cdd6f4;
border-color: #585b70;
}

html.skin-theme-clientpref-night input[type="submit"]:hover,
html.skin-theme-clientpref-night button:hover {
background-color: #585b70;
}

/* Placeholder text */
html.skin-theme-clientpref-night .formtable input::placeholder,
html.skin-theme-clientpref-night .formtable textarea::placeholder {
color: #6c7086 !important;
}

/* ===== OS DARK MODE PREFERENCE ===== */

@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .formtable {
background-color: #1e1e2e;
}

html.skin-theme-clientpref-os .formtable th {
color: #cdd6f4;
}

html.skin-theme-clientpref-os .formtable td {
color: #cdd6f4;
}

html.skin-theme-clientpref-os .formtable td[style*="background:#f0f0f0"],
html.skin-theme-clientpref-os .formtable td[style*="background: #f0f0f0"] {
background-color: #45475a !important;
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-os .pfTokens {
background-color: #313244 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-os .pfTokens .token {
background-color: #45475a !important;
color: #cdd6f4 !important;
border-color: #585b70 !important;
}

html.skin-theme-clientpref-os .pfTokens .token .close {
color: #bac2de !important;
}

html.skin-theme-clientpref-os .pfTokens input[type="text"] {
background-color: #313244 !important;
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-os .pfComboBox,
html.skin-theme-clientpref-os .pfComboBox input {
background-color: #313244 !important;
color: #cdd6f4 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-os .formtable input[type="text"],
html.skin-theme-clientpref-os .formtable input[type="url"],
html.skin-theme-clientpref-os .formtable input[type="number"],
html.skin-theme-clientpref-os .formtable textarea,
html.skin-theme-clientpref-os .formtable select {
background-color: #313244 !important;
color: #cdd6f4 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-os .formtable select option {
background-color: #313244;
color: #cdd6f4;
}

html.skin-theme-clientpref-os .ui-autocomplete,
html.skin-theme-clientpref-os .ui-menu {
background-color: #313244 !important;
border-color: #45475a !important;
}

html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item,
html.skin-theme-clientpref-os .ui-menu .ui-menu-item {
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item:hover,
html.skin-theme-clientpref-os .ui-autocomplete .ui-state-focus,
html.skin-theme-clientpref-os .ui-menu .ui-menu-item:hover,
html.skin-theme-clientpref-os .ui-menu .ui-state-focus {
background-color: #45475a !important;
color: #cdd6f4 !important;
}

html.skin-theme-clientpref-os .formtable label {
color: #cdd6f4;
}

html.skin-theme-clientpref-os .formtable small {
color: #a6adc8;
}

html.skin-theme-clientpref-os .formtable a {
color: #89b4fa;
}

html.skin-theme-clientpref-os input[type="submit"],
html.skin-theme-clientpref-os button {
background-color: #45475a;
color: #cdd6f4;
border-color: #585b70;
}

html.skin-theme-clientpref-os input[type="submit"]:hover,
html.skin-theme-clientpref-os button:hover {
background-color: #585b70;
}

html.skin-theme-clientpref-os .formtable input::placeholder,
html.skin-theme-clientpref-os .formtable textarea::placeholder {
color: #6c7086 !important;
}
}

Template:Form styles.css - Revision history

Arclight-MCP-Bot: Fix token text and helper text visibility in dark mode with higher specificity selectors (via update-page on MediaWiki MCP Server)

Arclight-MCP-Bot: Add support for info boxes and additional form elements in dark mode (via update-page on MediaWiki MCP Server)

Arclight: Arclight changed the content model of the page Template:Form styles.css from "wikitext" to "Sanitized CSS"

Arclight-MCP-Bot: Add dark mode support for Page Forms inputs (via create-page on MediaWiki MCP Server)