Template:Ss/styles.css: Difference between revisionsGive feedback
Created page with ".ss-wrapper { z-index: 1; position: relative; left: 1px; bottom: 7px; margin-left: -5px; font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; color: #E3BDFA; } .ss-icon { position: relative; z-index: -1; opacity: 0.7; } .ss-text { color: #E3BDFA; text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7); font-weight: bold; background-color: rgba(83, 54, 105, 0.8); border-radius: 5px; padding: 2px 2px 0px 2..." |
Use the sitewide scaling color tokens instead of hardcoded colors, so the values adapt to light mode (with help from vergir-bot LLM) |
||
| (One intermediate revision by one other user not shown) | |||
| Line 1: | Line 1: | ||
/* Colors come from the scaling tokens defined in [[MediaWiki:Gadget-brownTheme.css]]. | |||
The literal fallbacks keep the dark-mode appearance if that gadget is disabled. */ | |||
.ss-wrapper { | .ss-wrapper { | ||
z-index: 1; | z-index: 1; | ||
| Line 6: | Line 9: | ||
margin-left: -5px; | margin-left: -5px; | ||
font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; | font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; | ||
color: #E3BDFA; | color: var(--color-scaling-spirit, #E3BDFA); | ||
} | } | ||
| Line 16: | Line 19: | ||
.ss-text { | .ss-text { | ||
color: #E3BDFA; | color: var(--color-scaling-spirit, #E3BDFA); | ||
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7); | text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7); | ||
font-weight: bold; | font-weight: bold; | ||
background-color: rgba(83, 54, 105, 0.8); | background-color: var(--background-color-scaling-spirit, rgba(83, 54, 105, 0.8)); | ||
border-radius: 5px; | border-radius: 5px; | ||
padding: 2px 2px 0px 2px; | padding: 2px 2px 0px 2px; | ||
| Line 27: | Line 30: | ||
.ss-compact { | .ss-compact { | ||
cursor: help; | cursor: help; | ||
display: inline- | display: inline-flex; | ||
align-items: center; | |||
gap: 2px; | |||
vertical-align: middle; | vertical-align: middle; | ||
line-height: 1; | |||
} | |||
.ss-value { | |||
color: var(--color-scaling-spirit-value, #b89de0); | |||
font-size: 0.75em; | |||
font-variant-numeric: tabular-nums; | |||
font-family: inherit; | |||
text-shadow: none; | |||
white-space: nowrap; | |||
} | |||
.ss-compact:hover .ss-value { | |||
color: var(--color-scaling-spirit-value--hover, #E3BDFA); | |||
transition: color 0.15s ease; | |||
} | } | ||