MediaWiki:Common.css
Note: After publishing, 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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* https://en.wikipedia.org/wiki/MediaWiki:Common.css */
/*.tocnumber { display: none; } */
.noautonum .tocnumber {
display: none;
}
/* .catlinks { display: none; } */
/* Give a bit of space to the TOC */
#toc {
margin: 1em 0;
}
/* Allow a somewhat larger margin-top to avoid touching the address bar when accessing the user menu. */
body { margin-top: 10px; }
div#globalWrapper { margin-top: 10px; }
/* CSS placed here will affect registered users only to allow hide test within
<div style="display:none" class="user-show">Difficult</div> */
.anonymous-show {
display: none !important;
}
div.user-show,
p.user-show {
display: block !important;
}
span.user-show,
small.user-show {
display: inline !important;
}
table.user-show {
display: table !important;
}
li.user-show {
display: list-item !important;
}
/*
* 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.
* Used in [[Template:TOC]]
*/
.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;
}
/* make the list of references look smaller and highlight clicked reference in blue */
ol.references {
font-size: 100%;
}
.references-small {
font-size: 90%;
}
ol.references > li:target {
background-color: #ddeeff;
}
sup.reference:target {
background-color: #ddeeff;
}
/* upper blue line */
/*
#mw-head-base {
margin-left: 200px !important;
margin-right: auto !important;
max-width: 1000px !important;
} */
/* lower blue line + footer content */
/* #footer {
margin-left: 200px !important;
margin-right: auto !important;
max-width: 1000px !important;
} */
/* main content */
#content {
/* margin-left: 200px !important;
Margin-right: auto !important;*/
max-width: 1000px;
}
/* NGP V1.46 removed div.vectorTabs ul li */
/* history tab */
#ca-history {visibility: hidden;}
#ca-nstab-main { display:none!important; }
/* Source code tab*/
i#ca-viewsource { visibility: hidden;}
/* Hide discussion tab */
#ca-talk { display: none!important;}
/*User Read tab */
/*#ca-view { display:none!important; }*/
/* User Page tab */
#ca-nstab-user { display: none!important;}
/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-toggle-expanded.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-expanded .mw-collapsible-arrowtoggle {
padding-left: 50px !important;
background-image: url('//docs.linn.co.uk/wiki/images/d/dd/SmallArrowDown.png');
background-repeat: no-repeat;
background-position: left bottom;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
padding-left: 50px !important;
background-image: url('//docs.linn.co.uk/wiki/images/f/f7/SmallArrowRight.png');
background-repeat: no-repeat;
background-position: left top;
}
/* Add arrows to toggle-blocks for collapsible TOC */
.mw-collapsible-toggle-expanded.mw-collapsible-TOC,
.mw-collapsible-toggle-expanded .mw-collapsible-TOC {
padding-left: 50px !important;
background-image: url('https://docs.linn.co.uk/wiki/images/b/b5/TOC-40px.jpg');
background-repeat: no-repeat;
background-position: left bottom;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-TOC,
.mw-collapsible-toggle-collapsed .mw-collapsible-TOC {
padding-left: 50px !important;
background-image: url('https://docs.linn.co.uk/wiki/images/b/b5/TOC-40px.jpg');
background-repeat: no-repeat;
background-position: left center;
}
/* Collapse Toggle container */
#collapse-pre-one .mw-collapsible-toggle{
display: table;
border-collapse: collapse;
width: 100%;
}
#collapse-pre-one .mw-collapsible-toggle-row{
display: table-row;
}
/* Collapse Header should be on the left */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-header{
display: table-cell;
vertical-align: middle;
padding: 5px;
}
/* Collapse indicator image should be inline. align wherever you would like */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator{
display: table-cell;
vertical-align: middle;
padding: 5px;
text-align: right;
}
/* Collapse indicator image size should be something sane*/
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
height: 20px !important;
width: 20px !important;
}
/* Collapse indicator image should rotate when toggled*/
#collapse-pre-one:not(.mw-collapsed) .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
blink, .blink {
-webkit-animation: blink 1s step-end infinite;
-moz-animation: blink 1s step-end infinite;
-o-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 67% { opacity: 0 }}
@-moz-keyframes blink { 67% { opacity: 0 }}
@-o-keyframes blink { 67% { opacity: 0 }}
@keyframes blink { 67% { opacity: 0 }}
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a:hover .visually-hidden,
a:focus .visually-hidden,
button:hover .visually-hidden,
button:focus .visually-hidden {
position: relative;
margin: 0;
}
/* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */
.mainpage_row {
display: flex;
flex-direction: row;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0 -5px 0 -5px;
}
.mainpage_box {
flex: 1;
margin: 5px;
min-width: 210px;
/* max-width:48%; */
border: 1px solid #CCC;
padding: 0 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.mainpage_box h3 {
/* Reset padding so is equal across skins */
padding: 0;
margin: 0.5em 0;
}
.mainpage_box h3 .header_icon {
float: left;
margin-right: 5px;
}
.mainpage_box .items {
border-top: 1px solid #CCC;
padding-top: 0.5em;
}
.mainpage_box p:last-child {
margin-bottom: 0;
}
.mainpage_boxcontents_small {
font-size: 95%;
}
.scrollbox {
height: 50px;
overflow: hidden;
position: relative;
}
.scrollbox h3 {
font-size: 2em;
color: blue;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 20px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollbox 10s linear infinite;
-webkit-animation: scrollbox 10s linear infinite;
animation: scrollbox 10s linear infinite;
}
.scrollbox h4 {
font-size: 1em;
color: red;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 20px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollbox 10s linear infinite;
-webkit-animation: scrollbox 10s linear infinite;
animation: scrollbox 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scrollbox {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scrollbox {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scrollbox {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
//F11 toggle hide top bar
document.onkeydown = function( e ) {
if( e == null ) e = event
if( testKey( e, 122 ) ) { //F11
appendCSS('#column-content {margin: 0 0 .6em 0;} #content {margin: 2.8em 0 0 0;} #p-logo, .generated-sidebar, #p-lang, #p-tb, #p-search {display:none;} #p-cactions {left: .1em;} #footer {display:none;}');
return false;
}
}
function testKey( e, intKeyCode ) {
if( window.createPopup )
return e.keyCode == intKeyCode
else
return e.which == intKeyCode
}
//Enlarge picture on hover
.zoom_img img{
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
.zoomXL_img img{
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}
.zoomXL_img img:hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}
/* https://deepwiki.com/mar10/fancytree/6.1-basic-usage-examples */
.fancytree ul {
background: none;
border: none;
font-size: 12px;
}
ul.fancytree-container {
outline: 0;
border: none;
overflow: hidden;
}
.fancytree p {
display: none;
}
span.fancytree-title {
cursor: default;
}
span.fancytree-title a {
color: black;
}
/*** Float Side ***/
/* Makes the side menu float and makes it scrollable */
/* Documentation at https://en.wikipedia.org/wiki/User:BrandonXLF/FloatSide */
/* By [[en:w:User:BrandonXLF]] */
#mw-panel, /* Vector */
#quickbar, /* CologneBlue */
#mw_portlets, /* Modern */
#sidebar, /* Monobook */
#mw-site-navigation, /* Timeless */
#mw-related-navigation /* Timeless right */ {
position: fixed;
overflow: hidden;
height: 100%;
}
#mw-related-navigation /* Timeless right */ {
right: calc(calc(calc(100% - 115em) / 2) - 1em);
padding-bottom: 14em;
}
#mw-site-navigation /* Timeless */ {
padding-bottom: 14em;
}
#mw-panel:hover, /* Vector */
#quickbar:hover, /* CologneBlue */
#mw_portlets:hover, /* Modern */
#sidebar:hover, /* Monobook */
#mw-site-navigation:hover, /* Timeless */
#mw-related-navigation:hover /* Timeless right */ {
overflow-y: auto;
overflow-x: hidden;
}
.skin-timeless #mw-content-wrapper /* Timeless */ {
margin: 0 14em;
}
.skin-monobook .mw-wiki-logo /* Monobook */ {
position: fixed;
}
/*** Float Head ***/
/* Makes the side menu float and makes it scroll-able */
/* Documentation at [[en:w:User:BrandonXLF/FloatHead]] */
/* By [[en:w:User:BrandonXLF]] */
/* Based off of [[en:w:User:Rezonansowy/FloatHead.css]] */
/* head */
#mw-head {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
}
/* Bottom border */
#mw-head::before {
position: absolute;
content: '';
top: -1px;
left: 11em;
right: 0;
height: 100%;
border-bottom: 1px solid #a7d7f9;
z-index: -1;
}
/* Background */
#mw-page-base {
position: fixed;
top: -1px;
right: 0;
left: 0;
z-index: 3;
height: 5em;
width: 100%;
}
#mw-head,
#mw-panel {
z-index: 4;
}
#mw-head-base {
margin-top: 0;
}
/* Visual editor toolbar */
.ve-active .ve-init-mw-desktopArticleTarget {
margin-top: 4em;
}
.ve-init-mw-desktopArticleTarget > .ve-ui-toolbar > .oo-ui-toolbar-bar {
position: fixed !important;
top: 5.714em !important;
right: -0.004em !important;
left: 12.647em !important;
}
/* StickyTableHeaders gadget */
.jquery-tablesorter > thead,
.mw-sticky-header > thead {
top: 5rem !important;
}
/* https://stackoverflow.com/questions/54724832/using-css-html-dropdown-as-mediawiki-template */
/*
Source - https://stackoverflow.com/a/54726849
Posted by a stone arachnid, modified by community. See post 'Timeline' for change history
Retrieved 2026-07-23, License - CC BY-SA 4.0
*/
/* Dropdown Button */
.dropbtn {
padding: 10px;
font-size: 16px;
min-width: 170px; /*dropbown buttoin width */
border-radius: 10px;
border: none;
text-align: center;
background-color: #4CAF50; /* fallback default, used if no inline color given */
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #f1f1f1;
min-width: 200px; /* default/minimum width */
width: max-content; /* grow to fit content, never smaller than min-width */
max-width: 90vw; /* optional safety cap so it can't overflow the viewport on narrow screens */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content img {
width: 20px;
flex-shrink: 0;
display: block;
margin: 0 auto;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
width: 100%;
text-align: left;
padding: 0;
}
.dropdown-content span.wikilink a {
color: #0645ad;
text-decoration: underline;
}
.dropdown-content span.wikilink a:visited {
color: #0b0080;
}
.dropdown-content span.wikilink a:hover {
color: #0b0080;
}
.dropdown-content span.indented {
padding-left: 32px;
}
.dropdown-content a:last-child {
border-bottom: none;
}
.dropdown-content span {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
padding: 6px 16px;
}
.dropdown-content span:last-child {
border-bottom: none;
}
.dropdown-content.dropup-force,
.dropdown-content.dropup-auto {
bottom: 100%;
top: auto;
box-shadow: 0px -8px 16px 8px rgba(0,0,0,0.2);
}
.dropdown-content.dropdown-force {
top: 100%;
bottom: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content,
.dropdown-content.js-open {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* Add heading section to dropdown */
.dropdown-content .dropdown-heading {
padding: 8px 16px 1px 1px;
font-weight: bold;
color: black; /* was #666 */
font-size: 13px;
text-transform: uppercase;
}
.dropdown-content span.indented {
padding-left: 32px; /* additional indent on top of the link's own 6px 16px padding */
}
.top-right-image {
position: absolute;
top: 90px; /* offset below the button's approximate height */
right: 20px;
width: 250px;
}
/*fix header position after search */
html {
scroll-padding-top: 6em; /* match your actual fixed header height */
}
.mw-spcontent ul {
column-count: 3;
column-gap: 30px;
}
h3.cattree-letter-heading {
margin-top: 1em;
border-bottom: 1px solid #a2a9b1;
break-inside: avoid-column;
}