Jump to content

MediaWiki:Common.css: Difference between revisions

From FC1
No edit summary
No edit summary
 
(18 intermediate revisions by the same user not shown)
Line 2: Line 2:


.infobox {
.infobox {
    background: #eee;
     border: 1px solid #aaa;
     border: 1px solid #aaa;
     float: right;
     float: right;
     margin: 0 0 1em 1em;
     margin: 0 0 1em 1em;
    padding: 1em;
     width: 300px;
     width: 300px;
}
.infobox table {
    width: 100%;
}
}
.infobox-title {
.infobox-title {
Line 13: Line 14:
     text-align: center;
     text-align: center;
}
}
ib-city { background: #DDAA22; }
.ib-city {
ib-country { background: #DD7722; }
    background: #DDAA22;
ib-deity { background: #DDDD11; }
}
.ib-country {
    background: #DD7722;
}
.ib-deity {
    background: #DDDD11;
}
.infobox-image {
.infobox-image {
     text-align: center;
     text-align: center;
}
}
.infobox th {
.infobox th {
     text-align: right;
     text-align: center;
     vertical-align: top;
     vertical-align: top;
     width: 120px;
     padding-top: 1em;
}
}
.infobox td {
.infobox td {
    text-align: center;
     vertical-align: top;
     vertical-align: top;
    padding: 0 0.5em;
}
@keyframes wave {
  0%, 100% { transform: translateY(0) !important; }
  50%      { transform: translateY(-6px) !important; }
}
.wavy span {
  display: inline-block !important;
  animation: wave 1s ease-in-out infinite !important;
  animation-delay: var(--wave-delay, 0s) !important;
}
@keyframes hue-cycle {
  from { color: hsl(var(--hue), 100%, 60%) !important; }
  to  { color: hsl(calc(var(--hue) + 360deg), 100%, 60%) !important; }
}
.rainbow span {
  animation: hue-cycle 3s linear infinite !important;
  animation-delay: var(--delay, 0s) !important;
}
.wavy.rainbow span {
  display: inline-block !important;
  animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite !important;
  animation-delay: var(--wave-delay, 0s), var(--delay, 0s) !important;
}
}

Latest revision as of 23:38, 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;
}

@keyframes wave {
  0%, 100% { transform: translateY(0) !important; }
  50%       { transform: translateY(-6px) !important; }
}
.wavy span {
  display: inline-block !important;
  animation: wave 1s ease-in-out infinite !important;
  animation-delay: var(--wave-delay, 0s) !important;
}
@keyframes hue-cycle {
  from { color: hsl(var(--hue), 100%, 60%) !important; }
  to   { color: hsl(calc(var(--hue) + 360deg), 100%, 60%) !important; }
}
.rainbow span {
  animation: hue-cycle 3s linear infinite !important;
  animation-delay: var(--delay, 0s) !important;
}
.wavy.rainbow span {
  display: inline-block !important;
  animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite !important;
  animation-delay: var(--wave-delay, 0s), var(--delay, 0s) !important;
}