MediaWiki:Gadget-hero-comparison.css: Difference between revisionsGive feedback
No edit summary |
Theme-aware styling for the controls panel, replacing the inline styles removed from the gadget JS (with help from vergir-bot LLM) |
||
| Line 5: | Line 5: | ||
color: #4CAF50 !important; | color: #4CAF50 !important; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
/* --- Controls panel (markup injected by Gadget-hero-comparison.js) --- */ | |||
#hero-controls { | |||
display: flex; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
gap: 15px; | |||
margin-bottom: 15px; | |||
padding: 12px; | |||
border-radius: 4px; | |||
background: var(--background-color-base-2); | |||
border: 1px solid var(--border-color-base); | |||
color: var(--color-base); | |||
} | |||
#hero-controls .hero-control-label { | |||
display: flex; | |||
align-items: center; | |||
gap: 5px; | |||
} | |||
#hero-controls .hero-label-boons, | |||
#hero-controls .hero-label-spirit { | |||
font-weight: bold; | |||
} | |||
#hero-controls .hero-label-boons { | |||
color: #fff4df; | |||
} | |||
#hero-controls .hero-label-spirit { | |||
color: #c288f0; | |||
} | |||
#hero-controls .hero-control-note { | |||
color: var(--color-subtle); | |||
font-size: 0.85em; | |||
} | |||
#hero-controls input[type="number"] { | |||
padding: 4px; | |||
color-scheme: dark; | |||
background: var(--background-color-base); | |||
color: var(--color-base); | |||
border: 1px solid var(--border-color-base); | |||
} | |||
#hero-input-power { | |||
width: 60px; | |||
} | |||
#hero-input-spirit { | |||
width: 70px; | |||
} | } | ||
#hero-controls input:focus { | #hero-controls input:focus { | ||
outline: 1px solid # | outline: 1px solid var(--color-progressive); | ||
border-color: | border-color: var(--border-color-base); | ||
} | |||
#hero-controls button { | |||
padding: 4px 12px; | |||
cursor: pointer; | |||
border-radius: 3px; | |||
background: var(--background-color-base); | |||
color: var(--color-base); | |||
border: 1px solid var(--border-color-base); | |||
} | } | ||
#hero-controls button:hover { | #hero-controls button:hover { | ||
background: # | background: var(--background-color-base-3); | ||
} | |||
:root[data-mode="light"] #hero-controls input[type="number"] { | |||
color-scheme: light; | |||
} | |||
:root[data-mode="light"] #hero-controls .hero-label-boons { | |||
color: var(--color-emphasized); | |||
} | |||
:root[data-mode="light"] #hero-controls .hero-label-spirit { | |||
color: #6035b0; | |||
} | } | ||