fix(pinterest): improve readability and fix unthemed elements

styles/pinterest/catppuccin.user.css

@@ -2,7 +2,7 @@
 @name Pinterest Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/pinterest
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest
-@version 1.1.7
+@version 1.1.9
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.css
 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest
 @description Soothing pastel theme for Pinterest
@@ -112,10 +112,12 @@
     --color-background-tag-primary-default: @surface1;
     --color-background-button-disabled-default: darken(@mantle, 2%);
     --color-background-formfield-primary: @surface0;
+    --color-background-avatar-placeholder: @mantle;
     --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-text-success: @green;
     --color-text-warning: @yellow;
     --color-icon-success: @green;
@@ -128,6 +130,14 @@
     --color-background-brand: @accent-color;
     --color-background-box-brand: @accent-color;
     --color-background-button-primary-default: @accent-color;
+    --color-background-button-primary-hover: desaturate(
+      darken(@accent-color, 12%),
+      20%
+    );
+    --color-background-button-primary-active: desaturate(
+      darken(@accent-color, 30%),
+      30%
+    );
     --color-background-badge-warning: @yellow;
     --color-background-badge-success: @green;
     --color-background-education: @blue;
@@ -149,7 +159,7 @@
     --g-colorRed100Hovered: darken(@accent-color, 7.5%);
     --g-colorRed100Active: darken(@accent-color, 10%);
     --g-color-focus: fadeout(@accent-color, 50%);
-    --color-gray-roboflow-400: @crust;
+    --color-gray-roboflow-400: @surface2;
     --color-gray-roboflow-200: @mantle;
 
     --g-blue: @accent-color;
@@ -193,11 +203,15 @@
       color: var(--color-text-inverse);
     }
 
+    // Profile button
+    // Invite collaborators buttons
+    div[style="border: 1px solid white;"],
     div[data-test-id="gestalt-avatar-svg"] {
-      box-shadow: 0 0 0 1px @crust !important;
+      outline-color: @base !important;
+      border-color: @base !important;
 
-      text {
-        fill: @subtext1 !important;
+      .WhU {
+        background-color: @surface1;
       }
     }
 
@@ -220,6 +234,14 @@
       }
     }
 
+    div[role="tooltip"] {
+      background-color: @surface0;
+      color: @text;
+      .B1n {
+        color: @text;
+      }
+    }
+
     // Pin hover icons (and other icons)
     .Uvi.gUZ.U9O.kVc {
       color: @text;
@@ -264,8 +286,7 @@
         background-color: @mantle !important;
       }
 
-      div[style="padding: 0px 0px 0px 16px; height: 100%; border-radius: 24px; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px;"],
-      div[style="padding: 0px 4px 0px 16px; height: 100%; border-radius: 24px; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px;"] {
+      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;
       }
 
@@ -297,26 +318,21 @@
       background: none !important;
     }
 
-    // remove bar
-    .fZz.imm.zI7.iyn.Hsu {
-      background-color: @base;
-    }
-
-    // "created" and "saved" button backgrounds
-    .DUt.XiG._wN.hA-.wYR.zI7.iyn.Hsu {
-      background-color: transparent !important;
-    }
-
     /* Pins */
 
