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.
/** Imports *******************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/** Custom properties *********************************************************/
:root {
--wikigg-bar-height: 35px;
--logo-height: 130px;
--logo-width: 100%;
--panel-row-height: 3rem;
--navigation-height: 50px;
--sidebar-width: 150px;
--grid-layout-gap: 1.2rem;
--panel-gap: 1.2rem;
--body-min-width: 400px;
--main-width: calc(100% - var(--sidebar-width) - 3 * var(--grid-layout-gap));
--main-max-width: calc(100% - 2 * var(--grid-layout-gap));
--radius-small: 2px;
--radius-medium: 4px;
--radius-large: 6px;
--table-image-size: 100px;
--text-huge: 1.44rem;
--text-large: 1.2rem;
--text-medium: 1rem;
--text-small: 0.833rem;
--text-tiny: 0.694rem;
--quadruple: 4rem;
--triple: 3rem;
--double: 2rem;
--sesqui: 1.5rem;
--huge: 1.44rem;
--large: 1.2rem;
--medium: 1rem;
--small: 0.833rem;
--tiny: 0.694rem;
--half: 0.5rem;
/****************************************/
--background-image: url(https://metalstorm.wiki.gg/images/2/26/Background.png);
--icon-sidebar: url(https://metalstorm.wiki.gg/images/9/93/Sidebar-icon.svg);
--icon-sidebar-open: url(https://metalstorm.wiki.gg/images/5/52/Sidebar-open-icon.svg);
--icon-sidebar-close: url(https://metalstorm.wiki.gg/images/4/40/Sidebar-close-icon.svg);
--icon-dashboard: url(https://metalstorm.wiki.gg/images/a/ab/Dashboard-icon.svg);
--icon-menu: url(https://metalstorm.wiki.gg/images/0/07/Menu-icon.svg);
--icon-mediawiki: url(https://metalstorm.wiki.gg/images/c/c3/Generic-page-icon.svg);
--icon-mainpage: url(https://metalstorm.wiki.gg/images/b/b3/Page-icon.svg);
--icon-template: url(https://metalstorm.wiki.gg/images/0/0f/Template-icon.svg);
--icon-table: url(https://metalstorm.wiki.gg/images/2/29/Table-icon.svg);
--icon-user: url(https://metalstorm.wiki.gg/images/4/42/User-icon.svg);
--icon-file: url(https://metalstorm.wiki.gg/images/b/be/Media-icon.svg);
--icon-category: url(https://metalstorm.wiki.gg/images/2/2f/Category-icon.svg);
--icon-talk: url(https://metalstorm.wiki.gg/images/d/d1/Discussion-icon.svg);
--icon-talk-new: url(https://metalstorm.wiki.gg/images/7/73/Discussion-new-icon.svg);
--icon-view: url(https://metalstorm.wiki.gg/images/2/2b/Read-icon.svg);
--icon-edit: url(https://metalstorm.wiki.gg/images/b/b7/Code-icon.svg);
--icon-history: url(https://metalstorm.wiki.gg/images/5/53/History-icon.svg);
--icon-watch: url(https://metalstorm.wiki.gg/images/3/33/Watch-icon.svg);
--icon-unwatch: url(https://metalstorm.wiki.gg/images/8/8a/Unwatch-icon.svg);
--icon-more: url(https://metalstorm.wiki.gg/images/4/48/More-icon.svg);
--icon-search: url(https://metalstorm.wiki.gg/images/4/4a/Search-icon.svg);
--icon-update: url(https://metalstorm.wiki.gg/images/e/e3/Update-icon.svg);
--icon-expand-more: url(https://metalstorm.wiki.gg/images/d/d9/Expand-more-icon.svg);
--icon-info: url(https://metalstorm.wiki.gg/images/7/77/Info-icon.svg);
--icon-warning: url(https://metalstorm.wiki.gg/images/d/d5/Warning-icon.svg);
--icon-error: url(https://metalstorm.wiki.gg/images/9/9c/Error-icon.svg);
/****************************************/
--font: 'Noto Sans', sans-serif;
/****************************************/
--color-pink1: hsl( 0deg 0% 0%);
--color-pink2: hsl( 0deg 59% 88%);
--color-pink3: hsl( 28deg 67% 88%);
--color-red1: hsl(350deg 65% 77%);
--color-red2: hsl(343deg 81% 75%);
--color-red3: hsl( 0deg 0% 0%);
--color-orange1: hsl( 0deg 0% 0%);
--color-orange2: hsl( 23deg 92% 75%);
--color-orange3: hsl( 0deg 0% 0%);
--color-yellow1: hsl( 0deg 0% 0%);
--color-yellow2: hsl( 41deg 86% 83%);
--color-yellow3: hsl( 0deg 0% 0%);
--color-green1: hsl( 0deg 0% 0%);
--color-green2: hsl(115deg 54% 76%);
--color-green3: hsl( 0deg 0% 0%);
--color-blue1: hsl( 0deg 0% 0%);
--color-blue2: hsl(217deg 92% 76%);
--color-blue3: hsl(189deg 71% 73%);
--color-purple1: hsl(267deg 84% 81%);
--color-purple2: hsl(232deg 97% 85%);
--color-purple3: hsl(232deg 97% 85%);
--color-contrast1: hsl(226deg 64% 78%);
--color-contrast2: hsl(226deg 64% 88%);
--color-contrast3: hsl(230deg 60% 98%);
--color-contrast1-filter: invert(65%) sepia(32%) saturate(377%) hue-rotate(188deg) brightness(106%) contrast(88%);
--color-contrast2-filter: invert(82%) sepia(30%) saturate(192%) hue-rotate(190deg) brightness(98%) contrast(95%);
--color-contrast3-filter: invert(90%) sepia(7%) saturate(135%) hue-rotate(194deg) brightness(107%) contrast(98%);
--color-accent1: hsl(217deg 92% 66%);
--color-accent2: hsl(217deg 92% 76%);
--color-accent3: hsl(217deg 92% 86%);
--color-accent1-filter: invert(49%) sepia(85%) saturate(395%) hue-rotate(179deg) brightness(99%) contrast(97%);
--color-accent2-filter: invert(65%) sepia(13%) saturate(1892%) hue-rotate(187deg) brightness(106%) contrast(96%);
--color-accent3-filter: invert(75%) sepia(57%) saturate(245%) hue-rotate(188deg) brightness(96%) contrast(106%);
--color-base1: hsl(240deg 21% 12%);
--color-base2: hsl(240deg 21% 15%);
--color-base3: hsl(237deg 16% 23%);
--color-base4: hsl(234deg 13% 31%);
--color-base5: hsl(233deg 12% 39%);
--color-background: hsl(240deg 21% 12%);
/****************************************/
--color-text-pink: hsl( 0deg 59% 88%);
--color-text-red: hsl(343deg 81% 75%);
--color-text-orange: hsl( 23deg 92% 75%);
--color-text-yellow: hsl( 41deg 86% 83%);
--color-text-green: hsl(115deg 54% 76%);
--color-text-light-blue: hsl(217deg 92% 86%);
--color-text-blue: hsl(217deg 92% 76%);
--color-text-purple: hsl(232deg 97% 85%);
/****************************************/
--color-info-filter: invert(79%) sepia(31%) saturate(432%) hue-rotate(197deg) brightness(105%) contrast(91%);
--color-warning-filter: invert(88%) sepia(28%) saturate(443%) hue-rotate(339deg) brightness(102%) contrast(95%);
--color-error-filter: invert(68%) sepia(78%) saturate(432%) hue-rotate(297deg) brightness(94%) contrast(103%);
}
/** Reset rules ***************************************************************/
* {
margin: 0;
padding: 0;
}
table pre {
padding: unset;
background-color: unset;
color: unset;
border: unset;
}
p {
display: inline;
}
ul {
list-style-image: unset !important;
}
/** Remove ********************************************************************/
#mw-head-base {
display: none;
}
#t-print {
display:none;
}
/** Galleries *****************************************************************/
li.gallerybox div.thumb {
border: 2px solid var(--color-base3);
background-color: transparent;
}
ul.gallery.mw-gallery-traditional {
margin: 1rem 0;
gap: 0.5rem;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
/** Scrollbars ****************************************************************/
/* width */
::-webkit-scrollbar {
width: var(--tiny);
height: var(--tiny);
}
/* Track */
::-webkit-scrollbar-track {
background: var(--color-base3);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--color-base4);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--color-base5);
}
/** Resizer *******************************************************************/
::-webkit-resizer {
background: var(--color-base3);
}
/** Spelling error ************************************************************/
::spelling-error {
text-decoration: solid var(--color-red2) underline;
text-decoration-thickness: 0.1rem;
}
/** Tables ********************************************************************/
.wikitable {
max-width: fit-content;
background-color: var(--color-base1);
color: var(--color-contrast2);
border: 0;
}
.wikitable > * > tr > th {
background-color: var(--color-base3);
}
.wikitable > * > tr > td {
padding: 4px 1rem;
}
.wikitable > * > tr > th, .wikitable > * > tr > td {
border: 1px solid var(--color-base3);
}
table.wikitable.hover-active > tbody > tr:hover {
background-color: var(--color-base2);
}
.mw-datatable, .mw-datatable > * > tr > th, .mw-datatable > * > tr > td {
border: 1px solid var(--color-base3);
}
.mw-datatable > * > tr > th {
background-color: var(--color-base3);
}
.mw-datatable > * > tr > td {
background-color: unset;
}
.mw-datatable > * > tr > td > a:has(img) {
width: var(--table-image-size);
height: var(--table-image-size);
display: flex;
align-items: center;
justify-content: center;
}
.mw-datatable > * > tr > td > a > img {
width: auto;
height: auto;
max-width: var(--table-image-size);
max-height: var(--table-image-size);
}
/***** Full-width Tables *****/
table.wikitable.full-width-table, table.wikitable.full-width-table tbody, table.wikitable.full-width-table tbody tr {
max-width: 100%;
}
/** Text elements *************************************************************/
#mw-content-text {
text-align: justify;
}
#mw-panel .vector-menu-heading {
font-size: var(--text-medium);
}
#mw-panel .mw-list-item {
font-size: var(--text-small);
padding: 0.4rem 0;
}
.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited {
color: var(--color-red2);
}
.vector-menu-tabs .mw-watchlink.icon a {
padding-top: 0;
}
.vector-menu-tabs-legacy li a {
padding: 0 8px;
}
a.new {
color: var(--color-red2) !important;
}
#p-cactions-label, .vector-menu-heading-label {
color: var(--color-accent2);
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-accent2);
}
h1, h2 {
border-bottom: 0;
}
a, a:visited {
color: var(--color-accent2) !important;
}
.mw-editsection {
font-family: var(--font);
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
font-family: var(--font);
}
.text-mono {
font-family: monospace;
height: 1.2rem;
}
/** Content wrapper ***********************************************************/
.content-wrapper {
display: contents;
}
/** Sidebar *******************************************************************/
#mw-panel {
grid-column: sidebar;
grid-row-start: 5;
grid-row-end: 9;
margin: 0;
padding: 0;
width: 100%;
height: fit-content;
}
#mw-panel .vector-menu {
margin: 0 0 var(--panel-gap) 0;
background-color: var(--color-base2);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
}
#mw-panel .vector-menu.panel-sidebar-hide {
display: none;
}
#p-logo+.mw-portlet .vector-menu-heading {
display: flex;
}
.vector-menu-portal {
padding: 0;
}
.vector-menu-portal .vector-menu-heading {
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-image: none;
background-color: var(--color-base3);
color: var(--color-accent2);
font-weight: bold;
}
.vector-menu-portal .vector-menu-content {
padding-bottom: 0;
margin: 0;
}
.vector-menu-portal .vector-menu-content ul {
padding: 0.4rem 0.8rem;
}
#mw-panel .vector-menu-portal .vector-menu-content li a, .vector-menu-portal .vector-menu-content li a:visited {
color: var(--color-contrast2) !important;
}
.vector-menu-tabs-legacy li a, .vector-menu-tabs-legacy li a:visited, .vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
color: var(--color-accent2);
}
.vector-menu-tabs, .vector-menu-tabs-legacy li, .vector-menu-tabs-legacy .selected {
background: none;
background-image: none;
}
/***** Logo *****/
#p-logo {
height: var(--logo-height);
width: var(--logo-width);
background-size: 100%;
position: absolute;
top: 55px;
left: 50%;
transform: translate(-50%, 0);
}
#p-logo a {
height: var(--logo-height);
width: var(--logo-width);
min-width: var(--body-min-width);
background-size: contain;
}
/***** Menu toggle button *****/
.menu-toggle {
display:none;
height: 2rem;
width: 2rem;
margin: 0.5rem;
background-image: var(--icon-menu);
background-repeat: no-repeat;
background-position: center;
filter: var(--color-accent2-filter);
}
/** Navigation ****************************************************************/
#mw-navigation {
display: contents;
}
#mw-head {
grid-column: main-col;
grid-row: navigation-row;
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
background-color: var(--color-base3);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}
#mw-head * {
float: unset;
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
}
#left-navigation, #right-navigation {
display: flex;
align-items: center;
float: none;
margin: 0;
padding: 0 0.4rem;
}
.vector-menu-tabs, .vector-menu-tabs-legacy li, .vector-menu-tabs-legacy .selected,
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: stretch;
}
.vector-menu-tabs-legacy .selected {
color: var(--color-accent2);
}
div#mw-head .selected {
filter: var(--color-contrast2-filter) !important;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none;
}
.vector-menu-tabs-legacy li a {
display: flex;
align-items: center;
justify-content: center;
height: auto;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: stretch;
}
.vector-menu-tabs .mw-watchlink.icon a {
width: auto;
height: auto;
padding-top: 1.25em;
padding-left: 8px;
padding-right: 8px;
}
#mw-head .vector-menu-tabs .mw-list-item a span {
display: none;
}
#mw-head .vector-menu-tabs .mw-list-item:after {
content: "";
display: block;
width: 100%;
height: 100%;
}
.vector-menu-heading-label:after {
content: "";
opacity: unset;
padding: unset;
filter: unset;
background-image: var(--icon-more);
}
#ca-nstab-sidebar-control, #ca-nstab-main, #ca-nstab-user, #ca-nstab-image, #ca-nstab-category, #ca-nstab-mediawiki, #ca-nstab-project, #ca-nstab-template, #ca-nstab-special, #ca-talk, #ca-addsection,
#ca-view, #ca-edit, #ca-viewsource, #ca-history, #ca-watch, #ca-unwatch, #ca-recreatedata, #p-cactions-label {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 4px;
margin: 0 6px;
height: 2.5rem;
width: 1.5rem;
font-size: 0;
transition: all 0.2s ease;
transform: scale(1);
filter: var(--color-accent2-filter);
}
#p-cactions {
margin: 0 6px;
}
#ca-nstab-sidebar-control:hover, #ca-nstab-main:hover, #ca-nstab-user:hover, #ca-nstab-image:hover, #ca-nstab-category:hover, #ca-nstab-mediawiki:hover, #ca-nstab-project:hover, #ca-nstab-template:hover, #ca-nstab-special:hover, #ca-talk:hover, #ca-addsection:hover,
#ca-view:hover, #ca-edit:hover, #ca-viewsource:hover, #ca-history:hover, #ca-watch:hover, #ca-unwatch:hover, #ca-recreatedata:hover, #p-cactions-label:hover {
transform: scale(1.2);
}
#p-cactions-checkbox {
display: none;
}
#p-cactions-label {
display: block;
margin: 0;
padding: 0;
background-image: var(--icon-more) !important;
background-size: contain !important;
background-position: center !important;
}
#ca-nstab-sidebar-control {
background-image: var(--icon-sidebar-close);
}
#ca-nstab-sidebar-control.clicked {
background-image: var(--icon-sidebar-open);
}
#ca-nstab-main {
background-image: var(--icon-mainpage);
}
#ca-nstab-user {
background-image: var(--icon-user);
}
#ca-nstab-image {
background-image: var(--icon-file);
}
#ca-nstab-category {
background-image: var(--icon-category);
}
#ca-nstab-mediawiki, #ca-nstab-project {
background-image: var(--icon-mediawiki);
}
#ca-nstab-template {
background-image: var(--icon-template);
}
#ca-nstab-special {
background-image: var(--icon-table);
}
#ca-nstab-table {
background-image: var(--icon-mediawiki);
}
#ca-talk {
background-image: var(--icon-talk);
}
#ca-addsection {
background-image: var(--icon-talk-new);
}
#ca-view {
background-image: var(--icon-view);
}
#ca-edit, #ca-viewsource {
background-image: var(--icon-edit);
}
#ca-history {
background-image: var(--icon-history);
}
#ca-watch {
background-image: var(--icon-unwatch);
}
#ca-unwatch {
background-image: var(--icon-watch);
}
#ca-recreatedata {
background-image: var(--icon-update);
}
.vector-menu-tabs .mw-watchlink.icon a:before {
display: none;
}
.vector-menu-dropdown .vector-menu-heading:after {
height: auto;
opacity: 1;
padding-left: 2px;
filter: invert();
}
.vector-menu-dropdown .mw-list-item a {
color: unset;
padding: 0.4rem !important;
}
#p-cactions .vector-menu-content {
background-color: var(--color-base2);
border: 2px solid var(--color-base3);
color: var(--color-contrast2);
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
}
.vector-search-box {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.vector-search-box form {
margin: 0;
}
.vector-search-box-input {
color: var(--color-contrast2);
background-color: var(--color-base4);
border: 2px solid var(--color-base5);
border-radius: var(--radius-medium);
}
.vector-search-box-input:hover, .vector-search-box-input:focus, .vector-search-box-inner:hover, .vector-search-box-inner:hover .vector-search-box-input:focus {
border-color: var(--color-accent2);
box-shadow: none;
}
.vector-search-box-input::placeholder {
color: var(--color-contrast2);
opacity: 0.5;
}
.searchButton[name=go] {
background-image: var(--icon-search);
filter: var(--color-contrast1-filter);
}
/** Body **********************************************************************/
body {
font-family: var(--font);
background-color: var(--color-background);
display:grid;
grid-template-columns: [left-gap] var(--grid-layout-gap) [sidebar] var(--sidebar-width) [center-gap] var(--grid-layout-gap) [main-col] var(--main-width) [right-gap] var(--grid-layout-gap);
grid-template-rows: [top-bar] var(--wikigg-bar-height) [top-gap] var(--grid-layout-gap) [logo] var(--logo-height) [center-gap] var(--grid-layout-gap) [panel-row] 0 [panel-navigation-gap] 0 [navigation-row] var(--navigation-height) [main-row] auto [about] auto [bottom-gap] var(--grid-layout-gap) [bottom-bar] var(--wikigg-bar-height);
min-width: var(--body-min-width);
}
body.body-mediawiki-expanded {
grid-template-columns: [left-gap] var(--grid-layout-gap) [sidebar] 0 [center-gap] 0 [main-col] var(--main-max-width) [right-gap] var(--grid-layout-gap);
}
.mw-body {
grid-column: main-col;
grid-row: main-row;
box-sizing: border-box;
margin: 0;
padding: 1rem;
color: var(--color-contrast2);
background:var(--color-base2);
border: 2px solid var(--color-base3);
border-top: none;
border-bottom: none;
font-family: inherit;
}
#mw-page-base {
background-image: var(--background-image);
background-size: cover;
background-repeat: no-repeat;
background-color: var(--color-base1);
position: absolute;
top: var(--wikigg-bar-height);
width: 100%;
height: 50vw;
min-width: var(--body-min-width);
z-index:-1;
}
/***** Categories *****/
.catlinks {
margin: 1rem 0;
border: 2px solid var(--color-base4);
background-color: var(--color-base3);
border-radius: var(--radius-medium);
}
/** Footer ********************************************************************/
.mw-footer {
box-sizing: border-box;
grid-column: main-col;
grid-row: about;
display: grid;
grid-template-columns: [footer-left-col] auto [footer-right-col] max-content;
grid-template-rows: [footer-top-row] auto [footer-middle-row] auto [footer-bottom-row] auto;
width: 100%;
margin: 0;
border: 2px solid var(--color-base3);
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
background-color: var(--color-base2);
height: fit-content;
padding: 12px;
}
#footer-info {
display: contents;
}
#footer-info-lastmod {
grid-column: footer-left-col;
grid-row: footer-top-row;
place-self: start;
width: 100%;
}
#footer-info-copyright {
grid-column: footer-left-col;
grid-row: footer-middle-row;
place-self: start;
width: 100%;
}
#footer #footer-info-copyright img {
float: right;
height: 31px;
width: auto;
margin-right: 1rem;
}
#footer-places {
grid-column: footer-left-col;
grid-row: footer-bottom-row;
place-self: start;
width: 100%;
}
#footer-icons {
grid-column: footer-right-col;
grid-row: footer-middle-row;
place-self: start;
}
#footer-icons li {
margin: 0;
}
.mw-footer li {
color: var(--color-contrast2);
}
/** Table of contents *********************************************************/
.toc {
margin-top: 1rem;
padding: 0.5rem 1rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
}
#mw-toc-heading {
color: var(--color-contrast2);
}
.toctogglelabel {
color: var(--color-accent2);
}
.tocnumber {
color: var(--color-contrast2);
}
/** Ace Editor ****************************************************************/
.ace-content, .ace-tm {
background-color: var(--color-base1);
color: var(--color-contrast2);
}
.ace-tm .ace_print-margin {
display: none; /* Keep it enabled if you want, but I don't know why we would need it. */
background: var(--color-base4);
}
.ace-tm .ace_gutter {
background: var(--color-base1);
color: var(--color-base3);
border-left: 2px solid var(--color-base3);
}
.ace-tm .ace_gutter-active-line {
background-color: unset;
}
.ace_gutter-cell {
color: inherit;
}
.ace_gutter-cell.ace_error, .ace_gutter-cell.ace_warning, .ace_gutter-cell.ace_info {
background-size: contain;
background-position: left;
background-repeat: no-repeat;
color: #000000;
}
.ace_gutter-cell.ace_error {
background-image: var(--icon-error);
filter: var(--color-error-filter);
}
.ace_gutter-cell.ace_warning {
background-image: var(--icon-warning);
filter: var(--color-warning-filter);
}
.ace_gutter-cell.ace_info {
background-image: var(--icon-info);
filter: var(--color-info-filter);
}
.ace-tm .ace_cursor {
color: var(--color-contrast2);
}
.ace-tm .ace_marker-layer .ace_selection {
background: var(--color-base3);
}
.ace-tm .ace_marker-layer .ace_selected-word {
border: none;
background: var(--color-base3);
color: var(--color-contrast2);
}
.ace-tm .ace_marker-layer .ace_bracket {
border: 1px solid var(--color-contrast2);
}
.ace-tm .ace_support.ace_type, .ace-tm .ace_support.ace_class {
color: var(--color-text-light-blue);
}
.ace-tm .ace_variable {
color: var(--color-text-light-blue);
}
.ace-tm .ace_support.ace_constant {
color: var(--color-text-yellow);
}
.ace-tm .ace_keyword {
color: var(--color-text-orange);
}
.ace-tm .ace_constant.ace_numeric {
color: var(--color-text-yellow);
}
.ace-tm .ace_constant {
color: var(--color-text-red);
}
.ace-tm .ace_string {
color: var(--color-text-green);
}
.ace-tm .ace_comment {
color: var(--color-text-green);
}
.ace-tm .ace_support.ace_function {
color: var(--color-text-blue);
}
.ace-tm .ace_marker-layer .ace_active-line {
background: rgba(255, 255, 255, 0.05);
}
/** Syntax Highlighting *******************************************************/
.cm-mw-link-pagename, .cm-mw-link-bracket, .cm-mw-link-delimiter, .cm-mw-extlink, .cm-mw-free-extlink {
color: var(--color-text-blue);
}
.cm-mw-list, .cm-mw-indenting {
color: var(--color-text-red);
}
.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic {
color: var(--color-text-green);
}
.cm-mw-matchingbracket {
background-color: var(--color-base5);
box-shadow: none;
}
.CodeMirror-focused .CodeMirror-selected {
background: var(--color-base4);
}
.CodeMirror-selected {
background: var(--color-base4);
}
.CodeMirror-line::selection,.CodeMirror-line > span::selection,.CodeMirror-line > span > span::selection{
background: var(--color-base4);
}
.CodeMirror-line::-moz-selection,.CodeMirror-line > span::-moz-selection,.CodeMirror-line > span > span::-moz-selection{
background: var(--color-base4);
}
/** Code Mirror ***************************************************************/
.CodeMirror {
background: var(--color-base2);
color: var(--color-contrast2);
}
.CodeMirror-linenumber {
color: var(--color-contrast2);
}
.CodeMirror-gutters {
background-color: var(--color-base3);
border-right: 2px solid;
border-color: var(--color-base5);
}
.wikiEditor-ui .CodeMirror {
padding: 0; /* Otherwise, the editor looks weird */
}
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
margin-left: 2px;
}
/** Tag pre / mw-highlight *******************************************************/
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
border: 2px solid var(--color-base3);
box-shadow: unset;
padding: 0.5rem 1rem 0.5rem 3rem;
overflow-x: scroll;
}
/* fallback text color */
.mw-highlight {
color: var(--color-contrast2);
}
.mw-highlight .linenos {
background-color: unset;
color: var(--color-base3);
width: 2.5rem;
}
pre, code, .mw-code {
background-color: var(--color-base1);
color: var(--color-contrast2);
border: unset;
box-sizing: border-box;
padding: 0.3rem 0.5rem;
white-space: pre;
}
/* operator and parenthesis */
.mw-highlight .o {
color: var(--color-contrast2);
}
.mw-highlight .cp, .mw-highlight .kc {
color: var(--color-text-red);
}
.mw-highlight .s1, .mw-highlight .s2, .mw-highlight .sr {
color: var(--color-text-red);
}
.mw-highlight .nc, .mw-highlight .nd, .mw-highlight .nn {
color: var(--color-text-orange);
}
.mw-highlight .kt {
color: var(--color-text-orange);
}
.mw-highlight .kr {
color: var(--color-text-yellow);
}
.mw-highlight .nb {
color: var(--color-text-orange);
}
.mw-highlight .nt {
color: var(--color-text-yellow);
}
/* function */
.mw-highlight .nf {
color: var(--color-text-yellow);
}
/* integer, float */
.mw-highlight .mi, .mw-highlight .mf {
color: var(--color-text-yellow);
}
/* comments */
.mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm {
color: var(--color-text-green);
}
/* string */
.mw-highlight .sx {
color: var(--color-text-green);
}
/* variable */
.mw-highlight .nv {
color: var(--color-text-light-blue);
}
.mw-highlight .nx {
color: var(--color-text-light-blue);
}
/* keyword */
.mw-highlight .k, .mw-highlight .kd {
color: var(--color-text-blue);
}
.mw-highlight .ow {
color: var(--color-text-purple);
}
/** Wiki.gg Related Styling ***************************************************/
div#mw-indicator-mw-helplink {
display: none;
}
#mw-indicator-mw-helplink a {
color: black !important;
filter: var(--color-accent2-filter);
}
#preferences .mw-htmlform-submit-buttons {
padding: 1em;
background-color: var(--color-base3);
}
.oo-ui-panelLayout-framed {
border: none;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
border-bottom: 1px solid;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: var(--color--accent1);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: var(--color-base3);
color: var(--color-contrast1);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: var(--color-base1);
color: var(--color-accent1);
}
.oo-ui-tabSelectWidget-framed {
background: var(--color-base2);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background: var(--color-base3);
color: var(--color-accent1);
}
/** Wiki Editor ***************************************************************/
#msupload-div {
background: var(--color-base3);
border-top: 2px solid;
border-color: var(--color-base5);
padding: 3px;
}
#msupload-dropzone {
margin: 0;
color: var(--color-contrast1);
border: 1px dashed;
border-color: var(--color-contrast1);
}
.wikiEditor-ui-toolbar .group {
border-right: none; /* Removing this looks (lowkey) better */
}
.wikiEditor-ui .wikiEditor-ui-view {
border: none;
border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}
.wikiEditor-ui .wikiEditor-ui-top {
border: none;
}
.wikiEditor-ui-toolbar {
background-color: var(--color-base3);
border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
filter: invert();
}
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert) {
filter: none;
}
.codeEditor-status {
border-top: none;
background-color: var(--color-base4);
}
.mw-editform .editOptions {
border-radius: 0 0 var(--radius-medum) var(--radius-medium);
}
.editOptions {
background-color: var(--color-base3);
color: var(--color-contrast2);
border: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-base4);
color: var(--color-contrast2);
border: 1px solid;
border-color: var(--color-base5);
}
.oo-ui-checkboxInputWidget [type=checkbox]+span {
background-color: var(--color-base4);
border-color: var(--color-base5);
}
.wikiEditor-ui textarea {
background-color: var(--color-base1);
border: unset;
border-left: 2px solid var(--color-base3);
box-sizing: border-box;
color: var(--color-contrast2);
padding: 1rem;
}
/** File page *****************************************************************/
#filetoc {
background-color: var(--color-base3);
border: none;
margin-bottom: 1rem;
font-size: 1rem;
}
table.mw-datatable.listfiles {
background-color: var(--color-base1);
max-width: fit-content;
}
table.mw-datatable.listfiles tbody tr:hover td {
background-color: var(--color-base2);
}
/** Recent changes ************************************************************/
div.mw-changeslist {
text-align: left;
}
div.mw-changeslist td.mw-changeslist-line-inner {
text-wrap: wrap;
}
div.mw-changeslist table.mw-changeslist-line.mw-changeslist-edit,
div.mw-changeslist table.mw-changeslist-line.mw-changeslist-log-move,
div.mw-changeslist table.mw-changeslist-line.mw-changeslist-log-upload,
div.mw-changeslist table.mw-changeslist-line.mw-changeslist-log-delete {
margin: 0;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
}
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert), .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert) {
filter: var(--color-accent2-filter);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--color-base4);
border: 0;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:hover {
background-color: var(--color-base5);
}
.oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
color: var(--color-accent2);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-widget, .oo-ui-tagMultiselectWidget-handle {
color: var(--color-contrast2);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
color: var(--color-contrast2);
}
.oo-ui-tagItemWidget {
border-radius: 0 !important;
}
.oo-ui-panelLayout {
background-color: var(--color-base3);
}
/** Revision history **********************************************************/
#pagehistory li.selected {
background-color: var(--color-base3);
color: var(--color-contrast2);
outline: 0;
}
.mw-plusminus-neg {
color: var(--color-red2);
}
.mw-plusminus-pos {
color: var(--color-green2);
}
td.diff-context {
background: var(--color-base2);
border-color: var(--color-base3);
color: var(--color-contrast2);
}
td.diff-deletedline {
background: var(--color-base1);
border-color: var(--color-red2);
color: var(--color-contrast2);
}
.diff-deletedline .diffchange {
background: var(--color-base3);
}
td.diff-addedline {
background: var(--color-base1);
border-color: var(--color-green2);
color: var(--color-contrast2);
}
.diff-addedline .diffchange {
background: var(--color-base3);
}
/** Message box ***************************************************************/
.mw-message-box {
margin: 0 1rem;
}
.mw-message-box-warning {
background-color: var(--color-base3);
border: 2px solid var(--color-base4);
color: var(--color-contrast2);
margin: 1rem 0;
}
/** Notification box **********************************************************/
.mw-notification {
background-color: var(--color-base2);
border: 2px solid var(--color-base3);
color: var(--color-contrast3);
}
/** Wiki.gg footer ************************************************************/
#wikigg-footer {
grid-row: bottom-bar;
grid-column-start: 1;
grid-column-end: 6;
}
/******************************************************************************/
/***** DRUID Infoboxes *****/
/******************************************************************************/
.druid-container {
/* These variables are designed to inherit from your wiki's color variables.
If your wiki uses a different naming scheme, change the inner names to match yours.
If your wiki doesn't use color variables you should consider doing so,
otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
*/
--druid-background-color: var(--color-base1);
--druid-secondary-background-color: var(--color-base3);
--druid-secondary-background-label-color: var(--color-contrast2);
--druid-tertiary-background-color: var(--color-base3);
--druid-border-color: var(--color-base3);
--druid-link-color: var(--color-accent2);
--druid-link-label-color: var(--color-contrast2);
}
.druid-container {
border: 2px solid var(--druid-border-color);
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1rem 1rem;
width: auto;
box-sizing: border-box;
border-collapse: collapse;
}
.druid-main-image {
text-align:center;
padding: 1rem;
}
.druid-title,
.druid-section {
background: var(--druid-secondary-background-color);
color: var(--druid-secondary-background-label-color);
text-align: center;
font-size: 1.5em;
}
.druid-section {
font-size: 1.25em;
}
.druid-label {
font-weight: bold;
float: left;
margin: 1px 0 1px 1rem;
}
.druid-main-images {
padding: 5px;
}
.druid-main-images img {
max-width: 100%;
height: auto;
}
.druid-main-images-labels {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 0.25em;
gap: 0.25em;
}
.druid-main-images-label {
cursor: pointer;
flex: 1 1 auto;
text-align: center;
transition: .1s ease-in;
outline: 1px solid var(--druid-link-color);
}
.druid-main-images-label.focused {
background: var(--druid-link-color);
color: var(--druid-link-label-color);
}
.druid-main-images-label:not(.focused):hover {
background: var(--druid-link-color);
}
.druid-toggleable-data,
.druid-main-images-file {
display: none;
}
.druid-toggleable-data.focused,
.druid-main-images-file.focused {
display: block;
}
.druid-grid {
display: grid;
}
.druid-grid-item {
background: var(--druid-tertiary-background-color);
margin: 0.25em;
padding: 0.25em;
border: 1px solid var(--druid-border-color);
}
.druid-data {
padding-right: 1rem;
text-align: end;
}
tr.druid-row-Role > th, tr.druid-row-Hitpoints > th {
margin-top: 0.5rem;
}
tr.druid-row-Traits > th, tr.druid-row-Afterburnerfuel > th {
margin-bottom: 0.5rem;
}
tr.druid-row-Role > td, tr.druid-row-Hitpoints > td {
padding-top: 0.5rem;
}
tr.druid-row-Traits > td, tr.druid-row-Afterburnerfuel > td {
padding-bottom: 0.5rem;
}
/******************************************************************************/
/***** Cargo tables *****/
/******************************************************************************/
table.cargoTable {
text-align: initial;
}
.cargoTable thead tr {
background-color: var(--color-base3) !important;
}
.cargoTable thead tr th {
border: 1px solid var(--color-base3) !important;
padding: 0 0.5rem !important;
}
.cargoTable tbody tr {
background-color: var(--color-base1) !important;
}
.cargoTable tbody tr td {
border: 1px solid var(--color-base3) !important;
text-align: center;
padding: 4px 1rem;
}
th.headerSort, th.headerSort .headerSortUp, th.headerSort .headerSortDown {
padding: 0 0.5rem !important;
background-image: none !important;
}
th.headerSort::after {
content: "";
display: inline-block;
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440);
background-repeat: no-repeat;
background-position: bottom;
width: 1rem;
height: 1rem;
filter: var(--color-contrast2-filter)
}
th.headerSort.headerSortUp::after {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up.svg?2ff5c);
background-position: center;
}
th.headerSort.headerSortDown::after {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down.svg?4b69e);
}
table.cargoTable.mergeSimilarCells td.odd, table.cargoTable.mergeSimilarCells td.even {
background: unset;
}
/******************************************************************************/
/***** Tabber *****/
/******************************************************************************/
.tabber__header {
box-shadow: unset !important;
}
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
background-color: var(--color-base1);
transition: background-color 250ms ease 0s;
}
.tabber__indicator {
background: var(--color-accent2);
}
/******************************************************************************/
/***** Collapsible Text *****/
/******************************************************************************/
div.collapsible-button {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--color-base3);
cursor: pointer;
padding: 0.5rem 1rem;
margin-top: 1rem;
}
div.collapsible-button.is-expanded > div.collapsible-button-icon {
transform: rotate(180deg);
}
div.collapsible-button-icon {
width: 1rem;
height: 1rem;
background-image: var(--icon-expand-more);
background-position: center;
background-repeat: no-repeat;
filter: var(--color-accent2-filter);
transition: transform 0.1s ease;
}
div.collapsible-text {
display: none;
background-color: var(--color-base1);
padding: 0.5rem;
border: 2px solid var(--color-base3);
border-top: none;
}
/******************************************************************************/
/***** Template Icons *****/
/******************************************************************************/
.icon-half, .icon-tiny, .icon-small, .icon-medium, .icon-large, .icon-huge, .icon-sesqui, .icon-double, .icon-triple, .icon-quadruple {
width:auto;
height: auto;
}
.icon-half {
max-height: var(--half);
max-width: 1.5rem;
}
.icon-tiny {
max-height: var(--tiny);
max-width: 2rem;
}
.icon-small {
max-height: var(--small);
max-width: 2.5rem;
}
.icon-medium {
max-height: var(--medium);
max-width: 3rem;
}
.icon-large {
max-height: var(--large);
max-width: 3.6rem;
}
.icon-huge {
max-height: var(--huge);
max-width: 4.3rem;
}
.icon-sesqui {
max-height: var(--sesqui);
max-width: 4.5rem;
}
.icon-double {
max-height: var(--double);
max-width: 6rem;
}
.icon-triple {
max-height: var(--triple);
max-width: 9rem;
}
.icon-quadruple {
max-height: var(--quadruple);
max-width: 12rem;
}
.icon-value {
display: inline;
margin-left: 0.2rem !important;
font-family: monospace;
}
/******************************************************************************/
/***** Template Overlay Icons *****/
/******************************************************************************/
div.overlay-icon-container {
display: inline-flex;
vertical-align: middle;
overflow: hidden;
}
div.overlay-icon-container .icon-half, div.overlay-icon-container .icon-tiny, div.overlay-icon-container .icon-small, div.overlay-icon-container .icon-medium, div.overlay-icon-container .icon-large, div.overlay-icon-container .icon-huge,
div.overlay-icon-container .icon-sesqui, div.overlay-icon-container .icon-double, div.overlay-icon-container .icon-triple, div.overlay-icon-container .icon-quadruple {
vertical-align: unset;
}
div.overlay-icon-container p.icon-overlay {
font-family: monospace;
color: #e6e6e6;
}
div.overlay-icon-container p.icon-overlay.overlay-light {
color: #e6e6e6;
}
div.overlay-icon-container p.icon-overlay.overlay-dark {
color: #4d4d4d;
}
div.overlay-icon-container a.image:has(img.icon-half) {
max-height: var(--half);
}
div.overlay-icon-container a.image:has(img.icon-tiny) {
max-height: var(--tiny);
}
div.overlay-icon-container a.image:has(img.icon-small) {
max-height: var(--small);
}
div.overlay-icon-container a.image:has(img.icon-medium) {
max-height: var(--medium);
}
div.overlay-icon-container a.image:has(img.icon-large) {
max-height: var(--large);
}
div.overlay-icon-container a.image:has(img.icon-huge) {
max-height: var(--huge);
}
div.overlay-icon-container a.image:has(img.icon-sesqui) {
max-height: var(--sesqui);
}
div.overlay-icon-container a.image:has(img.icon-double) {
max-height: var(--double);
}
div.overlay-icon-container a.image:has(img.icon-triple) {
max-height: var(--triple);
}
div.overlay-icon-container a.image:has(img.icon-quadruple) {
max-height: var(--quadruple);
}
div.overlay-icon-container a.image:has(img.icon-half) + p.icon-overlay {
width: var(--half);
height: var(--half);
font-size: 0.25rem;
}
div.overlay-icon-container a.image:has(img.icon-tiny) + p.icon-overlay {
width: var(--tiny);
height: var(--tiny);
font-size: 0.3rem;
}
div.overlay-icon-container a.image:has(img.icon-small) + p.icon-overlay {
width: var(--small);
height: var(--small);
font-size: 0.4rem;
}
div.overlay-icon-container a.image:has(img.icon-medium) + p.icon-overlay {
width: var(--medium);
height: var(--medium);
font-size: 0.5rem;
}
div.overlay-icon-container a.image:has(img.icon-large) + p.icon-overlay {
width: var(--large);
height: var(--large);
font-size: 0.6rem;
}
div.overlay-icon-container a.image:has(img.icon-huge) + p.icon-overlay {
width: var(--huge);
height: var(--huge);
font-size: 0.7rem;
}
div.overlay-icon-container a.image:has(img.icon-sesqui) + p.icon-overlay {
width: var(--sesqui);
height: var(--sesqui);
font-size: 0.75rem;
}
div.overlay-icon-container a.image:has(img.icon-double) + p.icon-overlay {
width: var(--double);
height: var(--double);
font-size: 1rem;
}
div.overlay-icon-container a.image:has(img.icon-triple) + p.icon-overlay {
width: var(--triple);
height: var(--triple);
font-size: 1.5rem;
}
div.overlay-icon-container a.image:has(img.icon-quadruple) + p.icon-overlay {
width: var(--quadruple);
height: var(--quadruple);
font-size: 2rem;
}
p.icon-overlay {
margin: 0 !important;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
}
/******************************************************************************/
/***** Template Currencies *****/
/******************************************************************************/
.template-currencies-style {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 4px;
height: 1rem;
}
/******************************************************************************/
/***** Template Code *****/
/******************************************************************************/
.template-code {
display: inline;
padding: 0.2rem;
background-color: var(--color-base1);
color: var(--color-contrast2);
border: 0;
border-radius: var(--radius-medium);
}
/******************************************************************************/
/***** Template Username *****/
/******************************************************************************/
.template-username {
font-weight: 600;
font-size: 1rem;
}
@keyframes move {
0% { background-position: -150% 0%; }
100% { background-position: 150% 0; }
}
.template-username.template-username-user {
background: linear-gradient(60deg, hsl(0 0% 70% / 1) 0%, hsl(0 0% 80% / 1) 40%, hsl(0 0% 100% / 1) 50%, hsl(0 0% 80% / 1) 60%, hsl(0 0% 70% / 1) 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite
}
.template-username.template-username-contributor {
background: linear-gradient(60deg, hsl(47 100% 50% / 1) 0%, hsl(47 100% 70% / 1) 40%, hsl(47 100% 90% / 1) 50%, hsl(47 100% 70% / 1) 60%, hsl(47 100% 50% / 1) 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite
}
.template-username.template-username-trusted {
background: linear-gradient(60deg, hsl(190 75% 50% / 1) 0%, hsl(190 75% 70% / 1) 40%, hsl(190 75% 90% / 1) 50%, hsl(190 75% 70% / 1) 60%, hsl(190 75% 50% / 1) 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite
}
.template-username.template-username-admin {
background: linear-gradient(60deg, hsl(256 86% 70% / 1) 0%, hsl(256 86% 80% / 1) 40%, hsl(256 86% 90% / 1) 50%, hsl(256 86% 80% / 1) 60%, hsl(256 86% 69% / 1) 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite
}
/******************************************************************************/
/***** Template Quote *****/
/******************************************************************************/
blockquote.quote {
display: flex;
max-width: fit-content;
border-left: 2px solid var(--color-accent2);
padding: 0.5rem;
margin: 1rem 1rem 1rem 0;
background-color: var(--color-base1);
}
blockquote.quote span {
font-size: var(--text-small);
font-style: italic;
}
blockquote.quote cite {
float: right;
}
blockquote.quote cite p {
text-align: right;
}
/******************************************************************************/
/***** Template Content Break *****/
/******************************************************************************/
div.content-break-small, div.content-break-medium, div.content-break-large {
display: flex;
box-sizing: border-box;
height: 1px;
}
div.content-break-small {
margin: 0.25rem 0;
}
div.content-break-medium {
margin: 0.5rem 0;
}
div.content-break-large {
margin: 1rem 0;
}
div.content-break-line {
height: 0 !important;
border: 1px solid var(--color-base3);
}
/******************************************************************************/
/***** Template Image *****/
/******************************************************************************/
div.image-template-container {
display: flex;
align-items: center;
}
div.image-template-container img.image-template-file {
width: auto;
height: auto;
max-width: 100%;
}
div.image-template-container a:has(> img.image-template-file.tiny) img.image-template-file {
max-height: 5rem;
}
div.image-template-container a:has(> img.image-template-file.small) img.image-template-file {
max-height: 10rem;
}
div.image-template-container a:has(> img.image-template-file.medium) img.image-template-file {
max-height: 15rem;
}
div.image-template-container a:has(> img.image-template-file.large) img.image-template-file {
max-height: 20rem;
}
div.image-template-container a:has(> img.image-template-file.huge) img.image-template-file {
max-height: 25rem;
}
div.image-template-container.left {
justify-content: flex-start;
}
div.image-template-container.center {
justify-content: center;
}
div.image-template-container.right {
justify-content: flex-end;
}
/******************************************************************************/
/***** Template Image Gallery *****/
/******************************************************************************/
div.image-gallery-template-container {
display: flex;
overflow-x: scroll;
flex-direction: row;
gap: 1rem;
padding-bottom: 0.5rem;
margin: 1rem 0;
}
div.image-gallery-template-container div.image-template-container img {
max-width: unset;
}
/******************************************************************************/
/***** Template Planes Selector *****/
/******************************************************************************/
div.planes-selector-item {
padding: 0.5rem 1rem;
color: var(--color-accent2);
cursor: pointer;
}
div.planes-selector-item:hover {
background-color: var(--color-base4);
}
div.planes-selector-item.selected {
background-color: var(--color-base1);
}
/******************************************************************************/
/***** Template Planes Comparison *****/
/******************************************************************************/
table.planes-comparison-item {
display: inline-table;
width: fit-content;
min-width: 15rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
padding: 0.5rem 1rem;
}
table.planes-comparison-item tr {
display: flex;
align-content: center;
justify-content: center;
}
table.planes-comparison-item tr.planes-comparison-item-category {
color: var(--color-accent2);
}
table.planes-comparison-item tr.planes-comparison-item-data {
justify-content: space-between;
}
table.planes-comparison-item tr.planes-comparison-item-name {
margin-bottom: 0.5rem;
font-weight: bold;
color: var(--color-accent2);
}
table.planes-comparison-item tr.planes-comparison-item-image img {
height: 5rem;
width: auto;
}
/******************************************************************************/
/***** Main Page *****/
/******************************************************************************/
.main-page-tile-container {
display: grid;
grid-template-columns: [main-page-tile-left] 100% [main-page-tile-right] 0;
grid-template-rows: [main-page-row-first] auto [main-page-row-second] auto [main-page-row-third] auto [main-page-row-fourth] auto;
}
/******************************************************************************/
/***** Template Welcome *****/
/******************************************************************************/
.welcome-tile {
grid-column: main-page-tile-left;
grid-row: main-page-row-first;
display: block;
box-sizing: border-box;
padding: 1rem 2rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
margin-bottom: 2rem;
}
.welcome-tile h1 {
margin-top: 0;
border: 0;
text-align: center;
}
.welcome-info, .welcome-links {
display: block;
width: 100%;
}
.welcome-info {
text-align: justify;
}
.welcome-links {
text-align: center;
}
/******************************************************************************/
/***** Template About *****/
/******************************************************************************/
.about-tile {
grid-column: main-page-tile-left;
grid-row: main-page-row-second;
display: block;
box-sizing: border-box;
padding: 1rem 2rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
margin-bottom: 2rem;
}
.about-tile h1 {
margin: 0;
border: 0;
text-align: left;
}
.about-info {
margin: 1rem 0;
display: block;
width: 100%;
text-align: justify;
}
ul.about-pages {
list-style: none;
margin: 0;
}
ul.about-pages li.about-page-item {
display: inline-block;
margin: 0 2rem 1rem 0;
}
/******************************************************************************/
/***** Template News *****/
/******************************************************************************/
.news-tile {
grid-column: main-page-tile-left;
grid-row: main-page-row-third;
display: block;
box-sizing: border-box;
padding: 1rem 2rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
margin-bottom: 2rem;
overflow-y: scroll;
}
.news-tile h1 {
margin: 0;
border: 0;
text-align: left;
}
ul.news-list {
list-style: none;
margin: 1rem 0 0 0;
}
li.news-list-item {
list-style: none;
display: flex;
flex-direction: column;
margin: 0 0 1rem 0;
}
li.news-list-item:last-of-type {
margin-bottom: 0;
}
li.news-list-item h3.news-list-item-title {
margin: 0;
padding: 0;
}
li.news-list-item a.image {
width: 100%;
height: auto;
margin-top: 0.5rem;
}
li.news-list-item .news-list-item-image {
width: 100%;
height: auto;
}
li.news-list-item p.news-list-item-text {
width: 100%;
text-align: justify;
margin-top: 0.5rem;
}
/******************************************************************************/
/***** Template Downloads *****/
/******************************************************************************/
.downloads-tile {
grid-column: main-page-tile-left;
grid-row: main-page-row-fourth;
display: block;
box-sizing: border-box;
padding: 1rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
margin-bottom: 2rem;
}
.downloads-tile h1 {
margin-top: 0;
border: 0;
text-align: center;
}
.downloads-tile .downloads {
display: flex;
justify-content: space-around;
align-items: center;
}
/******************************************************************************/
/***** Template Navigation Box *****/
/******************************************************************************/
div.navigation-box {
display: block;
box-sizing: border-box;
padding: 0.5rem 1rem;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
border-radius: var(--radius-medium);
margin: 1rem 0;
}
div.navigation-box p.navigation-box-list-title {
margin: 0;
padding: 0;
color: var(--color-accent3);
font-weight: bold;
font-size: var(--text-medium);
}
div.navigation-box ul.navigation-box-list {
margin: 0 0 0.5rem 0;
}
div.navigation-box ul.navigation-box-list:last-of-type {
margin: 0;
}
div.navigation-box ul.navigation-box-list li.navigation-box-list-item {
display: inline-block;
margin: 0 2rem 0 0;
}
div.navigation-box ul.navigation-box-list li.navigation-box-list-item a {
color: var(--color-contrast2) !important;
}
/******************************************************************************/
/***** Template User Overview *****/
/******************************************************************************/
div.pilot-overview div.pilot-icon-container, div.pilot-overview div.pilot-banner-container {
display: inline-block;
height: 100px;
width: auto;
}
div.pilot-overview div.pilot-icon-container .pilot-icon, div.pilot-overview div.pilot-banner-container .pilot-banner {
height: 100px;
width: auto;
}
div.pilot-overview div.pilot-banner-container p.pilot-name, div.pilot-overview div.pilot-banner-container p.pilot-squadron {
position: absolute;
font-size: 25px;
margin: 0;
}
div.pilot-overview div.pilot-banner-container p.pilot-name {
transform: translate(-425px, 10px);
}
div.pilot-overview div.pilot-banner-container p.pilot-squadron {
transform: translate(-425px, 50px);
}
/******************************************************************************/
/***** Template Table Selector *****/
/******************************************************************************/
div.text-button-container {
display: flex;
flex-wrap: wrap;
}
div.text-button-container .text-button {
padding: 0.5rem 1rem;
color: var(--color-accent2);
cursor: pointer;
transition: background-color 0.25s ease;
}
div.text-button-container .text-button:hover {
background-color: var(--color-base3);
}
div.text-button-container .text-button.text-button-pressed {
background-color: var(--color-base1);
border-bottom: 2px solid var(--color-accent2);
}
div.text-button-container p.text-button-description {
margin:0;
padding: 0.5rem 1rem;
place-self:center;
color: var(--color-accent2)
}
/******************************************************************************/
/***** Sparkling Effect *****/
/******************************************************************************/
.sparkling-effect {
padding: 6px;
background-image: url("https://metalstorm.wiki.gg/images/a/a5/Sparkles.gif");
}
/******************************************************************************/
/***** Template *Details Table *****/
/******************************************************************************/
table.wikitable thead tr th p.measurement-unit {
font-weight: 200;
margin-right: 0.5rem;
}
/******************************************************************************/
/***** Template Loadout Container *****/
/******************************************************************************/
div.loadout-container {
margin: 1rem 0;
}
div.loadout-container > p {
display: none;
}
div.loadout-container table.wikitable {
margin: 0 0 1rem 0;
}
div.loadout-container table.wikitable:last-of-type {
margin: 0;
}
/******************************************************************************/
/***** Template Matchmaking Tool *****/
/******************************************************************************/
div.match-container {
display: flex;
}
div.alpha-team-container, div.bravo-team-container {
display: inline-block;
width: 50%;
}
div.alpha-team-container {
background-color: #2EA9BF;
}
div.bravo-team-container {
background-color: #C05B51;
}
div.alpha-team-container div.player {
border: 4px solid #46bdd2;
}
div.bravo-team-container div.player {
border: 4px solid #d0837c;
}
div.player {
box-sizing: border-box;
width: 100%;
height: 100px;
display: grid;
grid-template-columns: 2.5% [player-extra] 10% 2.5% [player-type] 10% 2.5% [player-stat] 32.5% 2.5% [player-special-ability] 10% 2.5% [player-mod-first] 10% 2.5% [player-mod-second] 10% 2.5%;
padding: 1% 0;
align-items: center;
box-sizing: border-box;
}
div.player:not(:last-of-type) {
border-bottom-width: 0 !important;
}
div.player div.trophy-disparity, div.player div.player-party, div.player div.player-type,
div.player div.player-special-ability, div.player div.player-mod-first, div.player div.player-mod-second {
width: 100%;
height: 60%;
margin: 20% 0;
cursor: pointer;
}
div.player div.trophy-disparity {
grid-column: player-extra;
background-image: url('https://metalstorm.wiki.gg/images/8/86/Alert-trophy.png');
opacity: 0.3;
}
div.player div.player-party {
grid-column: player-extra;
background-image: url('https://metalstorm.wiki.gg/images/5/5b/Party-icon.png');
opacity: 0.3;
}
div.player div.player-type {
grid-column: player-type;
background-image: url('https://metalstorm.wiki.gg/images/c/c3/Icon-pilot-bot.png');
}
div.player div.player-stat {
grid-column: player-stat;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
div.player div.player-stat div.player-plane-level, div.player div.player-stat div.player-trophy-level, div.player div.player-stat div.player-trophy-value {
height: 30%;
display: flex;
justify-content: center;
}
div.player div.player-stat div.player-plane-level div.player-plane-level-icon,
div.player div.player-stat div.player-trophy-level div.player-trophy-level-icon,
div.player div.player-stat div.player-trophy-value div.player-trophy-value-icon {
height: 100%;
width: 30%;
}
div.player div.player-stat div.player-plane-level div.player-plane-level-icon {
background-image: url('https://metalstorm.wiki.gg/images/9/9a/Plane-level-icon.png');
}
div.player div.player-stat div.player-trophy-level div.player-trophy-level-icon {
background-image: url('https://metalstorm.wiki.gg/images/1/1d/Max-rank-icon.png');
}
div.player div.player-stat div.player-trophy-value div.player-trophy-value-icon {
background-image: url('https://metalstorm.wiki.gg/images/a/a8/Trophy-icon.png');
}
div.player div.player-stat input.matchmaking-input {
width: 50%;
background-color: var(--color-base2);
border: 2px solid var(--color-base3);
border-radius: 0;
color: var(--color-contrast2);
box-sizing: border-box;
text-align: center;
font-family: monospace;
}
div.player div.player-stat input.matchmaking-input:focus-visible {
border-radius: 0;
border: none;
outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
div.player div.player-special-ability {
grid-column: player-special-ability;
background-image: url(https://metalstorm.wiki.gg/images/9/96/Special-ability-missing.png);
}
div.player div.player-mod-first, div.player div.player-mod-second {
background-image: url(https://metalstorm.wiki.gg/images/b/b5/Mod-missing.png);
}
div.player div.player-mod-first {
grid-column: player-mod-first;
}
div.player div.player-mod-second {
grid-column: player-mod-second;
}
div.player div.trophy-disparity, div.player div.player-party, div.player div.player-type,
div.player div.player-stat div.player-plane-level div.player-plane-level-icon, div.player div.player-stat div.player-trophy-level div.player-trophy-level-icon, div.player div.player-stat div.player-trophy-value div.player-trophy-value-icon,
div.player div.player-special-ability, div.player div.player-mod-first, div.player div.player-mod-second {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/***** First player *****/
div.alpha-team-container div.player:first-of-type div.player-type {
background-image: url('https://metalstorm.wiki.gg/images/f/fc/Icon-pilot-default.png') !important;
}
/***** Match setting *****/
div.match-setting {
margin: 1rem 0;
padding: 1rem;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: var(--color-base1);
border: 2px solid var(--color-base3);
}
div.match-setting div.squadron {
background-image: url('https://metalstorm.wiki.gg/images/5/55/Squadron-icon.png');
}
div.match-setting div.underdog {
background-image: url('https://metalstorm.wiki.gg/images/5/56/Underdog-icon.png');
}
div.match-setting div.squadron, div.match-setting div.underdog {
width: 2rem;
height: 2rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.3;
cursor: pointer;
}
div.match-setting div.match-setting-button {
padding: 0.5rem 1rem;
background-color: var(--color-base2);
border: 2px solid var(--color-base3);
cursor: pointer;
}
/******************************************************************************/
/***** Mobile layout *****/
/******************************************************************************/
@media screen and (max-width: 961px) {
#mw-head {
top: 0;
}
.menu-toggle {
display:block;
grid-column: left-panel;
grid-row: top-panel;
}
#mw-panel {
grid-column: main-col;
grid-row: panel-row;
/*display: flex;*/
display:grid;
grid-template-columns: [left-panel] var(--panel-row-height) [right-panel] auto;
grid-template-rows: [top-panel] var(--panel-row-height) [bottom-panel] auto;
z-index: 1;
box-sizing: border-box;
margin: 0 5%;
width: 90%;
background-color: var(--color-base3);
border-radius: var(--radius-medium);
}
#mw-panel .vector-menu {
margin: 0;
border-radius: 0;
box-sizing: border-box;
}
#mw-panel #vector-menu-container {
grid-column: span 2;
grid-row: bottom-panel;
}
#mw-panel .vector-menu-portal .vector-menu-heading {
background-color: unset;
justify-content: flex-start;
padding-left: 1rem;
padding-bottom: 0;
}
#mw-panel #p-navigation, #mw-panel #p-Guides, #mw-panel #p-Information, #mw-panel #p-tb {
display: none;
border-width: 0 2px;
}
#mw-panel #p-tb {
border-bottom-width: 2px;
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
}
#mw-panel .menu-toggle.expanded ~ #vector-menu-container #p-navigation,
#mw-panel .menu-toggle.expanded ~ #vector-menu-container #p-Guides,
#mw-panel .menu-toggle.expanded ~ #vector-menu-container #p-Information,
#mw-panel .menu-toggle.expanded ~ #vector-menu-container #p-tb {
display: block !important;
}
#search-container {
grid-column: right-panel;
grid-row: top-panel;
display: flex;
align-items: center;
justify-content: end;
}
#p-search {
width: 100%;
margin: 0 1rem 0 0;
}
#p-search #simpleSearch {
min-width: unset;
max-width: unset;
width: 100%;
}
#mw-panel .vector-menu-content-list {
padding: 0 1rem 1rem 1rem;
}
#mw-panel .mw-list-item {
display: inline-block;
margin-right: 2rem;
}
.vector-menu-dropdown .vector-menu-content {
left: unset;
right: 0;
}
body {
display:grid;
grid-template-columns: [left-gap] 0 [sidebar] 0 [center-gap] 0 [main-col] 100% [right-gap] 0;
grid-template-rows: [top-bar] var(--wikigg-bar-height) [top-gap] var(--grid-layout-gap) [logo] var(--logo-height) [center-gap] var(--grid-layout-gap) [panel-row] var(--panel-row-height) [panel-navigation-gap] var(--grid-layout-gap) [navigation-row] var(--navigation-height) [main-row] auto [about] auto [bottom-gap] var(--grid-layout-gap) [bottom-bar] var(--wikigg-bar-height);
min-width: 400px;
}
/******************************************************************************/
/***** DRUID Infoboxes *****/
/******************************************************************************/
.druid-container {
width: 100% !important;
}
.druid-container tbody {
width: 100%;
display: table;
margin: 0 0 1rem 0;
}
/******************************************************************************/
/***** Template Quote *****/
/******************************************************************************/
blockquote.quote {
margin: 1rem 0 !important;
}
/******************************************************************************/
/***** Template Navigation Box *****/
/******************************************************************************/
div.navigation-box ul.navigation-box-list li.navigation-box-list-item {
display: inline-block;
margin: 0.5rem 1rem 0 0;
}
}
/******************************************************************************/
/***** Wide desktop layout *****/
/******************************************************************************/
@media screen and (min-width: 1500px) {
/******************************************************************************/
/***** Main Page *****/
/******************************************************************************/
.main-page-tile-container {
grid-template-columns: [main-page-tile-left] 60% [main-page-tile-right] 40%;
grid-template-rows: [main-page-row-first] auto [main-page-row-second] auto [main-page-row-third] 0 [main-page-row-fourth] auto;
}
.welcome-tile {
grid-row: main-page-row-first;
grid-column-start: 1;
grid-column-end: 3;
}
.about-tile {
grid-row: main-page-row-second;
grid-column-start: 1;
grid-column-end: 2;
margin-right: 0.5rem;
height: fit-content;
}
.news-tile {
grid-row: main-page-row-second;
grid-column-start: 2;
grid-column-end: 3;
margin-left: 0.5rem;
}
.downloads-tile {
grid-row: main-page-row-fourth;
grid-column-start: 1;
grid-column-end: 3;
}
}