MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 19: / Line 19: @@
 }
-.metamorphous-regular {
+:root, .skin-invert, .notheme {
-     font-family: "Metamorphous", serif;
+     --color-base: #202122;
-     font-weight: 600;
+    --color-base-fixed: #202122;
-     font-style: normal;
+    --color-base--hover: #404244;
+    --color-emphasized: #101418;
+    --color-subtle: #54595d;
+    --color-placeholder: #72777d;
+    --color-disabled: #72777d;
+    --color-inverted: #fff;
+    --color-inverted-fixed: #fff;
+    --color-progressive: #36c;
+    --color-progressive--hover: #4b77d6;
+    --color-progressive--active: #233566;
+    --color-progressive--focus: #36c;
+    --color-destructive: #d73333;
+    --color-destructive--hover: #fc493b;
+    --color-destructive--active: #9f3526;
+    --color-destructive--focus: #36c;
+    --color-visited: #6a60b0;
+    --color-destructive--visited: #9f5555;
+    --color-error: #d73333;
+    --color-warning: #eeb533;
+    --color-success: #177860;
+    --color-notice: #202122;
+    --color-content-added: #006400;
+    --color-content-removed: #8b0000;
+    --filter-invert-icon: 0;
+    --filter-invert-primary-button-icon: 1;
+    --box-shadow-color-base: #000;
+    --box-shadow-color-progressive--active: #233566;
+    --box-shadow-color-progressive--focus: #36c;
+    --box-shadow-color-progressive-selected: #36c;
+    --box-shadow-color-progressive-selected--hover: #4b77d6;
+    --box-shadow-color-progressive-selected--active: #233566;
+    --box-shadow-color-destructive--focus: #36c;
+    --box-shadow-color-inverted: #fff;
+    --box-shadow-color-transparent: transparent;
+    --background-color-base: #fff;
+    --background-color-base-fixed: #fff;
+    --background-color-neutral: #eaecf0;
+    --background-color-neutral-subtle: #f8f9fa;
+    --background-color-interactive: #eaecf0;
+    --background-color-interactive-subtle: #f8f9fa;
+    --background-color-disabled: #c8ccd1;
+    --background-color-disabled-subtle: #eaecf0;
+    --background-color-inverted: #101418;
+    --background-color-progressive: #36c;
+    --background-color-progressive--hover: #4b77d6;
+    --background-color-progressive--active: #233566;
+    --background-color-progressive--focus: #36c;
+    --background-color-progressive-subtle: #f1f4fd;
+    --background-color-destructive: #d73333;
+    --background-color-destructive--hover: #fc493b;
+    --background-color-destructive--active: #9f3526;
+    --background-color-destructive--focus: #36c;
+    --background-color-destructive-subtle: #ffe9e5;
+    --background-color-error: #d73333;
+    --background-color-error--hover: #fc493b;
+    --background-color-error--active: #9f3526;
+    --background-color-error-subtle: #ffe9e5;
+    --background-color-warning-subtle: #fdf2d5;
+    --background-color-success-subtle: #dff2eb;
+    --background-color-notice-subtle: #eaecf0;
+    --background-color-content-added: #a3d3ff;
+    --background-color-content-removed: #ffe49c;
+    --background-color-transparent: transparent;
+    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
+    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
+    --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
+    --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
+    --background-color-input-binary--checked: #36c;
+    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
+     --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
+    --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;
+    --border-color-base: #a2a9b1;
+    --border-color-subtle: #c8ccd1;
+    --border-color-muted: #dadde3;
+    --border-color-interactive: #72777d;
+    --border-color-disabled: #c8ccd1;
+    --border-color-inverted: #fff;
+    --border-color-progressive: #36c;
+    --border-color-progressive--hover: #4b77d6;
+    --border-color-progressive--active: #233566;
+    --border-color-progressive--focus: #36c;
+    --border-color-destructive: #d73333;
+    --border-color-destructive--hover: #fc493b;
+    --border-color-destructive--active: #9f3526;
+    --border-color-destructive--focus: #36c;
+    --border-color-error: #9f3526;
+    --border-color-error--hover: #fc493b;
+    --border-color-warning: #987027;
+    --border-color-success: #196551;
+    --border-color-notice: #54595d;
+    --border-color-content-added: #a3d3ff;
+    --border-color-content-removed: #ffe49c;
+    --border-color-transparent: transparent;
+    --border-color-divider: #a2a9b1;
+    --outline-color-progressive--focus: #36c;
+    --color-link-red: var(--color-destructive);
+    --color-link-red--hover: var(--color-destructive--hover);
+    --color-link-red--active: var(--color-destructive--active);
+    --color-link-red--focus: var(--color-destructive--focus);
+    --color-link-red--visited: var(--color-destructive--visited);
+    --border-color-input--hover: var(--border-color-interactive);
+    --border-color-input-binary: var(--border-color-interactive);
+    --border-color-input-binary--hover: var(--border-color-progressive--hover);
+    --border-color-input-binary--active: var(--border-color-progressive--active);
+    --border-color-input-binary--focus: var(--border-color-progressive--focus);
+    --border-color-input-binary--checked: var(--border-color-progressive);
+    --color-base--subtle: #54595d;
 }
-:root, .skin-continuum, .notheme {
-    /* Backgrounds */
-    --background-primary: #001F3F;      /* Navy */
-    --background-secondary: #001933;    /* Deep Navy */
-    --background-tertiary: #002855;     /* Dark Slate */
-    --background-hover: #002B5C;        /* Slate Hover */
-    /* Borders */
-    --border-color: #FF851B;            /* Bright Orange */
-    /* Text Colors */
-    --color-text-primary: #FFFFFF;      /* White */
-    --color-text-secondary: #FFB84D;    /* Soft Peach */
-    --color-text-heading: #FF6300;      /* Bright Orange */
-    --color-link: #FF851B;              /* Bright Orange */
-    --color-link-hover: #FFB84D;        /* Soft Peach */
-    --color-text-muted: #B0B0B0;        /* Light Grey */
-    /* Alerts */
-    --color-success: #177860;           /* Teal */
-    --color-warning: #FFB84D;           /* Soft Peach */
-    --color-error: #FF4500;             /* Burnt Orange */
-    --color-notice: #001933;            /* Deep Navy */
-    /* Shadows */
-    --shadow-primary: 0 2px 5px rgba(0,0,0,0.3);
-    /* Opacity */
-    --opacity-disabled: 0.5;
-}
-	/* Import Google Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Metamorphous&display=swap');
-    .bona-nova-regular {
-        font-family: "Bona Nova", serif;
-        font-weight: 400;
-        font-style: normal;
-    }
-    .bona-nova-bold {
-        font-family: "Bona Nova", serif;
-        font-weight: 700;
-        font-style: normal;
-    }
-    .bona-nova-regular-italic {
-        font-family: "Bona Nova", serif;
-        font-weight: 400;
-        font-style: italic;
-    }
-    .metamorphous-regular {
-        font-family: "Metamorphous", serif;
-        font-weight: 600;
-        font-style: normal;
-    }
      /* ===== Global Styles ===== */
      body {