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 placed here will be applied to all skins */
/*
* For the stylesheets of the different themes see:
* - [[MediaWiki:Theme-Spring.css]]
* - [[MediaWiki:Theme-Summer.css]]
* - [[MediaWiki:Theme-Fall.css]]
* - [[MediaWiki:Theme-Winter.css]]
* - [[MediaWiki:Theme-Starry Night.css]]
*
*/
/* === FONTS Start === */
@font-face {
font-family: "Pixel Operator 8";
src: url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.eot");
src: url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.eot?#iefix")format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.woff2")format("woff2"),
url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.woff")format("woff"),
url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.ttf")format("truetype"),
url("https://db.onlinewebfonts.com/t/bb13892bf8199fb79e1cc174d4d5878c.svg#Pixel Operator 8")format("svg");
}
/* === FONTS End === */
/* === DISPLAY LOGO === */
/* helps refresh and display latest uploaded logo */
.mw-wiki-logo {
background-image: url(/images/e/e6/Site-logo.png?example);
}
/* === MISCELLANEOUS STYLES Start === */
/* input Special:Uploads */
.mw-input input {background-color:var(--theme-secondary-color, #572a25); color:var(--theme-text-color, #e6e5e2);}
.mw-input textarea {background-color:var(--theme-secondary-color, #572a25); color:var(--theme-text-color, #e6e5e2);}
.mw-input select {background-color:var(--theme-secondary-color, #572a25); color:var(--theme-text-color, #e6e5e2);}
/* after pagetitle hr */
#contentSub::after {
text-align: center;
border: 10px solid var(--theme-primary-color, #78413b);
border-image-repeat:stretch stretch;
border-image: url(https://rootsofpacha.wiki.gg/images/1/10/Separator.png);
border-image-slice: 33 fill;
border-width: 0 17px 13px 17px;
/*line-height: 20px;*/
margin:10px;
}
h1{
color: var(--heading-color);
font-family: inherit !important;
text-align: center;
border-width: 0;
position: relative;
display: block;
padding-bottom: 10px;
border: 10px solid red;
border-color: red;
border-image-repeat:stretch stretch;
border-image: url(https://rootsofpacha.wiki.gg/images/1/10/Separator.png);
border-image-slice: 33 fill;
border-width: 0 17px 13px 17px;
height: 37px;
}
/* === MISCELLANEOUS STYLES End === */
/* === OOUI Start === */
/* caret color generic, doesn't work like this */
input,button {caret-color: black;}
/* editing page */
#wpTextbox1 {background-color: var(--theme-box-background, #78413b); color:var(--theme-text-color, #e6e5e2);}
/* linkSuggest color */
.ui-widget-content a {color:var(--theme-secondary-color, #572a25);}
/* input box generic, doesn't work */
/*.oo-ui-textInputWidget .oo-ui-inputWidget-input {background-color:var(--theme-secondary-color, #572a25); color:var(--theme-text-color, #e6e5e2);}*/
/*.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {background-color: #fff;}*/
/*.oo-ui-menuSelectWidget {background-color: #fff;}*/
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input, .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
background-color:var(--theme-secondary-color, #572a25);
color:var(--theme-text-color, #e6e5e2);
}
/* edit page bottom */
.editOptions {background-color:var(--theme-secondary-color, #572a25); color: var(--theme-text-color, #e6e5e2);}
.mw-body-content h2 {border-bottom:1px dashed var(--theme-text-color, #e6e5e2);}
/* === OOUI End === */
/* === BODY Start === */
/* wiki background image, change with themes */
html {
background: var(--theme-secondary-color, #572a25)
var(--theme-site-image, url(https://rootsofpacha.wiki.gg/images/f/f9/Fall_BG.png))
no-repeat
fixed
top
center / cover;
background-attachment: fixed;
}
.mw-body {
border-radius:10px;
background-color: var(--theme-box-background, #f9fefb);
border:none;
color: var(--theme-text-color, #e6e5e2);
}
.mw-body a,
.mw-body a:visited,
.mw-body a:hover,
.mw-body a:active {
color: var(--theme-link-color, #f6d999);
}
.mw-body a.new {
color: #bf3b0f;
text-decoration-style: dashed;
}
html, body {
/*font-family: Helvetica, Arial, sans-serif;*/
color: var(--theme-text-color, #e6e5e2);
}
/* Text color */
#content {
color: var(--theme-text-color, #e6e5e2);
padding-top:65px;
}
/* creates space on either side only for desktop */
@media only screen and (min-width: 768px) {
#content {
margin-right: 15px;
margin-top:15px;
border-top-right-radius: 5px;
}
}
/* === BODY End(?) === */
/* ------------------------------- MAIN PAGE SECTION Start --------------------------------------------*/
/* Hide main page header */
body.page-Roots_of_Pacha_Wiki #firstHeading {
display: none;
}
body.page-Roots_of_Pacha_Wiki #contentSub::after {
display: none;
}
/* avoid from content going off-screen(?) */
#mpcontainer {
flex-direction: row;
width: 100%;
flex-wrap: wrap;
margin-left: 0;
}
/* mainpage image background color */
.bg-img {
background-color: #ceb686;
padding:10px;
border-radius: 10px;
width: fit-content;
}
.themebox {
width: 100%;
padding: 40px;
margin-bottom: 5px;
margin-top: 5px;
background-color: transparent;
border-image-slice: 83 fill;
border-image-width: 45px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
color: black;
box-sizing: border-box;
max-width: 100%;
}
.themebox a {color:#306EAB!important;}
@media only screen and (max-width: 768px) {
.themebox {
width: 100%!important;
}
}
/* headings inside .themebox */
.themebox h1, .themebox h2,
.themebox h3, .themebox h4,
.themebox h5, .themebox h6 {
padding: 0;
border: 0 solid transparent;
color: #572a25!important;
font-weight:bold;
}
.main-header {
color:white;
width: 60%;
padding: 10px;
margin-bottom: 5px;
background-color: none;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
border-color: #705479;
box-sizing: border-box;
}
/* a raised version of the header, similar to that in-game */
.the-header {
color:white;
width: 60%;
padding: 10px;
margin-bottom: 5px;
background-color: none;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
border-color: #705479;
box-sizing: border-box;
margin: -50px auto 0;
}
/* for mobile full width */
@media only screen and (max-width: 768px) {
.the-header {
width: 80%!important;
}
}
/* social media hover effect */
.social-media {
opacity: 0.8;
transition: 0.3s all ease;
transition-timing-function: cubic-bezier(0.36,1.68,0.46,1);
}
.social-media:hover {
opacity: 1;
transform: perspective(1px) scale(1.1);
}
/* === MAIN PAGE GRID Start === */
@media screen and (min-width:1350px) {
#mpcontainer {
display: grid;
grid:
"mp-welcome mp-welcome mp-welcome mp-welcome mp-welcome mp-extra mp-extra mp-extra mp-platforms mp-platforms"
"mp-mechanics mp-mechanics mp-mechanics mp-mechanics mp-mechanics mp-items mp-items mp-items mp-items mp-items"
"mp-products mp-products mp-products mp-products mp-products mp-products mp-products mp-products mp-products mp-products"
"mp-romance mp-romance mp-romance mp-romance mp-romance mp-romance mp-romance mp-romance mp-romance mp-romance"
"mp-pachans mp-pachans mp-pachans mp-pachans mp-pachans mp-yakuans mp-yakuans mp-yakuans mp-yakuans mp-yakuans"
"mp-pachans mp-pachans mp-pachans mp-pachans mp-pachans mp-mograni mp-mograni mp-mograni mp-mograni mp-mograni"
"mp-locations mp-locations mp-locations mp-locations mp-locations mp-locations mp-locations mp-locations mp-locations mp-locations"
/ 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 3px;
}
}
#mp-welcome { grid-area: mp-welcome; }
#mp-extra { grid-area: mp-extra; }
#mp-platforms { grid-area: mp-platforms; }
#mp-mechanics { grid-area: mp-mechanics; }
#mp-items { grid-area: mp-items; }
#mp-products { grid-area: mp-products; }
#mp-romance { grid-area: mp-romance; }
#mp-pachans { grid-area: mp-pachans; }
#mp-yakuans { grid-area: mp-yakuans; }
#mp-mograni { grid-area: mp-mograni; }
#mp-locations { grid-area: mp-locations; }
/* === MAIN PAGE GRID End === */
/* ------------------------------- MAIN PAGE SECTION End --------------------------------------------*/
/* === CATEGORY LINKS === */
#catlinks { background-color: var(--theme-primary-color); color:white; border-radius:10px; border:1px solid var(--theme-primary-color);}
#catlinks a {color:white;}
/* === DISCUSSION === */
/* Hiding Discussion pages*/
/*#ca-talk,
#pt-mytalk > a,
.mw-usertoollinks.mw-changeslist-links > span:first-child,
.mw-usertoollinks.mw-changeslist-links > span:nth-child(2)::before{
display:none !important;
}*/
/* ------------------------------- TABLES SECTION Start --------------------------------------------*/
table {
display: table;
white-space: unset;
}
table.collapsed tr.collapsible {
display: none;
}
/* main table style */
/* pacha table*/
.pacha {border-collapse: separate; border-spacing: 0; padding: 5px; border: 2px solid #aa9672; color:black; font-size:90%; white-space: normal; overflow-x: auto;}
.pacha th {border-collapse: separate; border: 1px solid #aa9672; background-color:#d3c09a; color:#866347; padding:5px;}
.pacha td {border: 1px solid #aa9672; background-color:#ddcead; padding: 5px;}
.pacha a,
.pacha a:visited,
.pacha a:hover,
.pacha a:active {color:#306EAB;}
.pacha th a,
.pacha th a:visited,
.pacha th a:hover,
.pacha th a:active {color:#306EAB;}
.pacha .mw-parser-output a.extiw, .mw-parser-output a.external {color:#306EAB!important;}
.pacha .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {color:#306EAB!important;}
@media screen and (min-width:1200px) {
.pacha {
overflow-x: unset;
}
.pacha:not(.tabber__panel .pacha) th {
top: +70px;
}
}
/* only first th sticky */
table.pacha>thead>tr:first-child>th,
table.pacha:not(:has(thead))>tbody>tr:first-child>th {
position: sticky;
}
/* headings inside .pacha and .pacha-center */
.pacha h1, .pacha-center h1, .pacha h2, .pacha-center h2,
.pacha h3, .pacha-center h3, .pacha h4, .pacha-center h4,
.pacha h5, .pacha-center h5, .pacha h6, .pacha-center h6 {
padding: 0;
border: 0 solid transparent;
color: #572a25!important;
font-weight:bold;
}
/* pacha table but centered */
.pacha-center {border-collapse: separate; border-spacing: 0; padding: 5px; border: 2px solid #aa9672; color:black; font-size:90%; white-space: normal; overflow-x: auto; text-align:center;}
.pacha-center th {border-collapse: separate; border: 1px solid #aa9672; background-color:#d3c09a; color:#866347; padding:5px;}
.pacha-center td {border: 1px solid #aa9672; background-color:#ddcead; padding: 5px;}
.pacha-center a,
.pacha-center a:visited,
.pacha-center a:hover,
.pacha-center a:active {color:#306EAB;}
.pacha-center th a,
.pacha-center th a:visited,
.pacha-center th a:hover,
.pacha-center th a:active {color:#306EAB;}
.pacha-center .mw-parser-output a.extiw, .mw-parser-output a.external {color:#306EAB;}
.pacha-center .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {color:#306EAB;}
@media screen and (min-width:1200px) {
.pacha-center {
overflow-x: unset;
}
.pacha-center:not(.tabber__panel .pacha-center) th {
top: +70px;
}
}
/* sticky only the first row */
/* only first th sticky */
table.pacha-center>thead>tr:first-child>th,
table.pacha-center:not(:has(thead))>tbody>tr:first-child>th {
position: sticky;
}
/* pachan table */
.pachan-table {border-collapse: collapse; color:black; border-radius: 8px; font-size:90%; white-space: normal; overflow-x: auto;}
.pachan-table th {border-collapse: separate; border: 2px solid #aa9672; background-color:#d3c09a; color:#866347; padding:5px;}
.pachan-table td {border: 2px solid #aa9672; background-color:#ddcead; padding: 5px;}
.pachan-center a,
.pachan-center a:visited,
.pachan-center a:hover,
.pachan-center a:active {color:#306EAB;}
.pachan-center th a,
.pachan-center th a:visited,
.pachan-center th a:hover,
.pachan-center th a:active {color:#306EAB;}
.pachan-table .mw-parser-output a.extiw, .mw-parser-output a.external {color:#306EAB;}
.pachan-table .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {color:#306EAB;}
@media screen and (min-width:1200px) {
.pachan-table {
overflow-x: unset;
}
.pachan-table:not(.tabber__panel .pachan-table) th {
top: +70px;
}
}
/* only first th sticky */
table.pachan-table>thead>tr:first-child>th,
table.pachan-table:not(:has(thead))>tbody>tr:first-child>th {
position: sticky;
}
/* roots table - to decide if to keep or not */
.roots-table {background-color:#d3b787; /*border-spacing: 0 10px;*/ color:#371C09; padding: 10px; border-radius: 8px; white-space: normal;}
.roots-table th {padding: 5px; background-color:#ede3c9; border: 2px solid #ede3c9; color:#866347;}
.roots-table td {padding: 5px; border: 2px solid #ede3c9;}
.roots-table a {color:#306EAB;}
/* table for the calendar page */
.pachan-calendar {color:black; border-radius: 10px; font-size:90%; white-space: normal; overflow-x: auto; border-spacing: 7px;font-family: "Pixel Operator 8", sans-serif;}
.pachan-calendar th {border-radius:10px; border: 3px solid #aa9672; background-color:#d3c09a; color:#866347; padding:5px;}
.pachan-calendar td {border-radius:10px; border: 3px solid #aa9672; background-color:#ddcead; padding: 5px;}
.pachan-calendar td:hover {border: 8px solid #fff540;}
/* for mobile full width */
@media only screen and (max-width: 768px) {
.pachan-calendar td {width: 100px!important;}
}
/* number inside calendar table */
.c-number {
font-size:30px;
font-weight: 900;
color: #e2cea9;
text-shadow: 3px 0 #af916a, -3px 0 #af916a, 0 3px #af916a, 0 -3px #af916a, 2px 2px #af916a, -2px -2px #af916a, 2px -2px #af916a, -2px 2px #af916a;
padding-right:10px;
}
.sortable.mw-collapsed > thead > tr + tr {
display: none;
}
@media screen and (min-width:1200px) {
.pachan-calendar {
overflow-x: unset;
}
.pachan-calendar:not(.tabber__panel .pachan-calendar) th {
top: +70px;
}
}
/* for mobile full width */
@media only screen and (max-width: 768px) {
.pacha {
width: 100%!important;
}
}
/* for mobile full width */
@media only screen and (max-width: 768px) {
.pachan-calendar {
width: 100%!important;
}
}
/* for mobile full width */
@media only screen and (max-width: 768px) {
.pacha-center {
width: 100%!important;
}
}
/* === TABLE SCROLL Start === */
/* For mobile specifically */
@media only screen and (max-width: 768px) {
/** This applies a shadow to left/right when you can scroll horizontally
* This is not applied to the table, but the wrapper created in Common.js
* For this to work, '.pacha' needs a transparent background
**/
.table-scroll-shadow {
overflow: auto;
background-image: linear-gradient(to right, var(--theme-table-td-background), var(--theme-table-td-background)),
linear-gradient(to right, var(--theme-table-td-background), var(--theme-table-td-background)),
linear-gradient(to right, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: var(--theme-table-td-background);
background-size: 40px 100%, 40px 100%, 30px 100%, 30px 100%;
background-attachment: local, local, scroll, scroll;
}
.pacha-center {
background: unset;
}
.pacha {
background: unset;
}
}
/* === TABLE SCROLL End === */
/* ------------------------------- TABLES SECTION End --------------------------------------------*/
/* === PORTABLE INFOBOX Start === */
/* PORTABLE INFOBOX - DEFAULT STYLE */
.portable-infobox {
padding: 25px !important;
box-shadow: none;
border-width:2px;
/*width: 300px;*/
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
border-image-slice: 83 fill;
border-image-width: 40px;
border-image-repeat: round;
border-width: unset;
border-style: solid;
display: inline-block;
line-height: 1.6em;
color: #55432f;
background-color:transparent;
}
.portable-infobox .pi-background {
background-color: transparent;
}
.pi-collapse-closed .pi-header {
margin-bottom: 5px;
}
.portable-infobox .pi-title[class] {
margin: -37px auto 0;
background-color: transparent;
text-shadow:none;
width: 80%;
padding-right: 15px;
padding-left: 15px;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
color: #e6e5e2;
text-align:center;
font-weight:bold;
}
.portable-infobox .pi-header {
color: #55432f;
text-shadow: none;
width: 93%;
padding: 10px;
margin-bottom: 5px;
border: 2px solid #d7c7a2;
border-radius: 5px;
background-color: #ceb686;
text-align:center;
}
.portable-infobox .pi-data-value a {
color:#306eab;
}
/* border colors inside infobox */
.portable-infobox .pi-border-color {
border-color: #ceb686;
}
/* tabber colors inside infobox */
.portable-infobox .wds-tabs__tab.wds-is-current {
color: #306eab;
}
.portable-infobox .wds-tabs__tab {
color: #3a3a3a;
}
.portable-infobox .pi-data-label {
color: #55432f;
text-shadow: none;
}
/* if gallery in in infobox image */
.portable-infobox .pi-tab-link.current {border-radius:10px; margin:2px; background-color:#ceb686; border:1px solid #b9a378;}
.portable-infobox .pi-tab-link {border-radius:10px; margin:2px; border:1px solid #b9a378;}
/* if gallery but as panel */
.pi-section-navigation .pi-section-tab.pi-section-active {border-radius:10px; margin:2px; background-color:#ceb686; border:1px solid #b9a378;}
.pi-section-navigation .pi-section-tab {border-radius:10px; margin:2px; border:1px solid #b9a378;}
/* if one of the galley images has the word "icon" in the title then change the size */
.portable-infobox .pi-image .image-icon img[alt^='Icon'] {
width: 52px;
height: 52px;
padding:5px;
margin:5px;
}
/* if one of the galley images has the word "picture" in the title then change the size */
.portable-infobox .pi-image .image-picture img[alt^='Picture'] {
width: 189px;
height: 189px;
}
/* PORTABLE INFOBOX types */
/* INFOBOX TYPE: pacha (base) */
.portable-infobox.pi-type-pacha {
padding: 25px !important;
box-shadow: none;
border-width:2px;
width: 300px;
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
border-image-slice: 83 fill;
border-image-width: 40px;
border-image-repeat: round;
border-width: unset;
border-style: solid;
display: inline-block;
line-height: 1.6em;
color: #55432f;
}
.portable-infobox.pi-type-pacha .pi-title[class] {
margin: -37px auto 0;
background-color: transparent;
text-shadow:none;
width: 80%;
padding-right: 15px;
padding-left: 15px;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
color: #e6e5e2;
}
.portable-infobox.pi-type-pacha .pi-image {
top:-10px;
width: auto;
height: 198px;
line-height: 198px;
padding: 5px 0px;
text-align: center;
}
.portable-infobox.pi-type-pacha .pi-header {
color: #55432f;
text-shadow: none;
width: 93%;
padding: 10px;
margin-bottom: 5px;
border: 2px solid #d7c7a2;
border-radius: 5px;
background-color: #ceb686;
}
.portable-infobox.pi-type-pacha .pi-image {
background: url(https://rootsofpacha.wiki.gg/images/4/49/Item_Background.png) no-repeat center;
}
.portable-infobox.pi-type-pacha .pi-data-value a {
color:#306eab;
}
.portable-infobox.pi-type-pacha .pi-image-thumbnail {
width:auto;
image-rendering: pixelated;
height: 99px;
}
/* border colors inside infobox */
.portable-infobox.pi-type-pacha .pi-border-color {
border-color: #ceb686;
}
/* tabber colors inside infobox */
.portable-infobox.pi-type-pacha .wds-tabs__tab.wds-is-current {
color: #306eab;
}
.portable-infobox.pi-type-pacha .wds-tabs__tab {
color: #3a3a3a;
}
/* INFOBOX TYPE: character */
.portable-infobox.pi-type-character {
padding: 25px !important;
box-shadow: none;
border-width:2px;
width: 300px;
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
border-image-slice: 83 fill;
border-image-width: 40px;
border-image-repeat: round;
border-width: unset;
border-style: solid;
display: inline-block;
line-height: 1.6em;
color: #55432f;
}
.portable-infobox.pi-type-character .pi-title[class] {
margin: -37px auto 0;
background-color: transparent;
text-shadow:none;
width: 80%;
padding-right: 15px;
padding-left: 15px;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
color: #e6e5e2;
}
.portable-infobox.pi-type-character .pi-image {
top:-10px;
width: auto;
height: auto;
padding: 5px 0px;
text-align: center;
}
.portable-infobox.pi-type-character .pi-header {
color: #55432f;
text-shadow: none;
width: 93%;
padding: 10px;
margin-bottom: 5px;
border: 2px solid #d7c7a2;
border-radius: 5px;
background-color: #ceb686;
}
.portable-infobox.pi-type-character .pi-image {
background: url(https://rootsofpacha.wiki.gg/images/4/49/Item_Background.png) no-repeat bottom;
}
.portable-infobox.pi-type-character .pi-data-value a {
color:#306eab;
}
.portable-infobox.pi-type-character .pi-image-thumbnail {
width: auto;
image-rendering: pixelated;
height: 188px;
}
/* border colors inside infobox */
.portable-infobox.pi-type-character .pi-border-color {
border-color: #ceb686;
}
/* tabber colors inside infobox */
.portable-infobox.pi-type-character .wds-tabs__tab.wds-is-current {
color: #306eab;
}
.portable-infobox.pi-type-character .wds-tabs__tab {
color: #3a3a3a;
}
/*INFOBOX TYPE: category*/
.portable-infobox.pi-type-category {
padding: 25px !important;
box-shadow: none;
border-width:2px;
width: 300px;
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
border-image-slice: 83 fill;
border-image-width: 40px;
border-image-repeat: round;
border-width: unset;
border-style: solid;
display: inline-block;
line-height: 1.6em;
color: #55432f;
}
.portable-infobox.pi-type-category .pi-title[class] {
margin: -37px auto 0;
background-color: transparent;
text-shadow:none;
width: 80%;
padding-right: 15px;
padding-left: 15px;
border-image-slice: 14 fill;
border-image-width: 25px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/0/0b/Theme-header.png);
border-width: unset;
border-style: solid;
color: #e6e5e2;
}
.portable-infobox.pi-type-category .pi-image {
top:-10px;
width: auto;
height: 198px;
line-height: 198px;
padding: 5px 0px;
text-align: center;
}
.portable-infobox.pi-type-category .pi-header {
color: #55432f;
text-shadow: none;
width: 93%;
padding: 10px;
margin-bottom: 5px;
border: 2px solid #d7c7a2;
border-radius: 5px;
background-color: #ceb686;
}
.portable-infobox.pi-type-category .pi-image {
background: url(https://rootsofpacha.wiki.gg/images/4/49/Item_Background.png) no-repeat center;
}
.portable-infobox.pi-type-category .pi-data-value a {
color:#306eab;
}
.portable-infobox.pi-type-category .pi-image-thumbnail {
width:auto;
image-rendering: pixelated;
height: 148px;
}
/* border colors inside infobox */
.portable-infobox.pi-type-category .pi-border-color {
border-color: #ceb686;
}
/* tabber colors inside infobox */
.portable-infobox.pi-type-category .wds-tabs__tab.wds-is-current {
color: #306eab;
}
.portable-infobox.pi-type-category .wds-tabs__tab {
color: #3a3a3a;
}
/** this will apply to mobile */
@media only screen and (max-width: 768px) {
.portable-infobox,
.portable-infobox.pi-type-character {
width: 90%!important;
overflow-x: auto;
}
}
/* === PORTABLE INFOBOX End === */
/* === TABLE OF CONTENTS Starts === */
/* tocright template*/
@media screen and (min-width: 900px) {
.tocrightDesktop {
clear: right;
float: right;
margin: 0 0 0.8em 1.4em
}
}
/*Removes double icon for contents*/
.toc .toctitle h2 .wds-icon + .wds-icon {
display: none;
}
/* base style */
.toc {
background: none;
border-radius: 4px;
border: 1px solid var(--theme-secondary-color, #572a25);
margin-top: 18px;
margin-bottom: 18px;
padding: 0;
font-size: 1em;
min-width: 12em;
}
.toc .a {
color: var(--theme-text-color, #e6e5e2);
}
.toc .tocnumber {
color: var(--theme-text-color, #e6e5e2);
}
.toc .tocnumber:after {
content: ".";
color: var(--theme-text-color, #e6e5e2);
}
/* 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;
color: var(--theme-text-color, #e6e5e2);
}
.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-secondary-color, #572a25);
margin: 0 6px 0 0;
}
.toc .toctogglelabel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
box-sizing: border-box;
padding-right: 1em;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
display: none;
}
.toc .toctogglelabel::before {
content: "";
display: inline-block;
background: none;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-text-color, #e6e5e2) transparent;
border-width: 0 5px 6px 5px;
vertical-align: middle;
flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before {
border-color: var(--theme-text-color, #e6e5e2) transparent;
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
border-width: 5px 5px 0 5px;
}
.toc .toctogglecheckbox:checked ~ ul {
overflow: hidden;
display: block;
height: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toc > ul {
padding: 0.5em;
border-top: 1px solid var(--theme-secondary-color, #572a25);
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-secondary-color, #572a25);
color: var(--theme-text-color, #e6e5e2);
}
.toc > ul li {
margin: 0;
}
/* === TABLE OF CONTENTS End === */
/* === LISTS === */
.no-bullets ul {
list-style-type: none;
margin: 0;
}
/* === TABBER === */
/* centered tabbers */
.mw-parser-output .wds-tabs {
justify-content: center;
flex-wrap: wrap;
}
/* === TEMPLATES Start === */
/* portal templates (mainly used on the main page but not only) */
.portal {background-color: #d3b787; border:2px solid #ece4cf;}
.portal:hover {background-color: #ece4cf;}
/* for the Template:Tag */
.tags-template {
border-image-source: url(https://rootsofpacha.wiki.gg/images/7/76/Tag.png);
padding: 0px 10px;
border-image-slice: 80 fill;
border-image-width: auto;
border-image-outset: unset;
border-image-repeat: repeat;
text-decoration: none;
text-align: center;
width: max-content;
line-height: 1.3;
display: inline-block;
color: #371C09;
font-weight: bold;
font-variant: all-small-caps;
text-decoration: none;
}
.tags-template a {
color: #371C09;
font-weight: bold;
font-variant: all-small-caps;
text-decoration: underline;
}
/* === TEMPLATES End === */
/* === TABBER Start === */
.tabber__header {
position: relative;
display: flex;
flex-direction: unset;
flex-shrink: 0;
box-shadow:none;
min-block-size: fit-content;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.tabber__tab {
display: inline-flex;
align-items: center;
padding: 0.5em 0.75em;
/* color: #54595d; */
color: var(--theme-border-color-accent);
border: 1px solid var(--theme-border-color-accent);
font-weight: bold;
text-decoration: none;
white-space: nowrap;
font-size: 20px;
}
.tabber__indicator {
border-radius: 2px;
margin-top: -2px;
background: #36c;
block-size: 2px;
inline-size: 0;
display: none;
}
/* === TABBER End === */
/* === CUSTOM TABS Start === */
/** For Template:Tabs **/
.custom-tabs {
display: flex;
flex-direction: row;
gap: 5px;
width: 100%;
margin: 5px 0;
flex-wrap: wrap;
justify-content: space-evenly;
}
.custom-tabs > span {
border-radius: 4px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
flex: 1;
}
.custom-tabs a,
.custom-tabs .selflink,
.custom-tabs span.new {
display: flex;
width: 100%;
height: 100%;
padding: 8px 10px;
border-radius: 4px;
align-items: center;
text-align: center;
justify-content: center;
}
/* Default Color Scheme */
.custom-tabs-default {
--active-tab-background-color: var(--theme-primary-color, #78413b);
--active-tab-color: var(--theme-text-color, #e6e5e2);
--inactive-tab-color: var(--theme-text-color, #e6e5e2);
--inactive-tab-hover-background-color: var(--theme-primary-color, #78413b);
--inactive-tab-hover-color: var(--theme-text-color, #e6e5e2);
}
/* Apply Color Scheme */
.custom-tabs span.active-tab {
background-color: var(--active-tab-background-color);
}
.custom-tabs span.active-tab strong {
color: var(--active-tab-color);
}
.custom-tabs span.active-tab a:not(.new) {
color: var(--theme-text-color, #e6e5e2);
font-weight: bold;
/*text-shadow:2px 2px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000;*/
}
.custom-tabs span.inactive-tab {
background: var(--theme-primary-color-opacity, rgba(60, 116, 57, 0.5));
}
.custom-tabs span.inactive-tab a:not(.new) {
color: var(--theme-text-color, #e6e5e2);
font-weight: bold;
}
.custom-tabs span.inactive-tab:hover {
background: var(--inactive-tab-hover-background-color);
}
.custom-tabs span.inactive-tab:hover a:not(.new) {
color: var(--theme-text-color, #e6e5e2);
}
/* === CUSTOM TABS End === */
/* responsive image adapts to mobile */
@media only screen and (max-width: 768px) {
.responsive-image {
max-width: 100%;
height:auto;
}
}
/* removes Printable version from Tools on navigation bar */
#t-print {
display: none;
}
.mp-tablecontent {
margin-bottom: 10px;
}
.mp-tablecontent ul {
list-style: none;
margin: 0;
display: inline-flex;
flex-wrap: wrap;
}
.mp-tablecontent li {
margin: 1px 5px;
min-width: 170px;
}
/* ------- TESTING (delete what not relevant) --------------- */
/* -- Credit to Fractured Wiki for overall base -- */
* {
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;
color: var(--theme-secondary-color, #572a25);
font-weight:bold;
}
table {
display: table;
white-space: unset;
}
body, code {
background: none;
}
/***********************************************************************************************************
* css for wiki.gg top bar and footer bar
***********************************************************************************************************/
/********* wiki.gg header *********/
header#wikigg-header #p-personal ul {
white-space: nowrap; /* for "log out" */
}
header#wikigg-header #p-personal .vector-menu-content #pt-anonuserpage, header#wikigg-header #p-personal .vector-menu-content #pt-userpage a {
/* user avatar icon position fix */
padding-top: 0;
background-position: left center;
}
/********* wiki.gg footer *********/
footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
margin: 0;
text-align: center;
}
@media screen and (max-width: 479px) {
footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
width: auto;
}
}
@media screen and (max-width: 359px) {
footer#wikigg-footer .footer-middle {
/* hide wiki.gg logo to make room to avoid text wrapping */
display: none;
}
}
/***********************************************************************************************************
* Theming variables
***********************************************************************************************************/
:root {
/*** top site logo ***/
--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
--theme-site-logo-filter: none;
--theme-site-logo-width: auto;
--theme-site-logo-height: 160px;
--theme-body-background-color--rgb: 120, 65, 59;
/* common "box" style */
--theme-box-border-width: 0px;
--theme-box-border-style: solid;
--theme-box-border-color: var(--theme-primary-color, #78413b);
--theme-box-border-radius: 10px;
--theme-box-shadow: none;
--theme-box-back-backdrop-filter: none;
--theme-box-back-background: var(--theme-secondary-color, #572a25);
/* be used in multi-layer background, so we can't simpy use background-color */
--theme-box-background: var(--theme-primary-color, #78413b);
--theme-background: var(--theme-primary-color);
--theme-background-accent: var(--theme-primary-color, #78413b);
/*** text color ***/
--theme-text-color-hover: var(--theme-text-color);
--theme-text-color-note: #ccc;
--theme-text-color-em: #00f600;
--theme-heading-color: var(--theme-heading-color, #e6e5e2);
--theme-text-color-placeholder: #808080;
--theme-control-text-color: #333;
--theme-control-text-color-hover: #333;
--theme-text-menu-color:white;
/*** link text color ***/
/*--theme-link-color: #607f3c;*/
--theme-link-color-hover: var(--theme-link-color, #f6d999);
--theme-link-color-visited: var(--theme-link-color, #f6d999);
--theme-link-color-redlink: #bf3b0f;
/* default color for icons */
--theme-icon-color: var(--theme-link-color, #f6d999);
--theme-icon-color-redlink: var(--theme-link-color, #f6d999);
--theme-icon-color-hover: var(--theme-link-color, #f6d999);
/* default common color */
--theme-border-color: var(--theme-secondary-color, #572a25);
--theme-border-color-accent: none;
--theme-highlight-background: var(--theme-secondary-color, #572a25);
/* dropdown menu */
--theme-dropdown-border: 1px solid var(--theme-secondary-color, #572a25);
--theme-dropdown-background: var(--theme-primary-color, #78413b);
/* for wide table */
--theme-wide-table-shadow-color: none;
/** notification **/
--theme-notice-red-text-color: #ff001f;
--theme-notice-orange-text-color: #ffab5b;
--pi-secondary-background:var(--theme-background-accent);
}
/* main content box */
#bodyContent {
--theme-background: var(--theme-primary-color, #78413b);
}
/* sidebar */
#mw-panel {
/*--theme-link-color: white;*/
--theme-link-color-visited: var(--theme-link-color, #f6d999);
--theme-link-color-hover: var(--theme-link-color, #f6d999);
--theme-border-width: 0;
--theme-gap: 0;
}
#catlinks {
--theme-background: var(--theme-secondary-color, #572a25);
--theme-box-border-radius: 0;
}
#footer {
--theme-background: none;
}
/* Wiki page tools navbar */
#mw-head {
/*--theme-link-color: var(--theme-text-menu-color);*/
--theme-link-color-visited: var(--theme-text-color, #e6e5e2);
--theme-link-color-hover: var(--theme-text-color, #e6e5e2);
--theme-background: none;
--theme-background-shadow: none;
--theme-tab-background: var(--theme-secondary-color, #572a25);
--theme-tab-background-selected: var(--theme-primary-color, #78413b);
--theme-tab-border-color: var(--theme-primary-color, #78413b);
--theme-tab-border-color-selected: var(--theme-primary-color, #78413b);
}
#mw-head #p-search {
--theme-link-color: var(--theme-text-color, #e6e5e2);
--theme-link-color-hover: var(--theme-text-color, #e6e5e2);
--theme-link-color-focus: var(--theme-text-color, #e6e5e2);
--theme-background: var(--theme-box-background);
--theme-border-color: var(--theme-border-color-accent);
--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-border-color-accent);
--theme-rule-color: var(--theme-border-color-accent);
--theme-link-color: var(--theme-text-color, #e6e5e2);
--theme-link-color-visited: var(--theme-text-color, #e6e5e2);
--theme-link-color-hover: var(--theme-text-color, #e6e5e2);
}
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, etc.
***********************************************************************************************************/
/** Font **/
html, body {
font-family: Helvetica, Arial, sans-serif;
color: var(--theme-text-color, #e6e5e2);
}
body {
font-size: 15px;
line-height: 1.5;
}
ul, ol {
margin: 2px 0 2px 1.5em;
}
li {
margin: 0 0 2px 0;
}
pre, code, .mw-code {
color: var(--theme-text-color);
border: 1px solid var(--theme-border-color);
background: var(--theme-background);
}
/** link color **/
/* Self-links aren't real links, they're not clickable.
* Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
* We should not use :not(.selflink) since it increases the priority and make it is difficult to override
* link styles for certain elements (e.g. in wiki.gg header).
*/
a,
a.selflink:hover, a.selflink:active {
text-decoration: none;
color: var(--theme-link-color, #f6d999);
}
a:visited {
color: var(--theme-link-color-visited);
}
a:hover, a:active {
text-decoration: underline;
color: var(--theme-link-color, #f6d999);
}
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited {
color: #bf3b0f;
}
/*************/
input, button {
color: var(--theme-control-text-color);
caret-color: var(--theme-text-color);
}
input[type=submit] {
color: var(--theme-control-text-color);
}
::placeholder {
color: var(--theme-text-color-placeholder);
}
/* Removes VisualEdit button */
#ca-ve-edit {
display: none;
}
/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var(--theme-link-color, #f6d999);
}
/* Text color */
.i .note,
.note-text {
color: var(--theme-text-color-note);
}
/*.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
image-rendering: pixelated; for chrome
image-rendering: crisp-edges; for firefox
}*/
.nowrap {
white-space: nowrap;
}
/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
text-align: center;
}
.alignleft,
.align-left {
text-align: left;
}
.alignright,
.align-right {
text-align: right;
}
/* clear fix for float block */
.clearfix {
zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* References smaller text than main */
.references {
font-size: 90%;
}
/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
font-size: 14px !important;
}
/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
display: inline;
}
/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child {
display: none;
}
/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
content: " ";
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
hr.space {
height: 4px;
background: none;
border: 0;
}
.page-content .vertical-align-top * {
vertical-align: top;
}
.page-content .vertical-align-bottom * {
vertical-align: bottom;
}
/* Drowning Table No Border */
.drowning-table-no-border {
border: none;
}
/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
max-width: unset;
}
/* Box at the top of all pages when the user has a new message on their User_talk: page */
.usermessage {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
:root {
--layout-topbar-height: 35px; /* height of wiki.gg topbar */
--layout-sidebar-width: 170px; /* width of side navbar, without gap */
--layout-sidespace: 24px; /* whitespace width on most left and most right */
--layout-box-gap: 12px;
--layout-box-border-radius: 10px;
--layout-logo-scale: 1;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) * 2);
--dropdown-item-padding-x: 12px;
--dropdown-item-padding-y: 4px;
}
/***********************************************************************************************************
**** Main Layout START ************************************************************************************
*
* Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
***********************************************************************************************************/
html, body {
min-height: 100%;
}
html {
height: 100%;
scroll-padding-top: calc(var(--layout-topbar-height) + 10px);
}
/*************************************
**** main grid container
************************************/
body {
height: auto;
/* self */
box-sizing: border-box;
/* grid */
display: grid;
grid-template-columns: [body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width) [aside-right nav-left content-left footer-left] minmax(0, 1fr) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end nav-start aside-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [aside-end page-end] 0fr [body-end];
gap: 0 var(--layout-box-gap);
}
/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
* div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
*/
body > .content-wrapper,
#mw-navigation {
display: contents;
}
/** unused, hide them **/
#mw-head-base,
#mw-navigation > h2 {
display: none;
}
/** side nav bar **/
#mw-panel {
grid-column: aside-left/aside-right;
grid-row: aside-start/aside-end;
margin-bottom: var(--layout-box-gap);
float: none;
width: unset;
padding: 0;
}
/** nav **/
#mw-head {
grid-column: nav-left/nav-right;
grid-row: nav-start/nav-end;
}
/** content **/
.mw-body {
grid-column: content-left/content-right;
grid-row: content-start/content-end;
}
/* For some page such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child {
grid-column: body-left/body-right;
grid-row: page-start/page-end;
}
/** #footer: content footer **/
#footer {
grid-column: footer-left/footer-right;
grid-row: footer-start/footer-end;
margin: 0;
z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
grid-column: content-left/content-right;
grid-row: nav-start/footer-end;
height: 100%;
}
/** wiki.gg footer bar **/
body > footer {
grid-column: body-left/body-right;
grid-row: page-end/body-end;
}
/*** logo block. It is absolute position ***/
#p-logo {
position: absolute;
width: 100%;
height: var(--layout-logo-box-height);
left: 0;
top: var(--layout-topbar-height);
background: var(--theme-site-logo-image) center center/var(--theme-site-logo-width) auto no-repeat;
display: flex;
align-items: center;
justify-content: center;
filter: var(--theme-site-logo-filter);
}
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
* I still don't know why, but move background to #p-logo can avoid this issue.
*/
#p-logo .mw-wiki-logo {
margin: auto;
background: none; /* logo flicker fix */
}
/**** Main Layout END ***********************************************************/
/*************************************
**** Side panel START
************************************/
#mw-panel {
--list-body-font-size: 14px;
--list-body-padding-x: 6px;
--list-body-padding-y: 3px;
}
#mw-panel a {
text-decoration: none;
}
/* section box */
#mw-panel .portal {
margin: 0 0 var(--layout-box-gap) 0;
padding: 0;
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
background: none;
margin: 0;
padding: 6px 10px;
font-size: 16px;
line-height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--theme-text-color, #e6e5e2);
text-shadow:none; /* navigation shadow */
font-weight:bold;
}
/* 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-text-color, #e6e5e2) 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-text-color, #e6e5e2) transparent;
}
#mw-panel .portal.collapsed .vector-menu-heading::after {
transform: scaleY(-1);
}
/* list body */
#mw-panel .portal .body {
background: none;
border: 0;
padding: 0;
margin: 0;
border-top: var(--theme-border-width) solid var(--theme-border-color);
}
#mw-panel .portal .body ul {
padding: var(--theme-gap) 4px 4px;
}
#mw-panel .portal .body li {
margin: 0;
padding: 0;
font-size: var(--list-body-font-size);
line-height: inherit;
}
#mw-panel .portal .body li:hover {
background: var(--theme-highlight-background);
}
#mw-panel .portal .body li a {
display: block;
padding: var(--list-body-padding-y) var(--list-body-padding-x);
color: var(--theme-text-color, #e6e5e2);
}
#mw-panel .portal .body li a:visited {
color: var(--theme-text-color, #e6e5e2);
}
#mw-panel .portal .body li a:hover {
color: var(--theme-text-color, #e6e5e2);
}
/* "Atom" RSS Feed */
#mw-panel .portal .body li a.feedlink {
text-indent: calc(var(--list-body-font-size) + 2px);
background-position: var(--list-body-padding-x) center; /* align icon with other text */
}
/********* side panel END *********/
/*****************************************
**** main content box navbar (#mw-head)
****************************************/
/* reset */
#mw-head * {
float: unset;
font-size: unset;
line-height: unset;
}
/* tabs layout */
#mw-head {
--layout-padding: 12px;
--layout-gap: 6px;
--tab-padding-x: 12px;
--tab-padding-y: 5px;
--icon-size: 1em;
padding: var(--layout-padding) 0 0 0;
background: var(--theme-background);
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
}
#mw-head #left-navigation, #mw-head #right-navigation {
float: none;
flex: 1 1 auto;
margin: 0;
display: flex;
align-items: flex-end;
}
#mw-head #left-navigation::before, #mw-head #left-navigation::after, #mw-head #right-navigation::before, #mw-head #right-navigation::after {
content: "";
display: block;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
background: var(--theme-background-shadow);
}
#mw-head #left-navigation {
justify-content: flex-start;
}
#mw-head #right-navigation {
justify-content: flex-end;
}
#mw-head #left-navigation::before, #mw-head #right-navigation::after {
flex: 0 0 var(--layout-padding);
}
#mw-head #left-navigation::after, #mw-head #right-navigation::before {
flex: 1 1 auto;
}
/*** tabs of navbar ***/
/* reset */
#mw-head .vector-menu,
#mw-head .vector-menu * {
background: none;
}
/* tabs list */
#mw-head .vector-menu-tabs {
height: unset;
padding: unset;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: flex-end;
}
/* tab */
#mw-head {
--theme-tab-border-style: solid;
--theme-tab-border-width: 1px;
--theme-border-bottom-style: solid;
--theme-border-bottom-width: 1px;
--theme-border-bottom-color: var(--theme-tab-border-color-selected);
--theme-border-bottom-color-selected: transparent;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
/* outer box */
background: var(--theme-tab-background);
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
border-radius: var(--theme-box-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
margin-right: var(--layout-gap); /* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item::after,
#mw-head .vector-menu-dropdown::after {
/* gap */
content: "";
display: block;
width: var(--layout-gap);
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
position: absolute;
left: 100%;
background: var(--theme-background-shadow);
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* inner box */
height: auto;
margin: 0;
padding: var(--tab-padding-y) var(--tab-padding-x);
border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color);
border-bottom: 0;
border-radius: var(--theme-box-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: var(--theme-text-color, #e6e5e2);
background: var(--theme-background-shadow);
/* 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-text-menu-color) transparent;
border-width: 6px 5px 0;
margin-top: 2px;
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
color: var(--theme-text-color, #e6e5e2);
}
#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-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-text-color, #e6e5e2) transparent;
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
/* outer box: selected */
background: var(--theme-tab-background-selected);
border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color-selected);
border-bottom: 0;
}
#mw-head .vector-menu-tabs .mw-list-item.selected:after {
/* gap */
bottom: 0;
border-left: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color-selected); /* x-position offset */
}
#mw-head .vector-menu-tabs .mw-list-item.selected a {
/* inner box: selected */
border: 0;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color-selected);
background: none;
color: var(--theme-text-color, #e6e5e2);
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0; /* reset */
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: block;
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-text-color, #e6e5e2);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--theme-text-color, #e6e5e2);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--theme-text-color, #e6e5e2);
}
/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
--theme-link-color-hover: var(--theme-link-color, #f6d999);
width: 1.5em; /* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: var(--theme-link-color, #f6d999); /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. -> it was set to transparent 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((1.5em - var(--icon-size)) / 2);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color, #f6d999);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--theme-link-color, #f6d999);;
}
#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-input {
border: 2px solid var(--theme-secondary-color, #572a25);
color: black;
background: white;/*bg color of search box */
box-shadow: var(--theme-box-shadow);
height: 26px;
padding: 0 26px 0 4px;
border-radius:10px;
}
#mw-head #p-search .vector-search-box-input:hover {
border-color: var(--theme-primary-color, #78413b);/*hover on search*/
}
#mw-head #p-search .vector-search-box-input:focus {
border: 2px solid var(--theme-secondary-color, #572a25);
box-shadow: var(--theme-shadow-focus);
border-radius:10px;
outline: 0;
z-index: 1100; /* .suggestions: 1099 */
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
color: lightgray;
}
#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, #f6d999);
}
#mw-head #p-search #searchform .searchButton {
background-color: var(--theme-secondary-color, #572a25);
}
#mw-head #p-search #searchform:hover .searchButton {
background-color: var(--theme-secondary-color, #572a25);
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
background-color: var(--theme-secondary-color, #572a25);
}
/*** search result suggestions ***/
.suggestions {
background: var(--theme-primary-color, #78413b);
box-sizing: border-box;
border-radius:10px;
margin-top: 0;
box-shadow: var(--theme-box-shadow);
backdrop-filter: var(--theme-box-back-backdrop-filter);
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: none;
}
.suggestions .suggestions-results {
border: 1px solid var(--theme-border-color);
border-top: 0;
border-bottom-color: var(--theme-rule-color);
}
.suggestions .suggestions-results:empty {
border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
color:var(--theme-text-color, #e6e5e2);
}
.suggestions .suggestions-result {
padding: 1px 4px;
}
.suggestions .suggestions-special {
margin: 0;
padding: 2px 4px 4px;
border: 1px solid var(--theme-border-color);
border-top: 0;
border-radius: var(--theme-box-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: var(--theme-link-color, #f6d999);
}
.suggestions .suggestions-result-current {
background-color: var(--theme-secondary-color, #572a25);
color: var(--theme-text-color, #e6e5e2);
font-weight:bold;
}
.suggestions .suggestions-result-current .special-label, .suggestions .suggestions-result-current .special-query {
color: white;
}
/*****************************************
**** main content box Content Body
****************************************/
/* font */
.vector-body {
font-size: unset; /* reset */
line-height: 1.7142857143;
}
/** layout **/
#content {
color: var(--theme-text-color);
padding: 0;
display: flex;
flex-direction: column;
background: var(--theme-box-background);
--theme-heading-rule-color-h1: var(--theme-border-color);
--theme-heading-rule-color-h2: var(--theme-border-color);
--layout-padding-x: 24px;
--layout-padding-y: 16px;
}
.content-body {
flex: 1 1 auto;
}
.content-body > main {
align-self: stretch;
padding: var(--layout-padding-y) var(--layout-padding-x);
}
#bodyContent {
display: flex;
flex-direction: column;
position: unset;
}
/** main heading section **/
#firstHeading {
overflow: hidden; /* override mw internal css, fix scroll-x issue for narrow width */
/*text-shadow: -1px -1px 0 #aa9672, 1px -1px 0 #aa9672, -1px 1px 0 #aa9672, 1px 1px 0 #aa9672;*/ /*nice but seems troubling for the eyes*/
}
/** 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: 2px solid var(--theme-secondary-color, #572a25);*/ /* cambia theme */
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: 15em;
}
/*** "category:" box ***/
#catlinks {
background: var(--theme-background);
border: 1px solid var(--theme-border-color-accent);
border-radius: 10px;
margin: var(--layout-padding-y) 0 0 0;
padding: 0.5em 1em;
}
/*** ads ***/
div.games-showcase-header {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0;
}
div.games-showcase-footer {
margin: 0;
padding: 0 var(--layout-padding-x) var(--layout-padding-y);
}
.content-body > .games-showcase-sidebar {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0 0;
}
.games-showcase-header img, .games-showcase-footer img {
height: 100%;
width: auto;
object-fit: contain;
}
@media screen and (max-width: 1100px) {
.games-showcase-header img, .games-showcase-footer img {
height: auto !important;
width: 100% !important;
object-fit: contain;
}
}
@media screen and (max-width: 926px) {
.games-showcase-header img, .games-showcase-footer img {
object-position: 50%;
height: 105px !important;
width: 100% !important;
object-fit: none !important;
}
}
aside.games-showcase-sidebar div.sidebar-showcase {
padding: 0 0 var(--layout-padding-y) 0;
}
/**** #footer (copyright info) ****/
#footer {
background: none;
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: white;
}
#footer a {
color: var(--theme-link-color, #f6d999);
}
#footer a:hover {
color: var(--theme-link-color-hover);
}
#footer-info {
font-size: 12px;
display: contents;
}
#footer ul li {
font-size: inherit;
line-height: 1.5;
padding: 0;
}
#footer-icons {
grid-column: span 1/r;
grid-row: t/b;
place-self: end;
}
#footer #footer-info-lastmod {
grid-column: l/span 1;
grid-row: t/span 1;
place-self: start;
margin-bottom: 1em;
}
#footer #footer-info-copyright {
grid-column: l/span 1;
grid-row: span 1/b;
place-self: end stretch;
position: relative;
padding-right: 100px;
}
#footer-info-copyright img {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
width: auto;
}
#footer-places,
#footer > div {
display: none;
}
/**** background box for nav+content+#footer ****/
#mw-page-base {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-secondary-color, #572a25);
z-index: -1;
}
#mw-head, #content, #footer {
box-sizing: border-box;
background-clip: padding-box;
border: 2px solid var(--theme-primary-color, #78413b);
margin: 0;
border-radius:10px;
}
#mw-head {
border-bottom-width: 0;
}
#content {
border-top-width: 0;
border-bottom-width: 0;
}
#footer {
border-top-width: 0;
}
/****** Start: Responsive Layout for different resolutions ******/
@media screen and (max-width: 1800px) {
:root {
--layout-sidespace: 0px; /* whitespace width on most left and most right,must with "px" */
}
} /* screen and (max-width: 1800px) */
@media screen and (max-width: 65535px) {
:root {--layout-logo-scale: 0.75;
}
/* change layout */
body {
grid-template-columns: [body-left] 0 [aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right] 0 [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end aside-start] auto [aside-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
}
/* re-style navbar */
#mw-panel {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 0 var(--layout-box-gap);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background-color: var(--theme-primary-color, #78413b);
position: relative;
z-index: 1;
justify-content: center;
}
#mw-panel.sticky {
position: fixed;
margin-top: 35px !important;
width: 100%;
border-radius: unset;
}
#mw-panel .portal {
background: none;
box-shadow: none;
border: 0;
margin: 0;
padding: 0;
position: relative;
white-space: nowrap;
}
#mw-panel .portal .vector-menu-heading {
padding: 9px 12px;
border: 0;
border-radius: 0;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
border-width: 6px 5px 0; /* change arrow direction */
margin-left: 4px;
}
#mw-panel .portal .body {
display: none !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: absolute;
left: 0;
top: 100%;
width: max-content;
min-width: 8em;
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-box-shadow);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
z-index: 1;
}
#mw-panel .portal .body li a {
padding: 6px 12px;
}
#mw-panel .portal.expanded .vector-menu-heading, #mw-panel .portal:hover .vector-menu-heading {
background: var(--theme-highlight-background);
border-radius: 0;
}
#mw-panel .portal.expanded .vector-menu-heading::after, #mw-panel .portal:hover .vector-menu-heading::after {
transform: scaleY(-1);
}
#mw-panel .portal.expanded .body, #mw-panel .portal:hover .body {
display: block !important;
}
/* logo: smaller, and position relative to #mw-panel */
#p-logo {
background-size: calc(var(--theme-site-logo-width) * var(--layout-logo-scale)) auto;
top: calc(0px - var(--layout-logo-box-height));
}
/* search: move to sidebar nav box ("main nav bar") */
/* "more" menu in #right-navigation */
#mw-head #right-navigation .vector-menu-dropdown::after {
display: none;
}
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content {
left: auto;
right: 0;
}
} /* screen and (max-width: 1365px) */
@media screen and (max-width: 900px) {
:root {
--layout-logo-scale: 0.5;
--layout-logo-box-height: calc( var(--theme-site-logo-height) * 0.5 + 20px);
--layout-box-gap: 6px;
}
/* change layout */
body {
grid-template-columns: [body-left aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right body-right];
}
#mw-page-base,
#mw-panel,
#mw-head, #content, #footer {
border-radius: 0;
border-left: 0;
border-right: 0;
}
#mw-panel {
margin-bottom: 44px;
}
#mw-head #p-search {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background-color: var(--theme-box-background), var(--theme-box-back-background);
padding: var(--layout-box-gap);
padding-top: 0;
position: absolute;
top: -44px;
left: 0;
right: auto;
width: 100%;
border-radius: 0;
}
.vector-search-box-inner {
width: 100%;
max-width: unset;
}
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
#content {
--layout-padding-x: 12px;
--layout-padding-y: 12px;
}
/* icon navbar tabs */
#mw-head {
top: unset; /* reset */
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
--icon-size: 1.5em;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
--theme-link-color-hover: var(--theme-link-color, #f6d999);
width: 1.5em; /* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-list-item a::before,
#mw-head .vector-menu-dropdown .vector-menu-heading::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
margin: calc((1.5em - var(--icon-size)) / 2);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color, #f6d999);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span {
display: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
display: none;
}
/*general reset*/
.all-icon-selectors {
background-color: var(--theme-text-color, #ffffff);
background-image: none;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
}
/*icons that follow link color*/
.all-link-color-icon-selectors {
background-color: var(--theme-text-color, #ffffff);
}
#ca-edit {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M29.12,6.05,26,2.88a3,3,0,0,0-4.24,0L6.29,18.29a3.06,3.06,0,0,0-.72,1.18L2.08,29.92l10.46-3.49a3.15,3.15,0,0,0,1.17-.72L29.12,10.29a3,3,0,0,0,0-4.24Zm-21,13.28,8.75-8.74,1.58,1.58L9.67,20.92ZM18.24,9.17l1.59-1.58,4.58,4.58-1.58,1.59ZM7.1,21.19l3.72,3.71L5.25,26.75Zm5.57,2.73-1.59-1.59,8.75-8.74,1.58,1.58Zm15-15-1.88,1.88L21.24,6.17l1.88-1.88A1,1,0,0,1,23.83,4a1,1,0,0,1,.71.29l3.17,3.18a1,1,0,0,1,.29.7A1,1,0,0,1,27.71,8.88Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-view,
#ca-view-foreign {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M30.89,15.54A17,17,0,0,0,16,6,17,17,0,0,0,1.11,15.54L.87,16l.24.46A17,17,0,0,0,16,26a17,17,0,0,0,14.89-9.54l.24-.46ZM24,16a8,8,0,1,1-8-8A8,8,0,0,1,24,16ZM3.14,16a16.47,16.47,0,0,1,4.14-4.89,10,10,0,0,0,0,9.78A16.47,16.47,0,0,1,3.14,16Zm21.58,4.89a10,10,0,0,0,0-9.78A16.47,16.47,0,0,1,28.86,16,16.47,16.47,0,0,1,24.72,20.89Z'/%3E%3Cpath d='M16,20a4,4,0,1,0-4-4A4,4,0,0,0,16,20Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,16,14Z'/%3E%3C/g%3E%3C/svg%3E");
}
#left-navigation li[id^=ca-nstab-] {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='12 15 11 15 11 17 12 17 20 17 21 17 21 15 20 15 12 15'/%3E%3Cpolygon points='12 19 11 19 11 21 12 21 15 21 16 21 16 19 15 19 12 19'/%3E%3Cpath d='M20.41,3H5V26a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V9.59ZM20,5.41,24.59,10H21a1,1,0,0,1-1-1ZM24,27H8a1,1,0,0,1-1-1V5H18V9a3,3,0,0,0,3,3h4V26A1,1,0,0,1,24,27Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-history {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/%3E%3Cpath d='M17,7H15v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-talk {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
}
#t-contributions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
}
#ca-addsection {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-viewsource {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
}
#p-variants {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
}
#p-cactions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,13a3,3,0,1,0,3,3A3,3,0,0,0,16,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,16,17Z'/%3E%3Cpath d='M24,13a3,3,0,1,0,3,3A3,3,0,0,0,24,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,24,17Z'/%3E%3Cpath d='M8,13a3,3,0,1,0,3,3A3,3,0,0,0,8,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,8,17Z'/%3E%3C/g%3E%3C/svg%3E");
}
} /* screen and (max-width:720px) */
@media screen and (max-width: 600px) {
:root {
--search-height: 48px; /* space for search form. */
}
/* footer */
#footer #footer-icons {
float: none;
}
#footer #footer-info-copyright {
padding-right: 0;
padding-bottom: 40px;
}
#footer #footer-info-copyright img {
right: auto;
left: 0;
}
} /* screen and (max-width:600px) */
/****** End: Responsive Layout for different resolutions ******/
/***** Notification area *****/
.mw-notification-area-overlay {
position: fixed;
z-index: 9999;
}
.mw-notification-area {
font-size: 14px;
line-height: 1.7142857143;
}
.mw-notification {
color: var(--theme-text-color);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
transform: none;
}
/* Notification boxes on the right, e.g. after patrolling an edit, change color with themes(?)*/
.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;
}
/***********************************************************************************************************
* Styles for "real" wiki page content. (in div.mw-parser-output)
***********************************************************************************************************/
/* remove external link icon. */
.mw-parser-output a.external,
.link-https {
padding-right: 0;
background: none;
}
.mw-parser-output > :first-child {
margin-top: 0;
}
/** headings **/
.mw-body h1, .mw-body-content h1, .mw-body-content h2,
.vector-body h3, .vector-body h4,
.vector-body h5,.vector-body h6 {
margin: 0;
color: var(--theme-heading-color, #e6e5e2);
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.25;
}
.mw-body h1, .mw-body-content h1 {
font-size: 32px;
line-height: 40px;
text-align: center;
}
.mw-body-content h2 {
font-size: 24px;
line-height: 30px;
margin-top: 18px;
margin-bottom: 9px;
border-bottom:1px solid #aa9672;
padding-bottom: 3px;
}
.mw-body-content h2 {border-bottom:1px solid #aa9672;}
/* headings text outline - to change for Winter theme? */
/*.mw-body-content h2, h3 {text-shadow: -1px -1px 0 #aa9672, 1px -1px 0 #aa9672, -1px 1px 0 #aa9672, 1px 1px 0 #aa9672;}*/
.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 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin-top: 10x;
margin-bottom: 7px;
}
.vector-body h6 {
line-height: 22px;
font-size: 16px;
font-weight: bold;
text-align: center;
border-top: 1px solid var(--theme-heading-rule-color-h2);
margin-top: 10px;
margin-bottom: 7px;
padding-bottom: 0px;
padding-top: 5px;
}
/* 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, #e6e5e2);
}
/********* 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-accent);
}
table.cargoTable.noMerge tr:nth-child(2n) {
background: rgba(127, 127, 127, 0.25);
}
table.cargoTable.noMerge tr:nth-child(2n+1) {
background: none;
}
/* clear fix for float block */
.clearfix {
zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* Thumbnail background color */
html .thumbimage {
background-color: #4d3a32;
}
/* <gallery> */
.thumbinner {
border-radius: 5px;
}
li.gallerybox div.thumb {
border: 1px solid var(--theme-border-color-accent);
border-radius: 4px;
}
.gallery * {
box-sizing: initial;
}
.mw-gallery-traditional .thumb {
display: flex;
}
.mw-gallery-traditional .thumb a {
display: block;
}
.mw-gallery-slideshow .mw-gallery-slideshow-buttons{
background: var(--theme-border-color-accent);
}
ul.gallery.mw-gallery-slideshow .gallerybox.slideshow-current{
background: var(--theme-background-accent);
}
li.gallerybox div.thumb {background:transparent;} /* no bg for imgs inside <gallery>*/
/* Media Viewer */
.mw-mmv-image-inner-wrapper {
width: 100%;
padding: 40px;
margin-bottom: 5px;
margin-top: 5px;
background-color: transparent;
border-image-slice: 83 fill;
border-image-width: 45px;
border-image-outset: unset;
border-image-repeat: repeat;
border-image-source: url(https://rootsofpacha.wiki.gg/images/6/6f/Theme-box.png);
color: black;
box-sizing: border-box;
max-width: 100%;
}
/* remove the default fake transparency */
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {background: transparent;}
.mw-mmv-post-image {
color: var(--theme-text-color-note);
background-color: var(--theme-background-accent);
}
.mw-mmv-image-metadata {
border-top: 1px solid var(--theme-box-border-color);
background-color: var(--theme-border-color-accent);
}
.mw-mmv-stripe-button.mw-mmv-description-page-button,
.mw-mmv-stripe-button.mw-mmv-description-page-button:active,
.mw-mmv-stripe-button.mw-mmv-description-page-button:visited {
color: var(--theme-text-color-note);
}
/* mw-ui-button and .mw-ui-inputbox */
.mw-ui-button.mw-ui-progressive:not(:disabled),
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button {
background-color: var(--theme-box-border-color);
border-color: var(--theme-border-color-accent);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
background-color: var(--theme-box-border-color);
border-color: var(--theme-border-color-hover);
}
.mw-ui-input {
background-color: white;
border-color: var(--theme-border-color-accent);
}
/********* ooui *********/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
color: var(--theme-text-color);
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed {
background: none;
}
/********* for File: NS pages *********/
#filetoc {
background: none;
}
/******* Search result page. (Special:Search) ******/
.mw-search-form-wrapper {
font-size: 1em;
}
.mw-search-form-wrapper #mw-search-top-table {
display: flex;
align-items: center;
}
.mw-search-form-wrapper #mw-search-top-table > div {
float: none;
}
.mw-search-form-wrapper .results-info {
color: var(--theme-text-color-note);
font-size: 1em;
padding: 0 0 0 3em;
white-space: nowrap;
text-align: right;
flex: 1 1 auto;
}
.mw-search-form-wrapper .mw-search-visualclear {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs {
border: 0;
margin: 1em 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
width: 100%;
float: none;
padding: 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
float: none;
display: inline-block;
vertical-align: middle;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
background: var(--theme-highlight-background);
border-radius: 4px;
overflow: hidden;
}
.mw-search-form-wrapper #mw-searchoptions {
padding: 1em;
background: var(--theme-box-background);
border: 1px solid var(--theme-border-color-accent);
border-radius: 4px;
}
/* responsive tweak */
@media screen and (max-width: 600px) {
.mw-search-form-wrapper #mw-search-top-table {
display: block;
}
.mw-search-form-wrapper .results-info {
margin-top: 1em;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
font-size: 12px;
}
}
/***********************************************************************************************************
* dark theme tweak
***********************************************************************************************************/
#filetoc, code,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-search-profile-tabs, #mw-searchoptions,
.mw-datatable td {
background: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: white; /* cambia assolutamente, delete page */
color: black;
}
.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;
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning{
background-color: var(--theme-border-color-accent);
border-color: var(--theme-link-color-redlink);
}
#mw-allmessagestable tbody:hover td {
background: var(--theme-highlight-background);
}
/*li.gallerybox div.thumb {
background: var(--theme-box-background);
}*/
ul.gallery.mw-gallery-slideshow .gallerycarousel {
border: 1px solid var(--theme-border-color-accent);
border-radius: 4px;
}
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>');
}
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);
}
div.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background: #231c3b;
color:white;
}
.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);/* delete page */
border-color: #fc3;
color: #fff;
}
fieldset {
border-color: #ccc;
}
.ext-replacetext-searchoptions {
background-color: var(--theme-background);
}
.mw-highlight pre, .mw-highlight code, .mw-highlight .mw-code {
color: #000;
background-color: white;/* cambia */
}
/*for hiding content*/
hide {
display: none;
}
.hide-overflow {
overflow-x: unset;
}
/*hr styling*/
hr, .hr hr {
/*border: none;
border-top: 3px double var(--theme-border-color-accent);
color: #FFF;
overflow: visible;
text-align: center;
height: 6px;*/
background: none;
text-align: center;
border: 10px solid var(--theme-primary-color, #78413b);
border-image-repeat:stretch stretch;
border-image: url(https://rootsofpacha.wiki.gg/images/1/10/Separator.png);
border-image-slice: 33 fill;
border-width: 0 17px 13px 17px;
}
hr:after, .hr hr:after {
color: #FFF;
/* content: "§";*/
padding: 0 10px;
position: relative;
top: -16px;
}
/*HLIST START*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
display: none;
}
/* Generate interpuncts */
.hlist dt:after {
content: ": ";
}
.hlist dd:after,
.hlist li:after {
content: " · ";
font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li:before {
content: " " counter(listitem) " ";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
/**** HLIST END */
/***********************************************************************************************************
/* CSS Sliding Image Gallery for Mediawiki
*
* @author: Unknown
* current version crafted together by [[User:Christharp]] from several CSS sites.
* https://www.mediawiki.org/wiki/Snippets/Sliding_Image,_Text_or_Gallery
***********************************************************************************************************/
.wrapper {
position: absolute;
top: 1%;
width: 4000px;
animation: 60s credits linear infinite;
animation-direction:normal; /* Valid values: normal, reverse, alternate, alternate-reverse */
}
.wrapper img:hover {
transform: scale(1.4);
cursor: pointer;
}
@keyframes credits {
0% {
margin-left: 0px;
}
100% {
margin-left: -4000px;
}
}
.wrapper:hover{ /*For Stopping Upon Hover for text Presentations */
animation-play-state: paused;
cursor: pointer;
}
/*own classes for Template:SlidingStart & Template:SlidingEnd*/
.sliding-wrapper {
position: absolute;
top: 1%;
width: 4000px;
}
.sliding-wrapper img:hover {
transform: scale(1.4);
cursor: pointer;
}
@keyframes slidekey {
0% {
margin-left: 0px;
}
100% {
margin-left: -4000px;
}
}
.sliding-wrapper:hover{ /*For Stopping Upon Hover for text Presentations */
animation-play-state: paused;
cursor: pointer;
}
/* End: CSS Sliding Image Gallery */
/** Table rules **/
table.standard-table {
border: grey solid 2px;
}
table.standard-table th {
background-color: #4c4c4c;
}
table.standard-table td {
text-align: center;
border: grey solid 1px;
}
.tooltip {
position: relative;
/*display: block;*/
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #a2a9b1aa;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
/* Position the tooltip */
position: absolute;
top: 20px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.smoothBorderImage {
border-radius: 6px;
}
/* TESTING */
/* cargo table temporary */
.dataTables_wrapper {border-collapse: collapse; color:black; border-radius: 8px; font-size:90%; white-space: normal;}
.dataTables_wrapper th {border-collapse: separate; position:sticky; border: 2px solid #aa9672; background-color:#d3c09a; color:#866347; padding:5px;}
/* forced first column th */
.dataTables_wrapper td:nth-child(1) {
text-align: center;
border-collapse: separate;
position:sticky;
border: 2px solid #aa9672;
background-color:#d3c09a;
color:#866347; padding:5px;
font-weight:bold;
}
.dataTables_wrapper td {border: 1px solid #aa9672; background-color:#ddcead; padding: 5px;}
.dataTables_wrapper a {color: #306EAB!important;}
/* styling when sorting */
table.dataTable.display tbody tr.odd > td:nth-child(1).sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > td:nth-child(1).sorting_1,
table.dataTable.display tbody tr.even > td:nth-child(1).sorting_1,
table.dataTable.order-column.stripe tbody tr.even > td:nth-child(1).sorting_1 {
border-collapse: separate;
position: sticky;
border: 2px solid #aa9672;
background-color: #d3c09a;
color: #866347;
padding: 5px;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
border: 1px solid #aa9672; background-color:#ddcead; padding: 5px;
}
/*.dataTables_wrapper td, table.dataTable thead th, table.dataTable thead td {white-space:nowrap;}*/
/*.dataTables_wrapper {white-space:nowrap;}*/
/* for mobile full width */
@media only screen and (max-width: 768px) {
.dataTables_wrapper {
width: 100%!important;
}
}
/*test*/
.pachan-notice a {
color: var(--theme-link-color, #f6d999);
}
.dataTables_wrapper table {
table-layout:auto!important;
}
.dataTables_wrapper {
overflow-x:scroll;
}