MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* wiki styling */
body {
font-family: "Helvetica", "Arial", sans-serif;
background-color: #e3e8eb; /* from title screen */
}
.mw-body h1,.mw-body .mw-heading1,.mw-body-content h1,.mw-body-content .mw-heading1,.mw-body-content h2,.mw-body-content .mw-heading2 {
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5em; /* to fix icons getting cut off */
}
#mw-page-base {
background-image: linear-gradient(to bottom, #eff5f7 /* title screen made brighter */ 50%, #e3e8eb 100%);
}
.mw-body {
border: 1px solid #aeb6c2; /* from experiment mode background */
}
.mw-body, .parsoid-body {
background-color: #fafcfd; /* card color */
padding: 1em;
}
.mw-content-container {
max-width: 982px; /* trying to fix 2022 vector width */
}
.vector-menu-tabs-legacy, .vector-menu-tabs-legacy a {
background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #aeb6c2 100%);
}
.vector-menu-tabs-legacy .selected {
background: #fafcfd;
}
.vector-menu-tabs-legacy li {
background-image: linear-gradient(to top, #7f8792 /* adjusted to fit with border color */ 0, #e4f5ff /* reactor background but made way brighter*/ 1px, #eff5f7 100%);
}
/* text/icon styles */
/* choices */
.color-choice {
display: inline-block;
}
.color-choice span {
display: inline-block;
animation: bounce 3s infinite;
transform-origin: bottom;
color: #555;
}
.color-choice span:nth-child(1) {
animation-delay: 0s;
}
.color-choice span:nth-child(2) {
animation-delay: 1s;
}
.color-choice span:nth-child(3) {
animation-delay: 2s;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
15% {
transform: translateY(-2px);
color: #aaa;
}
30% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
/* cloaking */
.color-cloaked {
letter-spacing: 2px;
animation: cloak 6s linear infinite alternate;
color: rgba(0, 0, 0, 0);
}
@keyframes cloak {
0% {
text-shadow: 0 0 0 #000;
opacity: 1;
}
50% {
text-shadow: 0 0 0 #000;
opacity: 1;
}
100% {
text-shadow: 0 0 15px #000;
opacity: 0;
}
}
/* alternate universe */
.alt {
animation: alt 8s linear infinite alternate;
font-weight: 400;
letter-spacing: 1px;
}
@keyframes alt {
0% {
text-shadow: 3px 0px 0px;
}
100% {
text-shadow: -3px 0px 0px;
}
}
/* frequency */
.flicker {
animation: flicker 4s linear infinite;
}
@keyframes flicker {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* undefined */
.lore {
animation: bgColor 3.5s linear infinite;
}
.lore-text {
animation: textColor 3s linear infinite;
}
@keyframes bgColor {
0% {
background-color: rgb(63, 218, 216)
}
10% {
background-color: rgb(47, 201, 226)
}
20% {
background-color: rgb(28, 127, 238)
}
30% {
background-color: rgb(95, 21, 242)
}
40% {
background-color: rgb(186, 12, 248)
}
50% {
background-color: rgb(251, 7, 217)
}
60% {
background-color: rgb(255, 0, 0)
}
70% {
background-color: rgb(255, 0, 0)
}
80% {
background-color: rgb(255, 154, 0)
}
90% {
background-color: rgb(208, 222, 33)
}
100% {
background-color: rgb(79, 220, 74)
}
}
@keyframes textColor {
0% {
color: rgb(63, 218, 216)
}
10% {
color: rgb(47, 201, 226)
}
20% {
color: rgb(28, 127, 238)
}
30% {
color: rgb(95, 21, 242)
}
40% {
color: rgb(186, 12, 248)
}
50% {
color: rgb(251, 7, 217)
}
60% {
color: rgb(255, 0, 0)
}
70% {
color: rgb(255, 0, 0)
}
80% {
color: rgb(255, 154, 0)
}
90% {
color: rgb(208, 222, 33)
}
100% {
color: rgb(79, 220, 74)
}
}
/* entanglement */
.flipX {
animation: 14s anim-flipX linear infinite;
}
@keyframes anim-flipX {
0% {
transform: rotateX(0.5turn);
}
50% {
transform: rotateX(1turn);
}
100% {
transform: rotateX(0.5turn);
}
}
/* stun from c-gon */
.color-stun {
animation: stun 0.2s linear infinite normal;
}
@keyframes stun {
0% {
color: #5b1fb5;
}
33% {
color: #c7bf30;
}
67% {
color: #35c730;
}
100% {
color: #c730b5;
}
}
/* Infoboxes, from en.wikipedia */
.infobox {
border: 1px solid #a2a9b1;
color: black;
padding: 0.2em;
font-size: 88%;
line-height: 1.5em;
border-spacing: 3px;
}
@media screen {
.infobox {
background-color: #f8f9fa;
}
}
@media (max-width: 640px) {
.infobox {
width: 100%;
}
.infobox .nowrap {
white-space: normal;
}
}
@media (min-width: 640px) {
.infobox {
/* @noflip */
margin: 0.5em 0 0.5em 1em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
width: 22em;
}
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
/* @noflip */
text-align: left;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
padding: 0.2em;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
text-align: center;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
/* @noflip */
text-align: right;
}