EveryCRT Wiki

Template:Infobox styles.css: Difference between revisions

← Older edit
Add Non-CRT model infobox and banner styles with dark mode support (via update-page on MediaWiki MCP Server)
Fix red links turning blue in dark mode — exclude .new links from blue color override and add explicit red link styling (via update-page on MediaWiki MCP Server)
 
(2 intermediate revisions by the same user not shown)
Line 15: Line 15:
}
}


.infobox-crt-model .infobox-title,
/* Per-type title colors */
.infobox-av-device .infobox-title,
.infobox-crt-model .infobox-title {
.infobox-accessory .infobox-title,
    background-color: #6c5ce7;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-av-device .infobox-title {
    background-color: #2d6cdf;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-accessory .infobox-title {
    background-color: #c0713a;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-part .infobox-title {
.infobox-part .infobox-title {
     background-color: #6c5ce7;
     background-color: #5f6b7a;
     color: #ffffff;
     color: #ffffff;
     border-radius: 2px 2px 0 0;
     border-radius: 2px 2px 0 0;
Line 28: Line 44:
     color: #ffffff;
     color: #ffffff;
     border-radius: 2px 2px 0 0;
     border-radius: 2px 2px 0 0;
}
/* Type badge (sits below the title as a second colored band) */
.infobox-type-badge {
    text-align: center;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
/* Badge link styling — links must inherit badge text color */
.infobox-type-badge a,
.infobox-type-badge a:visited {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
}
.infobox-type-badge a:hover {
    text-decoration: underline;
}
.infobox-crt-model .infobox-type-badge {
    background-color: #5a4bc9;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-av-device .infobox-type-badge {
    background-color: #255ec4;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-accessory .infobox-type-badge {
    background-color: #a86230;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-part .infobox-type-badge {
    background-color: #515c68;
    color: rgba(255, 255, 255, 0.9);
}
}


Line 95: Line 152:
}
}


/* Default button-primary (fallback) */
.infobox-button-primary {
.infobox-button-primary {
     background-color: #6c5ce7;
     background-color: #6c5ce7;
     color: #ffffff !important;
     color: #ffffff !important;
     border: 1px solid #5a4bd1;
     border: 1px solid #5a4bd1;
}
/* Per-type button-primary colors */
.infobox-crt-model .infobox-button-primary {
    background-color: #6c5ce7;
    border-color: #5a4bd1;
}
.infobox-av-device .infobox-button-primary {
    background-color: #2d6cdf;
    border-color: #255ec4;
}
.infobox-accessory .infobox-button-primary {
    background-color: #c0713a;
    border-color: #a86230;
}
.infobox-part .infobox-button-primary {
    background-color: #5f6b7a;
    border-color: #515c68;
}
}


Line 229: Line 308:
}
}


html.skin-theme-clientpref-night .infobox-crt-model .infobox-title,
/* Per-type title colors - night mode */
html.skin-theme-clientpref-night .infobox-av-device .infobox-title,
html.skin-theme-clientpref-night .infobox-crt-model .infobox-title {
html.skin-theme-clientpref-night .infobox-accessory .infobox-title,
    background-color: #7c6cf7;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-av-device .infobox-title {
    background-color: #4a8af4;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-accessory .infobox-title {
    background-color: #d4874e;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-part .infobox-title {
html.skin-theme-clientpref-night .infobox-part .infobox-title {
     background-color: #7c6cf7;
     background-color: #7a8594;
     color: #ffffff;
     color: #ffffff;
}
}
Line 240: Line 332:
     background-color: #8a7b7b;
     background-color: #8a7b7b;
     color: #ffffff;
     color: #ffffff;
}
/* Type badge - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .infobox-type-badge {
    background-color: #6a5ae0;
    color: rgba(255, 255, 255, 0.85);
}
html.skin-theme-clientpref-night .infobox-av-device .infobox-type-badge {
    background-color: #3b78e0;
    color: rgba(255, 255, 255, 0.85);
}
html.skin-theme-clientpref-night .infobox-accessory .infobox-type-badge {
    background-color: #b87640;
    color: rgba(255, 255, 255, 0.85);
}
html.skin-theme-clientpref-night .infobox-part .infobox-type-badge {
    background-color: #687382;
    color: rgba(255, 255, 255, 0.85);
}
/* Badge link styling - night mode */
html.skin-theme-clientpref-night .infobox-type-badge a,
html.skin-theme-clientpref-night .infobox-type-badge a:visited {
    color: rgba(255, 255, 255, 0.85) !important;
}
}


