MediaWiki:Vector.css

Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* CSS placed here will affect users of the Vector skin */

#footer-info-lastmod { display: none; } /* last modification disable */
  
/* Main & Sidebar */

#mw-page-base {
    background:none;
}

#mw-head {
    background-color: #232323;
}

pre, .mw-code {
    overflow-x: hidden;
    overflow-wrap: break-word;
    border-color: #303030;
    border-radius: 4px;
    background-color: #424242;
}

pre, .mw-code {
    color: #C0BAB6;
    background-color: #424242;
    border: 1px solid #424242;
    padding: 1em;
    white-space: pre-wrap;
}

.catlinks {
    border: 1px solid #424242;
    background-color: #424242;
    padding: 5px;
    margin-top: 1em;
    clear: both;
    border-radius: 4px;
}

div.thumbinner {
    border: 1px solid #303030;
    padding: 3px;
    background-color: #424242;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
}

html .thumbimage {
    background-color: #424242;
    border: 1px solid #424242;
    border-radius: 4px;
}

.infobox {
    border: 1px solid #424242;
    border-spacing: 3px;
    background-color: #424242;
    color: #C0BAB6;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    border-radius: 4px;
}

body {
    background-color: #232323;
}
 
.mw-body { 
    min-height: 500px;
    margin-right: 15px;
    margin-bottom: 60px;
    background-color: #303030;
    color: #C0BAB6;
    border:none;
}

.mw-body h1, h2, h3, h4, h5, h6, p {
    color: #C0BAB6;
}

.mw-body a.external.text, a.new, a.new:visited, a, a:visited {
    color: #D0CBC8;
    font-weight: bold;
}

.mw-body .firstHeading {
    overflow: visible;
    color: #C0BAB6;
}

div#mw-panel {
    background-color: #232323;
    left: -12px;
    padding-bottom: 15px;
    top: 10px;
}

div#mw-panel div.portal {
    margin: 0 0.6em 0 0.7em;
    padding: 0.25em 0;
}

div#mw-panel div.portal h3 {
    font-size: 0.75em;
    color: #d0cbc8;
    font-weight: normal;
    margin: 0;
    padding: 0.25em 0 0.25em 0.25em;
    cursor: default;
    border: none;
}

div#mw-panel div.portal div.body ul li {
    line-height: 1.125em;
    margin: 0;
    padding: 0.25em 0;
    font-size: 0.75em;
    word-wrap: break-word;
}

div#mw-panel div.portal div.body ul li a:visited { 
    color: #C0BAB6;
}

div#mw-panel div.portal div.body ul li a { 
    color: #C0BAB6;
}

/* Footer */

div#footer {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
    width: 100%;
    padding: 0px !important;
    margin-top: 20px !important;
    bottom: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    direction: ltr;
    color: #C2C8CF;
}

div#footer a {
    color:white;
}

div#footer ul {
    padding-left: 190px;
    padding-right: 15px;
}

div#footer ul li {
    color:#C2C8CF;
}

/* Recent Changes Page Style */

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
    background-color: #424242;
    border: #424242;
    border-radius: 4px 4px 0px 0px;
}

.oo-ui-textInputWidget input.oo-ui-inputWidget-input {
    background-color: #424242;
    border-color: #424242;
    border-radius: 0px 0px 0px 4px;
    color: #C0BAB6;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
    background-color: #303030;
    border-color: #303030;
    color: #C0BAB6;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #424242;
    height: 2.5em;
    border: 1px solid #424242;
    border-left-width: 0;
    border-radius: 0 0 2px 0;
    padding-right: 0.35714286em;
    text-align: right;
    white-space: nowrap;
    border-radius: 0px 0px 4px 0px;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #C0BAB6;
}

.oo-ui-labelElement .oo-ui-labelElement-label, .oo-ui-labelElement.oo-ui-labelElement-label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #C0BAB6;
}


/* Animal Infobox Style */

#infoboxborder {
    border: 12px solid transparent;
    border-color: #616060;
    background-color: #424242;
    float: right;
    border-radius: 4px;
    margin-left: 15px;
    margin-bottom: 15px;
    min-width: 300px;
}

#infoboxdata {
    vertical-align:top;
    padding-left:3px;
    padding-right:12px;
}

#infoboxlabel {
    background-color: #303030;
    vertical-align: top;
    padding-left: 15px;
    padding-right: 5px;
    width: 105px;
    border-color: #424242;
    box-shadow: 0px 1px rgba(0,0,0,0.3);
    color: #C0BAB6;
    /* border-radius: 4px; */
    text-shadow: 0px 2px #00321f;
}

#infoboxtable {
    max-width:350px;
    width:100%;
}

#infoboxtitle {
    text-align:center;
    font-size:24px;
    padding-top:5px;
    padding-bottom:5px;
    text-shadow: 0px 1.5px 0px rgba(0,0,0,0.2);
}

#producttemplate {
    margin: 2px 5px 1px 2px;
    display:block;
    white-space:nowrap;
}

/* Staff & Links Div */

