MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 35: | Line 35: | ||
vertical-align: top; | vertical-align: top; | ||
padding: 0 0.5em; | padding: 0 0.5em; | ||
} | |||
/* Wavy */ | |||
@keyframes wave { | |||
0%, 100% { transform: translateY(0); } | |||
50% { transform: translateY(-6px); } | |||
} | |||
.wavy span { | |||
display: inline-block; | |||
animation: wave 1s ease-in-out infinite; | |||
animation-delay: var(--wave-delay, 0s); | |||
} | |||
/* Rainbow — per-letter hue cycling */ | |||
@keyframes hue-cycle { | |||
from { color: hsl(var(--hue), 100%, 60%); } | |||
to { color: hsl(calc(var(--hue) + 360deg), 100%, 60%); } | |||
} | |||
.rainbow span { | |||
animation: hue-cycle 3s linear infinite; | |||
animation-delay: var(--delay, 0s); | |||
} | |||
/* When both classes are combined */ | |||
.wavy.rainbow span { | |||
display: inline-block; | |||
animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite; | |||
animation-delay: var(--wave-delay, 0s), var(--delay, 0s); | |||
} | } | ||
Revision as of 16:04, 9 March 2026
/* CSS placed here will be applied to all skins */
.infobox {
border: 1px solid #aaa;
float: right;
margin: 0 0 1em 1em;
width: 300px;
}
.infobox table {
width: 100%;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.ib-city {
background: #DDAA22;
}
.ib-country {
background: #DD7722;
}
.ib-deity {
background: #DDDD11;
}
.infobox-image {
text-align: center;
}
.infobox th {
text-align: center;
vertical-align: top;
padding-top: 1em;
}
.infobox td {
text-align: center;
vertical-align: top;
padding: 0 0.5em;
}
/* Wavy */
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.wavy span {
display: inline-block;
animation: wave 1s ease-in-out infinite;
animation-delay: var(--wave-delay, 0s);
}
/* Rainbow — per-letter hue cycling */
@keyframes hue-cycle {
from { color: hsl(var(--hue), 100%, 60%); }
to { color: hsl(calc(var(--hue) + 360deg), 100%, 60%); }
}
.rainbow span {
animation: hue-cycle 3s linear infinite;
animation-delay: var(--delay, 0s);
}
/* When both classes are combined */
.wavy.rainbow span {
display: inline-block;
animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite;
animation-delay: var(--wave-delay, 0s), var(--delay, 0s);
}