MediaWiki:Common.css: Difference between revisions

Revision as of 15:22, 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-legacy li.selected a,
.vector-menu-tabs-legacy li.selected a,
.vector-menu-tabs-legacy li a {
  text-decoration: none;
  color: #ff8319 !important;
}

a:visited,
div#mw-panel div.portal div.body ul li a:visited,
.vector-menu-tabs-legacy li.selected a:visited,
.vector-menu-tabs-legacy li.selected a:visited {
  text-decoration: none;
  color: #e77a1c;
}

a:hover {
  text-decoration: underline;
}

a.new,
#p-personal a.new,
.vector-menu-tabs-legacy li.new a,
.vector-menu-tabs-legacy li.new a:visited,
.vector-menu-tabs-legacy li.new a,
.vector-menu-tabs-legacy 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-legacy ul li,
.vector-menu-tabs-legacy 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: 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-legacy {
  background-image: none;
  padding-left: 0;
}

.vector-menu-tabs-legacy ul {
  background-image: none;
  margin-left: 0;
}

.vector-menu-tabs-legacy span {
  background-image: none;
}

.vector-menu-tabs-legacy 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-legacy 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;
}

#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;
}