From 4607712d525a60b85f195f61e6c462d69048bd3b Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Wed, 1 Jan 2025 14:55:40 -0500 Subject: [PATCH] refactor(wikipedia): rewrite (#1075) --- styles/wikipedia/catppuccin.user.less | 1989 +++++++------------------ 1 file changed, 531 insertions(+), 1458 deletions(-) diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less index 83d4cb158f..c4c799d3e4 100644 --- a/styles/wikipedia/catppuccin.user.less +++ b/styles/wikipedia/catppuccin.user.less @@ -16,10 +16,14 @@ @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ -@-moz-document domain("wikipedia.org") { +@-moz-document domain("wikipedia.org"), + domain("wiktionary.org"), + domain("www.mediawiki.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - :root { + :root.skin-theme-clientpref-os, + .skin-invert, + .notheme { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -28,6 +32,28 @@ } } + :root.skin-theme-clientpref-night { + #catppuccin(@darkFlavor); + } + + :root.skin-theme-clientpref-day { + #catppuccin(@lightFlavor); + } + + html.skin-theme-clientpref-os .skin-invert-image img, + html.skin-theme-clientpref-os .skin-invert, + html.skin-theme-clientpref-os + .oo-ui-iconElement-icon:not( + .oo-ui-image-progressive, + .oo-ui-image-destructive, + .oo-ui-checkboxInputWidget-checkIcon, + .oo-ui-image-invert, + .mw-no-invert + ), + html.skin-theme-clientpref-os .oo-ui-indicatorElement-indicator { + filter: none; + } + #catppuccin(@flavor) { @rosewater: @catppuccin[@@flavor][@rosewater]; @flamingo: @catppuccin[@@flavor][@flamingo]; @@ -57,18 +83,11 @@ @crust: @catppuccin[@@flavor][@crust]; @accent: @catppuccin[@@flavor][@@accentColor]; - color-scheme: if(@flavor = latte, light, dark); - - ::selection { - background-color: fade(@accent, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; --ctp-rosewater: @rosewater; --ctp-flamingo: @flamingo; @@ -97,1551 +116,597 @@ --ctp-mantle: @mantle; --ctp-crust: @crust; - --background-color-base: @base; + color-scheme: if(@flavor = latte, light, dark); - body, - .vector-feature-zebra-design-enabled .vector-header-container .mw-header, - .vector-feature-zebra-design-enabled .mw-page-container, - .vector-feature-zebra-design-enabled .vector-pinned-container, - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-content, - .uls-lcd, - .uls-search, - .uls-filtersuggestion, - #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, - .app-badges .footer-sidebar-content, - .pure-form input[type="search"], - .suggestions-dropdown, - .cdx-menu, - .vector-header-container .mw-header, - .mw-page-container, - .vector-pinned-container, - .vector-header-container .vector-sticky-header, - .mw-mmv-image, - .mw-body, - .frb-form-wrapper, - .mw-echo-ui-placeholderItemWidget, - .oo-ui-popupWidget-popup, - .mw-echo-ui-notificationItemWidget, - .oo-ui-optionWidget-selected { - background-color: @base; + ::selection { + background-color: fade(@accent, 30%); } - body, - .mw-heading, - h1, - h2, - h3, - h4, - h5, - h6, - .vector-feature-zebra-design-enabled body, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .vector-menu-tabs .mw-list-item.selected a, - .vector-menu-tabs .mw-list-item.selected a:visited, - .cdx-button:enabled, - .cdx-button.cdx-button--fake-button--enabled, - .mw-footer li, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link, - .central-featured-lang small, - .footer-sidebar-text, - .other-project-tagline, - .site-license, - .search-container .js-langpicker-label, - .langlist > ul > li, - .suggestion-title, - .cdx-menu-item--enabled .cdx-menu-item__content, - .mwe-popups .mwe-popups-extract, - .mw-body-content .mw-number-text h3, - .vector-pinnable-element .vector-menu-heading, - .vector-toc .vector-toc-list-item-active > .vector-toc-link, - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .uls-empty-state .uls-empty-state__header, - .uls-empty-state .uls-empty-state__desc, - .uls-no-results-found-title, - .mw-mmv-post-image, - .mw-mmv-credit, - .frb-form-wrapper, - .mw-echo-ui-notificationItemWidget-content-message-header, - .oo-ui-labelElement, - .reference-text, - #contentSub:not(:empty) { - color: @text !important; + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } } - .mw-parser-output .fmbox { - border-color: @surface2 !important; - background-color: @base !important; + --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-base-fixed: @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: #404244; + --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; + + /* Wiktionary */ + --wikt-palette-indigo: @lavender; + --wikt-palette-lightindigo: fade(@lavender, 40%); + --wikt-palette-lighterblue: fade(@blue, 20%); + --wikt-palette-dulllightblue: fade(@blue, 40%); + --wikt-palette-grey: @subtext0; + --wikt-palette-lightergrey: fade(@subtext0, 40%); + + /* Other */ + + .infobox { + border-color: @surface2; } - .cdx-thumbnail__image { - border-color: @text; + [style="color:white;"], [style*="color:#ffffff"] { + color: @text !important; } - - /* maths */ - .equation-box, - .equation-box * { - background: none !important; + .mw-collapsible-toggle-default { + &::before, &::after { + color: @subtext0; + } } - img.mwe-math-fallback-image-display, - img.mwe-math-fallback-image-inline { - & when (@flavor = latte) { - filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate( - 1499% - ) hue-rotate(196deg) brightness(90%) contrast(85%); + + a { + color: @accent; + + &:focus { + outline-color: @accent; } + } - & when (@flavor = frappe) { - filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate( - 3753% - ) hue-rotate(184deg) brightness(93%) contrast(106%); + .mw-parser-output { + a.external { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); } - & when (@flavor = macchiato) { - filter: brightness(0) saturate(100%) invert(82%) sepia(7%) saturate( - 1042% - ) hue-rotate(193deg) brightness(103%) contrast(92%); + /* Wikipedia Home */ + #mp-topbanner { + background-color: @base; + border-color: @surface1; } + #mp-left { + background-color: fade(@green, 20%); + border-color: @green; - & when (@flavor = mocha) { - filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate( - 223% - ) hue-rotate(190deg) brightness(99%) contrast(93%); + .mp-h2 { + background-color: fade(@green, 40%); + border-color: fade(@green, 40%); + } } - } + #mp-right { + background-color: fade(@blue, 20%); + border-color: @blue; - .mwe-popups .mwe-popups-extract[dir="ltr"]::after { - background-image: linear-gradient( - to right, - rgba(255, 255, 255, 0), - @surface0 50% - ); - } - table { - background: @surface2 !important; - } + .mp-h2 { + background-color: fade(@blue, 40%); + border-color: fade(@blue, 40%); + } + } + #mp-lower { + background-color: fade(@lavender, 20%); + border-color: @lavender; - tr { - background-color: @surface0 !important; - } + .mp-h2 { + background-color: fade(@lavender, 40%); + border-color: fade(@lavender, 40%); + } + } + #mp-bottom .mp-h2 { + background-color: fade(@accent, 40%); + border-color: fade(@accent, 40%); + } + .wikipedia-languages-prettybars { + background-color: @surface2; + } - th { - background: @overlay0 !important; - color: @mantle !important; - } + /* MediaWiki Home */ + .mainpage_box { + border-color: @surface2; - .quotebox, - div.thumbinner { - background-color: @surface0 !important; - border-color: @surface2 !important; - } + .header_icon { + filter: @text-filter; + } - .navbox-group, - .infobox-label { - color: @text !important; - } + .items { + border-top-color: @surface1; + } + } + .nmbox { + background-color: @surface0; + border-color: @surface2; - .cdx-button:enabled, - .cdx-text-input__input:enabled { - color: @text; - background-color: @base; - border-color: @surface2; - &:hover { - background-color: @mantle; - border-color: @text; + .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%); } } - .vector-dropdown .vector-dropdown-content, - .header-container.header-chrome { - background-color: @mantle; - } - - .skin-vector .uls-search { - border-bottom-color: @surface2; - } - - .oo-ui-textInputWidget, - .oo-ui-inputWidget-input { - color: @text !important; - background-color: @surface1 !important; - border-color: @surface2 !important; - } - - .oo-ui-pendingElement-pending { - background-color: @base; - background-image: linear-gradient( - 135deg, - @surface0 25%, - transparent 25%, - transparent 50%, - @surface0 50%, - @surface0 75%, - transparent 75%, - transparent - ); + /* OOUI */ + .oo-ui-iconElement-icon, + .oo-ui-indicator-down { + filter: @text-filter !important; } - .oo-ui-tagItemWidget.oo-ui-widget-disabled { + /* View source */ + textarea { + background-color: @mantle; color: @text; - background-color: @overlay0; - text-shadow: 0 0 0 @text; - border-color: @surface0; } - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-credit, - .mw-mmv-options-dialog-header, - .mw-mmv-options-text-header { - color: @text; + /* View history */ + .flaggedrevs-color-1 { + background-color: fade(@blue, 10%); } - .mw-mmv-options-text-body { - color: @subtext0; + /* 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-input:not(:disabled) { - background-color: @surface0; - color: @text; - border-color: @surface2; + .uls-language-block a { + color: @accent; } - - .mw-ui-button { - color: @mantle; - background-color: @accent; - border-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; } - - .imbox-delete { - border-color: @red !important; - background-color: @surface0 !important; + .uls-language-block > ul > li:hover { + background-color: @surface0; } - - .imbox { - background-color: @overlay0 !important; - border-color: @peach !important; + .languagesettings-menu .menu-section.active { + background-color: @surface1; } - .talkheader-help { - background-color: @surface1 !important; - border-color: @green !important; - } + /* Icons */ - .assess, - .assess-NA, - .navbox-subgroup { - background: @surface0 !important; - border-color: @surface1 !important; + img[alt="Edit this on Wikidata"], + img[alt="Edit this at Wikidata"] { + filter: @accent-filter; } - .documentation, - .documentation-container, - .documentation-metadata { - background-color: fade(@green, 15%) !important; + .mw-logo-wordmark { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); } - .ambox, - .portalborder { - background-color: @surface1 !important; - border-color: @surface2 !important; + .mw-logo-tagline { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); } - .navbox-title { - color: @text !important; + .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; } - .mw-highlight pre { - background: @surface0 !important; - border-width: 0; - color: @text; - } + .vector-icon { + filter: none !important; - .mw-content-ltr.mw-highlight-lines pre, - .mw-content-ltr.content .mw-highlight-lines pre { - box-shadow: inset 2.75em 0 0 @surface1; - } + &.mw-ui-icon-wikimedia-menu { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } - .mw-redirect when (@highlight-redirect = 1) { - color: @green !important; - } + &.mw-ui-icon-wikimedia-ellipsis { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } - .mbox-text { - color: @text !important; - } + &.mw-ui-icon-wikimedia-appearance { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } - .sidebar-above, - .p, - .o { - color: @text !important; - } - .ni, - .mw-templatedata-doc-muted { - color: @subtext1 !important; - } - .nv, - .nn { - color: @blue !important; - } + &.mw-ui-icon-wikimedia-expand { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } - .sidebar-above a span { - color: @text !important; - } + &.mw-ui-icon-wikimedia-language-progressive { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } - .sidebar-title-with-pretitle span { - color: @text !important; - } + &.mw-ui-icon-wikimedia-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } - .nt { - color: @green !important; - } + &.mw-ui-icon-wikimedia-listBullet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } - .nl { - color: @teal !important; - } + &.mw-ui-icon-wikimedia-fullScreen { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .ambox-style { - border-left-color: @yellow !important; - } + &.mw-ui-icon-wikimedia-userAvatar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-parser-output .mainpage-frame { - background: @surface0 !important; - border-color: @surface0 !important; - } + &.mw-ui-icon-wikimedia-watchlist { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-parser-output .mainpage-heading-title { - background: linear-gradient( - to right, - rgba(saturate(lighten(@accent, 4%), -3%), 0.4), - @surface0 - ) !important; - } + &.mw-ui-icon-wikimedia-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .hidden-title { - background-color: @green !important; - color: @mantle !important; - } + &.mw-ui-icon-wikimedia-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-mmv-post-image, - .mw-mmv-options-dialog { - background-color: @base; - color: @text; - } - .mw-mmv-image-metadata { - background-color: @base; - border-color: @base; - } + &.mw-ui-icon-wikimedia-star { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-mmv-dialog-down-arrow { - background-color: @base !important; - } + &.mw-ui-icon-wikimedia-userTalk { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .oo-ui-tagItemWidget.oo-ui-widget-enabled { - color: @text; - background-color: @overlay0 !important; - border-color: @surface0; - } + &.mw-ui-icon-wikimedia-sandbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - ol.references li:target { - background-color: @surface2; - } + &.mw-ui-icon-wikimedia-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-body-content .error { - color: @red; - } + &.mw-ui-icon-wikimedia-unStar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .divbox-gray, - .infobox-above { - background-color: @surface2 !important; - border-color: @overlay0 !important; - } + &.mw-ui-icon-wikimedia-labFlask { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .biota > * > tr > th { - background-color: @yellow !important; - color: @mantle !important; - } + &.mw-ui-icon-wikimedia-userContributions { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .cmbox { - background-color: @blue !important; - } + &.mw-ui-icon-wikimedia-logOut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .wikitable { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } + &.mw-ui-icon-wikimedia-search { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .wikitable > * > tr > th { - background-color: @surface1 !important; - } + &.mw-ui-icon-wikimedia-edit { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .wikitable > * > tr > td, - .wikitable > * > tr > th { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2; - } + &.mw-ui-icon-wikimedia-history { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-searchresults-has-iw .iw-result__header a { - color: @text; - } + &.mw-ui-icon-wikimedia-speechBubbles { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - .mw-search-result-data { - color: @subtext0; + &.mw-ui-icon-wikimedia-editLock { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } } + } - .navbox-abovebelow { - background-color: @overlay2 !important; - border-color: @overlay2 !important; - } + /* Root */ + :root:has(.central-featured) { + #catppuccin(@lightFlavor); - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .vector-menu-heading { + &, body { color: @text; - border-bottom-color: @surface0; - } - - .mwe-popups .mwe-popups-container { - background-color: @surface0; - } + background-color: @base; - .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; + .svg-Wikipedia_wordmark { + filter: @text-filter; } - } - - .mw-parser-output .navbox-list { - border-color: @surface0; - } - - .pure-button-primary-progressive, - .pure-button-primary-progressive:hover { - background-color: @accent; - border-color: @accent; - } - - .suggestion-link { - border-bottom-color: @surface0; - } - .cdx-menu, - .skin-vector .uls-menu, - .suggestiodns-dropdown, - .cdx-search-input--has-end-button, - .vector-sticky-header, - .vector-sticky-header-context-bar, - .mw-heading2 { - border-color: @surface2; - } + .central-featured-lang small, + .other-project-tagline, + .site-license, + .footer-sidebar-text { + color: @subtext1; + } - .suggestion-link.active { - background-color: fade(@accent, 20%); - .suggestion-title { - color: @accent; + .central-featured-lang :hover { + background-color: @surface1; } - } - .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, - .cdx-menu-item--enabled.cdx-menu-item--highlighted { - background-color: fade(@accent, 20%); - } + .other-project-link:hover { + background-color: @surface1; + } - .mw-echo-ui-sortedListWidget, - .mw-echo-ui-sortedListWidget-group, - .mw-echo-ui-subGroupListWidget-header { - border-color: @surface2; - } + .search-container { + #searchInput { + color: @text; + background-color: @mantle; + border-color: @overlay2; + box-shadow: none; - .mw-mmv-post-image, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive - .cdx-button__icon { - background-color: @crust; - } + &:focus { + border-color: @accent; + } + } - .cdx-text-input__input:enabled::placeholder, - .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, - .skin-vector .uls-languagefilter, - .skin-vector .uls-lcd-region-title, - .suggestion-description, - .cdx-menu-item--enabled .cdx-menu-item__text__description, - .mw-number-text, - .boilerplate > div:nth-child(3) > span:nth-child(1), - .boilerplate > div:nth-child(4) > span:nth-child(2) { - color: @subtext0 !important; - } + .js-langpicker-label { + color: @subtext0; + } + .styled-select:hover { + background-color: @surface1; + } + .sprite.svg-arrow-down { + filter: @text-filter; + } - input:hover + .cdx-button.cdx-button--action-progressive { - background-color: fade(@accent, 12.5%); - } + button[type="submit"] { + background-color: @accent; + border-color: @accent; - #pt-notifications-alert .mw-echo-unseen-notifications::after { - background-color: @red !important; - } + .svg-search-icon { + filter: @crust-filter; + } + } - #pt-notifications-notice .mw-echo-unseen-notifications::after { - background-color: @blue !important; - } + .suggestions-dropdown { + background-color: @mantle; + border-color: @overlay2; - a, - .mw-parser-output a.external:visited { - color: @accent; - &:visited { - color: @mauve; - } - } + .suggestion-link { + border-bottom-color: @overlay0; - a.new, - .mw-parser-output .cs1-visible-error, - .vector-menu-tabs .mw-list-item.new a, - .mw-plusminus-neg { - color: @red; - } + &.active { + background-color: fade(@accent, 10%); + } - a.mw-selflink { - color: @text; - } + .suggestion-thumbnail { + @svg: escape( + '', + ); + background-image: url("data:image/svg+xml,@{svg}"); + } - #searchInput { - color: @text; - &:hover { - border-color: @surface2; + .suggestion-title { + color: @text; + } + } + } } - &:focus { - border-color: @accent; + + hr { + border-bottom-color: @surface1; } - } - .pure-form input[type="search"] { - border-color: @surface2; - box-shadow: inset 0 0 0 1px @surface2; - } + .lang-list-border { + background-color: @surface2; + } + .lang-list-button { + background-color: @mantle; + color: @accent; + outline-color: @mantle; + border-color: @surface2; - #pt-notifications-alert .mw-echo-notifications-badge::after, - #pt-notifications-notice .mw-echo-notifications-badge::after, - .mw-echo-notification-badge-nojs::after { - border-color: @crust; - background-color: @accent; - color: @base; - } + .svg-language-icon, + .svg-arrow-down-blue { + filter: @accent-filter; + } - h2 { - border-bottom-color: @surface2; - } + &:focus { + box-shadow: inset 0 0 0 1px @accent; + } + } + .lang-list-container { + background-color: @surface0; - .mw-footer { - border-top-color: @surface2; - } + .bookshelf { + border-top-color: @overlay1; + box-shadow: none; - .bookshelf { - border-top-color: @surface0; - box-shadow: 0 -1px 0 @surface0; + .text { + color: @text; + background-color: @surface2; + } + } + } } - - body.ns-talk .mw-parser-output .mp-toolbox, - .mw-parser-output .tmbox, - #talkheader { - border-color: fade(@yellow, 20%) !important; - background-color: fade(@yellow, 10%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily th { - border-color: fade(@yellow, 80%) !important; - background-color: fade(@yellow, 20%) !important; - } - - .fn.org { - color: @accent; - } - - .mw-parser-output .mp-toolbox-daily th, - .mw-parser-output td.mp-toolbox-tfl-not { - background: fade(@yellow, 20%) !important; - border-color: fade(@yellow, 20%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily { - border-color: fade(@yellow, 20%) !important; - background: none !important; - } - - .mw-parser-output tr + tr > .navbox-list, - .mw-parser-output tr + tr > .navbox-group { - border-top-color: @surface0; - } - - .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget - > .oo-ui-buttonElement-button:hover { - background-color: fade(@accent, 20%); - } - - .styled-select:hover { - background-color: @surface0; - } - - .lang-list-button, - .lang-list-button:hover { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .cdx-typeahead-search__search-footer__icon.cdx-icon { - color: @subtext0; - } - - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link { - color: @text !important; - } - - .lang-list-active .lang-list-button { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .lang-list-button:focus { - box-shadow: inset 0 0 0 1px @accent; - } - - .lang-list-border { - background-color: @surface1; - } - - .infobox-header, - .infobox-subheader, - .infobox-full-data { - background-color: @surface1 !important; - color: @text !important; - } - - td[style*="background-color"], - td[style*="background-color"] * { - color: @crust !important; - } - - #toc-Services > a:nth-child(1) > div:nth-child(1) { - color: @text !important; - } - - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, - .vector-menu-tabs .mw-list-item a, - .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, - .mw-parser-output a.extiw, - .mw-parser-output a.external, - .mw-collapsible-toggle-default .mw-collapsible-text, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a:not(.mw-selflink):visited, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a:not(.mw-selflink):visited, - .uls-language-block a, - .lang-list-button, - .fancycaptcha-reload, - #pt-userpage-2 a:not(.mw-selflink), - .vector-pinnable-element .mw-list-item a, - .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, - .vector-toc .vector-toc-link, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button:hover, - .vector-dropdown-content .mw-list-item a, - .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { - color: @accent; - } - - .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .mw-ui-button.mw-ui-progressive:not(:disabled), - .mw-ui-button.mw-ui-progressive:not(:disabled):hover { - background-color: @accent; - border-color: @accent; - color: @base; - } - - .mw-message-box-warning, - .boilerplate { - border-color: @accent !important; - background-color: fade(@accent, 25%) !important; - color: @text; - } - - .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, - .vector-sticky-pinned-container::after { - background: none; - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; - } - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header, - .vector-pinnable-header, - .vector-pinnable-element .vector-menu-heading { - border-bottom-color: @surface0; - } - - hr { - border-bottom-color: @surface2; - } - - .central-featured-lang strong:hover, - .link-box:hover, - .central-featured-lang :hover, - .other-project-link:hover, - .lang-list-container { - background-color: @surface0; - } - - .vector-page-toolbar-container { - box-shadow: 0 1px @surface1; - } - - .mw-parser-output .navbox-even { - background-color: @surface1; - } - - .vector-feature-zebra-design-enabled .vector-page-titlebar::after, - .mw-parser-output .wikipedia-languages-prettybars, - .vector-page-titlebar::after { - background-color: @surface2 !important; - } - - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { - background-color: fade(@accent, 20%) !important; - } - - .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, - .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), - .mw-collapsible-toggle-default::before, - .mw-collapsible-toggle-default::after { - color: @subtext1; - } - - .infobox, - .mw-parser-output .navbox, - .catlinks, - .mw-parser-output #mp-topbanner, - .mw-parser-output .sidebar, - .fancycaptcha-captcha-container, - .fancycaptcha-captcha-and-reload, - .cdx-checkbox__icon, - .mw-message-box, - .uls-menu .uls-no-results-view .uls-no-found-more, - .client-js - .vector-below-page-title - .vector-page-titlebar-toc - > label:nth-child(2), - .mw-parser-output .ombox, - code, - .oo-ui-buttonElement-framed.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-label, - #page-secondary-actions > a, - .mw-parser-output .ambox, - td[class="sidebar-navbar"], - textarea, - .mw-parser-output .side-box { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - #pagehistory li.selected { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - outline-color: @surface2 !important; - } - - .cdx-checkbox__icon { - border-color: @accent !important; - } - - .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1; - } - - .mw-ui-input:not(:disabled), - .mw-ui-button:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1 !important; - } - - .mw-parser-output .module-shortcutboxplain { - background-color: @base !important; - color: @text !important; - border-color: @surface2; - } - - .sidebar-pretitle, - .sidebar-title-with-pretitle, - .sidebar-list-title { - background-color: fade(@accent, 20%) !important; - } - - .mw-parser-output #mp-bottom, - .mw-parser-output .sidebar-collapse .sidebar-below { - border-color: @surface2; - } - - .lang-list-content, - .bookshelf .text { - background-color: @surface0; - } - - .mw-parser-output #mp-bottom .mp-h2, - .uls-language-block > ul > li:hover { - background: @surface0; - border-color: @surface2; - } - - figure[typeof~="mw:File/Thumb"] { - background-color: @mantle !important; - color: @text !important; - border-top-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - > figcaption { - background-color: @mantle !important; - color: @text !important; - border-bottom-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - } - > :not(figcaption) .mw-file-element { - color: @surface2 !important; - border-color: @surface2; - } - } - - .mw-parser-output #mp-left, - .mw-parser-output #mp-left .mp-h2, - th[class="sidebar-title"] { - background-color: fade(@green, 10%) !important; - border-color: fade(@green, 20%) !important; - } - - .mw-plusminus-pos { - color: @green !important; - } - - .mw-parser-output #mp-right, - .mw-parser-output #mp-right .mp-h2 { - background-color: fade(@blue, 10%) !important; - border-color: fade(@blue, 20%) !important; - } - - .mw-parser-output #mp-lower, - .mw-parser-output #mp-lower .mp-h2 { - background-color: fade(@mauve, 10%) !important; - border-color: fade(@mauve, 20%) !important; - } - - .mw-collapsible-toggle-default:active .mw-collapsible-text { - color: @peach; - } - - .mw-parser-output #mp-middle, - .mw-parser-output #mp-middle .mp-h2 { - background-color: fade(@pink, 10%) !important; - border-color: fade(@pink, 20%) !important; - } - - .mw-parser-output .navbox-title, - .summary, - .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), - .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { - background-color: fade(@accent, 20%) !important; - } - - .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { - background-color: @surface1 !important; - } - - .mw-parser-output .navbox-group, - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), - table.expanded:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(2) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(3) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(5) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - .navbox-abovebelow { - background-color: @surface1 !important; - } - - .mw-parser-output .tracklist > tbody { - color: inherit; - - > .tracklist-total-length * { - background-color: @overlay1; - color: @base; - } - } - - .mw-content-ltr - > table:nth-child(20) - > tbody:nth-child(1) - > tr:nth-child(2) - > td:nth-child(2) { - border-color: @surface2 !important; - background-color: @surface0 !important; - } - - .noarticletext, - #noarticletext { - background-color: @base !important; - } - - #sisterproject { - background-color: @mantle !important; - } - - [style="color:#02a64f;line-height:initial"] { - color: @green !important; - } - - [style="color:#f78e1e;line-height:initial"] { - color: @peach !important; - } - - [style="color:#77278b;line-height:initial"] { - color: @mauve !important; - } - - [style="color:#87746a;line-height:initial"] { - color: @maroon !important; - } - - [style="color:#009aC8;line-height:initial"] { - color: @sky !important; - } - - [style="color:#ffd520;line-height:initial"] { - color: @yellow !important; - } - - [style="color:#0060a9;line-height:initial"] { - color: @blue !important; - } - - table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), - .navbox-list-with-group.navbox-list.navbox-odd { - background-color: @surface0 !important; - } - - .mw-parser-output tr + tr > .navbox-abovebelow { - border-color: @base; - } - - .catlinks li { - border-left-color: @surface2; - } - - /* Fundraising banner */ - .frb-btn, - .frb-label { - color: @text; - background-color: @base; - border-color: @overlay0; - } - - input[type="radio"]:checked + .frb-btn, - input[type="radio"]:checked + .frb-label, - .frb-btn:hover, - .frb-label:hover { - color: @base; - background-color: @accent; - border-color: @accent; - } - - #frb-main { - --wmui-base100: @base; - --wmui-base0: @text; - --frb-body: @text; - --frb-muted: @subtext0; - --frb-link: @subtext0; - --frb-link-hover: @text; - --frb-error: @red; - --frb-submit: @accent; - --frb-submit-hover: darken(@accent, 10%); - - svg.frb-message-icon > g { - circle { - fill: @yellow; - } - path { - fill: @base; - } - } - - .frb-message { - background-color: @green; - border-color: @green; - } - - .frb-message::after { - border-left-color: @green; - } - } - - #frb-inline { - --wmui-base100: @base; - --frb-primary: @red; - --frb-link: @accent; - --frb-muted: @subtext0; - --frb-muted-hover: @text; - --frb-body: @text; - --frb-error: @red; - --wmui-red-dark: @red; - --wmui-red-light: @red; - --wmui-green-dark: @green; - --wmui-green-light: @green; - --frb-submit: @accent; - --frb-submit-hover: darken(@accent, 10%); - - .frb-inline-topbar { - color: @text; - - svg circle { - fill: @yellow; - } - - svg path { - fill: @base; - } - } - - .frb-btn-cta { - background-color: @accent !important; - border-color: @accent !important; - color: @base !important; - } - - .frb-btn-simple { - color: @accent !important; - } - - .frb-monthly-pitch { - color: @blue; - } - - .frb-optin-no-prompt { - color: @base; - } - - .frb-cta-hiddenmessage { - background-color: @red; - color: @base; - } - } - - #frb-nag { - --frb-primary-light: @base; - --frb-body: @text; - --wmui-accent-dark: @subtext0; - --frb-link-hover: @text; - - span.frb-donate-button { - color: @base; - background-color: @red; - - &:hover { - color: @base; - background-color: darken(@red, 10%); - } - } - - svg.frb-icon-close > g { - stroke: @subtext0; - - &:hover { - stroke: @text; - } - } - } - - .frb-nag:not(#frb-nag) { - --frb-message-background: @base; - --frb-message-border: @red; - --frb-message: @text; - border-color: @surface0; - background: @base; - box-shadow: none; - - #nag-rml-btn { - background-color: transparent; - border-color: transparent; - color: @subtext0; - } - - #nag-yes-btn { - background-color: @accent; - border-color: @accent; - color: @base; - } - } - - .frb-btn-cta-label::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .frb-back { - @svg-raw: ''; - @svg: escape(@svg-raw); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .frb-close { - @svg-raw: ''; - @svg: escape(@svg-raw); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .sprite { - @svg: escape( - '' - ); - background-image: - linear-gradient(transparent, transparent), - url("data:image/svg+xml,@{svg}"); - } - - .mw-logo-wordmark { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .mw-logo-tagline { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-menu { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-ellipsis { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-appearance { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-label:not(.cdx-button--icon-only)::after, - .vector-icon.mw-ui-icon-wikimedia-expand { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-checkbox__input:checked:not(:indeterminate) - + .cdx-checkbox__icon::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .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; - } - - .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language-progressive { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .mw-parser-output a.external { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .plainlinks a.external { - background: none !important; - } - - #mw-indicator-mw-helplink a { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - [alt="Edit this at Wikidata"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-listBullet { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - ul { - @svg: escape( - '' - ); - list-style-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-volumeUp, - .mw-ui-icon-volumeUp::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-fullScreen { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .fancycaptcha-reload { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .popups-icon--settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userAvatar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-watchlist { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-user-menu-logged-in .vector-dropdown-label::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-star { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userTalk { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-sandbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-unStar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-image-progressive.oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-next { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-expand { - @svg: escape( - ' expand ' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-labFlask { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userContributions { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-logOut { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .uls-search-label, - .vector-icon.mw-ui-icon-wikimedia-search { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .cdx-message .cdx-message__icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-edit { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-history { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-speechBubbles { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-editLock { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} + } +} /* deno-fmt-ignore */ @catppuccin: { @@ -1650,3 +715,11 @@ @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; }; + +/* deno-fmt-ignore */ +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; +};