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.
/* CSS placed here will be applied to all skins */
/* Universal colors for website */
:root {
--theme-accent-color:#f3430a;
--theme-accent-color-secondary:#f5f5f5;
--theme-accent-color-lgray:#888888;
--theme-background-color:#161718;
--theme-background-color-rgba:rgba(22,23,24,1);
--theme-foreground-color:#232323;
--theme-foreground-color-2:#333333;
--font-size:1em;
--theme-text-color:#f5f5f5;
--theme-link-color:#14c3ea;
--theme-link-color-wcag:#1098B7;
--theme-deadlink-color:#ba0000;
--border-radius:2px;
--border-top-width-medium:20px;
--border-top-width-s:15px;
--border-top-width-xs:10px;
--theme-button-bg-styled-background: #f5f5f5 linear-gradient(#f5f5f5, #555);
--theme-button-styled-box-shadow:2px 2px 5px #f5f5f5 inset, -2px -2px 5px #555 inset;
}
:root {
--nav-panel-width:11em;
--page-margin-sides: 1em;
--layout-gap:1em;
}
:root {
--page-margin-left-inner: calc( var(--page-margin-sides) + var(--nav-panel-width) + var(--layout-gap) );
}
@media screen {
/*text color*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
color:var(--theme-text-color);
}
html {
font-size:100%;
}
body {
font-size:inherit;
}
a, /*link colors*/
a:visited,
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited {
color: var(--theme-link-color);
}
a.new, /* links to create a new page "deadlinks" */
a.new:visited {
color:var(--theme-deadlink-color);
}
ul {
list-style-image:none;
}
html {
background: #080808 /*url(https://signalis.wiki.gg/images/8/80/Site-background.jpg)*/ center top / cover no-repeat fixed;
}
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
margin-left: var(--page-margin-left-inner);
}
.mw-body, #mw-head-base, #right-navigation .vector-search-box, #mw-data-after-content, .mw-footer{
margin-right:var(--page-margin-sides);
}
#mw-panel {
padding:0;
margin-left:var(--page-margin-sides);
width:var(--nav-panel-width);
}
#mw-page-base{
background:none;
height:7em;
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
margin-top:.8em;
}
/* side panel navigation */
#p-logo,
#p-logo a {
width:var(--nav-panel-width);
}
#p-logo {
/*margin-top:1em;*/
}
#p-logo a {
background-size: contain;
}
#mw-panel .vector-menu-portal {
margin:0;
margin-bottom:1em;
padding:0;
border-left:5px solid var(--theme-accent-color);
box-sizing:border-box
}
.vector-menu-portal .vector-menu-heading {
background-image:none;
background-color: #2a2b2c;
color: inherit;
font-size: inherit;
text-transform: uppercase;
margin: 0;
padding: .4em .7em;
}
#p-logo + .mw-portlet .vector-menu-heading {
display:inherit;
}
/* Collapsible-sidebar extension */
#mw-panel.collapsible-nav .portal .vector-menu-heading {
display:flex;
justify-content:space-between;
align-items:center;
/* background-color:#2a2b2c; */
/* color:#f5f5f5; */
/* font-size:1em; */
/* text-transform:uppercase; */
padding:.4em .7em;
}
#mw-panel.collapsible-nav .portal .vector-menu-heading a,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading a {
color: inherit;
/* text-decoration: none; */
}
#mw-panel.collapsible-nav .portal .vector-menu-heading,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading {
background-image:none
}
#mw-panel.collapsible-nav .portal .vector-menu-heading::after {
--mask:url(/extensions/CollapsibleVector/modules/images/arrow-expanded.svg?86ebd);
content:"";
min-width:16px;
min-height:16px;
background-color:currentColor;
mask:var(--mask) no-repeat;
}
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading::after {
--mask:url(/extensions/CollapsibleVector/modules/images/arrow-collapsed-ltr.svg?00b90)
}
#mw-panel.collapsible-nav .portal .vector-menu-heading:hover,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading:hover {
background-color:var(--theme-accent-color);
color:#000;
font-weight:600
}
#mw-panel.collapsible-nav .portal.persistent .vector-menu-heading {
display:inherit
}
#mw-panel.collapsible-nav .portal.persistent .vector-menu-heading::after {
display:none;
}
#mw-panel.collapsible-nav .portal.persistent .vector-menu-heading:hover {
background-color:#2a2b2c;
color:inherit;
font-weight:inherit
}
/* Header tab css*/
#mw-head .vector-menu-tabs-legacy li:hover:not(.selected) {
background-color:#f5f5f533;
box-shadow:0 2px #f5f5f5 inset;
}
.vector-menu-tabs-legacy .selected {
background: var(--theme-accent-color-secondary);
outline: 2px solid var(--theme-accent-color-secondary);
outline-offset: 5px;
margin-left:.5em;
margin-right:.8em;
}
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited {
color: var(--theme-background-color);
text-decoration: none;
}
.vector-menu-tabs-legacy li {
background: var(--theme-foreground-color);
float: left;
display: block;
height: 100%;
margin: 0;
padding: 0px;
line-height: 1.125em;
white-space: nowrap;
}
.vector-menu-tabs-legacy li a {
background-position: right bottom;
color: var(--theme-text-color);
box-sizing: border-box;
display: block;
float: left;
height: 3.07692308em;
position: relative;
padding-top: 1.25em;
padding-left: 8px;
padding-right: 8px;
font-size: 0.8125em;
cursor: pointer;
}
.vector-menu-tabs,
.vector-menu-tabs a{
background:none;
}
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited /* header tab deadlink color*/{
color: var(--theme-deadlink);
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
color: var(--theme-text-color);
background:var(--theme-foreground-color);
}
/*More arrow Icon color filter to white*/
.vector-menu-dropdown .vector-menu-heading::after {
filter:invert(1);
opacity:1;
}
/* More menu dropdown*/
.vector-menu-dropdown .vector-menu-content {
background-color: var(--theme-foreground-color);
border: 1px solid var(--theme-accent-color-lgray);
}
.vector-menu-dropdown .mw-list-item a {
color: var(--theme-text-color);
}
/* when current page overflows into dropdown menu */
.vector-menu-dropdown .mw-list-item.selected a,
.vector-menu-dropdown .mw-list-item.selected a:visited {
color: inherit;
}
/*search bar*/
.vector-search-box-input {
background-color: var(--theme-foreground-color);
border: 1px solid var(--theme-accent-color-lgray);
color:inherit;
}
.searchButton {
filter:invert(1);
}
/* search results ui */
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
color: var(--theme-text-color);
}
/* srui header selectors */
.search-types .normal a:hover {
background-color:#f5f5f519;
box-shadow:0 2px #f5f5f5 inset;
}
.search-types .current a {
margin-left:.8em;
margin-right:.8em;
background:white;
outline:1px solid #f5f5f5;
outline-offset:5px
}
/* srui check all or none buttons */
#mw-search-toggleall,
#mw-search-togglenone {
background: var(--theme-button-bg-styled-background);
box-shadow: var(--theme-button-styled-box-shadow);
}
/* srui main ui colors*/
.mw-search-form-wrapper #powersearch {
--bg-color:var(--theme-foreground-color-2);
--border:1px solid #666;
}
#powersearch .mw-search-profile-tabs {
background-color:var(--bg-color);
border:var(--border);
}
#powersearch #mw-searchoptions {
background-color:var(--bg-color);
border:var(--border);
}
/*body color or image*/
body {
background:none;
}
.mw-body {
background-color: var(--theme-background-color-rgba);
border:1px solid var(--theme-accent-color);
border-top-width:var(--border-top-width-medium);
color:inherit;
}
/*sitenotice code attributed to ark.wiki.gg*/
#siteNotice > #localNotice, .mw-dismissable-notice {
border: 1px solid var(--theme-accent-color);
padding:.5em 1em .5em;
}
.sitedir-ltr .mw-dismissable-notice-body {
margin: 0;
margin-right:6em;
}
.catlinks /* The category links at the bottom*/ {
background-color: var(--theme-background-color-rgba);
border:1px solid var(--theme-accent-color-lgray);
}
.mw-footer /* licensing footer */ {
background-color: var(--theme-background-color-rgba);
border: 1px solid var(--theme-accent-color-lgray);
border-left-width: calc( var(--border-top-width-medium)*.5);
border-radius: var(--border-radius)
}
.mw-footer li {
color: var(--theme--text-color);
}
}
@media screen and (max-width: 720px) {
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
margin-left: 0;
}
.mw-body, #mw-head-base, #right-navigation .vector-search-box, #mw-data-after-content, .mw-footer{
margin-right: 0;
}
}
@media screen and (max-width: 800px) {
.vector-menu-tabs-legacy .selected {
outline-color:#00ff00;
outline-offset:2px;
margin:0;
}
}
@media screen {
#mainpage-wrapper {
display:flex;
gap:2.25em 1em;
flex-wrap:wrap;
--mp-gap:1.4em;
}
#mainpage-wrapper #mp-welcome {
width:100%;
text-align:center;
}
#mainpage-wrapper .mp-title {
font-size:x-large;
}
#mainpage-wrapper .mp-description {
font-size:small;
}
#mainpage-wrapper #mp-body {
flex: 3 3 600px;
border:1px solid var(--theme-accent-color);
border-top-width:5px;
padding:1em;
}
#mainpage-wrapper .mp-section-wrapper {
display:flex;
flex-direction:column;
gap:var(--mp-gap);
}
#mainpage-wrapper .mp-section {
border:1px solid var(--mp-container-border-color);
box-sizing:border-box;
}
#mainpage-wrapper .label {
display:block;
border-bottom:1px solid #969696;
color:#f5f5f5;
font-size:large;
text-transform:uppercase;
font-weight:600;
letter-spacing:.1em;
padding:.1em .4em;
}
#mainpage-wrapper .content {
padding:1em;
background-color:#202122;
}
#mainpage-wrapper .list {
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
margin-bottom:.7em;
}
#mainpage-wrapper .list.alternate {
display:inherit;
text-align:center;
}
#mainpage-wrapper .content .list:last-of-type {
margin-bottom:0;
}
#mainpage-wrapper .list.alternate .mp-item {
margin: 0 1em;
}
#mainpage-wrapper a:hover {
border-color:#f5f5f5;
outline:1px solid #f5f5f5;
outline-offset: .2em;
}
#mainpage-wrapper #mp-column {
flex: 1 1 300px;
border:1px solid var(--theme-accent-color);
border-top-width:5px;
padding:1em;
display:flex;
flex-direction:column;
gap:var(--mp-gap);
}
}
@media screen {
.hatnote {
font-style:italic;
padding: .5em;
padding-right: 2em;
border:1px solid #f3430a;
border-left-width:9px;
display:inline-block;
}
/*comment section*/
.cs-comments {
margin-bottom:0;
}
.cs-header {
margin-top:1em;
margin-bottom:1em;
}
.cs-stream {
background-color:var(--theme-foreground-color-2);
padding:18px;
margin-bottom:20px;
}
.cs-comment .cs-comment-header {
background-color:unset;
border:none;
}
.cs-comment-details {
color:var(--theme-text-color);
}
.cs-comment-body {
padding-left: 5px;
}
.cs-head-comment {
padding-bottom:10px;
border-bottom:2px solid #555;
}
.cs-reply-comment {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 1em;
padding-left: 1em;
border-left:4px solid var(--theme-accent-color);
}
.cs-edit-box {
background-color: var(--theme-foreground-color-2);
}
.cs-stream-footer {
margin-top:20px;
padding-left:5px;
}
/* portable infobox start */
.portable-infobox {
--pi-background:var(--theme-background-color);
--pi-secondary-background:var(--theme-accent-color);
--pi-secondary-background--label:var(--theme-background-color);
--pi-border-color:var(--theme-accent-color);
border:1px solid var(--pi-border-color);
border-radius:2px;
}
.pi-title {
background-color:var(--pi-secondary-background);
color:var(--pi-secondary-background--label);
}
.pi-background {
background-color:var(--pi-background)
}
.pi-secondary-background {
background:var(--pi-secondary-background);
color:var(--pi-secondary-background--label)
}
.pi-border-color {
border-color:var(--pi-border-color)
}
.pi-data-value:not(:first-child) {
flex-basis:80px;
}
/* table of contents*/
.toc, .toccolour {
--box-color:var(--theme-accent-color-lgray);
border:1px solid var(--box-color);
padding:0;
background-color:unset;
}
.toctitle {
display:flex;
align-items:center;
justify-content:space-between;
padding:.8em;
border-bottom:1px solid var(--box-color);
}
.toc h2 {
font-weight:999;
margin:0;
padding:0;
}
.toctogglelabel {
cursor: pointer;
color: var(--theme-link-color);
}
.toc ul {
padding-right:1em;
}
.toc ul li a{
color: inherit;
display:block;
padding:.2em .4em;
margin:5px;
}
.toc ul li a:hover {
--box-color:var(--theme-accent-color-secondary);
background-color: var(--box-color);
color: var(--theme-background-color);
text-decoration:none;
outline:1px solid var(--box-color);
outline-offset: 3px;
}
.tocnumber {
color:#f5f5f599;
}
.tocnumber:after {
content:".";
}
/*References highlight when clicked*/
ol.references li:target, sup.reference:target {
background-color: #21324d;
}
/*inline images (?) need to check exactly what type this is */
div.thumbinner {
border:none;
background-color: transparent;
font-size: 94%;
}
.thumbimage {
background-color:none;
border:1px solid var(--theme-accent-color-lgray);
}
/* <gallery> images and background adjustments */
ul.gallery {
margin: 1em 1.6em 0 .6em;
}
li.gallerybox div.thumb {
border: 1px solid #555;
background-color: transparent;
}
li.gallerybox div.thumb img {
border:1px solid #444;
}
.mw-gallery-nolines li.gallerybox div.thumb img {
border:none;
}
/*table styling*/
/* wikitable styling */
.wikitable {
background-color: var(--theme-background-color);
color: var(--theme-text-color);
margin: 1em 0;
border: none;
border-collapse: collapse;
}
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: var(--theme-foreground-color-2);
text-align: center;
}
.wikitable > * > tr > td,
.wikitable > * > tr > th{
border: 1px solid #505050
}
/*abuselog table*/
table.mw-abuselog-details {
background: transparent;
}
table.mw-abuselog-details th {
background: #282830;
}
/*mediawiki datatable*/
/*special:listfiles or upload logs*/
.mw-datatable th {
background-color: #282830;
}
.mw-datatable td {
background-color: transparent;
}
.mw-datatable tr:hover td {
background-color: #2a2a35;
}
/* comment section "reply" and recent changes "restore default filters" */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: #f5f5f5;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active{
background-color:none;
color: #aaa;
}
/*Recent changes page ui*/
.mw-rcfilters-container .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
box-shadow:var(--theme-button-styled-box-shadow);
background:var(--theme-button-bg-styled-background);
}
.mw-rcfilters-container {
--bg-color:var(--theme-foreground-color-2);
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color:var(--bg-color);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color:var(--bg-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
background-color:var(--bg-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color:inherit;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color:var(--theme-link-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-hideshowButton > .oo-ui-buttonElement-button::before {
content:"[";
color:var(--theme-text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-hideshowButton > .oo-ui-buttonElement-button::after {
content:"]";
color:var(--theme-text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select >span span /* category filter text color, namespace and tags. */ {
color:var(--theme-text-color);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: var(--theme-background-color);
}
.oo-ui-popupWidget-popup /*temp fix for text inside dropdown-menus. */{
color:#000;
}
/* page history */
#pagehistory li.selected {
background-color: var(--theme-background-color);
color: inherit;
outline: 1px dashed #a2a9b1;
border-radius:5px;
}
#pagehistory li {
padding:5px;
margin-bottom:8px;
}
/* <pre> color to gray */
pre, code, .mw-code{
background-color: var(--theme-foreground-color-2);
color: var(--theme-text-color);
border: none;
}
/*Editing Ui*/
/* temp fix? <pre> color to white for editing*/
.mw-highlight-lang-css pre {
background-color:#f5f5f5;
}
/*editing diff colors*/
.diff-context {
background: #212223;
border-color: #868788;
color: #f5f5f5;
}
.diff-deletedline {
border-color: #f5001b;
}
.diff-deletedline .diffchange {
background: #d0000a;
}
.diff-addedline {
border-color: #0ac53b;
}
.diff-addedline .diffchange {
background: #0a6425;
}
/*User preferences page*/
.oo-ui-labelWidget.oo-ui-inline-help {
color:#A1A2AA;
}
.oo-ui-tabSelectWidget-framed {
background-color: #444750;
}
.oo-ui-tabOptionWidget {
color:var(--text-theme-color)
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
background-color: #444750;
color:var(--theme-text-color)
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
color: #444750;
border-color: #72777d;
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td {
background-color:#444750;
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
background-color: #656770;
}
#preferences .mw-htmlform-submit-buttons {
background-color: #161616
}
/*edit-screen notice*/
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
background-color: #ffcc3322;
}
/*datamaps popup window*/
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: #333;
}
/*save changes ui pop up window*/
.oo-ui-messageDialog-title {
color: var(--theme-text-color);
}
.oo-ui-messageDialog-message {
color: var(--theme-text-color);
}
/*editing ui*/
.wikiEditor-ui-toolbar {
background-color: var(--theme-foreground-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--theme-link-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
color: var(--theme-link-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a::before {
filter: var(--oo-ui-filter-normal);
}
.wikiEditor-ui-toolbar .booklet > .index > .current {
background-color: var(--oo-ui-menu-selected-background-color);
color: var(--theme-link-color);
}
.wikiEditor-ui-toolbar .booklet > .index > :hover {
background-color: var(--ou-ui-menu-hover-background-color);
}
.wikiEditor-ui-toolbar .group .tool-select .label {
color: var(--theme-text-color);
}
.wikiEditor-ui-toolbar .group .label {
color: var(--oo-ui-text-placeholder);
}
.wikiEditor-ui-toolbar .group .tool-select .label::after {
filter: var(--oo-ui-filter-normal);
}
.wikiEditor-ui-toolbar .page-characters div span {
color: var(--theme-text-color);
border-color: var(--oo-ui-item-border-color);
}
.wikiEditor-ui-toolbar .page-characters div span:hover {
background-color: var(--ou-ui-menu-hover-background-color);
border-color: var(--oo-ui-item-border-color-hover);
}
.wikiEditor-ui-toolbar .page-table th {
color: var(--theme-text-color);
}
.wikiEditor-ui-toolbar .page-table td {
color: var(--theme-text-color);
}
#msupload-div {
background: var(--theme-foreground-color);
}
#msupload-dropzone {
color: var(--theme-text-color);
}
#msupload-select {
filter: var(--oo-ui-filter-progressive);
}
.editOptions {
background-color: var(--theme-foreground-color);
color: var(--theme-text-color)
}
`/*ooui text input and placeholder*/
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
color: var(--oo-ui-text-placeholder);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
color: var(--theme-text-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
border-color: var(--theme-link-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
border-color: var(--theme-link-color);
}
/*ooui icon color filter*/
.oo-ui-iconElement-icon {
filter: var(--oo-ui-filter-normal);
}
.oo-ui-indicatorElement-indicator {
filter: var(--oo-ui-filter-normal);
}
.oo-ui-image-progressive {
filter: var(--oo-ui-filter-progressive);
}
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
filter:none;
}
}
/*ooui variables*/
:root {
--oo-ui-filter-normal: invert(1);
--oo-ui-filter-progressive: brightness(0) saturate(100%) invert(73%) sepia(53%) saturate(2955%) hue-rotate(147deg) brightness(95%) contrast(94%);
--oo-ui-menu-selected-background-color: #000;
--ou-ui-menu-hover-background-color: #000;
--oo-ui-item-border-color: #888;
--oo-ui-item-border-color-hover: #fff;
--oo-ui-text-placeholder: #bbb;
}