MediaWiki:Common.css

/* Interstellar Rift Wiki – gemeinsames IRN-Farbsystem
 * Gilt für den aktiven MonoBook-Skin und bleibt für andere verfügbare Skins
 * bewusst auf allgemeine MediaWiki-Elemente beschränkt.
 */

:root {
  --irn-black: #07090a;
  --irn-dark: #0c0f10;
  --irn-panel: #111516;
  --irn-raised: #171b1d;
  --irn-frame: #3e474b;
  --irn-frame-light: #8d979b;
  --irn-text: #d3d5d4;
  --irn-muted: #98a0a3;
  --irn-blue: #6eafcf;
  --irn-blue-bright: #9bd9f6;
  --irn-green: #82d890;
  --irn-warning: #e5c46b;
  --irn-danger: #ee7478;
}

html,
body,
.mw-page-container,
.mw-body {
  color: var(--irn-text);
  background: var(--irn-black);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

#globalWrapper {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 34%),
    linear-gradient(135deg, var(--irn-dark), var(--irn-black) 62%);
}

#content,
.mw-body {
  color: var(--irn-text);
  border: 1px solid var(--irn-frame);
  border-radius: 0;
  background: linear-gradient(145deg, var(--irn-panel), var(--irn-dark));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.mw-body-content,
#bodyContent {
  color: var(--irn-text);
}

a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  color: var(--irn-blue);
}

a:visited {
  color: #b2a1dc;
}

a:hover,
a:focus {
  color: var(--irn-blue-bright);
  text-decoration-thickness: 2px;
}

a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--irn-blue-bright);
  outline-offset: 2px;
}

#firstHeading,
.mw-first-heading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
  color: var(--irn-text);
  border-color: var(--irn-frame);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.035em;
}

#firstHeading,
.mw-first-heading {
  padding-bottom: 0.28em;
  border-bottom: 2px solid var(--irn-frame-light);
  text-transform: uppercase;
}

.mw-parser-output hr {
  border-color: var(--irn-frame);
}

/* MonoBook navigation and account areas */
#column-one,
#p-personal,
#p-cactions,
.vector-pinnable-header,
.vector-pinnable-element {
  color: var(--irn-muted);
  background: var(--irn-dark);
}

#column-one {
  border-right: 1px solid var(--irn-frame);
}

.portlet,
#p-navigation,
#p-search,
#p-tb,
#p-lang {
  border-color: var(--irn-frame);
}

.portlet h3,
.portlet .p-body,
#p-navigation h3,
#p-tb h3,
#p-search h3 {
  color: var(--irn-muted);
  font-family: "Courier New", monospace;
  font-size: 0.76em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#column-one .p-body,
#column-one .pBody,
#p-navigation .p-body,
#p-navigation .pBody,
#p-search .p-body,
#p-search .pBody,
#p-tb .p-body,
#p-tb .pBody,
#p-lang .p-body {
  color: var(--irn-text);
  border: 1px solid var(--irn-frame);
  background: var(--irn-raised);
}

#column-one .p-body ul,
#column-one .pBody ul,
#p-navigation .p-body ul,
#p-navigation .pBody ul,
#p-tb .p-body ul,
#p-tb .pBody ul,
#p-lang .p-body ul {
  background: transparent;
}

.portlet .p-body ul li a,
#p-navigation a,
#p-tb a,
#p-lang a {
  color: var(--irn-text);
}

#p-cactions li a,
.vector-menu-tabs li a,
.vector-menu-tabs li.selected a {
  color: var(--irn-text);
  border-color: var(--irn-frame);
  background: linear-gradient(var(--irn-raised), var(--irn-dark));
}

#p-cactions li.selected a,
.vector-menu-tabs li.selected a {
  color: var(--irn-black);
  border-color: var(--irn-frame-light);
  background: var(--irn-frame-light);
}

#p-personal li a,
#p-cactions li a,
.vector-menu-tabs li a {
  text-decoration: none;
}

