MediaWiki:Vector.css
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.
/* 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 need to be at the top) */
/* Key Colours, Plum #900752 & Gold #f29534*/
/*╔════════════════╗*/
/*║ General styles ║*/
/*╚════════════════╝*/
/* Scrollbar */
.client-js { /* .client-js is the class of the root html element */
scrollbar-color: #3e3765 #050812;/* Colours Matching the current background */
scroll-behavior: smooth; /* Anchor links will quickly scroll to Anchors (Instead of teleporting to them) */
}
/*┌───────────────────┐*/
/*│ Background & Body │*/
/*└───────────────────┘*/
body {
background: #050812;
font-family: 'Barlow', sans-serif;
font-size: 20px;
background: #150e04 url(https://endlessdungeon.wiki.gg/images/d/d0/Background-Optimized.png) no-repeat top / 100%; /* Image */
background-attachment: fixed; /* Background does not move as page scrolls */
height: auto; /*should not be needed but something built-in is making it 100% otherwise*/
}
@media screen and (min-width: 2000px) /* For High Resolution Monitors */
{
body {
font-size: 25px;
}
}
/* Do not affect font size in ad area */
div.games-showcase-header, div.games-showcase-footer { font-size: initial; }
/*┌──────────┐*/
/*│ Headings │*/
/*└──────────┘*/
h1, h2, h3, h4, h5, h6 {
color: white; /* Font Colour */
font-family: 'Khand', 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: 'Khand', 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(0%); /* ! Inverts the page editor colours ! */
scrollbar-color: #111 #020202
}
.wikiEditor-ui .wikiEditor-ui-view {
border: 1px solid #333;
}
/* Toolbar */
.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid #333333;
}
.wikiEditor-ui-toolbar { /* Bar Background Colour */
background-color: #00000080;
}
#wikiEditor-section-main, #wikiEditor-section-advanced .oo-ui-buttonElement-button { /* Editor Toolbar Icons */
filter: invert(100%);
}
#wikiEditor-ui-toolbar .tabs a, #wikiEditor-ui-toolbar .label, #wikiEditor-ui-toolbar span { /* Editor Toolbar Text */
color: white;
}
/* Sidebar */
.ace_gutter-cell { /* Bar Background Colour */
background-color: #020202; /* .ace-tm .ace_gutter ?? */
}
.ace-tm .ace_gutter-active-line { /* "" When selected */
background-color: #900752;
color: white;
}
.ace_gutter-cell { /* Line Number Colour */
color: #ccc;
}
/* Main Window */
/* Main Window Text (D[efault] #HEX) */
.ace-tm { /* Base Colour */
color: black;
background-color: #070605;
}
.mw-highlight .hll { /* Highlighted Line */
background-color: #90075260;
}
.ace-tm .ace_comment { /* For a comment like this (D #4c886b) */
color: #ccc;
}
.cm-mw-link-ground { /* [[Link Background]] (D #22119906) */
background-color: #90075230;
}
.cm-mw-link-pagename { /* [[Link Text]] (D #36c) */
color: #900752;
}
.cm-mw-template-name { /* {{Template Name}} (D #80c) */
color: #36c;
}
.cm-mw-template-bracket { /* Template {{ Bracket (D #80c) */
color: #74a2ff;
}
.cm-mw-template {
color:#36c;
font-weight:normal;
}
.cm-mw-template-name {
color:#36c;
}
.cm-mw-template-argument-name {
color:#36c;
}
.cm-mw-template-delimiter {
color:#36c;
}
.cm-mw-template-bracket {
color:#36c;
}
/* Bottom Bar */
.codeEditor-status {
background-color: #020202;
border-top: 1px solid #333;
}
.codeEditor-status-message {
border-left: 1px solid #333;
border-right: 1px solid #333;
}
/*╔═══════════════════╗*/
/*║ Navigation styles ║*/
/*╚═══════════════════╝*/
/*┌──────┐*/
/*│ Logo │*/
/*└──────┘*/
.mw-wiki-logo {
background-image: url(/images/e/e6/Site-logo.png); /*URL Base: https://endlessdungeon.wiki.gg*/
background-size: contain;
filter: drop-shadow(0px 0px 1px black);
}
#p-logo, #p-logo a {
width: 10em;
height: 64px;
transition: transform 0.1s ease;
}
#p-logo a:hover {
transform: scale(1.1);
}
/*┌─────────────┐*/
/*│ Top Options │*/
/*└─────────────┘*/
/* Main Parent */
/* Top Background (or lack thereof) */
div#mw-page-base {
background: transparent;
}
/* More Menu (#p-cactions-label) vector-menu-heading */
#p-cactions-label {
color: #d1bad4;
text-shadow: -2px 2px #00000078;
padding-bottom: 0.35em;
padding-top: 0.75em;
}
.vector-menu-dropdown .mw-list-item a { /* More Dropdown */
font-family: 'Khand', sans-serif;
color: #d1bad4;
text-shadow: -2px 2px #00000078;
}
/* Top Option Tabs (Desktop) */
@media (min-width:790px) {
.vector-menu-tabs, .vector-menu-tabs li, .vector-menu-tabs .selected, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading{/* #mw-head Specificity required to override build-in .css */
background: none;/*replaces the default linear-gradient border*/
font-family: 'Khand', sans-serif;
font-size: 20px;
transition: transform 0.1s ease;
}
.vector-menu-tabs li:not(.mw-watchlink) a {
border-image: linear-gradient(to right, #f1c5801a 0, #f1c580 30%, #f1c580 70%, #f1c5801c 100%) 0 1 1 0;
border-bottom: 1px solid;
background-repeat:no-repeat;
background-size:contain
}
.vector-menu-tabs div ul li:not(.mw-watchlink) a:hover, #mw-head .vector-menu-dropdown .vector-menu-heading:hover {
border-image: linear-gradient(to right, #f1c5801a 0, #f1c580 30%, #f1c580 70%, #f1c5801c 100%) 0 1 1 0;
border-bottom: 1px solid;
margin-bottom: 5%;
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.new a, .vector-menu-tabs .new a:visited {
color:#d1bad4;/* Override missing page red (Would only be for talk pages) */
}
.vector-menu-tabs li.selected a, .vector-menu-tabs .selected a:visited {
color:#f1c580;
}
.vector-menu-tabs li.selected:not(.mw-watchlink) a::after {
background-color: #f1c580;
transform: rotate(45deg);
content: "";
width: 5px;
height: 5px;
position: absolute;
top: 22px;
left: 48%;
}
.vector-menu-tabs li a {
color: #d1bad4;
background-position:bottom;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
float:none;
height:25px;
position:relative;
padding-top:2px;
padding-left:8px;
font-size:20px;
cursor:pointer;
text-shadow: -2px 2px #00000078;
}
}
/* Top Option Tabs (Mobile / Small screen fix) */
@media (max-width:790px) {
}
@media (max-width:720px){
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
margin-left: 0em;
}
}
/* Overrides */
#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 {
filter: hue-rotate(180deg);
}
.vector-menu-tabs #ca-watch.icon a::before {
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 white;
}
/* Search */
.searchButton[name="go"] { /* Search Box magnifying glass Icon */
filter: contrast(0.5) sepia(100%) saturate(1) brightness(3) hue-rotate(210deg); /* Grey -> Light Lavender */
}
.vector-search-box-input::placeholder { /* "Search Endless Dungeon Wiki" Text */
color: #72777d;
opacity: 1;
}
.vector-search-box-input, .suggestions-results, .mw-searchSuggest-link { /* Search Bar */
color: white;
border: 1px solid #72777d;
border: 0px hidden;/* Remove default Border */
background: #000000c0;
backdrop-filter: blur(10px);
}
.vector-search-box-inner:hover .vector-search-box-input {
border-color: white;
}
.suggestions-results, .suggestions-special { /* Search Results */
background: #000000c0;
backdrop-filter: blur(10px);
}
.suggestions .suggestions-result, .suggestions .special-label, .suggestions .special-query { /* Search Result Text */
color: white;
}
/*┌─────────────┐*/
/*│ Breadcrumbs │*/
/*└─────────────┘*/
/* Overview */
/* After Overview */
/* Links */
/* Anchor Offset */
/* Link Click Zone Fill Parent Element*/
/*┌──────────────┐*/
/*│ 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: 'Khand', sans-serif;
margin-top: -12px;
position: relative; /* Needed for fancy .portal h3.vector-menu-heading::after Stuff*/
}
.vector-menu-portal .vector-menu-content li {
font-size: 22px;
line-height: 0.5;
inline-size: 150px;
letter-spacing: 0.5px;
}
/* Category Labels */
.portal h3.vector-menu-heading {/* Portal means it does not affect the "more options" button/dropdown in the TopOptions */
background-image: none;
background-size: 100% 1px;
color: white;
font-size: 30px;
line-height: 1;
margin-top: 7px;
margin-left: 10px;
padding: 0; /* Overide default padding */
text-shadow: -2px 2px #00000078;
}
.portal h3.vector-menu-heading::after {
background-image: linear-gradient(to right,rgb(221, 177, 107) 0,rgba(221, 177, 107, 0.11) 100%);
background-position: left bottom;
background-repeat: no-repeat;
content: "";
width: 39%;
height: 13px;
position: absolute;
top: 28px;
left: 5px;
transform: skew(-30deg);
z-index: -1;
}
/* Link Colour Override (Needed to Override base css)*/
.vector-menu-portal .vector-menu-content li a, .vector-menu-portal .vector-menu-content li a:visited {
color: #d1bae3;
text-shadow: -1.5px 1.5px #0000008c;
}
/* Indiviual Links */
#mw-panel div.portal div.body ul li {
height: 17px;
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 */
text-align: center;
}
#mw-panel div.portal div.body ul li:hover {
transform: scale(1.05); /* Grow 5% bigger on mouse over, transition above makes it smooth */
/* filter: saturate(0%) brightness(200%); */ /* Make background's outline turn white */ /* Disabled, due to affecting Text poorly */
}
/* Link Click Zone Fill Parent Element & Background Styling */
#mw-panel div.portal div.body ul li a::after {
position: absolute;
top: 1px;
right: 0;
bottom: 1px;
left: 0;
content: "";
background: rgba(236, 213, 255, 0.2);
transform: skew(-30deg);
z-index: -1;
}
/* On Hover Effect */
#mw-panel div.portal div.body ul li:hover > a {
color: white;
}
#mw-panel div.portal div.body ul li a:hover::after {
border-image: linear-gradient(#fff0 50%, #fff) 1;
border-width: 2px;
border-style: solid;
background: rgba(255, 255, 255, 0.3);
}
/* Custom Stuff */
#p-tb { /* Tools Section */
margin-top: 105px;
}
#p-tb::before {
background-image: url(https://endlessdungeon.wiki.gg/images/4/44/LoadingCrystalBotBody.png?20231005154238 );
content: "";
width: 87%;
height: 69px;
position: absolute;
top: -60px;
left: 5px;
z-index: -1;
background-size: contain;
background-repeat: no-repeat;
}
/*┌───────┐*/
/*│ Links │*/
/*└───────┘*/
/* Unvisited Link */
a, .toctogglelabel {
text-decoration: none;
color: #f1c580;
}
/* 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, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited, .mw-parser-output a.external {
color: #f1c580; /* No colour diffrence with unvisited */
}
/*┌────────┐*/
/*│ Footer │*/
/*└────────┘*/
/* Categories */
/* Footer Info Text (Last edited time & copyright notice) */
/*╔════════════════╗*/
/*║ Article styles ║*/
/*╚════════════════╝*/
/*┌─────────────────┐*/
/*│ Article Headers │*/
/*└─────────────────┘*/
/* Article Main Header / H1 */
#firstHeading {
background-image: linear-gradient(to right,rgba(255, 225, 255, 0) 0,rgb(255, 225, 255) 1%,rgba(0, 0, 0, 0) 95%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 2px;
border: none;
}
#firstHeading::after {
background-image: linear-gradient(to right,rgb(221, 177, 107) 0,rgba(221, 177, 107, 0.05) 100%);
transform: skew(-30deg);
content: "";
width: 5%;
height: 15px;
position: absolute;
top: 50px;
left: 25px;
z-index: -1;
}
/* H2 Header */
.mw-parser-output h2 {
background-image: linear-gradient(to right,rgb(255, 225, 255) 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, 225, 255) 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 │*/
/*└──────────────┘*/
/*┌───────────────────────┐*/
/*│ TOC/Table of Contents │*/
/*└───────────────────────┘*/
.vector-body .toc {
background: none;
}
.vector-body .toc h2 {
font-family: 'Khand', sans-serif;
letter-spacing: 0.05em;
}
.tocnumber {
color: #8b7149; /* "Translucent" to distinguish easily from link text */
}
/*┌───────────┐*/
/*│ Refrences │*/
/*└───────────┘*/
/*┌──────────────────────────────┐*/
/*│ Difference between revisions │*/
/*└──────────────────────────────┘*/
/* Context Lines (Unchanged lines before & after changed lines) */
/* Removed Lines (Left) */
/* Added Lines (Right) */
/*┌────────┐*/
/*│ Tabber │*/
/*└────────┘*/
.tabber__tab { /* Unselected tab */
color: #9b9b9b;
}
.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited { /* Currently Selected Tab */
box-shadow: inset 0 -2px 0 0 #f1c580; /* Underline */
color: #f1c580;
}
.tabber__tab:hover, .tabber__tab:active { /* Mouse Hovered / Keyboard Selected Tab */
box-shadow: inset 0 -2px 0 0 white; /* Underline */
color: white;
}
.tabber__header {
background: #00000080;
}
.tabber__indicator {
background: none; /* Added with MW1.39 Underline Active Areas, Disable as we already have one */
}
/*╔══════════════╗*/
/*║ Table styles ║*/
/*╚══════════════╝*/
.wikitable {
background-color: rgba(255, 255, 255, 0.2);
color: #FFF;
margin: 1em 0;
border: 1px solid #a2a9b1;
border-collapse: collapse;
text-align: center;
width: min-content;
margin: auto;
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
/*┌─────────────────┐*/
/*│ Floating Header │*/
/*└─────────────────┘*/
/*┌──────────────────────┐*/
/*│ Special Pages Tables │*/
/*└──────────────────────┘*/
/* Recent Changes */
/* History */
/* Search */
/* Find/Replace */
/* Datatables (Abuse filter management/System messages) */
/* Debug Templates */
/* .CSS Editor */
/* Prefrences */
/*┌────────────────────────┐*/
/*│ 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 #f1c580;
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;
}
/*table.cargoTable.noMerge tr:nth-child(2n+1) {
background: #fff;
}
table.cargoTable.noMerge tr:nth-child(2n) {
background: #eee;
}*/
/*╔══════════════╗*/
/*║ Image styles ║*/
/*╚══════════════╝*/
/* Gallery */
/*┌─────────────┐*/
/*│ Image pages │*/
/*└─────────────┘*/
/*┌───────────┐*/
/*│ Max-Width │*/
/*└───────────┘*/
/* Desktop Side: PiXels */
/* Desktop Side: Percent */
/* Mobile Side*/
/*╔═════════════════╗*/
/*║ Responsive flex ║*/
/*╚═════════════════╝*/
/*┌──────────┐*/
/*│ RF icons │*/
/*└──────────┘*/
/* Iconlink */
/* Icon */
/* Text */
/*┌─────────┐*/
/*│ RF text │*/
/*└─────────┘*/
/*┌───────────────────┐*/
/*│ RFPBox (MainPage) │*/
/*└───────────────────┘*/
.flex-box-basic {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: flex-start;
}
/*╔═════════════════╗*/
/*║ Template styles ║*/
/*╚═════════════════╝*/
/*┌───────────────────┐*/
/*│ Infobox Templates │*/
/*└───────────────────┘*/
.portable-infobox {
background: #00000080; /* ~50% Darken */
width: 350px;
max-width: 100%;
}
.right-float-infobox {
float: right;
width: 275px;
}
.basic-infobox {
width: 300px;
--pi-margin: 0px; /* Override */
}
/* Infobox Bars */
.portable-infobox .pi-secondary-background, .portable-infobox .pi-title {
background-image: linear-gradient(to right,rgba(255, 225, 255, 255) 0,rgba(0,0,0,0) 95%);
background-color:transparent;
font-family: 'Khand', sans-serif;
position: relative;
text-shadow: -2px 2px #00000078;
z-index: 1;
}
.portable-infobox .pi-secondary-background::after, .portable-infobox .pi-title::after {
background-image: linear-gradient(to right,rgb(221, 177, 107) 0,rgba(221, 177, 107, 0.05) 100%);
transform: skew(-30deg);
content: "";
width: 20%;
height: 10px;
position: absolute;
top: 27px;
left: 5px;
z-index: -1;
}
.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 */
}
.pi-250 .pi-image-thumbnail{
max-height: 250px;
object-fit: contain;
}
/*┌──────────────────────┐*/
/*│ Station Map Template │*/
/*└──────────────────────┘*/
.StationMap, .StationMapLayer {
position: absolute;
right: 0px;
}
.StationMapLayer {
opacity: 0.0; /* TO BE ZERO */
}
.StationMapLayer:hover {
opacity: 1;
}
/* Map Layer Clip-paths */
/* Layer: AstralHarbor */
.StationMapLayerAH{
clip-path: polygon(87.98% 31.03%, 84.49% 23.28%, 71.45% 25.75%, 71.14% 29.10%, 63.91% 31.29%, 51.46% 32.71%, 52.03% 38%, 70.3% 37.22%);
}
.StationMapLayerAH:hover{
clip-path: polygon(88.55% 25.22%, 100.43% 21.34%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 21.35%, 70.59% 25.23%, 48.56% 23.04%, 26.53% 25.50%, 27.97% 30.78%, 47.68% 32.72%, 46.82% 38.02%, 86.52% 33.89%);
}
/* Layer: DevotionGarden */
.StationMapLayerDG{
clip-path: polygon(22.76% 36.32%, 46.81% 38.51%, 46.23% 32.72%, 35.2% 32.07%, 27.68% 29.1%, 28.56% 26%, 14.93% 24.32%, 10.88% 29.87%);
}
.StationMapLayerDG:hover{
clip-path: polygon(73.19% 25.74%, 100.43% 21.34%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 21.35%, 70.59% 25.23%, 48.56% 23.04%, 29.72% 25.63%, 13.76% 23.57%, 10.29% 31.31%, 25.36% 36.21%, 47.97% 38.27%, 54.07% 33.37%, 68.55% 30.79%);
}
/* Layer: HeadQuarters */
.StationMapLayerHQ{
clip-path: polygon(36.38% 19.03%, 17.82% 23.03%, 31.16% 25.75%, 43.9% 24.2%, 55.51% 24.07%, 70.59% 25.87%, 82.76% 23.42%, 63.34% 18.64%);
}
.StationMapLayerHQ:hover{
clip-path: polygon(74.06% 25.74%, 99.85% 22.12%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 10% 22%, 27.11% 25.62%, 27.97% 29.62%, 46.53% 33.61%, 56.96% 33.22%, 70.30% 30.52%);
}
/* Layer: LaborColony */
.StationMapLayerLC{
clip-path: polygon(35.51% 57.61%, 17.24% 54%, 32.32% 51.04%, 43.90% 53.10%, 55.22% 53.1%, 68.85% 51.03%, 81.02% 53.36%, 61.02% 57.87%);
}
.StationMapLayerLC:hover{
clip-path: polygon(52.61% 39.03%, 100.43% 35.15%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 35.03%, 50.01% 39.30%, 42.76% 43.69%, 34.07% 45.11%, 19.85% 53.63%, 47.97% 58.92%, 82.17% 53.89%, 71.74% 51.04%, 68.56% 45.37%, 52.9% 43.3%);
}
/* Layer: ProceduralFactory */
.StationMapLayerPF{
clip-path: polygon(28.26% 39.93%, 46.23% 38.65%, 45.36% 43.17%, 33.76% 44.71%, 27.1% 47.04%, 27.11% 50.77%, 14.93% 52.85%, 11.45% 45.87%);
}
.StationMapLayerPF:hover{
clip-path: polygon(52.61% 39.03%, 100.43% 35.15%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 35.03%, 50.01% 39.3%, 35.22% 39.3%, 14.07% 43.18%, 12.31% 53.63%, 28.84% 50.92%, 49.71% 54.28%, 71.74% 51.04%, 68.56% 45.37%, 52.9% 43.3%);
}
/* Layer: SecurityVault */
.StationMapLayerSV{
clip-path: polygon(87.1% 45.61%, 83.91% 52.97%, 70.87% 50.65%, 71.44% 47.03%, 64.78% 44.59%, 52.33% 43.54%, 52.61% 38.91%, 72.32% 40.06%);
}
.StationMapLayerSV:hover{
clip-path: polygon(71.74% 50.38%, 99.85% 56.57%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.15% 36.97%, 46.24% 38.4%, 45.66% 42.92%, 34.65% 44.21%, 27.1% 46.66%, 30.58% 50.66%, 40.44% 52.60%, 57.54% 52.85%);
}
/* Layer: HiveMind */
.StationMapLayerHM{
clip-path: polygon(53.19% 77.35%, 74.93% 76.06%, 87.68% 69.61%, 84.78% 64.07%, 72.03% 65.74%, 72.61% 68.83%, 64.21% 72.07%, 53.19% 73.61%);
}
.StationMapLayerHM:hover{
clip-path: polygon(85.07% 63.54%, 100.14% 63.28%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 57.87%, 69.14% 65.5%, 50.3% 63.05%, 30.59% 65.24%, 27.10% 68.72%, 35.8% 72.21%, 46.52% 72.73%, 46.23% 78.01%, 81.31% 74.41%, 88.26% 67.95%);
}
/* Layer: LifeIncubator */
.StationMapLayerLI{
clip-path: polygon(25.94% 76.19%, 45.07% 77.22%, 46.52% 73.1%, 36.95% 72.45%, 28.26% 69.36%, 26.82% 65.6%, 15.22% 63.56%, 13.48% 71.29%);
}
.StationMapLayerLI:hover{
clip-path: polygon(81.01% 63.8%, 100.14% 63.28%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 57.87%, 69.14% 65.5%, 50.3% 63.05%, 30.59% 65.24%, 14.64% 63.04%, 9.13% 74.92%, 46.81% 77.63%, 50.87% 74.14%, 71.74% 70.54%, 71.74% 65.24%);
}
/* Layer: TranscendanceCenter */
.StationMapLayerTC{
clip-path: polygon(60.43% 58.51%, 81.88% 63.03%, 66.52% 65.36%, 54.92% 63.29%, 43.91% 63.17%, 32.04% 65.22%, 18.99% 62.78%, 36.09% 59.16%);
}
.StationMapLayerTC:hover{
clip-path: polygon(81.01% 63.8%, 100.14% 63.28%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 100.44% 57.87%, 26.53% 58.4%, 16.96% 63.3%, 27.68% 65.24%, 29.42% 70.79%, 50.87% 74.14%, 71.74% 70.54%, 71.74% 65.24%);
}
/* Layer: Core */
.StationMapLayerCore{
clip-path: polygon(12.9% 92.19%, 31.16% 97.61%, 66.52% 98.13%, 86.81% 91.68%, 86.81% 83.55%, 63.34% 78.89%, 37.54% 78.91%, 14.35% 83.55%);
}
.StationMapLayerCore:hover{
clip-path: polygon(12.9% 97.87%, 99.85% 97.99%, 100.14% -0.11%, -0.15% -0.06%, 0.15% 14.51%, 23.33% 17.61%, 49.14% 18.91%, 84.2% 17.23%, 100.15% 15.29%, 99.86% 78.26%, 12.61% 78.53%);
}
/*┌─────────────────┐*/
/*│ Icon Templates │*/
/*└─────────────────┘*/
/* Ability Icons */
.IconAbility {
position: relative;
width: 50px;
height: 50px;
}
.IconAbilityBorder {
position: absolute;
top: 67%; left: 14%;
transform: translate(-50%, -50%);
height: 36px;
width: 36px;
rotate: 45deg;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 0%, rgb(255, 255, 255) 90%);
/* Zed Colours only Currently */
}
.IconAbilityCore {
position: absolute;
top: 66%;
left: 17%;
transform: translate(-50%, -50%);
height: 28px;
width: 28px;
rotate: 45deg;
background: linear-gradient(90deg, rgba(214,185,142,1) 0%, rgba(171,123,36,1) 100%);
border: solid #3c1c09 2.5px;
}
.IconAbilityImage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: invert(1);
}
/*┌──────────────────┐*/
/*│ Navbox Templates │*/
/*└──────────────────┘*/
/*┌─────────────┐*/
/*│ Site notice │*/
/*└─────────────┘*/
/*┌────────┐*/
/*│ <Math> │*/
/*└────────┘*/
/*┌────────────────┐*/
/*│ Misc Templates │*/
/*└────────────────┘*/
/*╔══════════════════╗*/
/*║ Extension styles ║*/
/*╚══════════════════╝*/
/*┌────────────────┐*/
/*│ Wiki.gg Header │*/
/*└────────────────┘*/
/*┌─────────────────────────┐*/
/*│ Echo (Alerts & Notices) │*/
/*└─────────────────────────┘*/
/* Text */
/* Background */
/* Icons */
/* Prefrences Page */
/* Notifications Page */
/*╔═════╗*/
/*║ END ║*/
/*╚═════╝*/