MediaWiki:Common.css: Difference between revisions

Revision as of 00:04, 28 August 2026

/* CSS placed here will be applied to all skins */

/* ===== Main Page custom sections (light mode) ===== */
.sf-header {
    background: #232323;
    color: #D0CDBC;
    padding: 20px;
    text-align: center;
    border-bottom: 6px solid #EA5E22;
}
.sf-welcome {
    background: #232323;
    color: #E9AC21;
    padding: 10px 20px;
    border-bottom: 6px solid #EA5E22;
}
.sf-status {
    background: #00655E;
    color: #D0CDBC;
    padding: 10px 20px;
    margin-top: 10px;
}
.sf-box {
    background: #F5F5F0;
    color: #232323;
    border: 1px solid #D0CDBC;
    padding: 10px;
    vertical-align: top;
}

/* ===== Main Page custom sections (dark mode overrides) ===== */
#mw-page-container {
    background-color: #EA5E22 !important;
}
html.skin-theme-clientpref-night #mw-page-container {
    background-color: #A8451A !important;
}

/* ===== Page wrapper / outer margins ===== */
html.skin-vector-2022 #mw-page-container .vector-column-start,
html.skin-vector-2022 #mw-page-container .vector-column-end {
    background-color: #EA5E22 !important;
}
html.skin-vector-2022.skin-theme-clientpref-night #mw-page-container .vector-column-start,
html.skin-vector-2022.skin-theme-clientpref-night #mw-page-container .vector-column-end {
    background-color: #A8451A !important;
{

/* ===== Site-wide accent colour (links, tabs, buttons) ===== */
html.skin-vector-2022 {
    --color-progressive: #EA5E22 !important;
    --color-progressive--hover: #C94E1B !important;
    --color-progressive--active: #A8451A !important;
    --color-progressive--focus: #EA5E22 !important;
    --color-link: #EA5E22 !important;
    --color-link--hover: #C94E1B !important;
    --color-link--active: #A8451A !important;
    --border-color-progressive: #EA5E22 !important;
    --border-color-progressive--hover: #C94E1B !important;
    --border-color-progressive--active: #A8451A !important;
    --border-color-progressive--focus: #EA5E22 !important;
    --background-color-progressive: #EA5E22 !important;
    --background-color-progressive--hover: #C94E1B !important;
    --background-color-progressive--active: #A8451A !important;
    --color-icon-progressive: #EA5E22 !important;
    --box-shadow-color-progressive--focus: #EA5E22 !important;
    --box-shadow-color-progressive-selected: #C94E1B !important;
}
html.skin-vector-2022.skin-theme-clientpref-night {
    --color-progressive: #FF7A3D !important;
    --color-progressive--hover: #EA5E22 !important;
    --color-progressive--active: #C94E1B !important;
    --color-progressive--focus: #FF7A3D !important;
    --color-link: #FF7A3D !important;
    --color-link--hover: #EA5E22 !important;
    --color-link--active: #C94E1B !important;
    --border-color-progressive: #FF7A3D !important;
    --border-color-progressive--hover: #EA5E22 !important;
    --border-color-progressive--active: #C94E1B !important;
    --border-color-progressive--focus: #FF7A3D !important;
    --background-color-progressive: #FF7A3D !important;
    --background-color-progressive--hover: #EA5E22 !important;
    --background-color-progressive--active: #C94E1B !important;
    --color-icon-progressive: #FF7A3D !important;
    --box-shadow-color-progressive--focus: #FF7A3D !important;
    --box-shadow-color-progressive-selected: #EA5E22 !important;
}

/* ===== Explicit overrides for sidebar & heading links (not variable-driven) ===== */
html.skin-vector-2022 #mw-panel a,
html.skin-vector-2022 .vector-menu-content a,
html.skin-vector-2022 .mw-portlet a,
html.skin-vector-2022 .firstHeading a,
html.skin-vector-2022 h1 a, html.skin-vector-2022 h2 a,
html.skin-vector-2022 h3 a, html.skin-vector-2022 h4 a {
    color: #EA5E22 !important;
}
html.skin-vector-2022.skin-theme-clientpref-night #mw-panel a,
html.skin-vector-2022.skin-theme-clientpref-night .vector-menu-content a,
html.skin-vector-2022.skin-theme-clientpref-night .mw-portlet a,
html.skin-vector-2022.skin-theme-clientpref-night .firstHeading a,
html.skin-vector-2022.skin-theme-clientpref-night h1 a, html.skin-vector-2022.skin-theme-clientpref-night h2 a,
html.skin-vector-2022.skin-theme-clientpref-night h3 a, html.skin-vector-2022.skin-theme-clientpref-night h4 a {
    color: #FF7A3D !important;
}

/* ===== Force red links back to red (must stay last — overrides everything above) ===== */
html.skin-vector-2022 a.new,
html.skin-vector-2022 .new a {
    color: #d33 !important;
}
html.skin-vector-2022.skin-theme-clientpref-night a.new,
html.skin-vector-2022.skin-theme-clientpref-night .new a {
    color: #fd7865 !important;
}

[[Category:Site Configuration]]