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.
/* Base Code provided by Mr Pie 5 */
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: 'Caslon Antique';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://commons.wiki.gg/images/4/41/CaslonAntique.ttf?20241004204549 format('truetype');
}
@font-face {
font-family: 'Caslon Antique';
font-style: normal;
font-weight: bold;
font-display: swap;
src: url(https://commons.wiki.gg/images/a/ae/CaslonAntique-Bold.ttf?20241004204549 format('truetype');
}
/****************************
* Simple dark api.php pages *
*****************************/
@media (prefers-color-scheme: dark) {
body {
background-color:#20211f;
border-color: #7b7261;
color: #f6ecdb;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(234, 224, 207);
border-color: rgb(83, 84, 81);
}
.mw-highlight .s2 {
color: rgb(206, 99, 91);
}
a {
color: rgb(133, 180, 221);
}
a:visited {
color: rgb(141, 127, 218);
}
pre, code, .mw-code {
background-color: rgb(34, 35, 33);
color: rgb(234, 224, 207);
border-color: rgb(63, 64, 62);
}
}
/***************
* End dark API *
****************/
/********************************
* Miscellaneous utility classes *
*********************************/
.responsive-image {
max-width:100%;
height:auto;
}
.theme-dark .invert-on-dark,
.theme-light .invert-on-light {
filter:invert(100%);
}
.pixelated {
image-rendering:pixelated;
}
@media screen and (min-width:720px){
.mobileonly {
display:none;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}
/***************************
* End misc utility classes *
****************************/
/*******************
* Main page layout *
* [[Lancer Wiki]] *
********************/
#mp-welcome {grid-area:welcome;}
#mp-contribute {grid-area:contribute;}
#mp-mainportals {grid-area:mainportals;}
#mp-multiplayer {grid-area:multiplayer;}
#mp-modportals {grid-area:modportals;}
#mp-morecontent {grid-area:morecontent;}
#mp-links {grid-area:links;}
#mp-news {grid-area:news;}
#mp-youtube {grid-area:youtube;}
#mp-container {
display:grid;
grid-template-areas:
"welcome"
"mainportals"
"multiplayer"
"modportals"
"morecontent"
"links"
"news"
"youtube"
"contribute";
grid-template-columns:100%;
gap:10px;
}
@media screen and (min-width:990px) {
#mp-container {
grid-template-areas:
"welcome contribute links"
"mainportals mainportals links"
"multiplayer multiplayer news"
"modportals modportals news"
"morecontent morecontent youtube";
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width:1350px) {
#mp-container {
grid-template-columns: 3fr 3fr 2fr;
}
}
.mp-box {
display:flex;
flex-flow: column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background: rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
border: 1px solid var(--wiki-content-border-color);
padding: 0 0.5em;
text-align: center;
}
.mp-box h1,
.mp-box h2 {
margin: 0;
padding: 5px 0;
}
.mp-body {
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}
.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.mp-box.has-floating-image {
display:block;
}
.mp-box.has-floating-image .mp-body {
height:unset;
display:block;
}
.mp-heading,
.mp-box .welcome-message {
text-align:center;
font-weight:bold;
font-family:var(--wiki-heading-font-family);
}
.mp-heading {
border-bottom: 1px solid var(--wiki-content-border-color);
font-size: 150%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
color:var(--wiki-heading-color);
}
.mp-box .welcome-message {
font-size: 200%;
margin: 0 0 10px;
padding: 0 0 5px;
}
#mp-banner-container {
position: relative;
}
#mp-welcome-box {
text-align:center;
position:relative;
overflow:hidden;
}
#mp-welcome {
position: relative;
font-family: var(--wiki-heading-font-family);
z-index: 2;
box-sizing: border-box;
}
#mp-welcome h1 {
border-bottom: none;
text-shadow: 0 0 5px var(--wiki-content-border-color), 0 0 5px var(--wiki-content-border-color), 0 0 5px var(--wiki-content-border-color), 0 0 5px var(--wiki-content-border-color);
}
#mp-welcome .welcome-message {
color: #fff;
filter: drop-shadow(0px 2px 3px #000);
}
#mp-welcome .welcome-subtitle {
background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
padding:0.5em;
}
#mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: 1;
background: url(/images/e/e0/MP_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.theme-dark #mp-banner {
filter: blur(5px) brightness(50%);
}
.theme-light #mp-banner {
filter: blur(5px) contrast(50%);
}
.mp-links {
--gap:10px;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}
.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
flex: max(calc(50% - var(--gap)), 5em) 1 1;
outline:1px solid var(--wiki-content-link-color);
transition:0.1s ease-in;
}
.mp-links > ul > li:hover {
background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}
.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links > ul > li:hover a {
text-decoration: underline;
}
.mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
}
.mp-links > ul > li > a:first-child {
height:100%;
}
.mp-links > ul > li > a:last-child:not(:first-child) {
height:unset;
}
.mp-links.stretch,
.mp-links.stretch > ul {
height:100%;
}
.mp-links.side-image li {
flex-flow:row nowrap;
}
#mp-multiplayer table,
#mp-morecontent table {
text-align: left;
width: 95%;
align-self: center;
}
#mp-multiplayer .faction-list {
margin: 5px;
list-style: none;
display: flex;
flex-flow: row wrap;
gap: 10px;
justify-content: space-around;
}
#mp-multiplayer .faction-list > li {
flex: 1 10%;
}
#mp-multiplayer .multiplayer-list ul {
list-style: none;
display: flex;
flex-flow: row wrap;
gap: 5px 10px;
margin: 5px;
}
#mp-multiplayer .multiplayer-list ul > li {
flex: 1 20%;
padding: 2px 5px;
white-space: nowrap;
/*box-shadow: inset 0 0 20px 2px black;
text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black;*/
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
}
#mp-morecontent table td {
vertical-align: top;
width: 33%;
}
#mp-mainportals table a > img {
max-width: 15vw;
max-height: 15vw;
}
#mp-multiplayer table a > img {
max-width: 11vw;
max-height: 11vw;
}
#mp-banners {
display: grid;
grid-template-columns: repeat(auto-fill, 25%);
}
@media screen and (max-width:720px) {
#mp-banners {
grid-template-columns: repeat(auto-fill, 50%);
}
}
#mp-banners > a {
margin: 5px;
}
#mp-banners > a > img {
width: 100%;
height: auto;
}
#mp-links > :not(h2) {
text-align: left;
}
#mp-links ul {
list-style: none;
margin: 0px;
}
#mp-links img {
width: 32px;
height: auto;
}
#mp-news #news-list {
max-height: 450px;
overflow-y: auto;
margin: 5px 0;
}
#mp-youtube .youtube-feed figcaption {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
/***********************
* End main page layout *
************************/
/**************************
* [[Template:Doc]] styles *
***************************/
.documentation {
margin: 0em auto 1em;
background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.1);
border: 2px solid var(--wiki-content-border-color);
border-radius: 1em;
padding: 1em;
}
.documentation-header {
padding-bottom: 3px;
border-bottom: 1px solid var(--wiki-content-border-color);
margin-bottom: 1ex;
}
/**************************
* End Template:Doc styles *
***************************/
/***********************
* [[Template:License]] *
************************/
.license {
display:flex;
flex-flow:row nowrap;
background-color:var(--wiki-content-background-color--secondary);
border:1px solid var(--wiki-content-border-color);
padding:0.1em;
margin:0.5em 0 0.5em 0;
align-items:center;
gap:5px;
}
.copyright-logo {
filter:var(--wiki-icon-general-filter);
}
/***********************
* End Template:License *
************************/
/************
* Infoboxes *
*************/
/* portable infoboxes */
:root {
--pi-background: var(--wiki-content-background-color);
--pi-secondary-background: var(--wiki-accent-color);
--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
--pi-secondary-background-label: var(--wiki-accent-label-color);
--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
}
.portable-infobox {
border:4px solid var(--pi-border-color);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background:rgba(var(--pi-secondary-background--rgb), 0.75);
color:var(--pi-secondary-background-label);
}
.portable-infobox .pi-data {
background:rgba(var(--pi-secondary-background--rgb), 0.18);
}
.portable-infobox .pi-image {
padding: 8px;
}
.pi-image-thumbnail {
max-width:100%;
}
.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background-label);
}
.pi-theme-baby .pi-image-thumbnail {
width:100px;
}
/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
border-bottom: 0;
font-family: inherit;
font-weight: 700;
margin: 0;
}
/**/
/* Template infoboxes; [[Template:Infobox]] and [[:Category:Infobox part templates]] */
.infobox {
float: right;
width: 23em;
max-width:100%;
margin-left: 1em;
margin-bottom: 0.5em;
padding: 4px;
border:2px solid var(--wiki-content-border-color);
background-color:var(--wiki-content-background-color);
}
.infobox-table {
width: 100%;
padding: 0;
background-color:transparent;
border: 0;
}
.infobox-header,
.infobox-section {
background-color: var(--wiki-content-background-color--secondary);
border:1px solid var(--wiki-content-border-color);
font-weight:bold;
text-align:center;
}
.infobox-header {
font-size: 150%;
padding:0.4em;
}
.infobox-section {
padding:0.05em 0.5em;
}
.infobox-centered {
text-align: center;
}
.infobox-centered img {
max-width:100%;
height:auto;
}
.infobox-row {
vertical-align: top;
}
.infobox-row-name {
text-align: left;
vertical-align:middle;
padding:0.1em;
font-size:89%;
}
.infobox-spacer {
height: 0.5em;
}
@media screen and (max-width:720px) {
.infobox {
margin:auto;
box-sizing:border-box;
float:none;
}
}
/**/
/****************
* End infoboxes *
*****************/
/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/
/********************************************
* Utility classes for standard MW galleries *
*********************************************/
/* it's important that spaced comes before centered in the sheet */
.gallery.spaced {
display:flex;
flex-flow:row wrap;
justify-content:space-evenly;
margin-left:unset;
}
.gallery.centered {
text-align:center;
margin-left:auto;
margin-right:auto;
}
/**********************
* End gallery classes *
***********************/
/**********************
* Begin Elite style *
***********************/
.page-Elite #mp-welcome-box {grid-area:welcome;}
.page-Elite #mp-about-box {grid-area:about;}
.page-Elite #mp-featured-box {grid-area:featured;}
.page-Elite #mp-big-four-box {grid-area:four;}
.page-Elite #mp-priority-projects-box {grid-area:priority;}
.page-Elite #mp-projects-box {grid-area:projects;}
.page-Elite #mp-wiki-box {grid-area:wiki;}
.page-Elite #mp-container {
display:grid;
grid-template-areas:
"welcome"
"about"
"featured"
"four"
"priority"
"projects"
"wiki";
grid-template-columns:100%;
gap:10px;
}
@media screen and (min-width:990px) {
.page-Elite #mp-container {
grid-template-areas:
"welcome welcome"
"about about"
"featured four"
"priority projects"
"wiki wiki";
grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width:1350px) {
.page-Elite #mp-container {
grid-template-areas:
"welcome welcome welcome"
"about about four"
"featured featured four"
"priority projects projects"
"wiki wiki wiki";
grid-template-columns:2fr 1fr 2fr;
}
}
.page-Elite .mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
border:1px solid var(--wiki-content-border-color);
padding:0px;
}
.page-Elite .mp-body {
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}
.page-Elite .mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.page-Elite .mp-box.has-floating-image {
display:block;
}
.page-Elite .mp-box.has-floating-image .mp-body {
height:unset;
display:block;
text-align: justify;
}
.page-Elite .mp-box .mp-heading,
.page-Elite .mp-box .welcome-message {
text-align:center;
font-weight:bold;
font-family:var(--wiki-heading-font-family);
overflow: initial;
}
.page-Elite .mp-box .mp-heading {
border-bottom: 1px solid var(--wiki-content-border-color);
font-size: 150%;
margin: 0 0 10px 0;
padding: 5px 0;
color:var(--wiki-heading-color);
}
.page-Elite .mp-box .welcome-message {
font-size: 200%;
margin: 0;
padding: 5px 0;
color: #fff;
filter: drop-shadow(0px 2px 3px #000);
}
.page-Elite #mp-banner-container {
position: relative;
}
.page-Elite #mp-welcome-box {
text-align:center;
position:relative;
overflow:hidden;
}
.page-Elite #mp-welcome {
position: relative;
font-family: var(--wiki-heading-font-family);
z-index: 2;
box-sizing: border-box;
}
.page-Elite #mp-welcome .welcome-subtitle {
background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
padding:0.5em;
}
.page-Elite #mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: 1;
background: url(/images/e/e0/MP_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.theme-dark .page-Elite #mp-banner {
filter: blur(5px) brightness(50%);
}
.theme-light .page-Elite #mp-banner {
filter: blur(5px) contrast(50%);
}
.page-Elite .mp-links {
--gap:10px;
}
.page-Elite .mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}
.page-Elite .mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
flex: max(calc(50% - var(--gap)), 5em) 1 1;
outline:1px solid var(--wiki-content-link-color);
transition:0.1s ease-in;
}
.page-Elite .mp-links > ul > li:hover {
background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}
.page-Elite .mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.page-Elite .mp-links > ul > li:hover a {
text-decoration: underline;
}
.page-Elite .mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
}
.page-Elite .mp-links > ul > li > a:first-child {
height:100%;
}
.page-Elite .mp-links > ul > li > a:last-child:not(:first-child) {
height:unset;
}
.page-Elite .mp-links.stretch,
.page-Elite .mp-links.stretch > ul {
height:100%;
}
.page-Elite .mp-links.side-image li {
flex-flow:row nowrap;
}
.page-Elite .mp-links.widerows {
display: flex;
flex-direction: column;
}
.page-Elite .mp-links.widerows > ul > li {
display:flex;
flex-direction:column;
flex-wrap:nowrap;
align-items:stretch;
text-align:center;
box-sizing:border-box;
width: 100%;
}
/**********************
* End Elite style *
***********************/
/******************
* Template:Navbox *
*******************/
.navbox {
clear: both;
margin: 1em 0;
padding: 3px;
font-size: 90%;
width: 100%;
border: 1px solid var(--wiki-content-border-color);
box-sizing: border-box;
}
.navbox-inner,
.navbox-subgroup {
border-spacing: 0;
width: 100%;
}
/* Reduce spacing between adjacent navboxes */
.navbox + .navbox {
margin-top: -1px;
}
/* Spacing between rows */
.navbox-spacer {
height: 2px;
}
/* Title bars and labels */
.navbox-title {
font-weight: bold;
font-size: 115%;
padding: 0.25em 0.6em;
line-height: 1.5em;
color: var(--wiki-accent-label-color);
background: var(--wiki-accent-color);
}
.navbox-title,
.navbox-abovebelow {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: rgba(var(--wiki-accent-color--rgb), 0.18);
color: var(--wiki-content-text-color);
border: 1px solid var(--wiki-content-border-color);
}
.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
color: var(--wiki-accent-link-color);
}
.navbox-title .mw-collapsible-toggle {
font-weight: normal;
text-align: right;
}
.navbox-title-text {
font-size: 105%;
}
/* Navbox-related links */
.navbox-title .navbar {
float: left;
margin-right: 0.5em;
}
.navbox-title .navbar a.external::after {
content: unset;
}
/* Groups */
.navbox-group {
font-weight: bold;
padding: 0 0.5em;
white-space: nowrap;
text-align: center;
}
/* Zebra colouring for rows */
.navbox-even {
background: #fff1;
}
/* Subgroups: equal group labels between different child navboxes */
.navbox-subgroup > tbody > tr {
display: flex;
}
.navbox-subgroup .navbox-group {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 11em;
flex-grow: 1;
flex-shrink: 0;
white-space: normal;
}
.navbox-subgroup .navbox-title {
width:100%;
}
/* Lists */
.navbox-list {
width: 100%;
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
.mw-body .navbox-inner table {
display: table;
}
}
@media screen and (max-width: 720px) {
.mw-body .navbox {
display: none;
}
}
/**********************
* End Template:Navbox *
***********************/
/* {{pp-template}} */
#projects-list {
display: flex;
flex-wrap: wrap;
}
#projects-list li {
display: inline-block;
}
#projects-list li span {
font-weight: bold;
}
#projects-list li > div {
display: inline-block;
vertical-align: middle;
padding: 6px 4px;
}
#projects-list li > div:first-child {
text-align: center;
}
@media (min-width: 360px) {
#projects-list li {
width: 33%;
min-width: 20em;
white-space: nowrap;
flex: 1 0 25%;
}
#projects-list li > div:first-child {
min-width: 50px;
}
}
/* {{pp-template}} end */
/* {{pp-template|small=yes}} */
.plainlist ol,
.plainlist ul {
line-height: inherit;
list-style: none;
margin: 0;
padding: 0; /* Reset Minerva default */
}
.plainlist ol li,
.plainlist ul li {
margin-bottom: 0;
}
/** ToC **/
.toc, .toc * {
box-sizing: border-box;
}
/* base common style */
.toc {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
margin: var(--layout-gap-l) 0;
font-size: unset;
min-width: 12em;
}
.toc a {
color: var(--theme-text-color);
}
.toc .tocnumber {
color: var(--theme-text-color-note);
}
.toc .tocnumber:after {
content: ".";
}
/* header */
.toc .toctitle {
position: relative;
overflow: hidden;
text-align: left;
}
.toc .toctitle h2, .toc .toctitle .toctogglespan {
line-height: 20px;
margin: 0;
border: 0;
}
.toc .toctitle h2 {
padding: 0 8px;
font-weight: normal;
display: flex;
align-items: center;
}
.toc .toctitle h2::before {
content: "";
display: block;
width: 12px;
height: 12px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-text-color);
margin: 0 6px 0 0;
}
.toc .toctogglelabel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
font-size: unset;
line-height: unset;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
display: none;
}
.toc .toctogglelabel::before {
/* arrow */
content: "";
display: block;
pointer-events: none;
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
width: 14px;
height: 14px;
flex: 0 0 auto;
transform: scaleY(-1);
}
.toc .toctogglelabel:hover::before {
background-color: var(--theme-icon-color-hover);
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
transform: none;
}
.toc .toctogglecheckbox:checked ~ ul {
/* do not change ToC title size when toggle show/hide. */
overflow: hidden;
display: block;
height: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toc > ul {
margin: var(--layout-box-padding) 0 0 0;
border-top: 1px solid var(--theme-border-color);
padding-top: var(--layout-box-padding);
}
.toc > ul a {
display: block;
padding: 2px 8px;
border-radius: 4px;
transition: background 0.3s;
}
.toc > ul a:hover {
text-decoration: none;
background: var(--theme-highlight-background);
}
.toc > ul li {
margin: 0;
}
/***quote template style***/
.quote {
margin: auto;
border-collapse: collapse;
border-style: none;
background-color: transparent;
width: 50%;
}
@media only screen and (max-width: 720px) {
.quote {
width: 100% !important;
}
}
/***Elite templates styling***/
/**Unit data**/
.unit-container {
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--wiki-content-background-color);
margin-top: 5px;
padding: 10px;
flex-wrap: nowrap;
}
.unit-item {
margin-right: 15px;
}
.unit-icon {
width: 70px;
}
.unit-name {
width: 120px;
}
.unit-decorator {
width: 96px;
text-align: center;
}
/*ElUnitBox*/
.unit-box {
width: 100%;
margin-bottom: 1em;
background-color: var(--wiki-content-background-color);
border: 1px solid var(--wiki-content-border-color);
}
.unit-header {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 170%;
font-size: 120%;
background-color: var(--wiki-content-background-color--secondary);
border: 0;
padding: 0 5px;
}
.unit-content-container {
display: flex;
flex-direction: row;
position: relative;
width: 100%;
}
.unit-icon-wrapper {
position: sticky;
top: 0;
align-self: flex-start;
/* Aligns to the top of the flex container */
height: fit-content;
/* Ensures the wrapper only takes as much height as needed */
flex-shrink: 0;
padding: 5px 15px 5px 5px;
}
.unit-icon-large {
display: flex;
flex-direction: column;
justify-content: flex-start;
/* Changed from center to align from the top */
align-items: center;
width: 84px;
gap: 5px;
overflow: hidden;
}
.unit-icon-large img {
max-width: 100%;
/* Ensures images don't overflow the container */
height: auto;
/* Maintains aspect ratio */
}
.unit-content-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
width: 100%;
}
.unit-detail-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 85%;
flex-grow: 1;
white-space: nowrap;
}
.detail-column {
width: 260px;
padding: 5px;
}
.detail-grid {
display: grid;
grid-template-columns: 105px 155px;
grid-auto-rows: min-content;
gap: 5px 5px;
/* 5px vertical gap, 10px horizontal gap */
align-items: baseline;
/* Aligns grid items along their baseline */
margin: 0;
width: 100%;
}
.detail-grid dt {
font-weight: bold;
}
.detail-grid dd {
margin: 0;
/* Resets default margin */
}
/* For empty dd elements */
.detail-grid dd:empty::after {
content: "\00a0";
display: inline-block;
}
/* Responsive design for smaller screens */
@media (max-width: 600px) {
.detail-grid {
gap: 10px 10px;
}
}
.resource-column {
width: 200px;
padding: 5px;
}
.resource-grid {
display: grid;
grid-template-columns: 30px 1fr 1fr 1fr;
grid-auto-rows: min-content;
width: 100%;
row-gap: 5px;
}
.resource-grid>div {
min-width: 0;
/* Allow content to shrink below min-content if needed */
overflow: hidden;
}
.resource-grid>div:empty::after {
content: "\00a0";
/* Non-breaking space */
display: inline-block;
}
@media (max-width: 600px) {
.resource-column {
width: 260px;
}
.resource-grid {
gap: 10px 10px;
}
}
.unit-description {
flex-grow: 1;
width: 100%;
max-width: 726px;
/* Set the maximum width */
font-size: 85%;
font-style: italic;
line-height: 1.75;
padding: 10px 5px;
box-sizing: border-box;
word-wrap: normal;
white-space: normal;
text-align: left;
margin: 0 auto;
/* Center the description if it's narrower than its container */
}
.unit-footer {
font-size: 85%;
display: flex;
justify-content: flex-end;
}
/* Media query for smaller screens */
@media (max-width: 600px) {
.unit-content-wrapper {
flex-direction: column;
width: 100%;
}
.unit-detail-wrapper {
flex-direction: column;
gap: 5px;
}
}