MediaWiki:Common.css: Difference between revisions
Appearance
Updated the css for template note boxes |
Added global branding colors. |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
/* Base note box styling */ | /* Base note box styling */ | ||
.note-box { | .note-box { | ||
padding: 10px | padding: 5px 10px; | ||
margin: | margin: 5px 0; | ||
border-radius: 6px; | border-radius: 6px; | ||
border-left: 6px solid #ccc; | border-left: 6px solid #ccc; | ||
| Line 12: | Line 12: | ||
/* Information */ | /* Information */ | ||
.note-information { | .note-information { | ||
background-color: # | background-color: #4a90e2; | ||
border-color: #4a90e2; | border-color: #4a90e2; | ||
} | } | ||
| Line 18: | Line 18: | ||
/* Suggestion */ | /* Suggestion */ | ||
.note-suggestion { | .note-suggestion { | ||
background-color: # | background-color: #7bc043; | ||
border-color: #7bc043; | border-color: #7bc043; | ||
} | } | ||
| Line 24: | Line 24: | ||
/* Warning */ | /* Warning */ | ||
.note-warning { | .note-warning { | ||
background-color: # | background-color: #f5a623; | ||
border-color: #f5a623; | border-color: #f5a623; | ||
} | } | ||
| Line 30: | Line 30: | ||
/* Danger */ | /* Danger */ | ||
.note-danger { | .note-danger { | ||
background-color: # | background-color: #d0021b; | ||
border-color: #d0021b; | border-color: #d0021b; | ||
} | |||
/* Global Branding Colors */ | |||
:root { | |||
--color-brand-hero-cyan: #61d1fa; | |||
--color-brand-hero-green: #59eb5c; | |||
--color-brand-hero-orange: #e69e50; | |||
--color-brand-hero-red: #ff7676; | |||
--color-information: var(--color-brand-hero-cyan); | |||
--color-suggestion: var(--color-brand-hero-green); | |||
--color-success: var(--color-brand-hero-green); | |||
--color-warning: var(--color-brand-hero-orange); | |||
--color-danger: var(--color-brand-hero-red); | |||
--color-information-bg: #61d1fa40; | |||
--color-suggestion-bg: #59eb5c40; | |||
--color-success-bg: #59eb5c40; | |||
--color-warning-bg: #e69e5040; | |||
--color-danger-bg: #ff767640; | |||
--color-brand-dark-cyan: #1a2a36; | |||
--color-brand-dark-green: #192d24; | |||
--color-brand-dark-orange: #292423; | |||
--color-brand-dark-red: #1a1318; | |||
--color-brand-sub-cyan: #284c5d; | |||
--color-brand-sub-green: #24512c; | |||
--color-brand-sub-orange: #48392a; | |||
--color-brand-sub-red: #5d323a; | |||
} | } | ||
Latest revision as of 14:54, 16 July 2026
/* CSS placed here will be applied to all skins */
/* Base note box styling */
.note-box {
padding: 5px 10px;
margin: 5px 0;
border-radius: 6px;
border-left: 6px solid #ccc;
font-size: 1em;
}
/* Information */
.note-information {
background-color: #4a90e2;
border-color: #4a90e2;
}
/* Suggestion */
.note-suggestion {
background-color: #7bc043;
border-color: #7bc043;
}
/* Warning */
.note-warning {
background-color: #f5a623;
border-color: #f5a623;
}
/* Danger */
.note-danger {
background-color: #d0021b;
border-color: #d0021b;
}
/* Global Branding Colors */
:root {
--color-brand-hero-cyan: #61d1fa;
--color-brand-hero-green: #59eb5c;
--color-brand-hero-orange: #e69e50;
--color-brand-hero-red: #ff7676;
--color-information: var(--color-brand-hero-cyan);
--color-suggestion: var(--color-brand-hero-green);
--color-success: var(--color-brand-hero-green);
--color-warning: var(--color-brand-hero-orange);
--color-danger: var(--color-brand-hero-red);
--color-information-bg: #61d1fa40;
--color-suggestion-bg: #59eb5c40;
--color-success-bg: #59eb5c40;
--color-warning-bg: #e69e5040;
--color-danger-bg: #ff767640;
--color-brand-dark-cyan: #1a2a36;
--color-brand-dark-green: #192d24;
--color-brand-dark-orange: #292423;
--color-brand-dark-red: #1a1318;
--color-brand-sub-cyan: #284c5d;
--color-brand-sub-green: #24512c;
--color-brand-sub-orange: #48392a;
--color-brand-sub-red: #5d323a;
}