Template:Ss/styles.css: Difference between revisionsGive feedback
Jump to navigation
Jump to search
No edit summary |
Use the sitewide scaling color tokens instead of hardcoded colors, so the values adapt to light mode (with help from vergir-bot LLM) |
||
| 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 35: | Line 38: | ||
.ss-value { | .ss-value { | ||
color: #b89de0; | color: var(--color-scaling-spirit-value, #b89de0); | ||
font-size: 0.75em; | font-size: 0.75em; | ||
font-variant-numeric: tabular-nums; | font-variant-numeric: tabular-nums; | ||
| Line 44: | Line 47: | ||
.ss-compact:hover .ss-value { | .ss-compact:hover .ss-value { | ||
color: #E3BDFA; | color: var(--color-scaling-spirit-value--hover, #E3BDFA); | ||
transition: color 0.15s ease; | transition: color 0.15s ease; | ||
} | } | ||
Latest revision as of 23:38, 23 August 2026
/* 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 {
z-index: 1;
position: relative;
left: 1px;
bottom: 7px;
margin-left: -5px;
font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif;
color: var(--color-scaling-spirit, #E3BDFA);
}
.ss-icon {
position: relative;
z-index: -1;
opacity: 0.7;
}
.ss-text {
color: var(--color-scaling-spirit, #E3BDFA);
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.7);
font-weight: bold;
background-color: var(--background-color-scaling-spirit, rgba(83, 54, 105, 0.8));
border-radius: 5px;
padding: 2px 2px 0px 2px;
margin-left: -8px;
}
.ss-compact {
cursor: help;
display: inline-flex;
align-items: center;
gap: 2px;
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;
}