less border

Less border for notification popups and menu

modules/notifpopups.tsx

@@ -2,6 +2,7 @@ import { GLib, register, timeout } from "astal";
 import { Astal, Gtk, Widget } from "astal/gtk3";
 import AstalNotifd from "gi://AstalNotifd";
 import { desktopEntrySubs } from "../utils/icons";
+import { setupChildClickthrough } from "../utils/widgets";
 
 const urgencyToString = (urgency: AstalNotifd.Urgency) => {
     switch (urgency) {
@@ -166,7 +167,7 @@ export default () => (
                 });
 
                 // Change input region to child region so can click through empty space
-                self.connect("size-allocate", () => self.get_window()?.set_child_input_shapes());
+                setupChildClickthrough(self);
             }}
         />
     </window>

scss/_lib.scss

@@ -11,11 +11,7 @@ $scale: 0.068rem;
     -gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
 }
 
-@mixin border($colour, $width: 1, $style: solid) {
-    border: s($width) $style $colour;
-}
-
-@mixin outer-border($colour, $alpha: 0.7, $width: 2, $style: solid) {
+@mixin border($colour, $alpha: 1, $width: 1, $style: solid) {
     border: s($width) $style color.change($colour, $alpha: $alpha);
 }
 

scss/bar.scss

@@ -5,7 +5,7 @@
 
 .bar {
     @include lib.rounded(10, $tl: 0, $tr: 0);
-    @include lib.outer-border(scheme.$rosewater);
+    @include lib.border(scheme.$rosewater, 0.7, 2);
     @include lib.spacing(10);
     @include font.mono;
 

scss/notifpopups.scss

@@ -4,7 +4,7 @@
 @use "font";
 
 @mixin popup($colour) {
-    @include lib.outer-border($colour);
+    @include lib.border($colour, 0.5);
 
     border-right: none;
 
@@ -13,7 +13,7 @@
     }
 
     .image {
-        @include lib.border(color.change($colour, $alpha: 0.05));
+        @include lib.border($colour, 0.05);
     }
 }
 

scss/widgets.scss

@@ -3,6 +3,16 @@
 @use "lib";
 @use "font";
 
+* {
+    selection {
+        background-color: color.change(scheme.$overlay2, $alpha: 0.3);
+    }
+
+    & {
+        caret-color: scheme.$rosewater;
+    }
+}
+
 label.icon {
     @include font.icon;
 }
@@ -35,7 +45,7 @@ separator,
 menu {
     @include -appear;
     @include lib.rounded(5);
-    @include lib.border(color.change(scheme.$blue, $alpha: 0.7), 2);
+    @include lib.border(scheme.$blue, 0.7);
     @include font.main;
 
     padding: lib.s(10);
@@ -88,7 +98,7 @@ menu {
 tooltip,
 .tooltip {
     @include lib.rounded(5);
-    @include lib.border(color.change(scheme.$teal, $alpha: 0.7));
+    @include lib.border(scheme.$teal, 0.7);
     @include font.reading;
 
     background-color: scheme.$surface0;

utils/widgets.tsx

@@ -43,3 +43,6 @@ export const setupCustomTooltip = (self: any, text: string | Binding<string>) =>
 
     return window;
 };
+
+export const setupChildClickthrough = (self: any) =>
+    self.connect("size-allocate", () => self.get_window()?.set_child_input_shapes());