Module:Infobox/styles.css

/* {{pp|small=y}} */
/*
 * Module:Infobox/styles.css
 * TemplateStyles for Module:Infobox
 * 
 * Base .infobox styles should be in MediaWiki:Common.css
 * This file only contains module-specific additions
 */

/* Subbox handling */
.infobox-subbox {
    padding: 0;
    border: none;
    margin: -3px;
    width: auto;
    min-width: 100%;
    font-size: 100%;
    clear: none;
    float: none;
    background-color: transparent;
}

.infobox-3cols-child {
    margin: auto;
}

.infobox .navbar {
    font-size: 100%;
}

/* --------------------------------------------------------------------------
   THEME VARIANTS (header background colors)
   -------------------------------------------------------------------------- */

.infobox-person .infobox-header {
    background-color: #dce5ef;
}

.infobox-organization .infobox-header {
    background-color: #cfe3ff;
}

.infobox-nft .infobox-header {
    background-color: #e6e0f8;
}

.infobox-concept .infobox-header {
    background-color: #d5f5e3;
}

.infobox-event .infobox-header {
    background-color: #fdebd0;
}

.infobox-exhibition .infobox-header {
    background-color: #d1f2eb;
}

.infobox-artwork .infobox-header {
    background-color: #fadbd8;
}

.infobox-website .infobox-header {
    background-color: #e5e7e9;
}

/* --------------------------------------------------------------------------
   SPECIAL CONTENT
   -------------------------------------------------------------------------- */

/* URLs and external links */
.infobox-data a,
.infobox-data .external {
    word-break: break-all;
}

/* Contract addresses and hashes */
.infobox-contract {
    font-family: monospace;
    font-size: 85%;
    word-break: break-all;
}

/* Etherscan links */
.infobox-etherscan {
    font-family: monospace;
    font-size: 85%;
}

/* --------------------------------------------------------------------------
   MARKETPLACE LINKS
   -------------------------------------------------------------------------- */

.infobox-marketplaces {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.infobox-mp {
    display: inline-block;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 85%;
    font-weight: 500;
    background-color: #eaecf0;
    white-space: nowrap;
}

.infobox-mp a {
    text-decoration: none;
}

.infobox-mp:hover {
    background-color: #c8ccd1;
}

/* Platform-specific colors (subtle) */
.infobox-mp-opensea {
    background-color: #e8f4fc;
}

.infobox-mp-blur {
    background-color: #fff0e6;
}

.infobox-mp-magiceden {
    background-color: #f3e8ff;
}

.infobox-mp-scatter {
    background-color: #e6fff0;
}

/* Lists inside infobox */
.infobox-data ul {
    margin: 0;
    padding-left: 1.2em;
    list-style-type: disc;
}

.infobox-data li {
    margin-bottom: 0.2em;
}

/* Horizontal list */
.infobox .hlist ul {
    margin: 0;
    padding: 0;
}

.infobox .hlist li {
    display: inline;
    margin: 0;
    padding: 0;
}

.infobox .hlist li:after {
    content: " · ";
}

.infobox .hlist li:last-child:after {
    content: "";
}

/* Status indicators */
.infobox-status-active {
    color: #228b22;
}

.infobox-status-inactive {
    color: #b8860b;
}

.infobox-status-defunct {
    color: #8b0000;
}

/* --------------------------------------------------------------------------
   DARK THEME SUPPORT (edith.reisen inspired)
   -------------------------------------------------------------------------- */

[data-theme="dark"] .infobox {
    background-color: #111111;
    border-color: #333333;
    color: #ffffff;
}

[data-theme="dark"] .infobox-label {
    color: #b0b0b0;
}

[data-theme="dark"] .infobox-data {
    color: #ffffff;
}

[data-theme="dark"] .infobox-below {
    border-top-color: #333333;
}

/* Theme variant header colors (dark mode) - orange accent */
[data-theme="dark"] .infobox-person .infobox-header,
[data-theme="dark"] .infobox-organization .infobox-header,
[data-theme="dark"] .infobox-nft .infobox-header,
[data-theme="dark"] .infobox-concept .infobox-header,
[data-theme="dark"] .infobox-event .infobox-header,
[data-theme="dark"] .infobox-exhibition .infobox-header,
[data-theme="dark"] .infobox-artwork .infobox-header,
[data-theme="dark"] .infobox-website .infobox-header {
    background-color: #1a1a1a;
    border-bottom: 2px solid #ff6600;
}

/* Links in dark mode - orange */
[data-theme="dark"] .infobox a {
    color: #ff6600;
}

[data-theme="dark"] .infobox a:visited {
    color: #cc5500;
}

/* Marketplace links in dark mode */
[data-theme="dark"] .infobox-mp {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333333;
}

[data-theme="dark"] .infobox-mp:hover {
    background-color: #252525;
    border-color: #ff6600;
}

[data-theme="dark"] .infobox-mp-opensea,
[data-theme="dark"] .infobox-mp-blur,
[data-theme="dark"] .infobox-mp-magiceden,
[data-theme="dark"] .infobox-mp-scatter {
    background-color: #1a1a1a;
}

/* Status indicators in dark mode */
[data-theme="dark"] .infobox-status-active {
    color: #00ff00;
}

[data-theme="dark"] .infobox-status-inactive {
    color: #ffaa00;
}

[data-theme="dark"] .infobox-status-defunct {
    color: #ff4444;
}

/* Contract/hash text in dark mode */
[data-theme="dark"] .infobox-contract,
[data-theme="dark"] .infobox-etherscan {
    color: #00cc00;
}

/* Full data sections */
[data-theme="dark"] .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
    background: #0a0a0a !important;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   RESPONSIVE TABLE FIX (Vector 2022)
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
    body.skin--responsive .infobox-table {
        display: table !important;
    }
    body.skin--responsive .infobox-table > caption {
        display: table-caption !important;
    }
    body.skin--responsive .infobox-table > tbody {
        display: table-row-group;
    }
    body.skin--responsive .infobox-table tr {
        display: table-row !important;
    }
    body.skin--responsive .infobox-table th,
    body.skin--responsive .infobox-table td {
        padding-left: inherit;
        padding-right: inherit;
    }
}