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.
/** @format */
@import url('https://commons.wiki.gg/images/1/15/Monogram.ttf');
@import url(https://commons.wiki.gg/MediaWiki:wikigg.css?action=raw&ctype=text/css);
@font-face {
font-family: 'Fibberish';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://commons.wiki.gg/images/5/53/Fibberish.ttf?202403261344) format('truetype');
}
@supports(-moz-appearance:none){
.fandom-table {
background-color: #202e37;
background-clip: padding-box;
border: 10px solid transparent !important;
}
.fandom-table:before {
border-width: 5px !important;
border-style: solid !important;
border-color: transparent !important;
border-image-source: url(/images/f/f3/Inner-container.png) !important;
border-image-slice: 10% !important;
border-image-width: 12px !important;
border-image-outset: 4px !important;
border-image-repeat: stretch !important;
}
.fandom-table > caption {
background-color: #202e37;
background-clip: padding-box;
position: relative;
bottom: -10px;
}
}
.fandom-table tr {
border-bottom: 1px solid #4d5c6230;
}
:root {
--theme-heading-font-face:Fibberish;
--body-font-family:Monogram,Helvetica, Arial, sans-serif;
}
/*****************************************************************************************************#4D5C62******
* 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: Monogram, Fibberish, Helvetica, Arial, sans-serif;
color: var(--theme-text-color);
}
html {
background: var(--theme-site-background);
image-rendering: pixelated;
}
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);
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:hover,
body a.selflink:active,
.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-link-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: 18px;
--layout-box-gap-y: 18px;
--layout-logo-scale: 0.75;
--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: 14em;
--layout-content-min-height: 30em;
--layout-padding-x: 24px;
--layout-padding-y: 24px;
}
@media screen and (min-width: 1794px) {
: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);
}
h2 {
text-align: center !important;
font-size: 30px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/*** 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: content-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: 12px;
box-sizing: border-box;
background: none;
border-image: var(--theme-sidebar-border-image);
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
background: none;
margin: 0;
padding: 6px 10px;
font-size: 20px;
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;
font-size: 16px;
}
#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;
background: none;
border-width: 0;
border-image: var(--theme-main-border-image);
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;
font-size: 19px;
}
/* tabs layout */
#mw-head {
--layout-padding: 12px;
--layout-gap: 6px;
--tab-padding-x: 12px;
--tab-padding-y: 7px;
--icon-size: 1em;
padding: 0;
background: var(--theme-background);
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
}
#mw-head #left-navigation,
#mw-head #right-navigation {
float: none;
flex: 1 1 auto;
margin: 0px -50px;
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);
margin: 0px 35px;
}
#mw-head #left-navigation {
justify-content: flex-start;
}
#mw-head #right-navigation {
justify-content: flex-end;
margin: 0px -18px;
}
#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;
border-image: var(--theme-tab-border-image);
position: relative;
margin-right: var(--layout-gap); /* make space for gap */
padding: 6px 8px 0;
bottom: -7px;
right: -20px;
}
#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;
border-image: var(--theme-tab-border-image-selected);
--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: 0;
border-image: var(--theme-border-image);
padding: var(--theme-padding);
width: var(--layout-search-box-width);
min-width: unset;
max-width: unset;
margin: 0px 27px;
top: 6px;
}
#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: none;
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-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-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: 20px; /* 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);
margin: 0px 11px;
}
#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: 0;
margin: var(--layout-padding-y) 0 0 0;
padding: var(--theme-padding);
border-image: var(--theme-border-image);
}
/*** 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, 0) 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;
background: none;
padding: 13px 12px;
border-image: var(--theme-sidebar-border-image);
/* 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: 9px;
top: calc(-50px - 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: 56px;
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 - 10px) 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);
}
/* 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: 16px;
--icon-margin: 0px;
--tab-padding-y: 6px;
--tab-padding-x: 4px;
}
#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/skins.vector.styles/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;
margin-top: 18px;
margin-bottom: 18px;
padding: 0;
font-size: 1em;
min-width: 12em;
display: none;
}
.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;
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);
}
.button-style {
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
font-family: 'Fibberish';
color: white;
background-color: #b36847;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.button-style:hover {
background-color: #402751;
color: white;
}
.input-style {
padding: 10px 15px;
font-size: 20px;
font-weight: bold;
text-align: center;
text-indent: 80%;
color: white;
background-color: #b36847;
border: none;
border-radius: 5px;
font-family: 'Fibberish';
transition: background-color 0.3s, color 0.3s;
}
.input-style:focus {
background-color: #402751;
color: white;
outline: none;
}
.input-style-tiny {
padding: 10px 15px;
font-size: 20px;
font-weight: bold;
text-align: center;
color: white;
background-color: #b36847;
border: none;
border-radius: 5px;
font-family: 'Fibberish';
transition: background-color 0.3s, color 0.3s;
}
.input-style-tiny:focus {
background-color: #402751;
color: white;
outline: none;
}
.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;
padding: 0px;
border-image: var(--theme-sidebar-border-image);
}
.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 .gallerytext {
font-size: 20px;
}
.gallery.mw-gallery-traditional .gallerytext p {
width: auto;
}
html .thumbimage {
background-color: transparent;
border: 0;
}
/** gallery **/
div.thumbinner {
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);
}
/***********************************************************************************************************
* 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 .footer {
text-align: right;
font-size: 12px;
line-height: 22px;
}
#mainpage-wrap .box {
border-image: url(/images/b/bf/Outer-container.png) 20 fill / 40px;
padding: 18px 24px;
}
#mainpage-wrap h2 {
text-align: center !important;
font-size: 40px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
border-bottom: 0;
padding-top: 5px;
}
#mainpage-wrap .content-wrap {
display: flex;
gap: 1em;
align-items: stretch;
}
@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: 1.5em;
}
#mainpage-wrap .content-wrap .r {
flex: 1 1 360px;
display: flex;
flex-direction: column;
gap: 1.5em;
}
#mainpage-wrap .box.header {
text-align: center;
}
#mainpage-wrap .box.header .welcome h2 {
font-size: 2em;
}
#mainpage-wrap .box.header ul {
display: inline-flex;
align-items: center;
margin: 1.5em auto 0.5em;
gap: 1em;
}
#mainpage-wrap .box.header ul li {
list-style: none;
}
#mainpage-wrap .box.content .gallery {
font-size: 16px;
text-align: center;
margin: 0.5em 0 1em;
display: grid;
grid-template-columns: repeat(auto-fill, var(--basis));
list-style: none;
justify-content: space-evenly;
gap: 1em 1.5em;
}
#mainpage-wrap .box.content .gallery .gallerybox {
width: 100% !important;
}
.gallerybox {
transition: all 0.4s ease-out;
}
.gallerybox:hover {
transform: scale(1.15);
}
#mainpage-wrap .box.content .gallery .gallerybox .thumb {
align-items: center;
justify-content: center;
}
#mainpage-wrap .box.content .gallery .gallerybox .thumb > div {
border: 0;
}
#mainpage-wrap .box.links {
font-size: 16px;
}
#mainpage-wrap .box.links ul {
margin: 0.5em 0 1em;
display: grid;
grid-template-columns: repeat(auto-fill, var(--basis));
list-style: none;
justify-content: space-evenly;
gap: 1em 1.5em;
}
#mainpage-wrap .box.links ul li {
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(--theme-text-color);
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed {
background: none;
}
.oo-ui-panelLayout-framed {
border-color: var(--theme-border-color);
}
/********* 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/c/c9/Logo.png);
--theme-site-logo-filter: none;
--theme-site-logo-width-px: 608;
--theme-site-logo-height-px: 275;
--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: #409649 url(/images/8/84/Site_background.png) center center / cover no-repeat fixed;
/* common "box" style */
--theme-box-back-backdrop-filter: none;
--theme-box-border-radius: 6px;
--theme-box-border-width: 3px;
--theme-box-border-style: solid;
--theme-main-border-image: url(/images/b/b9/Back.png) 38 fill / 58px;
--theme-image-rendering: pixelated;
--theme-sidebar-border-image: url(/images/6/60/Icon_1.png) 10 fill / 15px;
--theme-box-border-color: #10141f;
--theme-box-shadow: none;
--theme-box-shadow2: none;
--theme-box-back-background: #394a50;
/* be used in multi-layer background, so we can't simpy use background-color */
--theme-box-background: linear-gradient(#202e37, #202e37);
--theme-background: var(--theme-box-background), var(--theme-box-back-background);
/*** text color ***/
--theme-text-color: #fff;
--theme-text-color-hover: var(--theme-text-color);
--theme-text-color-note: #ccc;
--theme-text-color-em: rgb(184, 213, 41);
--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: #8aebf1;
--theme-link-color-hover: var(--theme-link-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-redlink: #f3465b;
--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: #7a8687;
--theme-border-color-accent: #11b8ac;
--theme-highlight-background: rgba(255, 255, 255, 0.15);
/* dropdown menu */
--theme-dropdown-border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
--theme-dropdown-background: #402751;
--theme-dropdown-backdrop-filter: none;
/* for wide table */
--theme-wide-table-shadow-color: #999;
--theme-th-background: rgba(255, 255, 255, 0.1);
/** 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: 2px;
}
/* content box */
#content {
--theme-box-background: none;
}
/* 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;
top: 10px;
}
#catlinks {
--theme-background: none;
--theme-box-border-radius: 0;
--theme-border-image: url(/images/9/96/List1.png) 10 10 10 10 fill / 20px 25px 20px 25px;
--theme-padding: 12px 18px 9px;
}
#footer {
--theme-text-color: #ccc;
--theme-background: none;
}
/* navbar */
#mw-head {
--theme-box-border-width: 0px;
--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: none;
--theme-tab-background-selected: none;
--theme-tab-border-image: url(/images/5/5d/Tab-not-active.png) 10 10 10 10 fill / 15px 10px 0 10px;
--theme-tab-border-image-selected: url(/images/5/5d/Tab-not-active.png) 10 10 10 10 fill / 15px 10px 0 10px / 0px 0 0 0;
--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);
--theme-tab-border-width: 0px;
--theme-border-bottom-width: 0px;
}
#mw-head #p-search {
--theme-border-image: url(/images/c/cf/Input-1.png) 8 fill / 14px / 0 17px 0 0;
--theme-padding: 6px 0px 6px 12px;
--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-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;
}
/* ref */
ol.references li:target,
sup.reference:target {
background-color: rgba(255, 255, 255, 0.15);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: #1f3030;
color: var(--theme-text-color);
}
#mw-allmessagestable tbody:hover td {
background: var(--theme-highlight-background);
}
li.gallerybox div.thumb {
background: var(--theme-box-background);
}
ul {
list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="13"><circle cx="2.5" cy="9" r="2.5" fill="#fff"/></svg>');
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed,
#preferences .mw-htmlform-submit-buttons {
background: none;
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
table.diff .diff-context {
background: rgba(248, 249, 250, 0.15);
color: var(--theme-text-color);
}
table.diff .diff-addedline .diffchange {
background: rgba(74, 166, 255, 0.6);
}
table.diff .diff-deletedline .diffchange {
background: rgba(255, 198, 63, 0.6);
}
:root {
--pi-background: rgba(255, 255, 255, 0.1);
}
div.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background: #231c3b;
}
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon {
filter: invert(1);
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagItemWidget .oo-ui-iconElement-icon {
filter: none;
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: #ddd;
}
div.thumbinner {
background: none;
}
#pagehistory li.selected {
background: rgba(40, 40, 40, 0.6);
color: var(--theme-text-color);
}
#mw-indicator-mw-helplink a {
background: none;
position: relative;
}
#mw-indicator-mw-helplink a:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
filter: invert(1);
}
.mw-plusminus-pos {
color: #7cf56e;
}
.mw-plusminus-neg {
color: #ff9a9b;
}
.autocomment,
.autocomment a,
.autocomment a:visited {
color: var(--theme-text-color-note);
}
.mw-message-box-warning {
background-color: rgba(54, 44, 10, 0.5);
border-color: #fc3;
color: #fff;
}
fieldset {
border-color: #ccc;
}
.mw-highlight pre,
.mw-highlight code,
.mw-highlight .mw-code {
color: #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);
}
@media (max-width: 768px) {
.fandom-table {
border-collapse: separate !important;
}
}
.fandom-table {
border-collapse: collapse;
position: relative;
z-index: 1;
width: 100%;
border: 20px solid transparent;
margin: 20px 0px;
}
.fandom-table:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid transparent;
border-image: url(/images/b/bf/Outer-container.png) 20 fill / 40px;
margin: -10px;
image-rendering: pixelated;
z-index: -1;
padding:10px;
}
.fandom-table > caption {
font-size: 16px;
font-weight: 500;
line-height: 1.75;
padding: 38px 30px 0;
text-align: left;
}
.fandom-table tr th {
background-color: var(--theme-th-background);
}
.fandom-table tr td,
.fandom-table tr th {
vertical-align: middle;
padding: 7px;
vertical-align: middle;
text-align: center;
}
.wikiEditor-ui-toolbar {
color: #000;
}
.toccolours {
background-color: unset;
border: unset;
font-size: unset;
padding: unset;
}
.fandom-table thead,
.fandom-table tr.thead {
position: sticky;
top: 2rem;
background: #b36847;
border: 0;
height: 4rem;
}
.fandom-table .HeadBg {
position: sticky;
top: 2rem;
background: #b36847;
border: 0;
height: 4rem;
}
/*sticky header*/
.fandom-table tr.thead-secondary {
position: sticky;
top: 6rem;
background: #b36847;
border: 0;
font-weight: lighter;
}
tr.thead-secondary th.angled {
transform: rotate(-45deg);
padding: 1rem 0;
}
.fandom-table tr {
border-bottom: 1px solid #4d5c6230;
}
.fandom-table tr th {
background: transparent;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.socials {
gap: 20px;
}
.social-icon img {
height: 50px;
width: 50px;
border-radius: 10px;
transition: all 0.4s ease-out;
}
.social-icon:hover img {
transform: scale(1.2);
}
#toc,
.toc {
display: none !important;
}
.fandom-table tr th:hover {
color: #402751;
}
#mw-panel .portal .body li a:hover {
background-color: #221729;
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
background: #221729;
}
.container {
display: flex;
flex-wrap: nowrap; /* By default, no wrapping */
}
@media (max-width: 600px) {
.container {
flex-wrap: wrap; /* Wrapping on phones or smaller screens */
}
}
.vl {
border-left: 3px solid #8f5bb2;
height: 100px;
}
.leaflet-control.ext-datamaps-control.ext-datamaps-control-expandable.leaflet-bar {
border: 1px solid transparent;
border-image: url(/images/b/bf/Outer-container.png) 23 fill / 30px;
image-rendering: pixelated;
z-index: -1;
padding: 10px;
}
.leaflet-control {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important; /* In case there's a shadow creating the effect */
}
.leaflet-bar button {
border: none;
color: inherit;
font-family: inherit;
font-size: 1.6em; /* Adjust the size as needed */
text-align: center;
background-color: #b36847;
}
.leaflet-bar button:hover {
font-family: inherit;
background: none; /* or specify the default background */
color: inherit; /* or specify the default text color */
border: none; /* or specify the default border */
cursor: default; /* or any other cursor style */
background-color: #402751;
}
.leaflet-bar .oo-ui-labelElement-label {
font-family: inherit; /* Inherit the font from the body */
font-size: 1.6em; /* Adjust the size as needed */
}
#bigGroupsContainer label {
font-family: inherit; /* Inherit the font from the body */
font-size: 1.6em; /* Adjust the size as needed */
margin-left: 0.5em;
}
#bigGroupsContainer input[type="checkbox"] {
position: relative;
max-width: none;
width: 1.42857143em; /* Adjust width */
height: 1.42857143em; /* Adjust height */
margin: 0;
opacity: 1; /* Hide the default checkbox */
z-index: 1;
cursor: pointer; /* Change cursor on hover */
}
.oo-ui-widget.oo-ui-inputWidget.oo-ui-textInputWidget input[type="text"]:not(#wpSummary) {
background-color: #b36847;
font-size: 1.6em; /* Adjust this size as needed */
font-family: inherit; /* Ensure it inherits the body font */
color: inherit;
}
/* Change placeholder text color */
.oo-ui-widget.oo-ui-inputWidget.oo-ui-textInputWidget input[type="text"]:not(#wpSummary)::placeholder {
color: inherit;
}
.ext-datamaps-control-search ul.ext-datamaps-control-search-results {
border: 5px solid #b36847;
background: #221729;
backdrop-filter: none !important;
box-shadow: none !important; /* In case there's a shadow creating the effect */
color: inherit; /* Inherit text color */
font-family: inherit; /* Inherit font family */
font-size: 1.6em; /* Adjust the size as needed */
list-style: none; /* Remove default list styles */
margin: 0; /* Remove margin */
padding: 0; /* Remove padding */
}
/* Allow scrolling without showing scrollbar */
.ext-datamaps-control-search ul.ext-datamaps-control-search-results::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}
.ext-datamaps-control-search-results li {
display: flex; /* Use flexbox for better alignment */
align-items: center; /* Center items vertically */
padding: 5px 10px; /* Add some padding for spacing */
cursor: pointer; /* Change cursor on hover */
}
.ext-datamaps-control-search ul.ext-datamaps-control-search-results li:focus,
.ext-datamaps-control-search ul.ext-datamaps-control-search-results li[data-highlighted='true'] {
color: inherit; /* Remove any specific color */
background-color: #402751;
}
.leaflet-popup {
background: #b36847;
}
.leaflet-popup-content-wrapper{
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important; /* In case there's a shadow creating the effect */
}
.leaflet-popup-tip{
background: #b36847;
backdrop-filter: none !important;
box-shadow: none !important; /* In case there's a shadow creating the effect */
}
.ext-datamaps-popup-header .ext-datamaps-popup-subtitle {
color: white; /* Inherit text color */
font-family: inherit; /* Inherit font family */
font-size: 1.8em; /* Adjust the size as needed */
}
.ext-datamaps-popup-header .ext-datamaps-popup-title {
color: white; /* Inherit text color */
font-family: inherit; /* Inherit font family */
font-size: 1.6em; /* Adjust the size as needed */
}
.ext-datamaps-popup-header .ext-datamaps-popup-location {
color: white; /* Inherit text color */
font-family: inherit; /* Inherit font family */
font-size: 1.4em; /* Adjust the size as needed */
}
.leaflet-control-container .ext-datamaps-control-coords {
background: #b36847 !important;
color: white;
}
.leaflet-bar .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button{
color: inherit;
margin: 0 5px; /* Add horizontal spacing between buttons */
border: none;
font-family: inherit;
font-size: 1.2em; /* Adjust the size as needed */
text-align: center;
background-color: #b36847;
}
.leaflet-bar .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:hover{
background: none; /* or specify the default background */
color: inherit; /* or specify the default text color */
border: none; /* or specify the default border */
cursor: default; /* or any other cursor style */
background-color: #402751;
}
.leaflet-bar .oo-ui-buttonElement .oo-ui-labelElement-label {
font-size: 1.2em; /* Adjust this size as needed */
font-family: inherit; /* Ensure it inherits the body font */
}
#balloon-container {
position: fixed; /* Ensure it stays in place */
top: 0;
left: 0;
width: 100vw; /* Full width */
height: 100vh; /* Full height */
z-index: -2; /* Behind other content */
}
/* Balloon container */
.balloon {
position: absolute;
bottom: -150px; /* Start below the screen */
opacity: 1;
animation: floatUp 10s ease-in infinite; /* Floating animation */
z-index: -2; /*Set a high z-index to ensure visibility */
}
/* Keyframes for the floating effect */
@keyframes floatUp {
from {transform: translateY(0);}
to {transform: translateY(-100vh);}
}