controlcenter: appearance transparency values now use sliders

modules/controlcenter/appearance/AppearancePane.qml

@@ -711,28 +711,94 @@ RowLayout {
                         }
                     }
 
-                    SpinBoxRow {
+                    SectionContainer {
-                        label: qsTr("Transparency base")
+                        contentSpacing: Appearance.spacing.normal
-                        min: 0
+
-                        max: 1
+                        ColumnLayout {
-                        value: root.transparencyBase
+                            Layout.fillWidth: true
-                        onValueModified: value => {
+                            spacing: Appearance.spacing.small
-                            root.transparencyBase = value;
+
-                            root.saveConfig();
+                            RowLayout {
+                                Layout.fillWidth: true
+                                spacing: Appearance.spacing.normal
+
+                                StyledText {
+                                    text: qsTr("Transparency base")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledText {
+                                    text: qsTr("%1%").arg(Math.round(root.transparencyBase * 100))
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
                                 }
                             }
 
-                    SpinBoxRow {
+                            StyledSlider {
-                        label: qsTr("Transparency layers")
+                                id: baseSlider
-                        min: 0
+
-                        max: 1
+                                Layout.fillWidth: true
-                        value: root.transparencyLayers
+                                implicitHeight: Appearance.padding.normal * 3
-                        onValueModified: value => {
+
-                            root.transparencyLayers = value;
+                                from: 0
+                                to: 100
+                                value: root.transparencyBase * 100
+                                onMoved: {
+                                    root.transparencyBase = baseSlider.value / 100;
                                     root.saveConfig();
                                 }
                             }
                         }
+                    }
+
+                    SectionContainer {
+                        contentSpacing: Appearance.spacing.normal
+
+                        ColumnLayout {
+                            Layout.fillWidth: true
+                            spacing: Appearance.spacing.small
+
+                            RowLayout {
+                                Layout.fillWidth: true
+                                spacing: Appearance.spacing.normal
+
+                                StyledText {
+                                    text: qsTr("Transparency layers")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledText {
+                                    text: qsTr("%1%").arg(Math.round(root.transparencyLayers * 100))
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: layersSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0
+                                to: 100
+                                value: root.transparencyLayers * 100
+                                onMoved: {
+                                    root.transparencyLayers = layersSlider.value / 100;
+                                    root.saveConfig();
+                                }
+                            }
+                        }
+                    }
+                }
 
                 CollapsibleSection {
                     id: borderSection