fix(google): unthemed elements (#1353)

* footer logo * "Looking for results in English?" in lightmode * tweets horizontal list * don't theme the gradient behind arrow buttons in the categories bar in the images page because it already uses variables and it breaks on rtl layouts * image stuff * advanced search page * search icon * bump version
catppuccin · Oct 6, 2024 · 975136d · 975136d
1 parent 0558643
commit 975136d
Showing 1 changed file with 92 additions and 7 deletions.
diff --git a/styles/google/catppuccin.user.css b/styles/google/catppuccin.user.css
@@ -2,7 +2,7 @@
 @name Google Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/google
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google
-@version 0.3.0
+@version 0.3.1
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.css
 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle
 @description Soothing pastel theme for Google
@@ -86,11 +86,15 @@
       --uv-styles-color-icon-on-secondary: @subtext0;
       --uv-styles-color-on-tertiary: @text;
       --uv-styles-color-icon-on-tertiary: @text;
+      --uv-styles-color-scrim: fade(@crust, 75%);
+      --uv-styles-color-on-scrim: @text;
+      --uv-styles-color-icon-on-scrim: @text;
       --xhUGwc: @base;
       --bbQxAb: @text;
       --IXoxUe: @subtext0;
       --COEmY: @text;
       --YLNNHc: @text;
+      --JKqx2: @blue;
       --gS5jXb: @surface0;
       --mXZkqc: @surface0;
       --EpFNW: @mantle;
@@ -644,6 +648,12 @@
       background-color: @surface0;
       border-color: @surface0 !important;
     }
+    .sb43 {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40" height="124" viewBox="0 0 10.583 32.808"><g opacity="1"><path d="m1.413 30.263-.631-.63 3.336-3.36 1.803 1.804 2.344-2.322H7.093v-.901h2.705v2.704h-.902v-1.172l-2.975 2.976-1.803-1.804Z" fill="@{subtext1}" fill-opacity=".992157" stroke-width=".391936"/><g fill="#e8eaed" stroke-width=".742615"><path fill="none" d="M1.016 12.129h8.551v8.551H1.016Z" fill-opacity="1" stroke-width=".742615"/><path d="M5.288 12.842a3.562 3.562 0 1 0 3.566 3.562 3.564 3.564 0 0 0-3.566-3.562m.003 6.413a2.85 2.85 0 1 1 0-5.7 2.85 2.85 0 1 1 0 5.7m.179-4.632h-.535v2.138l1.87 1.122.268-.438-1.603-.951z" display="inline" fill="@{subtext1}" fill-opacity=".992157" stroke-width=".742615"/></g><g fill="none" stroke-width=".6"><path d="M0 0h10.583v10.583H0Z" fill="none" stroke-width=".6"/><path d="M6.835 6.174h-.348l-.124-.12a2.85 2.85 0 0 0 .693-1.865 2.866 2.866 0 1 0-2.867 2.867c.71 0 1.363-.26 1.866-.693l.119.124v.348l2.204 2.2.657-.657zm-2.646 0c-1.098 0-1.984-.887-1.984-1.985s.886-1.984 1.984-1.984 1.985.886 1.985 1.984-.887 1.985-1.985 1.985" fill="@{subtext1}" fill-opacity=".996078" stroke-width=".6"/></g></g></svg>'
+      );
+      background-image: url("data:image/svg+xml,@{svg}");
+    }
 
     /* text */
     .SAuUUd-z5C9Gb-fmcmS,
@@ -873,7 +883,7 @@
     }
     .z1asCe,
     .ikb4Bb {
-      color: @text !important;
+      color: @subtext1 !important;
     }
     .rsGxI.Ww4FFb,
     .Ww4FFb {
@@ -1057,6 +1067,9 @@
       border-color: @surface1;
       background-color: @base;
     }
+    .PewBWb {
+      border-top-color: @surface1;
+    }
     .eadHV.Ses7yd {
       color: @text !important;
     }
@@ -1305,9 +1318,6 @@
     a:visited {
       color: @mauve;
     }
-    .F9Idpe {
-      background: linear-gradient(to right, transparent 0%, @base 60%, @base);
-    }
     .SvoXfb > .x5f7Bc {
       fill: @subtext0;
     }
@@ -2067,11 +2077,13 @@
       color: @subtext0 !important;
     }
     // "Looking for results in English?" popup
