EveryCRT Wiki

Template:Infobox styles.css: Difference between revisions

← Older editNewer edit →
Add Non-CRT model infobox and banner styles with dark mode support (via update-page on MediaWiki MCP Server)
Add per-type infobox title colors and type badge styles for CRT model (purple), AV device (blue), Accessory (copper), Part (slate). Includes light, night, and OS dark mode variants. Also adds per-type Edit button colors. (via update-page on MediaWiki MCP Server)
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;
}
.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 141:
}
}


/* 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 297:
}
}


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 321:
     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);
}
}


Line 288: Line 390:
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 353: Line 480:
}
}


/* 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 492:
}
}


/* 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 529:
     }
     }


     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 553:
         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);
     }
     }


Line 463: Line 622:
     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 497: Line 681:
     }
     }


    /* TBC group OS dark mode */
     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 694:
     }
     }


    /* 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 709:
     }
     }


    /* 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 721:
     }
     }


    /* 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