MediaWiki:Common.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.
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
/***********************************************************************************************************
* css reset for browser default rules and MediaWiki internal rules
***********************************************************************************************************/
* {
outline: 0;
}
table {
white-space: unset;
/* be set to `no-wrap` in MW internal css */
}
html {
font-size: 16px;
/* reset rem size */
}
body {
overflow-y: unset;
}
pre {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
border: 0 solid transparent;
}
table {
display: table;
white-space: unset;
}
body,
code {
background: none;
}
/***********************************************************************************************************
* css for wiki.gg top bar and footer bar
***********************************************************************************************************/
/********* wiki.gg header *********/
header#wikigg-header #p-personal ul {
white-space: nowrap;
/* for "log out" */
}
header#wikigg-header #p-personal .vector-menu-content #pt-anonuserpage,
header#wikigg-header #p-personal .vector-menu-content #pt-userpage a {
/* user avatar icon position fix */
padding-top: 0;
background-position: left center;
}
/********* wiki.gg footer *********/
footer#wikigg-footer .footer-right,
footer#wikigg-footer .footer-left {
margin: 0;
text-align: center;
}
@media screen and (max-width: 479px) {
footer#wikigg-footer .footer-right,
footer#wikigg-footer .footer-left {
width: auto;
}
}
@media screen and (max-width: 359px) {
footer#wikigg-footer .footer-middle {
/* hide wiki.gg logo to make room to avoid text wrapping */
display: none;
}
}
/***********************************************************************************************************
* theming vars.
***********************************************************************************************************/
:root {
/*** top site logo ***/
--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
--theme-site-logo-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
--theme-site-logo-width: 554px;
--theme-site-logo-height: 200px;
/*** site background ***/
--theme-site-background: #12011c url(/images/8/80/Site-background.jpg) top right / cover no-repeat fixed;
/* common "box" style */
--theme-box-border-width: 1px;
--theme-box-border-style: solid;
--theme-box-border-color: #2d8e90;
--theme-box-border-radius: 0px;
--theme-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
--theme-box-back-backdrop-filter: blur(5px);
--theme-box-back-background: rgba(0, 0, 0, 0.9);
/* be used in multi-layer background, so we can't simpy use background-color */
--theme-box-background: linear-gradient(rgba(46, 144, 145, 0.15), rgba(46, 144, 145, 0.15));
--theme-background: var(--theme-box-background), var(--theme-box-back-background);
/*** text color ***/
--theme-text-color: #e5ffff;
--theme-text-color-hover: var(--theme-text-color);
--theme-text-color-note: #8c8a7f;
--theme-text-color-em: #54f2c5;
--theme-heading-color: #e5ffff;
--theme-heading-background: rgba(46, 144, 145, 0.3);
--theme-text-color-placeholder: #808080;
--theme-control-text-color: #333;
--theme-control-text-color-hover: #333;
/*** link text color ***/
--theme-link-color: #58dfff;
--theme-link-color-hover: #80e6ff;
--theme-link-color-visited: #4aceee;
--theme-link-color-redlink: #e9257f;
/* default color for icons */
--theme-icon-color: var(--theme-text-color);
--theme-icon-color-redlink: var(--theme-link-color-redlink);
--theme-icon-color-hover: var(--theme-link-color-hover);
/* default common color */
--theme-border-color: #37b075;
--theme-border-color-accent: #e88e00;
--theme-highlight-background: rgba(46, 144, 145, 0.3);
/* dropdown menu */
--theme-dropdown-border: 1px solid var(--theme-box-border-color);
--theme-dropdown-background: linear-gradient(rgba(46, 144, 145, 0.15), rgba(46, 144, 145, 0.2)), rgba(0, 0, 0, 0.8);
/* for wide table */
--theme-wide-table-shadow-color: #rgba(46, 144, 145, 0.5);
/** notification **/
--theme-notice-red-text-color: #ff001f;
--theme-notice-orange-text-color: #ffab5b;
}
/* sidebar */
div#mw-panel {
--theme-link-color: var(--theme-heading-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-text-color);
--theme-border-width: 0;
--theme-gap: 4px;
--theme-heading-color: #2d8e90;
--theme-icon-color: #2d8e90;
}
#catlinks {
--theme-background: none;
--theme-box-border-radius: 0;
--theme-border-color-accent: var(--theme-box-border-color);
}
#footer {
--theme-background: linear-gradient( to bottom, rgba(46, 144, 145, 0.03), rgba(0, 0, 0, 0) 15px), rgba(46, 144, 145, 0.2);
}
/* navbar */
#mw-head {
--theme-link-color: #2e9294;
--theme-icon-color: #2e9294;
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-text-color);
--theme-background: rgba(46, 144, 145, 0.35);
--theme-background-shadow: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent 6px);
--theme-tab-background: none;
--theme-tab-background-selected: none;
--theme-tab-border-color: transparent;
--theme-tab-border-color-selected: transparent;
}
#mw-head #p-search {
--theme-link-color: var(--theme-text-color);
--theme-link-color-hover: #01C2EC;
--theme-link-color-focus: #01C2EC;
--theme-background: var(--theme-box-background);
--theme-border-color: var(--theme-box-border-color);
--theme-border-color-hover: var(--theme-box-border-color);
--theme-border-color-focus: var(--theme-border-color-hover);
--theme-shadow: none;
--theme-shadow-focus: var(--theme-box-shadow);
}
/* search result suggestion */
body > .suggestions {
--theme-border-color: var(--theme-box-border-color);
--theme-rule-color: var(--theme-box-border-color);
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-text-color);
--theme-link-color-hover: var(--theme-text-color-hover);
}
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, etc.
***********************************************************************************************************/
/** Font **/
html,
body {
font-family: Helvetica, Arial, sans-serif;
color: var(--theme-text-color);
}
html {
background: var(--theme-site-background);
}
body {
font-size: 14px;
line-height: 1.5;
}
ul,
ol {
margin: 2px 0 2px 1.5em;
}
li {
margin: 0 0 2px 0;
}
pre,
code,
.mw-code {
color: var(--theme-text-color);
border: 1px solid var(--theme-border-color);
}
/** link color **/
/* Self-links aren't real links, they're not clickable.
* Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
* We should not use :not(.selflink) since it increases the priority and make it is difficult to override
* link styles for certain elements (e.g. in wiki.gg header).
*/
a,
a.selflink:hover,
a.selflink:active {
text-decoration: none;
color: var(--theme-link-color);
}
a:visited {
color: var(--theme-link-color-visited);
}
a:hover,
a:active {
text-decoration: underline;
color: var(--theme-link-color-hover);
}
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new,
a.new:visited {
color: var(--theme-link-color-redlink);
}
/*********************************************************************************************************/
input,
button {
color: var(--theme-control-text-color);
caret-color: var(--theme-text-color);
}
input[type=submit] {
color: var(--theme-control-text-color);
}
::placeholder {
color: var(--theme-text-color-placeholder);
}
/* Removes VisualEdit button */
#ca-ve-edit {
display: none;
}
/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var(--theme-link-color);
}
/* Text color */
.i .note,
.note-text {
color: var(--theme-text-color-note);
}
.pixel img,
.pixel,
#mw-imagepage-section-filehistory img {
image-rendering: pixelated;
/*for chrome*/
image-rendering: crisp-edges;
/*for firefox*/
}
.small {
font-size: 85%;
}
.fullwidth,
.full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
text-align: center;
}
.alignleft,
.align-left {
text-align: left;
}
.alignright,
.align-right {
text-align: right;
}
/* clear fix for float block */
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* References smaller text than main */
.references {
font-size: 90%;
}
/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
font-size: 14px !important;
}
/* Facilitate inline scary transclusion */
.scary-transclusion p,
.scary-transclusion .mw-parser-output {
display: inline;
}
/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child {
display: none;
}
/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
content: " ";
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
hr.space {
height: 4px;
background: none;
border: 0;
}
.page-content .vertical-align-top * {
vertical-align: top;
}
.page-content .vertical-align-bottom * {
vertical-align: bottom;
}
/* Drowning Table No Border */
.drowning-table-no-border {
border: none;
}
/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
max-width: unset;
}
/* Box at the top of all pages when the user has a new message on their User_talk: page */
.usermessage {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
:root {
--layout-topbar-height: 35px;
/* height of wiki.gg topbar */
--layout-sidebar-width: 170px;
/* width of side navbar, without gap */
--layout-sidespace: 24px;
/* whitespace width on most left and most right */
--layout-box-gap: 12px;
--layout-box-border-radius: 5px;
--layout-logo-scale: 1;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) * 2);
--dropdown-item-padding-x: 12px;
--dropdown-item-padding-y: 4px;
}
/**** Main Layout START ***********************************************************/
/**
* Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
*/
html,
body {
min-height: 100%;
}
html {
height: 100%;
scroll-padding-top: calc(var(--layout-topbar-height) + 10px);
}
body {
height: auto;
}
/*** main grid container ***/
body {
/* self */
box-sizing: border-box;
/* grid */
display: grid;
grid-template-columns: [body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width) [aside-right nav-left content-left footer-left] minmax(0, 1fr) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end nav-start aside-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [aside-end page-end] 0fr [body-end];
gap: 0 var(--layout-box-gap);
}
/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
* div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
*/
body > .content-wrapper,
#mw-navigation {
display: contents;
}
/** unused, hide them **/
#mw-head-base,
#mw-navigation > h2 {
display: none;
}
/** side nav bar **/
#mw-panel {
grid-column: aside-left/aside-right;
grid-row: aside-start/aside-end;
margin-bottom: var(--layout-box-gap);
float: none;
width: unset;
padding: 0;
}
/** nav **/
#mw-head {
grid-column: nav-left/nav-right;
grid-row: nav-start/nav-end;
}
/** content **/
.mw-body {
grid-column: content-left/content-right;
grid-row: content-start/content-end;
}
/* For some page such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child {
grid-column: body-left/body-right;
grid-row: page-start/page-end;
}
/** #footer: content footer **/
#footer {
grid-column: footer-left/footer-right;
grid-row: footer-start/footer-end;
margin: 0;
z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
grid-column: content-left/content-right;
grid-row: nav-start/footer-end;
height: 100%;
}
/** wiki.gg footer bar **/
body > footer {
grid-column: body-left/body-right;
grid-row: page-end/body-end;
}
/*** logo block. It is absolute position ***/
#p-logo {
position: absolute;
width: 100%;
height: var(--layout-logo-box-height);
left: 0;
top: var(--layout-topbar-height);
background: var(--theme-site-logo-image) center center/var(--theme-site-logo-width) auto no-repeat;
display: flex;
align-items: center;
justify-content: center;
filter: var(--theme-site-logo-filter);
}
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
* I still don't know why, but move background to #p-logo can avoid this issue.
*/
#p-logo .mw-wiki-logo {
width: var(--theme-site-logo-width);
height: var(--theme-site-logo-height);
margin: auto;
background: none;
/* logo flicker fix */
}
/**** Main Layout END ***********************************************************/
/********* side panel START *********/
#mw-panel {
--list-body-font-size: 14px;
--list-body-padding-x: 6px;
--list-body-padding-y: 3px;
}
#mw-panel a {
text-decoration: none;
}
/* section box */
#mw-panel .portal {
margin: 0 0 var(--layout-box-gap) 0;
padding: 0;
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
background: var(--theme-heading-background);
border-left: 6px solid var(--theme-box-border-color);
margin: 0;
padding: 6px 10px;
font-size: 16px;
line-height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--theme-heading-color);
}
/* show the heading of first section */
#mw-panel #p-logo + .portal .vector-menu-heading {
display: flex;
}
/* arrow icon */
#mw-panel .portal .vector-menu-heading::after {
content: "";
display: block;
background: none;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-icon-color) transparent;
border-width: 0 5px 6px;
margin-top: 2px;
flex: 0 0 auto;
}
#mw-panel .portal .vector-menu-heading:hover::after {
border-color: var(--theme-icon-color-hover) transparent;
}
#mw-panel .portal.collapsed .vector-menu-heading::after {
transform: scaleY(-1);
}
/* list body */
#mw-panel .portal .body {
background: none;
border: 0;
padding: 0;
margin: 0;
border-top: var(--theme-border-width) solid var(--theme-border-color);
}
#mw-panel .portal .body ul {
padding: var(--theme-gap) 4px 4px;
backdrop-filter: blur(5px);
}
#mw-panel .portal .body li {
margin: 0;
padding: 0;
font-size: var(--list-body-font-size);
line-height: inherit;
}
#mw-panel .portal .body li:hover {
background: var(--theme-highlight-background);
}
#mw-panel .portal .body li a {
display: block;
padding: var(--list-body-padding-y) var(--list-body-padding-x);
color: var(--theme-link-color);
}
#mw-panel .portal .body li a:visited {
color: var(--theme-link-color-visited);
}
#mw-panel .portal .body li a:hover {
color: var(--theme-link-color-hover);
}
/* "Atom" RSS Feed */
#mw-panel .portal .body li a.feedlink {
text-indent: calc(var(--list-body-font-size) + 2px);
background-position: var(--list-body-padding-x) center;
/* align icon with other text */
}
/********* side panel END *********/
/********* main content box *********/
/****** navbar (#mw-head) ******/
/* reset */
#mw-head * {
float: unset;
font-size: unset;
line-height: unset;
}
/* tabs layout */
#mw-head {
--layout-padding: 4px;
--layout-gap: 6px;
--tab-padding-x: 12px;
--tab-padding-y: 5px;
--icon-size: 1em;
padding: 0;
background: var(--theme-background);
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
}
#mw-head #left-navigation,
#mw-head #right-navigation {
float: none;
flex: 1 1 auto;
margin: 0;
display: flex;
align-items: flex-end;
}
#mw-head #left-navigation::before,
#mw-head #left-navigation::after,
#mw-head #right-navigation::before,
#mw-head #right-navigation::after {
content: "";
display: block;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
background: var(--theme-background-shadow);
}
#mw-head #left-navigation {
justify-content: flex-start;
}
#mw-head #right-navigation {
justify-content: flex-end;
}
#mw-head #left-navigation::before,
#mw-head #right-navigation::after {
flex: 0 0 var(--layout-padding);
}
#mw-head #left-navigation::after,
#mw-head #right-navigation::before {
flex: 1 1 auto;
}
/*** tabs of navbar ***/
/* reset */
#mw-head .vector-menu,
#mw-head .vector-menu * {
background: none;
}
/* tabs list */
#mw-head .vector-menu-tabs {
height: unset;
padding: unset;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: flex-end;
}
/* tab */
#mw-head {
--theme-tab-border-style: solid;
--theme-tab-border-width: 1px;
--theme-border-bottom-style: solid;
--theme-border-bottom-width: 1px;
--theme-border-bottom-color: var(--theme-tab-border-color-selected);
--theme-border-bottom-color-selected: transparent;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
/* outer box */
background: var(--theme-tab-background);
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
border-radius: var(--theme-box-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
margin-right: var(--layout-gap);
/* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item::after,
#mw-head .vector-menu-dropdown::after {
/* gap */
content: "";
display: block;
width: var(--layout-gap);
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
position: absolute;
left: 100%;
background: var(--theme-background-shadow);
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* inner box */
height: auto;
margin: 0;
padding: var(--tab-padding-y) var(--tab-padding-x);
border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color);
border-bottom: 0;
border-radius: var(--theme-box-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: var(--theme-link-color);
background: var(--theme-background-shadow);
font-weight: bold;
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a.new,
#mw-head .vector-menu-dropdown .vector-menu-heading.new {
color: var(--theme-link-color-redlink);
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
/* outer box: selected */
background: var(--theme-tab-background-selected);
border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color-selected);
border-bottom: 0;
}
#mw-head .vector-menu-tabs .mw-list-item.selected:after {
/* gap */
bottom: 0;
border-left: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color-selected);
/* x-position offset */
}
#mw-head .vector-menu-tabs .mw-list-item.selected a {
/* inner box: selected */
border: 0;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color-selected);
background: none;
color: var(--theme-text-color);
}
/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* tab label */
position: relative;
display: flex;
align-items: center;
gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
/* arrow icon */
background: none;
opacity: unset;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-icon-color) transparent;
border-width: 6px 5px 0;
margin-top: 2px;
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
border-color: var(--theme-icon-color-hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
/* reset */
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: block;
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--theme-link-color-hover);
}
/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: 1.5em;
/* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent;
/**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
margin: calc((1.5em - var(--icon-size)) / 2);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
display: none;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
transform-origin: 50% calc(var(--icon-size) / 2 * 1.125);
}
#mw-head .vector-menu-tabs #ca-watch.icon {
/* line star */
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M28.61,11.67H20l-2.66-8.2a1.39,1.39,0,0,0-2.64,0L12,11.67H3.39a1.39,1.39,0,0,0-.82,2.51l7,5.07L6.89,27.46a1.39,1.39,0,0,0,1.32,1.82A1.43,1.43,0,0,0,9,29l7-5.07L23,29a1.43,1.43,0,0,0,.81.27,1.39,1.39,0,0,0,1.32-1.82l-2.66-8.21,7-5.07A1.39,1.39,0,0,0,28.61,11.67Zm-7.34,6-1.17.86.44,1.38,2.09,6.41-5.45-4L16,21.46l-1.18.86-5.45,4,2.09-6.41.44-1.38-1.17-.86-5.45-4h8.19l.45-1.38L16,5.89l2.08,6.4.45,1.38h8.19Z'/%3E%3C/g%3E%3C/svg%3E");
}
#mw-head .vector-menu-tabs #ca-unwatch.icon {
/* solid star */
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M28.61,11.67H20l-2.66-8.2a1.39,1.39,0,0,0-2.64,0L12,11.67H3.39a1.39,1.39,0,0,0-.82,2.51l7,5.07L6.89,27.46a1.39,1.39,0,0,0,1.32,1.82A1.43,1.43,0,0,0,9,29l7-5.07L23,29a1.43,1.43,0,0,0,.81.27,1.39,1.39,0,0,0,1.32-1.82l-2.66-8.21,7-5.07A1.39,1.39,0,0,0,28.61,11.67Z'/%3E%3C/g%3E%3C/svg%3E");
}
/*** search form ***/
#mw-head #p-search {
/* navbar common border bottom */
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
background: var(--theme-background-shadow);
margin: 1px 0 0 0;
align-self: center;
}
#mw-head #p-search form {
margin: 0;
}
#mw-head #p-search .vector-search-box-input {
border-width: 1px;
border-style: solid;
border-color: var(--theme-border-color);
color: var(--theme-text-color);
background: var(--theme-background);
box-shadow: var(--theme-shadow);
height: 26px;
padding: 0 26px 0 4px;
}
#mw-head #p-search .vector-search-box-input:hover {
border-color: var(--theme-border-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus {
border-color: var(--theme-border-color-focus);
box-shadow: var(--theme-shadow-focus);
outline: 0;
z-index: 1100;
/* .suggestions: 1099 */
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
color: var(--theme-text-color-note);
}
#mw-head #p-search .mw-searchButton {
opacity: 0;
}
#mw-head #p-search .searchButton {
width: 26px;
min-width: unset;
opacity: 1;
background-image: none;
--mask: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E search %3C/title%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0z'/%3E%3C/svg%3E%0A") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 18px 18px;
mask-size: 18px 18px;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head #p-search #searchform:hover .searchButton {
background-color: var(--theme-link-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
background-color: var(--theme-link-color-focus);
}
/*** search result suggestions ***/
.suggestions {
background: var(--theme-background);
box-sizing: border-box;
margin-top: 0;
box-shadow: var(--theme-box-shadow);
backdrop-filter: var(--theme-box-back-backdrop-filter);
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: none;
}
.suggestions .suggestions-results {
border: 1px solid var(--theme-border-color);
border-top: 0;
border-bottom-color: var(--theme-rule-color);
}
.suggestions .suggestions-results:empty {
border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
color: var(--theme-text-color);
}
.suggestions .suggestions-result {
padding: 1px 4px;
}
.suggestions .suggestions-special {
margin: 0;
padding: 2px 4px 4px;
border: 1px solid var(--theme-border-color);
border-top: 0;
border-radius: var(--theme-box-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: var(--theme-link-color);
}
.suggestions .suggestions-result-current {
background: var(--theme-highlight-background);
color: var(--theme-link-color-hover);
}
.suggestions .suggestions-result-current .special-label,
.suggestions .suggestions-result-current .special-query {
color: var(--theme-link-color-hover);
}
/**** main content box ****/
/* font */
.vector-body {
font-size: unset;
/* reset */
line-height: 1.7142857143;
}
/** layout **/
#content {
color: var(--theme-text-color);
padding: 0;
display: flex;
flex-direction: column;
background: var(--theme-box-background);
--theme-heading-rule-color-h1: var(--theme-border-color);
--theme-heading-rule-color-h2: var(--theme-border-color);
--layout-padding-x: 24px;
--layout-padding-y: 16px;
}
.content-body {
flex: 1 1 auto;
}
.content-body > main {
align-self: stretch;
padding: var(--layout-padding-y) var(--layout-padding-x);
}
#bodyContent {
display: flex;
flex-direction: column;
position: unset;
}
/** main heading section **/
#firstHeading {
overflow: hidden;
/* override mw internal css, fix scroll-x issue for narrow width */
}
/** the " < rootpage < page " crumb **/
#contentSub,
#contentSub2 {
margin: 0;
color: var(--theme-text-color-note);
font-size: 12px;
line-height: 20px;
}
#contentSub .subpages {
color: transparent;
line-height: 20px;
font-size: 0;
}
#contentSub .subpages a {
font-size: 12px;
vertical-align: middle;
display: inline-flex;
align-items: center;
padding-left: 4px;
}
#contentSub .subpages a::before {
content: "";
display: inline-block;
height: 4px;
width: 4px;
border-color: var(--theme-icon-color);
border-style: solid;
border-width: 0 0 2px 2px;
margin: 0 2px 0 0;
transform: rotate(45deg);
}
#contentSub::after {
/* the spacing and line between heading section and content body box */
content: "";
display: block;
height: 0;
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: 15em;
}
/*** "category:" box ***/
#catlinks {
background: var(--theme-background);
border: 1px solid var(--theme-border-color-accent);
border-radius: var(--theme-box-border-radius);
margin: var(--layout-padding-y) 0 0 0;
padding: 0.5em 1em;
}
/*** ads ***/
div.games-showcase-header {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0;
}
div.games-showcase-footer {
margin: 0;
padding: 0 var(--layout-padding-x) var(--layout-padding-y);
}
.content-body > .games-showcase-sidebar {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0 0;
}
.games-showcase-header img,
.games-showcase-footer img {
height: 100%;
width: auto;
object-fit: contain;
}
@media screen and (max-width: 1100px) {
.games-showcase-header img,
.games-showcase-footer img {
height: auto !important;
width: 100% !important;
object-fit: contain;
}
}
@media screen and (max-width: 926px) {
.games-showcase-header img,
.games-showcase-footer img {
object-position: 50%;
height: 105px !important;
width: 100% !important;
object-fit: none !important;
}
}
aside.games-showcase-sidebar div.sidebar-showcase {
padding: 0 0 var(--layout-padding-y) 0;
}
/**** #footer (copyright info) ****/
#footer {
background: var(--theme-background);
padding: 16px 24px;
border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
position: relative;
/* grid */
display: grid;
grid-template-columns: [l] 1fr 0fr [r];
grid-template-rows: [t] auto auto [b];
z-index: 0;
/* covered by content */
}
.mw-footer li {
color: var(--theme-text-color);
}
#footer a {
color: var(--theme-link-color);
}
#footer a:hover {
color: var(--theme-link-color-hover);
}
#footer-info {
font-size: 12px;
display: contents;
}
#footer ul li {
font-size: inherit;
line-height: 1.5;
padding: 0;
}
#footer-icons {
grid-column: span 1/r;
grid-row: t/b;
place-self: end;
}
#footer #footer-info-lastmod {
grid-column: l/span 1;
grid-row: t/span 1;
place-self: start;
margin-bottom: 1em;
}
#footer #footer-info-copyright {
grid-column: l/span 1;
grid-row: span 1/b;
place-self: end stretch;
position: relative;
padding-right: 100px;
}
#footer-info-copyright img {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
width: auto;
}
#footer-places,
#footer > div {
display: none;
}
/**** background box for nav+content+#footer ****/
#mw-page-base {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-back-background);
z-index: -1;
}
#mw-head,
#content,
#footer {
box-sizing: border-box;
background-clip: padding-box;
border: var(--theme-box-border-width) solid transparent;
margin: 0;
}
#mw-head {
border-bottom-width: 0;
}
#content {
border-top-width: 0;
border-bottom-width: 0;
}
#footer {
border-top-width: 0;
}
/****** responsive Layout ******/
@media screen and (max-width: 1800px) {
:root {
--layout-sidespace: 0px;
/* whitespace width on most left and most right,must with "px" */
}
}
/* screen and (max-width: 1800px) */
@media screen and (max-width: 1365px) {
:root {
--layout-logo-scale: 0.75;
}
/* change layout */
body {
grid-template-columns: [body-left] 0 [aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right] 0 [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end aside-start] auto [aside-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
}
/* re-style navbar */
#mw-panel {
display: flex;
align-items: flex-end;
padding: 0 var(--layout-box-gap);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
/* Make #p-logo be positioned relative to #mw-panel. By this way, we can safely apply filter/backdrop-filter on #mw-panel */
position: relative;
z-index: 1;
}
#mw-panel .portal {
background: none;
box-shadow: none;
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#mw-panel .portal .vector-menu-heading {
padding: 9px 12px;
border: 0;
border-radius: 0;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
border-width: 6px 5px 0;
/* change arrow direction */
margin-left: 4px;
}
#mw-panel .portal .body {
display: none !important;
/* !important is required, since there is inline-css from sidebar collapse/expand */
position: absolute;
left: 0;
top: 100%;
width: max-content;
min-width: 8em;
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-box-shadow);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#mw-panel .portal .body li a {
padding: 6px 12px;
}
#mw-panel .portal.expanded .vector-menu-heading,
#mw-panel .portal:hover .vector-menu-heading {
background: var(--theme-highlight-background);
border-radius: 0;
}
#mw-panel .portal.expanded .vector-menu-heading::after,
#mw-panel .portal:hover .vector-menu-heading::after {
transform: scaleY(-1);
}
#mw-panel .portal.expanded .body,
#mw-panel .portal:hover .body {
display: block !important;
}
/* logo: smaller, and position relative to #mw-panel */
#p-logo {
background-size: calc(var(--theme-site-logo-width) * var(--layout-logo-scale)) auto;
top: calc(0px - var(--layout-logo-box-height));
}
#p-logo .mw-wiki-logo {
width: calc(var(--theme-site-logo-width) * var(--layout-logo-scale));
height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale));
}
/* search: move to sidebar nav box ("main nav bar") */
#mw-head #p-search {
border-bottom: 0;
background: none;
position: absolute;
right: var(--layout-box-gap);
/* inner height of #mw-panel ( line height of .vector-menu-heading(18px) + padding-top of .vector-menu-heading(9px) + padding-bottom of .vector-menu-heading(0px) ) */
--layout-height-of-panel: 36px;
/* outer height of #p-search>#searchform ( css height of .vector-search-box-input ) */
--layout-height-of-search-form: 26px;
top: calc(0px - var(--theme-box-border-width) * 2 - var(--layout-box-gap) - var(--layout-height-of-panel) / 2 - var(--layout-height-of-search-form) / 2);
/* offset */
z-index: 2;
}
.vector-search-box-inner {
width: 50vw;
}
#mw-head #right-navigation #p-cactions {
margin-right: 0;
}
/* "more" menu in #right-navigation */
#mw-head #right-navigation .vector-menu-dropdown {
margin-right: 0;
}
#mw-head #right-navigation .vector-menu-dropdown::after {
display: none;
}
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content {
left: auto;
right: 0;
}
}
/* screen and (max-width: 1365px) */
@media screen and (max-width: 900px) {
:root {
--layout-logo-scale: 0.5;
--layout-logo-box-height: calc( var(--theme-site-logo-height) * 0.5 + 20px);
--layout-box-gap: 6px;
}
/* change layout */
body {
grid-template-columns: [body-left aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right body-right];
}
#mw-page-base,
#mw-panel,
#mw-head,
#content,
#footer {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
/* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
#content {
--layout-padding-x: 12px;
--layout-padding-y: 12px;
}
/* icon navbar tabs */
#mw-head {
top: unset;
/* reset */
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
--icon-size: 1.5em;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: 1.5em;
/* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent;
/**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-list-item a::before,
#mw-head .vector-menu-dropdown .vector-menu-heading::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
margin: calc((1.5em - var(--icon-size)) / 2);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span {
display: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
display: none;
}
#ca-edit {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M29.12,6.05,26,2.88a3,3,0,0,0-4.24,0L6.29,18.29a3.06,3.06,0,0,0-.72,1.18L2.08,29.92l10.46-3.49a3.15,3.15,0,0,0,1.17-.72L29.12,10.29a3,3,0,0,0,0-4.24Zm-21,13.28,8.75-8.74,1.58,1.58L9.67,20.92ZM18.24,9.17l1.59-1.58,4.58,4.58-1.58,1.59ZM7.1,21.19l3.72,3.71L5.25,26.75Zm5.57,2.73-1.59-1.59,8.75-8.74,1.58,1.58Zm15-15-1.88,1.88L21.24,6.17l1.88-1.88A1,1,0,0,1,23.83,4a1,1,0,0,1,.71.29l3.17,3.18a1,1,0,0,1,.29.7A1,1,0,0,1,27.71,8.88Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-view,
#ca-view-foreign {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M30.89,15.54A17,17,0,0,0,16,6,17,17,0,0,0,1.11,15.54L.87,16l.24.46A17,17,0,0,0,16,26a17,17,0,0,0,14.89-9.54l.24-.46ZM24,16a8,8,0,1,1-8-8A8,8,0,0,1,24,16ZM3.14,16a16.47,16.47,0,0,1,4.14-4.89,10,10,0,0,0,0,9.78A16.47,16.47,0,0,1,3.14,16Zm21.58,4.89a10,10,0,0,0,0-9.78A16.47,16.47,0,0,1,28.86,16,16.47,16.47,0,0,1,24.72,20.89Z'/%3E%3Cpath d='M16,20a4,4,0,1,0-4-4A4,4,0,0,0,16,20Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,16,14Z'/%3E%3C/g%3E%3C/svg%3E");
}
#left-navigation li[id^=ca-nstab-] {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='12 15 11 15 11 17 12 17 20 17 21 17 21 15 20 15 12 15'/%3E%3Cpolygon points='12 19 11 19 11 21 12 21 15 21 16 21 16 19 15 19 12 19'/%3E%3Cpath d='M20.41,3H5V26a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V9.59ZM20,5.41,24.59,10H21a1,1,0,0,1-1-1ZM24,27H8a1,1,0,0,1-1-1V5H18V9a3,3,0,0,0,3,3h4V26A1,1,0,0,1,24,27Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-history {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/%3E%3Cpath d='M17,7H15v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-talk {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
}
#t-contributions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
}
#ca-addsection {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-viewsource {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
}
#p-variants {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
}
#p-cactions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,13a3,3,0,1,0,3,3A3,3,0,0,0,16,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,16,17Z'/%3E%3Cpath d='M24,13a3,3,0,1,0,3,3A3,3,0,0,0,24,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,24,17Z'/%3E%3Cpath d='M8,13a3,3,0,1,0,3,3A3,3,0,0,0,8,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,8,17Z'/%3E%3C/g%3E%3C/svg%3E");
}
}
/* screen and (max-width:720px) */
@media screen and (max-width: 600px) {
:root {
--search-height: 48px;
/* space for search form. */
}
/* footer */
#footer #footer-icons {
float: none;
}
#footer #footer-info-copyright {
padding-right: 0;
padding-bottom: 40px;
}
#footer #footer-info-copyright img {
right: auto;
left: 0;
}
div#p-logo {
margin: calc(0px - var(--search-height)) auto auto;
}
#mw-panel {
margin-top: var(--search-height);
}
#mw-head #p-search {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
padding: var(--layout-box-gap);
/* 36px: inner height of #mw-panel ( line height of .vector-menu-heading(18px) + padding-top of .vector-menu-heading(9px) + padding-bottom of .vector-menu-heading(0px) ) */
/* 26px: outer height of #p-search>#searchform ( css height of .vector-search-box-input ) */
top: calc(0px - var(--theme-box-border-width) * 3 - var(--layout-box-gap) * 2 - var(--layout-height-of-panel) - (var(--layout-height-of-search-form) + var(--theme-box-border-width) * 2 + var(--layout-box-gap) * 2));
/* offset */
left: 50%;
right: auto;
transform: translateX(-50%);
}
.vector-search-box-inner {
width: 20em;
max-width: 80vw;
}
}
/* screen and (max-width:600px) */
/***** Notification area *****/
.mw-notification-area-overlay {
position: fixed;
z-index: 9999;
}
.mw-notification-area {
font-size: 14px;
line-height: 1.7142857143;
}
.mw-notification {
color: var(--theme-text-color);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
transform: none;
}
/* Notification boxes on the right, e.g. after patrolling an edit */
.mw-notification.mw-notification-type-error {
color: var(--theme-notice-red-text-color);
border-color: var(--theme-notice-red-text-color);
}
.mw-notification.mw-notification-type-warn {
color: var(--theme-notice-orange-text-color);
border-color: var(--theme-notice-orange-text-color);
}
/****** postedit notification ******/
.postedit-container {
top: 4em;
}
/***********************************************************************************************************
* Over-width table floating-scroll
***********************************************************************************************************/
/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls {
overflow: auto;
position: fixed;
}
.fl-scrolls div {
overflow: hidden;
pointer-events: none;
}
.fl-scrolls div:before {
content: " ";
}
.fl-scrolls,
.fl-scrolls div {
font-size: 1px;
line-height: 0;
margin: 0;
padding: 0;
}
.fl-scrolls-hidden div:before {
content: " ";
}
.fl-scrolls-viewport {
position: relative;
}
.fl-scrolls-body {
overflow: auto;
}
.fl-scrolls-viewport .fl-scrolls {
position: absolute;
}
.fl-scrolls-hoverable .fl-scrolls {
opacity: 0;
transition: opacity 0.5s 0.3s;
}
.fl-scrolls-hoverable:hover .fl-scrolls {
opacity: 1;
}
.fl-scrolls:not([data-orientation]),
.fl-scrolls[data-orientation=horizontal] {
bottom: 0;
min-height: 17px;
}
.fl-scrolls:not([data-orientation]) div,
.fl-scrolls[data-orientation=horizontal] div {
height: 1px;
}
.fl-scrolls-hidden.fl-scrolls:not([data-orientation]),
.fl-scrolls-hidden.fl-scrolls[data-orientation=horizontal] {
bottom: 9999px;
}
.fl-scrolls-viewport .fl-scrolls:not([data-orientation]),
.fl-scrolls-viewport .fl-scrolls[data-orientation=horizontal] {
left: 0;
}
.fl-scrolls[data-orientation=vertical] {
right: 0;
min-width: 17px;
}
.fl-scrolls[data-orientation=vertical] div {
width: 1px;
}
.fl-scrolls-hidden.fl-scrolls[data-orientation=vertical] {
right: 9999px;
}
.fl-scrolls-viewport .fl-scrolls[data-orientation=vertical] {
top: 0;
}
/*css for wide table */
.table-wide {
clear: both;
position: relative;
}
.mw-parser-output > .table-width {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.table-wide-inner {
overflow-x: auto;
}
.table-wide-inner > table {
margin: 0 !important;
}
.table-wide:before {
box-shadow: inset -15px 0 20px -15px var(--theme-wide-table-shadow-color);
content: "";
display: block;
width: 20px;
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
z-index: 2;
}
/***********************************************************************************************************
* Styles for "real" wiki page content. (in div.mw-parser-output)
***********************************************************************************************************/
/* remove external link icon. */
.mw-parser-output a.external,
.link-https {
padding-right: 0;
background: none;
}
.mw-parser-output > :first-child {
margin-top: 0;
}
/** headings **/
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.vector-body h3,
.vector-body h4,
.vector-body h5,
.vector-body h6 {
margin: 0;
color: var(--theme-heading-color);
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 1.25;
}
.mw-body h1,
.mw-body-content h1 {
font-size: 32px;
line-height: 40px;
border-left: 6px solid #37b075;
background: linear-gradient(rgba(55, 176, 117, 0.25), rgba(55, 176, 117, 0.25)), rgba(0, 0, 0, 0.8);
padding: 6px 0 6px 12px;
margin-left: -18px;
margin-right: -18px;
}
@media (max-width: 720px) {
.mw-body h1,
.mw-body-content h1 {
padding: 6px 0 6px 6px;
margin-left: -12px;
margin-right: -12px;
}
}
.mw-body-content h2 {
font-size: 24px;
line-height: 30px;
margin-top: 18px;
margin-bottom: 9px;
padding-left: 12px;
border-left: 6px solid #37b075;
margin-left: -18px;
margin-right: -18px;
}
@media (max-width: 720px) {
.mw-body-content h2 {
padding: 6px 0 6px 6px;
margin-left: -12px;
margin-right: -12px;
}
}
.vector-body h3 {
font-size: 20px;
line-height: 26px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h4 {
font-size: 16px;
line-height: 22px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h5 {
line-height: 22px;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 7px;
}
.vector-body h6 {
line-height: 20px;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
margin-bottom: 7px;
}
/* reduce heading font size: */
@media (max-width: 900px) {
.mw-body h1,
.mw-body-content h1 {
font-size: 24px;
line-height: 32px;
}
.mw-body-content h2 {
font-size: 20px;
line-height: 28px;
}
.vector-body h3 {
font-size: 18px;
line-height: 24px;
}
}
/* section edit link */
.mw-editsection {
white-space: nowrap;
color: var(--theme-text-color-note);
}
/** ToC **/
/* base common style */
.toc {
background: none;
border-radius: 4px;
border: 1px solid var(--theme-border-color);
margin-top: 18px;
margin-bottom: 18px;
padding: 0;
font-size: 1em;
min-width: 12em;
}
.toc .a {
color: var(--theme-text-color);
}
.toc .tocnumber {
color: var(--theme-text-color-note);
}
.toc .tocnumber:after {
content: ".";
}
/* header */
.toc {
/* arrow */
/* do not change ToC box width when toggle show/hide. */
}
.toc .toctitle {
position: relative;
overflow: hidden;
text-align: left;
padding: 8px;
}
.toc .toctitle h2 {
line-height: 20px;
font-weight: normal;
margin: 0;
border: 0;
display: flex;
align-items: center;
padding: 0 0.5em;
}
.toc .toctitle h2::before {
content: "";
display: block;
width: 12px;
height: 12px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-text-color);
margin: 0 6px 0 0;
}
.toc .toctogglelabel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
box-sizing: border-box;
padding-right: 1em;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
display: none;
}
.toc .toctogglelabel::before {
content: "";
display: inline-block;
background: none;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-icon-color) transparent;
border-width: 0 5px 6px 5px;
vertical-align: middle;
flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before {
border-color: var(--theme-icon-color-hover) transparent;
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
border-width: 6px 5px 0 5px;
}
.toc .toctogglecheckbox:checked ~ ul {
overflow: hidden;
display: block;
height: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toc > ul {
padding: 0.5em;
border-top: 1px solid var(--theme-border-color);
margin: 0;
}
.toc > ul a {
display: block;
padding: 2px 0.5em;
border-radius: 4px;
transition: background 0.1s;
}
.toc > ul a:hover {
text-decoration: none;
background: var(--theme-highlight-background);
}
.toc > ul li {
margin: 0;
}
/********* Tables *********/
table {
/* fix 100% width table with border */
box-sizing: border-box;
}
table.lined,
table.bordered,
table.cellborder {
border-collapse: collapse;
border-style: solid;
border-color: var(--theme-border-color);
}
table.lined th,
table.lined td {
border-width: 0 0 1px 0;
}
table tfoot:empty,
table thead:empty {
display: none;
}
table.lined td.noline,
table.lined tr.noline td {
border-bottom-width: 0;
}
table tr.bottomline td {
border-bottom-width: 1px;
}
table tr.topline td {
border-top-width: 1px;
}
table td.bottomline,
table.lined tr.noline td.bottomline {
border-bottom-width: 1px;
}
table td.topline {
border-top-width: 1px;
}
/* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */
table.outer {
white-space: nowrap;
}
table.inner {
border-collapse: collapse;
background: inherit;
width: 100%;
}
table.inner th {
border: 2px solid var(--theme-border-color);
}
.wikitable,
.wikitable > tr > th,
.wikitable > * > tr > th {
color: inherit;
background: none;
}
.wikitable {
border-color: var(--theme-border-color);
}
table.cargoTable.noMerge tr:nth-child(2n) {
background: rgba(127, 127, 127, 0.25);
}
table.cargoTable.noMerge tr:nth-child(2n + 1) {
background: none;
}
/***********************************************************************************************************
* common style for content box
***********************************************************************************************************/
.fullwidth,
.full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
text-align: center;
}
.alignleft,
.align-left {
text-align: left;
}
.alignright,
.align-right {
text-align: right;
}
/* clear fix for float block */
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* Thumbnail background color */
html .thumbimage {
background-color: #4d3a32;
}
/** gallery **/
.thumbinner {
border-radius: 5px;
}
li.gallerybox div.thumb {
border-radius: 5px;
}
.gallery * {
box-sizing: initial;
}
.mw-gallery-traditional .thumb {
display: flex;
}
.mw-gallery-traditional .thumb a {
display: block;
}
/***********************************************************************************************************
* css for specific content pages
***********************************************************************************************************/
/*********** Main page START ****************/
#mainpage-wrap .footer {
text-align: right;
font-size: 12px;
line-height: 22px;
}
#mainpage-wrap .box {
border: 1px solid var(--theme-border-color);
border-radius: var(--theme-box-border-radius);
padding: 1.5em;
}
#mainpage-wrap h2 {
margin-top: 0;
border-bottom: 0;
}
#mainpage-wrap .content-wrap {
display: flex;
gap: 1em;
align-items: stretch;
margin-bottom: 1em;
}
@media (max-width: 1200px) {
#mainpage-wrap .content-wrap {
flex-direction: column;
}
}
#mainpage-wrap .content-wrap .l {
flex: 3 3 900px;
display: flex;
flex-direction: column;
gap: 1em;
}
#mainpage-wrap .content-wrap .r {
flex: 1 1 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
#mainpage-wrap .box.header {
text-align: center;
}
#mainpage-wrap .box.header .welcome h2 {
font-size: 2em;
}
#mainpage-wrap .box.header ul {
display: inline-flex;
align-items: center;
margin: 1.5em auto 0.5em;
gap: 1em;
}
#mainpage-wrap .box.header ul li {
list-style: none;
}
@media (max-width: 600px) {
#mainpage-wrap .box.header img {
width: 32px;
height: auto;
}
}
#mainpage-wrap .box.game > div {
display: flex;
gap: 1em;
align-items: center;
}
@media (max-width: 640px) {
#mainpage-wrap .box.game > div {
flex-direction: column;
}
}
#mainpage-wrap .box.game img {
width: 100%;
height: auto;
max-width: 320px;
max-height: 180px;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}
#mainpage-wrap .box.game p {
font-size: 16px;
line-height: 28px;
}
#mainpage-wrap .box.feature {
font-size: 18px;
}
#mainpage-wrap .box.feature ul {
margin: 1em 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
justify-items: start;
gap: 1em 1.5em;
}
#mainpage-wrap .box.gallery ul {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0;
}
#mainpage-wrap .box.gallery ul li {
flex: 1 1 40%;
list-style: none;
}
@media (max-width: 1200px) and (min-width: 720px) {
#mainpage-wrap .box.gallery ul li {
flex: 1 1 28%;
}
}
#mainpage-wrap .box.gallery ul li img {
width: 100%;
height: auto;
}
#mainpage-wrap .box.gallery img {
box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}
/*********** Main page END ****************/
/*********** [[Implants]] ****************/
.implant-list {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fill, var(--base-width, 20em));
justify-content: center;
}
.implant-list .infobox.implant {
grid-column: 1/-1;
}
.implant-list .infobox.implant.mw-collapsed {
grid-column: auto;
}
.infobox.implant {
border: 1px solid var(--rarity-color);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
@media (max-width: 1024px) {
.infobox.implant {
grid-template-rows: auto auto 1fr;
}
}
.infobox.implant::before {
content: "";
display: block;
justify-self: stretch;
align-self: stretch;
grid-column: 1/-1;
grid-row: 2/-1;
background: var(--rarity-color);
opacity: 0.07;
z-index: 0;
}
.infobox.implant::after {
content: "";
display: block;
justify-self: stretch;
align-self: stretch;
grid-column: 1/-1;
grid-row: 1/2;
background: var(--rarity-color);
opacity: 0.12;
z-index: 0;
}
.infobox.implant > .rarity {
font-size: 10px;
line-height: 1;
color: var(--rarity-color);
display: block;
padding: 6px 0 6px 10px;
border-left: 5px solid var(--rarity-color);
justify-self: stretch;
align-self: stretch;
grid-column: 1/2;
grid-row: 1/2;
z-index: 1;
position: relative;
}
.infobox.implant > .rarity::before {
content: "";
display: block;
width: 1px;
height: 12px;
background: black;
position: absolute;
left: -3px;
top: 0px;
}
.infobox.implant > .mw-collapsible-toggle {
font-size: 10px;
line-height: 1;
color: var(--rarity-color);
display: block;
padding: 6px 10px 6px 0;
justify-self: end;
align-self: stretch;
grid-column: 2/3;
grid-row: 1/2;
z-index: 1;
float: none;
}
.infobox.implant > .mw-collapsible-toggle::before,
.infobox.implant > .mw-collapsible-toggle::after {
display: none;
}
.infobox.implant > .mw-collapsible-toggle a {
color: var(--rarity-color);
}
.infobox.implant > .basic {
grid-column: 1/2;
grid-row: 2/3;
margin: 1em;
height: 80px;
z-index: 1;
width: calc(var(--base-width, 20em) - 2em - 2px);
}
@media (max-width: 1024px) {
.infobox.implant > .basic {
grid-column: 1/3;
grid-row: 2/3;
}
}
.infobox.implant > .basic .icon {
box-sizing: border-box;
width: 72px;
height: 80px;
float: left;
border: 1px solid var(--rarity-color);
padding-left: 2px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-left: 9px;
}
.infobox.implant > .basic .icon::before {
content: "";
display: block;
width: 8px;
height: calc(100% + 2px);
background: var(--rarity-color);
position: absolute;
left: -10px;
top: -1px;
}
.infobox.implant > .basic .icon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: var(--rarity-color) var(--rarity-color) transparent transparent;
position: absolute;
top: 2px;
right: 2px;
}
.infobox.implant > .basic .id,
.infobox.implant > .basic .name {
display: block;
margin-left: 90px;
font-weight: bold;
}
.infobox.implant > .basic .id {
color: var(--rarity-color);
font-size: 10px;
margin-bottom: 5px;
}
.infobox.implant > .adv {
grid-column: 2/3;
grid-row: 2/3;
z-index: 1;
margin: 1em;
}
@media (max-width: 1024px) {
.infobox.implant > .adv {
grid-column: 1/3;
grid-row: 3/4;
margin-top: 0;
}
}
.infobox.implant > .adv .heading {
font-size: 18px;
line-height: 26px;
margin-bottom: 4px;
margin-top: 8px;
}
.infobox.implant > .adv .heading:first-child {
margin-top: 0;
}
.infobox.implant > .adv .heading::after {
content: "";
display: block;
width: 15em;
border-bottom: 1px solid var(--rarity-color);
}
.infobox.implant > .adv .active-passive {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
@media (max-width: 450px) {
.infobox.implant > .adv .active-passive {
display: block;
}
}
.infobox.implant > .adv .active-passive > .active,
.infobox.implant > .adv .active-passive > .passive {
flex: 1 1 18em;
}
.infobox.implant > .adv .active-passive > .active > .heading span:first-child,
.infobox.implant > .adv .active-passive > .passive > .heading span:first-child {
display: inline-block;
width: 13em;
}
.infobox.implant.mw-collapsed > .basic {
grid-column: 1/3;
grid-row: 2/3;
}
.infobox.implant table.effects {
border-spacing: 0;
}
.infobox.implant table.effects td,
.infobox.implant table.effects th {
padding: 0;
vertical-align: top;
}
.infobox.implant table.effects th {
text-align: right;
}
/*********** [[Implants]] END ****************/
/***********************************************************************************************************
* css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
***********************************************************************************************************/
/********* ooui *********/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
color: var(--theme-text-color);
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed {
background: none;
}
/********* for File: NS pages *********/
#filetoc {
background: none;
}
/******* Search result page. (Special:Search) ******/
.mw-search-form-wrapper {
font-size: 1em;
}
.mw-search-form-wrapper #mw-search-top-table {
display: flex;
align-items: center;
}
.mw-search-form-wrapper #mw-search-top-table > div {
float: none;
}
.mw-search-form-wrapper .results-info {
color: var(--theme-text-color-note);
font-size: 1em;
padding: 0 0 0 3em;
white-space: nowrap;
text-align: right;
flex: 1 1 auto;
}
.mw-search-form-wrapper .mw-search-visualclear {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs {
border: 0;
margin: 1em 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
width: 100%;
float: none;
padding: 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
float: none;
display: inline-block;
vertical-align: middle;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
background: var(--theme-highlight-background);
border-radius: 4px;
overflow: hidden;
}
.mw-search-form-wrapper #mw-searchoptions {
padding: 1em;
background: var(--theme-box-background);
border: 1px solid var(--theme-border-color-accent);
border-radius: 4px;
}
/* responsive tweak */
@media screen and (max-width: 600px) {
.mw-search-form-wrapper #mw-search-top-table {
display: block;
}
.mw-search-form-wrapper .results-info {
margin-top: 1em;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
font-size: 12px;
}
}
/***********************************************************************************************************
* dark theme tweak
***********************************************************************************************************/
#filetoc,
code,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-search-profile-tabs,
#mw-searchoptions,
.mw-datatable td {
background: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: #1f3030;
color: var(--theme-text-color);
}
#mw-allmessagestable tbody:hover td {
background: var(--theme-highlight-background);
}
li.gallerybox div.thumb {
background: var(--theme-box-background);
}
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>');
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed,
#preferences .mw-htmlform-submit-buttons {
background: none;
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
table.diff .diff-context {
background: rgba(248, 249, 250, 0.15);
color: var(--theme-text-color);
}
table.diff .diff-addedline .diffchange {
background: rgba(74, 166, 255, 0.6);
}
table.diff .diff-deletedline .diffchange {
background: rgba(255, 198, 63, 0.6);
}
:root {
--pi-background: rgba(255, 255, 255, 0.1);
}
div.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background: #231c3b;
}
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon {
filter: invert(1);
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagItemWidget .oo-ui-iconElement-icon {
filter: none;
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: #ddd;
}
div.thumbinner {
background: none;
}
#pagehistory li.selected {
background: rgba(40, 40, 40, 0.6);
color: var(--theme-text-color);
}
#mw-indicator-mw-helplink a {
background: none;
position: relative;
}
#mw-indicator-mw-helplink a:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
filter: invert(1);
}
.mw-plusminus-pos {
color: #7cf56e;
}
.mw-plusminus-neg {
color: #ff9a9b;
}
.autocomment,
.autocomment a,
.autocomment a:visited {
color: var(--theme-text-color-note);
}
.mw-message-box-warning {
background-color: rgba(54, 44, 10, 0.5);
border-color: #fc3;
color: #fff;
}
fieldset {
border-color: #ccc;
}
.mw-highlight pre,
.mw-highlight code,
.mw-highlight .mw-code {
color: #000;
}
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
border-color: #2d8e90;
border-radius: 0;
}
#preferences .mw-htmlform-submit-buttons {
background-color: rgba(13, 46, 48, 0.9333333333);
-webkit-position: sticky;
position: sticky;
bottom: 0;
margin-top: -1px;
border: 1px solid #2d8e90;
padding: 1em 1em;
box-shadow: none;
}
.wikiEditor-ui .wikiEditor-ui-view {
border: 1px solid #37b075;
}
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group {
border-color: #37b075;
}
.oo-ui-icon-bold {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2220%22%20height=%2220%22%20viewBox=%220%200%2020%2020%22%3E%3Ctitle%3E%20bold%20%3C/title%3E%3Cpath%20fill=%22%2337b075%22%20d=%22M8.9%201c2.4%200%204.2.3%205.4%201%201.3.7%201.9%201.9%201.9%203.6%200%201-.3%201.9-.7%202.6a3%203%200%200%201-2%201.3%204.8%204.8%200%200%201%201.6.7c.4.3.8.8%201.1%201.3a5%205%200%200%201%20.4%202.3%204.6%204.6%200%200%201-1.7%203.8A7.6%207.6%200%200%201%2010%2019H3.3V1h5.6zm.4%207.1c1.1%200%201.9-.1%202.3-.5.5-.3.7-.9.7-1.5%200-.7-.3-1.2-.8-1.5-.5-.3-1.3-.5-2.4-.5h-2v4h2.2zm-2.2%203V16h2.5c1.1%200%202-.3%202.4-.7.5-.5.7-1%20.7-1.8a2%202%200%200%200-.7-1.6c-.5-.4-1.3-.6-2.5-.6H7z%22/%3E%3C/svg%3E);
}
.oo-ui-icon-italic {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20italic%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22m5%2019%20.33-1.51%202.17-.66%202.9-13.66-1.9-.63L9%201h7l-.71%201.6-2.29.57-2.83%2013.66%202.14.66L12%2019H5Z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-icon-link {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20link%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22M4.83%2015h2.91a4.88%204.88%200%200%201-1.55-2H5a3%203%200%201%201%200-6h3a3%203%200%200%201%202.82%204h2.1a4.82%204.82%200%200%200%20.08-.83v-.34A4.83%204.83%200%200%200%208.17%205H4.83A4.83%204.83%200%200%200%200%209.83v.34A4.83%204.83%200%200%200%204.83%2015z%22%2F%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22M15.17%205h-2.91a4.88%204.88%200%200%201%201.55%202H15a3%203%200%201%201%200%206h-3a3%203%200%200%201-2.82-4h-2.1a4.82%204.82%200%200%200-.08.83v.34A4.83%204.83%200%200%200%2011.83%2015h3.34A4.83%204.83%200%200%200%2020%2010.17v-.34A4.83%204.83%200%200%200%2015.17%205z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-icon-image {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20image%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22M2%202a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2zm-.17%2013%204.09-5.25%202.92%203.51L12.92%208l5.25%207z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-icon-reference {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20reference%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22m15%2010-2.78-2.78L9.44%2010V1H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V3a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E);
}
div#msupload-select {
background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%22307.20001220703125%20256%20409.60003662109375%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M512%20256l144.8%20144.8-36.2%2036.2-83-83v311.6h-51.2V354l-83%2083-36.2-36.2L512%20256zM307.2%20716.8V768h409.6v-51.2H307.2z%22%20fill%3D%22%2337b075%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-icon-highlight {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20highlight%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22M15.14%202.27a1%201%200%200%200-1.41%200l-10%2010a1%201%200%200%200%200%201.41L4%2014l-3%204h5l1-1%20.29.29a1%201%200%200%200%201.41%200l10-10a1%201%200%200%200%20.03-1.43zM7%2015l-2-2%209-9%202%202z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-image-progressive.oo-ui-icon-highlight {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20highlight%20%3C%2Ftitle%3E%3Cg%20fill%3D%22%2377f0b5%22%3E%3Cpath%20d%3D%22M15.14%202.27a1%201%200%200%200-1.41%200l-10%2010a1%201%200%200%200%200%201.41L4%2014l-3%204h5l1-1%20.29.29a1%201%200%200%200%201.41%200l10-10a1%201%200%200%200%20.03-1.43zM7%2015l-2-2%209-9%202%202z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
.wikiEditor-ui-toolbar {
background-color: rgba(55, 176, 117, 0.0980392157);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
color: #58dfff;
}
#msupload-div {
background-color: rgba(55, 176, 117, 0.0980392157);
border-top: 1px solid #37b075;
}
#msupload-dropzone {
color: #37b075;
border: 1px dashed #37b075;
}
.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid #37b075;
}
.wikiEditor-ui-bottom {
border: 0px;
}
.wikiEditor-ui-text {
border: none;
}
.wikiEditor-ui-text textarea {
background: rgba(55, 176, 117, 0.0980392157);
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
}
.wikiEditor-ui-text textarea::-webkit-scrollbar {
width: 14px;
}
.wikiEditor-ui-text textarea::-webkit-scrollbar-track {
background-color: #062324;
border-left: 1px solid #37b075;
}
.wikiEditor-ui-text textarea::-webkit-scrollbar-thumb {
background-color: #018e8f;
box-shadow: inset 1px 0px 0px 0px #37b075;
}
.wikiEditor-ui-text textarea::-webkit-scrollbar-thumb:hover {
background-color: #31bebf;
box-shadow: inset 1px 0px 0px 0px #37b075;
}
.wikiEditor-ui-text textarea::-webkit-scrollbar-corner {
background-color: #062324;
height: 20px;
}
.wikiEditor-ui-text textarea::-webkit-resizer {
border-left: 1px solid #37b075;
background: #37b075;
}
.CodeMirror {
font-family: "JetBrains Mono", monospace;
background-color: rgba(55, 176, 117, 0.0980392157);
color: #eaecf0;
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: rgba(55, 176, 117, 0.5333333333);
}
.CodeMirror .cm-mw-doubleUnderscore {
color: #66E0F2;
background-color: #002b36;
}
.CodeMirror .emphasis {
font-weight: bold;
}
.CodeMirror .dotted {
border-bottom: 1px dotted #cb4b16;
}
.CodeMirror .CodeMirror-gutter {
background-color: rgba(55, 176, 117, 0.0980392157);
border-right: 3px solid #073642;
}
.CodeeMirror .CodeMirror-linenumbers {
background-color: rgba(55, 176, 117, 0.0980392157);
}
.CodeMirror .CodeMirror-gutter .CodeMirror-gutter-text {
background-color: rgba(55, 176, 117, 0.0980392157);
color: #586e75;
}
.CodeMirror .CodeMirror-cursor {
border-left-color: #fdf6e3 !important;
}
.CodeMirror .CodeMirror-matchingbracket {
color: #fdf6e3;
background-color: #094250;
box-shadow: 0 0 10px #073642;
font-weight: bold;
}
.CodeMirror .CodeMirror-nonmatchingbracket {
color: #fdf6e3;
background-color: #073642;
box-shadow: 0 0 10px #073642;
font-weight: bold;
color: #dc322f;
border-bottom: 1px dotted #cb4b16;
}
.CodeMirror span.cm-keyword {
color: #839496;
font-weight: bold;
}
.CodeMirror span.cm-atom {
color: #2aa198;
}
.CodeMirror span.cm-number {
color: #93a1a1;
}
.CodeMirror span.cm-def {
color: #268bd2;
}
.CodeMirrorspan.cm-variable {
color: #cb4b16;
}
.CodeMirror span.cm-variable-2 {
color: #cb4b16;
}
.CodeMirror span.cm-variable-3 {
color: #cb4b16;
}
.CodeMirror span.cm-comment {
color: #586e75;
}
.CodeMirror span.cm-property {
color: #b58900;
}
.CodeMirror span.cm-operator {
color: #839496;
}
.CodeMirror span.cm-string {
color: #6c71c4;
}
.CodeMirror span.cm-error {
font-weight: bold;
border-bottom: 1px dotted #cb4b16;
}
.CodeMirror span.cm-bracket {
color: #cb4b16;
}
.CodeMirror span.cm-tag {
color: #839496;
}
.CodeMirror span.cm-attribute {
color: #93a1a1;
font-weight: bold;
}
.CodeMirror span.cm-meta {
color: #268bd2;
}
.CodeMirror span.cm-mw-template-ground {
color: #ffc000;
}
.CodeMirror span.cm-mw-template2-ground {
color: #c0ff00;
}
.CodeMirror span.cm-mw-template-argument-name {
font-weight: bold;
color: #ffc000;
}
.CodeMirror span.cm-mw-htmltag-attribute {
color: #54C6AD;
}
.CodeMirror span.cm-mw-htmltag-bracket {
color: #54C6AD;
}
.CodeMirror span.cm-mw-htmltag-name {
color: #54C6AD;
}
.CodeMirror span.cm-mw-template {
color: #ffc000;
}
.CodeMirror span.cm-mw-link-bracket {
color: #30aafc;
}
.CodeMirror span.cm-mw-link-pagename {
color: #30aafc;
}
.CodeMirror span.cm-mw-table-definition {
color: #ffc000;
}
.CodeMirror span.cm-mw-table-bracket {
color: #ffc000;
}
.CodeMirror span.cm-mw-table-delimiter {
color: #ffc000;
}
.CodeMirror span.cm-mw-extlink-bracket {
color: #40bafc;
}
.CodeMirror span.cm-mw-extlink-protocol {
color: #40bafc;
text-decoration: underline;
}
.CodeMirror span.cm-mw-extlink {
color: #40bafc;
text-decoration: underline;
}
.CodeMirror-gutters {
border-right: 1px solid #37B075;
margin-right: 0;
background-color: rgba(55, 176, 117, 0.0980392157);
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
width: 14px;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-track {
background-color: #062324;
border-left: 1px solid #37b075;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #018e8f;
box-shadow: inset 1px 0px 0px 0px #37b075;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #31bebf;
box-shadow: inset 1px 0px 0px 0px #37b075;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-corner {
background-color: #062324;
height: 20px;
}
.CodeMirror-vscrollbar::-webkit-resizer {
border-left: 1px solid #37b075;
background: #37b075;
}
.oo-ui-image-invert.oo-ui-icon-check {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20check%20%3C%2Ftitle%3E%3Cg%20fill%3D%22%2337b075%22%3E%3Cpath%20d%3D%22M7%2014.2%202.8%2010l-1.4%201.4L7%2017%2019%205l-1.4-1.4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate + span {
background-color: transparent;
border-color: #37b075;
border-radius: 0;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox] + span {
background-color: transparent;
border-color: #37b075;
border-radius: 0;
}
.oo-ui-checkboxInputWidget [type=checkbox]:disabled + span {
background-color: transparent;
border-color: #77f0b5;
border-radius: 0;
opacity: 0.3;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:focus + span {
border-color: #77f0b5;
box-shadow: none;
outline: 1px solid transparent;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:hover + span {
border-color: #77f0b5;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:active + span {
background-color: rgba(119, 240, 181, 0.2);
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:focus + span {
background-color: rgba(119, 240, 181, 0.2);
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:hover + span {
background-color: rgba(119, 240, 181, 0.2);
border-color: #77f0b5;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:active + span {
background-color: rgba(119, 240, 181, 0.2);
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: rgba(55, 176, 117, 0.0980392157);
color: #37b075;
border-color: #37b075;
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: rgba(119, 240, 181, 0.3333333333);
color: #77f0b5;
border-color: #77f0b5;
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
background-color: rgba(119, 240, 181, 0.3333333333);
color: #77f0b5;
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: rgba(55, 176, 117, 0.0980392157);
color: #37b075;
border-color: #37b075;
border-radius: 0;
opacity: 0.4;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background-color: rgba(55, 176, 117, 0.0980392157);
color: #37b075;
border-color: #37b075;
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: rgba(119, 240, 181, 0.3333333333);
color: #77f0b5;
border-color: #77f0b5;
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
border-color: #77f0b5;
box-shadow: none;
outline: 1px solid transparent;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
background-color: rgba(119, 240, 181, 0.3333333333);
color: #77f0b5;
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: #c22;
border: 1px solid #c22;
background-color: rgba(255, 66, 66, 0.1333333333);
border-radius: 0;
padding: 6px 6px 4px 6px;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
color: #ff4242;
border-color: #ff4242;
background-color: rgba(255, 66, 66, 0.2666666667);
border-radius: 0;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
color: #ff4242;
border-color: #ff4242;
box-shadow: none;
border-radius: 0;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
border-color: #ff4242;
box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: rgba(255, 66, 66, 0.8666666667);
border-color: rgba(255, 66, 66, 0.8666666667);
background-color: rgba(255, 66, 66, 0.1333333333);
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
color: #ff4242;
border-color: #ff4242;
background-color: rgba(255, 66, 66, 0.2666666667);
border-radius: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
color: rgba(255, 66, 66, 0.8666666667);
border-color: rgba(255, 66, 66, 0.8666666667);
background-color: rgba(255, 66, 66, 0.1333333333);
border-radius: 0;
box-shadow: none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
color: #ff4242;
border-color: #ff4242;
background-color: rgba(255, 66, 66, 0.2666666667);
border-radius: 0;
box-shadow: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: rgba(119, 240, 181, 0.1333333333);
color: white;
margin: 0;
border: 1px solid #37b075;
border-radius: 0px;
padding: 5px 8px;
font-size: inherit;
font-family: inherit;
line-height: 1.42857143em;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
border-color: #77f0b5;
outline: 1px solid transparent;
box-shadow: none;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
border-color: #77f0b5;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
border-color: #77f0b5;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
color: #37b075;
border-bottom-color: #37b075;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: transparent;
color: #77f0b5;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: transparent;
color: #77f0b5;
}
.oo-ui-radioInputWidget [type=radio] + span {
border-color: #37b075;
background-color: transparent;
}
.oo-ui-radioInputWidget [type=radio]:disabled + span {
background-color: transparent;
border-color: #77f0b5;
opacity: 0.3;
}
.oo-ui-radioInputWidget [type=radio]:disabled:checked + span {
background-color: transparent;
opacity: 0.3;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:hover + span {
border-color: #77f0b5;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:active + span {
background-color: rgba(55, 176, 117, 0.6);
border-color: rgba(55, 176, 117, 0.6);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked + span {
border-color: #37b075;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:focus + span:before {
border-color: transparent;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:hover + span {
border-color: #77f0b5;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:active + span {
border-color: #77f0b5;
box-shadow: none;
}
.oo-ui-dropdownWidget-handle .oo-ui-indicator-down {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3E%20down%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%232d8e90%22%20d%3D%22M9.9%202.9%206%206.8%202.1%202.9%201%204l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-dropdownWidget-handle {
border: 1px solid #2d8e90;
border-radius: 0;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
background-color: #002f33;
color: #eaecf0;
transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
background-color: #002f33;
color: #eaecf0;
border-color: #5dbec0;
}
.oo-ui-dropdownWidget-handle:hover .oo-ui-indicator-down {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3E%20down%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%237ddee0%22%20d%3D%22M9.9%202.9%206%206.8%202.1%202.9%201%204l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-dropdownWidget-handle:focus .oo-ui-indicator-down {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3E%20down%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%237ddee0%22%20d%3D%22M9.9%202.9%206%206.8%202.1%202.9%201%204l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
border-color: #5dbec0;
outline: 1px solid transparent;
box-shadow: none;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
background-color: #002f33;
}
.oo-ui-menuSelectWidget {
background-color: #002f33;
border: 1px solid #2d8e90;
border-radius: 0;
box-shadow: none;
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
color: #eaecf0;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: #103f43;
color: #eaecf0;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
background-color: #305f63;
color: #eaecf0;
}
.oo-ui-menuSelectWidget::-webkit-scrollbar {
width: 14px;
}
.oo-ui-menuSelectWidget::-webkit-scrollbar-track {
background-color: #062324;
border-left: 1px solid #2d8e90;
}
.oo-ui-menuSelectWidget::-webkit-scrollbar-thumb {
background-color: #018e8f;
box-shadow: inset 1px 0px 0px 0px #2d8e90;
}
.oo-ui-menuSelectWidget::-webkit-scrollbar-thumb:hover {
background-color: #31bebf;
box-shadow: inset 1px 0px 0px 0px #2d8e90;
}
.oo-ui-menuSelectWidget::-webkit-scrollbar-corner {
background-color: #062324;
height: 20px;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: #406f73;
color: #eaecf0;
}
div.editOptions {
background-color: rgba(55, 176, 117, 0.0980392157);
line-height: 1.7142857143;
font-size: 1.12em;
color: white;
border-color: #37b075;
}
.diff-context,
.diff-marker,
.diff-title,
.diff-deletedline,
.diff-addedline {
border-radius: 0;
}
.mw-highlight > pre {
background-color: #062324;
color: #ffffff;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
border-radius: 0;
background-color: transparent;
}
.search-types .current a {
border-radius: 0;
background-color: transparent;
color: #2d8e90;
}
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input,
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-dropdownWidget-handle,
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-tagMultiselectWidget-handle {
border-radius: 0;
}
.oo-ui-icon-search {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20search%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%2337b075%22%20d%3D%22M12.2%2013.6a7%207%200%201%201%201.4-1.4l5.4%205.4-1.4%201.4-5.4-5.4zM3%208a5%205%200%201%200%2010%200A5%205%200%201%200%203%208z%22%2F%3E%3C%2Fsvg%3E);
}
.oo-ui-indicator-clear {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20clear%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22%23e9257f%22%20d%3D%22M10%200a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2010%200zm5.66%2014.24-1.41%201.41L10%2011.41l-4.24%204.25-1.42-1.42L8.59%2010%204.34%205.76l1.42-1.42L10%208.59l4.24-4.24%201.41%201.41L11.41%2010z%22%2F%3E%3C%2Fsvg%3E);
}
/* elemental color filters */
.deadlink-electric-overlay {
filter: invert(63%) sepia(94%) saturate(853%) hue-rotate(144deg) brightness(85%) contrast(90%);
}
.deadlink-fire-overlay {
filter: invert(78%) sepia(23%) saturate(6987%) hue-rotate(0deg) brightness(104%) contrast(103%);
}
.deadlink-toxic-overlay {
filter: invert(81%) sepia(34%) saturate(948%) hue-rotate(32deg) brightness(93%) contrast(93%);
}
.deadlink-ui-overlay {
filter: invert(74%) sepia(95%) saturate(1071%) hue-rotate(103deg) brightness(111%) contrast(86%);
}
.deadlink-shell-overlay {
filter: invert(67%) sepia(55%) saturate(516%) hue-rotate(12deg) brightness(98%) contrast(98%);
}
.deadlink-weaponmod-overlay {
filter: invert(89%) sepia(7%) saturate(147%) hue-rotate(251deg) brightness(83%) contrast(93%);
}
.deadlink-enemies-overlay {
filter: invert(22%) sepia(67%) saturate(5730%) hue-rotate(347deg) brightness(96%) contrast(92%);
}
.deadlink-neuralboost-overlay {
filter: invert(75%) sepia(10%) saturate(903%) hue-rotate(314deg) brightness(103%) contrast(93%);
}
.deadlink-extant-overlay {
filter: invert(54%) sepia(16%) saturate(7406%) hue-rotate(94deg) brightness(105%) contrast(86%);
}
.deadlink-hub1-overlay {
filter: invert(40%) sepia(72%) saturate(2548%) hue-rotate(136deg) brightness(99%) contrast(102%);
}
.deadlink-hub2-overlay {
filter: invert(44%) sepia(87%) saturate(6195%) hue-rotate(164deg) brightness(98%) contrast(101%);
}
.deadlink-hub3-overlay {
filter: invert(37%) sepia(34%) saturate(3340%) hue-rotate(234deg) brightness(97%) contrast(87%);
}
.deadlink-hub4-overlay {
filter: invert(82%) sepia(59%) saturate(3080%) hue-rotate(11deg) brightness(95%) contrast(80%);
}
.deadlink-hub5-overlay {
filter: invert(63%) sepia(94%) saturate(1673%) hue-rotate(351deg) brightness(95%) contrast(98%);
}
.deadlink-hub6-overlay {
filter: invert(65%) sepia(74%) saturate(6411%) hue-rotate(271deg) brightness(86%) contrast(89%);
}
.deadlink-hub7-overlay {
filter: invert(28%) sepia(74%) saturate(1973%) hue-rotate(189deg) brightness(98%) contrast(101%);
}
.deadlink-hub8-overlay {
filter: invert(23%) sepia(98%) saturate(2176%) hue-rotate(6deg) brightness(94%) contrast(109%);
}
.druid-container {
/* These variables are designed to inherit from your wiki's color variables.
If your wiki uses a different naming scheme, change the inner names to match yours.
If your wiki doesn't use color variables you should consider doing so,
otherwise you can replace the inner variables or the fallback values with colors that match your wiki. #103233
*/
--druid-background-color: var(--wiki-content-background-color, #08161E);
--druid-background-color--rgb: var(--wiki-content-background-color--rgb, 55, 176, 117);
--druid-secondary-background-color: var(--wiki-accent-color, #37B075);
--druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 55, 176, 117);
--druid-secondary-background-label-color: var(--wiki-accent-label-color, #e5ffff);
--druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 229, 255, 255);
--druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #2d8e90);
--druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 45, 142, 144);
--druid-border-color: var(--wiki-content-border-color, #12EDC8);
--druid-border-color--rgb: var(--wiki-content-border-color--rgb, 18, 237, 200);
--druid-link-color: var(--wiki-content-link-color, #58dfff);
--druid-link-color--rgb: var(--wiki-content-link-color--rgb, 88, 223, 255);
--druid-link-label-color: var(--wiki-content-link-label-color, #2E9091);
--druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 46, 144, 145);
}
.druid-container {
border: 4px solid var(--druid-border-color);
border-radius: 3px;
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
width:100%;
max-width:22em;
box-sizing: border-box;
border-collapse: collapse;
}
.druid-toggleable-data-nonempty.focused {
padding-left: 0.3em;
}
.trial-infobox {
border: 4px solid #2d8e90 !important;
max-width:17em !important;
}
.hub1 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #00AF76;
}
.hub2 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #008E8F;
}
.hub3 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #7E5FE8;
}
.hub4 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #BFB11A;
}
.hub5 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #F09012;
}
.hub6 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #CB45D0;
}
.hub7 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #0073D0;
}
.hub8 {
float: left !important;
max-width:10em !important;
margin: 0 0.5em 0 0 !important;
border: 3px solid #DE3100;
}
.Soldier {
border: 3px solid #F09012;
}
.Hunter {
border: 3px solid #CB45D0;
}
.Engineer {
border: 3px solid #0073D0;
}
.Juggernaut {
border: 3px solid #DE3100;
}
.hub1 .druid-main-images-label {
outline:1px solid #00AF76;
}
.hub2 .druid-main-images-label {
outline:1px solid #008E8F;
}
.hub3 .druid-main-images-label {
outline:1px solid #7E5FE8;
}
.hub4 .druid-main-images-label {
outline:1px solid #BFB11A;
}
.hub5 .druid-main-images-label {
outline:1px solid #F09012;
}
.hub6 .druid-main-images-label {
outline:1px solid #CB45D0;
}
.hub7 .druid-main-images-label {
outline:1px solid #0073D0;
}
.hub8 .druid-main-images-label {
outline:1px solid #DE3100;
}
.hub1 .druid-main-images-label.focused {
background:#00AF76;
color:#e5ffff;
}
.hub2 .druid-main-images-label.focused {
background:#008E8F;
color:#e5ffff;
}
.hub3 .druid-main-images-label.focused {
background:#7E5FE8;
color:#e5ffff;
}
.hub4 .druid-main-images-label.focused {
background:#BFB11A;
color:#e5ffff;
}
.hub5 .druid-main-images-label.focused {
background:#F09012;
color:#e5ffff;
}
.hub6 .druid-main-images-label.focused {
background:#CB45D0;
color:#e5ffff;
}
.hub7 .druid-main-images-label.focused {
background:#0073D0;
color:#e5ffff;
}
.hub8 .druid-main-images-label.focused {
background:#DE3100;
color:#e5ffff;
}
.hub1 .druid-row-Cost,
.hub1 .druid-row-Effects,
.hub2 .druid-row-Cost,
.hub2 .druid-row-Effects,
.hub3 .druid-row-Cost,
.hub3 .druid-row-Effects,
.hub4 .druid-row-Cost,
.hub4 .druid-row-Effects,
.hub5 .druid-row-Cost,
.hub5 .druid-row-Effects,
.hub6 .druid-row-Cost,
.hub6 .druid-row-Effects,
.hub7 .druid-row-Cost,
.hub7 .druid-row-Effects,
.hub8 .druid-row-Cost,
.hub8 .druid-row-Effects{
display: inline !important;
}
.druid-center .druid-row{
text-align: center;
display: contents;
}
.trial-infobox {
float: none !important;
margin: 0.5rem auto !important;
}
@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}
.druid-main-images-file,
.druid-main-image {
text-align:center;
}
.druid-infobox .druid-title,
.druid-infobox .druid-section {
background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
color:var(--druid-secondary-background-label-color);
text-align:center;
font-size:1.5em;
padding:1px;
}
.druid-infobox .druid-section {
font-size: 1.25em;
font-weight: 500;
}
.druid-label {
font-weight:bold;
text-align: right;
box-sizing: border-box;
}
.druid-row > .druid-label {
width: 48%;
flex-shrink: 0;
}
.druid-row > .druid-label,
.druid-row > .druid-data {
padding-inline: 0.3em;
}
.druid-main-image,
.druid-main-images {
padding:5px;
}
.druid-main-image img,
.druid-main-images img {
max-width:100%;
height:auto;
}
.druid-main-images-labels {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
margin:0.25em;
gap:0.25em;
}
.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
outline:1px solid var(--druid-link-color);
}
.druid-main-images-label.focused {
background:var(--druid-link-color);
color:var(--druid-link-label-color);
}
.druid-main-images-label:not(.focused):hover {
background:rgba(var(--druid-link-color--rgb), 0.25);
}
.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
display:none;
}
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}
.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}
.druid-grid {
display:grid;
gap: 0.3em;
padding: 0.35em;
}
.druid-grid-item {
background:var(--druid-tertiary-background-color);
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
border-radius: 2px;
}
.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
text-align: center;
}
.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}
.druid-collapsed {
display:none!important;
}
.druid-collapsible {
cursor:pointer;
position:relative;
}
.druid-collapsible::after {
content:'\2013';
display:block;
position:absolute;
right:10px;
font-size:20px;
font-weight:bold;
color:var(--druid-secondary-background-label-color);
}
.druid-collapsible-collapsed::after {
content:'+';
}
.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
display: none;
}
.druid-row.druid-row-Section1 {
display: inline;
text-align: center;
}
.druid-row.druid-row-Section2 {
display: inline;
text-align: center;
}
/*****************************************
Div support
*****************************************/
div.druid-row {
display:flex;
margin-block: 1px;
}
div.druid-row + div.druid-row {
margin-top: 0;
}
div.druid-row > .druid-label {
background: var(--druid-tertiary-background-color);
}
.trial-infobox > .druid-section-container > .druid-row > .druid-label {
background: #113233 !important;
}
.druid-infobox .druid-title {
font-weight: 700;
}
.druid-infobox #toc {
display:none;
}
/********
Custom display classes
*********/
div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
flex-direction: column;
}
.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
text-align: left;
width: 100%;
flex-basis:unset;
}
.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
padding-left: .75em;
}
.druid-container-weapon .druid-section-RarityModifiers {
padding-left: 89.2px;
}
.druid-container-weapon .druid-collapsible .druid-section-Stats {
padding-left: 130px;
}
.druid-container-weapon .druid-collapsible .druid-section {
background: none;
}
.druid-container-weapon .druid-collapsible {
background: rgba(var(--druid-secondary-background-color--rgb), 0.75);
margin-bottom: 1px;
}
.druid-container-weapon .druid-label-RareModifier {
color: #12EDC8;
}
.druid-container-weapon .druid-label-LegendaryModifier {
color: #FFB100;
}
/* Custom Infobox Size */
.druid-container > .game {
max-width:30em;
}
/*******************************
/* Responsive flex page layout *
/*******************************/
.rfpelements {
display: flex;
flex-flow: row wrap;
margin: -5px;
}
.rfpshelf,
.rfpstack {
display: flex;
flex-flow: column nowrap;
margin: 0;
padding: 0;
flex: 0 0 100%;
max-width: 100%;
box-sizing: border-box;
}
.rfpblock {
margin: 5px;
padding: 3px 6px;
flex: 0 0 calc( 100% - 10px );
max-width: calc( 100% - 10px );
text-align: center;
box-sizing: border-box;
}
.rfpblock img {
max-width: 100%;
height: auto;
}
.rfpstack .rfpstack,
.rfpstack .rfpshelf,
.rfpshelf .rfpshelf,
.rfpshelf .rfpstack {
flex: 1 0 auto;
max-width: 100%;
}
.rfpstack .rfpblock,
.rfpshelf .rfpblock {
flex: 1 0 auto;
max-width: calc( 100% - 10px );
}
.rfpstack .rfpnoresize {
flex: 0 0 auto;
}
.rfpnopadding {
padding: 0 !important;
}
.rfpnomargin {
margin: 0 !important;
}
@media (min-width: 820px) {
.rfp100-50-67size,
.rfp100-50-50size,
.rfp100-50-33size {
flex: 0 0 50%;
max-width: 50%;
}
.rfpblock.rfp100-50-67size,
.rfpblock.rfp100-50-50size,
.rfpblock.rfp100-50-33size {
flex: 0 0 calc( 50% - 10px );
max-width: calc( 50% - 10px );
}
.rfpshelf .rfpshelfm50 {
flex-flow: row wrap;
}
.rfpshelf .rfpshelfm50 > .rfpstack {
flex: 0 0 50%;
max-width: 50%;
}
.rfpshelf .rfpshelfm50 > .rfpblock {
flex: 0 0 calc( 50% - 10px );
max-width: calc( 50% - 10px );
}
.rfpshelf .rfpshelfm50 > .rfpstack.rfpkeepwide {
flex: 0 0 100%;
max-width: 100%;
}
.rfpshelf .rfpshelfm50 > .rfpblock.rfpkeepwide {
flex: 0 0 calc( 100% - 10px );
max-width: calc( 100% - 10px );
}
}
@media (min-width: 1440px) {
.rfp100-100-67size,
.rfp100-50-67size {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.rfpblock.rfp100-100-67size,
.rfpblock.rfp100-50-67size {
flex: 0 0 calc( 66.666667% - 10px );
max-width: calc( 66.666667% - 10px );
}
.rfp100-100-50size,
.rfp100-50-50size {
flex: 0 0 50%;
max-width: 50%;
}
.rfpblock.rfp100-100-50size,
.rfpblock.rfp100-50-50size {
flex: 0 0 calc( 50% - 10px );
max-width: calc( 50% - 10px );
}
.rfp100-100-33size,
.rfp100-50-33size {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.rfpblock.rfp100-100-33size,
.rfpblock.rfp100-50-33size {
flex: 0 0 calc( 33.333333% - 10px );
max-width: calc( 33.333333% - 10px );
}
.rfpshelf {
flex-flow: row wrap;
}
.rfpshelf > .rfpstack {
flex: 0 0 50%;
max-width: 50%;
}
.rfpshelf > .rfpblock {
flex: 0 0 calc( 50% - 10px );
max-width: calc( 50% - 10px );
}
.rfpshelf > .rfpstack.rfpkeepwide {
flex: 0 0 100%;
max-width: 100%;
}
.rfpshelf > .rfpblock.rfpkeepwide {
flex: 0 0 calc( 100% - 10px );
max-width: calc( 100% - 10px );
}
}
/******************************
/* Responsive flex appearance *
/******************************/
.rfpbox,
.rfpdesktopbox {
border-radius: 3px;
border: 1px solid #2d8e90;
background: rgba(8, 22, 30, 0.5);
color: #e5ffff;
margin: 5px;
padding: 3px 6px;
}
.rfpblock .heading {
border-bottom: 1px solid #2d8e90;
color: #e5ffff;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size: 132%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.rfpblock > .rarity-common {
border: 1px solid #008e8f;
background: #008e8f;
opacity:0.12;
}
.rfpblock > .rarity-rare {
border: 1px solid #00c0e1;
background: #00c0e1;
opacity:0.12;
}
.rfpblock > .rarity-legendary {
border: 1px solid #cd9b00;
background: #cd9b00;
opacity:0.12;
}
.rfpblock > .rarity-common .heading {
border-bottom: 1px solid #008e8f;
}
.rfpblock > .rarity-rare .heading {
border-bottom: 1px solid #00c0e1;
}
.rfpblock > .rarity-legendary .heading {
border-bottom: 1px solid #cd9b00;
}
.hubbox1 {
border: 1px solid #00AF76 !important;
}
.hubbox2 {
border: 1px solid #008E8F !important;
}
.hubbox3 {
border: 1px solid #7E5FE8 !important;
}
.hubbox4 {
border: 1px solid #BFB11A !important;
}
.hubbox5 {
border: 1px solid #F09012 !important;
}
.hubbox6 {
border: 1px solid #CB45D0 !important;
}
.hubbox7 {
border: 1px solid #0073D0 !important;
}
.hubbox8 {
border: 1px solid #DE3100 !important;
}
.hubbox1 .heading {
border-bottom: 1px solid #00AF76 !important;
}
.hubbox2 .heading {
border-bottom: 1px solid #008E8F !important;
}
.hubbox3 .heading {
border-bottom: 1px solid #7E5FE8 !important;
}
.hubbox4 .heading {
border-bottom: 1px solid #BFB11A !important;
}
.hubbox5 .heading {
border-bottom: 1px solid #F09012 !important;
}
.hubbox6 .heading {
border-bottom: 1px solid #CB45D0 !important;
}
.hubbox7 .heading {
border-bottom: 1px solid #0073D0 !important;
}
.hubbox8 .heading {
border-bottom: 1px solid #DE3100 !important;
}
/*╔═════════════════╗*/
/*║ 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;
}
.filmpshells .iconlink {
padding: 0;
}
.filmpweapons .iconlink {
padding: 23px 0 12px 0;
}
.filmpworld .iconlink {
padding: 6px 0 0 0;
}
/* 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;
}
/*****************
/* Image Borders *
/*****************/
.borderimage {
box-sizing: border-box;
width: 80px;
height: 80px;
float: left;
border: 1px solid var(--color);
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-left: 9px;
}
.borderimage::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: var(--color) var(--color) transparent transparent;
position: absolute;
top: 2px;
right: 2px;
}
.filborderimage {
box-sizing: border-box;
width: 112px;
height: 112px;
border: 1px solid var(--color);
display: flex;
position: relative;
margin-left: 9px;
}
.filborderimage::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: var(--color) var(--color) transparent transparent;
position: absolute;
top: 2px;
right: 2px;
}
.img-align-1 img {
vertical-align: -3px;
}
.img-align-2 img {
vertical-align: top;
}