ul#StaffDisplay {
    padding: 10px !important;
}

ul#StaffDisplay li {
    display: inline-block;
    background-color: #333333;
    border-color: #333333;
    border-radius: 4px;
    list-style: none;
    width: 175px;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 3px;
    font-weight: bolder;
}

h3#StaffMenuHeader {
    color: #C0BAB6;
    text-align: center;
    font-family: Helvetica;
    font-weight: bold;
}

span#StaffUser {
    color:#C0BAB6 !important;
}

div#StaffMenu {
    background-color: #232323;
    font-weight: 500;
    letter-spacing: 1px;
    font: inherit;
    padding: 0 20px;
    color: #C0BAB6;
    overflow: auto;
    display: block;
    text-align: center;
}

div#LinkMenu {
    background-color: #232323;
    font-weight: 500;
    letter-spacing: 1px;
    font: inherit;
    padding: 0 20px;
    color: #C0BAB6;
    overflow: auto;
    display: block;
    text-align: center;
}

#LinkMenu a, #LinkMenu a:visited, #LinkMenu a.new {
    color: #C0BAB6;
}

#StaffMenu a, #StaffMenu a:visited, #StaffMenu a.new {
    color: #C0BAB6;
}

/* Vector Menu */

div#mw-head div.vectorMenu h3, div.vectorTabs ul, div.vectorTabs li.selected, div.vectorTabs ul li, div.vectorTabs, div.vectorTabs span {
    background:none;
}

div.vectorTabs li a {
    color: #C0BAB6;
}

div.vectorTabs li.new a, div.vectorTabs li.new a:visited, div.vectorMenu h3 span {
    color: #C0BAB6;
}

div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
    color: #C0BAB6;
}

div.vectorMenu div.menu {
    background-color: #C0BAB6;
}

div.vectorMenu div.menu a {
    color: #C6DBFF;
}

#p-personal a, #p-personal a.new, p-personal a:visited, #p-personal a.new:visited {
     color: #C0BAB6;
}

#p-personal a.hover, p-personal a:focus {
     color: #C0BAB6;
     text-decoration:none;
}

/* Search Bar */ 

#simpleSearch input {
    background-color: #232323;
    color: #FFFFFF;
    margin: 0;
}

#searchInput {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #C0BAB6;
    border-radius: 2px;
    padding: 0.4em 1.84615385em 0.4em 0.4em;
    -webkit-box-shadow: inset 0 0 0 1px transparent;
    box-shadow: inset 0 0 0 1px transparent;
    font-size: 0.8125em;
    direction: ltr;
    -webkit-transition: border-color 250ms,box-shadow 250ms;
    -moz-transition: border-color 250ms,box-shadow 250ms;
    transition: border-color 250ms,box-shadow 250ms;
    -webkit-appearance: textfield;
}

/* Edit Menu Style */

.mw-editform #wpTextbox1 {
    margin: 0;
    display: block;
    max-height: 100vh;
    min-height: 5em;
    background-color: #424242;
    border-color: #424242;
    border-radius: 4px;
    color: #C0BAB6;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #303030;
    color: #C0BAB6;
    border-color: #303030;
    border-radius: 4px;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #C0BAB6;
    background-color: #303030;
    border-color: #303030;
    border-radius: 4px;
}

.mw-editform .editOptions {

}

.editOptions {
    background-color: #424242;
    color: #C0BAB6;
    border-color: #424242;
    padding: 1em 1em 1.5em 1em;
    margin-bottom: 2em;
    border-radius: 4px;
}

input#wpSummary {
    background-color: #303030;
    border-color: #303030;
    border-radius: 4px;
    color: #C0BAB6;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #424242;
    position: relative;
    z-index: 1;
    border: 1px solid #424242;
    border-radius: 4px;
}

/* Main menu w/ mobile support */

#intro ul li img {
    width: 130px;
    height: 130px;
    margin: 0;
    padding: 5px;
}

#intro ul li {
    display: inline-block;
}

#intro ul .content_img li {
    display: inline-block;
}

#intro ul .content_img li img {
    width: 130px;
    height: 130px;
    margin: 0;
    padding: 5px;
}

#intro ul {
    display: block;
    width: 100%;
    list-style: none;
}

#intro {
    text-align: center;
}

/* Parent Container */
    .content_img{
    position: relative;
}

/* Child Text Container */

    .content_img div{
    position: absolute;
    bottom: 0;
    right: 0;
    background: black;
    color: white;
    margin-bottom: 5px;
    font-family: sans-serif;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.5s linear; 
    transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */

   .content_img:hover{
   cursor: pointer;
}

.content_img:hover div{
    width: 100px;
    padding: 8px 15px;
    visibility: visible;
    opacity: 0.7; 
}

table.ambox {
    border-radius: 4px;
    border: 0px;
    background-color: #404040;
    color: #efefef;

    border-left: 10px solid #fc3;
}

.infobox ul {
    column-gap: 0px;
column-width: 50px;
    margin: 0;
}

.infobox li {
    display: inline-block;
}