Added the ability to configure the inner content border multiplier of bar buttons. (#462)

options.ts

@@ -175,6 +175,7 @@ const options = mkOptions(OPTIONS, {
                 padding_y: opt('0.2rem'),
                 y_margins: opt('0.4em'),
                 radius: opt('0.3em'),
+                innerRadiusMultiplier: opt('0.4'),
                 opacity: opt(100),
                 background_opacity: opt(100),
                 background_hover_opacity: opt(100),

scss/style/bar/audio.scss

@@ -19,12 +19,12 @@
         padding-right: $bar-buttons-volume-spacing;
         border-top-left-radius: if(
             $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
@@ -40,12 +40,12 @@
         .bar-button-icon.volume {
             border-top-right-radius: if(
                 $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/battery.scss

@@ -17,12 +17,12 @@
         padding-right: $bar-buttons-battery-spacing;
         border-top-left-radius: if(
             $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
 
@@ -42,12 +42,12 @@
         .bar-button-icon.battery {
             border-top-right-radius: if(
                 $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/bluetooth.scss

@@ -29,12 +29,12 @@
         padding-right: $bar-buttons-bluetooth-spacing;
         border-top-left-radius: if(
             $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
@@ -50,12 +50,12 @@
         .bar-button-icon.bluetooth {
             border-top-right-radius: if(
                 $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/clock.scss

@@ -18,12 +18,12 @@
         padding-right: $bar-buttons-clock-spacing;
         border-top-left-radius: if(
             $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
@@ -39,12 +39,12 @@
         .bar-button-icon.clock {
             border-top-right-radius: if(
                 $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/media.scss

@@ -16,12 +16,12 @@
         padding-right: $bar-buttons-media-spacing;
         border-top-left-radius: if(
             $bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);

scss/style/bar/network.scss

@@ -17,12 +17,12 @@
         padding-right: $bar-buttons-network-spacing;
         border-top-left-radius: if(
             $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
@@ -38,12 +38,12 @@
         .bar-button-icon.network-icon {
             border-top-right-radius: if(
                 $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/notifications.scss

@@ -23,12 +23,12 @@
         padding-right: $bar-buttons-notifications-spacing;
         border-top-left-radius: if(
             $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         &:last-child {
@@ -49,12 +49,12 @@
         .bar-button-icon.notifications {
             border-top-right-radius: if(
                 $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/bar/window_title.scss

@@ -21,12 +21,12 @@
         padding-right: $bar-buttons-windowtitle-spacing;
         border-top-left-radius: if(
             $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         border-bottom-left-radius: if(
             $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * 0.4,
+            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon);
@@ -46,12 +46,12 @@
         .bar-button-icon.windowtitle {
             border-top-right-radius: if(
                 $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-right-radius: if(
                 $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }

scss/style/customModules/style.scss

@@ -92,12 +92,12 @@
             color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
             border-top-left-radius: if(
                 $borderEnabled or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
             border-bottom-left-radius: if(
                 $borderEnabled or $bar-buttons-enableBorders,
-                $bar-buttons-radius * 0.4,
+                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                 $bar-buttons-radius
             );
         }
@@ -113,12 +113,12 @@
             .module-icon {
                 border-top-right-radius: if(
                     $borderEnabled or $bar-buttons-enableBorders,
-                    $bar-buttons-radius * 0.4,
+                    $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                     $bar-buttons-radius
                 );
                 border-bottom-right-radius: if(
                     $borderEnabled or $bar-buttons-enableBorders,
-                    $bar-buttons-radius * 0.4,
+                    $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
                     $bar-buttons-radius
                 );
             }

widget/settings/pages/config/bar/index.ts

@@ -108,6 +108,14 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     title: 'Button Radius',
                     type: 'string',
                 }),
+                Option({
+                    opt: options.theme.bar.buttons.innerRadiusMultiplier,
+                    title: 'Inner Button Radius Multiplier',
+                    subtitle:
+                        'Change this to fine-tune the padding and prevent any overflow' +
+                        ' or gaps between the content and the border',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.theme.bar.layer,
                     title: 'Layer',