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=Orbitron&display=swap");
@import url(https://commons.wiki.gg/MediaWiki:wikigg.css?action=raw&ctype=text/css);
/***********************************************************************************************************
* 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;
}
/***********************************************************************************************************
* 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);
background: var(--theme-background);
}
/** link color **/
body a, body a.external, body a.extiw, .mw-parser-output a, .mw-parser-output a.external, .mw-parser-output a.extiw {
text-decoration: none;
color: var(--theme-link-color);
}
body a:visited, body a.external:visited, body a.extiw:visited, .mw-parser-output a:visited, .mw-parser-output a.external:visited, .mw-parser-output a.extiw:visited {
color: var(--theme-link-color-visited);
}
body a:hover, body a:active, body a.external:hover, body a.external:active, body a.extiw:hover, body a.extiw:active, .mw-parser-output a:hover, .mw-parser-output a:active, .mw-parser-output a.external:hover, .mw-parser-output a.external:active, .mw-parser-output a.extiw:hover, .mw-parser-output a.extiw:active {
text-decoration: underline;
color: var(--theme-link-color-hover);
}
body a.selflink, body a.selflink:hover, body a.selflink:active, .mw-parser-output a.selflink, .mw-parser-output a.selflink:hover, .mw-parser-output a.selflink:active {
/* 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).
*/
text-decoration: none;
color: var(--theme-text-color);
}
body a.new, body a.new:visited, .mw-parser-output a.new, .mw-parser-output a.new:visited {
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
color: var(--theme-link-color-redlink);
}
/*********************************************************************************************************/
input, button {
color: var(--theme-control-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;
}
/* Text color */
.i .note,
.note-text {
color: var(--theme-text-color-note);
}
em {
color: var(--theme-text-color-em);
}
.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-background);
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
:root {
--layout-topbar-height: 35px; /* height of wiki.gg topbar */
--layout-sidebar-width: 180px; /* width of side navbar, without gap */
--layout-sidespace: 30px; /* whitespace width on most left and most right */
--layout-content-width: minmax(0,1fr);
--layout-box-gap-x: 20px;
--layout-box-gap-y: 20px;
--layout-logo-scale: 1;
--layout-logo-width: calc(var(--theme-site-logo-width) * var(--layout-logo-scale));
--layout-logo-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale));
--dropdown-item-padding-x: 12px;
--dropdown-item-padding-y: 4px;
--layout-search-box-width: 16em;
--layout-content-min-height: 30em;
--layout-padding-x: 24px;
--layout-padding-y: 16px;
}
@media screen and (min-width: 1800px) {
:root {
--layout-sidespace: minmax(0,1fr); /* whitespace width on most left and most right */
--layout-content-width: 1500px;
}
}
/**** 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) + 30px);
}
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] var(--layout-content-width) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start] var(--layout-box-gap-y) [logo-start] var(--layout-logo-height) [logo-end] var(--layout-box-gap-y) [nav-start aside-start] auto [nav-end content-start] auto [content-end footer-start] auto [footer-end] minmax(0, 1fr) [aside-end] var(--layout-box-gap-y) [page-end footerbar-start] auto [footerbar-end body-end];
gap: 0 var(--layout-box-gap-x);
}
/*** 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;
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: footerbar-start/footerbar-end;
}
/*** logo block. It is absolute position ***/
#p-logo {
position: absolute;
width: 100%;
height: var(--layout-logo-height);
left: 0;
top: calc(var(--layout-topbar-height) + var(--layout-box-gap-y));
background: var(--theme-site-logo-image) center center/var(--layout-logo-width) auto no-repeat;
margin: 0;
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(--layout-logo-width);
height: var(--layout-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;
display: flex;
flex-direction: column;
gap: var(--layout-box-gap-y) var(--layout-box-gap-x);
}
#mw-panel .menu-toggle {
display: none;
}
#mw-panel #t-print {
display: none;
}
#mw-panel a {
text-decoration: none;
}
/* section box */
#mw-panel .portal {
margin: 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-background);
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
background: none;
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;
}
#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 *********/
/**** 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;
}
/****** navbar (#mw-head) ******/
/* reset */
#mw-head * {
float: unset;
font-size: unset;
line-height: unset;
}
/* tabs layout */
#mw-head {
--layout-padding: 12px;
--layout-gap: 6px;
--tab-padding-x: 12px;
--tab-padding-y: 5px;
--icon-size: 1em;
padding: var(--layout-padding) 0 0 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;
height: 100%;
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);
height: 100%;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
position: absolute;
left: 100%;
bottom: calc(0px - var(--theme-border-bottom-width));
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);
}
#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;
--theme-link-color: var(--theme-tab-color-selected);
--theme-link-color-hover: var(--theme-tab-color-selected-hover);
--theme-icon-color: var(--theme-tab-color-selected);
--theme-icon-color-hover: var(--theme-tab-color-selected-hover);
}
#mw-head .vector-menu-tabs .mw-list-item.selected:after {
/* gap */
bottom: 0;
padding-left: var(--theme-tab-border-width); /* 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-tab-color-selected);
}
/* 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-dropdown-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;
line-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-icon-color);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--theme-icon-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: 0;
align-self: stretch;
}
#mw-head #p-search form {
margin: 0;
}
#mw-head #p-search .vector-search-box-inner {
border-width: 1px;
border-style: solid;
border-color: var(--theme-border-color);
border-radius: 2px;
width: var(--layout-search-box-width);
min-width: unset;
max-width: unset;
}
#mw-head #p-search .vector-search-box-inner:hover {
border-color: var(--theme-border-color-hover);
}
#mw-head #p-search .vector-search-box-inner:focus-within {
border-color: var(--theme-border-color-focus);
box-shadow: var(--theme-shadow-focus);
}
#mw-head #p-search .vector-search-box-input {
border: 0;
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:focus {
outline: 0;
box-shadow: none;
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);
background-clip: padding-box;
--theme-heading-rule-color-h1: var(--theme-border-color);
--theme-heading-rule-color-h2: var(--theme-border-color);
}
.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;
border-bottom: 1px solid var(--theme-heading-rule-color-h2);
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: var(--layout-content-min-height);
}
/*** "category:" box ***/
#catlinks {
background: var(--theme-background);
border: 1px solid var(--theme-border-color);
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: var(--layout-padding-top, var(--layout-padding-y)) var(--layout-padding-x) var(--layout-padding-bottom, var(--layout-padding-y));
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 */
font-size: 12px;
}
.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 {
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 > * {
margin-top: 1em;
}
/****** responsive Layout ******/
@media screen and (max-width: 1365px) {
/* change layout */
body {
grid-template-columns: [body-left] 0 [aside-left nav-left content-left footer-left] var(--layout-content-width) [content-right aside-right nav-right footer-right] 0 [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start] var(--layout-box-gap-y) [logo-start] var(--layout-logo-height) [logo-end] var(--layout-box-gap-y) [aside-start] auto [aside-end] var(--layout-box-gap-y) [nav-start] auto [nav-end content-start] auto [content-end footer-start] auto [footer-end] minmax(var(--layout-box-gap-y), 1fr) [page-end footerbar-start] auto [footerbar-end body-end];
}
/* re-style navbar */
#mw-panel {
flex-direction: row;
align-self: end;
align-items: flex-end;
height: min-content;
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-background);
padding: 0 var(--layout-box-gap-x);
/* 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 {
margin: 0;
transform: unset;
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.collapsed .vector-menu-heading::after {
transform: none;
}
#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);
backdrop-filter: var(--theme-dropdown-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#mw-panel .portal .body ul {
padding: 4px;
}
#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;
}
/* search: move to sidebar nav box ("main nav bar") */
#mw-head #p-search {
padding: var(--layout-padding);
border-bottom: 0;
position: absolute;
right: 0;
top: calc(-32px - var(--layout-padding) - var(--layout-box-gap-y) - var(--theme-box-border-width) * 2); /* offset */
z-index: 2;
background: none;
}
.vector-search-box-inner {
width: var(--layout-search-box-width);
max-width: unset;
min-width: unset;
}
#mw-head #right-navigation #p-cactions {
margin-right: 0;
}
/* logo: smaller, and position relative to #mw-panel */
#p-logo {
background-size: var(--layout-logo-width) auto;
margin: 0;
top: calc(0px - var(--layout-logo-height) - var(--layout-box-gap-y));
}
#p-logo .mw-wiki-logo {
width: var(--layout-logo-width);
height: var(--layout-logo-height);
}
/* "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) {
/* change layout */
body {
grid-template-columns: [body-left aside-left nav-left content-left footer-left] var(--layout-content-width) [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;
}
.mw-indicators {
z-index: auto;
}
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
:root {
--layout-logo-scale: 0.75;
}
#p-logo {
width: 100%;
left: 0;
}
#mw-panel {
--height: 36px;
box-shadow: var(--theme-box-shadow2);
display: block;
height: calc(var(--height) + var(--theme-box-border-width) * 2);
}
#mw-panel .portal {
box-sizing: border-box;
display: none;
box-shadow: none;
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-dropdown-backdrop-filter);
border-left: var(--theme-dropdown-border);
border-right: var(--theme-dropdown-border);
margin: 0;
border-radius: 0;
}
#mw-panel .portal .vector-menu-heading {
padding: 0 12px 4px;
border: 0;
display: block;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
display: none;
}
#mw-panel .portal:hover .vector-menu-heading {
background: none;
color: var(--theme-heading-color);
}
#mw-panel .portal .body {
display: block !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: unset;
border: 0;
background: none;
backdrop-filter: none;
padding: 4px 12px;
width: 100%;
box-sizing: border-box;
}
#mw-panel .portal .body ul {
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: unset;
}
#mw-panel .portal .body li a {
padding: 4px 8px;
white-space: nowrap;
}
#mw-panel .portal:last-child {
padding-bottom: 12px;
border-bottom: var(--theme-dropdown-border);
border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
}
#mw-panel .menu-toggle {
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%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-icon-color);
cursor: pointer;
display: block;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin: calc((var(--height) - 24px) / 2) 12px;
}
#mw-panel .menu-toggle.expanded ~ .portal {
display: block;
}
#mw-panel .menu-toggle + .portal {
padding-top: 12px;
border-top: var(--theme-dropdown-border);
}
.vector-search-box-inner {
width: 100vw;
max-width: var(--layout-search-box-width);
}
#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;
--icon-margin: 0px;
--tab-padding-y: 5px;
--tab-padding-x: 5px;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading,
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: calc(var(--icon-size) + var(--icon-margin) * 2); /* same as line height */
height: calc(var(--icon-size) + var(--icon-margin) * 2);
line-height: calc(var(--icon-size) + var(--icon-margin) * 2);
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. **/
padding: var(--tab-padding-y) var(--tab-padding-x);
}
#mw-head .vector-menu-tabs .mw-list-item a::before,
#mw-head .vector-menu-dropdown .vector-menu-heading::before,
#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((calc(var(--icon-size) + var(--icon-margin) * 2) - 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-icon-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before,
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--theme-icon-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span,
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
display: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
display: none;
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.svgviewer.dev/s/434200/outlined-paper-doc */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://github.com/sschoger/heroicons-ui/ */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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");
}
/* https://www.iconfinder.com/iconsets/core-ui-outlined */
#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 {
--layout-logo-scale: 0.5;
}
.vector-search-box-inner {
width: 80vw;
max-width: var(--layout-search-box-width);
}
/* footer */
#footer #footer-icons {
float: none;
}
#footer #footer-info-copyright {
grid-column: l/span 2;
padding-right: 0;
padding-bottom: 40px;
}
#footer #footer-info-copyright img {
right: auto;
left: 0;
}
} /* screen and (max-width:600px) */
@media screen and (max-width: 450px) {
} /* screen and (max-width:450px) */
/***** 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-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;
}
.mw-dismissable-notice {
position: fixed;
left: 2em;
right: 2em;
bottom: 4em;
background: var(--theme-background);
max-width: 500px;
min-height: 80px;
padding: 12px 8px;
box-sizing: border-box;
text-align: left;
border: 1px solid var(--theme-border-color-accent);
border-left-width: 8px;
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: 0 0 10px rgba(127, 127, 127, 0.3);
}
.mw-dismissable-notice .mw-dismissable-notice-close {
font-size: 11px;
}
.mw-dismissable-notice .mw-dismissable-notice-body {
margin: 0px 40px 0px 24px;
font-size: 14px;
}
.mw-dismissable-notice #localNotice {
margin: 0;
}
/***********************************************************************************************************
* 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;
}
/***********************************************************************************************************
* Styles for "real" wiki page content. (in div.mw-parser-output)
***********************************************************************************************************/
/* external link icon. */
.mw-parser-output a.external,
.link-https {
padding-right: 0;
background: none;
}
/* custom icon color*/
.mw-parser-output a.external::after {
content: "";
display: inline-block;
width: 0.875em;
height: 0.875em;
background-color: currentColor;
--mask: url(/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg);
-webkit-mask: var(--mask) no-repeat;
mask: var(--mask) no-repeat;
-webkit-mask-size: auto 0.875em;
mask-size: auto 0.875em;
-webkit-mask-position: right center;
mask-position: right center;
margin-left: 2px;
}
.mw-parser-output > :first-child {
margin-top: 0;
}
#filetoc {
border-color: var(--theme-border-color);
}
/** 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: var(--theme-heading-font-face, inherit);
line-height: var(--theme-heading-line-height, 1.25);
font-weight: var(--theme-heading-font-weight, normal);
}
.mw-body h1, .mw-body-content h1 {
font-size: var(--theme-heading-font-size-h1, 32px);
line-height: var(--theme-heading-line-height-h1, 40px);
font-weight: var(--theme-heading-font-weight-h1, var(--theme-heading-font-weight, normal));
}
.mw-body-content h2 {
font-size: var(--theme-heading-font-size-h2, 24px);
line-height: var(--theme-heading-line-height-h2, 30px);
font-weight: var(--theme-heading-font-weight-h2, var(--theme-heading-font-weight, normal));
margin-top: 18px;
margin-bottom: 9px;
border-bottom: 1px solid var(--theme-heading-rule-color-h2);
padding-bottom: 3px;
}
.vector-body h3 {
font-size: var(--theme-heading-font-size-h3, 20px);
line-height: var(--theme-heading-line-height-h3, 26px);
font-weight: var(--theme-heading-font-weight-h3, var(--theme-heading-font-weight, normal));
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h4 {
font-size: var(--theme-heading-font-size-h4, 16px);
line-height: var(--theme-heading-line-height-h4, 22px);
font-weight: var(--theme-heading-font-weight-h4, var(--theme-heading-font-weight, normal));
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h5 {
font-size: var(--theme-heading-font-size-h5, 14px);
line-height: var(--theme-heading-line-height-h5, 22px);
font-weight: var(--theme-heading-font-weight-h5, bold);
margin-top: 10px;
margin-bottom: 7px;
}
.vector-body h6 {
font-size: var(--theme-heading-font-size-h6, 12px);
line-height: var(--theme-heading-line-height-h6, 20px);
font-weight: var(--theme-heading-font-weight-h1, 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 {
font-size: 1em;
}
.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,
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
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;
}
.gallery.mw-gallery-traditional {
display: flex;
gap: var(--theme-gap-y, 0) var(--theme-gap-x, 0);
flex-wrap: wrap;
margin: auto;
}
.gallery.mw-gallery-traditional.center {
justify-content: center;
}
.gallery.mw-gallery-traditional .gallerybox {
width: min-content !important;
margin: 0;
}
.gallery.mw-gallery-traditional .gallerybox > div {
width: unset !important;
}
.gallery.mw-gallery-traditional .gallerybox .thumb {
background: none;
border: 0;
margin: 0;
}
.gallery.mw-gallery-traditional .gallerybox .thumb > div {
border: 1px solid var(--theme-border-color);
}
.gallery.mw-gallery-traditional .gallerytext {
font-size: 12px;
}
.gallery.mw-gallery-traditional .gallerytext p {
width: auto;
}
html .thumbimage {
background-color: transparent;
border: 0;
}
/** gallery **/
div.thumbinner {
border: 1px solid var(--theme-border-color);
border-radius: var(--theme-box-border-radius);
}
li.gallerybox div.thumb {
border-radius: var(--theme-box-border-radius);
}
.gallery * {
box-sizing: initial;
}
.mw-gallery-traditional .thumb {
display: flex;
}
.mw-gallery-traditional .thumb a {
display: block;
}
.portable-infobox {
border: 1px solid var(--pi-border-color);
padding: var(--pi-padding);
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
text-align: center;
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background--label);
}
.portable-infobox .pi-data {
border-bottom: 0;
gap: 8px;
}
.portable-infobox .pi-data-label {
color: var(--pi-label-text-color);
background: var(--pi-label-background);
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
padding: 6px;
}
.portable-infobox .pi-media-collection-tabs {
gap: 8px;
}
.portable-infobox .pi-tab-link {
border: 0;
border-bottom: 2px solid transparent;
}
.portable-infobox .pi-media-collection .pi-tab-link.current {
background: none;
border-bottom-color: var(--pi-secondary-background);
}
/* Grid background for fighters and ships */
.portable-infobox[data-item-name="infobox_fighter"] .pi-media, .portable-infobox[data-item-name="infobox_ship"] .pi-media {
background: conic-gradient(from 90deg at 1px 1px,#051013 90deg,#11313E 0) -2px -2px/20px 20px; padding: 1em 0em 1em 0em
}
/* Fighter infobox needs wider data label */
.portable-infobox[data-item-name="infobox_fighter"] .pi-data-label {
flex-basis: 120px;
}
.portable-infobox[data-item-name="infobox_fighter"] .pi-image-thumbnail {
padding-top: 4px;
}
@media screen and (min-width:720px) {
.client-js .pi-collapse .pi-header:first-child {
padding-right: 0px;
position: relative
}
}
/***********************************************************************************************************
* 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;
}
/***********************************************************************************************************
* css for specific content pages
***********************************************************************************************************/
/*********** Main page START ****************/
#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: 4 4 800px;
display: flex;
flex-direction: column;
gap: 1em;
}
#mainpage-wrap .content-wrap .r {
flex: 1 1 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
/*********** Main page END ****************/
/* START : MAIN PAGE */
.eContainer {
background-color: #4E4E4E;
border: thin solid black;
margin: 0 0 10px 0;
}
.MainPage_Navigation {
margin-left: auto;
margin-right: auto;
clear: both;
}
.MainPage_Navigation td {
padding: 5px;
}
.buttonContainer {
width: 170px;
height: 60px;
background-image: url(/images/1/15/MenuButtonsBlank.png);
text-align: center;
line-height: 65px;
color: #3ca4ea;
font-family: "Orbitron", sans-serif;
font-size: 16px;
text-decoration: none;
margin-bottom: 10px;
display: inline-block;
}
.buttonContainer a:hover {
text-decoration: none;
}
.buttonArrangement {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* END : MAIN PAGE */
/***********************************************************************************************************
* css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
***********************************************************************************************************/
/********* 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;
}
}
.mw-datatable {
border-color: var(--theme-border-color);
}
.mw-datatable tr:hover td {
background: var(--theme-highlight-background);
}
.mw-datatable th {
background: var(--theme-table-header-background);
}
.cargo-pagevalues-tableinfo {
background: var(--theme-box-background);
}
.license {
border: 1px solid var(--theme-border-color-accent);
padding: 5px;
display: flex;
gap: 1em;
}
/***********************************************************************************************************
* theming vars.
***********************************************************************************************************/
:root {
/*** top site logo ***/
--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
--theme-site-logo-filter: none;
--theme-site-logo-width-px: 450;
--theme-site-logo-height-px: 80;
--theme-site-logo-width: calc(var(--theme-site-logo-width-px) * 1px);
--theme-site-logo-height: calc(var(--theme-site-logo-height-px) * 1px);
/*** site background ***/
--theme-site-background: #000 url(/images/8/80/Site-background.jpg) top center repeat-x fixed;
/* common "box" style */
--theme-box-back-backdrop-filter: none;
--theme-box-border-radius: 2px;
--theme-box-border-width: 1px;
--theme-box-border-style: solid;
--theme-box-border-color: #aadeff;
--theme-box-shadow: #404446;
--theme-box-shadow2: none;
--theme-box-back-background: #000;
/* be used in multi-layer background, so we can't simpy use background-color */
--theme-box-background: linear-gradient(#1c2022,#1c2022);
--theme-background: var(--theme-box-background), var(--theme-box-back-background);
/*** text color ***/
--theme-text-color: #EEE;
--theme-text-color-hover: var(--theme-text-color);
--theme-text-color-note: #bbb;
--theme-text-color-em: #04cc04;
--theme-heading-color: var(--theme-text-color);
--theme-text-color-placeholder: #808080;
--theme-control-text-color: #333;
--theme-control-text-color-hover: #333;
/*** link text color ***/
--theme-link-color: #70b8ff;
--theme-link-color-hover: var(--theme-link-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-redlink: #f61731;
--theme-link-color-focus: var(--theme-link-color);
/* default color for icons */
--theme-icon-color: var(--theme-link-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: #aadeff;
--theme-border-color-accent: #012e59;
--theme-highlight-background: rgba(170, 222, 255, 0.15);
/* dropdown menu */
--theme-dropdown-border: 1px solid var(--theme-box-border-color);
--theme-dropdown-background: #1c2022;
--theme-dropdown-backdrop-filter: none;
/* for wide table */
--theme-wide-table-shadow-color: #999;
/** notification **/
--theme-notice-red-text-color: #ff001f;
--theme-notice-orange-text-color: #ffab5b;
/* portable infobox */
--pi-background: none;
--pi-border-color: var(--theme-box-border-color);
--pi-secondary-background: rgba(255,255,255,0.1);
--pi-secondary-background--label: var(--theme-text-color);
--pi-item-spacing: 1px 0px;
--pi-label-text-color: var(--theme-text-color);
--pi-label-background: none;
--pi-padding: 0px;
--starsector-body-background-color: #1c2022;
--starsector-body-background-color--rgb: 28, 32, 34;
--starsector-secondary-background-color: #012e59;
--starsector-secondary-background-color--rgb: 1, 46, 89;
--starsector-navbox-title-color:#1a1a1a;
--starsector-dark-border-color: #1f5e70;
--starsector-dark-border-color--rgb: 31,94,112;
}
.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.
*/
--druid-background-color: #1c2022;
--druid-background-color--rgb: 28, 32, 34;
--druid-secondary-background-color: #3366cc;
--druid-secondary-background-color--rgb: 51, 102, 204;
--druid-secondary-background-label-color: #fff;
--druid-secondary-background-label-color--rgb: 255, 255, 255;
--druid-tertiary-background-color: #2b2b2b;
--druid-tertiary-background-color--rgb: 43,43,43;
--druid-border-color: #aadeff;
--druid-border-color--rgb: 170, 222, 255;
--druid-link-color: #70b8ff;
--druid-link-color--rgb: 109,138,251;
--druid-link-label-color: #000;
--druid-link-label-color--rgb: 0,0,0;
}
/* content box */
/* main article content box (without top heading) */
/* sidebar */
#mw-panel {
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-link-color);
--theme-border-width: 0;
--theme-gap: 0;
}
#catlinks {
--theme-background: none;
--theme-box-border-radius: 0;
}
#footer {
--theme-background: none;
}
/* navbar */
#mw-head {
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-link-color);
--theme-background: none;
--theme-background-shadow: linear-gradient(to top, rgba(0,0,0,0.05), transparent 6px);
--theme-tab-background: var(--theme-box-background);
--theme-tab-background-selected: var(--theme-box-background);
--theme-tab-color-selected: var(--theme-text-color);
--theme-tab-color-selected-hover: var(--theme-tab-color-selected);
--theme-tab-border-color: var(--theme-box-border-color);
--theme-tab-border-color-selected: var(--theme-box-border-color);
}
#mw-head #p-search {
--theme-border-color: var(--theme-box-border-color);
--theme-link-color: var(--theme-text-color);
--theme-background: var(--theme-box-background);
--theme-border-color-hover: var(--theme-icon-color-hover);
--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-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);
}
.gallery {
--theme-gap-x: 6px;
--theme-gap-y: 6px;
}
.thumb {
--theme-box-border-radius: 0;
}
/***********************************************************************************************************
* dark theme tweak
***********************************************************************************************************/
#filetoc, code,
.mw-changeslist-legend,
.mw-search-profile-tabs, #mw-searchoptions,
.mw-datatable td {
background: none;
}
/* ref */
ol.references li:target, sup.reference:target {
background-color: rgba(255, 255, 255, 0.15);
}
#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,
.mw-prefs-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;
}
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: #ccc;
}
.mw-highlight .nv {
color: #01C2EC;
}
.horse-userprofile {
background-color: transparent;
}
.tabber__header--prev-visible .tabber__tabs {
-webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%);
mask-image: linear-gradient(90deg, transparent, #fff 20%);
}
.tabber__header--next-visible .tabber__tabs {
-webkit-mask-image: linear-gradient(90deg, #fff 80%, transparent);
mask-image: linear-gradient(90deg, #fff 80%, transparent);
}
.tabber__header--prev-visible.tabber__header--next-visible .tabber__tabs {
-webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}
.tabber__indicator {
background: #01c2ec;
}
.tabber__tab {
color: #ccc;
}
.tabber__tab:visited {
color: #ccc;
}
.tabber__tab[aria-selected=true], .tabber__tab[aria-selected=true]:visited {
color: #01c2ec;
}
.tabber__transclusion--loading .tabber__loading-indicator, .tabber__transclusion--loading:before, .tabber__transclusion--loading:after {
background-color: #01c2ec;
}
@media (hover: hover) {
.tabber__tab:hover {
color: #32d8ff;
}
.tabber__tab:active {
color: #05b8e0;
}
.tabber__header__prev:hover, .tabber__header__next:hover {
background-color: rgba(0, 24, 73, 0.03);
}
.tabber__header__prev:active, .tabber__header__next:active {
background-color: rgba(0, 24, 73, 0.05);
}
}
.not-patrolled {
background-color: rgba(255, 255, 170, 0.15);
}
.updatedmarker {
background-color: rgba(183, 244, 48, 0.4);
}
.license .icon {
filter: invert(1) hue-rotate(180deg);
}
#editform .wikiEditor-ui, #editform .editOptions {
filter: invert(1) hue-rotate(180deg);
}
.mw-rcfilters-head, .mw-rcfilters-ui-overlay {
filter: invert(1) hue-rotate(180deg);
}
/***** CSS placed here will be applied to all skins on the entire site. *****/
.i18ndoc {
background-color: #FFF77D;
border-bottom: 1px solid lightgrey;
padding: 3px;
}
/* Ambox design */
.ambox {
font-size: 95%;
width: 80%;
margin: 0 auto;
border: 1px #AAA solid;
border-left: 10px solid #228b22;
border-collapse: collapse;
background-color: #EEE;
}
/* Ambox colours */
.ambox-blue {
border-left: 10px solid #1e90ff; /* Blue (notice) */
}
.ambox-red {
border-left: 10px solid #b22222; /* Red (delete/serious) */
}
.ambox-orange {
border-left: 10px solid #f28500; /* Orange (content) */
}
.ambox-yellow {
border-left: 10px solid #f4c430; /* Yellow (style) */
}
.ambox-purple {
border-left: 10px solid #9932cc; /* Purple (merge) */
}
.ambox-gray {
border-left: 10px solid #bba; /* Gray (protection) */
}
.ambox-green {
border-left: 10px solid #228b22; /* Green */
}
/* Ambox small text */
.ambox-smalltext {
font-size: smaller;
margin-top: 0.5em;
margin-left: 0.8em;
}
/* Ambox image */
.ambox-image { /* The left image cell */
width: 60px;
padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
@media print {
.ambox {
display: none;
}
} /* no ambox when printing */
/* END Ambox */
/* START : Ship (and other) Infobox */
.portable-infobox .pi-data-label {
font-size: 10px;
}
.portable-infobox .pi-title {
font-size: 1.5em;
}
.pi-title, .pi-header {
text-align: center;
background-color: var(--pi-secondary-background);
}
/* most/all of the classes defined below are for old infobox template, no longer used */
.eInfobox_Collapsible {
height: 0;
overflow: hidden;
-moz-transition: height 0.3s;
-webkit-transition: height 0.3s; /* Safari */
-o-transition: height 0.3s;
}
.eInfobox {
font-size: 11px;
width: 280px;
border: thin solid black;
float: right;
margin: 0 0 10px 10px;
}
.eInfobox {
background-color: #4E4E4E;
}
.eInfobox th {
font-size: 12px;
text-align: center;
}
.eInfobox .eInfobox-headerCell {
font-size: 100%;
}
.eInfobox th {
background-color: #5a5959;
}
/* END : Ship (and other) Infobox */
/* - - - - - - - - - - - <syntaxhighlight> - - - - - - - - - - - */
.mw-highlight pre {
border: 1px solid rgba(0, 0, 0, 0.2666666667);
padding: 12px;
max-width: 100%;
background-color: #002b36; /*
background-color:#fdf6e3;*/
line-height: 1em;
color: #839496;
}
/* - - - - - - - - - - - - Syntax highlighting - - - - - - - - - - - - - */
/* HTML & CSS */
.mw-highlight .p {
color: #93a1a1;
} /* punctuation CSS . # : { : ; } ( , ) HTML < / > */
.mw-highlight .o {
color: #93a1a1;
} /* punctuation CSS -- ( : ) [ = ] HTML = */
.mw-highlight .c {
color: #586e75;
font-style: italic;
} /* HTML/CSS comment */
.mw-highlight .cp {
color: #dc322f;
} /* CSS !important HTML <!DOCTYPE> */
.mw-highlight .nt {
color: #268bd2;
font-weight: bold;
} /* html tag name (body, div), after @-rule*/
/* HTML */
.mw-highlight .na {
color: #6c71c4;
} /* attribute (id, class,...) */
.mw-highlight .s {
color: #2aa198;
} /* attribute "value" */
.mw-highlight .ni {
color: #b58900;
} /* special character (&...;) */
/* CSS */
.mw-highlight .n {
color: #93a1a1;
} /* unrecognized syntax */
.mw-highlight .nn {
color: #d33682;
text-shadow: 0 0 #d33682;
} /* id */
.mw-highlight .nc {
color: #6c71c4;
} /* class */
.mw-highlight .nd {
color: #268bd2;
} /* pseudo-class (hover, before) */
.mw-highlight .nb {
color: #2aa198;
} /* text value (solid, hidden) */
.mw-highlight .kc {
color: #2aa198;
} /* text value (rgba, hsl, url) */
.mw-highlight .k {
color: #859900;
} /* propertie, @-rule (@media) */
.mw-highlight .kp {
color: #859900;
font-style: italic;
} /* -webkit- */
.mw-highlight .kp + .k {
font-style: italic;
} /* webkit propertie */
.mw-highlight .mh {
color: #d33682;
} /* hex color (#..) */
.mw-highlight .mi {
color: #b58900;
} /* numeric values */
.mw-highlight .mf {
color: #d33682;
} /* decimal numeric values (0.5) */
.mw-highlight .kt {
color: #b58900;
} /* size unit (px, in) */
.mw-highlight .s2 {
color: #cb4b16;
} /* [...="value"] */
.mw-highlight .sx {
color: #cb4b16;
font-style: italic;
} /* media link */
.mw-highlight .nf {
color: #cb4b16;
font-weight: bold;
} /* --var */
/*****************************
* Dark mode Syntax highlight *
******************************/
.theme-dark .mw-highlight .hll {
background-color: #49483e;
}
.theme-dark .mw-highlight {
background: #272822;
color: #f8f8f2;
}
.theme-dark .mw-highlight .c {
color: #75715e;
} /* Comment */
.theme-dark .mw-highlight .err {
color: #960050;
background-color: #1e0010;
} /* Error */
.theme-dark .mw-highlight .k {
color: #66d9ef;
} /* Keyword */
.theme-dark .mw-highlight .l {
color: #ae81ff;
} /* Literal */
.theme-dark .mw-highlight .n {
color: #f8f8f2;
} /* Name */
.theme-dark .mw-highlight .o {
color: #f92672;
} /* Operator */
.theme-dark .mw-highlight .p {
color: #f8f8f2;
} /* Punctuation */
.theme-dark .mw-highlight .ch {
color: #75715e;
} /* Comment.Hashbang */
.theme-dark .mw-highlight .cm {
color: #75715e;
} /* Comment.Multiline */
.theme-dark .mw-highlight .cp {
color: #75715e;
} /* Comment.Preproc */
.theme-dark .mw-highlight .cpf {
color: #75715e;
} /* Comment.PreprocFile */
.theme-dark .mw-highlight .c1 {
color: #75715e;
} /* Comment.Single */
.theme-dark .mw-highlight .cs {
color: #75715e;
} /* Comment.Special */
.theme-dark .mw-highlight .gd {
color: #f92672;
} /* Generic.Deleted */
.theme-dark .mw-highlight .ge {
font-style: italic;
} /* Generic.Emph */
.theme-dark .mw-highlight .gi {
color: #a6e22e;
} /* Generic.Inserted */
.theme-dark .mw-highlight .gs {
font-weight: bold;
} /* Generic.Strong */
.theme-dark .mw-highlight .gu {
color: #75715e;
} /* Generic.Subheading */
.theme-dark .mw-highlight .kc {
color: #66d9ef;
} /* Keyword.Constant */
.theme-dark .mw-highlight .kd {
color: #66d9ef;
} /* Keyword.Declaration */
.theme-dark .mw-highlight .kn {
color: #f92672;
} /* Keyword.Namespace */
.theme-dark .mw-highlight .kp {
color: #66d9ef;
} /* Keyword.Pseudo */
.theme-dark .mw-highlight .kr {
color: #66d9ef;
} /* Keyword.Reserved */
.theme-dark .mw-highlight .kt {
color: #66d9ef;
} /* Keyword.Type */
.theme-dark .mw-highlight .ld {
color: #e6db74;
} /* Literal.Date */
.theme-dark .mw-highlight .m {
color: #ae81ff;
} /* Literal.Number */
.theme-dark .mw-highlight .s {
color: #e6db74;
} /* Literal.String */
.theme-dark .mw-highlight .na {
color: #a6e22e;
} /* Name.Attribute */
.theme-dark .mw-highlight .nb {
color: #f8f8f2;
} /* Name.Builtin */
.theme-dark .mw-highlight .nc {
color: #a6e22e;
} /* Name.Class */
.theme-dark .mw-highlight .no {
color: #66d9ef;
} /* Name.Constant */
.theme-dark .mw-highlight .nd {
color: #a6e22e;
} /* Name.Decorator */
.theme-dark .mw-highlight .ni {
color: #f8f8f2;
} /* Name.Entity */
.theme-dark .mw-highlight .ne {
color: #a6e22e;
} /* Name.Exception */
.theme-dark .mw-highlight .nf {
color: #a6e22e;
} /* Name.Function */
.theme-dark .mw-highlight .nl {
color: #f8f8f2;
} /* Name.Label */
.theme-dark .mw-highlight .nn {
color: #f8f8f2;
} /* Name.Namespace */
.theme-dark .mw-highlight .nx {
color: #a6e22e;
} /* Name.Other */
.theme-dark .mw-highlight .py {
color: #f8f8f2;
} /* Name.Property */
.theme-dark .mw-highlight .nt {
color: #f92672;
} /* Name.Tag */
.theme-dark .mw-highlight .nv {
color: #f8f8f2;
} /* Name.Variable */
.theme-dark .mw-highlight .ow {
color: #f92672;
} /* Operator.Word */
.theme-dark .mw-highlight .w {
color: #f8f8f2;
} /* Text.Whitespace */
.theme-dark .mw-highlight .mb {
color: #ae81ff;
} /* Literal.Number.Bin */
.theme-dark .mw-highlight .mf {
color: #ae81ff;
} /* Literal.Number.Float */
.theme-dark .mw-highlight .mh {
color: #ae81ff;
} /* Literal.Number.Hex */
.theme-dark .mw-highlight .mi {
color: #ae81ff;
} /* Literal.Number.Integer */
.theme-dark .mw-highlight .mo {
color: #ae81ff;
} /* Literal.Number.Oct */
.theme-dark .mw-highlight .sa {
color: #e6db74;
} /* Literal.String.Affix */
.theme-dark .mw-highlight .sb {
color: #e6db74;
} /* Literal.String.Backtick */
.theme-dark .mw-highlight .sc {
color: #e6db74;
} /* Literal.String.Char */
.theme-dark .mw-highlight .dl {
color: #e6db74;
} /* Literal.String.Delimiter */
.theme-dark .mw-highlight .sd {
color: #e6db74;
} /* Literal.String.Doc */
.theme-dark .mw-highlight .s2 {
color: #e6db74;
} /* Literal.String.Double */
.theme-dark .mw-highlight .se {
color: #ae81ff;
} /* Literal.String.Escape */
.theme-dark .mw-highlight .sh {
color: #e6db74;
} /* Literal.String.Heredoc */
.theme-dark .mw-highlight .si {
color: #e6db74;
} /* Literal.String.Interpol */
.theme-dark .mw-highlight .sx {
color: #e6db74;
} /* Literal.String.Other */
.theme-dark .mw-highlight .sr {
color: #e6db74;
} /* Literal.String.Regex */
.theme-dark .mw-highlight .s1 {
color: #e6db74;
} /* Literal.String.Single */
.theme-dark .mw-highlight .ss {
color: #e6db74;
} /* Literal.String.Symbol */
.theme-dark .mw-highlight .bp {
color: #f8f8f2;
} /* Name.Builtin.Pseudo */
.theme-dark .mw-highlight .fm {
color: #a6e22e;
} /* Name.Function.Magic */
.theme-dark .mw-highlight .vc {
color: #f8f8f2;
} /* Name.Variable.Class */
.theme-dark .mw-highlight .vg {
color: #f8f8f2;
} /* Name.Variable.Global */
.theme-dark .mw-highlight .vi {
color: #f8f8f2;
} /* Name.Variable.Instance */
.theme-dark .mw-highlight .vm {
color: #f8f8f2;
} /* Name.Variable.Magic */
.theme-dark .mw-highlight .il {
color: #ae81ff;
} /* Literal.Number.Integer.Long */
/*****************************
* End syntax highlight *
******************************/
/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/
/****************************************
* Semantically-correct horizontal lists *
****************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}
/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ": ";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
content: " · ";
font-weight: bold;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child::before,
.hlist dd dt:first-child::before,
.hlist dd li:first-child::before,
.hlist dt dd:first-child::before,
.hlist dt dt:first-child::before,
.hlist dt li:first-child::before,
.hlist li dd:first-child::before,
.hlist li dt:first-child::before,
.hlist li li:first-child::before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child::after,
.hlist dd dt:last-child::after,
.hlist dd li:last-child::after,
.hlist dt dd:last-child::after,
.hlist dt dt:last-child::after,
.hlist dt li:last-child::after,
.hlist li dd:last-child::after,
.hlist li dt:last-child::after,
.hlist li li:last-child::after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li::before {
content: " " counter(listitem) " ";
}
.hlist dd ol > li:first-child::before,
.hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before {
content: " (" counter(listitem) " ";
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/
/******************
* Template:Navbox *
*******************/
.navbox {
clear: both;
margin: 1em 0;
padding: 3px;
width: 100%;
border: 1px solid var(--theme-border-color);
box-sizing: border-box;
}
.navbox-inner,
.navbox-subgroup {
border-spacing: 0;
width: 100%;
}
/* Reduce spacing between adjacent navboxes */
.navbox + .navbox {
margin-top: -1px;
}
/* Spacing between rows */
.navbox-spacer {
height: 2px;
}
/* Title bars and labels */
.navbox-title {
font-weight: bold;
font-size: 115%;
padding: 0.25em 0.6em;
line-height: 1.5em;
color: var(--theme-text-color);
background: var(--starsector-secondary-background-color);
}
.navbox th {
background-color: var(--starsector-navbox-title-color);
}
/* POSSIBLY OUTDATED: use this instead of trying to set the border of .navbox-title */
tr.navbox-gutter {
background-color: rgba(112, 184, 255, 0.4666666667);
}
.navbox-title,
.navbox-abovebelow {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: var(--starsector-navbox-title-color);
color: var(--wiki-content-text-color);
border: none;
}
.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
color: var(--wiki-content-link-color);
}
.navbox-title .mw-collapsible-toggle {
font-weight: normal;
text-align: right;
}
.navbox-title-text {
font-size: 105%;
}
/* Navbox-related links */
.navbox-title .navbar {
float: left;
margin-right: 0.5em;
}
.navbox-title .navbar a.external::after {
content: unset;
}
/* Groups */
.navbox-group {
font-weight: bold;
padding: 0 0.5em;
white-space: nowrap;
text-align: center;
}
/* Zebra colouring for rows */
.navbox-even {
background: rgba(255, 255, 255, 0.0666666667);
}
/* Subgroups: equal group labels between different child navboxes */
.navbox-subgroup > tbody > tr {
display: flex;
}
.navbox-subgroup .navbox-group {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 11em;
flex-grow: 1;
flex-shrink: 0;
white-space: normal;
}
/* Lists */
.navbox-list {
width: 100%;
font-size: 0.9em;
text-align: center;
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
.mw-body .navbox-inner table {
display: table;
}
}
@media screen and (max-width: 720px) {
.mw-body .navbox {
display: none;
}
}
/**********************
* End Template:Navbox *
***********************/
/***********************
* Start DRUID infoboxes *
************************/
.druid-container {
border: 4px solid var(--druid-border-color);
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
width: 16.875em;
box-sizing: border-box;
border-collapse: collapse;
}
@media screen and (max-width: 450px) {
.druid-container {
width: 100%;
}
}
@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-title,
.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;
}
.druid-section {
font-size: 1.25em;
}
.druid-label {
font-weight: bold;
}
.druid-main-images {
padding: 5px;
}
.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: 0.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,
.druid-main-images-file {
display: none;
}
.druid-toggleable-data.focused,
.druid-main-images-file.focused {
display: block;
}
.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;
}
.druid-grid-item {
background: var(--druid-tertiary-background-color);
margin: 0.25em;
padding: 0.25em;
border: 1px solid rgba(var(--druid-border-color--rgb), 0.5);
}
/***********************
* End DRUID infoboxes *
************************/
.wikiEditor-ui-toolbar {
color: #000;
}
.toccolours {
background-color: unset;
border: unset;
font-size: unset;
padding: unset;
}
.mwe-math-fallback-image-inline {
filter:invert(1);
}