MediaWiki:Common.css: Difference between revisions

Revision as of 22:37, 5 November 2026

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

:root {
    /* Base color */
    --color-base: #4C3F18;
    --color-base--hover: #C9BEA3;
    --color-base--subtle: #998B78;
    --background-color-base: #F1E9D2;
    --border-color-base: #4C3F18;
    --box-shadow-color-base: #4C3F18;

    /* Changes view */
    --color-content-added: #80cdb3;
    --background-color-content-added: #233566;
    --border-color-content-added: #233566;
    
    --color-content-removed: #fd7865;
    --background-color-content-removed: #453217;
    --border-color-content-removed: #987027;

    /* Enabled buttons */
    --border-color-interactive: #4C3F18;
    --border-color-interactive--active: #998B78;
    --border-color-interactive--hover: #C9BEA3;

    --background-color-interactive: #998B78;
    --background-color-interactive--active: #998B78;
    --background-color-interactive--hover: #C9BEA3;

    --background-color-interactive-subtle: #998B78;
    --background-color-interactive-subtle--active: #998B78;
    --background-color-interactive-subtle--hover: #C9BEA3;

    --background-color-input-binary--checked: #6b8e23;

    /* Disabled buttons */
    --color-disabled: #54595d;
    --color-disabled-emphasized: #72777d;
    --border-color-disabled: #54595d;
    --background-color-disabled: #404244;
    --background-color-disabled-subtle: #27292d;

    /* Generic box */
    --color-neutral: #4C3F18;
    --background-color-neutral: #C9BEA3;
    --background-color-neutral-subtle: #C9BEA3;

    /* Error box */
    --color-error: #4C3F18;
    --color-error--active: #4C3F18;
    --color-error--hover: #4C3F18;
    --color-icon-error: #4C3F18;

    --border-color-error: #4C3F18;
    --border-color-error--active: #4C3F18;
    --border-color-error--hover: #4C3F18;

    --background-color-error: #C9BEA3;
    --background-color-error--active: #C9BEA3;
    --background-color-error--hover: #C9BEA3;

    --background-color-error-subtle: #C9BEA3;
    --background-color-error-subtle--active: #C9BEA3;
    --background-color-error-subtle--hover: #C9BEA3;

    /* Info box */
    --color-notice: #4C3F18;
    --color-icon-notice: #4C3F18;
    --border-color-notice: #4C3F18;
    --background-color-notice-subtle: #E7DFC6;

    /* Success box */
    --color-success: #4C3F18;
    --color-icon-success: #4C3F18;
    --border-color-success: #4C3F18;
    --background-color-success-subtle: #E7DFC6;

    /* Warning box */
    --color-warning: #4C3F18;
    --color-icon-warning: #4C3F18;
    --border-color-warning--active: #4C3F18;
    --border-color-warning--hover: #4C3F18;
    --border-color-warning: #4C3F18;
    --background-color-warning-subtle: #E7DFC6;

    /* Unvisited links */
    --color-progressive: #6b8e23;
    --color-progressive--active: #a4c3a1;
    --color-progressive--focus: #4b5e3e;
    --color-progressive--hover: #c9e16a;
    --color-icon-progressive: #6b8e23;
    --outline-color-progressive--focus: #4b5e3e;

    --box-shadow-color-progressive--active: #a4c3a1;
    --box-shadow-color-progressive--focus: #4b5e3e;

    --box-shadow-color-progressive-selected: #6b8e23;
    --box-shadow-color-progressive-selected--active: #a4c3a1;
    --box-shadow-color-progressive-selected--hover: #c9e16a;
    
    --border-color-progressive: #6b8e23;
    --border-color-progressive--active: #a4c3a1;
    --border-color-progressive--focus: #4b5e3e;
    --border-color-progressive--hover: #c9e16a;

    --background-color-progressive: #a4c3a1;
    --background-color-progressive--active: #c6e4c4;
    --background-color-progressive--focus: #85a183;
    --background-color-progressive--hover: #8aac87;

    --background-color-progressive-subtle: #a4c3a1;
    --background-color-progressive-subtle--active: #c6e4c4;
    --background-color-progressive-subtle--hover: #8aac87;
    
    /* Visited links */
    --color-visited: #6f4b8e;
    --color-visited--active: #9d6e9e;
    --color-visited--hover: #b88bb8;

    /* Missing links */
    --color-destructive: #bf3c2c;
    --color-destructive--active: #612419;
    --color-destructive--focus: #6485d1;
    --color-destructive--hover: #9f3526;

    --color-destructive--visited--active: #e8cecd;
    --color-destructive--visited--hover: #dcb5b3;
    --color-destructive--visited: #c99391;

    --box-shadow-color-destructive--focus: #6485d1;

    --border-color-destructive: #f54739;
    --border-color-destructive--active: #fea898;
    --border-color-destructive--focus: #6485d1;
    --border-color-destructive--hover: #fd7865;

    --background-color-destructive: #fd7865;
    --background-color-destructive--active: #ffc8bd;
    --background-color-destructive--focus: #36c;
    --background-color-destructive--hover: #fea898;

    --background-color-destructive-subtle: #3c1a13;
    --background-color-destructive-subtle--active: #9f3526;
    --background-color-destructive-subtle--hover: #612419;

    /* Title text */
    --color-emphasized: #716751;
    --border-color-emphasized: #716751;

    /* Inverted text */
    --color-inverted: #F1E9D2;
    --color-inverted-fixed: #F1E9D2;
    --box-shadow-color-inverted: #F1E9D2;
    --border-color-inverted: #F1E9D2;
    --background-color-inverted: #4C3F18;

    /* Subtitle text */
    --color-subtle: #716751;
    --border-color-subtle: #716751;

    /* Misc */
    --border-color-divider: #a2a9b1;
    --border-color-muted: #404244;
    --color-placeholder: #72777d;
    --background-color-target-text: #572c19;
    --accent-color-base: #6b8e23;

    /* Fix textareas */
    textarea {
        color: var(--color-base);
        background-color: var(--background-color-base);
        box-shadow: var(--box-shadow-color-base);
    }
}