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: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 363: | Line 363: | ||
#p-cactions-label span { | #p-cactions-label span { | ||
color: #ff8319; | color: #ff8319; | ||
} | |||
#p-cactions-label { /* more button */ | |||
width: 50px; | |||
} | } | ||
| Line 368: | Line 372: | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
right: | right: 6px; | ||
top: 1.05em; | |||
top: | |||
opacity: 1; | opacity: 1; | ||
height: 8px; | height: 8px; | ||
Revision as of 15:43, 11 May 2026
/* 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,
.vector-menu-tabs li.selected a,
.vector-menu-tabs li.selected a,
.vector-menu-tabs li a {
text-decoration: none;
color: #ff8319 !important;
}
a:visited,
div#mw-panel div.portal div.body ul li a:visited,
.vector-menu-tabs li.selected a:visited,
.vector-menu-tabs li.selected a:visited {
text-decoration: none;
color: #e77a1c;
}
a:hover {
text-decoration: underline;
}
a.new,
#p-personal a.new,
.vector-menu-tabs li.new a,
.vector-menu-tabs li.new a:visited,
.vector-menu-tabs li.new a,
.vector-menu-tabs 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,
.vector-menu-tabs ul li,
.vector-menu-tabs li a,
.vector-menu,
.vector-menu ul li,
.vector-menu 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: 0.5em 1em 1em 1em;
width: 300px;
}
.infobox-title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
margin-bottom: 0.25em;
}
.infobox-image {
text-align: center;
margin-bottom: 0.25em;
}
.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 */
/***********/
.vector-menu-tabs {
background-image: none;
padding-left: 0;
}
.vector-menu-tabs ul {
background-image: none;
margin-left: 0;
}
.vector-menu-tabs span,
.vector-menu-tabs a,
.vector-menu-tabs,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none;
}
.vector-menu-tabs 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;
}
.vector-menu-tabs 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 .vector-menu h3 {
background: none;
}
.vector-menu .menu {
border: none;
box-shadow: none;
margin-top: -10px;
margin-left: 1px;
padding-top: 5px;
width: 50px;
}
/*
.vector-menu .menu {
border: 1px solid #999;
box-shadow: none;
left: 0px;
margin: -1px 0 0 0;
}
*/
.vector-menu li > a {
text-transform: uppercase;
color: #000;
}
.vector-menu li > a:hover {
text-decoration: none;
color: #ff8319;
}
.vector-menu .menu li:not(:first-child) {
background: #fff;
padding-right: 10px;
width: min-content;
}
.vector-menu h3 span,
.vector-menu h3:hover span,
.vector-menu h3:focus span,
#p-cactions-label span {
color: #ff8319;
}
#p-cactions-label { /* more button */
width: 50px;
}
.vector-menu-dropdown .vector-menu-heading::after {
content: '';
position: absolute;
right: 6px;
top: 1.05em;
opacity: 1;
height: 8px;
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>');
}
/* 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;
}
#t-print,
#t-permalink {
display: none;
}
/*********************/
/* 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;
}