|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Vector skin */
| |
| :root:root {
| |
| /* Custom theme colors */
| |
| --bg-primary: #1a1410;
| |
| --bg-secondary: #241c16;
| |
| --bg-surface: #2e241c;
| |
| --bg-elevated: #3a2e24;
| |
| --text-primary: #e8dcc8;
| |
| --text-secondary: #b8a890;
| |
| --text-muted: #7a6e60;
| |
| --gold: #d4a84b;
| |
| --gold-bright: #f0c866;
| |
| --gold-dim: #a67c32;
| |
| --red: #8b2d2d;
| |
| --red-bright: #a63d3d;
| |
| --border-subtle: #3a2e24;
| |
| --border-accent: #5c4a36;
| |
|
| |
|
| /* MediaWiki color mappings */
| |
| --color-base: var(--text-primary);
| |
| --color-base-fixed: var(--text-primary);
| |
| --color-base--hover: #f5edd8;
| |
| --color-emphasized: #f5edd8;
| |
| --color-subtle: var(--text-secondary);
| |
| --color-placeholder: var(--text-muted);
| |
| --color-disabled: #5a4e40;
| |
| --color-disabled-emphasized: var(--text-muted);
| |
| --color-inverted: var(--bg-primary);
| |
| --color-inverted-fixed: var(--bg-primary);
| |
| --color-progressive: var(--gold);
| |
| --color-progressive--hover: var(--gold-bright);
| |
| --color-progressive--active: var(--gold-dim);
| |
| --color-progressive--focus: var(--gold);
| |
| --color-visited: var(--gold-dim);
| |
| --color-visited--hover: var(--gold);
| |
| --color-visited--active: #8a6528;
| |
| --color-destructive: var(--red-bright);
| |
| --color-destructive--hover: #c04a4a;
| |
| --color-destructive--active: var(--red);
| |
| --color-destructive--focus: var(--gold);
| |
| --color-destructive--visited: var(--red);
| |
| --color-destructive--visited--hover: var(--red-bright);
| |
| --color-destructive--visited--active: #6b2222;
| |
| --color-error: var(--red-bright);
| |
| --color-error--hover: #c04a4a;
| |
| --color-error--active: var(--red);
| |
| --color-warning: var(--gold-bright);
| |
| --color-success: #7a9a5a;
| |
| --color-notice: var(--text-secondary);
| |
| --color-icon-error: var(--red-bright);
| |
| --color-icon-warning: var(--gold);
| |
| --color-icon-success: #7a9a5a;
| |
| --color-icon-notice: var(--text-muted);
| |
| --color-content-added: #7a9a5a;
| |
| --color-content-removed: var(--red-bright);
| |
| --background-color-base: var(--bg-primary);
| |
| --background-color-base-fixed: var(--bg-primary);
| |
| --background-color-neutral: var(--bg-surface);
| |
| --background-color-neutral-subtle: var(--bg-secondary);
| |
| --background-color-inverted: var(--text-primary);
| |
| --background-color-transparent: transparent;
| |
| --background-color-interactive: var(--bg-surface);
| |
| --background-color-interactive--hover: var(--bg-elevated);
| |
| --background-color-interactive--active: #4a3e32;
| |
| --background-color-interactive-subtle: var(--bg-secondary);
| |
| --background-color-interactive-subtle--hover: var(--bg-surface);
| |
| --background-color-interactive-subtle--active: var(--bg-elevated);
| |
| --background-color-disabled: var(--bg-surface);
| |
| --background-color-disabled-subtle: var(--bg-secondary);
| |
| --background-color-progressive: var(--gold-dim);
| |
| --background-color-progressive--hover: var(--gold);
| |
| --background-color-progressive--active: #8a6528;
| |
| --background-color-progressive--focus: var(--gold-dim);
| |
| --background-color-progressive-subtle: var(--bg-secondary);
| |
| --background-color-progressive-subtle--hover: var(--bg-surface);
| |
| --background-color-progressive-subtle--active: var(--bg-elevated);
| |
| --background-color-destructive: var(--red);
| |
| --background-color-destructive--hover: var(--red-bright);
| |
| --background-color-destructive--active: #6b2222;
| |
| --background-color-destructive--focus: var(--gold-dim);
| |
| --background-color-destructive-subtle: var(--bg-surface);
| |
| --background-color-destructive-subtle--hover: var(--bg-elevated);
| |
| --background-color-destructive-subtle--active: #4a3e32;
| |
| --background-color-error: var(--red);
| |
| --background-color-error--hover: var(--red-bright);
| |
| --background-color-error--active: #6b2222;
| |
| --background-color-error-subtle: var(--bg-surface);
| |
| --background-color-error-subtle--hover: var(--bg-elevated);
| |
| --background-color-error-subtle--active: #4a3e32;
| |
| --background-color-warning-subtle: var(--bg-surface);
| |
| --background-color-success-subtle: var(--bg-surface);
| |
| --background-color-notice-subtle: var(--bg-surface);
| |
| --background-color-content-added: #4a5a3a;
| |
| --background-color-content-removed: var(--red);
| |
| --background-color-input-binary--checked: var(--gold-dim);
| |
| --border-color-base: var(--border-subtle);
| |
| --border-color-emphasized: var(--border-accent);
| |
| --border-color-subtle: var(--bg-elevated);
| |
| --border-color-muted: var(--bg-surface);
| |
| --border-color-divider: var(--border-subtle);
| |
| --border-color-transparent: transparent;
| |
| --border-color-inverted: var(--text-primary);
| |
| --border-color-inverted-fixed: var(--text-primary);
| |
| --border-color-interactive: var(--border-accent);
| |
| --border-color-interactive--hover: #6c5a46;
| |
| --border-color-interactive--active: var(--text-muted);
| |
| --border-color-disabled: var(--bg-elevated);
| |
| --border-color-progressive: var(--gold);
| |
| --border-color-progressive--hover: var(--gold-bright);
| |
| --border-color-progressive--active: var(--gold-dim);
| |
| --border-color-progressive--focus: var(--gold);
| |
| --border-color-destructive: var(--red-bright);
| |
| --border-color-destructive--hover: #c04a4a;
| |
| --border-color-destructive--active: var(--red);
| |
| --border-color-destructive--focus: var(--gold);
| |
| --border-color-error: var(--red-bright);
| |
| --border-color-error--hover: #c04a4a;
| |
| --border-color-error--active: var(--red);
| |
| --border-color-warning: var(--gold);
| |
| --border-color-warning--hover: var(--gold-bright);
| |
| --border-color-warning--active: var(--gold-dim);
| |
| --border-color-success: #7a9a5a;
| |
| --border-color-notice: var(--text-muted);
| |
| --border-color-content-added: #7a9a5a;
| |
| --border-color-content-removed: var(--red-bright);
| |
| --box-shadow-color-base: var(--border-subtle);
| |
| --box-shadow-color-progressive--active: var(--gold-dim);
| |
| --box-shadow-color-progressive--focus: var(--gold);
| |
| --box-shadow-color-progressive-selected: var(--gold);
| |
| --box-shadow-color-progressive-selected--hover: var(--gold-bright);
| |
| --box-shadow-color-progressive-selected--active: var(--gold-dim);
| |
| --box-shadow-color-destructive--focus: var(--gold);
| |
| --box-shadow-color-inverted: var(--text-primary);
| |
| --box-shadow-color-transparent: transparent;
| |
| --outline-color-progressive--focus: var(--gold);
| |
| --accent-color-base: var(--gold);
| |
| --font-size-x-small: 0.75rem;
| |
| --font-size-small: 0.875rem;
| |
| --font-size-medium: 1rem;
| |
| --font-size-large: 1.125rem;
| |
| --font-size-x-large: 1.25rem;
| |
| --font-size-xx-large: 1.5rem;
| |
| --font-size-xxx-large: 1.75rem;
| |
| --line-height-xxx-small: 1.4285714rem;
| |
| --line-height-xx-small: 1.5714285rem;
| |
| --line-height-x-small: 1.25rem;
| |
| --line-height-small: 1.375rem;
| |
| --line-height-medium: 1.625rem;
| |
| --line-height-large: 1.75rem;
| |
| --line-height-x-large: 1.875rem;
| |
| --line-height-xx-large: 2.125rem;
| |
| --line-height-xxx-large: 2.375rem;
| |
| --line-height-content: 1.625;
| |
| --opacity-icon-base: 0.87;
| |
| --opacity-icon-base--hover: 0.74;
| |
| --opacity-icon-base--selected: 1;
| |
| --opacity-icon-base--disabled: 0.51;
| |
| --opacity-icon-placeholder: 0.51;
| |
| --opacity-icon-subtle: 0.67;
| |
| --filter-invert-icon: 1;
| |
| --filter-invert-primary-button-icon: 0;
| |
| --mix-blend-mode-base: normal;
| |
| --mix-blend-mode-blend: screen;
| |
| }
| |