-    [style*="background:#1f1000;border:1px solid #502900"] {
+    [style*="background:#1f1000;border:1px solid #502900"],
+    [style*="background:#feefc3;border:1px solid #fdd663"] {
       background: @mantle !important;
       border-color: @surface0 !important;
       box-shadow: 0 2px 4px @mantle !important;
-      [style*="color:#bdc1c6"] {
+      [style*="color:#bdc1c6"],
+      [style*="color:#202124"] {
         color: @text !important;
       }
     }
@@ -2141,6 +2153,79 @@
         @mantle
       );
     }
+    // footer logo
+    [style^="background:url(/images/nav_logo321.webp)"] {
+      @svg: escape(
+        '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="167" height="410" viewBox="0 0 44.185 108.479"><g display="inline" opacity="1"><g stroke-width="2.34531"><path fill="@{red}" d="M19.105 5.216c0 1.406-1.1 2.442-2.45 2.442-1.348 0-2.448-1.036-2.448-2.442 0-1.415 1.1-2.44 2.449-2.44s2.449 1.025 2.449 2.44m-1.072 0c0-.878-.637-1.479-1.377-1.479s-1.377.601-1.377 1.48c0 .869.637 1.479 1.377 1.479s1.377-.611 1.377-1.48" stroke-width="2.34531"/><path fill="@{yellow}" d="M24.605 5.216c0 1.406-1.1 2.442-2.449 2.442s-2.449-1.036-2.449-2.442c0-1.414 1.1-2.44 2.45-2.44s2.448 1.025 2.448 2.44m-1.072 0c0-.878-.637-1.479-1.377-1.479s-1.377.601-1.377 1.48c0 .869.638 1.479 1.377 1.479.74 0 1.377-.611 1.377-1.48" stroke-width="2.34531"/><path fill="@{blue}" d="M30.128 2.97v4.14c0 1.704-1.004 2.4-2.192 2.4-1.118 0-1.791-.748-2.045-1.36l.882-.367c.157.376.542.819 1.162.819.76 0 1.231-.47 1.231-1.353V6.92h-.035c-.227.28-.664.524-1.215.524-1.153 0-2.21-1.005-2.21-2.298 0-1.302 1.057-2.315 2.21-2.315.55 0 .987.245 1.215.516h.035v-.375zm-.89 2.175c0-.812-.542-1.406-1.231-1.406-.7 0-1.285.594-1.285 1.406 0 .804.585 1.39 1.285 1.39.689 0 1.23-.586 1.23-1.39" stroke-width="2.34531"/><path fill="@{green}" d="M31.994.433v6.975h-1.02V.433Z" stroke-width="2.34531"/><path fill="@{red}" d="m35.975 5.902.8.534a2.34 2.34 0 0 1-1.957 1.042c-1.335 0-2.332-1.032-2.332-2.35 0-1.398 1.005-2.35 2.216-2.35 1.22 0 1.816.97 2.011 1.494l.107.267-3.142 1.302c.241.471.615.712 1.14.712s.89-.259 1.157-.65m-2.466-.847 2.1-.872c-.115-.293-.463-.498-.872-.498-.524 0-1.254.463-1.228 1.37" stroke-width="2.34531"/><path fill="@{blue}" d="M10.245 4.607V3.579h3.462c.033.18.05.391.05.62 0 .77-.21 1.724-.889 2.403-.66.688-1.504 1.054-2.622 1.054-2.071 0-3.813-1.687-3.813-3.759S8.175.137 10.246.137c1.147 0 1.963.45 2.576 1.037l-.724.725a2.62 2.62 0 0 0-1.853-.734c-1.513 0-2.696 1.22-2.696 2.732S8.732 6.63 10.245 6.63c.982 0 1.54-.394 1.899-.752.29-.29.48-.705.556-1.271z" stroke-width="2.34531"/></g><path d="M1.587 2.646.264 3.969l1.323 1.323" display="inline" opacity="1" fill="none" fill-opacity="1" stroke="@{blue}" stroke-width=".529167" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m42.598 2.646 1.323 1.323-1.323 1.323" display="inline" fill="none" fill-opacity="1" stroke="@{blue}" stroke-width=".529167" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><g display="inline" stroke-width="3.0127"><path fill="@{red}" d="M10.847 15.875c0 1.122-.877 1.948-1.954 1.948s-1.954-.826-1.954-1.948c0-1.129.877-1.948 1.954-1.948s1.954.819 1.954 1.948m-.855 0c0-.7-.509-1.18-1.1-1.18s-1.098.48-1.098 1.18c0 .694.509 1.18 1.099 1.18s1.099-.487 1.099-1.18" stroke-width="3.0127"/><path fill="@{yellow}" d="M15.06 15.875c0 1.122-.877 1.948-1.953 1.948s-1.954-.826-1.954-1.948c0-1.128.877-1.948 1.954-1.948s1.954.819 1.954 1.948m-.856 0c0-.7-.508-1.18-1.098-1.18s-1.1.48-1.1 1.18c0 .694.51 1.18 1.1 1.18s1.098-.487 1.098-1.18" stroke-width="3.0127"/><path fill="@{blue}" d="M19.1 14.045v3.497c0 1.439-.848 2.026-1.851 2.026a1.855 1.855 0 0 1-1.727-1.148l.745-.31c.133.317.458.692.981.692.642 0 1.04-.397 1.04-1.142v-.28h-.03c-.191.236-.56.442-1.026.442-.974 0-1.866-.848-1.866-1.94 0-1.1.892-1.955 1.866-1.955.465 0 .834.207 1.026.436h.03v-.317h.812zm-.751 1.837c0-.686-.458-1.187-1.04-1.187-.59 0-1.085.501-1.085 1.187 0 .68.495 1.174 1.085 1.174.582 0 1.04-.495 1.04-1.174" stroke-width="3.0127"/><path fill="@{green}" d="M20.44 11.995v5.709h-.835v-5.709Z" stroke-width="3.0127"/><path fill="@{red}" d="m23.607 16.517.664.443c-.215.317-.73.863-1.623.863-1.107 0-1.933-.855-1.933-1.948 0-1.158.833-1.948 1.837-1.948 1.01 0 1.505.805 1.667 1.24l.089.22-2.604 1.08c.2.39.51.59.944.59.435 0 .738-.215.959-.54m-2.044-.7 1.74-.723c-.095-.244-.383-.413-.722-.413-.435 0-1.04.384-1.018 1.136" stroke-width="3.0127"/><path fill="@{blue}" d="M3.78 15.369v-.827h2.784c.027.144.041.315.041.5 0 .62-.17 1.386-.716 1.932-.53.553-1.21.848-2.109.848-1.667 0-3.068-1.357-3.068-3.024s1.401-3.025 3.068-3.025c.922 0 1.579.362 2.073.834l-.584.583a2.1 2.1 0 0 0-1.49-.59c-1.217 0-2.169.98-2.169 2.198s.952 2.198 2.17 2.198c.789 0 1.238-.317 1.526-.605.234-.234.388-.567.448-1.023z" stroke-width="3.0127"/></g><g display="inline" opacity="1" stroke-width="2.34531"><path fill="@{blue}" d="M19.069 34.844c0 1.405-1.1 2.44-2.45 2.44-1.349 0-2.448-1.035-2.448-2.44 0-1.416 1.1-2.442 2.449-2.442s2.449 1.026 2.449 2.442m-1.072 0c0-.879-.637-1.48-1.377-1.48s-1.377.601-1.377 1.48c0 .87.637 1.479 1.377 1.479s1.377-.61 1.377-1.48z" fill-opacity="1" stroke-width="2.34531"/><path fill="@{text}" d="M24.513 34.815c0 1.39-1.087 2.414-2.421 2.414s-2.42-1.024-2.42-2.414c0-1.398 1.086-2.413 2.42-2.413s2.42 1.014 2.42 2.413zm-1.06 0c0-.868-.63-1.462-1.361-1.462s-1.36.594-1.36 1.462c0 .86.629 1.463 1.36 1.463s1.361-.604 1.361-1.463m6.885-2.394v4.47c0 1.839-1.084 2.59-2.366 2.59-1.207 0-1.933-.808-2.207-1.468l.952-.396c.17.405.584.884 1.254.884.82 0 1.329-.507 1.329-1.46v-.358h-.038c-.245.302-.717.566-1.312.566-1.245 0-2.385-1.085-2.385-2.48 0-1.405 1.14-2.499 2.385-2.499.594 0 1.066.264 1.312.557h.038v-.405zm-.961 2.348c0-.877-.585-1.518-1.33-1.518-.754 0-1.386.641-1.386 1.518 0 .868.632 1.5 1.387 1.5.744 0 1.33-.632 1.33-1.5m2.542-4.896v7.436h-1.086v-7.436Z" fill-opacity="1" stroke-width="2.34531"/><path fill="@{text}" d="m36.124 35.602.868.579a2.53 2.53 0 0 1-2.121 1.128c-1.446 0-2.526-1.118-2.526-2.546 0-1.514 1.089-2.546 2.4-2.546 1.322 0 1.968 1.052 2.18 1.62l.115.29-3.403 1.409c.26.51.666.771 1.234.771.57 0 .964-.28 1.253-.705m-2.67-.916 2.274-.944c-.125-.318-.501-.54-.944-.54-.569 0-1.36.502-1.33 1.484" fill-opacity="1" stroke-width="2.3453"/><path fill="@{text}" d="M10.104 34.047v-1.028h3.462c.033.18.05.391.05.62 0 .77-.21 1.724-.889 2.403-.66.688-1.504 1.054-2.622 1.054-2.071 0-3.813-1.687-3.813-3.759s1.742-3.76 3.813-3.76c1.147 0 1.963.45 2.576 1.037l-.724.725a2.62 2.62 0 0 0-1.853-.734c-1.513 0-2.696 1.22-2.696 2.732s1.183 2.732 2.696 2.732c.982 0 1.54-.394 1.899-.752.29-.29.48-.705.556-1.271z" fill-opacity="1" stroke-width="2.34531"/></g><path d="M29.746 28.574h.311v-.934h-.311zm.155-1.245q.067 0 .111-.045t.045-.11-.045-.111-.11-.045-.111.045-.045.11.045.111.11.045m0 2.023q-.322 0-.606-.123t-.494-.332-.333-.494-.123-.607.123-.607.333-.494.494-.332.606-.123.607.123.494.332.333.494.122.607-.122.607-.333.494-.494.332-.607.123" fill="@{crust}" fill-opacity=".2" stroke-width="1.70213" display="inline" opacity="1"/><g display="inline"><path d="M1.587 32.279.264 33.602l1.323 1.323" display="inline" opacity="1" fill="none" fill-opacity="1" stroke="@{blue}" stroke-width=".529167" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m42.598 32.279 1.323 1.323-1.323 1.323" display="inline" fill="none" fill-opacity="1" stroke="@{blue}" stroke-width=".529167" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/></g><g stroke-width="3.0127"><path fill="@{red}" d="M10.12 103.43c0 1.122-.877 1.948-1.954 1.948s-1.954-.826-1.954-1.948c0-1.129.877-1.948 1.954-1.948s1.954.819 1.954 1.948m-.855 0c0-.7-.509-1.18-1.1-1.18s-1.098.48-1.098 1.18c0 .694.509 1.18 1.099 1.18s1.099-.487 1.099-1.18" stroke-width="3.0127"/><path fill="@{yellow}" d="M14.334 103.43c0 1.122-.878 1.948-1.954 1.948s-1.954-.826-1.954-1.948c0-1.128.877-1.948 1.954-1.948s1.954.819 1.954 1.948m-.856 0c0-.7-.508-1.18-1.098-1.18s-1.1.48-1.1 1.18c0 .694.51 1.18 1.1 1.18s1.098-.487 1.098-1.18" stroke-width="3.0127"/><path fill="@{blue}" d="M18.373 101.6v3.497c0 1.439-.848 2.026-1.851 2.026a1.855 1.855 0 0 1-1.727-1.148l.745-.31c.133.317.458.692.981.692.642 0 1.04-.397 1.04-1.142v-.28h-.03c-.191.236-.56.442-1.026.442-.974 0-1.866-.848-1.866-1.94 0-1.1.892-1.954 1.866-1.954.465 0 .834.206 1.026.435h.03v-.317h.812zm-.751 1.837c0-.686-.458-1.187-1.04-1.187-.59 0-1.085.501-1.085 1.187 0 .68.495 1.174 1.085 1.174.582 0 1.04-.495 1.04-1.174" stroke-width="3.0127"/><path fill="@{green}" d="M19.713 99.55v5.709h-.835V99.55Z" stroke-width="3.0127"/><path fill="@{red}" d="m22.964 104.071.664.443a1.94 1.94 0 0 1-1.623.863c-1.107 0-1.933-.855-1.933-1.948 0-1.158.833-1.947 1.837-1.947 1.01 0 1.505.804 1.667 1.239l.088.221-2.603 1.078c.199.391.509.59.944.59s.737-.214.959-.539m-2.044-.7 1.74-.723c-.095-.243-.383-.413-.722-.413-.435 0-1.04.384-1.018 1.136" stroke-width="3.0127"/><path fill="@{blue}" d="M3.052 102.924v-.827h2.785c.027.144.041.315.041.5 0 .62-.17 1.386-.716 1.932-.53.553-1.21.848-2.109.848-1.667 0-3.068-1.357-3.068-3.024s1.401-3.025 3.068-3.025c.922 0 1.579.362 2.073.834l-.584.583a2.1 2.1 0 0 0-1.49-.59c-1.217 0-2.169.98-2.169 2.198s.952 2.198 2.17 2.198c.789 0 1.238-.317 1.526-.605.234-.234.388-.567.448-1.023z" stroke-width="3.0127"/></g><g display="inline"><path d="m28.167 68.858.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" opacity="1" fill="@{subtext0}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m31.63 68.858.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" display="inline" fill="@{subtext0}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m35.07 68.858.408 1.257H36.8l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323zm3.463 0 .408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" display="inline" fill="@{subtext0}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m41.994 68.858.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" display="inline" fill="@{subtext0}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><g display="inline"><path d="m28.167 72.843.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" opacity="1" fill="@{yellow}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m31.63 72.843.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" display="inline" fill="@{yellow}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m35.07 72.843.408 1.257H36.8l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323zm3.463 0 .408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258L36.8 74.1h1.323z" display="inline" fill="@{yellow}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/><path d="m41.994 72.843.408 1.257h1.322l-1.069.777.408 1.258-1.07-.777-1.07.777.41-1.258-1.071-.777h1.323z" display="inline" fill="@{yellow}" fill-opacity="1" stroke="none" stroke-width=".538433" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" stroke-opacity="1"/></g></g></g></svg>'
+      );
+      background-image: url("data:image/svg+xml,@{svg}") !important;
+    }
+    // tweets horizontal list
+    g-right-button,
+    g-left-button {
+      & > g-fab {
+        background: @crust !important;
+        border-color: @surface0;
+      }
+    }
+    .vwfsqc {
+      .QuU3Wb {
+        color: @text;
+      }
+    }
+    // image overlays
+    .yUzGqc.wr8GYd {
+      background: fade(@crust, 75%);
+      color: @text;
+    }
+    // google lens icon hover
+    .ig2Tkd:hover:not(.RDPZE) {
+      background: fade(@mantle, 80%);
+    }
+    // image resolution
+    .UWuvyf {
+      background-color: fade(@crust, 80%);
+      color: @text;
+    }
+    // image hover shadow
+    .mkpRId.qyKxnc:hover .F0uyec {
+      background: fade(@crust, 5%);
+      box-shadow: 0 2px 12px 0 @crust;
+    }
+    // advanced search
+    input.jfk-textinput,
+    .gGbPid {
+      background: @base;
+      color: @text;
+      border-color: @overlay0;
+    }
+    .goog-menu {
+      background: @mantle;
+    }
+    .goog-menuitem-highlight,
+    .goog-menuitem-hover {
+      background: @surface0;
+      border-color: @surface0;
+    }
+    .goog-menuitem,
+    .goog-menuitem-highlight .goog-menuitem-content,
+    .goog-menuitem-hover .goog-menuitem-content {
+      color: @text;
+    }
+    .goog-flat-menu-button-hover {
+      border-color: @overlay2;
+      .goog-flat-menu-button-dropdown {
+        border-color: @overlay2 transparent;
+      }
+    }
+    .goog-flat-menu-button-dropdown {
+      border-color: @overlay0 transparent;
+    }
+    div.otByu div.FAcADc,
+    div.lFApYd,
+    .jfk-radiobutton-label {
+      color: @subtext1;
+    }
     color: @subtext0;
   }
   @media (prefers-color-scheme: light) {