MediaWiki:Common.css: Difference between revisions
imported>Dawning Im Wiking It |
imported>Dawning Im Wiking It |
||
| Line 2,114: | Line 2,114: | ||
} | } | ||
.druid-infobox div[data-druid-section] > druid-section { | .druid-infobox div[data-druid-section] > .druid-section { | ||
font-weight: bolder; | font-weight: bolder; | ||
text-shadow: 0px 2px black; | text-shadow: 0px 2px black; | ||
Revision as of 02:40, 9 November 2025
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
font-family: "Daedalus";
src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
--wiki-body-background-image: url(/wiki/Special:Redirect/file/Site-background-image.jpg);
--wiki-body-background-color: #1a1a22;
--wiki-body-background-color--rgb: 26,26,34;
--wiki-body-dynamic-color: #ffffff;
--wiki-body-dynamic-color--rgb: 255,255,255;
--wiki-body-dynamic-color--inverted: #000000;
--wiki-body-dynamic-color--inverted--rgb: 0,0,0;
--wiki-body-dynamic-color--secondary: #dddddd;
--wiki-body-dynamic-color--secondary--rgb: 221,221,221;
--wiki-body-dynamic-color--secondary--inverted: #333333;
--wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
--wiki-body-font-family: "Outfit", serif;
--wiki-pixel-font: "Silkscreen", sans-serif;
--wiki-content-background-color: #1a1a22;
--wiki-content-background-color--rgb: 26,26,34;
--wiki-content-background-opacity: 0.92;
--wiki-content-background-color--secondary: #1b1b1b;
--wiki-content-background-color--secondary--rgb: 11,0,0;
--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
--wiki-content-border-color: #feffe5;
--wiki-content-border-color--rgb: 254,255,229;
--wiki-content-text-color: #ededed;
--wiki-content-text-color--rgb: 237,237,237;
--wiki-content-link-color: #ffc05f;
--wiki-content-link-color--rgb: 255,192,95;
--wiki-content-link-label-color: #0b101b;
--wiki-content-link-label-color--rgb: 11,16,27;
--wiki-content-link-color--visited: var(--wiki-content-link-color);
--wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
--wiki-content-link-color--hover: var(--wiki-content-link-color);
--wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
--wiki-content-redlink-color: #f57c51;
--wiki-content-redlink-color--rgb: 245,124,81;
--wiki-content-text-mix-color: #868686;
--wiki-content-text-mix-color--rgb: 134,134,134;
--wiki-content-text-mix-color-95: #2a2a2a;
--wiki-content-text-mix-color-95--rgb: 42,42,42;
--wiki-content-dynamic-color: #ffffff;
--wiki-content-dynamic-color--rgb: 255, 255, 255;
--wiki-content-dynamic-color--inverted: #000000;
--wiki-content-dynamic-color--inverted--rgb: 0, 0, 0;
--wiki-content-dynamic-color--secondary: #dddddd;
--wiki-content-dynamic-color--secondary--rgb: 221, 221, 221;
--wiki-content-dynamic-color--secondary--inverted: #333333;
--wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51;
--wiki-heading-color: var(--wiki-content-text-color);
--wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
--wiki-heading-font-family: "Daedalus", sans-serif;
--wiki-accent-color: #42a2f1;
--wiki-accent-color--rgb: 66, 162, 241;
--wiki-accent-color--hover: #ba453c;
--wiki-accent-color--hover--rgb: 186,69,60;
--wiki-accent-label-color: #0b101b;
--wiki-accent-label-color--rgb: 11,16,27;
--wiki-accent-link-color: #22214d;
--wiki-accent-link-color--rgb: 34, 33, 77;
--wiki-sidebar-background-color: var(--wiki-content-background-color);
--wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
--wiki-sidebar-border-color: var(--wiki-content-border-color);
--wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
--wiki-sidebar-link-color: var(--wiki-content-link-color);
--wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
--wiki-sidebar-heading-color: var(--wiki-heading-color);
--wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb);
--wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
--wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
--wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
--wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
--wiki-navigation-border-color: var(--wiki-content-border-color);
--wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
--wiki-navigation-text-color: var(--wiki-content-link-color);
--wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
--wiki-navigation-selected-background-color: var(--wiki-content-background-color);
--wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
--wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
--wiki-navigation-selected-border-color--rgb: var(--wiki-navigation-border-color--rgb);
--wiki-navigation-selected-text-color: var(--wiki-content-text-color);
--wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb);
--wiki-alert-color: #ce0018;
--wiki-alert-color--rgb: 206,0,24;
--wiki-alert-label-color: #000000;
--wiki-alert-label-color--rgb: 0,0,0;
--wiki-warning-color:#cf721c;
--wiki-warning-color--rgb: 207,114,28;
--wiki-warning-label-color: #000000;
--wiki-warning-label-color--rgb: 0, 0, 0;
--wiki-success-color: #0c742f;
--wiki-success-color--rgb: 12,116,47;
--wiki-success-label-color: #000000;
--wiki-success-label-color--rgb: 0,0,0;
--wiki-icon-general-filter: invert(100%);
--wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%);
--wiki-content-border-image: url(/wiki/Special:Redirect/file/Wiki-border.png);
}
:root{
/***********************
start logo position
----------------------*/
--wiki-is-top-logo: 1; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */
--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px); /* Valid only when --wiki-is-top-logo is 1. The height the logo should be shown */
--wiki-logo-margin: 15px; /* the width of margin below the logo. When --wiki-is-top-logo is 1, this is also the default value of --wiki-top-spacing */
/*-----------------------
end logo position
***********************/
--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */
}
/*****************************
* PortableInfoboxes *
******************************/
:root {
image-rendering: pixelated !important;
--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 .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);
font-size: 115%;
word-wrap: normal;
}
/*************************************************
.tiered1 .portable-infobox{
}
.tiered2 .portable-infobox{
}
.tiered3 .portable-infobox{
}
.tiered4 .portable-infobox{
}
.tiered5 .portable-infobox{
}
.tiered6 .portable-infobox{
}
.tiered7 .portable-infobox{
}
.tiered8 .portable-infobox{
}
.tiered9 .portable-infobox{
}
.tiered10 .portable-infobox{
}
.tiered11 .portable-infobox{
}
.companion .portable-infobox{
}
.irradiated .portable-infobox{
}
.royal .portable-infobox{
}
.bloodshot .portable-infobox{
}
.cross .portable-infobox{
}
********************************/
.miniboss-box .portable-infobox {
box-shadow: 3px 3px 6px var(--wiki-content-border-color);
}
.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);
}
/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
text-shadow: var(--wiki-accent-color);
border-bottom: 0;
font-family: var(--wiki-heading-font-family);
font-weight: 550;
margin: 0;
word-wrap: normal;
}
.mw-body .portable-infobox {
border-radius:5px;
border-image-source: var(--wiki-content-border-image);
border-image-slice: 15 16;
border-image-width: 15px;
border-image-repeat: stretch;
}
.mw-body .portable-infobox h3 {
font-size: 80%;
font-weight: 500;
}
/*****************************
* End PortableInfoboxes *
******************************/
/** as of Module:navbox version 1.2.2 **/
/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}
/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
/* "space • space"
There may (and likely) be an extra whitespace between <li>s,
therefore we have to use a space character as last character of this sequence.
By this way, the last space and the next whitespce will collapse as a single space,
to make the whitespace on both sides of the middle dot the same width.
*/
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}
/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}
.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
content: ")";
font-weight: inherit;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li::before {
content: " " counter(listitem) ".\20";
}
/* Progressive enhancement:
* try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
display: inline-block;
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/
/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
--navbox-background: none; /* for entire navbox */
--navbox-margin: 0.5em auto;
--navbox-padding: 4px;
--navbox-gap: 3px; /* when using zero-value, it must be 0px */
--navbox-outer-border-color: var(--wiki-content-border-color--accent);
--navbox-outer-border-width: 1px;
--navbox-outer-border-style: solid;
--navbox-outer-border-radius: 0px;
--navbox-font-size: calc(1em - 2px);
--navbox-title-color: var(--wiki-accent-label-color);
--navbox-title-font-size: calc(125%);
--navbox-title-background: var(--wiki-accent-color);
--navbox-title-icon-color: var(--wiki-accent-label-color);
--navbox-title-link-color: var(--navbox-title-color);
--navbox-title-link-color--visited: var(--navbox-title-link-color);
--navbox-title-link-color--hover: var(--wiki-accent-link-color);
--navbox-title-redlink-color: var(--navbox-title-link-color);
--navbox-title-link-decoration: underline solid;
--navbox-title-redlink-decoration: underline wavy;
--navbox-title-padding--y: 0.5em;
--navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
--navbox-above-color: var(--wiki-content-text-color);
--navbox-above-padding: var(--navbox-list-padding);
--navbox-below-background: var(--navbox-above-background);
--navbox-below-color: var(--navbox-above-color);
--navbox-below-padding: var(--navbox-above-padding);
--navbox-header-color: var(--navbox-title-color);
--navbox-header-font-size: calc(110%);
--navbox-header-background: var(--navbox-title-background);
--navbox-header-icon-color: var(--navbox-title-icon-color);
--navbox-header-link-color: var(--navbox-title-link-color);
--navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
--navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
--navbox-header-redlink-color: var(--navbox-title-redlink-color);
--navbox-header-link-decoration: var(--navbox-title-link-decoration);
--navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
--navbox-header-padding--y: 0.3em;
--navbox-subheader-font-size: calc(100%);
--navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
--navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
--navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
--navbox-list-color: var(--wiki-content-text-color);
--navbox-list-padding: 0.25em 0.5em;
/* --navbox-group-* also apply to .ranger-subgroup */
--navbox-group-text-align: left;
--navbox-group-text-align--mobile: left; /* only for mobile view */
--navbox-group-background: color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);
--navbox-group-color: var(--wiki-content-text-color);
--navbox-group-padding: var(--navbox-list-padding);
--navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 30%, transparent);
--navbox-tree-line-width: 2px;
--navbox-tree-indent: 1em;
--navbox-tree-line-indent: 0.5em;
--navbox-tree-line-spacing: var(--navbox-gap);
--icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
--icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
--navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile{
/** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
--navbox-pill-gap: 0.3em;
--navbox-pill-padding: 0.25em 0.75em;
--navbox-pill-border-radius: 3px;
--navbox-pill-box-shadow: none;
--navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
--navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
--navbox-pill-background--hover: var(--navbox-pill-background);
/* remove list cell background */
--navbox-list-background: none;
--navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
--navbox-title-link-color: var(--wiki-accent-link-color);
--navbox-title-link-decoration: none;
--navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
--navbox-padding: 0px;
--navbox-outer-border-width: 0px;
}
/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
.ranger-navbox {
--navbox-above-background: var(--wiki-content-background-color--secondary);
--navbox-list-background: transparent;
--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
--navbox-group-background: var(--wiki-content-background-color--secondary);
--navbox-tree-line-color：var(--wiki-content-background-color--secondary);
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile {
--navbox-pill-background: var(--wiki-content-background-color--secondary);
--navbox-list-background--striped: transparent;
}
}
/***************
* End fallback *
****************/
.ranger-navbox{
border-color: var(--navbox-outer-border-color);
border-style: var(--navbox-outer-border-style);
border-width: var(--navbox-outer-border-width);
border-radius: var(--navbox-outer-border-radius);
padding: var(--navbox-padding);
font-size: var(--navbox-font-size);
margin: var(--navbox-margin);
background: var(--navbox-background);
line-height: 1.5;
clear:both;
}
.ranger-navbox * {
border: 0;
}
.ranger-navbox .center *{
margin-left: unset;
margin-right: unset;
}
.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
text-align: center;
min-height: 1.5em;
position: relative;
z-index: 0;
font-weight: bold;
}
.ranger-navbox .ranger-title{
color: var(--navbox-title-color);
background: var(--navbox-title-background);
font-size: var(--navbox-title-font-size);
padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
color: var(--navbox-header-color);
background: var(--navbox-header-background);
font-size: var(--navbox-header-font-size);
padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
font-size: var(--navbox-subheader-font-size);
padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
font-size: var(--navbox-title-font-size);
position: absolute;
left: var(--navbox-icon-offset--x);
top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
display: block;
}
.ranger-navbox .ranger-meta .nv{
--mask: var(--icon-metalinks);
display: block;
width: 0.84em; /* based on the icon graph */
height: 0.84em;
-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(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
--mask: var(--icon-chevron-down);
position: absolute;
right: 0;
top: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
width: 1.5em;
height: 1.5em;
right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
content: "";
display: block;
width: 1.5em;
height: 1.5em;
position: absolute;
right: var(--navbox-icon-offset--x);
-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(--navbox-title-icon-color);
transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
top: 0;
right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
display: none;
}
.ranger-navbox .ranger-list{
width: unset;
padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
background: var(--navbox-above-background);
color: var(--navbox-above-color);
padding: var(--navbox-above-padding);
width: unset;
}
.ranger-navbox .ranger-below{
background: var(--navbox-below-background);
color: var(--navbox-below-color);
padding: var(--navbox-below-padding);
width: unset;
}
.ranger-navbox .ranger-sublist{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
display: grid;
gap: var(--navbox-gap);
grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align);
white-space: nowrap;
font-weight: bold;
background: var(--navbox-group-background);
color: var(--navbox-group-color);
padding: var(--navbox-group-padding);
width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
--navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
--navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
--navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
--navbox-group-text-align--mobile: left;
}
.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
--navbox-group-text-align--mobile: center;
}
.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
--navbox-group-text-align--mobile: right;
}
.ranger-navbox .ranger-listbox > .ranger-wrap{
background: var(--navbox-list-background);
color: var(--navbox-list-color);
flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
display: grid;
justify-items: stretch;
align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
display: inline-block;
}
.ranger-navbox .align-left,
.ranger-navbox .alignleft{
text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
text-align: right;
}
/* responsive */
@media screen and (max-width: 720px) {
.ranger-navbox .ranger-section-body,
.ranger-navbox .ranger-sublist {
display: flex;
flex-flow: column;
}
.ranger-navbox .ranger-row{
display: block;
}
.ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
.ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
margin-top: var(--navbox-gap);
}
.ranger-navbox .ranger-listbox.empty{
display: none;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align--mobile);
white-space: normal;
}
.ranger-navbox .ranger-sublist {
padding-left: var(--navbox-tree-indent);
margin-left: var(--navbox-tree-line-indent);
}
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox {
position:relative;
}
.ranger-navbox .ranger-group br,
.ranger-navbox .ranger-subgroup br{
display: none;
}
.ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
}
.ranger-navbox .ranger-sublist .ranger-row > ::before{
position: absolute;
left: calc(0px - var(--navbox-tree-indent));
top: 0;
width: var(--navbox-tree-line-width);
height: 100%;
content: '';
display: block;
background-color: var(--navbox-tree-line-color);
}
.ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
.ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
height: calc(100% + var(--navbox-gap));
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
display: none;
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
display: block;
height: calc(50% + var(--navbox-tree-line-width)/2);
}
.ranger-navbox .ranger-subgroup::after,
.ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
position: absolute;
left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
height: var(--navbox-tree-line-width);
content: '';
background-color: var(--navbox-tree-line-color);
}
/* increase height for links */
.ranger-navbox .hlist{
line-height: 2;
}
}
/**** `.pill` class: the "pill" style ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
/* 100% height */
display: flex;
align-items: center;
/* for nested lists */
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
/* remove middle dots betweem items */
.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill-mobile .hlist dd ol::before,
.ranger-navbox.pill-mobile .hlist dd ul::before,
.ranger-navbox.pill-mobile .hlist dd dl::before,
.ranger-navbox.pill-mobile .hlist dt ol::before,
.ranger-navbox.pill-mobile .hlist dt ul::before,
.ranger-navbox.pill-mobile .hlist dt dl::before,
.ranger-navbox.pill-mobile .hlist li ol::before,
.ranger-navbox.pill-mobile .hlist li ul::before,
.ranger-navbox.pill-mobile .hlist li dl::before,
.ranger-navbox.pill-mobile .hlist dd ol::after,
.ranger-navbox.pill-mobile .hlist dd ul::after,
.ranger-navbox.pill-mobile .hlist dd dl::after,
.ranger-navbox.pill-mobile .hlist dt ol::after,
.ranger-navbox.pill-mobile .hlist dt ul::after,
.ranger-navbox.pill-mobile .hlist dt dl::after,
.ranger-navbox.pill-mobile .hlist li ol::after,
.ranger-navbox.pill-mobile .hlist li ul::after,
.ranger-navbox.pill-mobile .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill-mobile .hlist ul,
.ranger-navbox.pill-mobile .hlist ol,
.ranger-navbox.pill-mobile .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
/* 100% height */
display: flex;
align-items: center;
/* for nested lists */
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
/* 100% height */
display: flex;
align-items: center;
/* for nested lists */
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill-mobile .hlist dd:hover,
.ranger-navbox.pill-mobile .hlist dd:focus,
.ranger-navbox.pill-mobile .hlist dt:hover,
.ranger-navbox.pill-mobile .hlist dt:focus,
.ranger-navbox.pill-mobile .hlist li:hover,
.ranger-navbox.pill-mobile .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
}
/*********************
* End Template:Navbox*
**********************/
/*******************
* Main page layout *
********************/
#mp-box-welcome {grid-area: welcome;}
#mp-box-about {grid-area: about;}
#mp-box-links {grid-area: links;}
#mp-box-contribute {grid-area: contribute;}
#mp-box-featured {grid-area: featured;}
#mp-box-basics {grid-area: basics;}
#mp-box-gallery {grid-area: gallery;}
#mp-box-iconlists {grid-area: iconlists;}
/* Example Main Page 1 Grid Layout */
#mp-layout1-container {
display:grid;
grid-template-areas:
"welcome"
"about"
"featured"
"basics"
"gallery"
"links"
"contribute";
grid-template-columns:100%;
gap:10px;
}
@media screen and (min-width:990px) {
#mp-layout1-container {
grid-template-areas:
"welcome welcome"
"about about"
"featured basics"
"gallery links"
"contribute contribute";
grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width:1350px) {
#mp-layout1-container {
grid-template-areas:
"welcome welcome welcome"
"about about basics"
"featured featured basics"
"gallery links links"
"contribute contribute contribute";
grid-template-columns: 2fr 1fr 2fr;
}
}
/* Example Main Page 2 Grid Layout */
#mp-layout2-container {
display:grid;
grid-template-areas:
"welcome"
"links"
"about"
"gallery"
"iconlists"
"contribute";
grid-template-columns:100%;
gap:10px;
}
@media screen and (min-width:990px) {
#mp-layout2-container {
grid-template-areas:
"welcome links"
"gallery about"
"iconlists about"
"iconlists contribute";
grid-template-columns: 3fr 2fr;
}
}
@media screen and (min-width:1350px) {
#mp-layout2-container {
grid-template-areas:
"welcome welcome links"
"welcome welcome about"
"gallery gallery about"
"iconlists iconlists contribute";
grid-template-columns: 3fr 2fr 2fr;
}
}
/* Example Main Page 3 Grid Layout */
#mp-layout3-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) {
#mp-layout3-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) {
#mp-layout3-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;
}
}
.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background-color: var(--background-color-transparent);
padding:0;
box-shadow: 0 0 40px 10px #000000;
margin-top: 1em;
}
/* border-radius:5px;
border-image-source: var(--wiki-content-border-image);
border-image-slice: 15 16;
border-image-width: 15px;
border-image-repeat: stretch;
*/
.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-box h2 {
text-align:center;
font-weight:bold;
font-family: "Daedalus";
overflow: initial;
font-size: 4em;
margin: 0;
text-shadow: 0 0 20px #000000;
color:var(--wiki-content-border-color);
background: radial-gradient(circle, var(--background-color-base), transparent);
border-radius: 20%;
}
.mp-box .welcome-message {
font-size: 5em;
margin: 0;
padding: 5px 0;
color: #fff;
filter: drop-shadow(0px 2px 3px #000);
}
#mp-banner-container {
position: relative;
}
#mp-box-welcome {
text-align:center;
position:relative;
overflow:hidden;
}
#mp-welcome {
display:flex;
flex-flow:column nowrap;
position: relative;
height: 100%;
font-family: var(--wiki-heading-font-family);
z-index: 2;
box-sizing: border-box;
}
#mp-welcome .welcome-subtitle {
height: 100%;
font-family: var(--wiki-body-font-family);
background:rgba(var(--wiki-body-background-color--rgb), 0.9);
margin-left: 4px;
margin-right: 4px;
margin-bottom: 4px;
}
#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;
}
.view-dark #mp-banner {
filter: blur(5px) brightness(50%);
}
.view-light #mp-banner {
filter: blur(5px) contrast(50%);
}
/* [[Template:MP_link]] */
.mp-links {
--gap:10px;
font-size: 1.5em;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}
.mp-main > .mp-links > ul { display: grid; grid-template-columns: repeat(3, minmax(5em, 1fr));}
.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
padding-top: 0.5em;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
}
.mp-main > .mp-links > ul > li {
background: linear-gradient(to bottom, #42a2f160, #4c57b560);
margin: 0 3em;
box-shadow: inset 0 0 10px 7px #42a2f180;
border-radius: 4px;
padding-top: 1em;
padding-bottom: 0.5em;
}
.mp-links > ul > li::before {
transition: opacity 0.5s ease-in-out;
z-index: 0;
pointer-events: none;
}
.mp-links > ul > li:hover::before {
opacity: 0.2;
}
.mp-links > ul > li:hover {
background-color: #42a2f180;
}
.mp-links > ul > li {
}
.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 {
}
.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 icon lists */
.mp-iconlists {
display: flex;
flex-flow: wrap;
gap: 5px 20px;
}
.mp-iconlists > .mp-iconlist {
flex: 1;
min-width: fit-content;
}
.mp-iconlist {
font-size: 4em;
}
.mp-iconlist > h3 {
padding: 0;
margin: 0;
}
.mp-iconlist > ul {
list-style: none;
margin: 0;
}
/* MP gallery */
.mp-box ul.gallery {
display: flex;
flex-flow: wrap;
gap: 5px 10px;
align-items: flex-end;
justify-content: space-evenly;
margin: 0;
}
.mp-box ul.gallery .gallerytext {
margin-top: 1em;
padding: 0;
background-color: var(--wiki-content-background-color--secondary);
}
.mp-box .gallerybox:hover .gallerytext {
background-color: rgba(var(--wiki-content-link-color--rgb), 0.2);
}
.mp-box ul.gallery .gallerytext > p {
margin: 0;
}
.mp-box ul.gallery .gallerytext a {
display: block;
padding: .5em 0;
}
/***********************
* End main page layout *
************************/
/***********************
* Start 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(--wiki-content-background-color, #ffffff);
--druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
--druid-secondary-background-color: var(--wiki-accent-color, #36c);
--druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
--druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
--druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
--druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
--druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
--druid-border-color: var(--wiki-content-border-color, #a7d7f9);
--druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
--druid-link-color: var(--wiki-content-link-color, #0645ad);
--druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
--druid-link-label-color: var(--wiki-content-link-label-color, #fff);
--druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}
.npc-infobox {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat;
}
.druid-container {
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
padding: 0.5em;
width:100%;
max-width:26em;
box-sizing: border-box;
border-collapse: separate;
}
@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}
.druid-main-images-file,
.druid-main-image {
text-align:center;
}
.druid-infobox .druid-title,
.druid-infobox .druid-section {
text-align:center;
font-size:3em;
padding:1px;
border-radius: 0.1em;
}
.npc-infobox .druid-title,
.npc-infobox .druid-section {
background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
color:var(--druid-secondary-background-label-color);
}
.druid-infobox .druid-section {
font-size: 1.25em;
font-weight: 500;
}
.druid-label {
font-weight:bold;
text-align: right;
box-sizing: border-box;
}
.druid-row > .druid-label {
width: 40%;
flex-shrink: 0;
}
.druid-row > .druid-label,
.druid-row > .druid-data {
padding-inline: 0.3em;
}
.druid-main-image,
.druid-main-images {
padding:5px;
}
.druid-main-image img,
.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:rgba(var(--druid-link-color--rgb), 0.25);
}
.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
display:none;
}
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}
.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}
.druid-grid {
display:grid;
gap: 0.3em;
padding: 0.35em;
}
.druid-grid-item {
background:var(--druid-tertiary-background-color);
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
border-radius: 2px;
}
.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
text-align: center;
}
.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}
.druid-collapsed {
display:none!important;
}
.druid-collapsible {
cursor:pointer;
position:relative;
}
.druid-collapsible::after {
content:'\2013';
display:block;
position:absolute;
right:10px;
font-size:20px;
font-weight:bold;
color:var(--druid-secondary-background-label-color);
}
.druid-collapsible-collapsed::after {
content:'+';
}
.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
display: none;
}
/*****************************************
Div support
*****************************************/
div.druid-row {
display:flex;
margin-block: 1px;
}
div.druid-row + div.druid-row {
margin-top: 0;
}
div.druid-row > .druid-label {
}
.npc-infobox div.druid-row > .druid-label {
background: var(--druid-tertiary-background-color);
}
.druid-infobox .druid-title {
font-weight: 700;
font-family: var(--wiki-heading-font-family);
}
.druid-infobox #toc {
display:none;
}
/***********************
* End DRUID infoboxes *
************************/
/*** Miscellaneous ***/
.responsive-image {
max-width:100%;
height:auto;
}
.view-dark .invert-on-dark,
.view-light .invert-on-light {
filter:invert(100%);
}
@media screen and (min-width:720px) {
.mobileonly {
display:none;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}
/**************************
* Start Modular Templates *
**************************/
/********* [[Template:Ambox]] *********/
.ambox {
border: 1px solid var(--wiki-content-border-color);
border-left: 10px solid var(--ambox-color);
border-radius: 2px;
display: flex;
align-items: center;
gap: .6em;
margin: 1em 0;
padding: 3px .6em;
background-color: var(--wiki-content-background-color--secondary);
box-shadow: 2px 2px 5px 0px #0002;
}
@media (min-width: 720px) {
.ambox {
margin-inline: 10%;
}
}
.ambox.tiny {
padding: .04rem .5em;
margin-inline: 0;
width: fit-content;
}
.ambox + .ambox {
margin-top: -.6em;
}
.ambox-content p {
margin: .15em 0;
}
.ambox-title {
font-weight: bold;
}
/********* [[Template:Hatnote]] *********/
.hatnote {
padding: 1px 0 1px 1.6em;
margin-bottom: 0.5em;
font-style: italic;
border-top: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
border-bottom: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
}
.hatnote.icon {
padding-left: 0;
}
/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: rgb(127, 127, 127);
transition: all 0.3s;
cursor: pointer;
}
.spoiler-content > span {
opacity: 0;
transition: all 0.3s;
}
.spoiler-content > * {
pointer-events:none;
}
.spoiler-content.show > * {
pointer-events:unset;
}
.spoiler-content.show {
background-color: rgba(127, 127, 127, 0);
}
.spoiler-content.show > span {
opacity: 1;
}
/********* [[Template:Link icon]] *********/
.link-icon {
display: inline-flex;
align-items: center;
height: var(--link-icon-line-height);
vertical-align: bottom;
}
.link-icon .regular {
align-self: center;
}
.link-icon .regular a {
display: flex;
}
.link-icon .regular img {
height: var(--link-icon-size);
max-width: var(--link-icon-size);
}
.link-icon .fallback {
outline: 1px solid var(--wiki-content-text-color);
border-radius: 50%;
text-align: center;
width: var(--link-icon-size);
line-height: var(--link-icon-size);
}
.link-icon.notext .fallback {
display: inline-block;
}
.link-icon.notext {
display: inline;
}
/********* [[Template:Quote]] *********/
.quote {
background: var(--wiki-content-background-color--secondary);
border-radius: 5px;
border: 2px solid var(--wiki-content-border-color);
margin: .5em 0;
padding: .5em;
}
.quote .block {
display: block;
}
.quote .title {
font-size: large;
font-weight: bold;
}
.quote .content {
font-style: italic;
}
.quote .author {
font-weight: bold;
text-align: end;
}
.quote .marks-wrapper {
display: flex;
gap: 5px;
}
.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
font-size: 100px;
line-height: 0px;
}
.quote .marks-wrapper::before {
content: "\201C";
margin-top: 40px;
}
.quote .marks-wrapper::after {
content: "\201D";
align-self: end;
margin-bottom: -10px;
}
/************************
* End Modular Templates *
*************************/
/* ===============================
Random Page Classes (Lots of legacy)
=============================== */
.button-expand-header {
margin-top: 0.5em;
width: 100%;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: 700;
position: relative;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}
.button-expand-header:hover {
background: var(--background-color-transparent);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
}
.button-expand-header:active {
border-radius: 20px;
transition: 0.2s;
}
.button-expand-header::before {
content: '[ + ]';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
}
.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
content: '[ - ]';
}
.button-expand-header > span:not([typeof]) {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.2s;
}
@media screen and (max-width:720px) {
h2.mw-customtoggle > span:not([typeof])::after {
display: none;
}
}
a.tabber__tab {
margin-top: 0.7em;
font-size: 2em;
margin-left: 0.6em;
margin-bottom: 0.7em;
}
header.tabber__header {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
a.tabber__tab[aria-selected="true"]{
background: var(--background-color-transparent);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}
@media (hover: hover) {
.tabber__tab:hover {
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
background-color: var(--background-color-base);
}
}
.tabber__panel > div.mw-heading.mw-heading2 > h2 {
border-bottom: 1px solid var(--color-progressive) !important;
padding-bottom: 0.5em;
text-shadow: 0 0 20px black;
}
.tabber__panel > div > h2 > span {
text-shadow: 0 0 10px black;
color: var(--wiki-content-link-color);
margin-left: 0.1em;
padding: 0 0.5em 0;
}
header.tabber__header {
box-shadow: none;
}
.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
display: block;
width: inherit;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1em;
}
/*mobile*/
@media screen and (max-width: 720px) {
.button-expand-header {
background-color: #8dbec280;
box-shadow: 0 0 40px var(--wiki-accent-color);
}
.button-expand-header > span:after {
position: relative;
font-size: 1em;
opacity: 1;
left: 0;
bottom: 0;
text-align: inherit;
}
}
.button-expand-header > img {
padding: 0 1em 0;
}
.button-expand-header:hover > span:after{
opacity: 1;
font-size: 0.75em;
}
.class-box {
box-shadow: 0 0 20px #000000;
padding: 0 0.5em 0;
}
/* ===============================
MP elements
=============================== */
.main-page-links {
font-weight: bold;
text-shadow: 0 0 6px #000000;
margin: 1em;
}
.mp-box pre {
font-family: var(--wiki-body-font-family);
color: var(--wiki-accent-color);
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
text-align: center;
}
/* ===============================
DRUID Boss Infoboxes
=============================== */
/* UNHOLY */
.druid-data-Unholy a, .druid-data-Unholy a:visited {
color: black;
text-shadow:
0 0 5px white, 0 0 10px white, 0 0 15px white;
}
/* VOIDBOUND */
.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
color: #e48cff;
text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
}
/* BLOODSHOT */
.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
color: #d23c3c;
text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
}
/* ROYAL */
.druid-data-Royal a, .druid-data-Royal a:visited {
color: #a86dff;
text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
}
/* GILDED */
.druid-data-Gilded a, .druid-data-Gilded a:visited {
color: #ffb84d;
text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
}
/* IRRADIATED */
.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
color: #4dff4d;
text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
}
/* COMPANION */
.druid-data-Companion a, .druid-data-Companion a:visited {
color: #ffd700;
text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
}
/* RUNES */
.druid-data-Rune a, .druid-data-Rune a:visited {
color: #bfbfbf;
text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
}
.druid-row[data-druid-section-row="Loot"] div {
border-top: 1px solid var(--wiki-content-border-color);
padding-top: 0.75em;
padding-bottom: 0.5em;
flex-wrap: nowrap;
flex-direction: row;
display: block;
justify-content: space-between;
align-items: center;
text-align: left;
}
div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
border-top: none;
}
.druid-data .image {
margin-left: 0%;
}
.boss-percent {
float: right;
color: var(--wiki-content-border-color);
text-shadow: 0 0 2px var(--wiki-body-background-color), 0 0 6px var(--wiki-body-background-color), 0 0 10px var(--wiki-body-background-color);
}
.loot-data-infobox {
float: left;
display: contents;
align-items: center;
}
.druid-infobox div[data-druid-section] > .druid-section {
font-weight: bolder;
text-shadow: 0px 2px black;
}
.druid-infobox .druid-title {
display: flex;
align-items: center;
justify-content: center;
color: var(--wiki-content-border-color);
font-family: "Daedalus", sans-serif;
line-height: 1em;
font-weight: 1000;
font-size: 3em;
min-height: 2.2em;
flex-wrap: wrap;
text-shadow: 0 0 20px black;
}
.boss-infobox-subtitle {
font-weight: 500;
font-size: 0.75em;
display: inline-block;
white-space: normal;
word-break: break-word;
width: 100%
}
/* ===============================
Dungeon Page CSS
=============================== */
.dungeon-page-box {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 1em;
position: relative;
padding: 0 1em;
border-radius: 0px;
}
.dungeon-page-smaller-box li {
display: inline-block;
width: 18%;
margin: 0 1% 1% 0;
vertical-align: top;
text-align: center;
vertical-align: middle;
}
.dungeon-page-smaller-box a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
vertical-align: middle;
}
.mp-links.dungeon-page-smaller-box > ul > li:hover {
background-color: #42a2f110;
}
.pre-dungeon {
width: 50%;
}
.dungeon-enemies {
display: flex;
flex-wrap: wrap;
width: 90%;
justify-content: center;
}
.dungeon-enemies .druid-container {
margin: 2%;
}
.tipstricks {
display: block flex;
width: 75%;
}
.pre-dungeon {
width: -moz-fit-content; /* Firefox, Safari, Chromium */
width: -webkit-fit-content;
width: fit-content;
display: grid;
}
.pre-dungeon p {
margin: 2% 0;
border-radius: 2px 20px 10px 20px;
padding-bottom: 1%;
box-shadow: 0.3em 0.3em 20px #000000;
display: block;
width: auto;
padding: 1em;
background: linear-gradient(to right, var(--background-color-base), transparent);
}
.dlog {
margin-bottom: 2%;
background: linear-gradient(to right,rgba(31, 35, 77, 1) 0%,rgba(31, 35, 77, 1) 75%,rgba(31, 35, 77, 0) 100%);
padding: 0.5%;
border: 3px solid;
border-image: linear-gradient(to right, rgba(71, 75, 117, 1) 0%, rgba(71, 75, 117, 1) 75%, rgba(71, 75, 117, 0) 100%) 1 stretch;
border-right: none;
border-top: none;
border-bottom: none;
min-width: 20%;
max-width: 70%;
width: fit-content;
text-wrap: balance;
font-size: 2em;
}
.dlog::before {
content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
display: inline-block;
background: linear-gradient(to right, var(--color-progressive--hover), transparent);
padding: 0.5em 0;
border-radius: 2px 0 0 2px;
margin-right: 10px;
}
.dlog p {
position: relative;
color: #f1f1f1;
font-family: "Daedalus", Sans-Serif;
font-size: 1em;
line-height: 1.2;
text-shadow: 0 0 2px #41a0ee, 0 0 4px #2a5bc7;
word-wrap: break-word;
padding: 1%;
padding-top: 0.3%;
}
@media only screen and (max-width: 768px) {
.daedalus-log {
display: none;
}
}
/* ===============================
Skill Tree
=============================== */
/**
* ==============================
* Tooltips Gadget (Base Styles)
* ==============================
*/
.main-tooltip {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
box-shadow: 0 0 10px black;
margin-bottom: 5px;
padding: 1em 1em;
background-color: #312b38;
}
#tooltip-wrapper {
padding: 0.3em;
}
.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
display: none;
}
.tooltips-init-complete {
cursor: help;
}
.main-tooltip img {
vertical-align: middle;
}
.advanced-tooltip img {
box-shadow: 0 0 10px #000000;
}
.advanced-tooltip .imhoveringit {
position: relative;
display: inline-block;
}
.advanced-tooltip .tooltip-base-image,
.advanced-tooltip .tooltip-hover-image {
transition: opacity 0.2s ease;
}
.advanced-tooltip .tooltip-hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}
.advanced-tooltip .tooltip-base-image {
opacity: 1;
}
.advanced-tooltip:hover .tooltip-base-image {
opacity: 0;
}
.advanced-tooltip:hover .tooltip-hover-image {
opacity: 1;
pointer-events: auto;
}
.tabber__panel {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabber__panel::-webkit-scrollbar {
display: none;
}
/**
* ==============================
* Skill Tree Layout
* ==============================
*/
.skill-tree {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px; /* vertical spacing between rows */
}
/* Rows */
.skill-tree .row {
display: flex;
justify-content: center;
}
.skill-tree .row-1 { gap: 0; }
.skill-tree .row-2 { gap: 40px; }
.skill-tree .row-3 { gap: 20px; }
.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */
/* Nodes */
.node {
display: inline-block;
width: 80px; /* keeps nodes aligned */
text-align: center;
}
/* Node Title Style */
.skill-title {
font-weight: bold;
color: #fca801;
text-shadow: 2px 2px 8px black;
border-bottom: 1px solid #fca801;
padding-bottom: 0.5em;
}
.main-tooltip p {
color: #54fc55;
}
.main-tooltip span {
color: #54fcfc;
text-shadow: 0 0 2px #54fcfc;
}
/* item pages */
.display-items {
display: flex;
flex-wrap: wrap;
}
a.tabber__tab {
font-size: 2em;
text-shadow: 1px 1px 12px black;
}
.druid-main-images-label {
font-size: 1.2em;
}
.druid-main-images-label.focused {
box-shadow: 0 0 20px var(--druid-link-color);
}
.hoverbox:hover {
background-color: #1a1a22E0;
box-shadow: 0 0 30px 30px var(--background-color-base);
border-radius: 0 0 15px 15px;
border-top: 0.1em solid var(--color-progressive--hover);
transition: 0.4s;
}
.hoverbox {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 1em;
margin-left: -0.5em;
position: relative;
z-index: 0;
padding: 0 1em;
padding-bottom: 1em;
border-radius: 0px;
border-top: 0.1em solid var(--color-progressive);
margin: 1em 0;
overflow: hidden;
}
.hoverbox > div > h3 > a {
border-bottom: 2px solid currentColor;
background: no-repeat cover;
}
.mp-main {
background-size: 100% 100%;
background-repeat: no-repeat;
aspect-ratio: 16 / 9;
padding-top: 1em;
padding-bottom: 1em;
}
.class-rarities {
display:flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.class-rarities > div {
margin: 1em 0 1em;
padding: 0 1em 0;
border-radius: 25px;
}
.class-rarities > div > p > img {
margin: 0 2em 0 0;
border-radius: 100px;
background: #1a1a2280;
box-shadow: 0 0 10px black;
}
.class-rarities > div > p > span > img {
text-shadow: 0 0 10px black;
}
.class-rarities > div > p > a {
text-shadow: 0 0 10px black;
}
.class-irradiated {
box-shadow: 0 0 20px #4dff4d;
background-color: #4dff4d80;
}
.class-gilded {
box-shadow: 0 0 20px #ffb84d;
background-color: #ffb84d80;
}
.class-royal{
box-shadow: 0 0 20px #a86dff;
background-color: #a86dff80;
}
.class-bloodshot {
box-shadow: 0 0 20px #d23c3c;
background-color: #d23c3c80;
}
.class-voidbound{
box-shadow: 0 0 20px #e48cff;
background-color: #e48cff80;
}
.class-unholy {
box-shadow: 0 0 20px black;
background-color: #00000080;
}
div.class-rarities > div > p > a {
font-weight: bold;
}
/* TABLES */
.wikitable td,
.wikitable th {
border: none !important;
}
.wikitable {
margin: 0;
}
td > div.mw-collapsible > button {
margin: 1.5em;
padding: 1.2em;
background-color: #8dbec280;
box-shadow: 0 0 20px #8dbec2FF;
border-radius: 30px;
}
.wikitable td,
.wikitable th {
font-size: 1.1em;
}
td > div.mw-collapsible > button > span.mw-collapsible-text {
text-shadow: 0 0 4px black;
}
td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
text-decoration: none;
}
td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
content: '';
}
td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
content: '';
}
/* Inline Image Template */
.inline-image-image > p > img {
box-shadow: 0 0 20px black;
border-radius: 12px;
border: 2px solid black;
}
.inline-image-caption > p > span {
font-weight: bold;
}
.inline-image-caption > p > span::before {
content: '❖ ';
}
.inline-image-caption > p > span::after {
content: ' ❖';
}
/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
padding-top: 8em;
width: 100%;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
z-index: 100;
transition: all 0.3s ease;
display: block !important;
visibility: visible !important;
clear: both;
}
.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
height: auto;
opacity: 1;
padding: 15px;
overflow: visible;
}
.gif-display-area {
background: #1a1a22c0;
border-radius: 8px;
overflow: visible;
height: auto;
min-height: 80px;
opacity: 1;
padding: 10px;
transition: all 0.3s ease;
box-shadow: 0 2px 20px black;
border: 1px solid var(--color-progressive);
display: block !important;
visibility: visible !important;
}
.gif-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}
.gif-title {
font-size: 2em;
font-weight: bold;
font-family: var(--wiki-heading-font-family);
color: var(--color-progressive);
margin: 0;
}
.gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: all 0.2s ease;
}
.gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}
.gif-image-container {
width: 100%;
min-height: 200px;
max-height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color-base);
border-radius: 4px;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.gif-image-container img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: block;
border-radius: 4px;
object-fit: contain;
}
.gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
}
.gif-caption {
text-align: center;
color: var(--wiki-content-text-color);
font-size: 1em;
font-style: italic;
padding: 5px;
background: var(--color-progressive--hover);
border-radius: 4px;
text-shadow: 0 0 5px var(--wiki-content-border-color);
display: none;
}
.gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
height: 500px;
}
@media (max-width: 768px) {
.dynamic-gif-container {
position: relative;
float: none;
width: 100%;
margin: 0 0 20px 0;
}
.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
}
}
.skill-tree-section::after {
content: "";
display: table;
clear: both;
}
.tabber .tabbertab {
clear: both;
overflow: auto;
}
.gif-tabber-display-container {
display: block;
}
.decor-page {
border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
border-image-slice: 65 122 65 122;
border-image-width: 100% 100% 100% 100%;
border-image-repeat: stretch stretch;
border-image-outset: 0px 0px 0px 0px;
border-style: solid;
color: var(--wiki-body-background-color);
width: 492px;
height: 262px;
}
.decor-page > p{
padding: 3.5em;
font-family: var(--wiki-heading-font-family);
}
.swap-silverling {
position: relative;
display: inline-block;
width: 7em;
text-align: left;
text-shadow: 0 0 10px currentColor;
font-weight: bold;
}
.swap-silverling::before,
.swap-silverling::after {
position: absolute;
left: 0;
bottom: -0.45em;
width: 140%;
text-align: inherit;
animation: fadeSwap 5s infinite ease-in-out;
}
.swap-silverling::before {
content: "Silverlings.";
opacity: 1;
}
.swap-silverling::after {
content: "Players.";
opacity: 0;
animation-delay: 2.5s;
}
@keyframes fadeSwap {
0%, 40% { opacity: 1; }
50%, 90% { opacity: 0; }
100% { opacity: 1; }
}
.main-welcome {
text-shadow: 0 0 2px black;
font-weight: bold;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 0.5em;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
cursor: pointer;
font-family: var(--wiki-body-font-family);
font-size: 16px;
font-weight: 700;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
padding: 1em;
}
.welcome-text {
flex: 2;
min-width: 300px;
border-left: 2px solid var(--color-progressive);
padding: 1em;
}
div.main-welcome > .mp-links {
flex: 1;
min-width: 250px;
margin: 1em;
}
.mw-collapsible {
padding-top: 2em;
}
.tab-gif-container {
background: #1a1a22c0;
border: 1px solid var(--color-progressive);
border-radius: 8px;
padding: 15px;
margin: 1em 0;
box-shadow: 0 2px 20px black;
display: inline-block;
max-width: 800px;
width: auto;
min-width: 400px;
}
.tab-gif-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 2em;
border-bottom: 1px solid var(--color-progressive);
}
.tab-gif-title {
font-size: 1.5em;
font-weight: bold;
font-family: var(--wiki-heading-font-family);
color: var(--color-progressive);
margin: 0;
}
.tab-gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s ease;
}
.tab-gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}
.tab-gif-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}
.tab-gif-tab {
background: var(--background-color-base);
color: var(--color-progressive--hover);
border: 1px solid var(--color-progressive);
font-family: var(--wiki-body-font-family);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: all 0.2s ease;
white-space: nowrap;
}
.tab-gif-tab:hover {
background: var(--color-progressive--hover);
color: #ffffff;
border-color: var(--color-progressive);
box-shadow: 0 0 8px var(--color-progressive);
}
.tab-gif-tab.tab-gif-active {
background: var(--color-progressive);
color: #ffffff;
border-color: var(--color-progressive);
font-weight: bold;
box-shadow: 0 0 12px var(--color-progressive);
}
.tab-gif-display-area {
background: var(--background-color-base);
border-radius: 6px;
padding: 10px;
min-height: 200px;
}
.tab-gif-display-area .gif-image-container {
width: 100%;
min-height: 200px;
max-height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color-base);
border-radius: 4px;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.tab-gif-display-area .gif-image-container img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: block;
border-radius: 4px;
object-fit: contain;
transition: opacity 0.2s ease;
}
.tab-gif-display-area .gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: tab-gif-spin 1s linear infinite;
}
@keyframes tab-gif-spin {
to { transform: rotate(360deg); }
}
.tab-gif-display-area .gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
font-style: italic;
}
.tab-gif-display-area .gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
background: rgba(255, 107, 107, 0.1);
border-radius: 4px;
}
.tab-gif-display-area .gif-caption {
text-align: center;
color: var(--wiki-content-text-color);
font-size: 1em;
font-style: italic;
padding: 5px;
background: var(--color-progressive--hover);
border-radius: 4px;
text-shadow: 0 0 5px var(--wiki-content-border-color);
margin-top: 5px;
}
@media (max-width: 768px) {
.tab-gif-container {
display: block;
width: 100%;
min-width: auto;
margin: 1em 0;
}
.tab-gif-tabs {
flex-direction: column;
}
.tab-gif-tab {
width: 100%;
text-align: center;
}
.tab-gif-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.tab-gif-toggle-btn {
width: 100%;
}
}
.tab-gif-container.full-width {
display: block;
width: 100%;
max-width: 100%;
}
.tab-gif-container.float-left {
float: left;
margin-right: 1em;
}
.tab-gif-container.float-right {
float: right;
margin-left: 1em;
}