feat(hackage): use an svg for the synopsis toggle (#1556)

catppuccin · Jan 4, 2025 · 1924c37 · 1924c37
1 parent a035d04
commit 1924c37
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less
@@ -55,7 +55,6 @@
     @accent: @catppuccin[@@flavor][@@accentColor];
 
     @text-filter: @catppuccin-filters[@@flavor][@text];
-    @surface0-filter: @catppuccin-filters[@@flavor][@surface0];
 
     color-scheme: if(@flavor = latte, light, dark);
 
@@ -286,7 +285,10 @@
     #synopsis {
       summary,
       #control\.syn {
-        filter: @surface0-filter;
+        @svg: escape(
+          '<svg width="128" height="104" viewBox="0 0 128 104" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><filter id="a" x="-.06" y="-.03" width="1.14" height="1.07" color-interpolation-filters="sRGB"><feFlood flood-color="#000" flood-opacity=".498" result="flood"/><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1"/><feOffset dx="1" dy="1" in="blur" result="offset"/><feComposite in="flood" in2="offset" operator="in" result="comp1"/><feComposite in="SourceGraphic" in2="comp1" result="comp2"/></filter><filter id="b" x="-.06" y="-.03" width="1.14" height="1.07" color-interpolation-filters="sRGB"><feFlood flood-color="#000" flood-opacity=".498" result="flood"/><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1"/><feOffset dx="1" dy="1" in="blur" result="offset"/><feComposite in="flood" in2="offset" operator="in" result="comp1"/><feComposite in="SourceGraphic" in2="comp1" result="comp2"/></filter></defs><g transform="translate(64)" filter="url(#a)"><rect x="8.5" y="8.5" width="40" height="80" rx="4" ry="4" fill="@{surface0}"/><text transform="matrix(0 -.995 1 0 0 0)" x="-86.188" y="23.735" fill="@{subtext1}" xml:space="preserve"><tspan x="-86.188" y="23.735" font-family="&quot;PT Sans&quot;,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen-Sans,Cantarell,&quot;Helvetica Neue&quot;,sans-serif" font-size="16">Synopsis</tspan></text><g fill="@{overlay0}"><rect transform="scale(-1 1)rotate(-45)" x="-28.7" y="-6.53" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="rotate(-45)" x="-1.47" y="26.3" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="scale(-1 1)rotate(-45)" x="-23.7" y="-1.58" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="rotate(-45)" x="-6.42" y="21.4" width="7.88" height="2.46" rx=".985" ry=".985"/></g></g><g filter="url(#b)"><rect x="8.5" y="8.5" width="40" height="80" rx="4" ry="4" fill="@{surface0}"/><text transform="matrix(0 -.995 1 0 0 0)" x="-86.188" y="23.735" fill="@{subtext1}" xml:space="preserve"><tspan x="-86.188" y="23.735" font-family="&quot;PT Sans&quot;,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen-Sans,Cantarell,&quot;Helvetica Neue&quot;,sans-serif" font-size="16">Synopsis</tspan></text><g fill="@{overlay0}"><rect transform="rotate(-45)" x="-3.59" y="18.6" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="scale(-1 1)rotate(-45)" x="-26.6" y="1.24" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="rotate(-45)" x="1.36" y="23.5" width="7.88" height="2.46" rx=".985" ry=".985"/><rect transform="scale(-1 1)rotate(-45)" x="-31.5" y="-3.71" width="7.88" height="2.46" rx=".985" ry=".985"/></g></g></svg>'
+        );
+        background-image: url("data:image/svg+xml,@{svg}") !important;
       }
 
       ul {