MediaWiki:Common.css: Difference between revisions
Created page with "→CSS placed here will be applied to all skins: .infobox { background: #eee; border: 1px solid #aaa; float: right; margin: 0 0 1em 1em; padding: 1em; width: 40..." |
mNo edit summary |
||
| (59 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, | |||
.vector-menu-tabs li.selected a, | |||
.vector-menu-tabs li.selected a, | |||
.vector-menu-tabs li a { | |||
text-decoration: none; | |||
color: #ff8319; | |||
} | |||
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/z/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/z/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/z/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/z/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/z/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/z/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; | |||
margin-left: 12em; | |||
/* also added <div style="clear: both;"></div> before closing tag in skins/Vector/includes/templates/Footer.mustache */ | |||
} | |||
div#footer #footer-icons li { | |||
margin-left: 0; | |||
} | |||
div#footer #footer-icons li a { | |||
margin-left: 0.5em; | |||
} | |||
/*************/ | |||
/* Infoboxes */ | |||
/*************/ | |||
.infobox { | .infobox { | ||
| Line 6: | Line 183: | ||
float: right; | float: right; | ||
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
padding: 1em; | padding: 0.5em 1em 1em 1em; | ||
width: | width: 300px; | ||
} | } | ||
.infobox-title { | .infobox-title { | ||
font-size: | font-size: 1.5em; | ||
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 23: | Line 203: | ||
.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 */ | |||
/***********/ | |||
.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; | |||
} | |||
#p-cactions-label span, | |||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a, | |||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited { | |||
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; | |||
} | |||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { | |||
color: #444; | |||
} | |||
#left-navigation, | |||
div#footer, | |||
.mw-body, | |||
#mw-head-base { | |||
margin-left: 12em; | |||
} | |||
/* also changed 11em -> 12em in skins/Vector/resources/skins.vector.styles.legacy/layouts/screen.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/z/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/z/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/z/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; | |||
} | |||
/***********************/ | |||
/* Special:Preferences */ | |||
/***********************/ | |||
/* don't let people (easily) switch to the bad, updated vector theme which isn't properly styled for the wiki */ | |||
label:has(input[value="vector-2022"]) { | |||
display: none; | |||
} | } | ||