/* ==UserStyle== @name Pinterest Catppuccin @namespace github.com/catppuccin/userstyles/styles/pinterest @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest @version 2025.04.10 @updateURL https://github.com/keonly/userstyles/raw/main/styles/pinterest/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest @description Soothing pastel theme for Pinterest @author Catppuccin @license MIT @preprocessor less @var select lightFlavor "Light Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray*"] ==/UserStyle== */ @-moz-document regexp( "^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*" ) { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } #catppuccin(@flavor) { @rosewater: @catppuccin[@@flavor][@rosewater]; @flamingo: @catppuccin[@@flavor][@flamingo]; @pink: @catppuccin[@@flavor][@pink]; @mauve: @catppuccin[@@flavor][@mauve]; @red: @catppuccin[@@flavor][@red]; @maroon: @catppuccin[@@flavor][@maroon]; @peach: @catppuccin[@@flavor][@peach]; @yellow: @catppuccin[@@flavor][@yellow]; @green: @catppuccin[@@flavor][@green]; @teal: @catppuccin[@@flavor][@teal]; @sky: @catppuccin[@@flavor][@sky]; @sapphire: @catppuccin[@@flavor][@sapphire]; @blue: @catppuccin[@@flavor][@blue]; @lavender: @catppuccin[@@flavor][@lavender]; @text: @catppuccin[@@flavor][@text]; @subtext1: @catppuccin[@@flavor][@subtext1]; @subtext0: @catppuccin[@@flavor][@subtext0]; @overlay2: @catppuccin[@@flavor][@overlay2]; @overlay1: @catppuccin[@@flavor][@overlay1]; @overlay0: @catppuccin[@@flavor][@overlay0]; @surface2: @catppuccin[@@flavor][@surface2]; @surface1: @catppuccin[@@flavor][@surface1]; @surface0: @catppuccin[@@flavor][@surface0]; @base: @catppuccin[@@flavor][@base]; @mantle: @catppuccin[@@flavor][@mantle]; @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; } } --color-text-light: @mantle; --color-text-dark: @text; --color-text-default: @text; --color-text-inverse: @mantle; --color-text-subtle: @subtext0; --color-text-error: @red; --color-text-shopping: @accent; --color-text-link: @accent; --color-text-formfield-default: @text; --color-text-icon-light: @subtext1; --color-text-icon-dark: @mantle; --color-text-icon-default: @subtext0; --color-icon-subtle: @subtext1; --color-text-icon-inverse: @mantle; --color-text-icon-subtle: @subtext0; --color-text-icon-error: @red; --color-text-icon-brand-primary: @accent; --color-background-light: if((@flavor = latte), @mantle, @subtext1); --color-background-dark: if((@flavor = latte), @text, @mantle); --color-background-default: @base; --color-background-inverse-base: @subtext1; --color-background-primary-base: @accent; --color-background-secondary-base: @mantle; --color-background-secondary-active: @mantle; --color-background-selected-base: @subtext1; --color-background-box-default: @mantle; --color-background-box-dark: @text; --color-background-box-selected: @accent; --color-background-box-primary: @accent; --color-background-box-secondary: @surface0; --color-background-box-info-base: @blue; --color-background-box-info-weak: fade(@blue, 20%); --color-background-box-darkwash: @surface1; --color-background-overlay: @surface0; --color-background-popover-primary: @base; --color-background-popover-secondary: @overlay2; --color-background-tag-primary-hover: @surface2; --color-background-box-light: @base; --color-background-button-secondary-default: @surface0; --color-background-button-secondary-hover: @surface1; --color-background-button-secondary-active: @surface2; --color-background-button-selected-default: @subtext1; --color-background-button-tertiary-hover: fade(@surface2, 10%); --color-background-button-shopping-default: @blue; --color-background-button-shopping-hover: darken(@blue, 12%); --color-background-tag-primary-default: @surface1; --color-background-button-disabled-default: @surface0; --color-background-formfield-primary: @base; --color-background-avatar-placeholder: @mantle; --color-background-tabs-default-base: @base; --color-background-tabs-default-hover: @surface0; --color-background-button-semitransparentwhite-default: fade(@base, 80%); --color-background-button-semitransparentwhite-hover: @surface0; --color-background-button-semitransparentdefault-default: fade( @surface1, 80% ); --color-background-button-semitransparentdefault-hover: @surface2; --color-background-switch-default-selected: @accent; --color-background-switch-default-unselected: @base; --color-background-switch-hover-selected: @accent; --color-background-switch-hover-unselected: @surface0; --color-background-switch-pressed-selected: fade(@accent, 50%); --color-background-switch-pressed-unselected: fade(@accent, 50%); --color-background-checkbox-disabled: darken(@mantle, 2%); --color-background-checkbox-checked-default: @accent; --color-background-checkbox-checked-: @red; --color-background-checkbox-unchecked-default: @base; --color-background-checkbox-unchecked-: @red; --color-border-container: @surface1; --color-border-default: @mantle; --color-border-popover-primary: @surface0; --color-border-popover-secondary: @text; --color-border-focus: fade(@blue, 50%); --color-border-switch-default-selected: @surface2; --color-border-switch-default-unselected: @surface2; --color-border-switch-focus-inner: @surface2; --color-border-switch-focus-outer: @surface2; --color-border-switch-hover-unselected: @surface2; --color-border-switch-pressed-unselected: @surface2; --color-border-checkbox-checked-default: @accent; --color-border-checkbox-checked-: @red; --color-border-checkbox-disabled: darken(@mantle, 2%); --color-border-checkbox-unchecked-default: @surface1; --color-border-checkbox-unchecked-: @red; --color-border-checkbox-unchecked-hover: @surface2; --color-border-checkbox-unchecked-pressed: fade(@accent, 50%); --color-text-success: @green; --color-text-warning: @yellow; --color-icon-default: @subtext1; --color-icon-dark: @subtext1; --color-icon-success: @green; --color-icon-warning: @yellow; --color-icon-: @red; --color-icon-info: @blue; --color-icon-recommendation: @mauve; --color-icon-brand-primary: @accent; --color-icon-inverse: @crust; --color-background-brand: @accent; --color-background-box-brand: @accent; --color-background-button-primary-default: @accent; --color-background-button-primary-hover: desaturate( darken(@accent, 12%), 20% ); --color-background-button-primary-active: desaturate( darken(@accent, 30%), 30% ); --color-background-button-white-default: @base; --color-background-button-white-hover: @surface0; --color-background-badge-warning: @yellow; --color-background-badge-success: @green; --color-background-education: @blue; --color-background-primary-strong: @accent; --color-background-shopping: @blue; --g-colorTransparentWhite: fade(@base, 70%); --g-colorTransparentDarkGray: fade(@mantle, 80%); --g-colorGray0: @mantle; --g-colorGray0Hovered: darken(@mantle, 2.5%); --g-colorGray0Active: darken(@mantle, 5%); --g-colorGray50: @mantle; --g-colorGray100: @mantle; --g-colorGray100Hovered: darken(@surface0, 2.5%); --g-colorGray100Active: darken(@surface0, 5%); --g-colorGray200: @subtext0; --g-colorGray300: @subtext1; --g-colorRed100: @accent; --g-colorRed100Hovered: darken(@accent, 7.5%); --g-colorRed100Active: darken(@accent, 10%); --g-color-focus: fade(@accent, 50%); --color-gray-roboflow-400: @surface2; --color-gray-roboflow-200: @mantle; --g-blue: @accent; --color-background-info-base: @blue; --color-background-error-base: @red; --color-background-warning-base: @peach; --color-background-success-base: @green; // Currently unsupported syntax by the Less parser the Deno formatter uses, see https://github.com/g-plane/raffia/issues/9. // @colors: { // 01: @blue; // 02: @teal; // 06: @sapphire; // 07: @green; // 08: @yellow; // 09: @pink; // 10: @mauve; // 11: @crust; // }; // each(@colors, { // --color-background-searchguide-default-@{key}: @value; // --color-background-searchguide-hover-@{key}: if(@key = 11, @value, lighten(@value, 4%)); // }); --color-background-searchguide-default-01: @blue; --color-background-searchguide-hover-01: lighten(@blue, 4%); --color-background-searchguide-default-02: @teal; --color-background-searchguide-hover-02: lighten(@teal, 4%); --color-background-searchguide-default-06: @sapphire; --color-background-searchguide-hover-06: lighten(@sapphire, 4%); --color-background-searchguide-default-07: @green; --color-background-searchguide-hover-07: lighten(@green, 4%); --color-background-searchguide-default-08: @yellow; --color-background-searchguide-hover-08: lighten(@yellow, 4%); --color-background-searchguide-default-09: @pink; --color-background-searchguide-hover-09: lighten(@pink, 4%); --color-background-searchguide-default-10: @mauve; --color-background-searchguide-hover-10: lighten(@mauve, 4%); --color-background-searchguide-default-11: @crust; --color-background-searchguide-hover-11: @crust; body { background-color: @base; color: @text; } /* the void (parts not loaded yet) */ background: @base !important; /* Loading screen logo */ .animatedLogo { [fill="#E60023"] { fill: @accent !important; } [fill="white"] { fill: @crust !important; } } .EmojiPickerReact { --epr-bg-color: @base; --epr-text-color: @text; --epr-picker-border-color: @base; --epr-category-label-bg-color: @base; --epr-search-input-bg-color: @mantle; --epr-skin-tone-picker-menu-color: @mantle; --epr-category-icon-active-color: @accent; --epr-highlight-color: @accent; --epr-hover-bg-color: @surface0; --epr-focus-bg-color: @surface0; } .C1J, .LI1.iyn[focus-within], .iyn:focus, ._gestalt .react-datepicker__month-select:focus, ._gestalt .react-datepicker__year-select:focus { box-shadow: 0 0 0 4px var(--g-color-focus); } .NUb { color: var(--color-text-inverse); } // loading screen .mainContainer > div[style*="0.5"] { background-color: @base !important; } // Profile button // Invite collaborators buttons div[style="border: 1px solid white;"], div[data-test-id="gestalt-avatar-svg"] { outline-color: @base !important; border-color: @base !important; .WhU { background-color: @surface1; } } div#mweb-unauth-container, div#mainContainer { background-color: @base !important; } // "Accounts and more options" popup div#HeaderAccountOptionsFlyout { background-color: @mantle; border-color: transparent; // external link icons .Hn_.Uvi.gUZ { color: var(--color-text-icon-light); } } div[role="tooltip"] { background-color: @surface0; color: @text; .B1n { color: @text; } } /* Header & Search */ div[data-test-id="header-Header"] div.P_h span.xnr { color: @text !important; } // search div[data-test-id="dynamic-search-placeholder"] > div.Lfz.MIw.zI7.iyn.Hsu { &.ojN, &.QLY { display: none; } } // make top bar match div[data-test-id="header-background"] { background-color: @base; } button[data-test-id="one-bar-pill"] { --color-text-dark: var(--color-text-inverse); } div[data-test-id="product-price-filter-one-bar-pill"] button[data-test-id="one-bar-pill"] svg { color: @base !important; } div[data-test-id="one-bar-navigation-arrows"] { background: linear-gradient(to left, @base, transparent 40px), linear-gradient(to right, @base, transparent 40px) !important; } div#searchBoxContainer { // search bar > div { background-color: @mantle !important; } div[style*="box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px"] { box-shadow: 0 0 0 4px var(--g-color-focus) !important; } input { color: @subtext1 !important; } div.MMh._Y5.feh.s7I.zI7.iyn.Hsu { background-color: @surface2 !important; } } // make selected search suggestions darker div[aria-selected="true"][data-test-id="search-suggestion"] { .C9q.Jea.KS5.Lfz.TMJ.XiG.Zr3.zI7.iyn.Hsu { background-color: @surface0; } } /* Home */ div.moreIdeasBoardRepCarousel div[data-carousel-indicator="carousel-card"] div.Jea.XiG.hA-.ho-.zI7.iyn.Hsu { background-color: @mantle !important; } div.moreIdeasBoardRepCarousel & ~ div.MIw.QLY.zI7.iyn.Hsu { background: none !important; } /* Nav */ nav#VerticalNavContent { a[data-test-id="home-tab"] div { &[style*="M11.3217 0.307444C11.7345 0.0407477"] { @svg: escape( '' ); background-image: url(~"data:image/svg+xml,@{svg}") !important; } &[style*="M21.6834 22H2.31659V7.61275"] { @svg: escape( '' ); background-image: url(~"data:image/svg+xml,@{svg}") !important; } } a[data-test-id="create-tab"] div { &[style*="M19 3.5H5C4.17157 3.5"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &[style*="M12 4.75C12.6904 4.75"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } } div[aria-label*="Updates"] div { &[style*="M16.5 14.227"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &[style*="clip0_449_32470"] { @svg: escape( '' ); background-image: url(~"data:image/svg+xml,@{svg}") !important; } } div[data-test-id="notifications-button"] div[style*="background-image"] { &[style*="clip0_800_18532"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &[style*="clip0_449_32468"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } } div[data-test-id="vertical-nav-more-options-button"] div { &[style*="clip0_449_32461"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &[style*="clip0_449_32472"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } } a[data-test-id="today-tab"] div { &[style*="clip0_449_32453"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &[style*="clip0_449_32464"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } } } div[data-test-id="homefeed-feed"] { div[style*="background-color:#ffffff"], div[style*="background-color: rgb(255, 255, 255)"] { background-color: @base !important; } } /* Pins */ // image container [data-test-id="closeup-image-main"] div div { background-color: @mantle !important; } button[data-test-id="PinBetterSaveDropdown"] { div[title], svg { color: if(@flavor = latte, var(--color-text-inverse), @text) !important; } .G0a div[title], .G0a svg { color: var(--color-text-inverse) !important; } } // pin icons button[data-test-id="feedback-button"], div[data-test-id="share-icon-button"] { div div { background-color: @base; &:hover { background-color: @surface0; } } } // board name to save to // preview / dropdown [data-test-id="PinBetterSaveDropdown"], div[data-test-id="boardSelectionDropdown"] { .B1n { color: var(--color-text-light); } .AR6 { color: var(--color-text-light); } // background when opened .G0a { background-color: @subtext0 !important; } } div[data-test-id="savedInfo"] a { background-color: transparent !important; div { color: if(@flavor = latte, var(--color-text-inverse), @text) !important; } } div[data-test-id="PinTypeIdentifier"] { background-color: @base !important; color: @text !important; } div[data-test-id="persistent-one-click-save"] { div[style="background-color: rgba(255, 255, 255, 0.85);"] { background-color: @mantle !important; } a { background-color: transparent !important; } } div[style="padding-bottom: 100%; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;"] { box-shadow: 0 0 0 1px @crust !important; } // "Saved to" popup div[role="status"], div[data-test-id="toast"] { // needed for Latte .X8m { color: @text !important; } // "Removed from your board" text after pressing undo .B1n { color: @text !important; } // popup color .b0h { background-color: @surface0; } // undo button .a_A { background-color: @surface1; } } // back of send and ... buttons on pins .NSs { background-color: @mantle !important; } // Save button button[aria-label="Save"] { // text .B1n { color: var(--color-text-inverse); } } // Button when saved button[aria-label="Pin Saved"] { // text .B1n { color: var(--color-text-light); } // background .kJo { background-color: @surface0; } // border .gSJ { border-color: transparent; } } // pin editing popout // text .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG { color: @text !important; } // buttons when hovered .TzN { background-color: @surface0 !important; } // pin notes textarea[id="PinNoteField"] { color: @text; } /* Pin page */ // pin body shadow div[data-test-id="closeup-body-style"] { box-shadow: 0 1px 20px 0 fade(@text, 15%) !important; background-color: @mantle; } div[data-test-id="closeup-body-sticky-content"] { background-color: @mantle; } div[data-test-id="closeup-action-items"] { background-color: @mantle; .imm { background-color: @mantle; } } // pin discover bubble div[data-test-id="discover-bubble"] div div { color: if(@flavor = latte, @base, @text) !important; } // comment bar div[data-test-id="comment-editor-container"] { color: @text !important; } div[data-test-id="inline-comment-composer-container"] { border-color: @mantle !important; background: @mantle !important; } div.public-DraftEditorPlaceholder-root { color: @subtext1 !important; } .LJB.Pw5.XgI.fev.ujU.wsz.zI7.iyn.Hsu { border-color: @surface0 !important; } div[data-test-id="more-description-container"], div[data-test-id="less-description-container"] { background-color: @base !important; div:first-child { background: linear-gradient(90deg, transparent 0%, @base 100%) !important; } } div[data-test-id="truncated-text"] { div[data-test-id="more-button"] { background: linear-gradient( 90deg, transparent 0%, @base 15% ) !important; } div[style="background: rgb(255, 255, 255);"] { background-color: @base !important; } } div[data-test-id="media-viewer-button"], div[data-test-id="flashlight-button"], div[data-test-id="flashlight"], div[data-test-id="shop-button"] { background-color: fade(@base, 85%) !important; } div[data-test-id="flashlight-dot-style"] { background-color: var(--color-text-light); } div[data-test-id="visual-search-cropper"] { path.v2cropperHandle { fill: var(--color-text-light) !important; } use.v2cropSection { stroke: var(--color-text-light) !important; } } textarea#pinNoteText { background-color: transparent; color: @subtext1; caret-color: @text; } div[data-test-id="react-button"] { .Jea.KS5.mQ8.zI7.iyn.Hsu { //background-color: @accent; color: @accent; } div:hover { background-color: @surface0 !important; border-radius: var(--rounding-circle); } div div { div[style*='background-image: url("https://s.pinimg.com/webapp/reactionHeartOutline-24ab75a6.svg")'] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } div[style*='background-image: url("https://s.pinimg.com/webapp/loveStatic-31fc2a99.svg")'] { @darkened-red: darken(@red, 50%); @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } } } // remove "More to explore" bar div[data-test-id="related-modules-header"] { .Jea.KS5.LCN.X6t.hUC.imm.jzS.mQ8.zI7.iyn.Hsu { background-color: transparent; } } /* Video and story pins */ div[data-test-id="visual-content-container"] video ~ div { svg { color: var(--color-text-icon-light) !important; } div[role="progressbar"] > div { background-color: var(--color-text-icon-light) !important; } } div[data-test-id="closeup-data-loaded"] div.Jea.Rym.zI7.iyn.Hsu { svg, span { color: var(--color-text-icon-light) !important; } } /* Profile */ div[data-test-id="profile-board-card"] div, div#profileBoardsFeed div[data-test-id="board-card"] div, div[style="border: 1px solid white; border-radius: 16px;"] { border-color: @crust !important; } div.SaveButton__background--enabled { background-color: @accent !important; color: @mantle !important; } div[data-test-id="savedInfo"] a h3 { color: var(--color-text-light) !important; } a[aria-label="More ideas"] { .TzN { background-color: @surface0; } } a[aria-label="Organize"] { .TzN { background-color: @surface0; } } // remove profile bar .imm { background-color: @base; } // Hide ugly block around section previews .imm[data-test-id^="section"] { background-color: transparent; } /* Settings */ input[type="checkbox"] ~ div { border-color: var(--color-border-switch-default-unselected) !important; } button[disabled=""] div { color: @overlay0 !important; } div.tBJ.dyH.iFc.sAJ.xnr.tg7.IZT.swG { color: var(--color-text-light) !important; } /* Share */ div[data-test-id="lego-share-social-bar-auth"] button, div[data-test-id="copy-link-share-icon-auth"] div.zI7.iyn.Hsu { background-color: transparent !important; } div[data-test-id="email-share-button-auth"] svg { rect { fill: @mantle !important; } path { fill: @subtext1 !important; } } div[data-test-id="sharesheet-contact-item-sent-icon"] svg { color: @text; } div[data-test-id="sharesheet-contact-item-button"] div[style="background-color: rgb(239, 239, 239); padding-bottom: 100%;"] { background-color: @mantle !important; } /* Messages */ textarea#messageDraft { background-color: transparent; color: @subtext1; caret-color: @text !important; } textarea[data-gestalt-valid-html="TextArea"] { background-color: transparent !important; } div[data-test-id="add-pin-to-conversation"] { div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { border-color: @mantle !important; } div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { box-shadow: 0 0 0 4px var(--g-color-focus) !important; } } /* Create */ div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] { background-color: fade(@base, 80%) !important; } input#scrape-view-website-link { background-color: @base !important; } div[data-test-id="image-from-search-container"] { --color-text-icon-inverse: @subtext1; } div[data-test-id="storyboard-draft-placeholder-rep"] div.ho-.zI7.iyn.Hsu { background-color: @mantle !important; background-image: linear-gradient( to right, @mantle 0%, @crust 20%, @mantle 40%, @mantle 100% ) !important; } div[data-test-id="drafts-container"] { --color-text-dark: var(--color-text-default); div[style="border-color: rgb(17, 17, 17);"] { border-color: @crust !important; } } div[data-test-id="drag-behavior-container"] { background-color: @surface1 !important; } div[data-test-id="drag-behavior-container"] div div { border-color: @surface2 !important; } div[data-test-id="drag-behavior-container"] svg { color: @subtext1; } div[data-test-id="storyboard-pin-card-item"] { border-color: @crust !important; } button[data-test-id="board-dropdown-select-button"] { background-color: @base !important; span { color: @subtext1 !important; } } div[data-test-id="storyboard-interest-tags"] div[style="background-color: rgb(17, 17, 17);"] { background-color: @subtext1 !important; } div[data-test-id="editor-canvas-container"] div { border-color: @accent !important; } input[data-test-id="storyboard-editor-details-text-size"] { background-color: @mantle !important; color: @text !important; border-color: @crust !important; } div[data-test-id="storyboard-editor-details-text-color-picker"] { input { color: @text !important; background-color: transparent !important; } .LJB { border-color: @crust !important; } div[style="height: 40px; box-shadow: rgb(239, 239, 239) 0px 0px 0px 2px inset;"] { box-shadow: 0 0 0 2px @crust inset !important; } } div[role="tablist"] button[aria-selected="true"] { background-color: @crust !important; } input[type="text"], input[type="search"] { color: @text; } /* Explore */ // articles div[data-test-id="suggested-articles-link"], div[data-test-id="shopping-spotlight-article"] { div[data-test-id="hero-module-subtitle"] div, div[data-test-id="hero-module-title"] h2, div[data-test-id="hero-module-title"] h3 { color: if(@flavor = latte, @base, @text) !important; } } // today article header div[data-test-id="today-article-header"] { div[data-test-id="today-article-subtitle"] div, div[data-test-id="today-article-title"] h1 { color: if(@flavor = latte, @base, @text) !important; } } /* Login */ div[data-test-id="signup-default-modal"], div[data-test-id="login-modal-default"], div[data-test-id="login-modal-mfa"] { background-color: @base !important; h1 { color: @text !important; } p { color: @subtext0 !important; } button[data-test-id="login-signup-toggle"] { color: @accent !important; } button.red.active { background-color: @accent !important; color: @crust !important; } button.red.active:hover, button.red.active:focus { background-color: darken(@accent, 2.5%) !important; } span[data-test-id="terms-of-service"], div[style="margin-top: 15px; color: rgb(51, 51, 51);"] { color: @subtext1 !important; a { color: @accent !important; } } } /* Not logged in */ div[style="height: 200px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);"] { background: linear-gradient( fade(@base, 0%) 0%, @base 70% ) !important; } div#mweb-unauth-container div.HFo.Jea.KS5._he.zI7.iyn.Hsu, div[data-test-id="header"] div[style="background-color: rgba(255, 255, 255, 0.95); height: 100%; width: 100%;"] { background-color: @base !important; } span[data-test-id="terms-of-service"] a { color: @accent !important; } div[data-test-id="breadcrumbs-list"] div.MIw.Rym.zI7.iyn.Hsu, div[data-test-id="vase-carousel"] div[data-test-id="left-scroll-arrow"] { background-image: linear-gradient( to left, fade(@base, 0%), @base ) !important; } div[data-test-id="breadcrumbs-list"] div.MIw.p6V.zI7.iyn.Hsu, div[data-test-id="vase-carousel"] div[data-test-id="right-scroll-arrow"] { background-image: linear-gradient( to right, fade(@base, 0%), @base ) !important; } div[data-test-id="standard-save-button"] { span { color: @mantle !important; } // save button hover .vfW { background: darken(@accent, 10%) !important; } } /* Other */ div[data-test-id="public-beta-page"] { --color-text-light: @text; --color-background-recommendation-weak: @crust; } div[data-layout-shift-boundary-id="PageContainer"] { --color-text-inverse: var(--color-text-light); } // pin side buttons background .XiG.hUC.wYR.zI7.iyn.Hsu { background: @base !important; } // pin external link on hover a[rel="noopener noreferrer nofollow"]:has(svg[aria-label="Link"]) { div[style^="background-color: rgba(255, 255, 255, 0.9)"] { background: @surface0 !important; } div[style^="background-color: rgb(255, 255, 255)"] { background: @surface1 !important; } } // pin peek variant div[data-test-id="peek-variant-shopping-module-container"] { div[data-test-id="peek-variant-top-gradient"] { background: linear-gradient(0deg, transparent 0%, @base 100%) !important; } div[style*="background: linear-gradient"]:not( [data-test-id="peek-variant-top-gradient"] ) { background: linear-gradient(transparent 0%, @base 100%) !important; } } // pin shopping div[data-testid="product-metadata-details-flex"] { div[style*="border-top"] { border-color: @surface0 !important; } } div[id*="product-sticky-container"] div#imageContainerPerf { div[style*="background-image"] { &[style*="linear-gradient(rgb(255, 255, 255)"] { background: linear-gradient(@base 0%, transparent 90%) !important; } &[style*="linear-gradient(rgba(255, 255, 255, 0)"] { background: linear-gradient(transparent 0%, @base 90%) !important; } } div[data-test-id="outline-box"] { box-shadow: @subtext1 0 0 0 2px inset, @base 0 0 0 4px inset !important; } } // "more" buttom [aria-label="more"] { .NSs { background: @surface0; } } // mobile mask [data-test-id="mobile-signup-mask"] { background-color: @base !important; border-color: @base !important; div[style*="border"] { border-color: var(--color-border-container) !important; } } } } /* deno-fmt-ignore */ @catppuccin: { @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; @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: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; }; };