Difference between revisions of "MediaWiki:Common.css"
m |
|||
| (38 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* 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 { | .infobox { | ||
| Line 6: | Line 181: | ||
float: right; | float: right; | ||
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
| − | padding: 1em; | + | padding: 0.5em 1em 1em 1em; |
width: 300px; | width: 300px; | ||
} | } | ||
| Line 13: | Line 188: | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
| + | margin-bottom: 0.25em; | ||
} | } | ||
.infobox-image { | .infobox-image { | ||
text-align: center; | text-align: center; | ||
| + | margin-bottom: 0.25em; | ||
} | } | ||
.infobox th { | .infobox th { | ||
| Line 24: | Line 201: | ||
.infobox td { | .infobox td { | ||
vertical-align: top; | 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; | ||
} | } | ||
Latest revision as of 12:06, 28 January 2020
/* 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: 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 */
/***********/
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;
}