MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 35: | Line 35: | ||
* Sound * | * Sound * | ||
******************************/ | ******************************/ | ||
.sound-button, | .sound-button,.sound-button a,.sound-button a.image,.sound-button img { | ||
.sound-button a, | |||
.sound-button a.image, | |||
.sound-button img { | |||
background: none !important; | background: none !important; | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| Line 46: | Line 43: | ||
text-decoration: none !important; | text-decoration: none !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
margin: 0 !important | margin: 0 !important | ||
} | } | ||
| Line 61: | Line 49: | ||
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%); | filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%); | ||
transition: filter 0.2s ease-in-out; | transition: filter 0.2s ease-in-out; | ||
display: inline-block !important; | display: inline-block !important; | ||
vertical-align: middle; | vertical-align: middle; | ||
margin: 0 !important; | |||
} | } | ||
.sound-button: | .sound-button { | ||
cursor: pointer; | |||
display: inline-block !important; | |||
vertical-align: middle; | |||
margin: 0 2px !important; | |||
line-height: 1; | |||
white-space: nowrap; | |||
} | } | ||
.sound-button a:hover, | .sound-button:hover img,.sound-button.playing img { | ||
.sound-button a:focus { | filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7)) | ||
} | |||
.sound-button a:hover,.sound-button a:focus { | |||
background: none !important; | background: none !important; | ||
border: none !important | border: none !important | ||
} | } | ||
/***************************** | /***************************** | ||
Latest revision as of 14:28, 1 January 2026
/* CSS placed here will be applied to all skins */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
font-family: "Outfit";
src: url("/fonts/Outfit.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Daedalus";
src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
--content-link-color: #ffc05f;
--content-border-color: #feffe5;
--heading-font-family: "Daedalus", sans-serif;
--body-font-family: "Outfit", sans-serif;
--accent-link-color: #22214d;
--content-link-label-color: #0b101b;
}
:root{
--is-top-logo: 1;
--logo-file-width: 160;
--logo-file-height: 160;
--logo-height: calc(var(--logo-file-height)*1px);
--logo-margin: 15px;
--is-navigation-inside-content: 0;
}
/*****************************
* Sound *
******************************/
.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
background: none !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important
}
.sound-button img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
transition: filter 0.2s ease-in-out;
display: inline-block !important;
vertical-align: middle;
margin: 0 !important;
}
.sound-button {
cursor: pointer;
display: inline-block !important;
vertical-align: middle;
margin: 0 2px !important;
line-height: 1;
white-space: nowrap;
}
.sound-button:hover img,.sound-button.playing img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
}
.sound-button a:hover,.sound-button a:focus {
background: none !important;
border: none !important
}
/*****************************
* End Sound *
******************************/
/*****************************
* PortableInfoboxes *
******************************/
:root {
image-rendering: pixelated !important;
--pi-background: var(--background-color-base);
--pi-secondary-background: var(--color-progressive);
--pi-secondary-background-label: var(--content-link-label-color);
--pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
color:var(--pi-secondary-background-label);
}
.portable-infobox .pi-data {
background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
font-size: 115%;
word-wrap: normal;
}
.miniboss-box .portable-infobox {
box-shadow: 3px 3px 6px var(--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);
}
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
text-shadow: 0 0 5px var(--color-progressive);
border-bottom: 0;
font-family: var(--heading-font-family);
font-weight: 550;
margin: 0;
word-wrap: normal;
}
.mw-body .portable-infobox {
border-radius:5px;
border-image-source: var(--border-image-base);
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;
--navbox-margin: 0.5em auto;
--navbox-padding: 4px;
--navbox-gap: 3px;
--navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
--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(--content-link-label-color);
--navbox-title-font-size: calc(125%);
--navbox-title-background: var(--color-progressive);
--navbox-title-icon-color: var(--content-link-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(--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(--color-base) 15%, transparent);
--navbox-above-color: var(--color-base);
--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(--color-base) 5%, transparent);
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
--navbox-list-color: var(--color-base);
--navbox-list-padding: 0.25em 0.5em;
--navbox-group-text-align: left;
--navbox-group-text-align--mobile: left;
--navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
--navbox-group-color: var(--color-base);
--navbox-group-padding: var(--navbox-list-padding);
--navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 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{
--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(--color-base) 5%, transparent);
--navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
--navbox-pill-background--hover: var(--navbox-pill-background);
--navbox-list-background: none;
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
--navbox-title-link-color: var(--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(--background-color-neutral-subtle);
--navbox-list-background: transparent;
--navbox-list-background--striped: var(--background-color-neutral-subtle);
--navbox-group-background: var(--background-color-neutral-subtle);
--navbox-tree-line-color: var(--background-color-neutral-subtle);
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile {
--navbox-pill-background: var(--background-color-neutral-subtle);
--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;
}
.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);
display: flex;
align-items: center;
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*
**********************/
.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%),
var(--background-color-transparent);
padding:0;
box-shadow:
0 0 50px 10px rgba(66, 162, 241, 0.2),
0 0 80px 15px rgba(0, 0, 0, 0.8),
inset 0 0 80px 15px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.3),
inset 0 0 0 1px rgba(66, 162, 241, 0.2);
margin-top: 1em;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.mp-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 15%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 85%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 25px rgba(66, 162, 241, 0.5);
}
.mp-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}
.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.5em 0;
padding: 0.5em 0;
text-shadow:
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.6),
0 2px 5px rgba(0, 0, 0, 0.8);
color:var(--content-border-color);
background:
linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
border-radius: 8px;
position: relative;
}
.mp-box h2::after {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent);
}
.mp-box .welcome-message {
font-size: 5.5em;
margin: 0;
padding: 0.4em 0;
color: #fff;
font-family: "Daedalus";
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
letter-spacing: 0.08em;
position: relative;
animation: welcome-pulse 4s ease-in-out infinite;
background:
linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.05) 30%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 70%,
transparent 100%);
padding: 0.5em 1em;
border-radius: 8px;
}
.mp-box .welcome-message::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(255, 255, 255, 0.8) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 1),
0 0 25px rgba(66, 162, 241, 0.6);
}
.mp-box .welcome-message::after {
content: '';
position: absolute;
bottom: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(255, 255, 255, 0.6) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow:
0 0 12px rgba(66, 162, 241, 0.8),
0 0 20px rgba(66, 162, 241, 0.5);
}
@keyframes welcome-pulse {
0%, 100% {
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
}
50% {
text-shadow:
0 0 65px rgba(66, 162, 241, 1),
0 0 45px rgba(66, 162, 241, 1),
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(255, 255, 255, 1),
0 6px 12px rgba(0, 0, 0, 1),
0 0 100px rgba(66, 162, 241, 0.8);
}
}
#mp-banner-container {
position: relative;
}
#mp-box-welcome {
text-align:center;
position:relative;
overflow:hidden;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%),
var(--background-color-transparent);
box-shadow:
0 0 60px 12px rgba(66, 162, 241, 0.25),
0 0 100px 20px rgba(0, 0, 0, 0.8),
inset 0 0 100px 20px rgba(66, 162, 241, 0.1),
0 0 0 1px rgba(66, 162, 241, 0.4),
inset 0 0 0 1px rgba(66, 162, 241, 0.3);
}
#mp-welcome {
display:flex;
flex-flow:column nowrap;
position: relative;
height: 100%;
font-family: var(--heading-font-family);
z-index: 2;
box-sizing: border-box;
padding: 1em;
}
#mp-welcome .welcome-subtitle {
height: 100%;
font-family: var(--body-font-family);
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
color-mix(in srgb, var(--background-color-base) 85%, transparent);
margin-left: 4px;
margin-right: 4px;
margin-bottom: 4px;
padding: 1em;
border-radius: 4px;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(66, 162, 241, 0.2);
}
#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));
}
@media screen and (max-width: 720px) {
.mp-main > .mp-links > ul {
grid-template-columns: 1fr;
gap: 1em;
}
.mp-main > .mp-links > ul > li {
margin: 0 0.5em;
}
}
.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(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
margin: 0 3em;
box-shadow:
inset 0 0 15px 3px #42a2f160,
inset 0 -2px 8px 0 #4c57b540,
0 2px 12px 0 rgba(66, 162, 241, 0.2),
inset 2px 0 2px -1px rgba(255, 255, 255, 0.15),
inset -2px 0 2px -1px rgba(255, 255, 255, 0.15);
border: 1px solid rgba(66, 162, 241, 0.3);
border-radius: 4px;
padding-top: 1em;
padding-bottom: 0.5em;
position: relative;
overflow: hidden;
}
.mp-main > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: tech-shimmer 3s infinite;
}
@keyframes tech-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.mp-main > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
box-shadow:
inset 0 0 20px 5px #42a2f180,
inset 0 -2px 10px 0 #4c57b560,
0 4px 20px 2px rgba(66, 162, 241, 0.35),
inset 2px 0 4px -1px rgba(255, 255, 255, 0.25),
inset -2px 0 4px -1px rgba(255, 255, 255, 0.25);
border-color: rgba(66, 162, 241, 0.5);
}
.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.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 {
cursor: pointer;
}
.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;
pointer-events: auto;
}
.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(--background-color-neutral-subtle);
}
.mp-box .gallerybox:hover .gallerytext {
background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
}
.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 {
--druid-background-color: var(--background-color-base);
--druid-secondary-background-color: var(--color-progressive);
--druid-secondary-background-label-color: var(--content-link-label-color);
--druid-tertiary-background-color: var(--background-color-neutral-subtle);
--druid-border-color: var(--content-border-color);
--druid-link-color: var(--content-link-color);
--druid-link-label-color: var(--content-link-label-color);
}
.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;
position: relative;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%),
radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%),
var(--druid-background-color);
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.15),
inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.2);
overflow: hidden;
}
.npc-infobox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: data-scan 3s linear infinite;
}
@keyframes data-scan {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.npc-infobox::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.3) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.3) 70%,
transparent);
}
.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;
padding:1px;
border-radius: 0.1em;
}
.npc-infobox .druid-title {
background:
linear-gradient(135deg,
rgba(66, 162, 241, 0.25) 0%,
rgba(76, 87, 181, 0.2) 40%,
rgba(66, 162, 241, 0.15) 80%,
rgba(66, 162, 241, 0.25) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%),
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%);
color: var(--druid-secondary-background-label-color);
text-shadow:
0 0 20px rgba(66, 162, 241, 1),
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
font-size: 1.3em;
letter-spacing: 0.08em;
line-height: 1;
position: relative;
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(66, 162, 241, 0.4);
border-radius: 2px;
padding: 0.5em 0.8em;
}
.npc-infobox .druid-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}
.npc-infobox .druid-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}
.npc-infobox .druid-section {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%);
color:var(--druid-secondary-background-label-color);
text-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
position: relative;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.5);
}
.npc-infobox .druid-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}
.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;
}
body .has-worn-variant .image-base {
display: block !important;
}
body .has-worn-variant .image-worn {
display: none !important;
}
body .has-worn-variant.is-worn-active .image-base {
display: none !important;
}
body .has-worn-variant.is-worn-active .image-worn {
display: block !important;
}
.image-base img, .image-worn img {
display: block !important;
margin: 0 auto !important;
max-width: 100%;
height: auto;
}
.worn-toggle-button {
display: inline-block !important;
margin-top: 10px;
padding: 5px 15px;
background: #333 !important;
color: #fff !important;
border: 1px solid #666 !important;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.is-worn-active .worn-toggle-button {
background: #833 !important;
}
/*****************************************
Div support
*****************************************/
div.druid-row {
display:flex;
margin-block: 1px;
}
div.druid-row + div.druid-row {
margin-top: 0;
}
.npc-infobox div.druid-row {
background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%);
}
.npc-infobox div.druid-row > .druid-label {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%,
var(--druid-tertiary-background-color) 100%);
text-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
border-right: 1px solid rgba(66, 162, 241, 0.2);
}
.npc-infobox div.druid-row > .druid-data {
text-shadow: 0 0 6px rgba(66, 162, 241, 0.3);
}
.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(--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(--background-color-neutral-subtle);
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(--border-color-subtle);
border-bottom: 1px solid var(--border-color-subtle);
}
.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(--color-base);
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(--background-color-neutral-subtle);
border-radius: 5px;
border: 2px solid var(--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 *
*************************/
.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(--content-link-color);
margin-left: 0.1em;
padding: 0 0.5em 0;
}
header.tabber__header {
box-shadow: none;
}
.tabber__header__prev,
.tabber__header__next {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%),
rgba(26, 26, 34, 0.8);
border: 1px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
padding: 0.6em 1em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 10px rgba(66, 162, 241, 0.2);
border-radius: 4px;
position: relative;
backdrop-filter: blur(3px);
}
.tabber__header__prev::before,
.tabber__header__next::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}
.tabber__header__prev:hover,
.tabber__header__next:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
rgba(26, 26, 34, 0.9);
border-color: rgba(66, 162, 241, 0.7);
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 25px rgba(66, 162, 241, 0.2);
transform: scale(1.05);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.5);
}
.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;
filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
}
@media screen and (max-width: 720px) {
.button-expand-header {
background-color: #8dbec280;
box-shadow: 0 0 40px var(--color-progressive);
}
.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 {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98));
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0 0.5em 0;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.class-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}
/* ===============================
MP elements
=============================== */
.main-page-links {
font-weight: bold;
text-shadow: 0 0 6px #000000;
margin: 1em;
}
.mp-box pre {
font-family: var(--body-font-family);
color: var(--color-progressive);
border-radius:5px;
border-image-source: var(--border-image-base);
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 {
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;
width: 100%;
}
div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
border-top: none;
}
.druid-data .image {
margin-left: 0%;
}
.loot-category-header {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 0.75em;
margin: 0.75em 0 0.3em 0;
background:
linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
rgba(26, 26, 34, 0.4);
border-left: 2px solid rgba(66, 162, 241, 0.5);
border-radius: 3px;
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
0 1px 4px rgba(0, 0, 0, 0.4);
}
.loot-category-title {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 6px rgba(66, 162, 241, 0.4),
0 1px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}
.loot-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3em 0.75em;
margin: 0.15em 0;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
border-radius: 2px;
transition: all 0.2s ease;
}
.loot-item-row:hover {
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
padding-left: 1em;
}
.boss-percent {
color: var(--content-border-color);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.5),
0 0 4px rgba(66, 162, 241, 0.3),
0 2px 4px rgba(0, 0, 0, 0.8);
font-weight: bold;
font-size: 1.05em;
}
.loot-data-infobox {
display: flex;
align-items: center;
gap: 0.5em;
}
.item-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(--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%;
position: relative;
color: rgba(255, 255, 255, 0.95);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
animation: subtitle-pulse 4s ease-in-out infinite;
background: linear-gradient(90deg,
rgba(66, 162, 241, 0.05) 0%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 100%);
background-size: 200% 100%;
animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite;
padding: 0.3em 0.5em;
border-radius: 2px;
letter-spacing: 0.03em;
}
.boss-infobox-subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: linear-gradient(180deg,
transparent,
rgba(66, 162, 241, 0.8) 50%,
transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.8);
animation: subtitle-indicator 2s ease-in-out infinite;
}
@keyframes subtitle-pulse {
0%, 100% {
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
50% {
text-shadow:
0 0 15px rgba(66, 162, 241, 0.9),
0 0 8px rgba(66, 162, 241, 0.6),
0 0 4px rgba(255, 255, 255, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
}
@keyframes subtitle-scan {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
@keyframes subtitle-indicator {
0%, 100% {
opacity: 0.4;
box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
}
50% {
opacity: 1;
box-shadow: 0 0 10px rgba(66, 162, 241, 1);
}
}
/* ===============================
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;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95));
border-radius: 4px;
border: 1px solid rgba(66, 162, 241, 0.2);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.05),
0 2px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.dungeon-page-smaller-box li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent);
}
.dungeon-page-smaller-box a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.5em;
}
.dungeon-page-smaller-box li:hover,
.mp-links.dungeon-page-smaller-box > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1));
border-color: rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.1),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
transform: translateY(-2px);
}
.pre-dungeon {
max-width: 100%;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
display: block;
}
.dungeon-enemies {
display: flex;
flex-wrap: wrap;
max-width: 100%;
justify-content: center;
}
.dungeon-enemies .druid-container {
margin: 2%;
}
.tipstricks {
display: flex;
max-width: 100%;
}
.pre-dungeon p {
margin: 1em 0;
padding: 0.9em 1.2em 0.9em 1.5em;
border-radius: 3px 12px 8px 3px;
box-shadow:
-2px 0 0 0 rgba(66, 162, 241, 0.4),
0 4px 15px rgba(0, 0, 0, 0.6),
inset 0 0 20px rgba(66, 162, 241, 0.03);
display: block;
width: auto;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.06) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 2px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
line-height: 1.6;
position: relative;
backdrop-filter: blur(2px);
}
.pre-dungeon p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.6;
}
.dlog {
margin-bottom: 2%;
background:
linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%);
padding: 0.75em;
border: 3px solid;
border-image: linear-gradient(to right,
rgba(66, 162, 241, 0.8) 0%,
rgba(71, 75, 117, 1) 30%,
rgba(71, 75, 117, 0.8) 70%,
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;
position: relative;
box-shadow:
-3px 0 15px rgba(66, 162, 241, 0.3),
inset 2px 0 20px rgba(66, 162, 241, 0.1),
0 4px 12px rgba(0, 0, 0, 0.5);
border-radius: 0 4px 4px 0;
backdrop-filter: blur(3px);
}
.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,
rgba(66, 162, 241, 0.25) 0%,
rgba(66, 162, 241, 0.15) 50%,
transparent 100%),
linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%);
padding: 0.5em 0.8em;
border-radius: 3px 0 0 3px;
margin-right: 12px;
box-shadow:
inset -2px 0 10px rgba(66, 162, 241, 0.3),
2px 0 8px rgba(66, 162, 241, 0.2);
border-right: 1px solid rgba(66, 162, 241, 0.4);
position: relative;
}
.dlog::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.8) 100%);
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
animation: dlog-pulse 3s ease-in-out infinite;
}
@keyframes dlog-pulse {
0%, 100% {
opacity: 0.7;
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
}
50% {
opacity: 1;
box-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 20px rgba(66, 162, 241, 0.7);
}
}
.dlog p {
position: relative;
color: #f1f1f1;
font-family: "Daedalus", Sans-Serif;
font-size: 1em;
line-height: 1.3;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
word-wrap: break-word;
padding: 0.8em;
padding-top: 0.5em;
background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%);
border-radius: 2px;
}
@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: 0 1em 1em;
margin: 1em 0 1em -0.5em;
position: relative;
z-index: 0;
border-top: 0.1em solid var(--color-progressive);
display: flow-root;
}
.hoverbox > div > h3 > a {
border-bottom: 2px solid currentColor;
background: no-repeat cover;
}
.hoverbox > div {
overflow: visible;
}
.dungeon-clear {
max-width: 100%;
overflow: visible;
}
.lore {
max-width: 100%;
overflow: visible;
}
.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: 1em 1.5em;
border-radius: 8px;
position: relative;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent);
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.class-rarities > div::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
opacity: 0.3;
filter: blur(1px);
}
.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 {
position: relative;
display: inline-block;
}
.inline-image-image > p > span > span > img {
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.3),
0 4px 20px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.05);
border-radius: 8px;
border: 2px solid rgba(66, 162, 241, 0.5);
background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%);
padding: 4px;
transition: all 0.3s ease;
}
.inline-image-image > p > span > span > img:hover {
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.5),
0 6px 25px rgba(0, 0, 0, 0.9),
inset 0 0 50px 8px rgba(66, 162, 241, 0.08);
border-color: rgba(66, 162, 241, 0.7);
transform: translateY(-2px);
}
.inline-image-caption {
margin-top: 0.5em;
position: relative;
}
.inline-image-caption > p {
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.12) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 3px solid rgba(66, 162, 241, 0.6);
border-radius: 3px;
padding: 0.6em 1em;
margin: 0;
box-shadow:
inset 0 0 20px 2px rgba(66, 162, 241, 0.05),
0 2px 8px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
}
.inline-image-caption > p > span {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}
.inline-image-caption > p > span::before {
content: '❖ ';
color: rgba(66, 162, 241, 0.8);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.9),
0 0 5px rgba(66, 162, 241, 0.6);
margin-right: 0.3em;
}
.inline-image-caption > p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.4) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.7;
}
/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
padding-top: 8em;
width: fit-content;
max-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;
}
/* Override for flexbox container */
.gif-tabber-display-container .dynamic-gif-container {
padding-top: 0;
margin: 0;
clear: none;
}
.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
height: auto;
opacity: 1;
padding: 15px;
overflow: visible;
}
.gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border-radius: 6px;
overflow: visible;
height: auto;
min-height: auto;
opacity: 1;
padding: 12px;
transition: all 0.3s ease;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(66, 162, 241, 0.4);
display: block !important;
visibility: visible !important;
position: relative;
backdrop-filter: blur(4px);
width: fit-content;
}
.gif-display-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}
.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(--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%;
height: 400px;
min-height: 400px;
max-height: 400px;
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(--color-base);
font-size: 1em;
font-style: italic;
padding: 5px;
background: var(--color-progressive--hover);
border-radius: 4px;
text-shadow: 0 0 5px var(--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: flex;
flex-direction: row;
gap: 1.5em;
align-items: flex-start;
}
.gif-tabber-display-container > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
.gif-tabber-display-container > .dynamic-gif-container {
flex: 0 0 auto;
position: sticky;
top: 1em;
align-self: flex-start;
padding-top: 0;
margin: 0;
min-width: 500px;
max-width: 600px;
}
@media screen and (max-width: 1200px) {
.gif-tabber-display-container {
flex-direction: column;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.gif-tabber-display-container > .dynamic-gif-container {
position: static;
width: 100%;
max-width: 100%;
min-width: 0;
order: 2; /* Move gif display below tabber */
margin-top: 1em;
}
.gif-tabber-display-container > div:first-child {
order: 1; /* Keep tabber on top */
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}
/* Ensure tabber content doesn't overflow */
.gif-tabber-display-container #List\ of\ Skill\ Trees,
.gif-tabber-display-container .tabber,
.gif-tabber-display-container .tabbertab {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
}
/* Hide gif display by default on mobile, show when expanded */
.gif-tabber-display-container > .dynamic-gif-container:not(.expanded) {
display: none;
}
/* When expanded on mobile, make it compact */
.gif-tabber-display-container > .dynamic-gif-container.expanded {
display: block;
}
.gif-tabber-display-container > .dynamic-gif-container .gif-display-area {
max-width: 100%;
}
}
.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: 0;
border-style: solid;
color: var(--background-color-base);
width: 492px;
height: 262px;
}
.decor-page > p{
padding: 3.5em;
font-family: var(--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);
font-family: var(--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;
font-size: 2em;
}
div.main-welcome > .mp-links {
flex: 1;
min-width: 250px;
margin: 1em;
}
div.main-welcome > .mp-links > ul > li {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15));
box-shadow:
inset 0 0 20px 4px rgba(66, 162, 241, 0.12),
0 4px 15px rgba(66, 162, 241, 0.2),
0 0 30px rgba(66, 162, 241, 0.15);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 4px;
padding: 1em 0.8em;
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(2px);
}
div.main-welcome > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.8);
}
div.main-welcome > .mp-links > ul > li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}
div.main-welcome > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25));
box-shadow:
inset 0 0 30px 6px rgba(66, 162, 241, 0.2),
0 6px 20px rgba(66, 162, 241, 0.3),
0 0 40px rgba(66, 162, 241, 0.25);
border-color: rgba(66, 162, 241, 0.6);
transform: translateY(-2px);
}
div.main-welcome > .mp-links > ul > li > a {
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.2s ease;
}
div.main-welcome > .mp-links > ul > li:hover > a {
text-shadow:
0 0 12px rgba(66, 162, 241, 0.9),
0 0 6px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}
.mw-collapsible {
padding-top: 2em;
display: flow-root;
}
.tab-gif-container {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 6px;
padding: 12px;
margin: 1em 0;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
display: inline-block;
width: fit-content;
max-width: 100%;
position: relative;
backdrop-filter: blur(4px);
}
.tab-gif-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}
.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(--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:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%),
rgba(26, 26, 34, 0.6);
color: var(--color-base);
border: 1px solid rgba(66, 162, 241, 0.4);
font-family: var(--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;
text-shadow:
0 0 6px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.08),
0 2px 8px rgba(0, 0, 0, 0.4);
position: relative;
}
.tab-gif-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 30%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.5) 70%,
transparent);
}
.tab-gif-tab:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%),
rgba(26, 26, 34, 0.8);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.6);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}
.tab-gif-tab.tab-gif-active {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%),
rgba(66, 162, 241, 0.2);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.8);
font-weight: bold;
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.2),
0 4px 15px rgba(66, 162, 241, 0.4),
0 0 30px rgba(66, 162, 241, 0.3);
text-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 8px rgba(66, 162, 241, 0.8),
0 2px 4px rgba(0, 0, 0, 0.8);
}
.tab-gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%),
rgba(26, 26, 34, 0.4);
border-radius: 4px;
padding: 8px;
min-height: auto;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08);
border: 1px solid rgba(66, 162, 241, 0.15);
}
.tab-gif-display-area .gif-image-container {
width: fit-content;
min-height: auto;
max-height: none;
display: inline-flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%),
rgba(0, 0, 0, 0.3);
border-radius: 3px;
position: relative;
margin-bottom: 8px;
overflow: hidden;
box-shadow:
0 0 20px 3px rgba(66, 162, 241, 0.15),
inset 0 0 15px 2px rgba(66, 162, 241, 0.05);
border: 1px solid rgba(66, 162, 241, 0.3);
padding: 4px;
}
.tab-gif-display-area .gif-image-container img {
max-width: 100%;
height: auto;
width: auto;
display: block;
border-radius: 2px;
object-fit: contain;
transition: opacity 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.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(--color-base);
font-size: 1em;
font-style: italic;
padding: 6px 10px;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.2) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.2) 100%),
rgba(26, 26, 34, 0.6);
border-radius: 3px;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
margin-top: 6px;
border: 1px solid rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
}
@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%;
}
.tab-gif-container.float-left {
float: left;
margin-right: 1em;
}
.tab-gif-container.float-right {
float: right;
margin-left: 1em;
}
/* ============================================================
MOBILE ADJUSTMENTS
============================================================ */
@media screen and (max-width: 720px) {
/* 1. BOX FIX */
*, *::before, *::after {
box-sizing: border-box !important;
}
.mp-main {
aspect-ratio: auto !important;
height: auto !important;
background-size: cover !important;
}
/* 2. HEIGHT & OVERFLOW */
.mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
float: none !important;
overflow: visible !important;
display: block !important;
}
/* 3. WELCOME BOX */
.main-welcome {
display: flex !important;
flex-direction: column !important;
padding: 10px !important;
align-items: stretch !important;
border-radius: 4px !important;
}
.welcome-text {
font-size: 1em !important;
border-left: none !important;
border-bottom: 2px solid var(--color-progressive);
margin-bottom: 15px;
padding: 8px 0 !important;
text-align: left;
}
/* 4. MASTER GRID */
.mp-main, .mp-links, .mp-links > ul {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.mp-main {
margin-top: 20px !important;
}
.mp-links > ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
list-style: none !important;
}
/* 5. INDIVIDUAL BUTTON STYLING */
.mp-links > ul > li {
flex: none !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 110px !important;
padding: 10px 5px !important;
background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important;
box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important;
border: 1px solid rgba(66, 162, 241, 0.4) !important;
border-radius: 6px !important;
}
div.main-welcome > .mp-links > ul > li:nth-child(3) {
grid-column: span 2 !important;
width: 100% !important;
justify-self: center !important;
}
/* 7. ICON & TEXT GLOW */
.mp-links img {
max-width: 45px !important;
height: auto !important;
margin-bottom: 6px !important;
display: block !important;
}
.mp-links > ul > li > a {
font-size: 0.85em !important;
line-height: 1.1 !important;
white-space: normal !important;
text-align: center !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
.mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
.druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
a.tabber__tab { font-size: 1.1em !important; }
.node { width: 45px !important; }
/* 9. DUNGEON PAGE */
.dungeon-page-smaller-box ul {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.dungeon-page-smaller-box li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
padding: 1em !important;
flex: none !important;
border: 1px solid rgba(66, 162, 241, 0.3) !important;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
.dungeon-page-smaller-box a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.dungeon-page-box h2, .mp-box h2 {
text-align: center !important;
width: 100% !important;
}
/* 10. GENERAL PAGE */
.mw-parser-output h2 {
font-size: 1.6em !important;
margin-top: 0.1em !important;
margin-bottom: 0.05em !important;
padding: 0 !important;
border: none !important;
}
.mp-box h2::after { bottom: -2px !important; }
.mw-parser-output p, .mw-parser-output li {
font-size: 0.9em !important;
line-height: 1.5 !important;
margin-top: 0.2em !important;
}
/* 11. BUTTONS */
.button-expand-header {
background: var(--background-color-base) !important;
box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important;
padding-right: 65px !important;
font-size: 14px !important;
white-space: normal !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
border-radius: 4px !important;
min-height: 60px !important;
}
.button-expand-header img {
flex-shrink: 0 !important;
width: 45px !important;
height: 45px !important;
object-fit: contain !important;
margin-right: 6px !important;
}
/* 12. MAIN PAGE TITLE */
h1#firstHeading,
.mw-body h1,
.section-heading h1 {
font-size: 1.5em !important;
width: 100% !important;
text-align: center !important;
display: block !important;
margin: 10px 0 !important;
letter-spacing: 0.05em !important;
}
/* 13. TABS */
.header-container,
.pre-content,
.page-header-bar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.minerva__tab-container {
display: flex !important;
width: 100% !important;
justify-content: stretch !important;
margin-bottom: 5px !important;
}
.minerva__tab-container .tab {
flex: 1 !important;
text-align: center !important;
}
.page-actions-menu {
width: 100% !important;
display: block !important;
}
.page-actions-menu__list {
display: flex !important;
width: 100% !important;
justify-content: space-around !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.page-actions-menu__list li {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
}
/* 14. TABLE STACK */
.mw-parser-output div[style*="display:flex"]:has(.wikitable) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
gap: 20px !important;
}
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
white-space: nowrap !important;
word-break: normal !important;
padding: 10px 5px !important;
}
/* 15. DLOG STUFF */
.dlog {
font-size: 1em !important;
max-width: 100% !important;
padding: 0.5em !important; /* Optional: tightens the box for mobile */
}
.dlog::before {
zoom: 0.6;
margin-bottom: 5px;
display: block;
width: fit-content;
}
/* 16. INLINE IMAGE STUFF */
.inline-image-template {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
margin: 1em 0 !important;
}
.inline-image-image {
display: block !important;
width: 100% !important;
text-align: center;
}
.inline-image-image img,
.inline-image-image > p > span > span > img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}
.inline-image-caption {
width: 100% !important;
box-sizing: border-box !important;
}
.inline-image-caption > p {
font-size: 0.7em !important;
white-space: normal !important;
}
/* 17. OTHER */
.pre-dungeon p {
font-size: 0.8em !important;
padding: 0.7em 1em !important;
}
}