From 344f63150e513fef46083536b41dcb096bbd8d9c Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 31 Aug 2025 15:12:26 -0500 Subject: [PATCH 01/10] feat(lib): add mediawiki lib module --- lib/mediawiki.less | 511 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 511 insertions(+) create mode 100644 lib/mediawiki.less diff --git a/lib/mediawiki.less b/lib/mediawiki.less new file mode 100644 index 0000000000..5b81f06263 --- /dev/null +++ b/lib/mediawiki.less @@ -0,0 +1,511 @@ +#__mediawiki_reset() { + 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() { + --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; + + /* 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 */ + #mp-topbanner { + background-color: @base; + border-color: @surface1; + } + #mp-left { + background-color: fade(@green, 20%); + border-color: @green; + + .mp-h2 { + background-color: fade(@green, 40%); + border-color: fade(@green, 40%); + } + } + #mp-right { + background-color: fade(@blue, 20%); + border-color: @blue; + + .mp-h2 { + background-color: fade(@blue, 40%); + border-color: fade(@blue, 40%); + } + } + #mp-lower { + background-color: fade(@lavender, 20%); + border-color: @lavender; + + .mp-h2 { + background-color: fade(@lavender, 40%); + border-color: fade(@lavender, 40%); + } + } + #mp-bottom { + border-color: @overlay0; + + .mp-h2 { + background-color: fade(@accent, 40%); + border-color: fade(@accent, 40%); + } + } + .wikipedia-languages-prettybars { + background-color: @surface2; + } + + /* MediaWiki Home */ + .mainpage_box { + border-color: @surface2; + + .header_icon { + filter: @text-filter; + } + + .items { + border-top-color: @surface1; + } + } + .nmbox { + background-color: @surface0; + border-color: @surface2; + + .nmbox-header { + background-color: @base; + border-color: @surface1; + } + } + /* MediaWiki Pages */ + .tpl-downloadmediawiki-icon { + filter: @crust-filter; + } + .note-info { + filter: @blue-filter; + color: @text; + background-color: fade(@blue, 20%); + } + .note-warn { + filter: @yellow-filter; + color: @text; + background-color: fade(@yellow, 20%); + } + } + + /* 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 */ + + .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}"); + } + } +} From 65bba2d500dd7222916dddaa51c4c435345cbfb8 Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 7 Sep 2025 18:01:16 -0500 Subject: [PATCH 02/10] fix(lib/mediawiki): remove site specific styling --- lib/mediawiki.less | 80 ---------------------------------------------- 1 file changed, 80 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index 5b81f06263..81536de378 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -167,86 +167,6 @@ ); background-image: url("data:image/svg+xml,@{svg}"); } - - /* Wikipedia Home */ - #mp-topbanner { - background-color: @base; - border-color: @surface1; - } - #mp-left { - background-color: fade(@green, 20%); - border-color: @green; - - .mp-h2 { - background-color: fade(@green, 40%); - border-color: fade(@green, 40%); - } - } - #mp-right { - background-color: fade(@blue, 20%); - border-color: @blue; - - .mp-h2 { - background-color: fade(@blue, 40%); - border-color: fade(@blue, 40%); - } - } - #mp-lower { - background-color: fade(@lavender, 20%); - border-color: @lavender; - - .mp-h2 { - background-color: fade(@lavender, 40%); - border-color: fade(@lavender, 40%); - } - } - #mp-bottom { - border-color: @overlay0; - - .mp-h2 { - background-color: fade(@accent, 40%); - border-color: fade(@accent, 40%); - } - } - .wikipedia-languages-prettybars { - background-color: @surface2; - } - - /* MediaWiki Home */ - .mainpage_box { - border-color: @surface2; - - .header_icon { - filter: @text-filter; - } - - .items { - border-top-color: @surface1; - } - } - .nmbox { - background-color: @surface0; - border-color: @surface2; - - .nmbox-header { - background-color: @base; - border-color: @surface1; - } - } - /* MediaWiki Pages */ - .tpl-downloadmediawiki-icon { - filter: @crust-filter; - } - .note-info { - filter: @blue-filter; - color: @text; - background-color: fade(@blue, 20%); - } - .note-warn { - filter: @yellow-filter; - color: @text; - background-color: fade(@yellow, 20%); - } } /* Math equations */ From e428514e0315a9a81f4bbc2442f373c5b2bc920b Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 7 Sep 2025 18:09:51 -0500 Subject: [PATCH 03/10] refactor(lib/mediawiki)!: nest utilities under namespace --- lib/mediawiki.less | 770 +++++++++++++++++++++++---------------------- 1 file changed, 386 insertions(+), 384 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index 81536de378..402da83a06 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -1,431 +1,433 @@ -#__mediawiki_reset() { - 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 { + .reset() { + 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() { - --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; - - /* Other */ - - .infobox { - border-color: @surface2; - } + /* MediaWiki only applies the following overrides on dark and automatic appearance settings, leaving broken elements with the light appearance. */ - [style="color:white;"], [style*="color:#ffffff"] { - color: @text !important; - } - .mw-collapsible-toggle-default { - &::before, &::after { - color: @subtext0; + .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; } - } - - a { - &:focus { - outline-color: @accent; + .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; } - } - - .mw-parser-output { - a.external { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .ns-100 .mw-parser-output :not(.notheme, a) { + background: inherit !important; + color: inherit !important; + border-color: var(--border-color-subtle) !important; } } - /* 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 */ - - .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}"); + .base() { + --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; + + /* Other */ + + .infobox { + border-color: @surface2; } - &.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; + [style="color:white;"], [style*="color:#ffffff"] { + color: @text !important; } - - &.mw-ui-icon-wikimedia-listBullet { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; + .mw-collapsible-toggle-default { + &::before, &::after { + color: @subtext0; + } } - &.mw-ui-icon-wikimedia-fullScreen { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + a { + &:focus { + outline-color: @accent; + } } - &.mw-ui-icon-wikimedia-userAvatar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .mw-parser-output { + a.external { + @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}"); + /* Math equations */ + .mwe-math-element img.skin-invert { + filter: @text-filter; } - &.mw-ui-icon-wikimedia-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + /* OOUI */ + .oo-ui-indicator-down { + filter: @text-filter !important; } - - &.mw-ui-icon-wikimedia-bell { + .oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert::before { @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}"); + /* View source */ + textarea { + background-color: @mantle; + color: @text; } - &.mw-ui-icon-wikimedia-userTalk { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + /* View history */ + .flaggedrevs-color-1 { + background-color: fade(@blue, 10%); } - &.mw-ui-icon-wikimedia-sandbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + /* 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; } - - &.mw-ui-icon-wikimedia-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .uls-language-block a { + color: @accent; } - - &.mw-ui-icon-wikimedia-unStar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .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; } - - &.mw-ui-icon-wikimedia-labFlask { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .uls-sub-panel, .language-settings-buttons { + border-color: @surface1; } - - &.mw-ui-icon-wikimedia-userContributions { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .uls-language-block > ul > li:hover { + background-color: @surface0; } - - &.mw-ui-icon-wikimedia-logOut { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .languagesettings-menu .menu-section.active { + background-color: @surface1; } - &.mw-ui-icon-wikimedia-search { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + /* Page preview */ + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { + background-image: linear-gradient(to right, transparent, @base 50%); } - - &.mw-ui-icon-wikimedia-edit { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .mwe-popups .mwe-popups-extract[dir="rtl"]::after { + background-image: linear-gradient(to left, transparent, @base 50%); } - &.mw-ui-icon-wikimedia-history { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } + /* Icons */ - &.mw-ui-icon-wikimedia-speechBubbles { + .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}"); + background-image: url("data:image/svg+xml,@{svg}") !important; + filter: none; } - &.mw-ui-icon-wikimedia-editLock { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .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}"); + } } } } From 95bf89fb23253e8243969985ca0f40c21262fbb5 Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 7 Sep 2025 20:34:19 -0500 Subject: [PATCH 04/10] fix(lib/mediawiki): adjust border colors slightly --- lib/mediawiki.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index 402da83a06..fe42cf5108 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -125,8 +125,8 @@ --border-color-interactive: @surface2; --border-color-interactive--hover: @overlay0; --border-color-disabled: #54595d; - --border-color-subtle: @surface1; - --border-color-muted: @surface0; + --border-color-subtle: @surface2; + --border-color-muted: @surface1; --border-color-inverted: #101418; --border-color-error: @red; --border-color-error--hover: @maroon; From 77a5092b2399f0cf0965afc4fd020cbb8a89432f Mon Sep 17 00:00:00 2001 From: uncenter Date: Mon, 8 Sep 2025 12:04:38 -0500 Subject: [PATCH 05/10] fix(lib/mediawiki): adjust borders further --- lib/mediawiki.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index fe42cf5108..c2a6d4d63c 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -119,15 +119,15 @@ --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-base: 1px solid var(--border-color-base); + --border-subtle: 1px solid var(--border-color-subtle); + --border-color-base: @overlay0; + --border-color-interactive: @overlay1; + --border-color-interactive--hover: @overlay2; + --border-color-disabled: @surface0; --border-color-subtle: @surface2; --border-color-muted: @surface1; - --border-color-inverted: #101418; + --border-color-inverted: red; --border-color-error: @red; --border-color-error--hover: @maroon; --border-color-warning: @yellow; From eed36f328c7860e183a3a78da9ea9110d5b1fa65 Mon Sep 17 00:00:00 2001 From: WalkQuackBack Date: Thu, 8 Jan 2026 15:53:17 -0700 Subject: [PATCH 06/10] feat(lib/mediawiki): use codex style guide (#1962) * feat(lib/mediawiki): use codex style guide to base colour choices * chore(lib/mediawiki): comment nits * fix(lib/mediawiki): change button quiet hover colours to fade accent * fix(mediawiki): remove redundant transparent variables * fix(lib/mediawiki): change tab list framed state colours to latte fade --------- Co-authored-by: uncenter --- lib/mediawiki.less | 163 ++++++++++++++++++++++++++++++++------------- 1 file changed, 116 insertions(+), 47 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index c2a6d4d63c..8ef05783ae 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -66,79 +66,148 @@ --color-base--hover: @text; --color-emphasized: @text; --color-subtle: @subtext0; - --color-inverted: @crust; - --color-inverted-fixed: @crust; + + --color-inverted: @base; + // Locked to base as it is often used on accent, + // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. + --color-inverted-fixed: @base; + --color-progressive: @accent; - --color-progressive--hover: darken(@accent, 5%); - --color-progressive--active: darken(@accent, 5%); - --color-progressive--focus: darken(@accent, 5%); + --color-progressive--hover: lighten(@accent, 5%); + --color-progressive--active: darken(@accent, 10%); + --color-progressive--focus: darken(@accent, 10%); + --color-destructive: @red; --color-destructive--hover: @maroon; - --color-destructive--active: @maroon; + --color-destructive--active: darken(@red, 4%); + --color-destructive--visited: spin(@red, 15); + --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; + + --box-shadow-color-base: @overlay0; + --box-shadow-color-progressive--active: fade(@accent, 10%); + --box-shadow-color-progressive--focus: fade(@accent, 50%); + --box-shadow-color-progressive-selected: fade(@accent, 60%); + --box-shadow-color-progressive-selected--hover: fade(@accent, 70%); + --box-shadow-color-progressive-selected--active: fade(@accent, 80%); + --box-shadow-color-destructive--focus: fade(@accent, 50%); + --box-shadow-color-inverted: @base; + --box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.87 ); + --box-shadow-color-transparent: transparent; + + // Background colors for static elements (for page layout, sections, etc.) from here on. + --background-color-base: @base; + // The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. + --background-color-base-fixed: @catppuccin[@latte][@base]; + --background-color-neutral: @surface0; + --background-color-neutral-subtle: mix(@surface0, @base, 50%); --background-color-interactive: @surface0; - --background-color-interactive-subtle: @surface0; - --background-color-interactive-subtle--hover: @surface1; - --background-color-disabled: @overlay2; + --background-color-interactive--hover: @surface1; + --background-color-interactive--active: @surface2; + --background-color-interactive-subtle: mix(@surface0, @base, 50%); + --background-color-interactive-subtle--hover: @surface0; + --background-color-interactive-subtle--active: @surface1; + --background-color-disabled: @surface1; --background-color-disabled-subtle: @surface0; + --background-color-inverted: @text; + --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-progressive--hover: darken(@accent, 5%); + --background-color-progressive--active: darken(@accent, 10%); + --background-color-progressive--focus: lighten(@accent, 10%); + --background-color-progressive-subtle: mix(@accent, @base, 30%); + --background-color-progressive-subtle--hover: lighten(mix(@accent, @base, 30%), 5%); + --background-color-progressive-subtle--active: lighten(mix(@accent, @base, 30%), 10%); + + --background-color-destructive: @red; + --background-color-destructive--hover: darken(@red, 5%); + --background-color-destructive--active: darken(@red, 10%); + --background-color-destructive--focus: lighten(@accent, 10%); + --background-color-destructive-subtle: mix(@red, @base, 30%); + --background-color-destructive-subtle--hover: lighten(mix(@red, @base, 30%), 5%); + --background-color-destructive-subtle--active: lighten(mix(@red, @base, 30%), 10%); + --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-error--hover: darken(@red, 5%); + --background-color-error--active: darken(@red, 10%); + --background-color-error-subtle: mix(@red, @base, 30%); + --background-color-error-subtle--hover: lighten(mix(@red, @base, 30%), 5%); + --background-color-error-subtle--active: lighten(mix(@red, @base, 30%), 10%); + + --background-color-warning-subtle: mix(@yellow, @base, 30%); + --background-color-success-subtle: mix(@green, @base, 30%); + --background-color-notice-subtle: mix(@text, @base, 30%); + + --background-color-content-added: mix(@blue, @base, 30%); + --background-color-content-removed: mix(@yellow, @base, 30%); + + --background-color-backdrop-light: fade(@base, 65%); + --background-color-backdrop-dark: fade(@text, 65%); + + --background-color-button-quiet--hover: fade(@accent, 2.7%); + --background-color-button-quiet--active: fade(@accent, 8.2%); + --background-color-input-binary--checked: @accent; + + --background-color-tab-list-item-framed--hover: fade(@catppuccin[@latte][@base], 30%); + --background-color-tab-list-item-framed--active: fade(@catppuccin[@latte][@base], 65%); + --border-base: 1px solid var(--border-color-base); --border-subtle: 1px solid var(--border-color-subtle); + --border-color-base: @overlay0; - --border-color-interactive: @overlay1; - --border-color-interactive--hover: @overlay2; - --border-color-disabled: @surface0; + --border-color-emphasized: @text; --border-color-subtle: @surface2; --border-color-muted: @surface1; - --border-color-inverted: red; - --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; + --border-color-interactive: @overlay0; + --border-color-interactive--hover: @overlay1; + --border-color-interactive--active: @overlay2; + --border-color-disabled: @overlay0; + --border-color-inverted: @base; + // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. + --border-color-inverted-fixed: @catppuccin[@latte][@base]; + + --border-color-progressive: var(--color-progressive); + --border-color-progressive--hover: var(--color-progressive--hover); + --border-color-progressive--active: var(--color-progressive--active); + --border-color-progressive--focus: var(--color-progressive--focus); + --border-color-destructive: var(--color-destructive); + --border-color-destructive--hover: var(--color-destructive--hover); + --border-color-destructive--active: var(--color-destructive--active); + --border-color-destructive--focus: var(--color-destructive--focus); + --border-color-error: var(--color-error); + --border-color-error--hover: var(--color-error--hover); + --border-color-error--active: var(--color-error--active); + --border-color-warning: var(--color-warning); + --border-color-warning--hover: var(--color-warning--hover); + --border-color-warning--active: var(--color-warning--active); + --border-color-success: var(--color-success); + --border-color-notice: var(--color-notice); + --border-color-content-added: var(--color-content-added); + --border-color-content-removed: var(--color-content-removed); + + --border-color-divider: @overlay1; + --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); /* Other */ From 470d1d4894f0208223d85e73cc954e6964e91527 Mon Sep 17 00:00:00 2001 From: uncenter Date: Fri, 9 Jan 2026 11:50:49 -0500 Subject: [PATCH 07/10] feat(lib/mediawiki): radio inputs --- lib/mediawiki.less | 60 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/lib/mediawiki.less b/lib/mediawiki.less index 8ef05783ae..51dac9c797 100644 --- a/lib/mediawiki.less +++ b/lib/mediawiki.less @@ -66,24 +66,24 @@ --color-base--hover: @text; --color-emphasized: @text; --color-subtle: @subtext0; - + --color-inverted: @base; // Locked to base as it is often used on accent, // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. --color-inverted-fixed: @base; - + --color-progressive: @accent; --color-progressive--hover: lighten(@accent, 5%); --color-progressive--active: darken(@accent, 10%); --color-progressive--focus: darken(@accent, 10%); - + --color-destructive: @red; --color-destructive--hover: @maroon; --color-destructive--active: darken(@red, 4%); --color-destructive--visited: spin(@red, 15); - + --color-visited: @lavender; - + --color-error: @red; --color-warning: @yellow; --color-success: @green; @@ -107,7 +107,7 @@ --box-shadow-color-progressive-selected--active: fade(@accent, 80%); --box-shadow-color-destructive--focus: fade(@accent, 50%); --box-shadow-color-inverted: @base; - --box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.87 ); + --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87); --box-shadow-color-transparent: transparent; // Background colors for static elements (for page layout, sections, etc.) from here on. @@ -131,23 +131,38 @@ --background-color-progressive--active: darken(@accent, 10%); --background-color-progressive--focus: lighten(@accent, 10%); --background-color-progressive-subtle: mix(@accent, @base, 30%); - --background-color-progressive-subtle--hover: lighten(mix(@accent, @base, 30%), 5%); - --background-color-progressive-subtle--active: lighten(mix(@accent, @base, 30%), 10%); + --background-color-progressive-subtle--hover: lighten( + mix(@accent, @base, 30%), + 5% + ); + --background-color-progressive-subtle--active: lighten( + mix(@accent, @base, 30%), + 10% + ); --background-color-destructive: @red; --background-color-destructive--hover: darken(@red, 5%); --background-color-destructive--active: darken(@red, 10%); --background-color-destructive--focus: lighten(@accent, 10%); --background-color-destructive-subtle: mix(@red, @base, 30%); - --background-color-destructive-subtle--hover: lighten(mix(@red, @base, 30%), 5%); - --background-color-destructive-subtle--active: lighten(mix(@red, @base, 30%), 10%); + --background-color-destructive-subtle--hover: lighten( + mix(@red, @base, 30%), + 5% + ); + --background-color-destructive-subtle--active: lighten( + mix(@red, @base, 30%), + 10% + ); --background-color-error: @red; --background-color-error--hover: darken(@red, 5%); --background-color-error--active: darken(@red, 10%); --background-color-error-subtle: mix(@red, @base, 30%); --background-color-error-subtle--hover: lighten(mix(@red, @base, 30%), 5%); - --background-color-error-subtle--active: lighten(mix(@red, @base, 30%), 10%); + --background-color-error-subtle--active: lighten( + mix(@red, @base, 30%), + 10% + ); --background-color-warning-subtle: mix(@yellow, @base, 30%); --background-color-success-subtle: mix(@green, @base, 30%); @@ -164,8 +179,14 @@ --background-color-input-binary--checked: @accent; - --background-color-tab-list-item-framed--hover: fade(@catppuccin[@latte][@base], 30%); - --background-color-tab-list-item-framed--active: fade(@catppuccin[@latte][@base], 65%); + --background-color-tab-list-item-framed--hover: fade( + @catppuccin[@latte][@base], + 30% + ); + --background-color-tab-list-item-framed--active: fade( + @catppuccin[@latte][@base], + 65% + ); --border-base: 1px solid var(--border-color-base); --border-subtle: 1px solid var(--border-color-subtle); @@ -205,7 +226,9 @@ --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--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); @@ -255,6 +278,15 @@ background-image: url("data:image/svg+xml,@{svg}"); } + .oo-ui-radioInputWidget [type="radio"] + span { + background-color: @text; + } + + .cdx-radio__input:enabled:checked + .cdx-radio__icon, + .oo-ui-radioInputWidget [type="radio"]:checked + span { + background-color: @base; + } + /* View source */ textarea { background-color: @mantle; From 5ca9995f87f2ec59f50f8fa28f8efb4cb5aaa6f4 Mon Sep 17 00:00:00 2001 From: uncenter Date: Thu, 20 Aug 2026 14:53:16 -0400 Subject: [PATCH 08/10] refactor(lib/mediawiki): move to versioned path --- lib/{mediawiki.less => mediawiki/v1.less} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename lib/{mediawiki.less => mediawiki/v1.less} (100%) diff --git a/lib/mediawiki.less b/lib/mediawiki/v1.less similarity index 100% rename from lib/mediawiki.less rename to lib/mediawiki/v1.less From 94ccaae978b7b16dab02951fa71169e507e4659d Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 31 Aug 2025 15:14:15 -0500 Subject: [PATCH 09/10] refactor(wikipedia): use mediawiki library module --- styles/wikipedia/catppuccin.user.less | 428 +------------------------- 1 file changed, 5 insertions(+), 423 deletions(-) diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less index 6e4aa51004..ddadb8310c 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,35 +72,7 @@ --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 */ #mp-topbanner { background-color: @base; @@ -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; From 9376d116641a5c2a6646046f206d27fdf803c09a Mon Sep 17 00:00:00 2001 From: uncenter Date: Sun, 7 Sep 2025 18:04:57 -0500 Subject: [PATCH 10/10] chore(wikipedia): clarify comments --- styles/wikipedia/catppuccin.user.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less index ddadb8310c..32cbd71079 100644 --- a/styles/wikipedia/catppuccin.user.less +++ b/styles/wikipedia/catppuccin.user.less @@ -73,7 +73,7 @@ --wikt-palette-lightergrey: fade(@subtext0, 40%); .mw-parser-output { - /* Wikipedia Home */ + /* https://en.wikipedia.org/wiki/Main_Page */ #mp-topbanner { background-color: @base; border-color: @surface1; @@ -117,7 +117,7 @@ background-color: @surface2; } - /* MediaWiki Home */ + /* https://www.mediawiki.org/wiki/MediaWiki */ .mainpage_box { border-color: @surface2; @@ -138,7 +138,7 @@ border-color: @surface1; } } - /* MediaWiki Pages */ + /* https://www.mediawiki.org/ Pages */ .tpl-downloadmediawiki-icon { filter: @crust-filter; }