Template:PI/styles.css: Difference between revisionsGive feedback
Jump to navigation
Jump to search
Created page with ".pi-wrapper { z-index: 1; position: relative; bottom: 6px; left: 16px; font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; color: #FFEFD7; } .pi-text { color: #FFEFD7; text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.6); font-weight: bold; background-color: rgba(33, 33, 29, 0.6); border-radius: 5px; padding: 2px 2px 0px 2px; margin-left: -17px; } .pi-icon { z-index: -1; opacity: 0.7; position: relat..." |
Use the sitewide scaling color tokens instead of hardcoded colors, so the values adapt to light mode (with help from vergir-bot LLM) |
||
| (4 intermediate revisions by 2 users 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. */ | |||
.pi-wrapper { | .pi-wrapper { | ||
z-index: 1; | z-index: 1; | ||
position: relative; | position: relative; | ||
bottom: 6px; | bottom: 6px; | ||
left: | left: -6px; | ||
font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; | font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif; | ||
color: # | color: var(--color-scaling-boon, #99ffd6); | ||
} | } | ||
.pi-text { | .pi-text { | ||
color: # | color: var(--color-scaling-boon, #99ffd6); | ||
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.6); | text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.6); | ||
font-weight: bold; | font-weight: bold; | ||
background-color: rgba(33, 33, 29, 0.6); | background-color: var(--background-color-scaling-boon, rgba(33, 33, 29, 0.6)); | ||
border-radius: 5px; | border-radius: 5px; | ||
padding: 2px 2px 0px 2px; | padding: 2px 2px 0px 2px; | ||
margin- | margin-right: -5px; | ||
} | } | ||
| Line 23: | Line 26: | ||
position: relative; | position: relative; | ||
bottom: 5px; | bottom: 5px; | ||
left: - | left: 5px; | ||
margin-left: -3px; | |||
} | } | ||
.pi-compact { | .pi-compact { | ||
cursor: help; | cursor: help; | ||
display: inline- | display: inline-flex; | ||
align-items: baseline; | |||
gap: 2px; | |||
vertical-align: middle; | vertical-align: middle; | ||
line-height: 1; | |||
} | |||
.pi-value { | |||
color: var(--color-scaling-boon-value, #aaa); | |||
font-size: 0.75em; | |||
font-variant-numeric: tabular-nums; | |||
font-family: inherit; | |||
text-shadow: none; | |||
white-space: nowrap; | |||
} | |||
.pi-compact:hover .pi-value { | |||
color: var(--color-scaling-boon-value--hover, #ccc); | |||
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. */
.pi-wrapper {
z-index: 1;
position: relative;
bottom: 6px;
left: -6px;
font-family: 'Retail Demo Regular', 'PT Serif', 'Palatino', serif;
color: var(--color-scaling-boon, #99ffd6);
}
.pi-text {
color: var(--color-scaling-boon, #99ffd6);
text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.6);
font-weight: bold;
background-color: var(--background-color-scaling-boon, rgba(33, 33, 29, 0.6));
border-radius: 5px;
padding: 2px 2px 0px 2px;
margin-right: -5px;
}
.pi-icon {
z-index: -1;
opacity: 0.7;
position: relative;
bottom: 5px;
left: 5px;
margin-left: -3px;
}
.pi-compact {
cursor: help;
display: inline-flex;
align-items: baseline;
gap: 2px;
vertical-align: middle;
line-height: 1;
}
.pi-value {
color: var(--color-scaling-boon-value, #aaa);
font-size: 0.75em;
font-variant-numeric: tabular-nums;
font-family: inherit;
text-shadow: none;
white-space: nowrap;
}
.pi-compact:hover .pi-value {
color: var(--color-scaling-boon-value--hover, #ccc);
transition: color 0.15s ease;
}