MediaWiki:Daedalus.css: Difference between revisions

:root { 
    --color-base: #c9e1e6;
    --color-base-fixed: #c9e1e6;
    --color-base--hover: #d1eaef;
    --color-emphasized: #d1eaef;
    --color-subtle: #a7bfca;
    --color-placeholder: #a7bfca;
    --color-disabled: #a2a9b1;
    --color-disabled-emphasized: #a2a9b1;
    --color-inverted: #fff;
    --color-inverted-fixed: #fff;
    --color-progressive: #42a2f1;
    --color-progressive--hover: #4c57b5;
    --color-progressive--active: #4c57b5;
    --color-progressive--focus: #4c57b5;
    --color-destructive: #ce0000;
    --color-destructive--hover: #900000;
    --color-destructive--active: #900000;
    --color-destructive--focus: #900000;
    --color-visited: #2f3fcf;
    --color-visited--hover: color-mix(in srgb, #2f3fcf 80%, #fff);
    --color-visited--active: color-mix(in srgb, #2f3fcf 60%, #000);
    --color-destructive--visited: #8e0000;
    --color-destructive--visited--hover: color-mix(in srgb, #8e0000 85%, #fff);
    --color-destructive--visited--active: color-mix(in srgb, #8e0000 70%, #000);
    --color-error: #ce0000;
    --color-error--hover: color-mix(in srgb, #ce0000 85%, #fff);
    --color-error--active: color-mix(in srgb, #ce0000 70%, #000);
    --color-warning: #f57b50;
    --color-success: #177860;
    --color-notice: #f57b50;
    --color-icon-error: #ce0000;
    --color-icon-warning: #f57b50;
    --color-icon-success: #449c1c;
    --color-icon-notice: #f57b50;
    --color-content-added: #177860;
    --color-content-removed: #ce0000;
    --filter-invert-icon: 0;
    --filter-invert-primary-button-icon: 1;
    --box-shadow-color-base: #a2a9b1;
    --box-shadow-color-progressive--active: #233566;
    --box-shadow-color-progressive--focus: #36c;
    --box-shadow-color-progressive-selected: #36c;
    --box-shadow-color-progressive-selected--hover: #3056a9;
    --box-shadow-color-progressive-selected--active: #233566;
    --box-shadow-color-destructive--focus: #36c;
    --box-shadow-color-inverted: #fff;
    --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
    --box-shadow-color-transparent: transparent;
    --mix-blend-mode-base: normal;
    --mix-blend-mode-blend: lighten;
    --background-color-base: #1a1a22;
    --background-color-base-fixed: #1a1a22;
    --background-color-neutral: #1a1a22;
    --background-color-neutral-subtle: color-mix(in srgb, #1a1a22 95%, #fff);
    --background-color-interactive: #1a1a22;
    --background-color-interactive--hover: #2d2d50;
    --background-color-interactive--active: color-mix(in srgb, #2d2d50 85%, #fff);
    --background-color-interactive-subtle: color-mix(in srgb, #2d2d50 50%, transparent);
    --background-color-interactive-subtle--hover: color-mix(in srgb, #2d2d50 70%, transparent);
    --background-color-interactive-subtle--active: color-mix(in srgb, #2d2d50 85%, transparent);
    --background-color-disabled: color-mix(in srgb, #1a1a22 70%, #808080);
    --background-color-disabled-subtle: color-mix(in srgb, #1a1a22 85%, #808080);
    --background-color-inverted: #fff;
    --background-color-progressive: color-mix(in srgb, #1a1a22 90%, #42a2f1);
    --background-color-progressive--hover: color-mix(in srgb, #1a1a22 80%, #42a2f1);
    --background-color-progressive--active: color-mix(in srgb, #1a1a22 70%, #42a2f1);
    --background-color-progressive--focus: color-mix(in srgb, #1a1a22 85%, #42a2f1);
    --background-color-progressive-subtle: color-mix(in srgb, #1a1a22 95%, #42a2f1);
    --background-color-progressive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #42a2f1);
    --background-color-progressive-subtle--active: color-mix(in srgb, #1a1a22 85%, #42a2f1);
    --background-color-destructive: color-mix(in srgb, #1a1a22 90%, #ce0000);
    --background-color-destructive--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
    --background-color-destructive--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
    --background-color-destructive--focus: color-mix(in srgb, #1a1a22 85%, #ce0000);
    --background-color-destructive-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
    --background-color-destructive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
    --background-color-destructive-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
    --background-color-error: color-mix(in srgb, #1a1a22 90%, #ce0000);
    --background-color-error--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
    --background-color-error--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
    --background-color-error-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
    --background-color-error-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
    --background-color-error-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
    --background-color-warning-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
    --background-color-success-subtle: color-mix(in srgb, #1a1a22 95%, #177860);
    --background-color-notice-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
    --background-color-content-added: color-mix(in srgb, #1a1a22 90%, #177860);
    --background-color-content-removed: color-mix(in srgb, #1a1a22 90%, #ce0000);
    --background-color-transparent: #1a1a22F0;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
    --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
    --background-color-input-binary--checked: #36c;
    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
    --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;
    --border-image-base: url('/wiki/Special:Redirect/file/Wiki-border-kurva.png');
    --border-color-base: #2b5cc9;
    --border-color-subtle: color-mix(in srgb, #2b5cc9 50%, transparent);
    --border-color-muted: color-mix(in srgb, #2b5cc9 30%, transparent);
    --border-color-interactive: #2b5cc9;
    --border-color-interactive--hover: color-mix(in srgb, #2b5cc9 85%, #fff);
    --border-color-interactive--active: color-mix(in srgb, #2b5cc9 70%, #000);
    --border-color-disabled: color-mix(in srgb, #2b5cc9 40%, #808080);
    --border-color-inverted: #fff;
    --border-color-inverted-fixed: #fff;
    --border-color-progressive: #2b5cc9;
    --border-color-progressive--hover: color-mix(in srgb, #2b5cc9 90%, #fff);
    --border-color-progressive--active: color-mix(in srgb, #2b5cc9 80%, #000);
    --border-color-progressive--focus: color-mix(in srgb, #2b5cc9 95%, #fff);
    --border-color-destructive: color-mix(in srgb, #2b5cc9 70%, #ce0000);
    --border-color-destructive--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
    --border-color-destructive--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
    --border-color-destructive--focus: color-mix(in srgb, #2b5cc9 65%, #ce0000);
    --border-color-error: color-mix(in srgb, #2b5cc9 70%, #ce0000);
    --border-color-error--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
    --border-color-error--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
    --border-color-warning: color-mix(in srgb, #2b5cc9 60%, #f57b50);
    --border-color-success: color-mix(in srgb, #2b5cc9 60%, #177860);
    --border-color-notice: color-mix(in srgb, #2b5cc9 60%, #f57b50);
    --border-color-content-added: color-mix(in srgb, #2b5cc9 60%, #177860);
    --border-color-content-removed: color-mix(in srgb, #2b5cc9 60%, #ce0000);
    --border-color-transparent: transparent;
    --border-color-divider: #a2a9b1;
    --outline-color-progressive--focus: #36c;
    --color-link-red: var(--color-destructive);
    --color-link-red--hover: var(--color-destructive--hover);
    --color-link-red--active: var(--color-destructive--active);
    --color-link-red--focus: var(--color-destructive--focus);
    --color-link-red--visited: var(--color-destructive--visited);
    --color-link-red--visited--hover: var(--color-destructive--visited--hover);
    --color-link-red--visited--active: var(--color-destructive--visited--active);
    --accent-color-base: #36c;
    --border-color-input--hover: var(--border-color-interactive);
    --border-color-input-binary: var(--border-color-interactive);
    --border-color-input-binary--hover: var(--border-color-progressive--hover);
    --border-color-input-binary--active: var(--border-color-progressive--active);
    --border-color-input-binary--focus: var(--border-color-progressive--focus);
    --border-color-input-binary--checked: var(--border-color-progressive);
    --color-base--subtle: #54595d;
}

/* ---------- Style login button ---------- */
#daedalus-user-menu-checkbox:hover {
  background: #365fb8;
}

.pre-content h1, .content .mw-heading1, .content h1, .content .mw-heading2, .content h2 {
    font-family: 'Daedalus', 'Outfit', 'Times', 'Source Serif Pro', serif;
}

:root body {
    background-image: url(images/f/ff/Site-background-image.jpg);
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.last-modified-bar {
    display: none !important;
}
.mw-highlight {
    background-color: #1a1a22;
}
.mw-footer {
    background-image: url(/wiki/Special:Redirect/file/Site-footer-image.jpg);
    background-position: 25% 20%;
    background-size: cover;
    position: relative;
    border-top: 2px solid rgba(66, 162, 241, 0.3);
    box-shadow: 
        inset 0 0 60px 20px rgba(0, 0, 0, 0.8),
        inset 0 2px 40px 10px rgba(66, 162, 241, 0.1),
        0 -10px 40px rgba(66, 162, 241, 0.15);
}

.mw-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(66, 162, 241, 0.4) 10%, 
        rgba(66, 162, 241, 0.7) 30%, 
        rgba(66, 162, 241, 0.9) 50%, 
        rgba(66, 162, 241, 0.7) 70%, 
        rgba(66, 162, 241, 0.4) 90%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
    animation: footer-scan 4s linear infinite;
}

@keyframes footer-scan {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
.mw-heading1, h1 {
    font-size: 2em;
}
#filetoc {
    background-color: var(--background-color-base);
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
    padding-left: 3.5em;
    box-shadow: inset 2.75em 0 0 var(--background-color-base);
}
.cdx-message--error {
    background-color: var(--background-color-base);
    border-color: var(--border-color-error, #f54739);
}
.editOptions {
    background-color: var(--background-color-base);
    color: var(--color-base);
    border: 1px solid var(--border-color-subtle, #c8ccd1);
    border-top: 0;
    padding: 1em 1em 1.5em 1em;
    margin-bottom: 2em;
}
.ace-tm .ace_gutter {
    background: var(--background-color-base);
    color: var(--color-base);
}

.ace-tm {
    background-color: #FFFFFF80;
}

.overlay-enabled, .mw-body {
    background-color: transparent;
}

.header-container.header-chrome {
    background-color: transparent;
    border: 0;
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.header-container {
    border-bottom: none;
    padding: 0 16px;
}

#mw-mf-page-center {
    width: 100%;
    min-height: 100%;
    position: relative;
    background-color: transparent;
    overflow: hidden;
}

@media screen and (min-width: 993.3px) {
    .banner-container, .daedalus-anon-talk-message, .daedalus-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        max-width: 1900px;
    }
}

.search-box .search {
    color: var(--color-base);
}

.content .mw-parser-output .mw-editsection .cdx-button {
    font-size: 1rem;
    display: none;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.1) 100%),
        var(--background-color-transparent);
    color: var(--color-base);
    text-align: center;
    font-weight: bold;
    position: relative;
    padding: 0.75em 0.5em;
    border-bottom: 1px solid rgba(66, 162, 241, 0.3) !important;
    text-shadow: 0 0 10px rgba(66, 162, 241, 0.5);
}

.wikitable > tr > th::after, .wikitable > * > tr > th::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);
}

.mw-search-createlink {
    display: block !important;
}

/* this is a comment to show how fast this thing is */

.wikitable {
    background-color: var(--background-color-transparent);
    color: var(--color-base, #202122);
    margin: 1em 0;
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-collapse: collapse;
}

.content .mw-parser-output h2 {
    image-rendering: pixelated !important;
    text-rendering: geometricPrecision !important;
    text-shadow: 
    0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor;
    font-size: 3.3em;
    font-weight: normal;
}

.content, .pre-content {
    background: var(--background-color-transparent);
    box-shadow: 0 0 30px #1a1a22;
    padding: 0 5em;
}

.header-container {
    background: #1a1a22D0 !important;
    padding: 0 0.5em !important;
}

.content .mw-parser-output .mw-heading, .content .mw-parser-output .section-heading {
    display: block;
    min-width: fit-content;
}

.content .mw-parser-output h2 {
    flex-grow: 0;
    flex-basis: 0;
}

.footer-section > ul {
    width: 30%; 
    columns: 2; 
    column-gap: 20px; 
    max-height: 200px; 
    overflow-y: auto;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
        #1a1a22C0;
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 0 30px 5px rgba(66, 162, 241, 0.08),
        0 0 0 1px rgba(66, 162, 241, 0.25);
    padding: 0.75em;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 2.5em;
    position: relative;
    backdrop-filter: blur(5px);
}

.footer-section > ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6), transparent);
    box-shadow: 0 0 8px rgba(66, 162, 241, 0.5);
}

.footer-section > ul > li {
    font-weight: bold;
    text-shadow: 
        0 0 15px rgba(66, 162, 241, 0.6),
        0 0 8px rgba(66, 162, 241, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.footer-section > ul > li:hover {
    text-shadow: 
        0 0 20px rgba(66, 162, 241, 0.9),
        0 0 12px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    transform: translateX(3px);
}

.mw-footer > .post-content > * {
    text-align: center;
}

.toc {
    display: none;
}

table.wikitable tr:nth-child(2n) {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 100%),
        color-mix(in srgb, #1a1a22, #111111);
}

table.wikitable tr:nth-child(2n+1) {
    background: 
        linear-gradient(135deg, rgba(76, 87, 181, 0.03) 0%, transparent 100%),
        #1a1a22;
}

table.wikitable {
    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;
    border-collapse: separate; 
    padding: 0.5em;
    box-shadow: 
        0 0 30px 5px rgba(0, 0, 0, 0.6),
        inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
        0 0 0 1px rgba(66, 162, 241, 0.15);
    position: relative;
}

table.wikitable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5), transparent);
    box-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
    z-index: 1;
}

table.wikitable > caption {
    font-family: 'Daedalus';
    font-size: 2em;
    border-radius: 20px 20px 0 0;
    padding-left: 0.5em;
}

table.wikitable > tbody > tr > td > a {
    font-weight: bold;
}

span.mw-page-title-main {
    font-size: 2em;
}

#bodyContent {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-border-nexus.png);
    border-image-slice: 11;
    border-image-width: 20px;
    border-image-repeat: stretch stretch;
    border-image-outset: 10px;
    padding: 5em 3em 5em 3em;
    box-shadow: inset 0 0 30px lightblue;
}

.search-box {
    margin-left: auto;
    margin-right: 1em;
}

.search-box .search {
    border: 1px solid var(--color-visited);
    border-radius: 10px;
}

input.search:hover {
    background-color: color-mix(in srgb, #1a1a22 70%, #fff 10%);
}
.cdx-button:enabled.cdx-button--weight-quiet:hover, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
    background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
    mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.label[for="page-actions-overflow-checkbox"]:hover {
    background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
    mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.page-actions-menu__list-item:last-child {
    margin-right: 0 !important;
}

.toggle-list__checkbox {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100% !important;
    margin: 0;
}

.cdx-button .daedalus-icon + span:not(:empty) {
    margin-left: 0;
}

div.post-content > a[role='button'] {
    display:none;
}

body {
    font-family: var(--body-font-family);
}


.footer-content > ul > li > a {
    font-size: 1.5em;
    text-shadow: 
        0 0 10px rgba(66, 162, 241, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.footer-content > ul > li > a:hover {
    text-shadow: 
        0 0 18px rgba(66, 162, 241, 0.8),
        0 0 10px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

div.footer-content::before {
    background-image: url(/wiki/Special:Redirect/file/Site-logo.png);
    filter: drop-shadow(0 0 20px rgba(66, 162, 241, 0.6));
}

.footer-content > ul.footer-places {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.1) 0%, transparent 50%, rgba(76, 87, 181, 0.1) 100%),
        var(--background-color-transparent);
    box-shadow: 
        inset 0 0 30px 8px rgba(66, 162, 241, 0.12),
        0 0 25px 8px rgba(66, 162, 241, 0.2),
        0 0 0 1px rgba(66, 162, 241, 0.3);
    margin: 1em 1em;
    border-radius: 8px;
    padding: 0.75em;
    position: relative;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

.footer-places {
    width: fit-content;
}

.footer-content > ul.footer-places::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.5) 20%, 
        rgba(66, 162, 241, 0.8) 50%, 
        rgba(66, 162, 241, 0.5) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.item-infobox > div.druid-section-container > div.druid-row-Unholy {
    display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Bloodshot {
    display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Royal {
    display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Gilded {
    display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Irradiated {
    display: none;
}

/* UNHOLY Template Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Unholy) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemUnholyBorder.png);
    .druid-title, .druid-main-images-label {
        color: #8d9f97;
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        color: #d0e8e4;
    }
}
/* VOIDBOUND Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Voidbound) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemVoidboundBorder.png);
    .druid-title, .druid-main-images-label {
        color: #fc7cf1; 
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        color: #e955fc;
    }
}
/* BLOODSHOT Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Bloodshot) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBloodshotBorder.png);
    .druid-title, .druid-main-images-label {
        color: #c20f0f;
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        color: #fa8686;
    }
}
/* ROYAL Template Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Royal) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemRoyalBorder.png);
    .druid-title, .druid-main-images-label {
        color: #cd08cd;
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data  {
        color: #fcb7fc;
    }
}
/* GILDED Template Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Gilded) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemGildedBorder.png);
    .druid-title, .druid-main-images-label {
        color: #db7400;
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        color: #eac278;
    }
}
/* IRRADIATED Template Specific Colors & Border Image. */
.item-infobox:has(> div.druid-section-container > div.druid-row-Irradiated) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemIrradiatedBorder.png);
    .druid-title, .druid-main-images-label {
        color: #15cb15;
    }
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        color: #cef46a;
    }
}

/* Template Specific Colors & Border Image.
.item-infobox:has(> div.druid-section-container > div.druid-row-) {
    border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBorder.png);
    .druid-title {
        color: #;
    }
    .druid-label {
        color: #;
    }
    div.druid-data-Desc {
        color: #;
    }
}
*/


/* Lots of color mixing here, meant to apply to ANY item infobox */
.item-infobox {
    border-style: solid;
    border-image-slice: 9 63;
    border-image-width: 25em 154em;
    border-image-outset: 0;
    border-image-repeat: stretch;
    .druid-main-images-label.focused {
        background: color-mix(in srgb, currentColor 25%, transparent);
        box-shadow: 0 0 5px currentColor;
    }
    .druid-main-images-label {
        background: color-mix(in srgb, currentColor 10%, transparent);
        font-size: 2em;

        font-weight: bold;
        font-family: "Daedalus", sans-serif;
        text-shadow: 0 2px color-mix(in srgb, currentColor 50%, black),
                     0 4px color-mix(in srgb, currentColor 30%, black),
                     0 6px color-mix(in srgb, currentColor 10%, black);
        line-height: 1em;
        padding-bottom: 0.15em;
    }
    .druid-main-images-label {
        outline: 1px solid currentColor;
    }
    .druid-label {
        text-align: left;
        width: auto;
        max-width: 40%;
        color: #fcfc54;
    }
    /* need to account for toggleable data... awful. hence the , in the single rarity selectors above. */
    div.druid-data-Desc, div.druid-row-Desc > .druid-data {
        background-color: color-mix(in srgb, currentColor 43.62%, transparent);
        text-shadow: 2px 2px color-mix(in srgb, currentColor 30%, black);
        font-style: italic;
        margin-left: -0.6em;
        margin-right: -0.6em;
        padding: 0.6em;
        font-weight: bold;
        width: 100%;
    }
    .druid-label-Damage + .druid-data {
        color: #fc5454;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Shots + .druid-data {
        color: #54fc54;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Cooldown + .druid-data {
        color: #fc54fc;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Pierce + .druid-data {
        color: #00a800;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Range + .druid-data {
        color: #54fc54;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Velocity + .druid-data {
        color: #00a8a8;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Attack + .druid-data {
        color: #fc5454;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Defense + .druid-data {
        color: #5496fc;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Speed + .druid-data {
        color: #fcfc54;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Vitality + .druid-data {
        color: #54fc9c;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Health + .druid-data {
        color: #fc54a8;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Evasion + .druid-data {
        color: #54d4fc;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Healing + .druid-data {
        color: #a8fca8;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Slashes + .druid-data {
        color: #fca854;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Beams + .druid-data {
        color: #54fcfc;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-label-Critical.Chance + .druid-data,
    .druid-label-Critical + .druid-data {
        color: #fc9c54;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }

    .druid-row-Ability > .druid-data {
        color: #54fc54;
        text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent); 
    }
    .druid-row {
        background-color: rgba(0, 0, 0, 0.4362);
        border-radius: 4px;
    }
    .druid-row-Desc {
        background: none;
    }
    .druid-title {
        text-shadow: 0 3px color-mix(in srgb, currentColor 50%, black),
                     0 6px color-mix(in srgb, currentColor 30%, black),
                     0 9px color-mix(in srgb, currentColor 10%, black);
    }
}

.post-content {
    display: flow-root;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}