MediaWiki:Vector.css

From SDG Wiki
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.
/*======*/
/* Site */
/*======*/

/* Search box. */
#searchInput {
  background-color: rgba(var(--vBgPage-decimalRGB), 0.80);
  border-color: var(--vBorderBox);
  color: var(--vTextColor);
}
#simpleSearch:hover #searchInput {border-color: var(--vBorderHighlight)}

/* VectorTabs tabs and borders */
.vector-menu-tabs li {background: linear-gradient(to top,var(--vBorderPage) 1px,#2a2a34 1px,#313131 calc(100% - 1px),var(--vBorderPage) calc(100% - 1px))}
.vector-menu-tabs .selected {background: linear-gradient(to top,var(--vBgPage) calc(100% - 1px),var(--vBorderPage) calc(100% - 1px))}
.vector-menu-tabs, .vector-menu-tabs a {background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, var(--vBorderPage) 0%)}
#mw-head .vector-menu-dropdown .vector-menu-heading {background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--vBorderPage) 0%)}

/* VectorTabs links */
.vector-menu-tabs .selected a:link, .vector-menu-tabs .selected a:visited {color: var(--vTextColor)}
.vector-menu-tabs li a {color: var(--vLinkColor)}
.vector-menu-tabs .new a, .vector-menu-tabs .new a:visited {color: #a44}
#mw-head .vector-menu-dropdown .vector-menu-heading {color: var(--vTextColor)}

/* VectorTab dropdown menus (e.g., "More" dropdown) */
.vector-menu-dropdown .vector-menu-content-list { background-color: #2a2a2a; }
.vector-menu-dropdown .vector-menu-content { border-color: var(--vBorderPage); }
.vector-menu-dropdown .vector-menu-content-list a { color: var(--vLinkColor); }
.vector-menu-dropdown .selected a, .vector-menu-dropdown .selected a:visited { color: var(--vTextColor); }

/* MediaWiki:Sidebar */
.vector-menu-portal h3 {
    background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#484451 33%,#484451 66%,rgba(200,204,209,0) 100%);
    color: #9398a0;
    font-weight: bold;
}
div#mw-panel h3#p-Unturned-label { font-style: italic; }

/* Hide "In other languages" sidebar section when editing */
nav#p-lang {display: none}

/* Color content body background/text */
body, div#globalWrapper {
	background-attachment: fixed;
	background-color: #303538;
	background-image: url(resources/assets/Wiki_BG.jpg);
	background-size: cover;
}
#mw-page-base {background: none}
#content, .mw-body, .oo-ui-popupWidget-popup {
	background-color: rgba(42,42,42,1);
	border-color: var(--vBorderPage);
	color: var(--vTextColor);
}

/* Theme-matching bullet icons for lists */
ul {
    list-style-image: url(resources/assets/listMarker.svg);
}

/****************/
/* Page content */
/****************/

/* Headings */
h1, #bodyContent h1,
h2, #bodyContent h2,
h3, #bodyContent h3,
h4, #bodyContent h4,
h5, #bodyContent h5,
h6, #bodyContent h6 {
  color: white;
  border-color: #808080;
}

/* Table of Contents box */
.toc, .mw-warning, .toccolours {
  background-color: var(--vBgBox);
  border-color: var(--vBorderBox);
}
/* TOC header & symbols */
.tocnumber {color: var(--vTextColor)}

/* Category box, thumbnail box */
.catlinks, div.thumbinner {
  background-color: var(--vBgBox);
  border-color: var(--vBorderBox);
}
/* Thumbnail image background */
html .thumbimage {
  background-color: var(--vBgPage);
  border-color: var(--vBorderBox);
}

/* Thumbnail bg in galleryboxes */
li.gallerybox div.thumb {
    border: 1px solid #232323;
    background-color: var(--vBgBox);
}

/* Bordered images */
img.thumbborder {
    border: 1px solid var(--vBorderBox);
}

/* Packed gallery */

ul.gallery.mw-gallery-packed { margin: 0; }
ul.mw-gallery-packed img {
    border: 2px solid #232323;
    background-color: var(--vBgBox);
    margin: 0;
}

/* Code boxes */
code, pre {
  color: var(--vTextColor);
  background-color: var(--vBgBox);
  border-color: var(--vBorderBox);
}

/*============*/
/* Page links */
/*============*/