Line 288: Line 407:
html.skin-theme-clientpref-night .infobox-non-crt .infobox-image {
html.skin-theme-clientpref-night .infobox-non-crt .infobox-image {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
}
/* Per-type button-primary - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .infobox-button-primary {
    background-color: #7c6cf7;
    color: #ffffff !important;
    border-color: #6c5ce7;
}
html.skin-theme-clientpref-night .infobox-av-device .infobox-button-primary {
    background-color: #4a8af4;
    color: #ffffff !important;
    border-color: #3b78e0;
}
html.skin-theme-clientpref-night .infobox-accessory .infobox-button-primary {
    background-color: #d4874e;
    color: #ffffff !important;
    border-color: #b87640;
}
html.skin-theme-clientpref-night .infobox-part .infobox-button-primary {
    background-color: #7a8594;
    color: #ffffff !important;
    border-color: #687382;
}
}


Line 306: Line 450:
}
}


html.skin-theme-clientpref-night .infobox-crt-model a,
/* Infobox link colors - night mode (exclude red links) */
html.skin-theme-clientpref-night .infobox-av-device a,
html.skin-theme-clientpref-night .infobox-crt-model a:not(.new),
html.skin-theme-clientpref-night .infobox-accessory a,
html.skin-theme-clientpref-night .infobox-av-device a:not(.new),
html.skin-theme-clientpref-night .infobox-part a,
html.skin-theme-clientpref-night .infobox-accessory a:not(.new),
html.skin-theme-clientpref-night .infobox-non-crt a {
html.skin-theme-clientpref-night .infobox-part a:not(.new),
html.skin-theme-clientpref-night .infobox-non-crt a:not(.new) {
     color: #89b4fa;
     color: #89b4fa;
}
}


html.skin-theme-clientpref-night .infobox-crt-model a:visited,
html.skin-theme-clientpref-night .infobox-crt-model a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-av-device a:visited,
html.skin-theme-clientpref-night .infobox-av-device a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-accessory a:visited,
html.skin-theme-clientpref-night .infobox-accessory a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-part a:visited,
html.skin-theme-clientpref-night .infobox-part a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-non-crt a:visited {
html.skin-theme-clientpref-night .infobox-non-crt a:visited:not(.new) {
     color: #cba6f7;
     color: #cba6f7;
}
/* Red links (non-existent pages) - night mode */
html.skin-theme-clientpref-night .infobox-crt-model a.new,
html.skin-theme-clientpref-night .infobox-av-device a.new,
html.skin-theme-clientpref-night .infobox-accessory a.new,
html.skin-theme-clientpref-night .infobox-part a.new,
html.skin-theme-clientpref-night .infobox-non-crt a.new {
    color: #f38ba8 !important;
}
}


Line 353: Line 507:
}
}


/* Document buttons stay blue in dark mode for consistency */
html.skin-theme-clientpref-night .document-button-primary {
html.skin-theme-clientpref-night .document-button-primary {
     background-color: #3b82f6;
     background-color: #3b82f6;
Line 366: Line 519:
}
}


/* Wikitable dark mode (for tables inside document infobox) */
html.skin-theme-clientpref-night .document-infobox .wikitable {
html.skin-theme-clientpref-night .document-infobox .wikitable {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
Line 404: Line 556:
     }
     }


     html.skin-theme-clientpref-os .infobox-crt-model .infobox-title,
    /* Per-type title colors - OS dark mode */
     html.skin-theme-clientpref-os .infobox-av-device .infobox-title,
     html.skin-theme-clientpref-os .infobox-crt-model .infobox-title {
     html.skin-theme-clientpref-os .infobox-accessory .infobox-title,
        background-color: #7c6cf7;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-av-device .infobox-title {
        background-color: #4a8af4;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-accessory .infobox-title {
        background-color: #d4874e;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-part .infobox-title {
     html.skin-theme-clientpref-os .infobox-part .infobox-title {
         background-color: #7c6cf7;
         background-color: #7a8594;
         color: #ffffff;
         color: #ffffff;
     }
     }
Line 415: Line 580:
         background-color: #8a7b7b;
         background-color: #8a7b7b;
         color: #ffffff;
         color: #ffffff;
    }
    /* Type badge - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-type-badge {
        background-color: #6a5ae0;
        color: rgba(255, 255, 255, 0.85);
    }
    html.skin-theme-clientpref-os .infobox-av-device .infobox-type-badge {
        background-color: #3b78e0;
        color: rgba(255, 255, 255, 0.85);
    }
    html.skin-theme-clientpref-os .infobox-accessory .infobox-type-badge {
        background-color: #b87640;
        color: rgba(255, 255, 255, 0.85);
    }
    html.skin-theme-clientpref-os .infobox-part .infobox-type-badge {
        background-color: #687382;
        color: rgba(255, 255, 255, 0.85);
    }
    /* Badge link styling - OS dark mode */
    html.skin-theme-clientpref-os .infobox-type-badge a,
    html.skin-theme-clientpref-os .infobox-type-badge a:visited {
        color: rgba(255, 255, 255, 0.85) !important;
     }
     }


