MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
$(document).ready(function () { | $(document).ready(function () { | ||
// --- Add Global Theme Class --- | |||
document.body.classList.add('madness-theme'); // This line is likely already there | |||
// --- Toggle Sidebar Tools Panel --- (This part seems fine, leave it if it works) | |||
const tools = document.getElementById('p-tb'); | |||
if (tools) { | |||
tools.classList.add('collapsed'); | |||
const toggleBtn = document.createElement('div'); | |||
toggleBtn.id = 'p-tb-toggle'; | |||
// ... (rest of your existing toggle code) ... | |||
} | |||
// --- NEW: Add CSS Overrides for a better theme --- | |||
const cssFixes = ` | |||
/* Make sure these selectors are specific enough to override existing styles. | |||
You might need to inspect elements to find the right classes/IDs targeted by .madness-theme */ | |||
.madness-theme, .madness-theme body { | |||
/* Tone down the overall background if it's too dark */ | |||
/* background-color: #2a2a2a !important; Example: a softer dark */ | |||
} | |||
/* Main page title (e.g., "Editing MediaWiki:Common.js") */ | |||
.madness-theme #firstHeading, .madness-theme .mw-first-heading { | |||
color: #E0E0E0 !important; /* Light gray/white for readability on dark */ | |||
' | text-shadow: none !important; /* Remove aggressive text shadow */ | ||
/* Or a very subtle shadow: text-shadow: 0 0 5px rgba(200, 200, 200, 0.3) !important; */ | |||
} | |||
/* The main content area box */ | |||
.madness-theme #content, .madness-theme #mw-content-text { | |||
/* background-color: #1e1e1e !important; /* Slightly different dark if needed */ | |||
/* border: 1px solid #555 !important; /* A subtle border instead of glow */ | |||
box-shadow: 0 0 10px rgba(128, 0, 0, 0.3) !important; /* Much softer, less intense glow, or none */ | |||
/* Or remove glow completely: box-shadow: none !important; */ | |||
} | |||
/* Warning boxes */ | |||
.madness-theme .warningbox, .madness-theme .usermessage { | |||
background-color: #4d2f2f !important; /* Darker, less saturated red background */ | |||
color: #f0f0f0 !important; /* Light text for contrast */ | |||
border-color: #803030 !important; | |||
} | |||
.madness-theme .warningbox p, .madness-theme .usermessage p { | |||
color: #f0f0f0 !important; | |||
} | |||
/* Links under the title (Message, Discussion, Edit, History) */ | |||
.madness-theme #p-views ul li a, .madness-theme #ca-edit a, .madness-theme #ca-history a { | |||
/* color: #87CEFA !important; /* Light Sky Blue - example */ | |||
} | |||
/* General text color within the content area if it's also red */ | |||
.madness-theme #mw-content-text p, | |||
.madness-theme #mw-content-text div, | |||
.madness-theme #mw-content-text li { | |||
/* color: #cccccc !important; /* Light gray for body text */ | |||
} | |||
/* Code editor area (if it's also affected by the theme) */ | |||
.madness-theme .ace_editor, .madness-theme .mw-editfont-monospace { | |||
/* background-color: #1c1c1c !important; */ | |||
/* color: #d4d4d4 !important; */ | |||
} | |||
.madness-theme .ace_gutter { | |||
/* background-color: #252526 !important; */ | |||
} | |||
.madness-theme .ace_string { | |||
/* color: #ce9178 !important; */ | |||
} | |||
.madness-theme .ace_keyword { | |||
/* color: #569cd6 !important; */ | |||
} | |||
.madness-theme .ace_comment { | |||
/* color: #6A9955 !important; */ | |||
} | |||
`; | |||
const styleElement = document.createElement('style'); | |||
styleElement.type = 'text/css'; | |||
if (styleElement.styleSheet) { | |||
// For IE8 and below. | |||
styleElement.styleSheet.cssText = cssFixes; | |||
} else { | |||
styleElement.appendChild(document.createTextNode(cssFixes)); | |||
} | |||
document.head.appendChild(styleElement); | |||
console.log('Custom CSS fixes applied for madness-theme.'); | |||
}); | }); |
Latest revision as of 10:31, 15 May 2025
$(document).ready(function () {
// --- Add Global Theme Class ---
document.body.classList.add('madness-theme'); // This line is likely already there
// --- Toggle Sidebar Tools Panel --- (This part seems fine, leave it if it works)
const tools = document.getElementById('p-tb');
if (tools) {
tools.classList.add('collapsed');
const toggleBtn = document.createElement('div');
toggleBtn.id = 'p-tb-toggle';
// ... (rest of your existing toggle code) ...
}
// --- NEW: Add CSS Overrides for a better theme ---
const cssFixes = `
/* Make sure these selectors are specific enough to override existing styles.
You might need to inspect elements to find the right classes/IDs targeted by .madness-theme */
.madness-theme, .madness-theme body {
/* Tone down the overall background if it's too dark */
/* background-color: #2a2a2a !important; Example: a softer dark */
}
/* Main page title (e.g., "Editing MediaWiki:Common.js") */
.madness-theme #firstHeading, .madness-theme .mw-first-heading {
color: #E0E0E0 !important; /* Light gray/white for readability on dark */
text-shadow: none !important; /* Remove aggressive text shadow */
/* Or a very subtle shadow: text-shadow: 0 0 5px rgba(200, 200, 200, 0.3) !important; */
}
/* The main content area box */
.madness-theme #content, .madness-theme #mw-content-text {
/* background-color: #1e1e1e !important; /* Slightly different dark if needed */
/* border: 1px solid #555 !important; /* A subtle border instead of glow */
box-shadow: 0 0 10px rgba(128, 0, 0, 0.3) !important; /* Much softer, less intense glow, or none */
/* Or remove glow completely: box-shadow: none !important; */
}
/* Warning boxes */
.madness-theme .warningbox, .madness-theme .usermessage {
background-color: #4d2f2f !important; /* Darker, less saturated red background */
color: #f0f0f0 !important; /* Light text for contrast */
border-color: #803030 !important;
}
.madness-theme .warningbox p, .madness-theme .usermessage p {
color: #f0f0f0 !important;
}
/* Links under the title (Message, Discussion, Edit, History) */
.madness-theme #p-views ul li a, .madness-theme #ca-edit a, .madness-theme #ca-history a {
/* color: #87CEFA !important; /* Light Sky Blue - example */
}
/* General text color within the content area if it's also red */
.madness-theme #mw-content-text p,
.madness-theme #mw-content-text div,
.madness-theme #mw-content-text li {
/* color: #cccccc !important; /* Light gray for body text */
}
/* Code editor area (if it's also affected by the theme) */
.madness-theme .ace_editor, .madness-theme .mw-editfont-monospace {
/* background-color: #1c1c1c !important; */
/* color: #d4d4d4 !important; */
}
.madness-theme .ace_gutter {
/* background-color: #252526 !important; */
}
.madness-theme .ace_string {
/* color: #ce9178 !important; */
}
.madness-theme .ace_keyword {
/* color: #569cd6 !important; */
}
.madness-theme .ace_comment {
/* color: #6A9955 !important; */
}
`;
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
if (styleElement.styleSheet) {
// For IE8 and below.
styleElement.styleSheet.cssText = cssFixes;
} else {
styleElement.appendChild(document.createTextNode(cssFixes));
}
document.head.appendChild(styleElement);
console.log('Custom CSS fixes applied for madness-theme.');
});