User:RaiderAlpha/common.css

/* 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;
}

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
    line-height: inherit;
    list-style: none none !important;
    margin: 0 !important;
}
.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0 !important;
}

/************************
 * 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);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	color: var(--theme-heading-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);
}