User:Canadabonk/sandbox.js: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 2:
if ($('#cosmostweaks-coloreditor').length) {
mw.util.addCSS(`
#cosmostweaks-coloreditor {
background-color: #eee;
color: black;
padding:10px;
color-scheme:light;
}
#cosmostweaks-coloreditor td, #cosmostweaks-coloreditor th {
background-color:lightgrey;
border:1px solid grey;
}
#cosmostweaks-coloreditor thtd div {
display:flex;
background-color:lightgrey;
justify-content:center;
}
}
`);
#cosmostweaks-coloreditor input[type='color'] {
padding:0;
border:0;
cursor:pointer;
}
#cosmostweaks-coloreditor input[type='color']:hover {
opacity:0.6;
}`);
const CSSvarsList = [
Line 56 ⟶ 64:
text = "";
for (const x of CSSvarsList) {
text += `<tr data-row="${x}"><th>${x}</th><td class="lightcol"><div>${createinput(lightmodevars[x])}</div></td><td class="darkcol"><div>${createinput(darkmodevars[x])}</div></td></tr>\n`;
}
return text;
Line 81 ⟶ 89:
Paste the resulting code into your "Mediawiki:Gadget-cosmostweaks.css" to apply it.<br>
This tool can only work with hexcodes (like "#000000"). Swap them out for RGBA values with opacity in the CSS page, if desired.</p>
<table>
<table style="width:100%;border-collapse:collapse">
<tr><td style="width:30%"></td><th>Light mode</th><th>Dark mode</th></tr>
${CSSvarsRows()}
</table>
<table style="width:100%;border-collapse:collapse">
<tr><td style="width:50%">
<p>Light mode colors:</p>
Line 102 ⟶ 110:
$(e.target).attr('value', color);
$(e.target).siblings('input').attr('value', color);
switch($(e.target).parentclosest('td').attr('class')) {
case 'lightcol':
lightmodevars[variable] = color;
250

edits