Jump to content

MediaWiki:Common.css: Difference between revisions

From SurveyFi.net
← Older edit

Dmon (talk | contribs)

3 user groups
1,256 edits
mNo edit summary
mNo edit summary
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* ===== Main Page custom sections ===== */
/* ===== Main Page custom sections (light mode) ===== */
.sf-header {
.sf-header {
     background: #232323;
     background: #232323;
Line 10: Line 9:
     border-bottom: 6px solid #EA5E22;
     border-bottom: 6px solid #EA5E22;
}
}
.sf-welcome {
.sf-welcome {
     background: #EA5E22;
     background: #232323;
     color: #232323;
     color: #E9AC21;
     padding: 10px 20px;
     padding: 10px 20px;
    border-bottom: 6px solid #EA5E22;
}
}
.sf-status {
.sf-status {
     background: #00655E;
     background: #00655E;
Line 23: Line 21:
     margin-top: 10px;
     margin-top: 10px;
}
}
.sf-box {
.sf-box {
     background: #F5F5F0;
     background: #F5F5F0;
Line 32: Line 29:
}
}


/* ===== Site-wide accent colour (links, tabs, buttons) ===== */
/* ===== Main Page custom sections (dark mode overrides) ===== */
html.skin-vector-2022 {
html.skin-theme-clientpref-night .sf-header {
     --color-progressive: #EA5E22 !important;
     border-bottom-color: #A8451A;
    --color-progressive--hover: #C94E1B !important;
}
     --color-progressive--active: #A8451A !important;
html.skin-theme-clientpref-night .sf-status {
     --color-progressive--focus: #EA5E22 !important;
    background: #004640;
     color: #F0EEE8;
}
html.skin-theme-clientpref-night .sf-box {
    background: #2B2B2B;
    color: #E8E6DC;
     border-color: #444;
}


     --color-link: #EA5E22 !important;
/* ===== Page wrapper / outer margins ===== */
    --color-link--hover: #C94E1B !important;
.mw-page-container {
     --color-link--active: #A8451A !important;
     background-color: #EA5E22 !important;
}
html.skin-theme-clientpref-night .mw-page-container {
     background-color: #232323 !important;
}


    --border-color-progressive: #EA5E22 !important;
.vector-column-start,
    --border-color-progressive--hover: #C94E1B !important;
.vector-column-end {
    --border-color-progressive--active: #A8451A !important;
    background-color: #EA5E22 !important;
     --border-color-progressive--focus: #EA5E22 !important;
}
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end {
     background-color: #A8451A !important;
}


     --background-color-progressive: #EA5E22 !important;
header.vector-header {
    --background-color-progressive--hover: #C94E1B !important;
     background-color: #EA5E22 !important;
     --background-color-progressive--active: #A8451A !important;
}
html.skin-theme-clientpref-night header.vector-header {
     background-color: #232323 !important;
}


     --color-icon-progressive: #EA5E22 !important;
/* ===== Restore normal article background (so only margins stay orange) ===== */
.mw-body-content,
#mw-content-text {
     background-color: #ffffff !important;
}
html.skin-theme-clientpref-night .mw-body-content,
html.skin-theme-clientpref-night #mw-content-text {
    background-color: #101418 !important;
}


     --box-shadow-color-progressive--focus: #EA5E22 !important;
/* ===== Infobox backgrounds (light/dark) ===== */
     --box-shadow-color-progressive-selected: #C94E1B !important;
.sf-infobox {
     background: #f8f8f8;
    color: #202122;
}
html.skin-theme-clientpref-night .sf-infobox {
    background: #2B2B2B;
     color: #E8E6DC;
}
}


html.skin-vector-2022.skin-theme-clientpref-night {
.sf-infobox-header {
     --color-progressive: #FF7A3D !important;
     background: #ddd;
    --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;
 
/* Force red links back to red — must come after the --color-link overrides above */
html.skin-vector-2022 a.new,
html.skin-vector-2022 .new a {
    color: #fd7865 !important;
}
}
 
html.skin-theme-clientpref-night .sf-infobox-header {
html.skin-vector-2022:not(.skin-theme-clientpref-night) a.new,
     background: #444;
html.skin-vector-2022:not(.skin-theme-clientpref-night) .new a {
     color: #d33 !important; /* standard red-link colour for light mode */
}
}


[[Category:Site Configuration]]
[[Category:Site Configuration]]

Latest revision as of 17:58, 29 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) ===== */
html.skin-theme-clientpref-night .sf-header {
    border-bottom-color: #A8451A;
}
html.skin-theme-clientpref-night .sf-status {
    background: #004640;
    color: #F0EEE8;
}
html.skin-theme-clientpref-night .sf-box {
    background: #2B2B2B;
    color: #E8E6DC;
    border-color: #444;
}

/* ===== Page wrapper / outer margins ===== */
.mw-page-container {
    background-color: #EA5E22 !important;
}
html.skin-theme-clientpref-night .mw-page-container {
    background-color: #232323 !important;
}

.vector-column-start,
.vector-column-end {
    background-color: #EA5E22 !important;
}
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end {
    background-color: #A8451A !important;
}

header.vector-header {
    background-color: #EA5E22 !important;
}
html.skin-theme-clientpref-night header.vector-header {
    background-color: #232323 !important;
}

/* ===== Restore normal article background (so only margins stay orange) ===== */
.mw-body-content,
#mw-content-text {
    background-color: #ffffff !important;
}
html.skin-theme-clientpref-night .mw-body-content,
html.skin-theme-clientpref-night #mw-content-text {
    background-color: #101418 !important;
}

/* ===== Infobox backgrounds (light/dark) ===== */
.sf-infobox {
    background: #f8f8f8;
    color: #202122;
}
html.skin-theme-clientpref-night .sf-infobox {
    background: #2B2B2B;
    color: #E8E6DC;
}

.sf-infobox-header {
    background: #ddd;
}
html.skin-theme-clientpref-night .sf-infobox-header {
    background: #444;
}

[[Category:Site Configuration]]
Retrieved from "https://www.surveyfi.net/index.php?title=MediaWiki:Common.css&oldid=900"