-    div[data-test-id="PinBetterSaveDropdown"],
+    // board name to save to
+    // preview / dropdown
+    [data-test-id="PinBetterSaveDropdown"],
     div[data-test-id="boardSelectionDropdown"] {
-      .xnr {
+      .B1n {
         color: var(--color-text-light);
       }
-
-      .PLa {
-        color: var(--color-text-icon-light);
+      .AR6 {
+        color: var(--color-text-light);
+      }
+      // background when opened
+      .G0a {
+        background-color: @mantle !important;
       }
     }
 
@@ -355,57 +371,95 @@
       box-shadow: 0 0 0 1px @crust !important;
     }
 
-    div[data-test-id="toast"] span div {
-      color: @mantle !important;
-    }
-
-    // board name to save to preview / dropdown
-    .tBJ.dyH.iFc.sAJ.B1n.zDA.IZT.H2s.CKL {
-      color: var(--color-text-light) !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
-    .x8f.INd._O1.KS5.mQ8.NSs {
-      background-color: @crust !important;
+    .NSs {
+      background-color: @mantle !important;
     }
 
-    // Save button background
-    .akY.KI_.Hsu.USg.CCY.S9z.z_v.BG7.LDc.xD4.fZz.hUC.adn.Rk4.d24._O1.KS5.mQ8.Tbt.L4E.jKZ {
-      background-color: @accent-color !important;
-      //color: @text !important;
+    // Save button
+    button[aria-label="Save"] {
+      // text
+      .B1n {
+        color: var(--color-text-inverse);
+      }
     }
 
-    // Save button text
-    .tBJ.dyH.iFc.sAJ.B1n.tg7.IZT.H2s {
-      color: var(--color-text-light) !important;
+    // Button when saved
+    button[aria-label="Pin Saved"] {
+      // text
+      .B1n {
+        color: @text;
+      }
+      // background
+      .kJo {
+        background-color: @surface0;
+      }
+      // border
+      .gSJ {
+        border-color: transparent;
+      }
     }
 
-    // Saved button background
-    .akY.KI_.Hsu.USg.CCY.S9z.z_v.BG7.LDc.xD4.fZz.hUC.kJo.gSJ.d24._O1.KS5.mQ8.Tbt.L4E.jKZ {
+    // pin editing popout
+    // text
+    .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG {
+      color: @text !important;
+    }
+    // buttons when hovered
+    .TzN {
       background-color: @surface2 !important;
-      border-color: transparent;
+    }
+    // pin notes
+    textarea[id="PinNoteField"] {
+      color: @text;
     }
 
-    // board picker flyout button
-    button[aria-label="save button"] {
-      .RCK.Hsu.USg.adn.CCY.NTm.KhY.S9z.Vxj.aZc.Zr3.hA-.Il7.hNT.BG7.hDj._O1.KS5.mQ8.Tbt.L4E {
-        background-color: @accent-color;
-        color: @accent-color;
-      }
+    /* 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;
     }
 
-    // "Saved to __" popup text
-    .tBJ.dyH.iFc.j1A.X8m.zDA.swG {
-      color: var(--color-text-light) !important;
+    div[data-test-id="closeup-body-sticky-content"] {
+      background-color: @mantle;
     }
 
-    /* Pin page */
+    div[data-test-id="closeup-action-items"] {
+      background-color: @mantle;
+      .imm {
+        background-color: @mantle;
+      }
+    }
 
     // comment bar
     div[data-test-id="inline-comment-composer-container"] {
-      border-color: transparent !important;
-      background: transparent !important;
+      border-color: @mantle !important;
+      background: @mantle !important;
     }
+
     div.public-DraftEditorPlaceholder-root {
       color: @subtext1!important;
     }
@@ -432,10 +486,11 @@
       }
     }
 
+    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: fadeout(@base, 20%) !important;
+      background-color: fadeout(@base, 15%) !important;
     }
 
     div[data-test-id="flashlight-dot-style"] {
@@ -520,6 +575,21 @@
       }
     }
 
+    // remove profile bar
+    .imm {
+      background-color: @base;
+    }
+
+    // "created" and "saved" button backgrounds on main profile page
+    .DUt.XiG._co._wN.hjq.zI7.iyn.Hsu {
+      background-color: @surface0 !important;
+    }
+
+    // Hide ugly block around section previews
+    .imm[data-test-id^="section"] {
+      background-color: transparent;
+    }
+
     /* Settings */
 
     input[type="checkbox"] ~ div {
@@ -576,7 +646,7 @@
 
     /* Create */
 
-    div[style="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index: 1;"] {
+    div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] {
       background-color: fadeout(@base, 20%) !important;
     }
 
@@ -764,13 +834,19 @@
       background: @base !important;
     }
     // pin external link on hover
-    .Jea.KS5.MIw.RDc.Rym.b8T.ho-.ojN.rDA.zI7.iyn.Hsu {
-      background: @surface0 !important;
+    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 body shadow
-    [data-test-id="closeup-body-landscape"] {
-      .Mhr.l7T.zI7.iyn.Hsu {
-        box-shadow: 0 1px 20px 0 fade(@text, 10%) !important;
+
+    // "more" buttom
+    [aria-label="more"] {
+      .NSs {
+        background: @surface0;
       }
     }
   }