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.
/* ----------------------------------------- */
/* CSS Imports
/* ----------------------------------------- */
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Footer.css");
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&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;
}
@media screen and (max-width: 720px) {
header#wikigg-header #p-personal li#p-themes > span {
display: inline-block;
}
}
/********* 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 {
--header-height: 35px;
--layout-sidespace: 150px;
--layout-gap: var(--space-md);
}
:root {
/*** top site logo ***/
--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
--theme-site-logo-width: 50px;
--theme-site-logo-height: 50px;
--theme-site-background: url("https://predecessor.wiki.gg/images/d/de/Site_background.jpg");
--game-color-yellow: #FBE8A7;
--pred-gold: #FBE8A7;
--pred-health: #2CFF8F;
--pred-mana: #00A2DB;
--pred-immobilization: #DB4BDB;
--pred-physicaldamage: #f98128;
--pred-physicaldamage-icon: #ff3434;
--pred-physicalpenetration: #af002a;
--pred-physicalarmor: #f98128;
--pred-physicalarmor-icon: #ff3434;
--pred-magicaldamage: #00e6ff;
--pred-magicaldamage-icon: #8746ff;
--pred-truedamage: #ffffff;
--pred-condition: #868790;
--pred-passive: #dbd679;
/* Credits to starcitizen.tools for CSS variables */
--color-primary__h: 220;
--color-primary__s: 50%;
--color-primary__l: 55%;
--color-0__s: 12%;
--color-0__l:10%;
--color-1__s: 12%;
--color-1__l: 13%;
--color-2__s: 12%;
--color-2__l: 15%;
--color-3__s: 12%;
--color-3__l: 18%;
--color-4__s: 12%;
--color-4__l: 20%;
--color-0: hsl(var(--color-primary__h),var(--color-0__s),var(--color-0__l));
--color-1: hsl(var(--color-primary__h),var(--color-1__s),var(--color-1__l));
--color-2: hsl(var(--color-primary__h),var(--color-2__s),var(--color-2__l));
--color-3: hsl(var(--color-primary__h),var(--color-3__s),var(--color-3__l));
--color-4: hsl(var(--color-primary__h),var(--color-4__s),var(--color-4__l));
--color-2--hover: hsl(var(--color-primary__h),12%,19%);
--color-2--active: hsl(var(--color-primary__h),12%,11%);
--color-base--emphasized: hsl(var(--color-primary__h),9%,95%);
--color-base: hsl(var(--color-primary__h),9%,73%);
--color-base--subtle: hsl(var(--color-primary__h),9%,60%);
/* 43 is for gold colour */
--color-primary: hsl(43,var(--color-primary__s),var(--color-primary__l));
--color-primary--hover: hsl(43, 60%,calc(56% * 1.2));
--color-primary--active: hsl(43, 60%,calc(56% * 0.8));
--background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),95%);
--background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),90%);
--background-color-overlay: hsla(var(--color-primary__h),var(--color-0__s),var(--color-0__l),0.95);
--background-color-overlay--lighter: hsla(var(--color-primary__h),var(--color-0__s),var(--color-0__l),0.6);
--background-color-destructive: rgba(221,51,51,0.1);
--background-color-success: rgba(0,175,137,0.1);
--background-color-warning: rgba(255,204,51,0.1);
--background-color-quiet--hover: rgba(255,255,255,0.07000000000000001);
--background-color-quiet--active: rgba(255,255,255,0.03);
--border-color-base: rgba(255,255,255,0.05);
--border-color-subtle: rgba(255,255,255,0.02);
--border-color-interactive: rgba(255,255,255,0.08);
--color-destructive: #dd3333;
--color-destructive--hover: #e35b5b;
--color-destructive--active: #b32424;
--color-warning: #ffcc33;
--color-success: #00af89;
--color-text-error: #dd3333;
--color-text-warning: #ac6600;
--color-text-success: #14866d;
--color-link-new: #dd3333;
--color-link-new--hover: #e35b5b;
--color-link-new--active: #b32424;
--surface-shadow: var(--color-primary__h), 50%, 3%;
--shadow-strength: 0.8;
--filter-invert: invert(1) hue-rotate(180deg);
}
:root {
--font-size-x-small: 0.7rem;
--font-size-small: 0.8rem;
--font-size-medium: .9rem;
--font-size-large: 1rem;
--font-size-x-large: 1.125rem;
--font-size-xx-large: 1.375rem;
--font-size-xxx-large: 1.75rem;
--font-weight-normal: 400;
--font-weight-medium: calc(var(--font-weight-normal) + 100);
--font-weight-semibold: calc(var(--font-weight-normal) + 200);
--font-weight-bold: calc(var(--font-weight-normal) + 300);
--border-radius--small: 4px;
--border-radius--medium: 8px;
--border-radius--large: 12px;
--border-radius--pill: 9999px;
--line-height: 1.6;
--line-height-xs: 1.25;
--line-height-sm: 1.375;
--space-unit: 1rem;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: var(--space-unit);
--space-lg: calc(1.25 * var(--space-unit));
--space-xl: calc(1.5 * var(--space-unit));
--space-xxl: calc(2 * var(--space-unit));
}
:root {
--icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cscript/%3E%3Cscript/%3E%3Cscript/%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z' fill='%23fff'/%3E%3C/svg%3E");
--icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E edit %3C/title%3E%3Cstyle type='text/css'%3E* %7B fill: currentColor%7D%3C/style%3E%3Cpath d='M16.77 8l1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zm-5.81-3.71L1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E");
--icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cpath d='M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6H9z' style='fill:%23fff;fill-opacity:1'/%3E%3Cpath d='M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18z' style='fill:%23fff;fill-opacity:1'/%3E%3C/svg%3E");
--icon-talk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cpath d='M18 4h-1v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2z' style='fill-opacity:1;fill:%23fff'/%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v14l4-4h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z' style='fill-opacity:1;fill:%23fff'/%3E%3C/svg%3E");
--icon-more: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/g%3E%3C/svg%3E%0A");
--icon-watch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z' fill='%23fff'/%3E%3C/svg%3E%0A");
--icon-unwatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z' style='fill:%23fff;fill-opacity:1'/%3E%3C/svg%3E%0A");
--icon-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1' id='svg8' style='cursor:default'%3E%3Cscript id='nimlmejbmnecnaghgmbahmbaddhjbecg'/%3E%3Cstyle type='text/css' id='style4'%3E *%7Bfill:%2336c%7D %3C/style%3E%3Cpath d='M16 9h-5V4H9v5H4v2h5v5h2v-5h5V9z' id='path6' style='fill:%23fff;fill-opacity:1'/%3E%3C/svg%3E%0A");
--icon-article: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' style='cursor:default'%3E%3Cscript id='nimlmejbmnecnaghgmbahmbaddhjbecg'/%3E%3Cstyle%3E *%7Bfill:%23fff%7D %3C/style%3E%3Cpath d='M15 1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zM5 4h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z'/%3E%3C/svg%3E%0A");
}
/* search result suggestion */
body > .suggestions {
--color-primary: var(--color-base);
--color-primary--hover: var(--color-base--emphasized);
}
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, etc.
***********************************************************************************************************/
/** Font **/
html, body {
font-family: 'Rubik', Arial, sans-serif;
color: var(--color-base);
font-weight: var(--font-weight-normal);
}
html {
padding-top: var(--header-height);
}
body {
font-size: var(--font-size-medium);
line-height: var(--line-height);
position: relative; /* Had to add this after removing backdrop-filter since it messed up many elements */
}
ul, ol {
margin: 2px 0 2px 1.5em;
}
li {
margin: 0 0 2px 0;
}
b, strong {
font-weight: var(--font-weight-semibold);
}
pre, code, .mw-code {
color: var(--color-base--subtle);
border: 1px solid var(--border-color-base);
background: var(--color-2);
border-radius: var(--border-radius--small);
}
dt {
font-weight: var(--font-weight-semibold);
color: var(--color-base--emphasized);
}
/** 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(--color-primary);
transition: color .3s;
}
a:visited {
color: var(--color-primary);
}
a:hover, a:active {
text-decoration: underline;
color: var(--color-primary--hover);
}
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited {
color: var(--color-link-new);
}
/*********************************************************************************************************/
/*input, button {
color: var(--color-base);
caret-color: var(--color-base);
}
input[type=submit] {
color: var(--color-base);
}*/
input[type="checkbox"] {
vertical-align: middle;
}
::placeholder {
color: var(--color-base--subtle);
}
/* 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(--color-primary);
}
/* Text color */
.i .note,
.note-text {
color: var(--color-base);
}
.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 styling */
.references {
font-size: 90%; /* References smaller text than main */
}
ol.references li:target, sup.reference:target {
background-color: var(--background-color-warning);
}
/* 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;
}
hr {
height: 1px;
background-color: var(--border-color-base);
border: 0;
margin: 0.2em 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);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background);
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
:root {
--layout-topbar-height: 35px; /* height of wiki.gg topbar */
--layout-sidebar-width: 160px; /* width of side navbar, without gap */
--layout-box-gap: 12px;
--layout-box-border-radius: var(--border-radius--small);
--layout-logo-scale: 1.2;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale));
--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);
}
html:before {
content: "";
background-image: linear-gradient(to bottom, hsla(var(--color-primary__h), 20%, 10%, 0.5) 0%, hsla(var(--color-primary__h), 20%, 10%, .8) 100%), var(--theme-site-background);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: block;
position: absolute;
width: 100%;
height: 300px;
mask-image: linear-gradient(to left, transparent 0%, #fff 0%),
linear-gradient(to right, transparent 0%, #fff 0%),
linear-gradient(to top, transparent 0%, #fff 100%),
linear-gradient(to bottom, transparent 0%, #fff 0%);
mask-position: center;
mask-repeat: no-repeat;
mask-composite: intersect;
}
body {
height: auto;
background-image: linear-gradient(180deg, var(--color-0) 70%, var(--color-1) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
.mw-body, #mw-data-after-content {
margin-left: 0;
}
@media screen and (max-width: 720px) {
.mw-body {
margin-top: 0;
}
}
/*** main grid container ***/
body {
/* self */
box-sizing: border-box;
}
/*** 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: flex;
flex-direction: column;
}
/** unused, hide them **/
#mw-head-base,
#mw-navigation > h2 {
display: none;
}
/** side nav bar **/
#mw-panel {
margin-bottom: 100px;
float: none;
width: unset;
padding: var(--space-sm) 0;
z-index: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
/** #footer: content footer **/
#footer {
grid-column: footer-left/footer-right;
grid-row: footer-start/footer-end;
z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
height: 100%;
display: none;
}
#content,
#mw-navigation,
.mw-footer {
box-sizing: border-box;
overflow-x: clip;
width: 100%;
max-width: calc(100% - var(--layout-sidespace));
margin: 0 auto !important;
padding: var(--space-xs) var(--space-xxl);
}
#p-logo {
position: initial;
width: 100%;
height: var(--theme-site-logo-height);
width: var(--theme-site-logo-width);
margin-bottom: 0;
margin-right: var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xs) 0;
}
/* 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);
background-image: var(--theme-site-logo-image);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: var(--theme-site-logo-height);
width: var(--theme-site-logo-width);
margin: auto;
}
/**** Main Layout END ***********************************************************/
/********* side panel START *********/
#mw-panel {
--list-body-font-size: 10pt;
--list-body-padding-x: 6px;
--list-body-padding-y: 3px;
}
#mw-panel a {
text-decoration: none;
}
/* section box */
#mw-panel .portal {
margin: 0 var(--space-lg) 0 0;
padding: 0;
box-sizing: border-box;
border: none;
border-radius: var(--theme-box-border-radius);
box-shadow: var(--theme-box-shadow);
background: none;
margin-top: 0;
position: relative;
}
#mw-panel .portal:has(.vector-menu-content-list:empty) {
display: none;
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
align-items: center;
background: none;
color: var(--color-base--emphasized);
cursor: pointer;
display: flex;
font-size: var(--font-size-medium);
justify-content: space-between;
font-weight: var(--font-weight-normal);
margin: 0;
padding: 6px 4px;
}
/* show the heading of first section */
#mw-panel #p-logo + .portal .vector-menu-heading {
display: flex;
}
#mw-panel .portal .vector-menu-heading::after {
content: "";
display: block;
pointer-events: none;
width: 14px;
height: 14px;
margin-top: 1px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' 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='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' 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='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #fff;
transform: scaleY(-1);
padding-left: 10px;
}
#mw-panel .portal:hover .vector-menu-heading::after {
transform: scaleY(-1);
}
/* list body */
#mw-panel .portal .body {
background: var(--color-1);
border: 0;
padding: 0;
margin: 0;
border: 1px solid var(--border-color-base);
position: absolute;
display: none;
left: 0;
top: 100%;
overflow: hidden;
width: max-content;
min-width: 8em;
box-shadow: 0 0 15px 0 var(--color-0);
z-index: 101;
border-radius: var(--border-radius--small);
}
#mw-panel .portal:hover .body {
display: block;
}
#mw-panel .portal .body ul {
padding: 0;
}
#mw-panel .portal .body li {
margin: 0;
padding: 0;
font-size: var(--font-size-medium);
line-height: inherit;
transition: background 0.3s;
}
#mw-panel .portal .body li:hover {
background: var(--color-2--hover);
}
#mw-panel .portal .body li a {
display: flex;
gap: var(--space-sm);
align-items: center;
padding: var(--space-xs) var(--space-sm);
color: var(--color-base);
font-size: var(--font-size-medium);
z-index: 100;
}
#mw-panel .portal .body li a:visited {
color: var(--color-base);
}
#mw-panel .portal .body li a:hover {
color: var(--color-primary);
}
/* "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 {
padding: 0;
background: none;
position: static;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
order: 1;
}
#mw-head, #mw-head #left-navigation, #mw-head #right-navigation {
margin: 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
#right-navigation {
width: 100%;
}
/*** 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: center;
}
/* tab */
#mw-head {
--theme-tab-border-style: solid;
--theme-tab-border-width: 0px;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
/* outer box */
background: none;
position: relative;
margin-right: var(--layout-gap); /* make space for gap */
}
#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 {
background-color: currentcolor;
content: "";
display: inline-block;
height: 17px;
mask-size: 100% 100%;
margin-right: 5px;
width: 17px;
}
#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: none;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* inner box */
height: auto;
margin: 0;
color: var(--color-base);
background: none;
font-weight: var(--font-weight-normal);
}
.vector-menu-tabs-legacy li a, .vector-menu-dropdown .vector-menu-heading {
padding: 0;
}
#mw-head .vector-menu-tabs .mw-list-item a {
display: flex;
align-items: center;
justify-content: center;
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
color: var(--color-base--emphasized);
}
#mw-head .vector-menu-tabs .mw-list-item a.new,
#mw-head .vector-menu-dropdown .vector-menu-heading.new {
color: var(--color-link-new);
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
/* outer box: selected */
display: none;
}
#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(--color-primary);
filter: drop-shadow(0 0 5px);
}
/* 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(--color-primary) 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(--color-primary--hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius--small);
background: var(--color-1);
left: 0; /* reset */
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
padding: 0;
}
#mw-head .vector-menu-dropdown .vector-menu-content li {
font-size: var(--font-size-medium);
line-height: inherit;
transition: background .3s;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--color-2--hover);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: flex;
gap: var(--space-sm);
align-items: center;
padding: var(--space-xs) var(--space-sm);
color: var(--color-base);
font-size: var(--font-size-medium);
z-index: 100;
text-decoration: none;
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--color-primary);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--color-primary);
}
/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
width: 1.5em; /* same as line height */
height: 1.5em;
display: block;
box-sizing: content-box;
padding: 0;
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 {
margin: 0;
background-color: var(--color-base);
position: static;
}
#mw-panel .portal:not(:hover) .vector-menu-heading::after {
transform: none;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--color-base--emphasized);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
display: none;
}
.vector-menu-tabs .mw-watchlink.icon a:before, .vector-menu-tabs .mw-watchlink.icon a:hover:before, .vector-menu-tabs .mw-watchlink.icon a:focus:before {
background-image: none !important;
}
/*** items ***/
#p-cactions #p-cactions-label::after,
#p-cactions::after {
display: none !important;
}
#ca-edit a::before,
#ca-viewsource a::before {
-webkit-mask: var(--icon-edit);
mask: var(--icon-edit);
}
#ca-history a::before {
-webkit-mask: var(--icon-history);
mask: var(--icon-history);
}
#ca-talk a::before {
-webkit-mask: var(--icon-talk);
mask: var(--icon-talk);
}
#p-cactions-label::before {
-webkit-mask: var(--icon-more);
mask: var(--icon-more);
}
#ca-watch a::before {
-webkit-mask: var(--icon-watch);
mask: var(--icon-watch);
}
#ca-unwatch a::before {
-webkit-mask: var(--icon-unwatch);
mask: var(--icon-unwatch);
}
#ca-addsection a::before {
-webkit-mask: var(--icon-add);
mask: var(--icon-add);
}
#ca-view a::before {
-webkit-mask: var(--icon-article);
mask: var(--icon-article);
}
#p-cactions-label span {
display: none;
}
.mw-list-item[id^=ca-nstab-] {
display: none;
}
/*** search form ***/
#mw-head #p-search form {
margin: 0;
}
#mw-head #p-search .vector-search-box-input {
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius--small);
color: var(--color-base);
transition: .3s;
height: 30px;
background: var(--color-2);
padding: 0 26px 0 var(--space-xs);
font-size: var(--font-size-medium);
}
#mw-head #p-search .vector-search-box-input:hover {
border-color: var(--border-color-interactive);
background: var(--color-2--hover);
}
#mw-head #p-search .vector-search-box-input:focus {
border-color: var(--border-color-interactive);
outline: 0;
z-index: 1100;
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
color: var(--color-base--subtle);
}
#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(--color-base);
}
#mw-head #p-search {
box-sizing: border-box;
border: none;
background: none;
box-shadow: none;
padding: 0;
left: 0;
margin-left: auto;
margin-right: 0;
right: auto;
z-index: auto;
border-radius: 0;
border-top: 0;
border-left: 0;
border-right: 0;
}
@media screen and (max-width: 900px) {
:root {
--layout-sidespace: 0;
}
html:before {
height: 150px;
}
#content, #mw-navigation, .mw-footer {
padding: var(--space-xs) var(--space-sm);
}
#mw-panel .menu-toggle {
--mask: var(--icon-menu) 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(--color-base);
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 40px;
}
#mw-panel .menu-toggle.expanded ~ .portal {
display: block;
}
#p-logo {
width: 100%;
}
#mw-panel {
display: block;
margin-bottom: 0;
}
#mw-panel .portal {
box-sizing: border-box;
display: none;
box-shadow: none;
background: var(--color-1);
margin: 0;
border-radius: 0;
}
#mw-panel .portal .vector-menu-heading {
padding: 0 var(--space-sm);
color: var(--color-base--subtle);
border: 0;
display: block;
background: none;
padding-top: var(--space-sm);
}
#mw-panel .portal .vector-menu-heading::after {
display: none;
}
#mw-panel .portal .body {
display: block;
position: unset;
border: 0;
background: none;
backdrop-filter: none;
box-shadow: none;
width: unset;
}
#mw-panel .portal .body ul {
display: flex;
flex-wrap: wrap;
justify-content: unset;
}
#mw-panel .portal .body li a {
padding: 4px 8px;
white-space: nowrap;
}
#mw-panel .portal:first-child {
padding-top: 50px;
}
#mw-panel .portal:last-child {
padding-bottom: 12px;
border-radius: 0 0 var(--border-radius--small) var(--border-radius--small);
}
#mw-panel .portal .body li:first-child {
margin: 0;
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span {
display: none;
}
}
/*** search result suggestions ***/
.suggestions {
background: var(--color-1);
box-sizing: border-box;
margin-top: 0;
inset: 235px 107px auto auto !important;
border: 1px solid var(--border-color-interactive);
border-radius: var(--border-radius--small);
}
@media screen and (max-width: 900px) {
.suggestions {
inset: 135px 12px auto auto !important;
}
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: none;
}
.suggestions .suggestions-results {
border: 0;
border-top: 0;
}
.suggestions .suggestions-results:empty {
border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
color: var(--color-base);
}
.suggestions .suggestions-result {
padding: var(--space-xxs) var(--space-xs);
}
.suggestions .suggestions-special {
margin: 0;
padding: var(--space-xxs) var(--space-xs);
border: 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(--color-primary);
}
.suggestions .suggestions-result-current {
background: var(--color-2--hover);
color: var(--color-primary--hover);
transition: background .3s;
}
.suggestions .suggestions-result-current .special-label, .suggestions .suggestions-result-current .special-query {
color: var(--color-primary--hover);
}
/**** main content box ****/
/* font */
.vector-body {
font-size: unset; /* reset */
line-height: var(--line-height)/*1.7142857143*/;
}
/** layout **/
#content {
color: var(--color-base);
display: flex;
flex-direction: column;
background: none;
}
.content-body {
flex: 1 1 auto;
}
#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(--color-base--subtle);
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(--color-primary);
border-style: solid;
border-width: 0 0 2px 2px;
margin: 0 2px 0 0;
transform: rotate(45deg);
}
#contentSub::after {
content: "";
display: block;
height: 0;
border-bottom: none;
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: 30em;
}
/*** "category:" box ***/
.catlinks {
display: flex;
position: relative;
background-color: var(--color-1);
border-radius: var(--border-radius--small);
color: var(--color-base--subtle);
font-size: var(--font-size-small);
min-height: 32px;
margin-top: var(--space-xs) !important;
border: none !important;
}
.mw-normal-catlinks > a {
color: var(--color-base--subtle);
}
#mw-normal-catlinks {
display: table;
box-sizing: border-box;
width: 100%;
padding: var(--space-xs) var(--space-sm);
}
.catlinks ul {
display: inline-flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.catlinks li {
border-left: 0;
padding: 0
}
.mw-hidden-cats-hidden, .catlinks-allhidden {
display: none;
}
/*** 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(--color-base);
}
#footer a {
color: var(--color-primary);
}
#footer a:hover {
color: var(--color-primary--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: none;
border-radius: var(--theme-box-border-radius);
box-shadow: none;
background: none;
z-index: -1;
}
#content, #footer {
box-sizing: border-box;
background-clip: padding-box;
border: 0;
}
#mw-head {
border-bottom-width: 0;
}
#footer {
border-top-width: 0;
}
/* RESPONSIVE LAYOUT */
@media screen and (max-width: 600px) {
/* 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;
}
}
/***** 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(--color-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);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background);
transform: none;
}
/* Notification boxes on the right, e.g. after patrolling an edit */
.mw-notification.mw-notification-type-error {
color: var(--color-destructive);
border-color: var(--color-destructive);
}
.mw-notification.mw-notification-type-warn {
color: var(--color-warning);
border-color: var(--color-warning);
}
/****** 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 {
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(--color-base--emphasized);
font-family: inherit;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-sm);
}
.mw-body h1, .mw-body-content h1 {
font-size: 32px;
line-height: 40px;
}
#firstHeading, .mw-first-heading {
margin-top: 0;
}
.mw-body-content h2:not(.portable-infobox h2, .toc h2) {
font-size: 24px;
line-height: 30px;
margin-top: 18px;
margin-bottom: 9px;
border-bottom: 1px solid var(--border-color-base) !important;
padding-bottom: var(--space-sm);
}
.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;
}
.heading-area {
display: flex;
align-items: center;
}
/* section edit link */
.mw-editsection, .mw-editsection a {
display: inline-block;
margin-left: var(--space-sm) !important; /* override */
color: transparent !important; /* override */
width: 15px;
height: 15px;
--mask: var(--icon-edit);
-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(--color-base);
}
.mw-editsection, .mw-editsection a {
vertical-align: middle;
font-size: 10px;
}
.mw-editsection-bracket {
display: none;
}
/** ToC **/
/* base common style */
.toc {
background: var(--theme-box-background);
border-radius: var(--theme-box-border-radius);
border: 1px solid var(--border-color-base);
margin-top: 18px;
margin-bottom: 18px;
padding: 0;
font-size: 1em;
min-width: 12em;
}
.toc a {
color: var(--color-base);
}
.toc .tocnumber {
color: var(--color-base--subtle);
}
.toc .tocnumber:after {
content: ".";
}
/* header */
.toc {
/* arrow */
/* do not change ToC box width when toggle show/hide. */
}
.toc .toctitle {
background: none;
color: var(--color-primary);
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(--color-base);
margin: 0 6px 0 0;
}
.toc .toctitle #mw-toc-heading {
color: var(--color-base);
font-family: 'Barlow';
font-weight: 600;
}
.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(--color-primary) transparent;
border-width: 0 5px 6px 5px;
vertical-align: middle;
flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before {
border-color: var(--color-primary--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;
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(--color-2--hover);
}
.toc > ul li {
margin: 0;
}
/********* Tables *********/
table {
/* fix 100% width table with border */
box-sizing: border-box;
}
table th {
font-weight: var(--font-weight-semibold);
}
table.lined,
table.bordered,
table.cellborder {
border-collapse: collapse;
border-style: solid;
border-color: var(--border-color-base);
}
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(--border-color-base);
}
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 .thumb .image {
overflow: hidden;
display: inline-block;
border-radius: var(--border-radius--small);
}
html .thumbimage:hover {
transform: scale(1.1);
}
html .thumbimage {
background-color: transparent;
border: 0;
transition: transform 250ms ease;
}
html .thumb .magnify {
display: none;
}
html .thumb .thumbcaption {
text-align: center;
}
html .thumbinner {
border: 0;
background: none;
}
html .thumbborder {
border: 1px solid var(--border-color-subtle);
border-radius: var(--border-radius--small);
}
/** gallery **/
.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 ****************/
.page-Predecessor_Wiki .mw-first-heading {
display: none;
}
.home-header {
position: relative;
padding-top: var( --space-xl );
padding-bottom: var( --space-xl );
line-height: var( --line-height-sm );
text-align: center;
}
.home-header__pretitle {
margin-bottom: var( --space-xxs );
color: var( --color-base--subtle );
font-size: var( --font-size-small );
}
.home-header__title {
margin: 0;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 0.025em;
line-height: 1;
}
.home-header__subtitle {
margin-top: var( --space-xxs );
font-size: var( --font-size-small );
}
.mw-parser-output #home-navigation {
margin-top: var(--space-xs);
}
.mw-parser-output #home-navigation .home.card--button{
height: 6em;
}
.mw-parser-output #home-navigation--header .home-card--button {
height: 6rem;
}
.mw-parser-output #home-navigation--header .home-card {
font-size: var(--font-size-xx-large);
font-weight: var(--font-weight-semibold);
}
.mw-parser-output .home-grid--nav {
display: grid;
grid: auto-flow dense/repeat(auto-fit,minmax(9.375rem,1fr));
grid-auto-rows: minmax(3rem,auto);
grid-gap: var(--space-xs);
}
.mw-parser-output .home-grid {
}
.home-grid {
display: grid;
gap: var(--space-sm);
grid-template-areas:
"navigation navigation"
"featured featured"
"herorotation latestupdate"
"wikinews officiallinks";
}
@media (max-width: 840px) {
.home-grid {
grid-template-areas:
"navigation navigation"
"featured featured"
"herorotation latestupdate"
"wikinews officiallinks";
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1000px) {
.home-grid {
grid-template-areas:
"navigation navigation navigation featured"
"herorotation latestupdate officiallinks wikinews";
grid-template-columns: 3fr 3fr 2fr 2fr;
}
}
#home-featured {
overflow: hidden;
grid-area: featured;
}
#home-featured .home-card__background a {
display: block;
height: 100%;
}
#home-featured .home-card__background:after {
top: unset;
height: 60%;
background: linear-gradient( to top, var(--color-1), transparent );
}
#home-featured .home-card__foreground {
justify-content: flex-end;
}
#home-latestupdate {
grid-area: latestupdate;
}
#home-herorotation {
grid-area: herorotation;
}
#home-herolist {
grid-area: herolist;
}
#home-wikinews {
grid-area: wikinews;
}
#home-officiallinks {
grid-area: officiallinks;
}
#home-navigation--container {
grid-area: navigation;
}
.mw-parser-output .home-card {
position: relative;
padding: var(--space-md);
background: var(--color-1);
border-radius: var(--border-radius--medium);
font-size: var(--font-size-small);
}
.mw-parser-output .home-card table.timeline {
margin-top: var(--space-xs);
}
.mw-parser-output .home-card__badge,
.mw-parser-output .home-card__label {
color: var(--color-base--subtle);
font-size: var(--font-size-small);
}
.mw-parser-output .home-card__badge {
padding: var(--space-xxs)var(--space-xs);
border-radius: var(--border-radius--small);
background: var(--color-2);
}
.mw-parser-output .home-card__header {
color: var(--color-base--emphasized);
font-size: 1rem;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-xs);
}
.mw-parser-output .home-card__header a {
display: flex;
align-items: center;
justify-content: space-between;
}
.mw-parser-output .home-card__header a:after {
content: "▶";
font-size: var(--font-size-x-small);
}
.mw-parser-output .home-card__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--color-1);
border-radius: 8px;
}
.mw-parser-output .home-card__background:after {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background: linear-gradient(to right,var(--color-1),transparent);
content: "";
}
.mw-parser-output .home-card__background picture,
.mw-parser-output .home-card__background img {
width: 100%;
height: 100%;
}
.mw-parser-output .home-card__background img {
object-fit: cover;
object-position: center;
}
.mw-parser-output .home-card__foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-md);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-xxs);
color: #fff;
line-height: var(--line-height-xs);
pointer-events: none;
}
.mw-parser-output .home-card__foreground .home-card__badge {
position: absolute;
top: 0;
right: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
}
.mw-parser-output .home-card__foreground .home-card__header {
color: #fff;
}
.mw-parser-output .home-card__foreground .home-card__label {
color: #bababa;
}
.mw-parser-output .home-card.home-card--button {
overflow: hidden;
padding: 0;
background: #242a31;
border: 0;
}
.mw-parser-output .home-card--button a {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding: 0 var(--space-md);
background: transparent;
color: #fff;
font-weight: var(--font-weight-medium);
}
.mw-parser-output .home-card--button .home-card__background a {
padding: 0;
}
.mw-parser-output .home-card--button img {
transition: transform 250ms ease;
}
.mw-parser-output .home-card--button:hover img {
transform: scale(1.1);
}
.mw-parser-output .home-link {
display: grid;
margin-top: var(--space-xs);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
grid-gap: var(--space-xs);
text-align: center;
}
.mw-parser-output .home-link__button {
display: flex;
}
.mw-parser-output .home-link__button a {
flex-grow: 1;
padding: var(--space-xs);
border: 1px solid var(--border-color-base);
background: var(--color-2);
border-radius: var(--border-radius--medium);
color: var(--color-base--emphasized)!important;
line-height: var(--line-height-xs);
text-decoration: none!important;
}
.mw-parser-output .home-link__button a:hover {
background: var(--color-2--hover);
}
.mw-parser-output .home-link__button a:active {
background: var(--color-2--active);
}
.mw-parser-output #home-content {
margin-top: var(--space-lg);
}
.mw-parser-output .home-footer {
font-size: var(--font-size-small);
font-family: var(--font-family-monospace);
text-align: center;
}
/*********** Main page 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(--color-base);
}
.oo-ui-tabOptionWidget {
color: var(--color-base);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--color-base);
background: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--color-base--subtle);
}
.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(--color-base--subtle);
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(--color-2--active);
border-radius: 4px;
overflow: hidden;
}
.mw-search-form-wrapper #mw-searchoptions {
padding: 1em;
background: var(--theme-box-background);
border: 1px solid var(--border-color-base);
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,
.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(--color-base);
}
#mw-allmessagestable tbody:hover td {
background: var(--color-2--hover);
}
li.gallerybox div.thumb {
background: var(--theme-box-background);
border: 1px solid var(--border-color-base);
}
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(--color-base--subtle);
}
.oo-ui-tabSelectWidget-framed,
#preferences .mw-htmlform-submit-buttons {
background: none;
}
.oo-ui-tabOptionWidget {
color: var(--color-base);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--color-base);
background: none;
}
table.diff .diff-context {
background: rgba(248, 249, 250, 0.15);
color: var(--color-base);
}
table.diff .diff-addedline .diffchange {
background: rgba(74, 166, 255, 0.6);
}
table.diff .diff-deletedline .diffchange {
background: rgba(255, 198, 63, 0.6);
}
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;
}
#pagehistory li.selected {
background: rgba(40, 40, 40, 0.6);
color: var(--color-base);
}
#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(--color-base--subtle);
}
.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;
}
/* Fix for plainlist margins within infobox */
.infobox .plainlist ol,
.infobox .plainlist ul {
margin: 0;
}
/* Portable infobox formatting */
.portable-infobox {
background: var(--color-1);
font-size: var(--font-size-small);
border: none;
overflow: hidden;
border-radius: var(--border-radius--small);
padding-bottom: var(--space-sm);
margin-left: var(--space-sm);
}
.portable-infobox .pi-image {
width: 100%;
}
.portable-infobox .pi-image-thumbnail {
height: auto;
min-width: 100%;
}
.portable-infobox .pi-group[data-item-name="noflex"] {
display: inline;
}
.portable-infobox .pi-group:not(.pi-group[data-item-name="infoboxtop"]) {
padding: 0;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
background: none;
color: var(--color-base--emphasized);
text-align: left;
font-weight: var(--font-weight-semibold);
}
.portable-infobox .pi-header {
margin-top: 5px;
padding-top: 10px !important; /* Override item spacing */
border-top: 1px solid var(--border-color-base);
width: 100%;
}
.portable-infobox .pi-item .pi-data {
display: flex;
flex-direction: column;
flex-basis: 50%;
}
.portable-infobox section {
display: flex;
flex-wrap: wrap;
}
.portable-infobox .pi-item[data-source="caption"] .pi-data-value {
text-align: left;
}
.portable-infobox .pi-item-spacing, .portable-infobox .pi-header.pi-item-spacing {
padding: 0 6px 5px 10px;
}
.portable-infobox .pi-border-color {
border: none;
}
/* Portable infobox data formatting */
.portable-infobox .pi-data-value {
text-align: left;
padding: 0;
flex-basis: 0;
}
.portable-infobox .pi-data-label {
color: var(--color-base--subtle);
text-align: left;
font-weight: var(--font-weight-normal);
flex-basis: min-content;
}
.portable-infobox .pi-group[data-item-name="infoboxtop"] {
position: relative;
}
.portable-infobox .pi-group[data-item-name="infoboxtop"] .pi-image::before { /* Gradient near title */
background: linear-gradient(360deg, var(--color-1) 0%, rgba(0, 0, 0, 0) 65.83%);
position: absolute;
content: '';
width: 100%;
height: 100%;
pointer-events: none;
left: 0;
right: 0;
}
.pi-theme-skin {
float: none;
width: 160px;
font-size: 55%;
display: inline-block;
}
.pi-theme-skin .pi-image-thumbnail {
height: 200px;
max-width: 160px;
object-fit: cover;
object-position: top;
}
.portable-infobox .pi-media-collection-tabs { /* Tab bar */
position: absolute;
justify-content: left;
padding: 5px;
}
.pi-media-collection .pi-tab-link {
background: rgba(var(--theme-page-background-color--secondary--rgb), 0.2);
backdrop-filter: blur(3px);
border: 1px solid transparent;
border-radius: 5px;
margin: 2px;
color: var(--color-base);
font-weight: 700;
font-size: 11px;
padding: 5px;
}
.pi-media-collection .pi-tab-link.current { /* Current tab */
box-shadow: 0 0 10px -2px var(--color-primary);
background: var(--pi-tab-background);
border: 1px solid var(--color-primary);
}
/* Quote settings */
.quote-left, .quote-right {
color: var(--trwiki-quote-color);
font-size: 40px;
font-family: "Arial Black", "Times New Roman", serif;
font-weight: bold;
padding: 3px;
width: 20px;
}
.quote-left {
vertical-align: top;
text-align: left;
line-height: 0.9em;
}
.quote-right {
vertical-align: bottom;
text-align: right;
line-height: 0.1em;
}
/* Sidebox formatting */
.sidebox {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color-base);
border-spacing: 8px 0;
margin-bottom: 4px;
padding: 4px 0;
width: calc(100% - 300px);
}
.sidebox th {
padding: 4px;
}
.sidebox td .cols ul {
margin-top: 0;
margin-bottom: 0;
}
.sidebox td .cols ul li {
break-inside: avoid-column;
}
@media screen and (max-width: 720px) {
.sidebox {
width: calc(100%);
}
}
@media screen and (min-width: 900px) {
.sidebox td .cols {
width: 500px;
}
}
/* Documentation */
.doc,
.doc-footer {
margin: 0 auto var(--space-md);
background: var(--color-1);
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius--medium);
padding: var(--space-md);
}
.doc-header {
padding: 0 var(--space-md) var(--space-sm);
margin: 0 -1em 1em;
border-bottom: 1px solid var(--border-color-base);
}
/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
line-height: inherit;
list-style: none none;
margin: 0;
}
.plainlist ol li,
.plainlist ul li {
margin-bottom: 0;
}
.toccolours {
background-color: unset;
border: unset;
font-size: unset;
padding: unset;
}
/* Hatnote */
.hatnote {
display: inline-block;
background-color: var(--color-2);
border-radius: var(--border-radius--small);
color: var(--color-base--subtle);
font-size: var(--font-size-small);
align-items: center;
padding: var(--space-sm) var(--space-md);
width: 100%;
box-sizing: border-box;
}
/* Reset wikitable */
.wikitable {
background-color: unset;
color: unset;
margin: unset;
border: unset;
border-collapse: separate;
}
.wikitable>tr>th, .wikitable>tr>td, .wikitable>*>tr>th, .wikitable>*>tr>td {
border: unset;
padding: unset;
}
.wikitable>tr>th, .wikitable>*>tr>th {
background-color: unset;
text-align: unset;
}
.wikitable {
margin: var(--space-md) 0;
border-collapse: collapse;
border-radius: var(--border-radius--medium);
overflow: hidden;
outline: 1px solid var(--border-color-base);
outline-offset: -1px;
}
.wikitable tr td, .wikitable tr th{
text-align: inherit;
padding: var(--space-xxs) !important;
}
.wikitable .mw-collapsible-toggle {
width: 5em;
width: auto;
width: fit-content;
}
.wikitable caption .mw-collapsible-toggle {
display: inline-block;
float: left;
}
.wikitable,.wikitable td,.wikitable th,.wikitable tr {
border: 1px solid var(--border-color-base);
}
.wikitable tr td,.wikitable tr th {
border: 1px solid var(--theme-border-color);
border-left: 0;
border-right: 0;
}
.wikitable tr td,.wikitable tr th {
border: 1px solid var(--border-color-base);
border-left: 0;
border-right: 0;
}
.wikitable tr:last-child {
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
overflow: hidden;
}
.wikitable th {
font-weight: var(--font-weight-semibold);
border: 1px solid var(--border-color-vase);
line-height: var(--line-height);
padding: var(--space-xxs) var(--space-xs);
color: var(--color-base--emphasized);
}
.wikitable th hr {
border: 1px solid var(--theme-border-color);
}
.wikitable th {
background-color: var(--color-2) !important;
}
.wikitable td, .wikitable td {
padding: 5px 10px;
border: 1px solid var(--theme-border-color);
}
/* Article tables */
.article-table {
background: rgba(255,255,255,0.02);
border: 0 var(--border-color-base);
border-collapse: collapse;
margin: 1em 1em 1em 0;
}
.article-table td, .article-table th {
border-bottom: 1px solid var(--border-color-base);
padding: 6px 12px;
}
.article-table th {
background: var(--color-2);
color: var(--color-base--emphasized);
}
.article-table .cols ul {
margin-top: 0;
}
/* popups */
.mwe-popups, .mwe-popups .mwe-popups-container {
background: var(--theme-page-background-color--secondary);
}
.mwe-popups .mwe-popups-container,
.mwe-popups .mwe-popups-extract {
color: var(--color-base);
}
.mwe-popups .mwe-popups-extract[dir='ltr']:after {
background-image:linear-gradient(to right,rgba(255,255,255,0),var(--theme-background-color--secondary) 50%);
}
.mwe-popups .mwe-popups-extract[dir='rtl']:after {
background-image:linear-gradient(to left,rgba(255,255,255,0),var(--theme-background-color--secondary) 50%);
}
.mwe-popups .mwe-popups-extract blockquote:after {
background-image:linear-gradient(to bottom,rgba(255,255,255,0),var(--wiki-content-background-color--secondary) 75%);
}
.mwe-popups .mw-ui-icon {
filter: var(--filter-invert);
}
/* ---- Blockquote / Template:Quote ---- */
blockquote {
margin: var(--space-xs) var(--space-xl);
color: var(--color-base--subtle);
border-left: 0 !important;
padding: 0 !important;
font-style: italic;
}
blockquote cite {
display: block;
margin-top: var(--space-xxs);
}
blockquote cite::before {
content: '— '
}
blockquote cite {
font-size: var(--font-size-small);
font-style: normal;
}
/************ Tabber (TabberNeue extension) ************/
.tabber__header {
box-shadow: none/*inset 0 -1px 0 0 var(--border-color-base)*/;
background: none;
margin-bottom: var(--space-sm);
}
.tabber__indicator {
background: var(--color-primary);
}
.tabber__tab {
font-weight: var(--font-weight-medium);
}
.tabber__tab[aria-selected="false"], .tabber__tab[aria-selected="false"]:visited {
color: var(--color-base);
}
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
color: var(--color-primary);
}
/************ Tooltips ************/
.main-tooltip {
border: 1px solid var(--border-color-base);
margin-bottom: 5px;
padding: 2px 5px;
color: var(--color-base);
background: var(--color-2);
max-width: 300px;
font-size: var(--font-size-medium);
overflow: hidden;
display: table;
}
/* Adds padding to the wrapper to make space for a shadow */
#tooltip-wrapper {
padding: 3px 7px 2px 3px;
}
/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
.has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents {
display: none;
}
.tooltips-init-complete {
cursor: help;
}
/* Align images with text the same way it's in page content */
/* Was probably better to play with the classes but that would cause ton of side effects */
.main-tooltip img {
vertical-align: middle;
}
/************ [[Template:Tile]] ************/
.tile {
width: max-content;
height: max-content;
display: inline;
overflow: hidden;
text-align: center;
word-break: break-word;
font-size: 11px;
}
.tile .tile-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--theme-box-border-radius);
}
.img-top {
object-position: top;
}
.img-bottom {
object-position: bottom;
}
.img-left {
object-position: left;
}
.img-right {
object-position: right;
}
/* Template:Gallery */
.template-gallery {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-sm);
}
.template-gallery__item {
width: min-content;
text-align: center;
}
.template-gallery__image {
overflow: hidden;
border-radius: var(--border-radius--small);
}
.template-gallery__image:hover img {
transform: scale(1.1);
}
.template-gallery__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 250ms ease;
}
.template-gallery__caption {
text-align: center;
font-size: var(--font-size-small);
word-break: break-word;
}
/************ [[Template:Label]] ************/
.label {
background-color: var(--label-background-color);
color: var(--color-base);
display: inline-block;
text-transform: uppercase;
padding: .1rem .5rem .1rem .5rem;
border-radius: var(--border-radius--small);
font-size: var(--font-size-x-small);
line-height: 1.5 !important; /* Keep line-height the same no matter where it is, especially for ability boxes */
margin: 1px 0 1px 0 !important; /* Important to override the .portable-infobox .data-value margin */
}
.label-default {
--label-text-color: var(--color-base);
--label-background-color: var(--color-3);
}
.label-grey {
--label-text-color: var(--color-4);
--label-background-color: transparent;
}
.label-blue {
--label-text-color: var(--color-base);
--label-background-color: rgb(68,86,140)
}
.label-black {
--label-text-color: var(--color-base);
--label-background-color: rgb(0,0,0);
}
.label-orange {
--label-text-color: var(--color-base);
--label-background-color: rgb(232,157,5)
}
.label-purple {
--label-text-color: var(--color-base);
--label-background-color: rgb(143,110,162);
}
/************ [[Template:Icon]] ************/
.img-icon {
vertical-align: middle;
}
/************ [[Module:ImageLink]] ************/
.img-imagelink {
background: var(--color-1);
object-fit: cover;
aspect-ratio: 1/1;
height: auto;
}
/************ [[Template:Key]] ************/
.template-key {
display: inline-block;
white-space: nowrap;
cursor: pointer;
line-height: var(--line-height-sm) !important;
}
.template-key kbd {
color: var(--color-base);
border: 1px solid var(--border-color-subtle);
border-radius: var(--border-radius--small);
background: var(--color-3);
padding: .1em .4em .2em .3em;
margin-right: 2px;
font-size: var(--font-size-x-small);
font-family: inherit;
font-style: normal;
}
.mw-json {
color: black;
}
.oo-ui-popupWidget-popup {
background-color: black;
}
/************ [[Template:Hero/statistics]] ************/
.template-statistics {
background: var(--color-1);
padding: var(--space-lg) var(--space-xl);
border-radius: var(--border-radius--small);
width: auto;
display: grid;
word-break: break-word;
}
@media (min-width: 1000px) {
.template-statistics__grid {
--grid-columns: 6;
}
}
@media (max-width: 600px) {
.template-statistics__grid {
--grid-columns: 2;
}
}
.template-levelselect-hero {
white-space: nowrap;
margin: var(--space-xs);
color: var(--color-base--subtle);
}
.template-statistics__stat {
text-align: center;
}
.template-statistics__statname {
color: var(--color-base--subtle);
width: 100%;
display: inline-block;
}
/************ [[Template:Skin]] ************/
.template-skin {
height: 250px;
width: 160px;
display: inline-block;
position: relative;
overflow: hidden;
background: var(--color-1);
border-radius: var(--border-radius--small);
font-size: var(--font-size-small);
margin-right: var(--space-xs);
}
.template-skin__top {
font-size: var(--font-size-x-small);
position: absolute;
top: 0;
margin: var(--space-xs);
line-height: var(--line-height-xs);
}
.template-skin__bottom {
position: absolute;
bottom: 0;
font-size: var(--font-size-x-small);
margin: var(--space-xs);
line-height: var(--line-height-xs);
z-index: 1;
}
.template-skin__header {
color: var(--color-base--emphasized);
font-size: 1rem;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-xs);
}
.template-skin__costs {
display: flex;
flex-direction: row;
gap: 10px;
}
.template-skin__foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-sm);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-xs);
line-height: var(--line-height);
}
.template-skin::after {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background: linear-gradient(to top,var(--color-1),transparent 50%);
content: "";
pointer-events: none;
}
.template-skin::before {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
content: '';
background: linear-gradient(to bottom,var(--color-1),transparent 50%);
pointer-events: none;
}
.template-skin__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.storeItem-rarity {
background: rgb(156,156,156);
color: black;
padding: 1px 15px 1px 3px;
display: inline-block;
clip-path: polygon(0% 0%, 92% 0, 100% 24%, 100% 100%, 0% 100%);
text-transform: uppercase;
font-weight: 600;
vertical-align: middle;
}
#rarity-Common { background: rgb(189,190,191); }
#rarity-Uncommon { background: rgb(113,168,79); }
#rarity-Rare { background: rgb(28,195,218); }
#rarity-Epic { background: rgb(157,89,207); }
#rarity-Legendary { background: rgb(254,100,15); }
/************ [[Template:Patch]] ************/
.patchBanner {
border: 2px solid var(--border-color-base);
width: 80%;
height: 120px;
margin: 10px auto;
padding: 5px;
display: flex;
color: var(--color-base--emphasized);
background: linear-gradient(rgba(var(--theme-page-background-color--rgb), .8), rgba(var(--theme-page-background-color--rgb), .8)), url("https://predecessor.wiki.gg/images/2/2b/Patch_Banner.png");
background-repeat: no-repeat;
background-size: 100%;
background-clip: content-box;
background-position: center;
}
.patchBanner-title {
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
color: var(--color-primary);
}
/************ [[Template:Hero/ability]] ************/
.template-ability {
background: var(--color-1);
padding: var(--space-sm) var(--space-md);
border-radius: var(--border-radius--small);
display: flex;
width: auto;
flex-wrap: wrap;
line-height: var(--line-height);
align-content: flex-start;
word-break: break-word;
}
.template-ability__name h3 {
margin: 0;
}
.template-ability__icon {
width: min-content;
}
.template-ability__notes {
background: var(--color-2);
width: 100%;
border-radius: var(--border-radius--small);
color: var(--color-base--subtle);
font-size: var(--font-size-small);
margin-top: var(--space-sm);
display: block;
}
/*.template-ability:hover .template-ability__notes,
.template-ability:active .template-ability__notes {
display: block;
}*/
.template-ability__name {
font-size: var(--font-size-x-large);
color: var(--color-base--emphasized);
display: inline-block;
width: 100%;
}
.template-ability__description {
align-self: flex-end;
}
.template-ability__text {
width: min-content;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.template-ability__stats {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-xs);
align-content: center;
margin-top: var(--space-sm);
}
.template-ability__divider {
width: 100%;
height: 1px;
background: var(--border-color-base);
margin: var(--space-sm) 0;
}
.abilities {
display: grid;
grid: auto-flow dense / repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(3rem, auto);
gap: var(--space-sm);
}
@media (max-width: 600px) {
.abilities {
--grid-columns: 1;
}
}
@media (min-width: 1000px) {
.abilities {
--grid-columns: 2;
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
gap: var(--space-sm);
}
/* ---- Item effects ---- */
.template-effect__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, 350px));
gap: var(--space-xs);
}
.template-effect {
display: block;
background: var(--color-1);
padding: var(--space-xxs) var(--space-xxs);
border-radius: var(--border-radius--small);
line-height: var(--line-height);
word-break: break-word;
border: 1px solid var(--border-color-base);
}
.template-effect__name {
font-size: var(--font-size-medium);
font-weight: var(--font-weight-semibold);
color: var(--color-base--emphasized);
display: inline-block;
}
.template-effect__description {
padding: var(--space-xxs) var(--space-xs);
}
.template-effect__text {
padding: var(--space-xxs) var(--space-xs);
}
/************ Hero infobox stat chart ************/
#stat-radar-container {
width: 200px;
height: 150px;
margin: 0 auto;
}
.stat-radar {
width: 100% !important;
height: 100% !important;
}
/* Item/Hero Lists & Filter */
.filter-container {
flex-wrap: wrap;
display: flex;
}
.module-items__icon img, .module-heroes__icon img {
background: var(--color-1);
transition: 250ms;
}
.module-items__icon img:hover, .module-heroes__icon img:hover {
border: 1px solid var(--color-primary);
}
#filter-sidebar {
display: flex;
flex-basis: 100%;
gap: var(--space-xxs);
flex-wrap: wrap;
}
#filter-sidebar select {
width: 150px;
background: var(--color-1);
color: var(--color-base-subtle);
padding: var(--space-xs);
border-radius: var(--border-radius--small);
border: 1px solid var(--border-color-interactive);
}
#filter-sidebar input {
width: 150px;
margin: 0 !important;
background: var(--color-1);
color: var(--color-base-subtle);
padding: var(--space-xs);
border-radius: var(--border-radius--small);
border: 1px solid var(--border-color-interactive);
font-family: inherit;
font-size: inherit;
}
/* ---- Columns ---- */
.template-column ul,
.template-column ol {
margin: 0 0 0 var(--space-xxl);
}
.template-column li {
margin: 0 0 var(--space-xxs) 0;
}
.template-column dl {
margin: 0;
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
width: 100%;
}
/* ---- Navbox ---- */
.navbox {
width: 100%;
font-size: var(--font-size-small);
margin: auto;
clear: both;
text-align: center;
}
.navbox-inner,.navbox-subgroup {
width: 100%;
}
.navbox-group,.navbox-title,.navbox-abovebelow {
padding: var(--space-xxs) var(--space-sm);
line-height: var(--line-height);
text-align: center;
border-radius: var(--border-radius--medium);
}
th.navbox-group {
white-space: nowrap;
text-align: left; /* Align Left cuz read words LTR, skim left side charaters first */
}
.navbox,.navbox-subgroup {
background: var(--color-1);
}
.navbox-list {
line-height: var(--line-height);
border-color: var(--color-1);
}
/* Navbox colors */
.navbox-title a, .navbox-group a {
color: var(--color-primary);
}
.navbox-title, .navbox-group, .navbox-title .mw-collapsible-text {
color: var(--color-base--emphasized);
}
.navbox-border {
border-radius: var(--border-radius--medium);
border: 1px solid var(--border-color-subtle);
margin-top: 10px;
margin-bottom: 10px;
}
.navbox-odd {
background: var(--color-1);
}
/* Dark mode navbox */
.navbox-subgroup .navbox-title {
background: var(--color-2);
}
.navbox-subgroup .navbox-subgroup .navbox-title {
background: var(--color-2);
}
.navbox-title {
background: var(--color-2);
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: var(--color-2);
}
.navbox-image {
background: var(--color-1);
}
.navbox-even {
background: var(--color-1);
}
table.navbox {
margin-top: var(--space-sm);
}
table.navbox table.navbox {
margin-top: 0;
}
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox .hlist td dl,.navbox .hlist td ol,.navbox .hlist td ul,.navbox td.hlist dl,.navbox td.hlist ol,.navbox td.hlist ul {
padding: 0.125em 0;
}
.navbox .hlist dl, .navbox .hlist ol, .navbox .hlist ul {
margin: 0;
padding: 0;
}
.hlist dd,.hlist dt,.hlist li {
display: 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;
}
.hlist dt:after {
content: ":"
}
.hlist dd:after,.hlist li:after {
content: " · ";
font-weight: var(--font-weight-bold);
}
.hlist dd:last-child:after,.hlist dt:last-child:after,.hlist li:last-child:after {
content: none;
}
.hlist dd.hlist-last-child:after,.hlist dt.hlist-last-child:after,.hlist li.hlist-last-child:after {
content: none;
}
.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;
}
.hlist dd dd.hlist-last-child:after,.hlist dd dt.hlist-last-child:after,.hlist dd li.hlist-last-child:after,.hlist dt dd.hlist-last-child:after,.hlist dt dt.hlist-last-child:after,.hlist dt li.hlist-last-child:after,.hlist li dd.hlist-last-child:after,.hlist li dt.hlist-last-child:after,.hlist li li.hlist-last-child:after {
content: ") ";
font-weight: normal;
}
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li:before {
content: " " counter(listitem) " ";
white-space: nowrap
}
.hlist dd ol > li:first-child:before,.hlist dt ol > li:first-child:before,.hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
.navbar {
display: inline;
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
.navbar ul {
display: inline;
white-space: nowrap;
}
.mw-body-content .navbar ul {
line-height: inherit;
}
.navbar li {
word-spacing: -0.125em;
}
.navbox .navbar {
display: block;
font-size: 100%;
}
.navbox-title .navbar {
float: left;
text-align: left;
margin-right: 0.5em;
width: 6em;
}
.collapseButton {
float: right;
font-weight: normal;
margin-left: 0.5em;
text-align: right;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.mw-collapsible-toggle {
font-weight: var(--font-weight-normal);
text-align: right;
}
.navbox .mw-collapsible-toggle {
}
/* For Template:Characters_Navbox */
.navbox-list-top > div > div {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* Adds Unknown image for not uploaded files and hides redlink */
.navbox-list a.new[href*="Special:Upload"] {
display: inline-flex;
width: 45px;
height: 45px;
background-image: url(https://predecessor.wiki.gg/images/5/59/Icon_Question.png);
background-size: cover;
vertical-align: middle;
font-size: 0;
}
/* ---- Hero page cards ---- */
.template-herocard {
width: 120px;
height: 90px;
background: transparent;
border-radius: var(--border-radius--medium);
position: relative;
overflow: hidden;
display: inline-block;
margin: 0;
border: 1px solid transparent;
transition: 250ms;
}
.template-herocard:hover {
border: 1px solid var(--color-primary);
}
.template-herocard:hover:before {
background: linear-gradient(to top, var(--background-color-warning), transparent);
}
.template-herocard img {
object-fit: cover;
width: 100%;
height: 100%;
}
.template-herocard:before {
content: '';
width: 100%;
height: 60%;
position: absolute;
top: unset;
background: linear-gradient(to top, var(--color-1), transparent);
position: absolute;
pointer-events: none;
bottom: 0;
left: 0;
right: 0;
display: block;
content: "";
}
.template-herocard__title {
position: absolute;
bottom: 0;
margin: var(--space-xxs) var(--space-xs);
font-size: var(--font-size-small);
color: var(--color-base--emphasized);
font-weight: var(--font-weight-semibold);
pointer-events: none;
line-height: var(--line-height-xs);
text-shadow: -1px 0 .2em black, 0 1px .2em black, 1px 0 .2em black, 0 -1px .2em black;
}
/* Mbox */
.mbox {
--color: 196, 213, 255;
--opacity: 0.15;
display: flex;
position: relative;
/* border: 1px solid;
border-color: rgb(var(--color));
border-left-width: 8px; */
background-color: rgba(var(--color), var(--opacity));
border-radius: var(--border-radius--small);
margin-bottom: var(--space-xs);
color: var(--color-base--subtle);
font-size: var(--font-size-small);
min-height: 32px;
}
.mbox.minor { --color: 207, 174, 74; }
.mbox.moderate { --color: 220, 119, 90; }
.mbox.important { --color: 171, 59, 74; }
.mbox.lua { --color: 70,96,211; }
.mbox.upcoming { --color: 176, 126, 214; }
.mbox__content {
display: table;
box-sizing: border-box;
width: 100%;
padding: var(--space-xs) var(--space-sm);
}
.mbox__content__image {
display: table-cell;
width: 40px;
height: 100%;
text-align: center;
vertical-align: middle;
padding-right: var(--space-md);
}
.mbox__content__wrapper {
display: table-cell;
vertical-align: middle;
}
.mbox__content__header {
display: block;
font-weight: var(--font-weight-medium);
}
.mbox__content__text {
display: block;
}
.mbox__content__text__comment {
font-size: var(--font-size-x-small);
}
.mbox__content__aside {
display: table-cell;
width: 100px;
vertical-align: middle;
text-align: center;
padding: 0 15px;
border-left: 1px solid var(--border-color-base);
}
.mbox__close {
position: absolute;
right: 0;
top: 0;
padding: 2px 7px;
font-weight: bold;
font-size: 16px;
color: var(--color-base);
cursor: pointer;
transition: all .15s ease-in;
}
.mbox__close:hover {
color: var(--color-base--subtle);
}
.mbox__close:after {
content: '×';
}
.mw-collapsed + .mbox__close {
transform: rotate(45deg);
padding: 4px 7px 5px 2px;
}