User:Canadabonk/sandbox.js: Difference between revisions
Content deleted Content added
Canadabonk (talk | contribs) No edit summary Tag: Reverted |
Canadabonk (talk | contribs) No edit summary Tag: Reverted |
||
Line 1:
$('head link[rel=stylesheet]').first().after('<style>' + newCSSRules + '</style>');
$(document).ready(function(){
if ($('body.skin-cosmos').length) {
Line 48 ⟶ 69:
}`;
▲ const newCSSRules = `
▲ body {
▲ background-color: var(--main-background-color);
▲ }
▲ #mw-content, #catlinks, .mw-prefs-buttons, #managewiki .managewiki-submit-formfields {
▲ background: var(--content-background-color);
▲ }
▲ body .oo-ui-tabOptionWidget, body #mw-content, body #mw-content-text {
▲ color: var(--text-color);
▲ }
▲ #mw-content a:not(.new) {
▲ color: var(--link-color);
▲ }
▲ `;
$('head link[rel=stylesheet]').first().after('<style>' + newCSSVariables
$('#printCSSVars').append(
|
Revision as of 09:41, 13 June 2024
const newCSSRules = `
body {
background-color: var(--main-background-color);
}
#mw-content, #catlinks, .mw-prefs-buttons, #managewiki .managewiki-submit-formfields {
background: var(--content-background-color);
}
body .oo-ui-tabOptionWidget, body #mw-content, body #mw-content-text {
color: var(--text-color);
}
#mw-content a:not(.new) {
color: var(--link-color);
}
`;
$('head link[rel=stylesheet]').first().after('<style>' + newCSSRules + '</style>');
$(document).ready(function(){
if ($('body.skin-cosmos').length) {
const
mainBackgroundColor = $('body').css('background-color'),
contentBackgroundColor = $('#mw-content').css('background-color'),
fontColor = $('#mw-content').css('color'),
linkColor = $('#content a:not(.new').css('color'),
bannerColor = $('#cosmos-banner').css('background-color'),
headerColor = $('.cosmos-header').css('background-color'),
buttonColor = $('.cosmos-button-primary').css('background-color'),
buttonTextColor = $('.cosmos-button-primary').css('color'),
footerColor = $('#cosmos-footer').css('background-color');
function cssVar(name, val, desc) {
this.name = name;
this.val = val;
this.desc = desc ? desc : "none";
}
const variablesList = {
mainbgcolor: new cssVar('--main-background-color', mainBackgroundColor, "used for background behind content block. hidden if there is a background image"),
contentbgcolor: new cssVar('--content-background-color', contentBackgroundColor, "background of the content block"),
fontcolor: new cssVar('--text-color', fontColor),
linkcolor: new cssVar('--link-color', linkColor),
bannercolor: new cssVar('--banner-color', bannerColor),
headercolor: new cssVar('--header-color', headerColor),
buttoncolor: new cssVar('--button-color', buttonColor),
buttontext: new cssVar('--button-text-color', buttonTextColor),
footercolor: new cssVar('--footer-color', footerColor),
};
function variablesListCSS() {
text = "";
for (var x in variablesList){
text += " " + variablesList[x].name + ": " + variablesList[x].val + ";\n";
}
return text;
}
const newCSSVariables =
`:root {
${variablesListCSS()}
}`;
$('head link[rel=stylesheet]').first().after('<style>' + newCSSVariables + '</style>');
$('#printCSSVars').append(
`<pre>
${newCSSVariables}
</pre>`);
$('#printCSSVarsTable').append(printCSSVarsTable());
function printCSSVarsTable() {
table = '<table class="wikitable"><tr><th>CSS variable</th><th>Value</th><th>Description</th></tr>';
for (var x in variablesList){
table += `<tr><td>${variablesList[x].name}</td><td><div style="display:inline-block;margin-right:0.5em;width:1em;height:1em;border:1px solid black;background-color:${variablesList[x].val};"></div>${variablesList[x].val}</td><td>${variablesList[x].desc}</td>`;
}
table += '</table>';
return table;
}
if ($('.cosmos-header').css('background-image') == "none") {
mw.util.addCSS('.cosmos-header::before {display:none}');
}
}
});