MediaWiki:Citizen.css: Difference between revisions
m (adjust `color-primary__h`) |
(added error message colour fix) |
||
(6 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
--color-primary__l: 50%; | --color-primary__l: 50%; | ||
--color-mw: #eaecf0; | --color-mw: #eaecf0; | ||
--color-red: #68191b; | --color-red: #68191b; | ||
--color-blue: #185893; | --color-blue: #185893; | ||
--link-red: #4b9ad2; | --link-red: #4b9ad2; | ||
--link-blue: #4b9ad2; | --link-blue: #4b9ad2; | ||
--background-red: #172026; | --background-red: #172026; | ||
--background-blue: #172026; | --background-blue: #172026; | ||
--background-message-error: # | --background-message-error: #2b1919; | ||
--background-message-warn: # | --background-message-warn: #2b2b19; | ||
--background-message-info: # | --background-message-info: #19192b; | ||
--border-red: 1px solid #460c10; | --border-red: 1px solid #460c10; | ||
--border-blue: 1px solid #0f304a; | --border-blue: 1px solid #0f304a; | ||
Line 28: | Line 22: | ||
--border-radius: 0.5em; | --border-radius: 0.5em; | ||
--shadow-mw: 0 0 0.5em 0.1em #00000080 | --shadow-mw: 0 0 0.5em 0.1em #00000080 | ||
} | |||
:root, | |||
:root.skin-citizen-dark { | |||
--color-mw-border: var(--border-color-base); /* citizen default */ | |||
--border-mw: 1px solid var(--border-color-base); /* citizen default */ | |||
--background-mw-heading: var(--color-surface-0); /* citizen default */ | |||
--background-mw: var(--color-surface-1); /* citizen default */ | |||
--background-mw-even: var(--color-surface-2); /* citizen default */ | |||
--background-mw-odd: var(--color-surface-1); /* citizen default */ | |||
} | } | ||
Line 35: | Line 39: | ||
color: var(--color-base); | color: var(--color-base); | ||
border-bottom: 1px solid var(--color-base); | border-bottom: 1px solid var(--color-base); | ||
} | |||
/* Template:Infobox */ | |||
div.infobox div.infobox-image > div.infobox-gallery img:hover { | |||
background: var(--background-mw-even); | |||
box-shadow: 0 0 0.25em var(--color-mw-border); | |||
} | |||
div.infobox div.infobox-image > div.infobox-gallery img.selected { | |||
background: var(--background-mw-even); | |||
box-shadow: 0 0 0.25em var(--color-mw-border) inset; | |||
} | |||
div.infobox div.infobox-item > div:first-child > div.floatright { | |||
margin-left: 0; | |||
} | |||
div.infobox div.infobox-item > div:first-child { | |||
width: 45%; | |||
} | |||
/* Div based "system" style messages (system messages). */ | |||
div.mw-lag-warn-normal, div.noarticletext, div.fmbox-system { | |||
border: 1px solid var(--border-color-base); | |||
background-color: var(--color-surface-2); | |||
} | |||
/* Error message */ | |||
div.mw-warning-with-logexcerpt, | |||
div.mw-lag-warn-high, | |||
div.mw-cascadeprotectedwarning { | |||
border: var(--border-message-error); | |||
background: var(--background-message-error); | |||
} | |||
/* Responsive elements */ | |||
@media screen and (max-width: 639px) { | |||
div.infobox { | |||
width: 100%; | |||
} | |||
.quote { | |||
clear: both; | |||
} | |||
} | } |
Latest revision as of 14:05, 24 April 2024
/* All CSS here will be loaded for users of the Citizen skin */
:root.skin-citizen-dark {
--color-primary__h: 205;
--color-primary__s: 60%;
--color-primary__l: 50%;
--color-mw: #eaecf0;
--color-red: #68191b;
--color-blue: #185893;
--link-red: #4b9ad2;
--link-blue: #4b9ad2;
--background-red: #172026;
--background-blue: #172026;
--background-message-error: #2b1919;
--background-message-warn: #2b2b19;
--background-message-info: #19192b;
--border-red: 1px solid #460c10;
--border-blue: 1px solid #0f304a;
--border-message-error: 1px solid #d33;
--border-message-warn: 1px solid #fc3;
--border-message-info: 1px solid #3366cc;
--border-radius: 0.5em;
--shadow-mw: 0 0 0.5em 0.1em #00000080
}
:root,
:root.skin-citizen-dark {
--color-mw-border: var(--border-color-base); /* citizen default */
--border-mw: 1px solid var(--border-color-base); /* citizen default */
--background-mw-heading: var(--color-surface-0); /* citizen default */
--background-mw: var(--color-surface-1); /* citizen default */
--background-mw-even: var(--color-surface-2); /* citizen default */
--background-mw-odd: var(--color-surface-1); /* citizen default */
}
/* sitenotice */
.sitenotice-card {
background-color: var(--color-surface-0);
color: var(--color-base);
border-bottom: 1px solid var(--color-base);
}
/* Template:Infobox */
div.infobox div.infobox-image > div.infobox-gallery img:hover {
background: var(--background-mw-even);
box-shadow: 0 0 0.25em var(--color-mw-border);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
background: var(--background-mw-even);
box-shadow: 0 0 0.25em var(--color-mw-border) inset;
}
div.infobox div.infobox-item > div:first-child > div.floatright {
margin-left: 0;
}
div.infobox div.infobox-item > div:first-child {
width: 45%;
}
/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal, div.noarticletext, div.fmbox-system {
border: 1px solid var(--border-color-base);
background-color: var(--color-surface-2);
}
/* Error message */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning {
border: var(--border-message-error);
background: var(--background-message-error);
}
/* Responsive elements */
@media screen and (max-width: 639px) {
div.infobox {
width: 100%;
}
.quote {
clear: both;
}
}