User:Canadabonk/sandbox.js: Difference between revisions
Content deleted Content added
Canadabonk (talk | contribs) No edit summary |
Canadabonk (talk | contribs) No edit summary |
||
Line 48:
}`;
$('#printCSSVars').append(
|
Revision as of 18:29, 12 June 2024
$(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}');
}
}
});