From 6250c2b3be24574af7f41dee94f67e74db5386f5 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 5 Nov 2024 20:59:29 -0800
Subject: [PATCH] Added the ability to scale a popover. (#443)

* Added the ability to scale a popover.

* Removed redundant code
---
 options.ts                                    |   1 +
 scss/main.scss                                |  75 +-
 scss/style/common/common.scss                 | 262 +++---
 scss/style/common/general.scss                |  28 -
 scss/style/common/popover_menu.scss           | 114 +++
 scss/style/settings/dialog.scss               | 757 ++++++++++--------
 widget/settings/pages/config/general/index.ts |   9 +
 7 files changed, 714 insertions(+), 532 deletions(-)
 create mode 100644 scss/style/common/popover_menu.scss

diff --git a/options.ts b/options.ts
index 5d7b5fc..4c2189d 100644
--- a/options.ts
+++ b/options.ts
@@ -383,6 +383,7 @@ const options = mkOptions(OPTIONS, {
                 feinttext: opt(colors.surface0),
                 label: opt(colors.lavender),
                 popover: {
+                    scaling: opt(100),
                     text: opt(colors.lavender),
                     background: opt(secondary_colors.mantle),
                     border: opt(secondary_colors.mantle),
diff --git a/scss/main.scss b/scss/main.scss
index 49328f9..2533279 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,54 +1,55 @@
 * {
-  all: unset;
-  font-family: $font-name;
-  font-size: $font-size;
-  font-weight: $font-weight;
+    all: unset;
+    font-family: $font-name;
+    font-size: $font-size;
+    font-weight: $font-weight;
 }
 
 //general
-@import "style/colors";
-@import "style/common/common.scss";
-@import "style/common/floating-widget.scss";
-@import "style/common/widget-button.scss";
+@import 'style/colors';
+@import 'style/common/common.scss';
+@import 'style/common/floating-widget.scss';
+@import 'style/common/widget-button.scss';
+@import 'style/common/popover_menu.scss';
 
 //general styles
-@import "style/common/general";
+@import 'style/common/general';
 
 //modules - bar
-@import "style/bar/bar";
-@import "style/bar/menu";
-@import "style/bar/audio";
-@import "style/bar/media";
-@import "style/bar/network";
-@import "style/bar/bluetooth";
-@import "style/bar/clock";
-@import "style/bar/workspace";
-@import "style/bar/window_title";
-@import "style/bar/systray";
-@import "style/bar/notifications";
-@import "style/bar/power";
-@import "style/bar/battery";
+@import 'style/bar/bar';
+@import 'style/bar/menu';
+@import 'style/bar/audio';
+@import 'style/bar/media';
+@import 'style/bar/network';
+@import 'style/bar/bluetooth';
+@import 'style/bar/clock';
+@import 'style/bar/workspace';
+@import 'style/bar/window_title';
+@import 'style/bar/systray';
+@import 'style/bar/notifications';
+@import 'style/bar/power';
+@import 'style/bar/battery';
 
 //modules - menus
-@import "style/menus/menu";
-@import "style/menus/power";
-@import "style/menus/powerdropdown";
-@import "style/menus/audiomenu";
-@import "style/menus/network";
-@import "style/menus/bluetooth";
-@import "style/menus/media";
-@import "style/menus/notifications";
-@import "style/menus/calendar";
-@import "style/menus/energy";
-@import "style/menus/dashboard";
+@import 'style/menus/menu';
+@import 'style/menus/power';
+@import 'style/menus/powerdropdown';
+@import 'style/menus/audiomenu';
+@import 'style/menus/network';
+@import 'style/menus/bluetooth';
+@import 'style/menus/media';
+@import 'style/menus/notifications';
+@import 'style/menus/calendar';
+@import 'style/menus/energy';
+@import 'style/menus/dashboard';
 
 //notifications
-@import "style/notifications/popups";
+@import 'style/notifications/popups';
 
 //osd
-@import "style/osd/index";
+@import 'style/osd/index';
 
 //settings dialog
-@import "style/settings/dialog";
+@import 'style/settings/dialog';
 
-@import "style/customModules/style";
+@import 'style/customModules/style';
diff --git a/scss/style/common/common.scss b/scss/style/common/common.scss
index 38180fb..1de1e5e 100644
--- a/scss/style/common/common.scss
+++ b/scss/style/common/common.scss
@@ -1,234 +1,240 @@
-@import "../colors";
+@import '../colors';
 
 menu {
-  margin: 6px;
-  padding: 6px;
-  background-color: $primary_bg;
-  background-clip: border-box;
-  border-radius: 12px;
-  border: 1px solid $secondary_bg;
+    margin: 6px;
+    padding: 6px;
+    background-color: $primary_bg;
+    background-clip: border-box;
+    border-radius: 12px;
+    border: 1px solid $secondary_bg;
 
-  menuitem {
-    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-    min-height: 20px;
-    min-width: 40px;
-    padding: 4px 8px;
-    color: #FFFFFF;
-    font: initial;
-    text-shadow: none;
+    menuitem {
+        transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+        min-height: 20px;
+        min-width: 40px;
+        padding: 4px 8px;
+        color: #ffffff;
+        font: initial;
+        text-shadow: none;
+        border-radius: 6px;
+
+        &:hover,
+        &:active {
+            background-color: $secondary_bg;
+        }
+
+        &:disabled {
+            color: $secondary_bg;
+        }
+
+        arrow {
+            min-height: 16px;
+            min-width: 16px;
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+            margin-left: 8px;
+        }
+    }
+
+    separator {
+        min-height: 1px;
+        margin: 4px 0;
+        background-color: $secondary_bg;
+    }
+}
+
+menu > arrow {
+    min-height: 16px;
+    min-width: 16px;
+    padding: 4px;
+    color: $secondary_bg;
+}
+
+menu > arrow.top {
+    margin-top: 0;
     border-radius: 6px;
-
-    &:hover,
-    &:active {
-      background-color: $secondary_bg;
-    }
-
-    &:disabled {
-      color: $secondary_bg;
-    }
-
-    arrow {
-      min-height: 16px;
-      min-width: 16px;
-      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
-      margin-left: 8px;
-    }
-  }
-
-  separator {
-    min-height: 1px;
-    margin: 4px 0;
-    background-color: $secondary_bg
-  }
+    -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
 }
 
-menu>arrow {
-  min-height: 16px;
-  min-width: 16px;
-  padding: 4px;
-  color: $secondary_bg;
-}
-
-menu>arrow.top {
-  margin-top: 0;
-  border-radius: 6px;
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
-}
-
-menu>arrow.bottom {
-  margin-top: 8px;
-  margin-bottom: -12px;
-  border-radius: 6px;
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+menu > arrow.bottom {
+    margin-top: 8px;
+    margin-bottom: -12px;
+    border-radius: 6px;
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
 }
 
 check,
 radio {
-  min-height: 15px;
-  min-width: 15px;
-  margin: 4px;
-  padding: 0;
-  color: transparent;
-  background-color: $secondary_bg;
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+    min-height: 15px;
+    min-width: 15px;
+    margin: 4px;
+    padding: 0;
+    color: transparent;
+    background-color: $secondary_bg;
+    transition:
+        all 75ms cubic-bezier(0, 0, 0.2, 1),
+        box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 radio {
-  border-radius: 9999px;
+    border-radius: 9999px;
 }
 
 check {
-  border-radius: 4px;
+    border-radius: 4px;
 }
 
 check:hover,
 radio:hover {
-  box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
-  background-color: $primary_bg;
+    box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+    background-color: $primary_bg;
 }
 
 check:active,
 radio:active {
-  box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
-  background-color: $primary_bg;
+    box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+    background-color: $primary_bg;
 }
 
 check:checked,
 check:indeterminate,
 radio:checked,
 radio:indeterminate {
-  color: $primary_bg;
-  background-color: $primary_fg;
+    color: $primary_bg;
+    background-color: $primary_fg;
 }
 
 check:checked:hover,
 check:indeterminate:hover,
 radio:checked:hover,
 radio:indeterminate:hover {
-  box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
-  background-color: $primary_fg;
+    box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+    background-color: $primary_fg;
 }
 
 check:checked:active,
 check:indeterminate:active,
 radio:checked:active,
 radio:indeterminate:active {
-  box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
-  background-color: $primary_fg;
+    box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+    background-color: $primary_fg;
 }
 
 switch {
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  margin: 4px 0;
-  border: none;
-  border-radius: 9999px;
-  background-color: $secondary_bg;
-  background-clip: padding-box;
-  font-size: 0;
-  color: transparent;
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    margin: 4px 0;
+    border: none;
+    border-radius: 9999px;
+    background-color: $secondary_bg;
+    background-clip: padding-box;
+    font-size: 0;
+    color: transparent;
 }
 
 switch:checked {
-  background-color: $primary_fg;
+    background-color: $primary_fg;
 }
 
 switch:disabled {
-  opacity: 0.5;
+    opacity: 0.5;
 }
 
 switch slider {
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-width: 18px;
-  min-height: 18px;
-  margin: 3px;
-  border-radius: 9999px;
-  outline: none;
-  background-color: $default_fg;
-  border: none;
-  color: transparent;
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    min-width: 18px;
+    min-height: 18px;
+    margin: 3px;
+    border-radius: 9999px;
+    outline: none;
+    background-color: $default_fg;
+    border: none;
+    color: transparent;
 }
 
 scale {
-  min-height: 2px;
-  min-width: 2px;
+    min-height: 2px;
+    min-width: 2px;
 }
 
 scale.horizontal {
-  padding: 17px 12px;
+    padding: 17px 12px;
 }
 
 scale.vertical {
-  padding: 12px 17px;
+    padding: 12px 17px;
 }
 
 scale slider {
-  min-height: 18px;
-  min-width: 18px;
-  margin: -8px;
+    min-height: 18px;
+    min-width: 18px;
+    margin: -8px;
 }
 
 scale trough {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  outline: none;
-  background-color: $secondary_bg;
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    outline: none;
+    background-color: $secondary_bg;
 }
 
 scale highlight {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  background-color: $primary_fg;
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    background-color: $primary_fg;
 }
 
 scale highlight:disabled {
-  background-color: #1e1e2e;
+    background-color: #1e1e2e;
 }
 
 scale fill {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 scale fill:disabled {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 scale slider {
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 9999px;
-  color: $primary_fg;
-  background-color: $primary_bg;
-  box-shadow: inset 0 0 0 2px $primary_fg;
+    transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+    border-radius: 9999px;
+    color: $primary_fg;
+    background-color: $primary_bg;
+    box-shadow: inset 0 0 0 2px $primary_fg;
 }
 
 scale slider:hover {
-  box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
+    box-shadow:
+        inset 0 0 0 2px $primary_fg,
+        0 0 0 8px transparentize($primary_fg, 0.9);
 }
 
 scale slider:active {
-  box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
+    box-shadow:
+        inset 0 0 0 4px $primary_fg,
+        0 0 0 8px transparentize($primary_fg, 0.9);
 }
 
 tooltip {
-  box-shadow: none;
+    box-shadow: none;
 }
 
 separator {
-  min-width: 1px;
-  min-height: 1px;
-  background-color: $secondary_bg;
+    min-width: 1px;
+    min-height: 1px;
+    background-color: $secondary_bg;
 }
 
 @keyframes spin {
-  to {
-    -gtk-icon-transform: rotate(1turn);
-  }
+    to {
+        -gtk-icon-transform: rotate(1turn);
+    }
 }
 
 spinner {
-  background: none;
-  opacity: 0;
-  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+    background: none;
+    opacity: 0;
+    -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
 }
 
 spinner:checked {
-  opacity: 1;
-  animation: spin 1s linear infinite;
+    opacity: 1;
+    animation: spin 1s linear infinite;
 }
diff --git a/scss/style/common/general.scss b/scss/style/common/general.scss
index 091cf06..1f1f87f 100644
--- a/scss/style/common/general.scss
+++ b/scss/style/common/general.scss
@@ -22,34 +22,6 @@
     font-size: 1.2em;
 }
 
-window.popup {
-    opacity: $bar-menus-opacity * 0.01;
-
-    menuitem {
-        label {
-            color: $bar-menus-popover-text;
-        }
-
-        &:hover {
-            background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
-        }
-    }
-
-    menu {
-        border-color: $bar-menus-popover-border;
-        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
-    }
-
-    separator {
-        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
-        min-height: 0.075em;
-    }
-
-    arrow {
-        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
-    }
-}
-
 tooltip {
     * {
         all: unset;
diff --git a/scss/style/common/popover_menu.scss b/scss/style/common/popover_menu.scss
new file mode 100644
index 0000000..592a773
--- /dev/null
+++ b/scss/style/common/popover_menu.scss
@@ -0,0 +1,114 @@
+@import '../colors';
+
+$popoverScaling: $bar-menus-popover-scaling * 0.01;
+
+window.popup {
+    opacity: $bar-menus-opacity * $popoverScaling;
+
+    menu {
+        border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
+        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+    }
+
+    menuitem {
+        transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
+        padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
+
+        label {
+            font-size: 1.2rem * $popoverScaling;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        &:hover,
+        &:active {
+            background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
+        }
+
+        &:disabled {
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        arrow {
+            min-height: 1.2em * $popoverScaling;
+            min-width: 1.2em * $popoverScaling;
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+            margin-left: 0.5em * $popoverScaling;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
+        }
+    }
+
+    separator {
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
+        min-height: 0.075em * $popoverScaling;
+    }
+
+    arrow.top {
+        margin-top: 0;
+        -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+
+    arrow.bottom {
+        margin-top: 0.5em * $popoverScaling;
+        margin-bottom: -0.6em * $popoverScaling;
+        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+
+    check,
+    radio {
+        min-height: 0.8em * $popoverScaling;
+        min-width: 0.8em * $popoverScaling;
+        margin-right: 0.5em * $popoverScaling;
+        padding: 0;
+        color: transparent;
+        background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        transition:
+            all 100ms cubic-bezier(0, 0, 0.2, 1),
+            box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    radio {
+        border-radius: 9999px;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check {
+        border-radius: $bar-buttons-radius;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:hover,
+    radio:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:active,
+    radio:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked,
+    check:indeterminate,
+    radio:checked,
+    radio:indeterminate {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked:hover,
+    check:indeterminate:hover,
+    radio:checked:hover,
+    radio:indeterminate:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:checked:active,
+    check:indeterminate:active,
+    radio:checked:active,
+    radio:indeterminate:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+}
diff --git a/scss/style/settings/dialog.scss b/scss/style/settings/dialog.scss
index 27ac3df..e0cd519 100644
--- a/scss/style/settings/dialog.scss
+++ b/scss/style/settings/dialog.scss
@@ -1,407 +1,486 @@
 window.settings-dialog {
-  opacity: $bar-menus-opacity * 0.01;
-  background-color: $bar-menus-cards;
-  color: $bar-menus-text;
+    opacity: $bar-menus-opacity * 0.01;
+    background-color: $bar-menus-cards;
+    color: $bar-menus-text;
 
-  $widget-bg: $bar-menus-cards;
-  $border: none;
-  $fg: $bar-menus-text;
-
-  .settings-dialog-box {
-    min-width: 75em;
-  }
-
-  .header {
-    background-color: transparentize($bar-menus-background, 0.1);
-    border-bottom-left-radius: $bar-menus-border-radius * 0.5;
-    border-bottom-right-radius: $bar-menus-border-radius * 0.5;
-    padding: $padding;
-
-    button {
-      font-weight: bold;
+    $widget-bg: $bar-menus-cards;
+    $border: none;
+    $fg: $bar-menus-text;
 
+    .settings-dialog-box {
+        min-width: 75em;
     }
 
-    button.close {
-      color: $bar-menus-iconbuttons-passive;
+    .header {
+        background-color: transparentize($bar-menus-background, 0.1);
+        border-bottom-left-radius: $bar-menus-border-radius * 0.5;
+        border-bottom-right-radius: $bar-menus-border-radius * 0.5;
+        padding: $padding;
 
-      image {
-        font-size: 2em;
-      }
+        button {
+            font-weight: bold;
+        }
 
-      &:hover {
-        color: $bar-menus-buttons-active;
-      }
+        button.close {
+            color: $bar-menus-iconbuttons-passive;
+
+            image {
+                font-size: 2em;
+            }
+
+            &:hover {
+                color: $bar-menus-buttons-active;
+            }
+        }
+
+        button.reset {
+            color: $bar-menus-iconbuttons-passive;
+            padding: $padding * 0.5;
+
+            image {
+                font-size: 1.25em;
+            }
+
+            &:hover {
+                color: $bar-menus-buttons-active;
+            }
+        }
     }
 
-    button.reset {
-      color: $bar-menus-iconbuttons-passive;
-      padding: $padding*.5;
-
-      image {
-        font-size: 1.25em;
-      }
-
-      &:hover {
-        color: $bar-menus-buttons-active;
-      }
-    }
-  }
-
-  .page {
-
-    .page-content {
-      padding: $padding*2;
-      padding-top: 0;
-    }
-  }
-
-  .group {
-    .group-title {
-      color: $bar-menus-text;
-      margin-bottom: $spacing*.5;
+    .page {
+        .page-content {
+            padding: $padding * 2;
+            padding-top: 0;
+        }
     }
 
-    .group-reset {
-      margin: $spacing * .5;
-      padding: $padding * .5;
+    .group {
+        .group-title {
+            color: $bar-menus-text;
+            margin-bottom: $spacing * 0.5;
+        }
 
-      &:disabled {
-        color: transparent;
-      }
+        .group-reset {
+            margin: $spacing * 0.5;
+            padding: $padding * 0.5;
+
+            &:disabled {
+                color: transparent;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: $spacing;
+        }
     }
 
-    &:not(:first-child) {
-      margin-top: $spacing;
-    }
-  }
-
-  .row {
-    background-color: $widget-bg;
-    padding: $padding;
-    border: $border;
-    border-top: none;
-
-    &:first-child {
-      border-radius: $radius $radius 0em 0em;
-      border: $border;
-    }
-
-    &:last-child {
-      border-radius: 0em 0em $radius $radius;
-    }
-
-    &:first-child:last-child {
-      border-radius: $radius;
-      border: $border;
-    }
-
-    button.reset {
-      margin-left: $spacing;
-    }
-
-    label.id,
-    label.note {
-      color: transparentize($fg, .4)
-    }
-
-    entry,
-    button {
-      padding: $padding;
-    }
-
-    spinbutton {
-      entry {
-        border-radius: $radius 0em 0em $radius;
-      }
-
-      button {
-        border-radius: 0em;
-      }
-
-      button:last-child {
-        border-radius: 0em $radius $radius 0em;
-      }
-    }
-
-    .enum-setter {
-      label {
+    .row {
         background-color: $widget-bg;
+        padding: $padding;
         border: $border;
-        padding: 0em $padding;
-        border-radius: $radius 0em 0em $radius;
-      }
+        border-top: none;
 
-      button {
-        border-radius: 0em;
-      }
+        &:first-child {
+            border-radius: $radius $radius 0em 0em;
+            border: $border;
+        }
 
-      button:last-child {
-        border-radius: 0em $radius $radius 0em;
-      }
+        &:last-child {
+            border-radius: 0em 0em $radius $radius;
+        }
+
+        &:first-child:last-child {
+            border-radius: $radius;
+            border: $border;
+        }
+
+        button.reset {
+            margin-left: $spacing;
+        }
+
+        label.id,
+        label.note {
+            color: transparentize($fg, 0.4);
+        }
+
+        entry,
+        button {
+            padding: $padding;
+        }
+
+        spinbutton {
+            entry {
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        .enum-setter {
+            label {
+                background-color: $widget-bg;
+                border: $border;
+                padding: 0em $padding;
+                border-radius: $radius 0em 0em $radius;
+            }
+
+            button {
+                border-radius: 0em;
+            }
+
+            button:last-child {
+                border-radius: 0em $radius $radius 0em;
+            }
+        }
+
+        &.wallpaper {
+            button {
+                margin-top: $spacing * 0.5;
+            }
+
+            .preview {
+                border-radius: $radius;
+            }
+        }
     }
-
-    &.wallpaper {
-      button {
-        margin-top: $spacing * .5;
-      }
-
-      .preview {
-        border-radius: $radius;
-      }
-    }
-  }
 }
 
 .option-item {
-  margin: 0em 2em;
-  margin-bottom: 1em;
+    margin: 0em 2em;
+    margin-bottom: 1em;
 
-  .reset {
-    color: $bar-menus-iconbuttons-passive;
-  }
-
-  .options-label {
-    color: $bar-menus-text;
-  }
-
-  .options-sublabel {
-    font-size: 0.75em;
-    margin-top: 0.2em;
-    color: $bar-menus-dimtext;
-  }
-
-  .options-sublabel-link {
-
-    label {
-      font-size: 0.75em;
-      margin-top: 0.2em;
-      color: $bar-menus-dimtext;
+    .reset {
+        color: $bar-menus-iconbuttons-passive;
     }
 
-    &:hover label {
-      color: $bar-menus-listitems-active;
-    }
-  }
-
-  .inputter-container {
-    border-radius: $bar-menus-border-radius * 0.5;
-
-    :first-child {
-      border-radius: $bar-menus-border-radius * 0.5;
+    .options-label {
+        color: $bar-menus-text;
     }
 
-    padding: 0.35em 0.35em;
-    background: transparentize($bar-menus-background, 0.6);
-    margin-right: 1em;
-  }
+    .options-sublabel {
+        font-size: 0.75em;
+        margin-top: 0.2em;
+        color: $bar-menus-dimtext;
+    }
+
+    .options-sublabel-link {
+        label {
+            font-size: 0.75em;
+            margin-top: 0.2em;
+            color: $bar-menus-dimtext;
+        }
+
+        &:hover label {
+            color: $bar-menus-listitems-active;
+        }
+    }
+
+    .inputter-container {
+        border-radius: $bar-menus-border-radius * 0.5;
+
+        :first-child {
+            border-radius: $bar-menus-border-radius * 0.5;
+        }
+
+        padding: 0.35em 0.35em;
+        background: transparentize($bar-menus-background, 0.6);
+        margin-right: 1em;
+    }
 }
 
 .options-header {
-  margin: 1em 1em;
+    margin: 1em 1em;
 
-  .label-name {
-    color: $bar-menus-label;
-    font-size: 0.9em;
-    margin-right: 0.5em;
-  }
+    .label-name {
+        color: $bar-menus-label;
+        font-size: 0.9em;
+        margin-right: 0.5em;
+    }
 }
 
 .pager-button {
-  color: transparentize($bar-menus-text, 0.4);
-  margin: 0.5em 0.75em;
+    color: transparentize($bar-menus-text, 0.4);
+    margin: 0.5em 0.75em;
 
-  &.category label {
-    font-size: 1.4em;
-  }
-
-  &:hover {
-    label {
-      text-decoration: underline;
-      color: $bar-menus-text;
-    }
-  }
-
-  &.active {
-    label {
-      text-decoration: underline;
-      color: $bar-menus-text;
-    }
-  }
-}
-
-.bar-theme-page {
-  min-height: 40em;
-}
-
-.settings-menu-stack {
-  background: $red;
-}
-
-.paged-container {
-  .reset-options {
-    color: $bar-menus-text;
-
-    image:disabled {
-      color: $bar-menus-buttons-disabled;
+    &.category label {
+        font-size: 1.4em;
     }
 
     &:hover {
-      image {
-        color: transparentize($bar-menus-text, 0.5);
-      }
-    }
-  }
-
-  scrollbar {
-    margin-right: 0.2em;
-    min-width: 0.6em;
-    border-radius: $bar-menus-border-radius;
-    background: $bar-menus-background;
-
-    slider {
-      min-width: 0.6em;
-      border-radius: $bar-menus-border-radius;
-      background: $bar-menus-buttons-default;
-    }
-  }
-
-  selection {
-    background: $bar-menus-label;
-    color: $bar-menus-cards;
-  }
-
-  switch {
-    font-size: 10px;
-
-    &:checked {
-      background: $bar-menus-switch-enabled;
+        label {
+            text-decoration: underline;
+            color: $bar-menus-text;
+        }
     }
 
-    slider {
-      background-color: $bar-menus-switch-puck;
+    &.active {
+        label {
+            text-decoration: underline;
+            color: $bar-menus-text;
+        }
+    }
+}
+
+.bar-theme-page {
+    min-height: 40em;
+}
+
+.settings-menu-stack {
+    background: $red;
+}
+
+.paged-container {
+    .reset-options {
+        color: $bar-menus-text;
+
+        image:disabled {
+            color: $bar-menus-buttons-disabled;
+        }
+
+        &:hover {
+            image {
+                color: transparentize($bar-menus-text, 0.5);
+            }
+        }
     }
 
-    &:active {
-      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
-    }
-  }
+    scrollbar {
+        margin-right: 0.2em;
+        min-width: 0.6em;
+        border-radius: $bar-menus-border-radius;
+        background: $bar-menus-background;
 
-  entry {
-    min-width: 15em;
-  }
+        slider {
+            min-width: 0.6em;
+            border-radius: $bar-menus-border-radius;
+            background: $bar-menus-buttons-default;
+        }
+    }
+
+    selection {
+        background: $bar-menus-label;
+        color: $bar-menus-cards;
+    }
+
+    switch {
+        font-size: 10px;
+
+        &:checked {
+            background: $bar-menus-switch-enabled;
+        }
+
+        slider {
+            background-color: $bar-menus-switch-puck;
+        }
+
+        &:active {
+            background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
+        }
+    }
+
+    entry {
+        min-width: 15em;
+    }
 }
 
 dialog {
-  background: $bar-menus-cards;
-  color: $bar-menus-text;
-
-  :selected {
-    background: transparentize($bar-menus-label, 0.2);
-    color: transparentize($bar-menus-cards, 0.2);
-  }
-
-  headerbar {
-    border-bottom: 0.075em solid $bar-menus-border-color;
     background: $bar-menus-cards;
-    padding: 0.5em;
-    font-size: 1.5em;
+    color: $bar-menus-text;
 
-    button {
-      color: $bar-menus-buttons-text;
-      min-width: 4.5em;
-      min-height: 2.5em;
-      border-radius: $bar-menus-border-radius;
-      background: $bar-menus-buttons-default;
-
-      &:hover {
-        background: transparentize($bar-menus-buttons-default, 0.5);
-      }
-    }
-  }
-
-  viewport {
-    border-right: .25em solid $bar-menus-border-color;
-
-    list {
-      row {
-        padding: 0em 1.5em;
-
-        &:hover {
-          background: $bar-menus-buttons-default;
-          color: $bar-menus-buttons-text;
-        }
-
-        label {
-          margin: 0.5em 0.5em;
-          font-size: 0.85em;
-        }
-      }
+    :selected {
+        background: transparentize($bar-menus-label, 0.2);
+        color: transparentize($bar-menus-cards, 0.2);
     }
 
-  }
+    headerbar {
+        border-bottom: 0.075em solid $bar-menus-border-color;
+        background: $bar-menus-cards;
+        padding: 0.5em;
+        font-size: 1.5em;
 
-  stack {
-    .horizontal .path-bar {
-      button {
-        background: $bar-menus-iconbuttons-active;
-        min-width: 3em;
-        min-height: 2em;
-        border-radius: $bar-menus-border-radius * 0.5;
+        button {
+            color: $bar-menus-buttons-text;
+            min-width: 4.5em;
+            min-height: 2.5em;
+            border-radius: $bar-menus-border-radius;
+            background: $bar-menus-buttons-default;
 
-        &:disabled {
-          background: $bar-menus-buttons-disabled;
+            &:hover {
+                background: transparentize($bar-menus-buttons-default, 0.5);
+            }
         }
-
-        &:hover {
-          background: transparentize($bar-menus-buttons-active, 0.5);
-        }
-
-        label {
-          margin: 0em 0.25em;
-          color: $bar-menus-buttons-text
-        }
-
-        image {
-          margin: 0em 0.5em;
-          color: $bar-menus-buttons-text
-        }
-
-        margin: 0.25em;
-      }
     }
-  }
 
-  treeview header button {
-    padding: 0.25em;
-    border: .15em solid $bar-menus-border-color;
-  }
+    viewport {
+        border-right: 0.25em solid $bar-menus-border-color;
 
-  headerbar {
-    color: $bar-menus-label;
-  }
+        list {
+            row {
+                padding: 0em 1.5em;
+
+                &:hover {
+                    background: $bar-menus-buttons-default;
+                    color: $bar-menus-buttons-text;
+                }
+
+                label {
+                    margin: 0.5em 0.5em;
+                    font-size: 0.85em;
+                }
+            }
+        }
+    }
+
+    stack {
+        .horizontal .path-bar {
+            button {
+                background: $bar-menus-iconbuttons-active;
+                min-width: 3em;
+                min-height: 2em;
+                border-radius: $bar-menus-border-radius * 0.5;
+
+                &:disabled {
+                    background: $bar-menus-buttons-disabled;
+                }
+
+                &:hover {
+                    background: transparentize($bar-menus-buttons-active, 0.5);
+                }
+
+                label {
+                    margin: 0em 0.25em;
+                    color: $bar-menus-buttons-text;
+                }
+
+                image {
+                    margin: 0em 0.5em;
+                    color: $bar-menus-buttons-text;
+                }
+
+                margin: 0.25em;
+            }
+        }
+    }
+
+    treeview header button {
+        padding: 0.25em;
+        border: 0.15em solid $bar-menus-border-color;
+    }
+
+    headerbar {
+        color: $bar-menus-label;
+    }
+
+    popover {
+        background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        border-radius: $bar-buttons-radius;
+
+        modelbutton {
+            margin-bottom: 0.5em;
+        }
+        modelbutton:hover label {
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        }
+
+        modelbutton:disabled label {
+            color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.5);
+        }
+        separator {
+            margin: 0.5em 0em;
+        }
+    }
+
+    separator {
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
+        min-height: 0.075em * $popoverScaling;
+    }
+
+    check,
+    radio {
+        min-height: 0.8em * $popoverScaling;
+        min-width: 0.8em * $popoverScaling;
+        margin-right: 0.5em * $popoverScaling;
+        padding: 0;
+        color: transparent;
+        background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
+        transition:
+            all 100ms cubic-bezier(0, 0, 0.2, 1),
+            box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    radio {
+        border-radius: 9999px;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check {
+        border-radius: $bar-buttons-radius;
+        border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:hover,
+    radio:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:active,
+    radio:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked,
+    check:indeterminate,
+    radio:checked,
+    radio:indeterminate {
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+        background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
+    }
+
+    check:checked:hover,
+    check:indeterminate:hover,
+    radio:checked:hover,
+    radio:indeterminate:hover {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
+
+    check:checked:active,
+    check:indeterminate:active,
+    radio:checked:active,
+    radio:indeterminate:active {
+        box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
+        background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
+    }
 }
 
 .unsaved-icon {
-  margin-right: 1em;
-  font-size: 1em;
-  color: $yellow;
+    margin-right: 1em;
+    font-size: 1em;
+    color: $yellow;
 }
 
 .options-import,
 .options-export {
-  border-radius: $bar-menus-border-radius * 0.5;
-  color: $bar-menus-buttons-text;
-  padding: 0.35em 0.35em;
-  background: $bar-menus-buttons-default;
-  margin-right: 1em;
-  margin-left: 0.5em;
+    border-radius: $bar-menus-border-radius * 0.5;
+    color: $bar-menus-buttons-text;
+    padding: 0.35em 0.35em;
+    background: $bar-menus-buttons-default;
+    margin-right: 1em;
+    margin-left: 0.5em;
 
-  &:hover {
-    background: transparentize($bar-menus-buttons-default, 0.8);
-  }
+    &:hover {
+        background: transparentize($bar-menus-buttons-default, 0.8);
+    }
 }
 
 .options-import {
-  margin-right: 0em;
+    margin-right: 0em;
 }
diff --git a/widget/settings/pages/config/general/index.ts b/widget/settings/pages/config/general/index.ts
index d486bca..1cea913 100644
--- a/widget/settings/pages/config/general/index.ts
+++ b/widget/settings/pages/config/general/index.ts
@@ -196,6 +196,15 @@ export const BarGeneral = (): Scrollable<Child, Attribute> => {
                     max: 100,
                     increment: 5,
                 }),
+                Option({
+                    opt: options.theme.bar.menus.popover.scaling,
+                    title: 'Popovers',
+                    subtitle: 'Ex: Right click menu of system tray items.',
+                    type: 'number',
+                    min: 1,
+                    max: 100,
+                    increment: 5,
+                }),
             ],
         }),
     });