Jump to content

MediaWiki:Common.css: Difference between revisions

From Team Inverse MediaWiki
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 15px;
     padding: 5px 10px;
     margin: 10px 0;
     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: #e8f4ff;
     background-color: #4a90e2;
     border-color: #4a90e2;
     border-color: #4a90e2;
}
}
Line 18: Line 18:
/* Suggestion */
/* Suggestion */
.note-suggestion {
.note-suggestion {
     background-color: #f5ffe8;
     background-color: #7bc043;
     border-color: #7bc043;
     border-color: #7bc043;
}
}
Line 24: Line 24:
/* Warning */
/* Warning */
.note-warning {
.note-warning {
     background-color: #fff8e1;
     background-color: #f5a623;
     border-color: #f5a623;
     border-color: #f5a623;
}
}
Line 30: Line 30:
/* Danger */
/* Danger */
.note-danger {
.note-danger {
     background-color: #ffe8e8;
     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;
}