MediaWiki:Common.css
Jump to navigation
Jump to search
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 */
@font-face {
font-family: "Luminari";
font-style: normal;
font-weight: normal;
src: local("Luminari"), url("resources/assets/fonts/Luminari-Regular.woff") format("woff");
}
body {
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading {
display: none;
}
.twoColumns>div {
float: left;
margin: 0 2% 0 0;
width: 48%;
}
.twoColumns>div:last-child {
margin: 0 0 0 2%;
}
@media (max-width:1024px) {
.twoColumns>div {
float: none;
margin: 0;
width: 100% !important;
}
}
.mainPageColumn {
float: left;
margin: 0 2% 0 0;
width: 36%;
}
.mainPageColumn+.mainPageColumn {
margin: 0 0 0 2%;
width: 56%;
}
@media (max-width:1024px) {
.mainPageColumn {
float: none;
margin: 0;
width: 100% !important;
}
}
.mainPageBanner {
height: 200px;
overflow: hidden;
padding-bottom: 10px;
width: 100%;
}
blockquote {
border-left: 3px solid #d9cebc !important;
margin-left: 16px !important;
padding: 6px 24px !important;
}
.hatnote {
font-style: italic;
margin-bottom: 0.5em;
padding-left: 1.6em;
}
.infobox {
background: #f9f9f9;
border: 1px solid #aaa;
color: #000;
float: right;
font-family: verdana, sans-serif;
font-size: 11px;
margin: 0 0 1em 1em;
padding: 4px;
width: 280px;
}
.infobox th, .infobox td {
text-align: left;
vertical-align: top;
}
.infoboxAdventureAbove {
background-color: #bae;
font-style: italic;
font-weight: bold;
}
.infoboxAdventureBelow {
background-color: #f3f0fb;
}
.infoboxSubheader {
background: #dad1f3;
font-size: 110%;
font-weight: bold;
}
.disambigbox {
background: transparent;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
clear: both;
margin: 0.9em 1em;
}
.sidebar {
background: rgba(255,255,255,0.5);
border: 1px solid #aaa;
color: #000;
float: right;
font-size: 0.875em;
margin: 0 0 1em 1em;
padding: 16px;
width: 260px;
}
#template-documentation {
clear: both;
margin-top: 10px;
}
.extiw {
border-bottom: 1px dotted;
}
.vat {
vertical-align: top;
}
.fullwidth {
min-width: 100%;
}
table.vat td {
vertical-align: top;
}
table.catalog {
font-size: 90%;
}
table.catalog td:nth-child(3) {
text-align: right;
}
table.wikitable tr:hover {
background: rgba(255,255,255,0.67);
}
ul.nobullets {
list-style-image: none;
list-style-type: none;
margin: 0;
}
.floatboxes a, .floatboxes .selflink {
background-color: #f6f6fd;
border: 1px solid #ddd;
float: left;
margin: 0 5px 2px 0;
padding: 0 5px;
text-align: center;
}
.floatboxes .selflink, .floatboxes a:hover {
background-color: #ededfe;
border: 1px solid #c8c8c8;
}
.clear {
clear: both;
}
.larger {
font-size: larger;
}
.smaller {
font-size: smaller;
}
.nowrap,
.nowrap a:before,
.nowrap .selflink:before {
white-space: nowrap;
}
.alert {
background: #fff;
border: 1px solid #f00;
color :#c00;
padding: 0 1em;
}
.halfmax {
max-width: 50%;
}
/* Cards */
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
background: #fcfaf8;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5), inset 0 0 20px rgba(64,32,0,0.25);
box-sizing: border-box;
flex: 1 0 500px;
margin: 1rem 0.5em 0 0.5em;
max-width: 100%;
}
.card-image {
border: 0;
display: block;
height: 100px;
width: 100%;
overflow: hidden;
}
.card-image img {
border: 0;
display: block;
height: auto;
width: 100%;
}
.card-image p {
margin: 0;
}
.card-content {
padding: 0.25em 1em 1em 1em;
}
@media screen and (min-width: 40em) {
.card { max-width: calc(50% - 1em); }
}
@media screen and (min-width: 50em) {
.card { max-width: calc(33.3% - 1em); }
}
@media screen and (min-width: 60em) {
.card { max-width: calc(25% - 1em); }
}
@media screen and (min-width: 52em) {
.centered { max-width: 52em; }
}
/* *************************************************************************** */
/* Style for horizontal lists (separator following item).
Note: hlist formatting will break if the resulting HTML lacks a breakable character
between list items. This happens when the following conditions are true:
1) The list is made using wiki markup (where HTML is built by parser.php)
2) HTMLTidy is disabled or unavailable (such as on Special: pages)
In such cases, building lists with .hlist using HTML instead of wiki markup
will work around this problem. See also [[Bugzilla:39617]].
Maintainer: [[User:Edokter]]
Revision: 2.0
Last updated: September 23, 2012
*/
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
white-space: nowrap;
}
/* Display nested lists inline and allow them to wrap */
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
content: ":";
}
.hlist dd:after,
.hlist li:after {
content: " ·";
font-weight: bold;
}
.hlist dd.piped:after,
.hlist li.piped:after {
content: " |";
margin: 0 5px;
opacity: 0.4;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: "(";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
content: ")";
font-weight: normal;
}
/* Put numbers in front of ordered list items */
.hlist.hnum ol {
counter-reset: list-item;
}
.hlist.hnum ol > li {
counter-increment: list-item;
}
.hlist.hnum ol > li:before {
content: counter(list-item) " ";
}
.hlist.hnum dd ol > li:first-child:before,
.hlist.hnum dt ol > li:first-child:before,
.hlist.hnum li ol > li:first-child:before {
content: "(" counter(list-item) " ";
}
/* Unbulleted lists */
.plainlist ul {
line-height: inherit;
list-style: none none;
margin: 0;
}
.plainlist ul li {
margin-bottom: 0;
}
/* Default style for navigation boxes */
.navbox {
border: 1px solid #aaa;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
text-align: center;
padding-left: 1em;
padding-right: 1em;
}
th.navbox-group {
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background: #fdfdfd; /* Background color */
}
.navbox-list {
border-color: #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
background: #ccccff; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background: #ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #e6e6ff; /* Level 3 color */
}
.navbox-even {
background: #f7f7f7; /* Even row striping */
}
.navbox-odd {
background: transparent; /* Odd row striping */
}
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
ol + table.navbox,
ul + table.navbox {
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */
}
/* Default styling for Navbar template */
.navbar {
display: inline;
font-size: 88%;
font-weight: normal;
}
.navbar ul {
display: inline;
white-space: nowrap;
}
.navbar li {
word-spacing: -0.125em;
}
.navbar.mini li span {
font-variant: small-caps;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
font-size: 100%;
}
.navbox .navbar {
display: block;
font-size: 100%;
}
.navbox-title .navbar {
position: absolute;
text-align: left;
margin-right: 0.5em;
width: 6em;
}
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
/* @noflip */
float: right;
font-weight: normal;
/* @noflip */
margin-left: 0.5em;
/* @noflip */
text-align: right;
width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
width: 6em;
}
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
font-weight: normal;
/* @noflip */
text-align: right;
}
.navbox .mw-collapsible-toggle {
width: 6em;
}
/*
* 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;
}
.reflist {
font-size: 0.9em;
}
#coordinates {
position: absolute;
top: -9px;
right: 0;
float: right;
margin: 0;
padding: 0;
line-height: 1.5em;
text-align: right;
text-indent: 0;
font-size: 85%;
text-transform: none;
white-space: nowrap;
}
.geo-nondefault, .geo-multi-punct {
display: none;
}
.assessment {
display: inline-block;
position: absolute;
right: 0;
top: -50px;
}
.screenquote {
font-family: monospace;
white-space: pre;
}
pre {
word-wrap: break-word;
}
.wikitable td {
vertical-align: top;
}
.fullwidth img {
width: 100%;
height: auto;
}
.initial img {
height: 58px;
width: 52px;
}
.flavor {
border-radius: 2px;
box-shadow: 0 3px 3px 0 rgba(32,16,0,0.67), inset 0 0 15px 0 #816C50;
font-family: "Luminari", serif;
font-size: 1.1em;
padding: 1.5em 2em;
margin-bottom: 1.5em;
}
.mw-parser-output .external {
background-image: none !important;
border-bottom: 1px dotted;
padding-right: 0 !important;
}
.mw-hidden-catlinks {
display: block !important;
font-size: small;
}
/* Replace watch/unwatch star with an eye */
.vector-menu-tabs #ca-watch.icon a:before {
background-image: linear-gradient( transparent, transparent ), url( resources/assets/eye-closed.svg );
}
.vector-menu-tabs #ca-unwatch.icon a:before,
.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:before {
background-image: linear-gradient( transparent, transparent ), url( resources/assets/eye-open.svg );
}
.vector-menu-tabs #ca-unwatch.icon a:hover:before,
.vector-menu-tabs #ca-unwatch.icon a:focus:before,
.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:hover:before,
.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:focus:before,
.vector-menu-tabs #ca-watch.icon a:hover:before,
.vector-menu-tabs #ca-watch.icon a:focus:before {
background-image: linear-gradient( transparent, transparent ), url( resources/assets/eye-lidded.svg );
}
.vector-menu-tabs #ca-unwatch.icon .loading:before,
.vector-menu-tabs #ca-watch.icon .loading:before {
transform: none !important;
}
/* *************************************************************************** */
/* Guild-specific overrides */
/* General */
body {
background-image: url("/resources/assets/wood.jpg");
}
body.mw-special-ApiHelp,
body.page-Special_ApiHelp,
body.rootpage-Special_ApiHelp {
background-image: url(/resources/assets/paper.jpg);
font-family: sans-serif;
font-size: calc(1em * 0.875);
line-height: 1.6;
margin: 0.5em 2em 2em 2em;
}
.mw-body#content {
box-shadow: 0 3px 3px 0 #210, inset 0 0 20px 0 #816C50;
-moz-box-shadow: 0 3px 3px 0 #210, inset 0 0 20px 0 #816C50;
-webkit-box-shadow: 0 3px 3px 0 #210, inset 0 0 15px 0 #816C50;
-moz-border-image: url("/resources/assets/paper-edge.png") 1 1 1 1 repeat repeat;
-webkit-border-image: url("/resources/assets/paper-edge.png") 1 1 1 1 repeat repeat;
-o-border-image: url("/resources/assets/paper-edge.png") 1 1 1 1 repeat repeat;
border-image: url("/resources/assets/paper-edge.png") 1 1 1 1 repeat repeat;
border-width: 1px 1px 1px 1px;
background-image: url("/resources/assets/paper.jpg");
background-position: top left;
background-repeat: repeat;
margin-left: 10em;
margin-right: 0.5em;
padding: 1em 1.4em 1.4em 1.4em;
}
#mw-page-base {
background: transparent;
}
.mw-collapsible-toggle {
text-align: left !important;
}
.parchment {
background: transparent url("/resources/assets/parchment.jpg");
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.fullMedia {
background: rgba(204,255,204,0.5);
border: 1px solid #6c6;
padding: 0.5em 1em;
}
.fullMedia>p>a,
.fullMedia>p>span>a,
.fullMedia>p>bdi {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528 288h-92.1l46.1-46.1c30.1-30.1 8.8-81.9-33.9-81.9h-64V48c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v112h-64c-42.6 0-64.2 51.7-33.9 81.9l46.1 46.1H48c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48zm-400-80h112V48h96v160h112L288 368 128 208zm400 256H48V336h140.1l65.9 65.9c18.8 18.8 49.1 18.7 67.9 0l65.9-65.9H528v128zm-88-64c0-13.3 10.7-24 24-24s24 10.7 24 24-10.7 24-24 24-24-10.7-24-24z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
font-weight: bold;
padding-left: 1.5rem;
}
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background: transparent !important;
box-shadow: none !important;
}
.flavor {
background: #e2d8c7;
}
.downloads td:first-child > a {
background-image: linear-gradient( transparent, transparent ), url( "resources/assets/download-regular-link.svg" );
background-repeat: no-repeat;
background-position: top center;
background-size: 12px;
color: transparent;
padding: 0 1em;
}
.cbi {
padding: 0.67rem 1rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 1.34rem;
display: inline-block;
margin-bottom: 1rem;
float: right;
clear: both;
}
.cbo {
padding: 1rem 1.25rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 1.35rem;
display: block;
margin-bottom: 1rem;
clear: both;
}
/* Left panel */
#mw-panel h3 span,
#mw-panel a span,
#mw-panel label {
color: #fff;
}
/* Header */
#mw-head #p-personal a span {
color: #fff;
}
.mw-watchlink a, .mw-watchlink a span {
color: transparent !important;
}
.mw-watchlink a span {
visibility: hidden;
}
.vector-user-menu-legacy #pt-anonuserpage, .vector-user-menu-legacy #pt-userpage a {
background-image: url("resources/assets/shield.svg");
}
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
background-image: url("resources/assets/bell.svg");
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
background-image: url("resources/assets/scroll-old.svg");
}
.vector-search-box-input {
background-color: rgba(255,255,255,0.95);
}
.vector-search-box-input:focus,
.vector-search-box-inner:hover {
background-color: rgba(255,255,255,1);
}
/* Footer */
#footer-info li,
#footer-places li {
color: #fff;
padding-top: 0;
}
#footer-places li a {
color: #fff;
}
#footer-icons {
position: relative;
top: -1.5em;
}
#footer-icons a {
padding-left: 0;
padding-right: 0;
background-color: white;
display: inline-block;
border-radius: 6px;
}
#footer-socialico a {
margin-right: 0.5em;
}
/* Tabs */
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none;
}
.vector-menu-tabs ul {
height: 2.8em;
}
#mw-head-base {
height: 4.5em;
}
#left-navigation,
#right-navigation {
margin-top: 2em;
}
#p-namespaces, #p-variants, #p-views {
padding-top: 0.55em;
}
#left-navigation li,
#right-navigation li {
border-radius: 3px 3px 0 0;
height: auto;
}
#left-navigation li a,
#right-navigation li a {
background-color: #f3f3f3;
background: url("/resources/assets/tab-off.png");
border-radius: 3px 3px 0 0;
display: inline-block;
white-space: nowrap;
height: 1.75em;
padding-top: 0.6em;
padding-bottom: 1.75em;
line-height: 1.125em;
}
#left-navigation li.selected a,
#right-navigation li.selected a {
background: transparent url("/resources/assets/tab-on.png");
background-repeat: repeat;
height: 100% !important;
}
#left-navigation ul > li,
#right-navigation ul > li {
display: block;
margin-right: 3px;
}
.vector-menu-tabs .mw-watchlink.icon a:before {
top: 0.4em;
}
#p-cactions {
padding-top: 0.55em;
}
#p-cactions label {
background: url("/resources/assets/tab-off.png") repeat !important;
border-radius: 3px 3px 0 0;
display: inline-block;
white-space: nowrap;
height: 1.75em !important;
padding-top: 0.6em;
padding-bottom: 0;
line-height: 1.125em;
}
#p-cactions li a {
background: url("resources/assets/tab-on.png");
height: auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
width: 100%;
}
.vector-menu-dropdown .vector-menu-heading:after {
top: 0.1em;
}
/* Preferences page */
.oo-ui-tabSelectWidget-framed {
background: rgba(96,32,0,0.12);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.mw-prefs-buttons {
background: url("resources/assets/paper.jpg");
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom: 2px solid #dbb;
}
/* Login page */
body.page-Special_UserLogin #bodyContent {
background-image: url(resources/assets/cover.png);
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
}
@media (max-width: 1100px) {
body.page-Special_UserLogin #bodyContent {
background-size: cover !important;
}
}
body.page-Special_UserLogin #userloginForm>form {
margin: 0 auto;
padding: 200px 0 175px 0;
}
body.page-Special_UserLogin .mw-ui-vform,
body.page-Special_UserLogin .mw-htmlform {
width: 180px;
}
body.page-Special_UserLogin .errorbox {
font-size: smaller;
font-weight: bold;
letter-spacing: -0.5px;
line-height: 1;
padding: 6px;
}
body.page-Special_UserLogin .cdx-text-input {
min-width: 180px;
}
/* Logout page */
body.page-Special_UserLogout #bodyContent::before {
/* Closing door art? */
}
/* Mobile */
#mw-mf-page-center {
background-image: url("/resources/assets/wood.jpg");
}
#mw-mf-viewport .mw-body .pre-content {
margin: 0;
width: 100%;
max-width: 100%;
padding-top: 10px;
}
#mw-mf-viewport .page-heading {
margin-bottom: 0;
}
#mw-mf-viewport .mw-body#content {
margin-left: 0.5em;
margin-top: 0.5em;
}
#mw-mf-viewport .mw-body#content #bodyContent {
margin: 0 4px;
width: 100%;
max-width: 100%;
}
#mw-mf-viewport .assessment {
top: -110px;
}
#mw-mf-viewport .mw-footer > .post-content {
margin-top: 0;
}
#mw-mf-viewport .minerva-footer {
border-top: 0;
}
#mw-mf-viewport .minerva-footer-logo {
display: none;
}
#mw-mf-viewport .last-modified-bar {
background: none;
border: 0;
color: white;
padding-bottom: 0;
}
#mw-mf-viewport .last-modified-bar .minerva-icon {
display: none;
}
#mw-mf-viewport .last-modified-bar .last-modified-bar__text {
padding-left: 0;
}
#mw-mf-viewport .last-modified-bar .last-modified-text-accent {
color: #fff;
}