Even for a low-activity wiki, hosting & rendering many HQ image files takes significant resources and comes with high monthly server costs.
If you're able, please consider contributing to keep the site running to help support this independent, ad-free, fan-run site. Thank you!
MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, 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)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
/********/
/* Font */
/********/
@import url('https://fonts.googleapis.com/css?family=Podkova:400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
/**************/
/* Restyling */
/**************/
body {
background-color: #242d3c;
font-family: Podkova, "Courier New", Courier, monospace;
}
.mw-body,
.parsoid-body {
background: #fff;
}
.mw-body #siteSub {
display: block;
}
/* Links */
a:link,
a:active,
div#mw-panel div.portal div.body ul li a,
div.vectorTabs li.selected a,
div.vectorTabs li.selected a,
div.vectorTabs li a {
text-decoration: none;
color: #ff8319;
}
a:visited,
div#mw-panel div.portal div.body ul li a:visited,
div.vectorTabs li.selected a:visited,
div.vectorTabs li.selected a:visited {
text-decoration: none;
color: #e77a1c;
}
a:hover {
text-decoration: underline;
}
a.new,
#p-personal a.new,
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited,
div.vectorTabs li.new a,
div.vectorTabs li.new {
text-decoration: none;
color: #ba0000;
}
/**********/
/* Cursor */
/**********/
*,
.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button,
.oo-ui-buttonGroupWidget .oo-ui-buttonWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button,
.oo-ui-popupWidget-head > .oo-ui-labelElement-label,
.oo-ui-menuSectionOptionWidget.oo-ui-widget-enabled,
.oo-ui-dropdownWidget-handle,
.oo-ui-multioptionWidget.oo-ui-widget-disabled,
div#mw-panel div.portal h3 {
cursor: url(/~donald/zero/resources/assets/cursor.png) 7 0, auto;
}
a,
a img,
div.vectorTabs ul li,
div.vectorTabs li a,
div.vectorMenu,
div.vectorMenu ul li,
div.vectorMenu li a,
.oo-ui-buttonElement > .oo-ui-buttonElement-button,
.oo-ui-optionWidget.oo-ui-widget-enabled,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'],
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select,
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio'],
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio'] + span,
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search > .oo-ui-indicatorElement-indicator,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-multioptionWidget.oo-ui-widget-enabled,
div#simpleSearch #searchButton,div#simpleSearch #mw-searchButton {
cursor: url(/~donald/zero/resources/assets/cursorlink.png) 5 0, pointer;
}
textarea,
div#simpleSearch input,
.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon,.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator {
cursor: text;
}
/*********************************/
/* Zero word effect by User:Nclm */
/*********************************/
@supports (background-clip: text) or (-webkit-background-clip: text) {
@keyframes zero {
from { background-position: -800px -83px; }
to { background-position: 0% 0%; }
}
.zero {
background-image: url(/~donald/zero/images/3/36/Zero_Fog.png);
animation-name: zero;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
}
a .zero {
background-image: url(/~donald/zero/images/e/e7/ZeroLink_Fog.png);
}
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
@keyframes zerowhite {
from { background-position: -800px -83px; }
to { background-position: 0% 0%; }
}
.zerowhite {
background-image: url(/~donald/zero/images/7/73/ZeroWhite_Fog.png);
animation-name: zerowhite;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
}
a .zerowhite {
background-image: url(/~donald/zero/images/e/e7/ZeroLink_Fog.png);
}
}
/***********/
/* Footer */
/**********/
div#footer,
#footer {
background: #f0f3fc;
margin-right: 5em;
margin-bottom: 5em;
box-shadow: 4px 4px 0px #999;
margin-top: 1.5em;
}
div#footer #footer-icons li {
margin-left: 0;
}
div#footer #footer-icons li a {
margin-left: 0.5em;
}
/*************/
/* Infoboxes */
/*************/
.infobox {
background: #eee;
border: 1px solid #aaa;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 300px;
}
.infobox-title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
.infobox-image {
text-align: center;
}
.infobox th {
text-align: right;
vertical-align: top;
width: 120px;
}
.infobox td {
vertical-align: top;
padding-left: 4px;
}
table.ambox {
border: 1px solid #a2a9b1;
border-left: 10px solid #ff8319;
background: #fbfbfb
}
table.ambox-content {
border-left: 10px solid #f28500;
}
.mbox-small-left {
margin: 4px 1em 4px 0;
box-sizing: border-box;
overflow: hidden;
width: 238px;
border-collapse: collapse;
font-size: 88%;
line-height: 1.25em;
}
.ambox th.mbox-text,
.ambox td.mbox-text {
padding: 0.25em 0.5em;
width: 100%;
border: none;
}
/***********/
/* Tab bar */
/***********/
div.vectorTabs {
background-image: none;
padding-left: 0;
}
div.vectorTabs ul {
background-image: none;
margin-left: 0;
}
div.vectorTabs span {
background-image: none;
}
div.vectorTabs ul li,
#p-cactions {
text-transform: uppercase;
background: #fff;
height: 1.9em;
line-height: 1px;
margin-right: 0.5em;
margin-top: 0;
box-shadow: 4px 4px 0px #999;
min-width: 30px;
overflow: visible;
padding: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
div.vectorTabs ul li:hover,
#p-cactions:hover {
box-shadow: 4px 4px 0px #ff8319;
}
#p-search {
margin-left: 0.25em;
}
div#simpleSearch {
background: #fff;
border: none;
box-shadow: 4px 4px 0px #999;
height: 1.9em;
margin-top: -0.4em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
div#simpleSearch:hover {
box-shadow: 4px 4px 0px #ff8319;
}
div#simpleSearch #searchInput {
padding: 0.6em 0 0.6em 0.5em;
font-family: Podkova, "Courier New", Courier, monospace;
text-transform: uppercase;
}
div#simpleSearch #searchInput:focus {
text-transform: none;
}
div#simpleSearch #searchButton {
margin-right: 0.5em;
}
#right-navigation {
margin-right: 4em;
overflow: visible;
display: inline;
}
#mw-page-base {
background: transparent;
opacity: 0;
}
/* More button */
#mw-head .vectorMenu h3 {
background: none;
}
.vectorMenu .menu {
border: none;
box-shadow: none;
margin-top: -10px;
margin-left: 1px;
padding-top: 5px;
width: 50px;
}
/*
.vectorMenu .menu {
border: 1px solid #999;
box-shadow: none;
left: 0px;
margin: -1px 0 0 0;
}
*/
.vectorMenu li > a {
text-transform: uppercase;
color: #000;
}
.vectorMenu li > a:hover {
text-decoration: none;
color: #ff8319;
}
.vectorMenu .menu li:not(:first-child) {
background: #fff;
padding-right: 10px;
width: min-content;
}
.vectorMenu h3 span,
.vectorMenu h3:hover span,
.vectorMenu h3:focus span,
#p-cactions-label span {
color: #ff8319;
}
.vectorMenu h3 span:after {
background-image: linear-gradient(transparent, transparent), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"> <path fill="%23ff8319" transform="rotate(180 5,5)" d="m0.0,9.5l5,-8.828127l5,8.825l-10,0z"/> </svg>');
opacity: 1;
height: 8px;
top: 1em;
}
/* Echo extension (aptly named...) */
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
opacity: 1;
}
#pt-notifications-alert .mw-echo-notifications-badge:after,
#pt-notifications-notice .mw-echo-notifications-badge:after,
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after {
background-color: #fff;
color: #ff8319;
}
#pt-notifications-alert .mw-echo-notifications-badge:focus,
#pt-notifications-notice .mw-echo-notifications-badge:focus {
-webkit-box-shadow: inherit;
box-shadow: inherit;
}
.oo-ui-icon-bell,
.mw-ui-icon-bell:before {
background-image: linear-gradient(transparent, transparent), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <title> bell </title> <path fill="%23ff8319" d="M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z"/> </svg>');
transform: scale(0.75);
}
.oo-ui-icon-tray,
.mw-ui-icon-tray:before {
background-image: linear-gradient(transparent, transparent), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <title> tray </title> <path fill="%23ff8319" d="M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z"/> </svg>');
transform: scale(0.75);
}
#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
margin-right: 0em;
margin-left: 0.25em;
}
#pt-userpage {
margin-right: 0.25em;
}
/* Search box */
#searchInput:focus,
#simpleSearch:hover #searchInput:focus {
outline: 0;
border-color: #ff8319;
-webkit-box-shadow: inset 0 0 0 1px #ff8319, inset 0 0 0 2px #ffffff;
box-shadow: inset 0 0 0 1px #ff8319, inset 0 0 0 2px #ffffff;
}
#p-search form {
margin: 0.4em 0 0;
}
div#simpleSearch #searchInput {
border: none;
}
/***********/
/* Sidebar */
/***********/
#p-logo {
margin-top: -12em;
box-shadow: 4px 4px 0px #ff8319;
border: 4px solid #fff;
height: 152px;
width: 152px;
}
#p-logo a {
height: 152px;
width: 152px;
}
#mw-panel {
background-color: white;
max-width: 9em;
width: 9em;
margin-top: 12em;
margin-left: 0.8em;
padding: 1em 1em 1em 0em;
box-shadow: 4px 4px 0px #ff8319;
}
#left-navigation,
div#footer,
.mw-body,
#mw-head-base {
margin-left: 12em;
}
/* also changed 11em -> 12em in skins/Vector/screen-hd.less */
.mw-body {
border: none;
min-height: 53px;
margin-right: 5em;
box-shadow: 4px 4px 0px #ff8319;
}
.mw-wiki-logo {
background-size: 152px;
}
/*********************/
/* Custom tag styles */
/*********************/
.poem {
width: 95%;
border: 2px solid #d6d2c5;
background-color: #f9f4e6;
padding: 1em;
font-family: monospace;
font-size: 1.15em;
}
.inconsolata {
font-family: 'Inconsolata', monospace;
}
/*****************/
/* TOC limit tag */
/*****************/
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/************************/
/* Template:Feature box */
/************************/
.featurebox {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.featurebox:hover {
box-shadow: 4px 4px 0px #ff8319 ! important;
}
.featurebox-link a {
color: #fff !important;
}
/********************/
/* Template:Highway */
/********************/
.highway-box-top {
background: #000 url("/~donald/zero/images/8/8f/0_notebook_top.png") no-repeat left top;
border-top-right-radius: 10px;
width: 350px;
height: 9px;
padding-left: 24px;
margin-left: 10px;
float: right; /* make sure to clear: both; after all of these */
}
.highway-box-bottom {
background: #000 url("/~donald/zero/images/f/ff/0_notebook_bottom.png") no-repeat left bottom;
border-bottom-right-radius: 10px;
width: 350px;
height: 20px;
padding-left: 24px;
margin-left: 10px;
margin-bottom: 14px;
float: right;
}
.highway-box-main {
background: #000 url("/~donald/zero/images/9/94/0_notebook_spine.png") repeat-y left top;
color: #fff;
border-radius: 0;
width: 350px;
padding-left: 24px;
margin-left: 10px;
float: right;
}
.highway-title {
font-family: 'Inconsolata', monospace;
text-align: center;
text-transform: uppercase;
font-size: 24pt;
position: relative;
z-index: 1;
}
.highway-image {
text-align: center;
margin-top: -30px;
}
.highway-line1 {
border: none;
border-bottom: 1px solid #fff;
color: transparent;
background-color: transparent;
margin: 17px auto 12px;
width: 75%;
}
.highway-line2 {
border: none;
border-bottom: 1px dashed #fff;
color: transparent;
background-color: transparent;
margin: 16px auto 12px;
width: 75%;
}
.highway-routeno {
text-align: center;
font-size: 14pt;
text-transform: uppercase;
margin-bottom: 8px;
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.highway-routebox {
text-align: center;
font-size: 12pt;
width: 100%;
white-space: nowrap;
}
.highway-neighbors {
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
width: 75px;
white-space: pre-line;
line-height: 1.1em;
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.highway-arrow {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
.highway-truck {
display: inline-block;
vertical-align: middle;
}
.highway-routeno a:hover,
.highway-neighbors a:hover {
text-decoration: underline;
color: #fff;
}
/*****************/
/* Template:Acts */
/*****************/
.white,
.white a,
.white a:link,
.white a:hover,
.white a:visited {
color: #fff;
}
.white a.mw-selflink.selflink {
text-transform: uppercase;
}
.white a:hover {
text-decoration: underline overline;
}
.white a.mw-selflink.selflink:hover {
text-decoration: none;
}
/***********/
/* Cleanup */
/***********/
div.tleft{
margin: 0.5em 1.4em 0.6em 0;
}
div.tright{
margin: 0.5em 0 0.6em 1.4em;
}
body.page-Main_Page #ca-delete,
body.page-Main_Page #ca-move,
body.page-Main_Page #deleteconfirm,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub
/* body.page-Main_Page h1.firstHeading */ {
display: none !important;
}
.noscript {
display: none;
}
.nowrap,
.nowraplinks a,
.nowraplinks .selflink {
white-space: nowrap;
}
