MediaWiki:Gadget-hero-comparison.js: Difference between revisions

Jump to navigation Jump to search
LVL (talk | contribs)
Sig fig 3 to 4
Vergir (talk | contribs)
Move controls panel styling out of inline styles into the gadget CSS so it follows the light/dark theme (with help from vergir-bot LLM)
 
Line 139: Line 139:
         const maxSpirit = parseInt(container.dataset.maxSpirit) || 500;
         const maxSpirit = parseInt(container.dataset.maxSpirit) || 500;
         container.insertAdjacentHTML('afterbegin', `
         container.insertAdjacentHTML('afterbegin', `
             <div id="hero-controls" style="margin-bottom: 15px; padding: 12px; background: #1e1e1e; border: 1px solid #333; border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px;">
             <div id="hero-controls">
                 <label style="color: #fff; display: flex; align-items: center; gap: 5px;">
                 <label class="hero-control-label">
                     <span style="color: #fff4df; font-weight: bold;">Boons:</span>
                     <span class="hero-label-boons">Boons:</span>
                     <input type="number" id="hero-input-power" min="0" max="${maxPower}" value="0"
                     <input type="number" id="hero-input-power" min="0" max="${maxPower}" value="0">
                          style="width: 60px; background: #2a2a2a; color: #fff; border: 1px solid #555; padding: 4px;">
                 </label>
                 </label>
                 <label style="color: #fff; display: flex; align-items: center; gap: 5px;">
                 <label class="hero-control-label">
                     <span style="color: #cc88ff; font-weight: bold;">Bonus Spirit Power:</span>
                     <span class="hero-label-spirit">Bonus Spirit Power:</span>
                     <input type="number" id="hero-input-spirit" min="0" max="${maxSpirit}" value="0" step="10"
                     <input type="number" id="hero-input-spirit" min="0" max="${maxSpirit}" value="0" step="10">
                          style="width: 70px; background: #2a2a2a; color: #fff; border: 1px solid #555; padding: 4px;">
                 </label>
                 </label>
                 <button id="hero-reset-btn" style="padding: 4px 12px; cursor: pointer; background: #444; color: #fff4df; border: 1px solid #666; border-radius: 3px;">Reset</button>
                 <button id="hero-reset-btn">Reset</button>
                 <button id="hero-max-btn" style="padding: 4px 12px; cursor: pointer; background: #444; color: #fff4df; border: 1px solid #666; border-radius: 3px;">Max Boons</button>
                 <button id="hero-max-btn">Max Boons</button>
                 <button id="hero-toggle-all-alt" style="padding: 4px 12px; cursor: pointer; background: #444; color: #fff4df; border: 1px solid #666; border-radius: 3px;">Show Alt‑Fire</button>
                 <button id="hero-toggle-all-alt">Show Alt‑Fire</button>
                 <span style="color: #888; font-size: 0.85em;">Values update automatically</span>
                 <span class="hero-control-note">Values update automatically</span>
             </div>
             </div>
         `);
         `);