User:Canadabonk/sandbox.js: Difference between revisions

Content added Content deleted
No edit summary
No edit summary
Line 2: Line 2:
if ($('#cosmostweaks-coloreditor').length) {
if ($('#cosmostweaks-coloreditor').length) {
mw.util.addCSS(`
mw.util.addCSS(`
#cosmostweaks-coloreditor {
#cosmostweaks-coloreditor {
background-color: #eee;
background-color: #eee;
color: black;
color: black;
padding:10px;
padding:10px;
color-scheme:light;
color-scheme:light;
}
}
#cosmostweaks-coloreditor td, #cosmostweaks-coloreditor th {
#cosmostweaks-coloreditor th {
⚫
background-color:lightgrey;
border:1px solid grey;
}
}
#cosmostweaks-coloreditor th {
#cosmostweaks-coloreditor td 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 = [
const CSSvarsList = [
Line 56: Line 64:
text = "";
text = "";
for (const x of CSSvarsList) {
for (const x of CSSvarsList) {
text += `<tr data-row="${x}"><th>${x}</th><td class="lightcol">${createinput(lightmodevars[x])}</td><td class="darkcol">${createinput(darkmodevars[x])}</td></tr>\n`;
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;
return text;
Line 81: Line 89:
Paste the resulting code into your "Mediawiki:Gadget-cosmostweaks.css" to apply it.<br>
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>
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>
<tr><td></td><th>Light mode</th><th>Dark mode</th></tr>
${CSSvarsRows()}
${CSSvarsRows()}
</table>
</table>
<table style="width:100%;border-collapse:collapse">
<table style="width:100%;">
<tr><td style="width:50%">
<tr><td style="width:50%">
<p>Light mode colors:</p>
<p>Light mode colors:</p>
Line 102: Line 110:
$(e.target).attr('value', color);
$(e.target).attr('value', color);
$(e.target).siblings('input').attr('value', color);
$(e.target).siblings('input').attr('value', color);
switch($(e.target).parent().attr('class')) {
switch($(e.target).closest('td').attr('class')) {
case 'lightcol':
case 'lightcol':
lightmodevars[variable] = color;
lightmodevars[variable] = color;
Retrieved from "https://publictestwiki.com/wiki/User:Canadabonk/sandbox.js"