Pinterest Catppuccin by arcofee

/* ==UserStyle==
@name           Pinterest Catppuccin
@namespace      USO Archive
@author         Arcofee
@description    `A little and beauty theme for Pinterest`
@version        1.0
==/UserStyle== */
@-moz-document url-prefix("https://www.pinterest.com"), regexp("^https?:\\/\\/(www|[a-z]{2})\\.pinterest\\.(com(\\.(au|mx))?|(co\\.uk)|ca|se|jp|fr|de|es|ch|dk|nz|ch|ie|pt|ru|it)\\/.*") {
:root
{
  --bg1: rgb(30, 30, 46);
  --bg1alpha: rgb(30, 30, 46, 0.86);  /* should match bg1 + any alpha */
  --bg1alpha2: rgb(30, 30, 46, 0.96);  /* should match bg1 + any alpha */
  --bg2: rgb(48, 45, 65);
  --bgheader: rgb(26, 24, 38);
  --bgheader_border: rgb(48, 45, 65);
  --bgheader_divider: rgb(48, 45, 65);
  --bgsearchbox: rgb(48, 45, 65);
  --bgcontrol: rgb(30, 30, 46);
  --bgcontrol_alpha: rgba(48, 45, 65, 0.85);  /* should match bgcontrol + any alpha */
  --bgcontrol_selected: rgb(152, 139, 162);
  --bgcontrol_hover: rgb(110, 108, 126);
  --bgcontrol_border: rgb(48, 45, 65);
  --bgcontrol_icon: rgb(110, 108, 126);
  --bgpin_button: rgb(48, 45, 65);
  --bgpin_button_alpha: rgba(48, 45, 65, 0.75);
  --bgfooter_button: rgb(30, 30, 46);
  --bgfooter_button_hover: rgb(48, 45, 65);
  --text0: #D9E0EE;
  --text1: #C9CBFF;
  --text2: #C3BAC6;
  --text3: #988BA2;
  --scrollbar_bg: rgb(26, 24, 38);
  --scrollbar_thumb: rgba(110, 108, 126);
  --scrollbar_corner: rgba(26, 24, 38);
  --pincontrol: rgb(30, 30, 46);
  --pincontrol_hover: rgb(30, 30, 46, 0.85);
  --input_border: rgb(48, 45, 65);
  --input_border_hover: rgb(48, 45, 65, 0.85);
  --input_border_focus: rgb(87, 82, 104);
  --gradient1: rgb(26, 24, 38)
  /*
  --text0: #f00;
  --text1: #0f0;
  --text2: #0ff;
  --text3: #ff0;
  */
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

html,
body
{
  background-color: var(--bg1) !important;
  color: var(--text2) !important;
}

a
{
  color: white !important;
}

/* header and some large backgrounds */
.qJc
{
  background-color: var(--bgheader) !important;
}

/* user profile background */
.UserProfileContent [style*="background-color"]
{
  background-color: var(--bg1) !important;
}

/* user profile sticky header */
.fixedHeader
{
  background-color: var(--bg1alpha) !important;
}

/* header bottom border */
.uNu
{
  border-top: 1px solid var(--bgheader_border) !important;
}

/* text color #333 */
.pBj,
.pinHashtag,
.SearchBoxInput,
.Typeahead .sendToEmail .title,
.sharePrompt,
h3[style*="color"]
{
  color: var(--text1) !important;
}

/* text color #711717 */
a,
.pinWrapper .pBj,
.Typeahead .socialConnect .title,
.Typeahead.userSelect .typeaheadName
{
  color: var(--text2) !important;
}

/* text color #8e8e8e */
.B9u
{
  color: var(--text3) !important;
}

/* text color #444 */
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity a
{
  color: var(--text2) !important;
}

/* closeup background */
.Closeup [style*="linear-gradient"],
.Closeup ~ * .qJc,
.reactCloseupScrollContainer > [style*="background-color"]
{
  background: var(--bg1) !important;
}

/* closeup shadow */
.closeupContainer [style*="box-shadow: rgb(238, 238, 238) 0px 4px 4px"]
{
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px !important;
  box-shadow: none !important;
}

/* buttons */
.gpV,
button [style*="background-color: rgb(239, 239, 239)"],
button.lightGrey
{
  background-color: var(--bgcontrol) !important;
}

/* button hover */
button [style*="background-color: lightgray"],
button [style*="background-color: rgb(226, 226, 226)"]
{
  background-color: var(--bgcontrol_hover) !important;
}

/* footer buttons */
.Button.footerIcon,
.App .footerButtons .nonEuPrivacyPolicy
{
  background-color: var(--bgfooter_button) !important;
}

/* footer buttons hover */
.Button.footerIcon:hover,
.App .footerButtons .nonEuPrivacyPolicy:hover
{
  background-color: var(--bgfooter_button_hover) !important;
}

/* popup triangle border */
.YDx.MIw[style*="stroke: rgb(239, 239, 239)"]
{
  stroke: var(--bgcontrol_border) !important;
}

/* popup triangle (inner) */
.erh.BR9
{
  color: var(--bgcontrol) !important;
}

/* popup border */
.odN
{
  color: var(--bgcontrol_border) !important;
}

/* notification item hover */
.newsHubItem:hover,
.newsHubItem:focus
{
  background-color: var(--bgcontrol_hover) !important;
}

/* search box drop down menu */
.Typeahead
{
  background-color: var(--bgcontrol) !important;
}

/* search box hovered menu item */
.Typeahead li a:hover
{
  background-color: var(--bgcontrol_hover) !important;
}

/* circular avatar */
/* TODO: make this a lighter gray maybe */
.INd[style*="box-shadow"],
.INd[style*="border: 1px solid white"]
{
  box-shadow: none !important;
  border: none !important;
}

/* empty pin */
.emptyBoard .emptyPinWrapper
{
  background-color: var(--bgcontrol) !important;
}

/* search category suggestions bar */
.SearchImprovementsBar-OuterScrollContainer
{
  background: var(--bg1) !important;
}

/* left gradient on search improvementment, and featured art collection */
/* TODO: too generic? */
[style*="linear-gradient(to left"]
{
  background-image: linear-gradient(to left, transparent 0%, var(--bg1) 90%) !important;
}

/* right gradient on search improvementment, and featured art collection */
[style*="linear-gradient(to right"]
{
  background-image: linear-gradient(to right, transparent 0%, var(--bg1) 90%) !important;
}

/* remove mouseover dimming of pins */
.pinWrapper [style*="background-color: rgb(0, 0, 0); opacity: 0.3"]
{
  opacity: 0 !important;
}

/* move pin mouseover background further below */
.Pin.summary .pinWrapper::before
{
  z-index: -1 !important;
}

/* pin mouseover surrounding background */
.Pin.summary .pinWrapper::before
{
  background: var(--bg2) !important;
}

/* background of circular avatar (fixes anti-aliasing) */
.INd [style*="background-color: rgb(239, 239, 239)"]
{
  background-color: var(--bg1) !important;
}

/* organize board pin border */
.pinSelectionBorder
{
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

/* organize board selected pin border */
/* TODO: make CSS variable for color? */
.pinSelectionBorder.selected
{
  border-color: #F28FAD !important;
  box-shadow: none !important;
}

/* secret board icon */
[data-test-id="secretBoardIcon"] > .gfP
{
  background-color: var(--bgcontrol) !important;
}

/* search page background behind suggestion categories */
.SearchPage .qJc
{
  background-color: var(--bg1) !important;
}

/* various borders */
[style*="border-left: 1px solid rgb(216, 216, 216)"],
[style*="border-left:1px solid #d8d8d8"],
[role="button"] [style*="2px solid white"]
{
  border-color: var(--bg1) !important;
}

/* various borders */
.Typeahead.userSelect li,
.Typeahead.userSelect,
#pickerSearchField,
.Modal .formFooter,
.ReactModal__Content .formFooter
{
  border-color: var(--bgcontrol_border) !important;
}

/* fix white fringe on email icon */
.icon.typingEmail > em
{
  filter: invert(90%) !important;
}

/* hovered item on "new message" popup */
.Typeahead.userSelect .highlighted a,
.Typeahead.userSelect a:hover,
.Typeahead.userSelect .socialConnectItem:hover
{
  background-color: var(--bgcontrol_hover) !important;
}

/* notification mini grid background */
.miniPinGridItem
{
  background-color: var(--bgcontrol) !important;
}

/* pin save category drop down */
.PinBetterSave__Dropdown
{
  background-color: var(--bgcontrol) !important;
}

/* pin save category drop down */
.PinBetterSave__Dropdown:hover
{
  background-color: var(--bgcontrol_hover) !important;
}

/* background fade (opacity used, instead of alpha)*/
.BsF
{
  background-color: #000 !important;
}

/* .BsF is also used for controls like radio and checkboxes */
input + .BsF
{
  background-color: var(--bgcontrol_selected) !important;
}

/* various popups */
.SendObjectBase,
.browserButtonUpsellModal,
.Modal .formFooter,
.ReactModal__Content .formFooter
{
  background-color: var(--bgcontrol) !important;
}

/* logged out signup/login popup */
[data-test-id="signup"][style*="background-color"],
[data-test-id="login"][style*="background-color"]
{
  background-color: var(--bgcontrol) !important;
}

.boardLinkWrapper [style*="background-color: rgb(239, 239, 239)"],
.item [style*="background-color: rgb(239, 239, 239)"]
{
  background-color: var(--bgcontrol) !important;
}

.fgH, .MDo, .HQE,
.qJc [style*="border: 1px solid rgb(142, 142, 142)"]
{
  border-color: var(--bgcontrol_border) !important;
}

.qJc textarea
{
  background-color: transparent !important;
}

.qJc [style*="background-color: rgb(239, 239, 239)"],
[data-tutorial-id="pin-builder-empty-view"] > [style*="background-color:#efefef"],
[data-test-id^="pin-builder"] button[style*="background-color:#efefef"]
{
  background-color: var(--bgcontrol) !important;
}

.qJc [style*="border: 2px dashed rgb(218, 218, 218)"]
{
  border-color: var(--bgcontrol_selected) !important;
}

.ExpandingTextArea__enabled
{
  color: var(--text1) !important;
}

.inModal .standardForm, .modalStyle .standardForm
{
  background-color: var(--bgcontrol) !important;
}

.inModal .standardForm > h1, .modalStyle .standardForm > h1
{
  color: var(--text1) !important;
  border-color: var(--bgcontrol_border) !important;
}

.eZS {
  background-color: var(--bgcontrol_hover) !important;
}

[style*="border-left: 1px solid rgb(245, 245, 245)"],
[style*="border-right: 1px solid rgb(245, 245, 245)"],
.KI_
{
  border-color: var(--bgcontrol_border) !important;
}

/*
.TypeaheadField.userSelect input
{
  background-color: var(--bgcontrol) !important;
  color: var(--text1) !important;
  border-color: var(--bgcontrol_border) !important;
}
*/

.hle
{
  background-color: var(--bgcontrol_hover) !important;
}

.previewRowFullWidthItem
{
  background-color: var(--bgcontrol) !important;
  border-color: var(--bg1) !important;
}

[data-test-id="canonical-comment"] [style*="border"],
[data-test-id="add-comment"] [style*="border"]
{
  border-color: var(--bgcontrol_border) !important;
}

[style*="z-index: 2; background-color: white;"]
{
  background-color: var(--bgheader) !important;
}...