/* Forms, search and buttons */
input,
select,
textarea,
.mw-ui-input,
.mw-ui-button {
  color: var(--irn-text) !important;
  border-color: var(--irn-frame) !important;
  background: var(--irn-black) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

input::placeholder,
textarea::placeholder {
  color: #737d81;
}

.mw-ui-button,
button,
input[type="submit"],
input[type="button"] {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: var(--irn-black) !important;
  border-color: var(--irn-frame-light) !important;
  background: var(--irn-frame-light) !important;
}

/* Source editor: WikiEditor, CodeMirror 5/6 and OOUI controls. */
.wikiEditor-ui,
.wikiEditor-ui .wikiEditor-ui-toolbar,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui .wikiEditor-ui-toolbar .booklet,
.wikiEditor-ui .wikiEditor-ui-toolbar .section,
.wikiEditor-ui .wikiEditor-ui-toolbar .group,
.wikiEditor-ui .wikiEditor-ui-view,
.wikiEditor-ui .wikiEditor-ui-text,
.wikiEditor-ui .wikiEditor-ui-toolbar .page,
.wikiEditor-ui .wikiEditor-ui-toolbar .sections {
  color: var(--irn-text) !important;
  border-color: var(--irn-frame) !important;
  background: var(--irn-dark) !important;
}

.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs a,
.wikiEditor-ui .wikiEditor-ui-toolbar .tool,
.wikiEditor-ui .wikiEditor-ui-toolbar .group .label {
  color: var(--irn-text) !important;
  border-color: var(--irn-frame) !important;
  background-color: var(--irn-raised) !important;
}

.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.current,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.current a,
.wikiEditor-ui .wikiEditor-ui-toolbar .tool:hover {
  color: var(--irn-black) !important;
  background-color: var(--irn-frame-light) !important;
}

.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-gutters,
.cm-editor,
.cm-scroller,
.cm-gutters,
.cm-tooltip,
.cm-panels {
  color: #dce8eb !important;
  border-color: var(--irn-frame) !important;
  background: #080b0c !important;
}

.CodeMirror-gutter,
.CodeMirror-linenumber,
.cm-gutter,
.cm-lineNumbers .cm-gutterElement {
  color: #778388 !important;
  background: #0d1112 !important;
}

.CodeMirror-cursor,
.cm-cursor {
  border-left-color: var(--irn-blue-bright) !important;
}

.cm-activeLine,
.cm-activeLineGutter,
.CodeMirror-activeline-background {
  background: #142025 !important;
}

.oo-ui-buttonElement-button,
.oo-ui-dropdownInputWidget,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-menuSelectWidget,
.oo-ui-menuOptionWidget,
.oo-ui-toolbar-bar,
.oo-ui-toolbar-tools,
.oo-ui-window-frame,
.oo-ui-dialog {
  color: var(--irn-text) !important;
  border-color: var(--irn-frame) !important;
  background: var(--irn-raised) !important;
}

.oo-ui-buttonElement-button:hover,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
  color: var(--irn-black) !important;
  background: var(--irn-frame-light) !important;
}

/* Content components */
.toc,
#toc,
.mw-warning,
.mw-message-box,
.mw-notification,
.catlinks,
.mw-editsection-like,
.mw-datatable,
.oo-ui-popupWidget-popup {
  color: var(--irn-text);
  border-color: var(--irn-frame) !important;
  background: var(--irn-raised) !important;
}

.toc,
#toc {
  padding: 0.8em 1em;
}

.toc .toctitle,
#toc .toctitle {
  color: var(--irn-text);
}

.mw-parser-output table.wikitable,
.mw-parser-output .wikitable {
  color: var(--irn-text);
  border-color: var(--irn-frame);
  background: var(--irn-dark);
}

.mw-parser-output table.wikitable > tr > th,
.mw-parser-output table.wikitable > * > tr > th,
.mw-parser-output .wikitable > tr > th,
.mw-parser-output .wikitable > * > tr > th {
  color: var(--irn-text);
  border-color: var(--irn-frame);
  background: var(--irn-raised);
}

.mw-parser-output table.wikitable > tr > td,
.mw-parser-output table.wikitable > * > tr > td,
.mw-parser-output .wikitable > tr > td,
.mw-parser-output .wikitable > * > tr > td {
  border-color: var(--irn-frame);
  background: var(--irn-dark);
}

.mw-parser-output table.wikitable > tr:hover > td,
.mw-parser-output .wikitable > tr:hover > td {
  background: #182125;
}

pre,
code,
.mw-highlight pre {
  color: #dce8eb;
  border: 1px solid var(--irn-frame);
  background: #080b0c !important;
}

pre {
  padding: 1em;
}

blockquote {
  color: var(--irn-muted);
  border-left: 3px solid var(--irn-blue);
  background: rgba(110, 175, 207, 0.06);
}

/* Existing infobox layout, recolored for the unified interface. */
.mw-parser-output .infobox {
  box-sizing: border-box;
  max-width: calc(100% - 1em);
  margin: 0.5em 0 0.5em 1em;
  padding: 0.35em;
  float: right;
  clear: right;
  color: var(--irn-text);
  border: 1px solid var(--irn-frame-light);
  background: linear-gradient(145deg, var(--irn-raised), var(--irn-dark));
  text-align: left;
  font-size: 88%;
  line-height: 1.5em;
}

.mw-parser-output .infobox caption {
  padding: 0.35em 0.45em;
  color: var(--irn-text);
  background: #22292c;
  font-size: 125%;
  font-weight: bold;
}

.mw-parser-output .infobox th,
.mw-parser-output .infobox td {
  vertical-align: top;
  border-color: var(--irn-frame);
}

.mw-parser-output .infobox th {
  color: var(--irn-muted);
}

.mw-parser-output .infobox img {
  max-width: 100%;
  height: auto;
}

/* MediaWiki status and maintenance output */
.error,
.mw-message-box-error {
  color: #ffd7d8;
  border-color: #96474a !important;
  background: #2b1517 !important;
}

.success,
.mw-message-box-success {
  color: #d7f4dc;
  border-color: #4e9159 !important;
  background: #132619 !important;
}

.warning,
.mw-message-box-warning {
  color: #fff0c7;
  border-color: #9b7a35 !important;
  background: #2c2413 !important;
}

#footer,
.mw-footer {
  color: var(--irn-muted);
  border-top-color: var(--irn-frame);
  background: var(--irn-black);
}

@media screen and (max-width: 640px) {
  #content,
  .mw-body {
    border-left: 0;
    border-right: 0;
  }

  .mw-parser-output .infobox {
    float: none;
    margin: 0 auto 1em;
    max-width: 100%;
  }

  .mw-parser-output table.wikitable {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}