diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less
index 6e4aa51004..32cbd71079 100644
--- a/styles/wikipedia/catppuccin.user.less
+++ b/styles/wikipedia/catppuccin.user.less
@@ -17,6 +17,7 @@
==/UserStyle== */
@import "https://userstyles.catppuccin.com/lib/std/v1.less";
+@import "https://userstyles.catppuccin.com/lib/mediawiki/v1.less";
@-moz-document domain("wikipedia.org"),
domain("wiktionary.org"),
@@ -54,148 +55,14 @@
#catppuccin(@lightFlavor);
}
- html.skin-theme-clientpref-night, html.skin-theme-clientpref-os {
- /* Logo */
- .skin-invert-image img,
- .skin-invert,
- .oo-ui-iconElement-icon:not(
- .oo-ui-image-progressive,
- .oo-ui-image-destructive,
- .oo-ui-checkboxInputWidget-checkIcon,
- .oo-ui-image-invert,
- .mw-no-invert
- ),
- .oo-ui-indicatorElement-indicator {
- filter: none;
- }
- }
-
- /* MediaWiki only applies the following overrides on dark and automatic appearance settings, leaving broken elements with the light appearance. */
-
- .hatnote:not(.notheme),
- .dablink:not(.notheme),
- .rellink:not(.notheme),
- .infobox:not(.notheme) {
- color: var(--color-base) !important;
- background-color: var(--background-color-interactive-subtle) !important;
- }
- .infobox td:not(.notheme),
- .infobox th:not(.notheme),
- .infobox-above:not(.notheme),
- .infobox p:not(.notheme),
- .infobox > div:not(.notheme),
- .infobox caption:not(.notheme),
- .infobox--frwiki td:not(.notheme),
- .infobox--frwiki th:not(.notheme),
- .infobox--frwiki p:not(.notheme),
- .infobox--frwiki > div:not(.notheme),
- .infobox--frwiki caption:not(.notheme),
- .sinottico th:not(.notheme),
- .infobox-header:not(.notheme),
- .skin-nightmode-reset-color:not(.notheme),
- .navigation-box:not(.notheme),
- .metadata:not(.notheme),
- .quotebox:not(.notheme),
- .side-box:not(.notheme),
- .side-box div:not(.notheme),
- .navbox:not(.notheme),
- .navbox-subgroup:not(.notheme),
- .navbox-group:not(.notheme),
- .navbox-even:not(.notheme),
- .navbox-abovebelow:not(.notheme),
- .navbox-title:not(.notheme) {
- background: inherit !important;
- color: inherit !important;
- border-color: var(--border-color-subtle) !important;
- }
- .ns-100 .mw-parser-output :not(.notheme, a) {
- background: inherit !important;
- color: inherit !important;
- border-color: var(--border-color-subtle) !important;
- }
+ #__mediawiki.reset();
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
#lib.css-variables();
- --color-base: @text;
- --color-base--hover: @text;
- --color-emphasized: @text;
- --color-subtle: @subtext0;
- --color-inverted: @crust;
- --color-inverted-fixed: @crust;
- --color-progressive: @accent;
- --color-progressive--hover: darken(@accent, 5%);
- --color-progressive--active: darken(@accent, 5%);
- --color-progressive--focus: darken(@accent, 5%);
- --color-destructive: @red;
- --color-destructive--hover: @maroon;
- --color-destructive--active: @maroon;
- --color-visited: @lavender;
- --color-destructive--visited: #b97876;
- --color-error: @red;
- --color-warning: @yellow;
- --color-success: @green;
- --color-notice: @text;
- --color-icon-error: @red;
- --color-icon-warning: @yellow;
- --color-icon-success: @green;
- --color-icon-notice: @subtext0;
- --color-content-added: @green;
- --color-content-removed: @maroon;
- --color-placeholder: @subtext0;
- --color-disabled: @overlay2;
- --box-shadow-color-base: #fff;
- --box-shadow-color-inverted: #000;
- --box-shadow-color-progressive--focus: @accent;
- --background-color-interactive: @surface0;
- --background-color-interactive-subtle: @surface0;
- --background-color-interactive-subtle--hover: @surface1;
- --background-color-disabled: @overlay2;
- --background-color-disabled-subtle: @surface0;
- --background-color-progressive: @accent;
- --background-color-progressive-subtle: fade(@accent, 10%);
- --background-color-destructive-subtle: #421211;
- --background-color-progressive--active: fade(@accent, 70%);
- --background-color-progressive--hover: fade(@accent, 70%);
- --background-color-progressive--focus: fade(@accent, 70%);
- --background-color-error: @red;
- --background-color-error--hover: @maroon;
- --background-color-error--active: @maroon;
- --background-color-error-subtle: fade(@red, 20%);
- --background-color-warning-subtle: fade(@yellow, 20%);
- --background-color-success-subtle: fade(@green, 20%);
- --background-color-notice-subtle: @surface0;
- --background-color-content-added: #2a4b8d;
- --background-color-content-removed: #a66200;
- --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
- --background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
- --background-color-base: @base;
- --background-color-neutral: @base;
- --background-color-neutral-subtle: @surface0;
- --background-color-inverted: @text;
- --background-color-input-binary--checked: @accent;
- --border-base: 1px solid @surface0;
- --border-subtle: 1px solid @surface0;
- --border-color-base: @surface0;
- --border-color-interactive: @surface2;
- --border-color-interactive--hover: @overlay0;
- --border-color-disabled: #54595d;
- --border-color-subtle: @surface1;
- --border-color-muted: @surface0;
- --border-color-inverted: #101418;
- --border-color-error: @red;
- --border-color-error--hover: @maroon;
- --border-color-warning: @yellow;
- --border-color-success: @green;
- --border-color-notice: @surface2;
- --border-color-content-added: @blue;
- --border-color-content-removed: @peach;
- --border-color-progressive: @accent;
- --border-color-progressive--active: @accent;
- --border-color-progressive--hover: @accent;
- --border-color-progressive--focus: @accent;
+ #__mediawiki.base();
/* Wiktionary */
--wikt-palette-indigo: @lavender;
@@ -205,36 +72,8 @@
--wikt-palette-grey: @subtext0;
--wikt-palette-lightergrey: fade(@subtext0, 40%);
- /* Other */
-
- .infobox {
- border-color: @surface2;
- }
-
- [style="color:white;"], [style*="color:#ffffff"] {
- color: @text !important;
- }
- .mw-collapsible-toggle-default {
- &::before, &::after {
- color: @subtext0;
- }
- }
-
- a {
- &:focus {
- outline-color: @accent;
- }
- }
-
.mw-parser-output {
- a.external {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- /* Wikipedia Home */
+ /* https://en.wikipedia.org/wiki/Main_Page */
#mp-topbanner {
background-color: @base;
border-color: @surface1;
@@ -278,7 +117,7 @@
background-color: @surface2;
}
- /* MediaWiki Home */
+ /* https://www.mediawiki.org/wiki/MediaWiki */
.mainpage_box {
border-color: @surface2;
@@ -299,7 +138,7 @@
border-color: @surface1;
}
}
- /* MediaWiki Pages */
+ /* https://www.mediawiki.org/ Pages */
.tpl-downloadmediawiki-icon {
filter: @crust-filter;
}
@@ -315,75 +154,6 @@
}
}
- /* Math equations */
- .mwe-math-element img.skin-invert {
- filter: @text-filter;
- }
-
- /* OOUI */
- .oo-ui-indicator-down {
- filter: @text-filter !important;
- }
- .oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert::before {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- /* View source */
- textarea {
- background-color: @mantle;
- color: @text;
- }
-
- /* View history */
- .flaggedrevs-color-1 {
- background-color: fade(@blue, 10%);
- }
-
- /* Language search and settings */
- .uls-search,
- .uls-filtersuggestion,
- .uls-lcd,
- #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages,
- #language-settings-dialog,
- #languagesettings-settings-panel,
- .uls-language-settings-close-block {
- background-color: @mantle;
- }
- .uls-language-block a {
- color: @accent;
- }
- .uls-search-label,
- #uls-settings-block.uls-settings-block--vector-2022
- > button.uls-add-languages-button,
- #uls-settings-block.uls-settings-block--vector-2022
- > button.uls-language-settings-button,
- #uls-settings-block.uls-settings-block--vector-2022
- > button.uls-language-settings-button:hover,
- .uls-icon-close,
- .uls-languagefilter-clear {
- filter: @text-filter;
- }
- .uls-sub-panel, .language-settings-buttons {
- border-color: @surface1;
- }
- .uls-language-block > ul > li:hover {
- background-color: @surface0;
- }
- .languagesettings-menu .menu-section.active {
- background-color: @surface1;
- }
-
- /* Page preview */
- .mwe-popups .mwe-popups-extract[dir="ltr"]::after {
- background-image: linear-gradient(to right, transparent, @base 50%);
- }
- .mwe-popups .mwe-popups-extract[dir="rtl"]::after {
- background-image: linear-gradient(to left, transparent, @base 50%);
- }
-
/* Icons */
img[alt="Edit this on Wikidata"],
@@ -482,202 +252,14 @@
content: url("data:image/svg+xml,@{svg}");
}
}
-
- .vector-page-titlebar
- .mw-portlet-lang
- .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}") !important;
- filter: none;
- }
-
- .vector-icon {
- filter: none !important;
-
- &.mw-ui-icon-wikimedia-menu {
- @svg: escape(
- ''
- );
- content: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-ellipsis {
- @svg: escape(
- ''
- );
- content: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-appearance {
- @svg: escape(
- ''
- );
- content: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-expand {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}") !important;
- }
-
- &.mw-ui-icon-wikimedia-language-progressive {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}") !important;
- }
-
- &.mw-ui-icon-wikimedia-language {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}") !important;
- }
-
- &.mw-ui-icon-wikimedia-listBullet {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}") !important;
- }
-
- &.mw-ui-icon-wikimedia-fullScreen {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-userAvatar {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-watchlist {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-tray {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-bell {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-star {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-userTalk {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-sandbox {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-settings {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-unStar {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-labFlask {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-userContributions {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-logOut {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-search {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-edit {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-history {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-speechBubbles {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- &.mw-ui-icon-wikimedia-editLock {
- @svg: escape(
- ''
- );
- background-image: url("data:image/svg+xml,@{svg}");
- }
- }
}
/* Root */
:root:has(.central-featured) {
#catppuccin(@lightFlavor);
- &, body {
+ &,
+ body {
color: @text;
background-color: @base;