/**
* https://en.wikipedia.org/wiki/Help:User_style#CSS_in_user_subpages_versus_CSS_in_a_local_file
* https://www.mediawiki.org/wiki/Design/Link_colors
 */

/* Standard and local links. */
a:link, div#mw-panel a:link {color: var(--vLinkColor)} /* links */
a:visited, div#mw-panel a:visited {color: #6b9ad4 /*#78c*/} /* visited links */
a:active {color: #f91} /* selected link */

/* New links. */
a:link.new, div#mw-panel a:link.new {color: #c31} /* new link */
a:visited.new, div#mw-panel a:visited.new {color: #a44} /* visited new link */

/* Non-local links. */
a:link.extiw, div#mw-panel a:link.extiw {color: #6ad} /* interwiki links */
.mw-parser-output a:visited.extiw {color: #7788b0 /*#859*/} /* visited interwiki links */
a:link.external, div#mw-panel a:link.external {color: #6ad} /* external links */
.mw-parser-output a.external:visited {color: #7788b0 /*#859*/} /* visited external links */

/* Collapsible text */
a.mw-collapsible-text, label.toctogglelabel {color: var(--vLinkColor)}

/**********/
/* Tables */
/**********/

.wikitable {
  background-color: var(--vBgBox);
  border-color: var(--vBorderBox);
  color: var(--vTextColor);
  margin: 0;
}

.wikitable > * > tr > th {
  background-color: #28292a;
  border-color: var(--vBorderBox);
}

.wikitable > * > tr > td {
  border-color: var(--vBorderBox);
}

table.vector-outline img {
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
}

ul.gallery.vector-outline img {
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
}

/**********/
/* Editor */
/**********/

/* Editor menu */
.wikiEditor-ui .wikiEditor-ui-view {
    border-color: var(--vBorderBox);
}

/* Editor bottom option bar  */
.editOptions {
  background-color: #3a3a3e;
  border-color: var(--vBorderBox);
  color: var(--vTextColor);
}

/* Editor code status bar */
.codeEditor-status {
    background-color: var(--vBgBox);
    border-color: var(--vBorderBox);
}
.codeEditor-status-message {border-color: var(--vBorderBox)}
/* Workaround to display "annotation" icon properly when on a dark bg.
 * This workaround should be replaced with a custom bg-image meant for a dark bg,
 * or with a near-universally applicable bg-image.
*/
.ace_gutter-cell.ace_info {
    filter: invert(1);
    color: black;
}

/* ?action=history Revision comparison colors */
.diff-context {
    background: var(--vBgBox);
    border-color: var(--vBorderBox);
    color: var(--vTextColor);
}
.diff-addedline   {border-color: #587da8}  .diff-addedline .diffchange {background: #456}
.diff-deletedline {border-color: #c47d4b}  .diff-deletedline .diffchange {background: #785841}

/******************/
/* File namespace */
/******************/

/* ToC box for media files, Tabs for search results */
#filetoc, .mw-search-profile-tabs {
  background: var(--vBgBox);
  border-color: var(--vBorderBox);
  border-radius: 5px;
}
.search-types .current a { color: var(--vTextColor) }

/*Metadata table for media files */
table#mw_metadata.mw_metadata th {
  background: #28292a;
  border-color: var(--vBorderBox);
}
table#mw_metadata.mw_metadata td {
  background: var(--vBgBox);
  border-color: var(--vBorderBox);
}
table#mw_metadata.mw_metadata a { color: var(--vLinkColor) }

/**************/
/* Code Pages */
/**************/

/* .MW-Code Boxes */
.mw-highlight pre, .mw-code {
  color: #fff;
  background-color: var(--vBgBox);
  border-color: var(--vBorderBox);
}

.mw-highlight .p	{color: #fff}	/* punctuation */
.mw-highlight .o	{color: #aaa}	/* additional punctuation */
.mw-highlight .c	{color: #6aa}	/* comments */
.mw-highlight .nc,
.mw-highlight .nn	{color: #6bf}	/* classes and ids */
.mw-highlight .nv   {color: #88f}   /* variables */
.mw-highlight .nt	{color: #4c4}	/* elements */
.mw-highlight .nd	{color: #c5f}	/* pseudo-classes */
.mw-highlight .k	{color: #ae4}	/* properties */
.mw-highlight .nb	{color: #4b6}	/* argument: functions */
.mw-highlight .kc	{color: #ab6}	/* argument: values */
.mw-highlight .nf	{color: #4ab}	/* argument: variables */
.mw-highlight .mh	{color: #fcb}	/* argument: hexical */
.mw-highlight .mf	{color: #e65}	/* argument: decimal */
.mw-highlight .mi	{color: #e45}	/* argument: numerical */
.mw-highlight .kt	{color: #e45}	/* argument: units */
.mw-highlight .s2	{color: #f22}	/* argument: quotes */
.mw-highlight .sx	{color: #89a}	/* argument: URLs */
.mw-highlight .cp	{color: #fa0}	/* !important property */
.mw-highlight .n	{color: #fff}	/* unrecognized syntax */

/****************************/
/* Special and Action Pages */
/****************************/

/* Special:RecentChanges advanced search filter */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {background-color: transparent}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  background-color: var(--vBgBox)/*#262729*/;
  border-color: var(--vBorderBox);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
  background-color: var(--vBgBox)/*#262729*/;
  border-color: var(--vBorderBox);
}
.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button:hover {
  color: #fff;
  background-color: #363739;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
  background-color: var(--vBgPage);
  border-color: var(--vBorderBox);
  color: var(--vTextColor);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--vBgBox)/*#262729*/;
    color: var(--vTextColor);
    border-color: var(--vBorderBox);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: var(--vBgPage);
    color: #fff;
    border-color: var(--vBorderBox);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {color: var(--vTextColor)}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {color: #bbb}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {color: var(--vLinkColor)}
/* Input field */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--vBorderHighlight);
}
/* Active filters */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
  background-color: var(--vBgPage);
  border-color: var(--vBorderBox);
  color: #bbb;
}

/* Special:RecentChanges legend (list of abbreviations) */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend {
  background-color: var(--vBgBox);
  border-color: #232323;
}

/* Positive/negative page size numbers in Special:RecentChanges. */
/* https://en.wikipedia.org/wiki/Wikipedia:Added_or_removed_characters */
.mw-plusminus-pos {color: #1c2}
.mw-plusminus-neg {color: #c21}

/* Compare history selected diffs */
#pagehistory li.selected {
    background-color: var(--vBgBox);
    color: var(--vTextColor);
    outline: 1px dashed var(--vBorderBox);
}

/* Page revisions since last visit */
.updatedmarker {
    background-color: #506a18;
}

/* "All/None/Invert" checkbox text options on History pages */
.mw-checkbox-toggle-controls a {
  color: var(--vLinkColor);
}

/* Special:Search search result metadata */
.mw-search-result-data {
    color: #1c2;
}

/* Special:Search advanced search options */
#mw-searchoptions {
    background-color: var(--vBgBox);
    border: 1px solid var(--vBorderBox);
    border-radius: 5px;
}
#mw-searchoptions .divider { border-bottom-color: #808080; }

/**************************************************************************************************/

:root {
	--vTextColor: #ddd;
	--vLinkColor: #49d;
	/* Background elements */
	--vBgPage: #2a2a2a;	--vBgPage-decimalRGB: 42, 42, 42;
	--vBgBox: #313131;
	/* Border elements */
	--vBorderPage: #100020;
	--vBorderBox: #1e1e1e;
	--vBorderHighlight: #2a193b;
}

/* ==========
= Main Page =
========== */

/* Hide title on main page */
.action-view.page-Main_Page .firstHeading {
	display: none;
}

/* Hide categories from main page */
.action-view.page-Main_Page #catlinks {
    display: none;
}

/* Main page Grid */

.mp-grid {
	display: grid;
	grid:
	"header header header header header"
	"main main main right right"
	"footer footer footer right right";
	grid-gap: 4px;
}

.mp-grid .item1 { grid-area: header; }
.mp-grid .item2 { grid-area: main; }
.mp-grid .item3 { grid-area: right; }
.mp-grid .item4 { grid-area: footer; }

.mp-grid > div {
  background-color: #313131;
  border: 2px solid #1e1e1e;
  border-radius: 3px;
  padding: 4px 6px;
}

.mp-grid .boxheader {
  font-size: 200%;
  line-height: 1.3;
  text-align: center;
}

.mp-grid hr.dark {
  height: 2px;
  background-color: #1e1e1e;
}

/* =============
= Collapsibles =
============= */

/* Add padding b/n collapse button and adjacent heading text */
.mw-content-ltr .mw-collapsible-toggle {
    padding: 0px 0px 0px 4px;
}

/* =======================
= Blueprint tables (Bpt) =
======================= */

/* Make non-links in Template:Bpt/row smaller. */
.bpt-recipe {font-size: smaller}
.bpt-recipe a {font-size: 14px}

/* ==========
= Infoboxes =
========== */

.infobox {
	border: 2px solid var(--vBorderBox);
	border-spacing: 2px;
	background-color: var(--vBgBox);
	color: var(--text-color);
	/* @noflip */ clear: right;
	/* @noflip */ float: right;
	font-size: 85%;
	line-height: 1.5em;
	/* @noflip */ margin: 0.5em 0 0.5em 1em;
	width: 25em;
}

.infobox td,
.infobox th {
	vertical-align: top;
	/* @noflip */
	text-align: left;
}

.infobox th {
	min-width: 75px;
  padding-left: 2px;
}

/* Outline images in infoboxes with the .vector-outline class */
.infobox td .vector-outline img {
  filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
  padding-top: 3px;
}

/* Reduce margin between adjacent infoboxes */
.infobox + .infobox {
  margin-top: -2px;
}

/* =================
= Horizontal Lists =
================= */

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 9 (2016-08-10)
   @author "Edokter"
*/

.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
    display: none;
}

/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ")";
    font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) "\a0";
}

/* =================
= Unbulleted lists =
================= */

.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none none;
	margin: 0;
}

.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}

/* =======
= Navbox =
======= */

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
  box-sizing: border-box;
  border: 2px solid var(--vBorderBox);
  width: 100%;
  clear: both;
  font-size: 85%;
  text-align: center;
  padding: 1px;
  margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}

.navbox .navbox {
  margin-top: 0;            /* No top margin for nested navboxes */
}

.navbox + .navbox {
  margin-top: -2px;         /* Collapse borders between adjacent navboxes */
}

.navbox-inner,
.navbox-subgroup {
  width: 100%;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
  padding: 0.25em 1em;      /* Title, group and above/below styles */
  line-height: 1.5em;
  text-align: center;
}

th.navbox-group {             /* Group style */
  white-space: nowrap;
  /* @noflip */
  text-align: right;
}

.navbox,
.navbox-subgroup {
  background-color: var(--vBgBox); /* Background color */
  box-sizing: border-box;
}

.navbox-list {
  line-height: 1.5em;
  background-color: var(--vBgBox);    /* Must match background color */
  border-color: var(--vBgBox);
}

/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
  border-top: 2px solid var(--vBgBox); /* Must match background color */
  border-left: var(--vBgBox);
}

.navbox th,
.navbox-title {
  background-color: #1f1f1f;      /* Level 1 color */
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
  background-color: #28292a;      /* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
  background-color: #2b2b2b;      /* Level 3 color */
}

.navbox-even {
  background-color: rgba(77, 77, 77, 0.1);      /* Even row striping */
}

.navbox-odd {
  background-color: transparent;  /* Odd row striping */
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
  padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}

.navbox-title {
  border: 1px solid var(--vBorderBox);
}

/* ===========================
= Extension:MultimediaViewer =
=========================== */
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
  background: transparent;
}

/* =====================
= Extension:EmbedVideo =
===================== */
.ev-gallery {
	display: flex;
  flex-wrap: wrap;
  margin: 0.3em 0 0 1.6em;
}

.ev-gallery figure.embedvideo {
  padding: 0 5px 0 2px;
}

.ev-gallery .embedvideo[data-service="youtube"] .embedvideo-player, .ev-gallery .embedvideo[data-service="youtube"] .embedvideo-loader, .ev-gallery .embedvideo[data-service="youtube"] .embedvideo-privacyNotice {
  border: 1px solid #232323;
}

.ev-gallery .embedvideo[data-service="youtube"] .embedvideo-player {
    background-color: var(--vBgBox);
}

/* ========================
= Template:Update history =
======================== */
.update-history {
  background-color: var(--vBgBox);
  border: 2px solid var(--vBorderBox);
  border-radius: 3px;
  max-height: 250px;
  overflow-y: scroll;
  overflow-x: auto;
  padding: 0 3px;
}

/* ============
= Template:Rn =
============ */
.roman-numeral {
	font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
	font-size: 118%;
	line-height: 1;	
}