osd: unify brightness and volume

.config/quickshell/ii/modules/onScreenDisplay/OsdValueIndicator.qml

@@ -1,13 +1,8 @@
-import qs.services
 import qs.modules.common
 import qs.modules.common.widgets
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
-import Quickshell
 import Quickshell.Widgets
-// import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -21,19 +16,23 @@ Item {
     property real valueIndicatorLeftPadding: 10
     property real valueIndicatorRightPadding: 20 // An icon is circle ish, a column isn't, hence the extra padding
 
-    Layout.margins: Appearance.sizes.elevationMargin
-    implicitWidth: Appearance.sizes.osdWidth
-    implicitHeight: valueIndicator.implicitHeight
+    implicitWidth: Appearance.sizes.osdWidth + 2 * Appearance.sizes.elevationMargin
+    implicitHeight: valueIndicator.implicitHeight + 2 * Appearance.sizes.elevationMargin
 
     StyledRectangularShadow {
         target: valueIndicator
     }
-    WrapperRectangle {
+    Rectangle {
         id: valueIndicator
-        anchors.fill: parent
+        anchors {
+            fill: parent
+            margins: Appearance.sizes.elevationMargin
+        }
         radius: Appearance.rounding.full
         color: Appearance.colors.colLayer0
+
         implicitWidth: valueRow.implicitWidth
+        implicitHeight: valueRow.implicitHeight
 
         RowLayout { // Icon on the left, stuff on the right
             id: valueRow
@@ -48,6 +47,7 @@ Item {
                 Layout.leftMargin: valueIndicatorLeftPadding
                 Layout.topMargin: valueIndicatorVerticalPadding
                 Layout.bottomMargin: valueIndicatorVerticalPadding
+
                 MaterialSymbol { // Icon
                     anchors {
                         centerIn: parent
@@ -101,4 +101,4 @@ Item {
             }
         }
     }
-}
+}