MediaWiki:Vector.css
Ir a la navegación
Ir a la búsqueda
En otros idiomas: English • Français
Los cambios de CSS y Javascript deben cumplir con las normas de diseño del wiki.
Nota: tras guardar, quizás necesites actualizar la caché de tu navegador para ver los cambios.
- Firefox/Safari: Mantén presionada la tecla Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
- Internet Explorer: mantén presionada Ctrl mientras pulsas Actualizar, o presiona Ctrl+F5
- Opera: vacía la caché en Herramientas → Preferencias
/* Todo CSS colocado en esta página será cargado para los usuarios que usen la apariencia "Vector" */
/* CSS placed here will affect users of the Vector Skin */
/* Fonts are managed in Common.css (as this css is addended to it and they ned to be at the top) */
/*╔════════════════╗*/
/*║ General styles ║*/
/*╚════════════════╝*/
/* Scrollbar */
.client-js { /* .client-js is the class of the root html element */
scrollbar-color: #654221 #150e04;/* Colours Matching the current background */
scroll-behavior: smooth; /* Anchor links will quickly scroll to Anchors (Instead of teleporting to them) */
}
/*┌───────────────────┐*/
/*│ Background & Body │*/
/*└───────────────────┘*/
body {
background: #150e04;
font-family: "AcuminProCon", sans-serif;
font-size: 20px;
background: #150e04 url(https://deeprockgalactic.wiki.gg/images/6/62/Skin-Body-Background-PlagueFall.jpg) no-repeat top / 100%; /* Image */
background-attachment: fixed; /* Background does not move as page scrolls */
}
@media screen and (min-width: 2000px) /* For High Resolution Monitors */
{
body {
font-size: 25px;
}
}
/*┌──────────┐*/
/*│ Headings │*/
/*└──────────┘*/
h1, h2, h3, h4, h5, h6 {
color: white; /* Font Colour */
/* text-transform: uppercase; */ /* Done By Font Choice */
font-family: "RiftSoftBold", sans-serif;
overflow: initial; /* Override Built-in .css, To Fix Scroll-Margin For Chromium (Should it be needed? no, is it? very much so) */
}
/* Default Overides */
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
font-family: "RiftSoftBold", sans-serif;
}
/*┌───────────┐*/
/*│ Main Body │*/
/*└───────────┘*/
.mw-body {
/* margin-top: 8px; */
color: white; /* Main Article Font Colour */
/*border: 1px solid #53a448;*/
border: 0px hidden;/* Remove default Border */
background: #000000c0;
backdrop-filter: blur(10px);/* Blur Background image */
}
/* Margin overide (Removes odd extra gap between LeftNav & Main Content) */
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
margin-left: 10em;
}
/*┌─────────────┐*/
/*│ Page Editor │*/
/*└─────────────┘*/
.wikiEditor-ui, .editOptions {
filter: invert(100%); /* ! Inverts the page editor colours ! */
}
/*╔═══════════════════╗*/
/*║ Navigation styles ║*/
/*╚═══════════════════╝*/
/*┌──────┐*/
/*│ Logo │*/
/*└──────┘*/
#p-logo, #p-logo a {
width: 175px;
height: 64px;
transition: transform 0.1s ease;
}
#p-logo a:hover {
transform: scale(1.1);
}
/*┌─────────────┐*/
/*│ Top Options │*/
/*└─────────────┘*/
/* Main Parent */
div#mw-head {
pointer-events: none; /* div overlaps the logo & MW somehow makes it stop it being clickable, this rectifies that (It's children need :auto; so they still are clickable) */
}
/* Top Background (or lack thereof) */
div#mw-page-base {
background: transparent;
}
/* Top Option Tabs */
.vector-menu-tabs, .vector-menu-tabs li, .vector-menu-tabs .selected, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3{/* #mw-head Specificity required to override build-in .css */
background: none;/*replaces the default linear-gradient border*/
font-family: "RiftSoftBold", sans-serif;
font-size: 20px;
transition: transform 0.1s ease;
}
.vector-menu-tabs li:not(.mw-watchlink) a {
background:url(https://deeprockgalactic.wiki.gg/images/9/9e/TopNavBG.png);
background-repeat:no-repeat;
background-size:contain
}
.vector-menu-tabs div ul li:not(.mw-watchlink) a:hover, #mw-head .vector-menu-dropdown h3:hover {
background:url(https://deeprockgalactic.wiki.gg/images/c/cb/TopNavHoverBG.png);
background-repeat:no-repeat;
background-size:contain;
color: white;
transform: scale(1.03);
}
.vector-menu-tabs li.selected:not(.mw-watchlink) a {
background: url(https://deeprockgalactic.wiki.gg/images/6/68/TopNavSelectedBG.png);
background-repeat: no-repeat;
background-size: contain;
}
.vector-menu-tabs li.selected a, .vector-menu-tabs .selected a:visited {
color:#ff9c00;
}
/* Overrides */
.vector-menu-tabs li a {
background-position: bottom;
color:white;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
float:none;
height:36px;
width:150px;
position:relative;
padding-top:2px;
padding-left:8px;
font-size:20px;
cursor:pointer
}
#left-navigation { /* It's the left side of the top options (Page / Discussion) not to be confused with the left nav */
margin-top: 3.2em; /* Push to be in-line with top of main body */
pointer-events: auto; /* Countering div#mw-head so it's children are still interactable */
}
#right-navigation { /* It's the right side of the top options (Read / Edit / View History) */
margin-top: 2.6em; /* Push to be in-line with top of main body */
pointer-events: auto; /* Countering div#mw-head so it's children are still interactable */
}
#right-navigation #p-views {
margin-top: 0.6em; /* Push to be in-line with top of main body */
}
/* Watch/unwatch */
.vector-menu-tabs #ca-unwatch.icon a::before {
/* background-image: linear-gradient(transparent,transparent),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><title>unwatch</title><defs><linearGradient id="a"><stop offset="0" stop-color="#ffd1a6"/><stop offset=".5" stop-color="#df7a00"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" x1="13.5" x2="4.6" y1="14.4" y2="3.4" gradientUnits="userSpaceOnUse" xlink:href="#a"/></defs><path fill="url(#b)" stroke="#ee9200" d="m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z"/></svg>'); */
filter: hue-rotate(180deg);
}
.vector-menu-tabs #ca-watch.icon a::before {
/* background-image: linear-gradient(transparent,transparent),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><title>watch highlighted</title><path fill="#00000000" stroke="#ff9c00" d="m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z"/></svg>'); */
filter: hue-rotate(180deg);
}
.vector-menu-tabs .mw-watchlink.icon a::before {
background-repeat: no-repeat;
background-position: 50% 50%;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 1.5em;
}
.vector-menu-tabs .mw-watchlink.icon a {
width: 1.5em;
height: 1.5em;
padding: 0;
overflow: hidden;
color: transparent;
}
/* More Dropdown Menu */
.mw-portlet-variants h3, .mw-portlet-cactions h3, .vector-menu-dropdown-noicon h3 {
padding-top: 0.8em;
padding-left: 8px;
font-weight: normal;
color: white;
font-size: 20px;
}
.vector-menu-dropdown li a {
color: White;
}
.vector-menu-dropdown h3:after {
filter: invert(1);
top: 0.1em;
right: 20px;
}
.vector-menu-dropdown .vector-menu-content {
background-color: #00000080;
border: 1px solid #ff9c00;
}
/*┌─────────────┐*/
/*│ Breadcrumbs │*/
/*└─────────────┘*/
.BreadCrumbBar {
/* text-transform: uppercase; */ /* Done By Font Choice */
font-family: "RiftSoftBold", sans-serif;
font-size: 20px;
margin-top: -15px;
padding-left: 7px; /* Align With Title Underline Start */
}
.BreadCrumbBar span {
background-size: contain;
background-repeat: no-repeat;
width: 125px;
display:inline-flex; /* Flex needed for span a::after, inline removes newline so can be horizontal */
margin-left:-8px;
position: relative; /* !Relative needed for span a::after to not spill outside this element! */
}
/* Overview */
.BreadCrumbBar span.BCOverview {
background-image: url(https://deeprockgalactic.wiki.gg/images/5/59/BreadcrumbBG.png);
}
.BreadCrumbBar span.BCOverview:hover {
background-image: url(https://deeprockgalactic.wiki.gg/images/7/76/BreadcrumbCurrentBG.png);
}
/* After Overview */
.BreadCrumbBar span.BCOther {
background-image: url(https://deeprockgalactic.wiki.gg/images/d/d4/BreadcrumbExtraBG.png);
}
.BreadCrumbBar span.BCCurrent, .BreadCrumbBar span.BCOther:hover {/* Current Page or when hovered */
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e4/BreadcrumbExtraCurrentBG.png);
}
/* Links */
.BreadCrumbBar span a {
margin-top: -4px;
}
.BreadCrumbBar span.BCOverview a {
margin-left: 5px;/* Overview BG does not have 10px arrow courner cutout to counter */
}
.BreadCrumbBar span.BCOther a, .BreadCrumbBar span.BCCurrent a {
margin-left: 13px;
}
.BreadCrumbBar span:hover a, .BreadCrumbBar span.BCCurrent a {/* Current Page or when hovered */
color: white;/* To counter otherwise same colour background */
text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black; /* Text Outline, But smooth */
}
/* Anchor Offset */
:target { /* Element targeted by clicked anchor link, Could also be done with [id] */
scroll-margin: 100px 0 0 0; /* Offset Top for Wiki.gg Sticky header & a bit more */
}
/* Link Click Zone Fill Parent Element*/
.BreadCrumbBar span a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
/*┌──────────────┐*/
/*│ Left Sidebar │*/
/*└──────────────┘*/
/* Entire left pannel */
#mw-panel {
margin-top: -2em; /* Raise it up to fill the void */
}
/* Groupings */
.vector-menu-portal {
margin: 0; /* Overide default margins */
font-family: "RiftSoftBold", sans-serif;
margin-top: -12px;
}
.vector-menu-portal .vector-menu-content li {
font-size: 15px;
line-height: 1.5;
inline-size: 170px;
}
/* Category Labels */
.portal h3.vector-menu-heading {/* Portal means it does not affect the "more options" button/dropdown in the TopOptions */
background-image: linear-gradient(to right,rgb(255, 156, 0) 0,rgba(0, 0, 0, 0) 80%);
background-size: 100% 5px;
color: white;
font-size: 23px;
margin-top: 7px;
margin-left: 6px;
padding: 0; /* Overide default padding */
}
/* Individual Links */
#mw-panel div.portal div.body ul li {
background-image: url(https://deeprockgalactic.wiki.gg/images/3/39/SideNavGenericBG.png); /* Default/Fallback if no custom is set */
height: 30px;
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom 0.03em; /* To center background to the link text */
padding-top: 8px;
padding-bottom: 2px;
padding-left: 8px;
transition: transform 0.1s ease;
position: relative; /* !Relative needed for a::after to not spill outside this element! */
text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black; /* Text Outline, But smooth */
}
#mw-panel div.portal div.body ul li:hover {
transform: scale(1.1); /* Grow 10% bigger on mouse over */
/* filter: saturate(0%) brightness(200%); */ /* Make background's outline turn white */ /* Disabled, due to affecting Text poorly */
}
#mw-panel div.portal div.body ul li:hover > a {
color: white;
}
/* Link Click Zone Fill Parent Element*/
#mw-panel div.portal div.body ul li a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
/*┌──────────────────────────────────┐*/
/*│ Left Sidebar: Custom Backgrounds │*/
/*└──────────────────────────────────┘*/
/* #mw-panel is used to give these (2,0,0) specifity (to overide the base background) */
/* Wiki */
#mw-panel #n-portal {
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e3/SideNavBG-CommunityPortal.png);
}
#mw-panel #n-recentchanges {
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e4/SideNavBG-RecentChanges.png);
}
#mw-panel #n-randompage {
background-image: url(https://deeprockgalactic.wiki.gg/images/1/1e/SideNavBG-RandomPage.png);
}
#mw-panel #n-Admin-noticeboard {
background-image: url(https://deeprockgalactic.wiki.gg/images/a/a3/SideNavBG-AdminNoticeboard.png);
}
/* Basics */
#mw-panel #n-Space-Rig {
background-image: url(https://deeprockgalactic.wiki.gg/images/f/fb/SideNavBG-Space-Rig.png);
}
#mw-panel #n-Equipment {
background-image: url(https://deeprockgalactic.wiki.gg/images/4/49/SideNavBG-Equipment.png);
}
#mw-panel #n-Hoxxes {
background-image: url(https://deeprockgalactic.wiki.gg/images/0/07/SideNavBG-Hoxxes.png);
}
#mw-panel #n-Creatures {
background-image: url(https://deeprockgalactic.wiki.gg/images/a/a4/SideNavBG-Creatures.png);
}
#mw-panel #n-Resources {
background-image: url(https://deeprockgalactic.wiki.gg/images/f/f4/SideNavBG-Resources.png);
}
#mw-panel #n-Missions {
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e9/SideNavBG-Missions.png);
}
#mw-panel #n-Accessories {
background-image: url(https://deeprockgalactic.wiki.gg/images/6/6c/SideNavBG-Accessories.png);
}
#mw-panel #n-Perks {
background-image: url(https://deeprockgalactic.wiki.gg/images/3/34/SideNavBG-Perks.png);
}
#mw-panel #n-Update-History {
background-image: url(https://deeprockgalactic.wiki.gg/images/8/80/SideNavBG-Update-History.png);
}
/* Dwarves */
#mw-panel #n-Driller {
background-image: url(https://deeprockgalactic.wiki.gg/images/1/18/SideNavBG-Driller.png);
}
#mw-panel #n-Engineer {
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e7/SideNavBG-Engineer.png);
}
#mw-panel #n-Gunner {
background-image: url(https://deeprockgalactic.wiki.gg/images/1/17/SideNavBG-Gunner.png);
}
#mw-panel #n-Scout {
background-image: url(https://deeprockgalactic.wiki.gg/images/d/de/SideNavBG-Scout.png);
}
/* Advanced */
#mw-panel #n-Assignments {
background-image: url(https://deeprockgalactic.wiki.gg/images/2/28/SideNavBG-Assignments.png);
}
#mw-panel #n-Promotions {
background-image: url(https://deeprockgalactic.wiki.gg/images/e/e5/SideNavBG-Promotions.png);
}
#mw-panel #n-Deep-Dives {
background-image: url(https://deeprockgalactic.wiki.gg/images/4/43/SideNavBG-DeepDives.png);
}
#mw-panel #n-Overclocks {
background-image: url(https://deeprockgalactic.wiki.gg/images/0/09/SideNavBG-Overclocks.png);
}
/* Tools */
#mw-panel #t-whatlinkshere {
background-image: url(https://deeprockgalactic.wiki.gg/images/3/3c/SideNavBG-WhatLinksHere.png);
}
#mw-panel #t-recentchangeslinked {
background-image: url(https://deeprockgalactic.wiki.gg/images/b/ba/SideNavBG-RelatedChanges.png);
}
#mw-panel #t-upload {
background-image: url(https://deeprockgalactic.wiki.gg/images/c/c5/SideNavBG-UploadFile.png);
}
#mw-panel #t-specialpages {
background-image: url(https://deeprockgalactic.wiki.gg/images/7/75/SideNavBG-SpecialPages.png);
}
#mw-panel #t-print {
background-image: url(https://deeprockgalactic.wiki.gg/images/c/ca/SideNavBG-PrintableVersion.png);
}
#mw-panel #t-permalink {
background-image: url(https://deeprockgalactic.wiki.gg/images/3/39/SideNavBG-PermanentLink.png);
}
#mw-panel #t-info {
background-image: url(https://deeprockgalactic.wiki.gg/images/7/77/SideNavBG-PageInformation.png);
}
#mw-panel #t-cargopagevalueslink {
background-image: url(https://deeprockgalactic.wiki.gg/images/d/d4/SideNavBG-PageValues.png);
}
/*┌───────┐*/
/*│ Links │*/
/*└───────┘*/
/* Unvisited Link */
a, .vector-menu-portal .vector-menu-content li a, .toctogglelabel {
text-decoration: none;
color: #ff9c00;
}
/* Link on mouse over / selected by tab key / etc. */
a:hover, a:focus, .vector-menu-portal .vector-menu-content li a:hover, .vector-menu-portal .vector-menu-content li a:focus {
color: white;
}
a:hover, a:focus {
text-decoration: underline;
}
.vector-menu-portal .vector-menu-content li a:hover, .vector-menu-portal .vector-menu-content li a:focus {
text-decoration: none;
}
/* Links to pages already visited */
a:visited, .vector-menu-portal .vector-menu-content li a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited, .mw-parser-output a.external {
color: #ff9c00; /* No colour diffrence with unvisited */
}
/* Was !important to Override ".vector-menu-portal .vector-menu-content li a:visited" & ".vector-menu-portal .vector-menu-content li a" */
/*┌────────┐*/
/*│ Footer │*/
/*└────────┘*/
/* Categories */
.catlinks {
background: linear-gradient(to right, rgb(255, 156, 0) 50%, rgba(0, 0, 0, 0) 100%);
background-size: 100% 1px;
background-repeat: no-repeat;
/* background-position: bottom; */ /* Defaults to top, trying it out */
border: none;
}
/* Footer Info Text (Last edited time & copyright notice) */
.mw-footer li {
color: white;
}
/*╔════════════════╗*/
/*║ Article styles ║*/
/*╚════════════════╝*/
/*┌─────────────────┐*/
/*│ Article Headers │*/
/*└─────────────────┘*/
/* Article Main Header / H1 */
#firstHeading {
background-image: linear-gradient(to right,rgb(255, 156, 0) 0,rgba(0, 0, 0, 0) 95%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 3px;
border: none;
}
/* H2 Header */
.mw-parser-output h2 {
background-image: linear-gradient(to right,rgb(255, 156, 0) 0,rgba(0, 0, 0, 0) 75%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 2px;
border: none;
}
/* H3 Header */
.mw-parser-output h3:not(.pi-data-label) {
background-image: linear-gradient(to right,rgb(255, 156, 0) 0,rgba(0, 0, 0, 0) 66%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
border: none;
}
/* H4/5 Header */
.vector-body h3, .vector-body h4 {
font-weight: bold;
letter-spacing: 0.1em; /* Spacing to give more readability with current bold font */
}
/*┌──────────────┐*/
/*│ General Text │*/
/*└──────────────┘*/
.mobileonly{
display: none; /* The past way of dealing with Notice templates Duplication */
}
b, strong {
letter-spacing: 0.025em; /* Spacing to give more readability with current bold font */
}
ul {
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="13"><circle cx="2.5" cy="9" r="2.5" fill="#fff"/></svg>');
}
/*┌───────────────────────┐*/
/*│ TOC/Table of Contents │*/
/*└───────────────────────┘*/
.vector-body .toc {
background: none;
border: 1px solid #ff9c00;
}
.vector-body .toc h2 {
background-image: linear-gradient(to right, rgb(255, 156, 0) 50%, rgba(0, 0, 0, 0) 100%); /* Dropoff starts at 50% */
font-family: "RiftSoftBold", sans-serif; /* Overide default */
font-size: 125%;
letter-spacing: 0.1em;
}
.tocnumber {
color: #ff9c0080; /* Translucent to distinguish easily from link text */
}
/*┌───────────┐*/
/*│ Refrences │*/
/*└───────────┘*/
ol.references li:target, sup.reference:target { /* To highlight refrence's other side when clicked */
background: none;
border:#ff9c00 1px solid;
}
/*┌──────────────────────────────┐*/
/*│ Difference between revisions │*/
/*└──────────────────────────────┘*/
/* Context Lines (Unchanged lines before & after changed lines) */
td.diff-context {
background: #00000080;
color: #666666;
}
/* Removed Lines (Left) */
td.diff-deletedline {
background: #feeec820;
}
td.diff-deletedline del.diffchange {
background: #feeec850; /* Highlight for the actual changes on a line */
/* text-decoration: underline; */
}
/* Added Lines (Right) */
td.diff-addedline {
background: #d8ecff20;
}
td.diff-addedline ins.diffchange {
background: #d8ecff50; /* Highlight for the actual changes on a line */
/* text-decoration: underline; */
}
/*┌────────┐*/
/*│ Tabber │*/
/*└────────┘*/
.tabber__tab { /* Unselected tab */
color: #9b9b9b;
}
.tabber__tab--active, .tabber__tab--active:visited { /* Currently Selected Tab */
box-shadow: inset 0 -2px 0 0 #ff9c00; /* Underline */
color: #ff9c00;
}
.tabber__tab:hover, .tabber__tab:active { /* Mouse Hovered / Keyboard Selected Tab */
box-shadow: inset 0 -2px 0 0 white; /* Underline */
color: white;
}
.tabber__header {
margin-left: 0.3em; /* Counter underline going out of bounds of the infobox */
background: #00000080;
}
/*╔══════════════╗*/
/*║ Table styles ║*/
/*╚══════════════╝*/
table { /* only works with this selector, e.g table.wikitable would not work despite being higher specificity */
display: table; /* Overrides built-in css */
white-space: initial;
}
table.wikitable {
background-color: #00000080; /* ~50% Darken */
white-space: initial;
color: white;
display: table;
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: transparent; /* Overide default */
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9"> <path d="m8,5 l-4,4 l-4,-4 zm0,-1 l-4,-4 l-4,4 z" stroke="white" fill="white"></path></svg>');
}
.centeredtext { /* Used only by tables */
text-align: center;
}
/* Tables holding all page cotent (See: Resources, Hoxxes) */
table.pagecontent {
display: inline-table;
white-space: normal;
text-align: left;
vertical-align: top;
}
@media (max-width: 703px){/* Built-in stuff uses 703px For Mobile Transition */
table.pagecontent{
width:100%;
}
}
/*┌─────────────────┐*/
/*│ Floating Header │*/
/*└─────────────────┘*/
table.floatingheader {
position: relative; /* Needed for position: sticky to work */
border-spacing: 0; /* Removes ugly backgroundless gaps */
border-collapse: separate; /* Needed for float to keep their border */
}
.floatingheader thead th {
position: sticky; /* Makes header row float at top of screen */
top: 35px; /* move down so not under wiki.gg header */
background-color: #090606; /* Give a background */
z-index: 1; /* Display On-Top of floatingcolumn */
}
.floatingcolumn tbody tr td:first-child {
background-color: #090606; /* Makes first column float at left of screen */
position: sticky;
left: 0;
}
.wikitable.floatingheader th,
.wikitable.floatingheader td { /* Remove double thick border */
border-style: none solid solid none;
}
/*┌──────────────────────┐*/
/*│ Special Pages Tables │*/
/*└──────────────────────┘*/
/* Recent Changes */
.mw-changeslist-legend, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: #00000080;
}
.mw-changeslist {
letter-spacing: 0.05em;
}
/* History */
#pagehistory li.selected {
background-color: #00000080;
color: #fff;
}
/* Search */
#mw-searchoptions, .mw-search-profile-tabs {
background-color: #00000080;
}
.search-types .current a {
color: white;
}
/* Find/Replace */
.ext-replacetext-searchoptions{
background-color: #00000080;
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { /* "Pages already contain the replacement string" Warning box */
background-color: #00000080;
}
/* Datatables (Abuse filter management/System messages) */
.mw-datatable th {
background-color: #00000080;
}
.mw-datatable td {
background-color: #00000080;
}
/* Debug Templates */
.dt-crumbs {
background-color: #00000080;
}
/* .CSS Editor */
.mw-highlight-lang-css {
filter: invert(100%);
}
/* Prefrences */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: inherit; /* Default Button text colour is grey on dark background, inherits to white (or red for some) */
}
/*┌────────────────────────┐*/
/*│ Cargo Extension Tables │*/
/*└────────────────────────┘*/
/* Cargo Tables Listing Pn Hover */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color:transparent;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color:#ffffff30;
}
/* Cargo Tables Listing On Hover */
.mw-datatable tr:hover td {
background-color: #20202080;
}
/* Cargo Tables Listing Icons */
.oo-ui-icon-funnel, .mw-ui-icon-funnel::before {
filter: invert(1);
}
.oo-ui-icon-reload, .mw-ui-icon-reload::before {
filter: invert(1);
}
.oo-ui-icon-trash, .mw-ui-icon-trash::before {
filter: invert(1);
}
.oo-ui-icon-add, .mw-ui-icon-add::before {
filter: invert(1);
}
/* Individual Cargo Data Table */
#mw-content-text table.cargoTable.noMerge tr {
background-color: #00000080;
}
/* Cargo Page Values */
.cargo-pagevalues-tableinfo {
background-color: inherit; /* Remove white background override */
}
/* Cargo table diagram */
div.cargo-table-diagram {
fill: #ffffff;
}
/* Cargo Query Builder */
.oo-ui-popupWidget-popup { /* Tooltip */
background-color: #00000080;
border: 1px solid #f89800;
width: auto !important; /* Needed as element has baked-in width that stops all the content being shown, for some reason? */
}
.oo-ui-icon-info, .mw-ui-icon-info::before{ /* Tooltip Icon */
filter: invert();
}
div.specialCargoQuery-extraPane { /* Modify Query */
background: inherit;
}
/*╔══════════════╗*/
/*║ Image styles ║*/
/*╚══════════════╝*/
div.thumbinner {
/* border: 1px solid #c8ccd1; */
background-color: transparent;
}
.thumbimage {
background-color: transparent;
}
/* Gallery */
li.gallerybox div.thumb {
/* border: 1px solid #c8ccd1; */
background-color: transparent;
}
#content ul.mw-gallery-packed li.gallerybox div.thumb {
border-bottom: 1px solid #c8ccd1;
}
.gallerytext p {
margin-top: 0; /* Override default top margin, to move the text caption up */
}
/*┌─────────────┐*/
/*│ Image pages │*/
/*└─────────────┘*/
#filetoc, .mw_metadata td, .mw_metadata th {
background: inherit; /* Remove built-in overriding white background */
}
/*┌───────────┐*/
/*│ Max-Width │*/
/*└───────────┘*/
/* Desktop Side: PiXels */
.mw-800{
max-width: 800px;
width: 100%; /* Fill container up to max / Shrink if needed */
height: auto; /* Keep Aspect Ratio */
}
.mw-700{
max-width: 700px;
width: 100%;
height: auto;
}
.mw-600{
max-width: 500px;
width: 100%;
height: auto;
}
.mw-500{
max-width: 500px;
width: 100%;
height: auto;
}
.mw-400{
max-width: 400px;
width: 100%;
height: auto;
}
.mw-380{
max-width: 400px;
width: 100%;
height: auto;
}
.mw-256{
max-width: 256px;
width: 100%;
height: auto;
}
.mw-150{
max-width: 150px;
width: 100%;
height: auto;
}
.mw-130{
max-width: 150px;
width: 100%;
height: auto;
}
.mw-128{
max-width: 128px;
width: 100%;
height: auto;
}
.mw-64{
max-width: 128px;
width: 100%;
height: auto;
}
.mw-32{
max-width: 128px;
width: 100%;
height: auto;
}
/* Desktop Side: Percent */
.mw-25p{
max-width: 25%;
width: auto;
height: auto;
}
.mw-50p{
max-width: 50%;
width: auto;
height: auto;
}
.mw-75p{
max-width: 75%;
width: auto;
height: auto;
}
.mw-100p{
max-width: 100%;
width: auto;
height: auto;
}
/* Mobile Side*/
@media (max-width: 703px){/* Built-in stuff uses 703px For Mobile Transition */
}
/*╔═════════════════╗*/
/*║ Responsive flex ║*/
/*╚═════════════════╝*/
/*┌──────────┐*/
/*│ RF icons │*/
/*└──────────┘*/
.flexiconlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
text-align: center;
margin: -10px -10px 0 -10px;
padding: 0;
}
.flexiconlinks.horizontal {
margin: 0 -20px 10px -20px;
}
/* Iconlink */
.flexiconlinks .iconlink {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: none;
background: transparent;
margin: 0;
padding: 10px;
flex: 0 0 8rem;
min-width: 128px;
}
.flexiconlinks.horizontal .iconlink {
padding: 4px 20px;
}
.flexiconlinks.iconsize96 .iconlink {
flex: 0 0 6rem;
min-width: 96px;
}
.flexiconlinks.horizontal .iconlink {
flex-flow: row nowrap;
align-items: flex-start;
flex: 0 0 15rem;
}
.flexiconlinks .iconlink .icon {
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
min-width: 128px;
width: 128px;
height: 128px;
}
/* Icon */
.flexiconlinks.horizontal .iconlink .icon {
min-width: 24px;
width: 24px;
height: 24px;
}
.flexiconlinks.iconsize96 .iconlink .icon {
min-width: 96px;
width: 96px;
height: 96px;
}
/* Text */
.flexiconlinks.horizontal .iconlink .text {
width: auto;
text-align: left;
}
.flexiconlinks.horizontal .iconlink .text a {
padding-left: 0.5rem !important;
}
/*┌─────────┐*/
/*│ RF text │*/
/*└─────────┘*/
.flextextlinks ul {
display: flex;
flex-flow: row wrap;
text-align: center;
margin: 0;
padding: 0;
}
.flextextlinks ul li {
list-style: none;
flex: 1 0 1em;
margin: 0;
padding: 4px 0px;
}
/*┌───────────────────┐*/
/*│ RFPBox (MainPage) │*/
/*└───────────────────┘*/
.rfpbox, .rfpdesktopbox {
border: 1px solid white;
}
.rfpblock .heading {
border-bottom: 1px solid white;
}
/*╔═════════════════╗*/
/*║ Template styles ║*/
/*╚═════════════════╝*/
/*┌──────────────────┐*/
/*│ Infobox Templates│*/
/*└──────────────────┘*/
.portable-infobox {
background: #00000080; /* ~50% Darken */
width: 350px;
max-width: 100%;
}
.right-float-infobox {
float: right;
width: 275px;
}
/* Infobox Bars */
.portable-infobox .pi-secondary-background, .portable-infobox .pi-title {
background-image: linear-gradient(to right,rgb(255,156,0) 0,rgba(0,0,0,0) 95%);
background-color:transparent;
font-family: RiftSoftBold;
}
.portable-infobox .pi-secondary-background{
background-size: 100% 2px;
letter-spacing: 0.05em;
}
.portable-infobox .pi-title {
background-size: 100% 3px;
}
.portable-infobox .pi-border-color, .pi-smart-data-value:not(:first-child) { /* Inter-records line colour */
border-color:#a2a9b14f;
}
/* Infobox Selected Section (I.e. Creature Weakpoint slected Cameraview) */
.pi-section-navigation .pi-section-tab.pi-section-active, .pi-section-navigation .pi-section-tab.current, .pi-media-collection .pi-tab-link.current {
background:transparent;
/* font-weight:bold; */ /* Deafult */
letter-spacing: 0.045em; /* To counter small text + bold */
}
/* Section Options */
.pi-section-navigation .pi-section-tab, .pi-media-collection .pi-tab-link {
flex: 1 0 auto; /* = flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
border-color: #ffffff70;
}
.pi-section-tab.pi-item-spacing, .pi-section-tab.pi-item-spacing.pi-section-active {
padding: 5px;
}
/* Image */
.portable-infobox .pi-media {
margin: 5px; /* Stop image touching the bounds of the PI */
}
.pi-image-thumbnail {
max-width: 95%; /* Shrink image to allow for margin */
}
/* Template:CreatureStats */
aside.portable-infobox [data-item-name="pi-temperature"] section:nth-child(-n+7) section:nth-child(1) h3:nth-child(1) { /* section:nth-child(-n+7) = First 6 rows, section:nth-child(2) = Value (not label), div:nth-child(1) = Left hand side */
background-image: linear-gradient(to bottom, rgba(232, 75, 39, 255) -150%, rgba(0,0,0,0) 50%);
color: rgba(232, 75, 39, 255);
}
aside.portable-infobox [data-item-name="pi-temperature"] section section:nth-child(1) h3:nth-child(2) { /* section = any, section:nth-child(2) = Value (not label), div:nth-child(2) = Right hand side */
background-image: linear-gradient(to bottom, rgba(0, 198, 255, 255) -150%, rgba(0,0,0,0) 50%);
color: rgba(0, 198, 255, 255);
}
aside.portable-infobox [data-item-name="pi-temperature"] section:nth-child(n+8) section:nth-child(1) :nth-child(1) { /* section:nth-child(n+8) = Row ≤7 , section:nth-child(2) = Value (not label), div:nth-child(1) = Left hand side */
background-image: linear-gradient(to bottom, white -150%, rgba(0,0,0,0) 50%);
}
aside.portable-infobox div.pi-section-contents [data-item-name="pi-status"] .pi-data-label{ /* Status Tab, label width */
-webkit-flex-basis: 50em;
flex-basis: 50em;
}
/*┌──────────────────┐*/
/*│ Navbox Templates │*/
/*└──────────────────┘*/
.navbox {
width: 100%; /* Strech to fill footer */
}
.navbox-title, table.navbox th {
background: rgba(0,0,0,0.75);
}
.navbox-subgroup {
white-space:normal;
}
.navbox-group {
padding-left: 5px;
}
.navbox-odd {
background: rgba(0,0,0,0.20);
}
.navbox-even {
background: rgba(0,0,0,0.30);
}
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
background: rgba(0,0,0,0.60);
padding-right: 5px; /* Stops Dividing line touching the categoy titles */
}
.navbox-list div p {
margin: 0; /* Stop gap between categories being smaller than better lines of the same category */
}
/*┌─────────────┐*/
/*│ Site notice │*/
/*└─────────────┘*/
/*┌────────┐*/
/*│ <Math> │*/
/*└────────┘*/
.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display {
filter: invert(1);
}
/*┌────────────────┐*/
/*│ Misc Templates │*/
/*└────────────────┘*/
/* Template:Updated */
.Updated {
position: absolute;
right: 0; /*Right Align*/
top: -50px; /*Move up onto Title line*/
}
/* Template:Quote */
.Quote {
padding-bottom: 5px;
}
.Quote td.QuoteIcon {
font: 6em/0.03em 'RiftSoftBold', 'Times', serif;
color: #ff9c00;
border-right: 1px solid #ff9c00;
padding-top: 0.35em; /* Vertical Centering (vertical-align Does not work here) */
padding-right: 0.05em;
line-height: 0.1em; /* Reduce hight of authorless quotes */
overflow: hidden; /* Icon loves to overflow (but not visually) this ensures scrollbar is not added unless the quote text needs it*/
}
.Quote td.QuoteText{
font-style: italic;
padding-left: 0.5em;
white-space: pre-wrap;
}
.Quote td.QuoteAuthor{
padding-top: 0.1em;
padding-left: 40px;
}
/*╔═════╗*/
/*║ END ║*/
/*╚═════╝*/