MediaWiki:Common.css: Difference between revisions

/*=============================================
=            Variable declarations            =
=============================================*/

:root {
    --bg-content: hsl(0, 0%, 15%);
    --bg-main: hsl(0, 0%, 10%);
    --bg-warningbox: hsla(64, 84%, 47%, 0.3);
    --bg-wikitable: hsl(0, 0%, 25%);
    --bg-wikitable-header: hsl(0, 0%, 20%);
    --border-color-warningbox: hsl(64, 84%, 47%);
    --border-light: hsl(205, 87%, 82%);
    --border-dark: hsl(206, 50%, 23%);
    --sc-light: hsl(280.21deg 68.06% 80.74%);
    --text-primary: hsl(197, 100%, 50%);
    --text-secondary: hsl(0, 0%, 100%);
    --wikitable-link: hsl(211, 63%, 60%);
}

/*=====  End of Variable declarations  ======*/

/*=============================================
=                Main styling                 =
=============================================*/

body {
    background-color: var(--bg-main);
    font-size: 15px;
    line-height: 1.75;
}

h1, h2, h3 {
    border-bottom: 1px solid var(--bg-wikitable);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

a, a.new, a.new:visited, a:hover, a:visited {
    color: var(--wikitable-link);
}

a:hover {
    text-shadow: 0 2px 15px;
}

.mw-body {
    border-color: var(--bg-wikitable);
    background-color: var(--bg-content);
    color: var(--text-secondary);
}

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

/* Main page styling */
.mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.generalContainer, .guideLinesContainer {
    margin: 20px 0;
}

.generalHeader, .guideLinesHeader {
    border: none;
    font-size: 48px;
    text-align: center;
}

.generalListing, .guideLinesListing {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.generalListing > li, .guideLinesListing > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 20px;
}

.generalListing > li > ul, .guideLinesListing > li > ul {
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    text-align: left;
}

/*=====  End of Main styling  ======*/

/*=============================================
=            Notification styling             =
=============================================*/

.mw-editform #editpage-copywarn {
    padding: 1em;
}

.mw-message-box, .oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
    color: var(--text-secondary);
}

.mw-message-box-warning {
    background-color: var(--bg-warningbox);
    border-color: var(--border-color-warningbox);
}

.mw-message-box-error {
    background-color: hsl(2.84deg 100% 50% / 21.96%);
}

.mw-notification {
    background-color: var(--bg-main);
    border: 1px solid var(--border-dark);
}

/*=====  End of Notification styling  ======*/

/*=============================================
=           TOC & Wikitable styling           =
=============================================*/

.toctogglelabel, .mw-parser-output a.extiw, .mw-parser-output a.external, 
.mw-parser-output .wikitable tbody tr td a, .mw-collapsible-toggle-default .mw-collapsible-text,
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
    color: var(--wikitable-link);
}

.mw-parser-output a {
    color: var(--border-light);
}

.toc {
    font-size: 0.9em;
    background: var(--bg-wikitable);
    margin-top: 1em;
    padding: 0;
    border: 1px solid var(--border-dark);
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    clear: left;
}

.toc .toctitle {
    background: var(--bg-wikitable-header);
    box-sizing: content-box;
    height: 21px;
    padding-top: 3px;
}

.toc h2 {
    color: var(--text-secondary);
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: var(--bg-wikitable);
    border: 1px solid var(--border-dark);
}

.tocnumber {
    display: none;
}

.toc ul {
    list-style: none;
    line-height: 20px;
    font-size: 13px;
    margin-left: 1em;
    padding-right: 10px;
}

.toc ul ul {
    border-left: 1px dotted #596e96;
    padding-left: 0.5em;
}

#filetoc {
    background-color: var(--bg-wikitable);
}

em {
    font-style: normal;
    background: #555555;
    color: white;
    border: 1px solid #979797;
    border-radius: 2px;
    font-size: 0.9em;
    margin: 0 0.1em;
    padding: 0.2em 0.5em;
    white-space: nowrap;
}

