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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Mobile Fixes */
/* Prevent mw-head from pushing down */
@media only screen and (max-width: 720px) {
#mw-head {
top: 0
}
.vector-menu-tabs-legacy ul {
margin-left: -0.6em;
}
.vector-menu-tabs .mw-watchlink.icon a:before {
top: 0.9em;
left: .4em;
width: 1.4em;
}
.vector-menu-tabs-legacy li a {
padding-top: 0.5em;
padding-left: 4px;
padding-right: 4px;
font-size: 0.8em;
}
}
/* Background */
.mediawiki {
background: linear-gradient(rgba(18, 32, 69, 0.85), rgba(17, 59, 81, 0.85)), url(https://deadahead.wiki.gg/images/b/b1/BgGRID.png) repeat;
background-attachment: fixed;
}
#mw-page-base {
background-color: transparent;
background: none;
}
/* Article body */
.content-body {
background: #d7d2bf;
color: #61675b;
border: #4a5453 solid 2px;
padding-left: 7px;
padding-right: 7px;
}
/* Area surrounding article body */
.mw-body {
color: transparent;
background: none;
border: none;
margin-top: -10px;
}
/* Top navbar */
#mw-head {
background-color: transparent;
background: none;
}
#left-navigation, #right-navigation {
border: none;
background-color: transparent;
}
#left-navigation {
padding-left: 1.25em;
}
/* Buttons of the navbar */
.vector-menu-tabs-legacy li, .vector-menu-tabs-legacy .selected {
font-weight: bold;
border: solid 2px #00000c;
border-radius: 3px;
margin: 0 2px;
}
.vector-menu-tabs-legacy li{
color: #a7ccdc;
text-shadow: #20566e 0 0 2px;
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
}
.vector-menu-tabs-legacy .selected {
color: #459bc1;
text-shadow: #163a4b 0 0 2px;
background: linear-gradient(to bottom, #0e5176 50%, #0e5a7c 50%);
}
.vector-menu-tabs{
background-image: none;
}
.vector-menu-tabs-legacy li a {
color: #a7ccdc;
padding-top: 1em;
}
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
color: #459bc1;
text-shadow: #163a4b 0 0 2px;
}
.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited {
color: #0e5176;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading{
background-image: none;
}
/* Dropdown */
.vector-menu-dropdown .vector-menu-heading {
color: #a7ccdc;
text-shadow: #20566e 0 0 2px;
font-weight: bold;
padding: 1em 8px 0.7em;
}
.vector-menu-dropdown{
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #00000c;
border-radius: 3px;
margin: 0 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading{
background-image: unset;
}
.vector-menu-dropdown .vector-menu-content{
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #00000c;
border-radius: 3px;
}
.vector-menu-dropdown .mw-list-item a{
color: #a7ccdc;
font-weight: bold;
}
/* Links */
a:link {
color: #659c1a;
}
a:visited {
color: #517e13;
}
a:hover {
color: #76c802;
}
a.new {
color: #a55858;
}
a.external.text, a.external.free {
color: #659c1a;
}
a.external:hover {
color: #76c802;
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: #517e13;
}
/* Headers */
/* Title header */
h1,
.title-header {
color: #fff;
background: linear-gradient(to bottom, #67726e 50%, #5c6b66 50%);
margin-left: -7px;
margin-right: -7px;
text-align: center;
text-shadow: 0 3px #272b2a, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
font-family: 'arial' !important;
font-weight: bold;
}
/* Smaller headers */
h2, h3, h4, h5, h6 {
color: #61675b;
background-color: #cecdbb;
font-family: 'arial' !important;
}
/* Tables */
/* General tables */
.wikitable {
width: fit-content;
border: solid 1px black;
overflow-x: scroll;
}
/* Headers */
.wikitable > tr > th, .wikitable > * > tr > th {
text-align: center;
color: white;
background: linear-gradient(to bottom, #464646 50%, #545454 50%);
border: solid 1px black;
text-shadow: 0 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424;
}
/* Cells */
.wikitable td {
text-align: center;
color: white;
background-color: #343434;
border: solid 1px #424242;
}
/* Collapsible element */
.mw-collapsible {
width: fit-content;
border: 0;
}
.mw-collapsible-toggle a {
color: #659c1a
}
/* Adjusting tables to function like they used to in Fandom */
table {
display: table;
white-space: initial;
}
/* Adding shadow to images when they are inside wikitables */
.wikitable img {
filter: drop-shadow(0 0 0.25rem gray);
}
/* Footer */
#footer li div {
color: #fff;
text-shadow: 0 1px black, 0 1px black, 0 1px black, 0 1px black, 0 1px black;
}
#footer-info-lastmod {
color: #fff;
text-shadow: 0 1px black, 0 1px black, 0 1px black, 0 1px black, 0 1px black;
}
/* Left sidebar */
#mw-panel .portal {
background: #d7d2bf;
color: #61675b;
border: #4a5453 solid 2px;
}
#mw-panel .vector-menu-heading {
padding: 3px 0 3px 0;
margin: -4px 0 0 0;
color: #fff;
background: linear-gradient(to bottom, #67726e 50%, #5c6b66 50%);
text-align: center;
text-shadow: 0 3px #272b2a, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
font-family: 'arial' !important;
font-weight: bold;
}
#mw-panel a:link {
color: #659c1a;
}
#mw-panel a:visited {
color: #517e13;
}
#mw-panel a:hover {
color: #76c802;
}
/* Table of contents */
.toc {
background-color: #343434;
border: solid 1px #424242;
padding: 0;
font-size: 14px;
}
.toc .a {
color: #659c1a;
}
.toc .tocnumber {
color: white;
}
.toc .tocnumber:after {
content: ".";
}
.toc .toctitle {
text-align: center;
background: linear-gradient(to bottom, #464646 50%, #545454 50%);
text-shadow: 0 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424;
position: relative;
overflow: hidden;
border: solid 1px black;
}
.toc .toctitle h2 {
color: white;
background-color: transparent;
margin: 6px;
font-size: 14px;
}
.toc > ul li {
margin: 0 6px;
}
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toctogglelabel {
color: #659c1a;
}
/* Fix missing left panel header */
#p-logo + .mw-portlet .vector-menu-heading {
display: block;
}
/* Category bar */
.catlinks {
background: linear-gradient(to bottom,#464646 50%,#545454 50%);
border: solid 1px black;
margin-bottom: 7px;
text-shadow: 1px 1px 0.1em black;
}
/* Information template */
.infotemplate {
border: solid 2px black;
border-radius: 3px;
background-color: #343434;
width: fit-content;
}
/* Cells */
.infotemplate td {
text-align: center;
color: white;
background-color: #343434;
padding: 5px;
}
.infotemplate img {
filter: drop-shadow(0 0 0.15rem lightgray);
}
/* Panels */
/* Panel headers */
.panel-header {
text-align: center;
color: white;
background: linear-gradient(to bottom, #464646 50%, #545454 50%);
border: solid 1px black;
text-shadow: 0 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424, 0px 0px 1px #242424;
font-size: 24px;
font-weight: bold;
}
/* Panel content */
.panel-content {
text-align: center;
color: white;
background-color: #343434;
border: solid 1px black;
border-top: none;
font-size: 18px;
}
.panel-content img {
filter: drop-shadow(0 0 0.15rem lightgray);
}
/* Panel orientation */
.panel-left{
float: left;
width: 50%;
display: flex;
flex-direction: column;
}
.panel-right{
float: right;
width: 50%;
display: flex;
flex-direction: column;
}
/* Link box */
.linkbox {
display: inline-block;
position: relative;
}
/* Visual style of linkboxes */
.linkbox-style {
font-size: 125%;
font-weight: bold;
margin: 5px 1%;
text-align: center;
border-radius: 2px;
border: 2px solid black;
background: linear-gradient(to bottom,#5c9000 50%,#659c1a 50%);
}
.linkbox-style a {
color: white;
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}
/* Image Gallery */
li.gallerybox div.thumb {
border: 1px solid #61675b;
background-color: #cecdbb;
}
/* Preventing inline images from going out of page */
img.scalable {
max-width: 100%;
height:auto;
}
/* Scaling images without aliasing */
img.pixelated {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* Containers to hide elements on different devices */
@media (min-width: 1024px) { /* Hide on desktop */
.hide-on-desktop {
display: none;
}
}
@media (max-width: 1024px) { /* Hide on mobile */
.hide-on-mobile {
display: none;
}
}
/* Editor elements */
/* Buttons in the editor */
/* Save edits */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background: linear-gradient(to bottom,#5c9000 50%,#659c1a 50%);
border: solid 1px black;
border-radius: .3em;
color: #fff;
text-shadow: 0 0 2px #263808, 0 0 2px #263808, 0 0 2px #263808, 0 0 2px #263808, 0 0 2px #263808;
}
/* Cancel */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: #fefffd;
background: linear-gradient(to bottom,#ffbe00 50%,#ffd300 50%);
border: solid 1px black;
border-radius: .3em;
text-shadow: 0 0 2px #5e5419, 0 0 2px #5e5419, 0 0 2px #5e5419, 0 0 2px #5e5419, 0 0 2px #5e5419;
}
/* Preview and Changed */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: linear-gradient(to bottom,#e1e3e5 50%,#f8f9fa 50%);
color: #202122;
border: solid 1px black;
border-radius: .3em;
}
/* Widget buttons */
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
border-radius: .3em;
margin-right: 3px;
}
.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
border: solid 1px black;
background: linear-gradient(to bottom,#0887a7 50%,#17a0c2 50%);
}
.wikiEditor-ui-toolbar {
padding: 3px;
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
filter: invert(1);
opacity: 0.8;
}
.wikiEditor-ui-toolbar .sections .section {
padding-top: 3px;
}
#msupload-container {
padding: 5px;
border: solid 1px black;
border-radius: .3em;
margin-right: 2px;
background: linear-gradient(to bottom,#0887a7 50%,#17a0c2 50%);
}
#msupload-select {
filter: brightness(2);
}
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert) {
filter: brightness(3);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: black;
border-color: black;
}
.oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
filter: brightness(0.85);
}
/* ------------------------ DRUID infobox parameters ------------------------ */
/* ------------ Original code ------------ */
/* https://support.wiki.gg/wiki/MediaWiki:Gadget-druidInfoboxes.css */
.druid-container {
/* These variables are designed to inherit from your wiki's color variables.
If your wiki uses a different naming scheme, change the inner names to match yours.
If your wiki doesn't use color variables you should consider doing so,
otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
*/
--druid-background-color: var(--wiki-content-background-color, #ffffff);
--druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
--druid-secondary-background-color: var(--wiki-accent-color, #36c);
--druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
--druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
--druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
--druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
--druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
--druid-border-color: var(--wiki-content-border-color, #a7d7f9);
--druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
--druid-link-color: var(--wiki-content-link-color, #0645ad);
--druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
--druid-link-label-color: var(--wiki-content-link-label-color, #fff);
--druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}
.druid-container {
border:4px solid var(--druid-border-color);
background:var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
width: 16.875em;
box-sizing:border-box;
border-collapse:collapse;
}
@media screen and (max-width: 450px) {
.druid-container {
width:100%;
}
}
@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}
.druid-main-images-file,
.druid-main-image {
text-align:center;
}
.druid-title,
.druid-section {
background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
color:var(--druid-secondary-background-label-color);
text-align:center;
font-size:1.5em;
}
.druid-section {
font-size:1.25em;
}
.druid-label {
font-weight:bold;
}
.druid-main-images {
padding:5px;
}
.druid-main-images img {
max-width:100%;
height:auto;
}
.druid-main-images-labels {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
margin:0.25em;
gap:0.25em;
}
.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
outline:1px solid var(--druid-link-color);
}
.druid-main-images-label.focused {
background:var(--druid-link-color);
color:var(--druid-link-label-color);
}
.druid-main-images-label:not(.focused):hover {
background:rgba(var(--druid-link-color--rgb), 0.25);
}
.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
display:none;
}
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}
.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}
.druid-grid {
display:grid;
}
.druid-grid-item {
background:var(--druid-tertiary-background-color);
margin:0.25em;
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
}
.druid-collapsed {
display:none;
}
.druid-collapsible {
cursor:pointer;
position:relative;
}
/* The two below classes are not the original code. They had to be altered becuse of issues with border spacing. */
/* Ideally, this should be fixed in the official code some day. */
.druid-collapsible th::after {
content:'–';
position:absolute;
right:10px;
font-size:20px;
font-weight:bold;
color:var(--druid-secondary-background-label-color);
text-shadow: none;
}
.druid-collapsible-collapsed th::after {
content:'+';
}
/* ------------ Local overrides ------------ */
.druid-container {
background:#0f6e9e;
float: right;
clear: right;
margin: 0 0 1em 1em;
width: 300px;
box-sizing:border-box;
border-spacing: 5px;
font-size: .85em;
border: none;
border-collapse: unset;
}
@media only screen and (max-width: 1024px) { /* Width fix on mobile */
.druid-container {
float: none;
margin: 0 auto 1em auto;
width: 100%;
max-width: 400px;
}
}
.druid-main-images-files {
background: #0f6e9e;
margin: 5px 0px;
}
.druid-main-image,
.druid-main-images {
background: #0f6e9e;
margin: 5px 0;
}
.druid-main-image a,
.druid-main-images a {
display: flex;
width: fit-content;
margin: auto;
justify-content: center;
}
.druid-main-image img,
.druid-main-images img {
filter: drop-shadow(0 0 0.25rem #0b8fc0);
image-rendering: pixelated;
min-width: 150%;
max-width: 200px;
height: auto;
}
.druid-title,
.druid-section {
background: #01527d;
color: #fff;
text-shadow: 0 3px #09313b, 0 0 2px #09313b, 0 0 2px #09313b, 0 0 2px #09313b, 0 0 2px #09313b, 0 0 2px #09313b;
font-weight: 700;
}
.druid-title {
background: #0f6e9e;
font-size: 1.75em;
}
.druid-label {
background-color: #015c8b;
color: #f8f9f3;
text-shadow: 0 0 1px #1f4457, 0 0 1px #1f4457, 0 0 1px #1f4457, 0 0 1px #1f4457, 0 0 1px #1f4457;
width: 90px;
}
.druid-data {
color: #f8f9f3;
text-shadow: 0 0 2px #1f4457, 0 0 2px #1f4457, 0 0 2px #1f4457, 0 0 2px #1f4457, 0 0 2px #1f4457;
padding-left: 10px;
}
.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #0d4b6d;
border-radius: .4em;
color: #b8d9e7;
font-weight: 700;
margin: 0 1px 2px;
padding: 5px 10px;
outline: none;
}
.druid-main-images-label.focused {
background: linear-gradient(to bottom, #0e5176 50%, #0e5a7c 50%);
border: solid 2px #0d364d;
border-radius: .4em;
color: #459bc1;
}
.druid-grid-item {
background:var(--druid-tertiary-background-color);
margin:0.25em;
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
}
/* Once the issue with double spacing is fixed, this shouldn't be specified for "th" only */
.druid-collapsible th::after {
position: absolute;
text-shadow: none;
right: 0;
border-spacing: 0;
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #0d4b6d;
border-radius: .4em;
color: #b8d9e7;
font-size: 1em;
height: 1.25em;
width: 1.25em;
text-align: center;
margin: 1px 1px 0 0;
padding: 0 1px 1px 0;
font-weight: normal;
}
/* ------------------------ Stat calculator ------------------------ */
#script-wrapper {
margin: 0px -10px -5px;
}
#calc-table-area, #static-table-area {
margin-bottom: -5px;
border-spacing: 5px;
margin-left: -15px;
}
.calc-buttons-area {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
padding: 5px 0;
margin-left: -10px;
}
.calc-buttons-flex {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
.dec-button {
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #0d4b6d;
border-radius: .4em;
color: #b8d9e7;
font-weight: 700;
cursor: pointer;
width: 25px;
height: 25px;
padding-bottom: 10px;
}
.dec-button:hover {
background:#1477ae;
}
.inc-button {
background: linear-gradient(to bottom, #1477ae 50%, #1782b6 50%);
border: solid 2px #0d4b6d;
border-radius: .4em;
color: #b8d9e7;
font-weight: 700;
cursor: pointer;
width: 25px;
height: 25px;
}
.inc-button:hover {
background:#1477ae;
}
.level-input {
height: 20px;
border: solid 2px #0d4b6d;
border-radius: .4em;
text-align: center;
}
/* Hiding spinner arrows on number type inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-moz-appearance: textfield;
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
-webkit-appearance: none;
}
/* ------------------------ Other specific templates' styles ------------------------ */
.template-enemy-level {
background-image: url("https://deadahead.wiki.gg/images/f/f7/Enemy_level_icon.png");
width: 28px;
height: 28px;
text-align: center;
vertical-align: middle;
color: white;
text-shadow: 0px 0px 2px #242424, 0px 0px 2px #242424, 0px 0px 2px #242424, 0px 0px 2px #242424, 0px 0px 2px #242424;
font-weight: bold;
font-size: 1.1em;
display: inline-block;
}
.template-enemy-level p {
padding-top: 2px;
}