MediaWiki:Common.css
Appearance
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; } #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; } }