.wikitable {
    color: var(--text-secondary);
    border: 1px solid var(--bg-content);
}

.wikitable tr {
    background-color: var(--bg-wikitable);
}

.wikitable > tr > th, .wikitable > tbody > tr > th, .wikitable > thead > tr > th {
    background-color: var(--bg-wikitable-header);
}

.wikitable > tr > th, .wikitable > tr > td, .wikitable > tbody > tr > th, 
.wikitable > tbody > tr > td, .wikitable > thead > tr > th {
    border: 1px solid var(--bg-content);
}

.wikitable img {
    display: block;
    margin: auto;
    padding: 3px 0;
}

.wikitable th.headerSort {
    background-image: url(https://wiki.oldschoolrsps.com/images/a/a6/Sort_both.png);
    background-repeat: no-repeat;
    background-position: right;
}

.wikitable th.headerSortUp {
    background-image: url(https://wiki.oldschoolrsps.com/images/8/81/Sort_up.png);
    background-repeat: no-repeat;
    background-position: right;
}

.wikitable th.headerSortDown {
    background-image: url(https://wiki.oldschoolrsps.com/images/f/f3/Sort_down.png);
    background-repeat: no-repeat;
    background-position: right;
}

/*=====  End of TOC & Wikitable styling  ======*/

/*=============================================
=       Forms, input & editor styling         =
=============================================*/

fieldset {
    border: 1px solid var(--bg-wikitable);
}

.wikiEditor-ui-toolbar {
    background-color: var(--bg-main);
}

.wikiEditor-ui-toolbar .tabs span.tab a, .wikiEditor-ui-toolbar .tabs span.tab a.current, 
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited, .wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .group .tool-select .options .option {
    color: var(--text-secondary);
}

.wikiEditor-ui-toolbar .booklet > .index > .current, .wikiEditor-ui-toolbar .booklet > .index > :hover,
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover, .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-popupToolGroup-tools, 
.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.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
    background-color: var(--bg-content);
    color: var(--border-light);
}

.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--border-light);
}

.wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: var(--bg-main);
    border: 1px solid var(--border-dark);
}

.mw-input input, .mw-input textarea {
    background-color: var(--bg-wikitable);
    border: 1px solid var(--border-dark);
    color: var(--text-secondary);
}

/*=====  End of Forms, input & editor styling  ======*/

/*=============================================
=            User & preview styling           =
=============================================*/

.user-block {
    background-color: var(--bg-main);
    border: 1px solid var(--border-dark);
    color: var(--border-light);
}

.mw-rollback-link a, .mw-rollback-link a:visited, .mw-rollback-link a:active {
    color: var(--sc-light);
}

.mw-rollback-link a:hover {
    text-shadow: 0 2px 15px;
}

.mw-changeslist-line-not-watched .mw-title, .mw-changeslist-line-watched .mw-title, 
.mw-changeslist-line-watched .mw-title a, .mw-changeslist-line-watched .mw-title a:visited,
.mw-changeslist-line-watched .mw-title a:hover, .mw-changeslist-line-watched .mw-title a:active, 
.mw-changeslist-line-watched .mw-title a:link {
    color: var(--border-light);
}

/* Preview styling */
.mw-content-ltr blockquote {
    background-color: var(--bg-wikitable);
    border-left: 2px solid var(--border-light);
    margin: 10px 0;
    padding: 15px;
    quotes: none;
}

.mw-content-ltr blockquote:before, .mw-content-ltr blockquote:after {
    content: none;
}

/*=====  End of User & preview styling  ======*/

/*=============================================
=              Footer adjustments             =
=============================================*/

footer {
    background-color: var(--bg-wikitable-header);
    color: var(--text-secondary);
    padding: 10px 0;
    text-align: center;
}

footer a {
    color: var(--wikitable-link);
}

footer a:hover {
    text-shadow: 0 2px 15px;
}

/*=====  End of Footer adjustments  ======*/