User:RaiderAlpha/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.
/* Totem Arts Wiki CSS */
/* Preview with Stylus (https://github.com/openstyles/stylus) */
/************************
* MediaWiki:Common.css *
************************/
:root {
--theme-body-bg-color: #060f1b;
--theme-page-bg-color: #0b1a2d;
--theme-page-bg-color--secondary: #0f233d;
--theme-page-bg-color--inverted: #f4e5d2;
--theme-table-bg-color: #0c1c33;
--theme-table-bg-color--secondary: #102543;
--theme-table-title-bg-color: #112a4b;
--theme-table-subtitle-bg-color: #14335b;
--theme-text-color: rgb(188, 198, 209);
--theme-link-color: #f28e04;
--theme-link-color--visited: #f6b459; /* #f6b459 */
--theme-link-color--inverted: #0d71fb;
--theme-link-color--selected: #fff;
--theme-border-color: #383f49;
--theme-table-border-color: #4a535f;
--theme-heading-color: #fff;
--theme-code-color: #eee;
--theme-search-color: #2b333d;
--theme-search-color--selected: #20262e;
--theme-button-color: #112a4b;
--theme-button-color--selected: #14335b;
}
#mw-head, #mw-page-base, body {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 90%, rgba(0,0,0,0) 90%), linear-gradient(to bottom, transparent, rgba(10, 17, 28, 0.78)), linear-gradient(to right, #092b57, #59021a);
background-size: auto 8px, auto, auto;
background-attachment: fixed;
color: var(--theme-text-color);
}
body {
background-color: var(--theme-body-bg-color);
}
a {
color: var(--theme-link-color);
}
a:visited {
color: var(--theme-link-color--visited);
}
h1, h2, h3, h4, h5, h6 {
color: var(--theme-heading-color);
}
h1, h2 {
border-bottom: 1px solid var(--theme-border-color);
}
ul {
list-style-image: none;
}
/************************
* MediaWiki:Vector.css *
************************/
/* Side panel */
#mw-panel h3 {
color: var(--theme-heading-color);
}
#mw-panel li a {
color: var(--theme-link-color);
}
#mw-panel li a:visited {
color: var(--theme-link-color--visited);
}
#p-tb-label {
background-image: linear-gradient(to right,rgba(200,204,209,0) 0,var(--theme-border-color) 33%,var(--theme-border-color) 66%,rgba(200,204,209,0) 100%);
}
/* Top menu tabs */
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
background-image: none;
}
.vector-menu-tabs li {
background: var(--theme-button-color);
background-image: none;
}
.vector-menu-tabs li.selected {
background: var(--theme-button-color--selected);
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
color: var(--theme-heading-color);
}
.vector-menu-tabs li a {
color: var(--theme-link-color);
}
.vector-menu-dropdown .vector-menu-content {
background: var(--theme-button-color);
border: 1px solid var(--theme-border-color);
border-top: none;
}
.vector-menu-dropdown li a {
color: var(--theme-link-color);
}
/* Top menu tabs - page actions dropdown */
#p-cactions {
background: var(--theme-button-color);
}
#p-cactions-label {
color: var(--theme-heading-color);
}
#p-cactions-label::after {
filter: invert(100%);
}
/* Search form */
#searchInput, #searchText .oo-ui-inputWidget-input {
background: var(--theme-search-color);
color: var(--theme-text-color);
}
#searchButton {
filter: invert(100%);
}
.suggestions-results,
.suggestions-special,
.oo-ui-menuSelectWidget {
background: var(--theme-search-color);
border-color: var(--theme-border-color);
}
.oo-ui-menuSelectWidget .oo-ui-optionWidget-highlighted {
background: var(--theme-search-color--selected);
}
.suggestions-results .suggestions-result,
.suggestions-special .special-query {
color: var(--theme-text-color);
}
.mw-search-profile-tabs {
border: 1px solid var(--theme-border-color);
background: var(--theme-table-bg-color);
}
.mw-search-profile-tabs .search-types .current a {
color: var(--theme-link-color--selected);
}
/* Footer */
#footer li {
color: var(--theme-text-color);
}
/*******************************************
* MediaWiki:Common.css - element-specific *
*******************************************/
/* Page body */
.mw-body {
border: 1px solid var(--theme-border-color);
}
.mw-body, .parsoid-body {
background: var(--theme-page-bg-color);
color: var(--theme-text-color);
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
font-family: rubik,helvetica,arial,sans-serif;
}
/* External links */
.mw-parser-output a.extiw, .mw-parser-output a.external {
color: var(--theme-link-color);
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: var(--theme-link-color--visited);
}
/* Category links */
.catlinks {
border: 1px solid var(--theme-border-color);
background: var(--theme-body-bg-color);
}
/* Table of contents */
#filetoc, .toc, .toccolours {
border: 1px solid var(--theme-border-color);
background: var(--theme-table-bg-color);
}
.tocnumber {
color: var(--theme-text-color);
}
.toctogglelabel {
color: var(--theme-link-color);
}
/* Image thumb */
div.thumbinner, img.thumbimage {
border: 1px solid var(--theme-border-color);
background: var(--theme-body-bg-color);
}
li.gallerybox div.thumb {
border: 1px solid var(--theme-border-color);
background: var(--theme-body-bg-color);
}
/* Invert icon colors to white */
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator,
#mw-indicator-mw-helplink a {
color: var(--theme-link-color--inverted);
filter: invert(100%);
}
/* Page history */
#pagehistory li.selected {
background: var(--theme-button-color--selected);
color: var(--theme-text-color);
outline: 1px dashed var(--theme-table-border-color);
}
.oo-ui-fieldsetLayout.mw-collapsible.mw-collapsed .mw-collapsible-toggle .oo-ui-icon-expand,
.oo-ui-fieldsetLayout.mw-collapsible .mw-collapsible-toggle .oo-ui-iconElement-icon {
color: var(--theme-page-bg-color--inverted);
filter: invert(100%);
}
/* Code preview */
pre, code, .mw-code {
background: var(--theme-table-bg-color);
border-color: var(--theme-border-color);
color: var(--theme-code-color);
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
box-shadow: inset 2.75em 0 0 var(--theme-table-bg-color--secondary);
}
/* Source editor */
.wikiEditor-ui .wikiEditor-ui-view {
border: 1px solid var(--theme-border-color);
}
#wpTextbox1 {
background: var(--theme-body-bg-color);
color: var(--theme-code-color);
}
#wikiEditor-ui-toolbar, .editOptions {
background: var(--theme-button-color);
border-color: var(--theme-border-color);
color: var(--theme-code-color);
}
#wikiEditor-ui-toolbar a {
color: var(--theme-link-color);
}
#wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
filter: invert(100%);
}
.wikiEditor-ui .wikiEditor-ui-top,
#wikiEditor-ui-toolbar .section,
#wikiEditor-ui-toolbar .group,
#wikiEditor-ui-toolbar .options {
border-color: var(--theme-border-color);
}
#wikiEditor-ui-toolbar .option {
background: var(--theme-button-color);
}
#wikiEditor-ui-toolbar .option:hover {
background: var(--theme-button-color--selected);
}
/* Visual editor */
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-tool > .oo-ui-tool-link {
background: var(--theme-button-color);
color: var(--theme-heading-color);
}
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link,
.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
background-color: var(--theme-button-color--selected);
color: var(--theme-link-color--visited);
}
.oo-ui-menuToolGroup-tools .oo-ui-tool-name-heading1 .oo-ui-tool-title,
.oo-ui-menuToolGroup-tools .oo-ui-tool-name-heading2 .oo-ui-tool-title {
font-family: rubik,helvetica,arial,sans-serif;
}
.oo-ui-messageDialog-message {
color: var(--theme-text-color);
}
/* Image upload */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-labelWidget.oo-ui-inline-help {
background: var(--theme-page-bg-color);
color: var(--theme-text-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
background: var(--theme-page-bg-color--secondary);
color: var(--theme-text-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var(--theme-button-color);
color: var(--theme-text-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: var(--theme-button-color--selected);
color: var(--theme-text-color);
}
/* Notifications */
.mw-notification {
background: var(--theme-button-color);
border: 1px solid var(--theme-border-color);
color: var(--theme-code-color);
}
/* Related changes */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background: var(--theme-table-color);
border: 1px solid var(--theme-border-color);
}
/* Table */
.wikitable,
.mw-datatable,
.mw_metadata td {
background: var(--theme-table-bg-color);
color: var(--theme-text-color);
}
.wikitable tr > th,
.mw-datatable tr > th,
.mw_metadata tr > th,
.mw-metadata-show-hide-extended td {
background: var(--theme-table-title-bg-color);
}
.mw-datatable tr:hover td {
background: var(--theme-table-bg-color--secondary);
}
/* Tabber */
ul.tabbernav {
border-color: var(--theme-table-border-color);
}
ul.tabbernav li a,
ul.tabbernav li a:link {
background: var(--theme-button-color);
border-color: var(--theme-table-border-color);
color: var(--theme-text-color);
}
ul.tabbernav li a:hover,
ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive a:hover {
color: var(--theme-heading-color);
background: var(--theme-button-color--selected);
border-color: var(--theme-table-border-color);
}
.tabber .tabbertab {
border-color: var(--theme-table-border-color);
}
/* Main page portal */
.mainpage-portal {
border: 1px solid var(--theme-table-border-color);
}
.mainpage-portal-title {
background: var(--theme-table-title-bg-color);
}
.mainpage-portal-content {
background: var(--theme-table-bg-color);
}
/* Notice box */
.noticebox, .warningbox {
background: var(--theme-button-color--selected);
border: 1px solid var(--theme-table-border-color);
color: var(--theme-text-color);
}
/* Infobox */
.infobox {
background: var(--theme-table-bg-color);
border: 1px solid var(--theme-table-border-color);
color: var(--theme-text-color);
min-width: 300px;
}
.infobox tr > th {
background: var(--theme-table-subtitle-bg-color);
color: var(--theme-heading-color);
height: 1.5em;
}
.infobox td ul {
margin: 0 0 0 1em;
padding: 0;
}
.infobox .infobox-title {
background: var(--theme-table-title-bg-color);
color: var(--theme-heading-color);
font-size: 150%;
padding: 4px;
vertical-align: middle;
}
.infobox .infobox-header {
padding: 4px;
vertical-align: middle;
}
.infobox .infobox-label {
padding-left: 4px;
width: 96px;
}
/* Infobox tabber */
.infobox td ul.tabbernav {
margin: 4px 0 0 0;
padding-bottom: 3px;
}
.infobox td .tabber .tabbertab {
border: none;
padding: 0;
}
.infobox td .tabber .tabbertab p {
margin-bottom: 0;
}
.infobox td table.damage-multipliers th {
background: none;
}
/* Navbox */
.navbox {
background: var(--theme-table-bg-color);
border: 1px solid var(--theme-table-border-color);
color: var(--theme-text-color);
}
.navbox, .navbox-subgroup {
background: var(--theme-table-bg-color);
}
.navbox th.navbox-title {
background: var(--theme-table-title-bg-color);
color: var(--theme-heading-color);
}
.navbox th.navbox-title a {
color: var(--theme-heading-color);
}
.navbox th.navbox-group {
background: var(--theme-table-subtitle-bg-color);
color: var(--theme-heading-color);
}
.navbox-list {
border-color: var(--theme-table-bg-color);
}
.navbox-even {
background: var(--theme-table-bg-color--secondary);
}