Line 463: Line 655:
     html.skin-theme-clientpref-os .infobox-non-crt .infobox-image {
     html.skin-theme-clientpref-os .infobox-non-crt .infobox-image {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
    }
    /* Per-type button-primary - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-button-primary {
        background-color: #7c6cf7;
        color: #ffffff !important;
        border-color: #6c5ce7;
    }
    html.skin-theme-clientpref-os .infobox-av-device .infobox-button-primary {
        background-color: #4a8af4;
        color: #ffffff !important;
        border-color: #3b78e0;
    }
    html.skin-theme-clientpref-os .infobox-accessory .infobox-button-primary {
        background-color: #d4874e;
        color: #ffffff !important;
        border-color: #b87640;
    }
    html.skin-theme-clientpref-os .infobox-part .infobox-button-primary {
        background-color: #7a8594;
        color: #ffffff !important;
        border-color: #687382;
     }
     }


Line 481: Line 698:
     }
     }


     html.skin-theme-clientpref-os .infobox-crt-model a,
    /* Infobox link colors - OS dark mode (exclude red links) */
     html.skin-theme-clientpref-os .infobox-av-device a,
     html.skin-theme-clientpref-os .infobox-crt-model a:not(.new),
     html.skin-theme-clientpref-os .infobox-accessory a,
     html.skin-theme-clientpref-os .infobox-av-device a:not(.new),
     html.skin-theme-clientpref-os .infobox-part a,
     html.skin-theme-clientpref-os .infobox-accessory a:not(.new),
     html.skin-theme-clientpref-os .infobox-non-crt a {
     html.skin-theme-clientpref-os .infobox-part a:not(.new),
     html.skin-theme-clientpref-os .infobox-non-crt a:not(.new) {
         color: #89b4fa;
         color: #89b4fa;
     }
     }


     html.skin-theme-clientpref-os .infobox-crt-model a:visited,
     html.skin-theme-clientpref-os .infobox-crt-model a:visited:not(.new),
     html.skin-theme-clientpref-os .infobox-av-device a:visited,
     html.skin-theme-clientpref-os .infobox-av-device a:visited:not(.new),
     html.skin-theme-clientpref-os .infobox-accessory a:visited,
     html.skin-theme-clientpref-os .infobox-accessory a:visited:not(.new),
     html.skin-theme-clientpref-os .infobox-part a:visited,
     html.skin-theme-clientpref-os .infobox-part a:visited:not(.new),
     html.skin-theme-clientpref-os .infobox-non-crt a:visited {
     html.skin-theme-clientpref-os .infobox-non-crt a:visited:not(.new) {
         color: #cba6f7;
         color: #cba6f7;
     }
     }


     /* TBC group OS dark mode */
     /* Red links (non-existent pages) - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model a.new,
    html.skin-theme-clientpref-os .infobox-av-device a.new,
    html.skin-theme-clientpref-os .infobox-accessory a.new,
    html.skin-theme-clientpref-os .infobox-part a.new,
    html.skin-theme-clientpref-os .infobox-non-crt a.new {
        color: #f38ba8 !important;
    }
 
     html.skin-theme-clientpref-os .infobox-tbc-group {
     html.skin-theme-clientpref-os .infobox-tbc-group {
         border-left-color: #45475a;
         border-left-color: #45475a;
     }
     }


    /* I/O location group OS dark mode */
     html.skin-theme-clientpref-os .infobox-io-location-group {
     html.skin-theme-clientpref-os .infobox-io-location-group {
         border-left-color: #45475a;
         border-left-color: #45475a;
Line 512: Line 737:
     }
     }


    /* Document infobox OS dark mode */
     html.skin-theme-clientpref-os .document-infobox {
     html.skin-theme-clientpref-os .document-infobox {
         background-color: #313244;
         background-color: #313244;
Line 528: Line 752:
     }
     }


    /* Document buttons stay blue in dark mode */
     html.skin-theme-clientpref-os .document-button-primary {
     html.skin-theme-clientpref-os .document-button-primary {
         background-color: #3b82f6;
         background-color: #3b82f6;
Line 541: Line 764:
     }
     }


    /* Wikitable OS dark mode */
     html.skin-theme-clientpref-os .document-infobox .wikitable {
     html.skin-theme-clientpref-os .document-infobox .wikitable {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
Retrieved from "https://wiki.everycrt.com/wiki/Template:Infobox_styles.css"
MediaWiki Appliance - Powered by TurnKey Linux