controlcenter: revamped and added more sliders

1 files changed, 956 insertions, 87 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index baf49cf..ea81fa7 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -431,15 +431,102 @@ RowLayout {
                         sidebarFlickable.collapseAllSections(animationsSection);
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Animation duration scale")
-                        min: 0.1
-                        max: 5
-                        step: 0.1
-                        value: rootPane.animDurationsScale
-                        onValueModified: value => {
-                            rootPane.animDurationsScale = value;
-                            rootPane.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("Animation duration scale")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: animDurationsInput.implicitHeight + Appearance.padding.small * 2
+                                    color: animDurationsInputHover.containsMouse || animDurationsInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: animDurationsInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: animDurationsInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: animDurationsInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.animDurationsScale).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 5.0) {
+                                                    rootPane.animDurationsScale = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 5.0) {
+                                                text = (rootPane.animDurationsScale).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: "×"
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: animDurationsSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 5.0
+                                value: rootPane.animDurationsScale
+                                onMoved: {
+                                    rootPane.animDurationsScale = animDurationsSlider.value;
+                                    if (!animDurationsInput.activeFocus) {
+                                        animDurationsInput.text = (animDurationsSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
                 }
@@ -473,8 +560,7 @@ RowLayout {
                         delegate: StyledRect {
                             required property string modelData
 
-                            anchors.left: parent.left
-                            anchors.right: parent.right
+                            width: parent ? parent.width : 0
 
                             readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
@@ -546,8 +632,7 @@ RowLayout {
                         delegate: StyledRect {
                             required property string modelData
 
-                            anchors.left: parent.left
-                            anchors.right: parent.right
+                            width: parent ? parent.width : 0
 
                             readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
@@ -619,8 +704,7 @@ RowLayout {
                         delegate: StyledRect {
                             required property string modelData
 
-                            anchors.left: parent.left
-                            anchors.right: parent.right
+                            width: parent ? parent.width : 0
 
                             readonly property bool isCurrent: modelData === rootPane.fontFamilySans
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
@@ -670,15 +754,102 @@ RowLayout {
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Font size scale")
-                        min: 0.1
-                        max: 5
-                        step: 0.1
-                        value: rootPane.fontSizeScale
-                        onValueModified: value => {
-                            rootPane.fontSizeScale = value;
-                            rootPane.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("Font size scale")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: fontSizeInput.implicitHeight + Appearance.padding.small * 2
+                                    color: fontSizeInputHover.containsMouse || fontSizeInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: fontSizeInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: fontSizeInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: fontSizeInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.fontSizeScale).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 5.0) {
+                                                    rootPane.fontSizeScale = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 5.0) {
+                                                text = (rootPane.fontSizeScale).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: "×"
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: fontSizeSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 5.0
+                                value: rootPane.fontSizeScale
+                                onMoved: {
+                                    rootPane.fontSizeScale = fontSizeSlider.value;
+                                    if (!fontSizeInput.activeFocus) {
+                                        fontSizeInput.text = (fontSizeSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
                 }
@@ -690,39 +861,300 @@ RowLayout {
                         sidebarFlickable.collapseAllSections(scalesSection);
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Padding scale")
-                        min: 0.1
-                        max: 5
-                        step: 0.1
-                        value: rootPane.paddingScale
-                        onValueModified: value => {
-                            rootPane.paddingScale = value;
-                            rootPane.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("Padding scale")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: paddingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: paddingInputHover.containsMouse || paddingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: paddingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: paddingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: paddingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.paddingScale).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 5.0) {
+                                                    rootPane.paddingScale = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 5.0) {
+                                                text = (rootPane.paddingScale).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: "×"
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: paddingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 5.0
+                                value: rootPane.paddingScale
+                                onMoved: {
+                                    rootPane.paddingScale = paddingSlider.value;
+                                    if (!paddingInput.activeFocus) {
+                                        paddingInput.text = (paddingSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Rounding scale")
-                        min: 0.1
-                        max: 5
-                        step: 0.1
-                        value: rootPane.roundingScale
-                        onValueModified: value => {
-                            rootPane.roundingScale = value;
-                            rootPane.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("Rounding scale")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: roundingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: roundingInputHover.containsMouse || roundingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: roundingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: roundingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: roundingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.roundingScale).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 5.0) {
+                                                    rootPane.roundingScale = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 5.0) {
+                                                text = (rootPane.roundingScale).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: "×"
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: roundingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 5.0
+                                value: rootPane.roundingScale
+                                onMoved: {
+                                    rootPane.roundingScale = roundingSlider.value;
+                                    if (!roundingInput.activeFocus) {
+                                        roundingInput.text = (roundingSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Spacing scale")
-                        min: 0.1
-                        max: 5
-                        step: 0.1
-                        value: rootPane.spacingScale
-                        onValueModified: value => {
-                            rootPane.spacingScale = value;
-                            rootPane.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("Spacing scale")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: spacingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: spacingInputHover.containsMouse || spacingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: spacingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: spacingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: spacingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.spacingScale).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 5.0) {
+                                                    rootPane.spacingScale = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 5.0) {
+                                                text = (rootPane.spacingScale).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: "×"
+                                    color: Colours.palette.m3outline
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+                            }
+
+                            StyledSlider {
+                                id: spacingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 5.0
+                                value: rootPane.spacingScale
+                                onMoved: {
+                                    rootPane.spacingScale = spacingSlider.value;
+                                    if (!spacingInput.activeFocus) {
+                                        spacingInput.text = (spacingSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
                 }
@@ -763,8 +1195,60 @@ RowLayout {
                                     Layout.fillWidth: true
                                 }
 
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: transparencyBaseInput.implicitHeight + Appearance.padding.small * 2
+                                    color: transparencyBaseInputHover.containsMouse || transparencyBaseInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: transparencyBaseInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: transparencyBaseInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: transparencyBaseInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: IntValidator { bottom: 0; top: 100 }
+                                        
+                                        Component.onCompleted: {
+                                            text = Math.round(rootPane.transparencyBase * 100).toString();
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseInt(text);
+                                                if (!isNaN(val) && val >= 0 && val <= 100) {
+                                                    rootPane.transparencyBase = val / 100;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseInt(text);
+                                            if (isNaN(val) || val < 0 || val > 100) {
+                                                text = Math.round(rootPane.transparencyBase * 100).toString();
+                                            }
+                                        }
+                                    }
+                                }
+
                                 StyledText {
-                                    text: qsTr("%1%").arg(Math.round(rootPane.transparencyBase * 100))
+                                    text: "%"
                                     color: Colours.palette.m3outline
                                     font.pointSize: Appearance.font.size.normal
                                 }
@@ -781,6 +1265,9 @@ RowLayout {
                                 value: rootPane.transparencyBase * 100
                                 onMoved: {
                                     rootPane.transparencyBase = baseSlider.value / 100;
+                                    if (!transparencyBaseInput.activeFocus) {
+                                        transparencyBaseInput.text = Math.round(baseSlider.value).toString();
+                                    }
                                     rootPane.saveConfig();
                                 }
                             }
@@ -807,8 +1294,60 @@ RowLayout {
                                     Layout.fillWidth: true
                                 }
 
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: transparencyLayersInput.implicitHeight + Appearance.padding.small * 2
+                                    color: transparencyLayersInputHover.containsMouse || transparencyLayersInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: transparencyLayersInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: transparencyLayersInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: transparencyLayersInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: IntValidator { bottom: 0; top: 100 }
+                                        
+                                        Component.onCompleted: {
+                                            text = Math.round(rootPane.transparencyLayers * 100).toString();
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseInt(text);
+                                                if (!isNaN(val) && val >= 0 && val <= 100) {
+                                                    rootPane.transparencyLayers = val / 100;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseInt(text);
+                                            if (isNaN(val) || val < 0 || val > 100) {
+                                                text = Math.round(rootPane.transparencyLayers * 100).toString();
+                                            }
+                                        }
+                                    }
+                                }
+
                                 StyledText {
-                                    text: qsTr("%1%").arg(Math.round(rootPane.transparencyLayers * 100))
+                                    text: "%"
                                     color: Colours.palette.m3outline
                                     font.pointSize: Appearance.font.size.normal
                                 }
@@ -825,6 +1364,9 @@ RowLayout {
                                 value: rootPane.transparencyLayers * 100
                                 onMoved: {
                                     rootPane.transparencyLayers = layersSlider.value / 100;
+                                    if (!transparencyLayersInput.activeFocus) {
+                                        transparencyLayersInput.text = Math.round(layersSlider.value).toString();
+                                    }
                                     rootPane.saveConfig();
                                 }
                             }
@@ -839,27 +1381,189 @@ RowLayout {
                         sidebarFlickable.collapseAllSections(borderSection);
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Border rounding")
-                        min: 0.1
-                        max: 100
-                        step: 0.1
-                        value: rootPane.borderRounding
-                        onValueModified: value => {
-                            rootPane.borderRounding = value;
-                            rootPane.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("Border rounding")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: borderRoundingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: borderRoundingInputHover.containsMouse || borderRoundingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: borderRoundingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: borderRoundingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: borderRoundingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 100 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.borderRounding).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 100) {
+                                                    rootPane.borderRounding = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 100) {
+                                                text = (rootPane.borderRounding).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            StyledSlider {
+                                id: borderRoundingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 100
+                                value: rootPane.borderRounding
+                                onMoved: {
+                                    rootPane.borderRounding = borderRoundingSlider.value;
+                                    if (!borderRoundingInput.activeFocus) {
+                                        borderRoundingInput.text = (borderRoundingSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Border thickness")
-                        min: 0.1
-                        max: 100
-                        step: 0.1
-                        value: rootPane.borderThickness
-                        onValueModified: value => {
-                            rootPane.borderThickness = value;
-                            rootPane.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("Border thickness")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: borderThicknessInput.implicitHeight + Appearance.padding.small * 2
+                                    color: borderThicknessInputHover.containsMouse || borderThicknessInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: borderThicknessInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: borderThicknessInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: borderThicknessInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0.1; top: 100 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.borderThickness).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0.1 && val <= 100) {
+                                                    rootPane.borderThickness = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0.1 || val > 100) {
+                                                text = (rootPane.borderThickness).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            StyledSlider {
+                                id: borderThicknessSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0.1
+                                to: 100
+                                value: rootPane.borderThickness
+                                onMoved: {
+                                    rootPane.borderThickness = borderThicknessSlider.value;
+                                    if (!borderThicknessInput.activeFocus) {
+                                        borderThicknessInput.text = (borderThicknessSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
                 }
@@ -914,25 +1618,190 @@ RowLayout {
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Visualiser rounding")
-                        min: 0
-                        max: 10
-                        value: Math.round(rootPane.visualiserRounding)
-                        onValueModified: value => {
-                            rootPane.visualiserRounding = value;
-                            rootPane.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("Visualiser rounding")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: visualiserRoundingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: visualiserRoundingInputHover.containsMouse || visualiserRoundingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: visualiserRoundingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: visualiserRoundingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: visualiserRoundingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: IntValidator { bottom: 0; top: 10 }
+                                        
+                                        Component.onCompleted: {
+                                            text = Math.round(rootPane.visualiserRounding).toString();
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseInt(text);
+                                                if (!isNaN(val) && val >= 0 && val <= 10) {
+                                                    rootPane.visualiserRounding = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseInt(text);
+                                            if (isNaN(val) || val < 0 || val > 10) {
+                                                text = Math.round(rootPane.visualiserRounding).toString();
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            StyledSlider {
+                                id: visualiserRoundingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0
+                                to: 10
+                                stepSize: 1
+                                value: rootPane.visualiserRounding
+                                onMoved: {
+                                    rootPane.visualiserRounding = Math.round(visualiserRoundingSlider.value);
+                                    if (!visualiserRoundingInput.activeFocus) {
+                                        visualiserRoundingInput.text = Math.round(visualiserRoundingSlider.value).toString();
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
 
-                    SpinBoxRow {
-                        label: qsTr("Visualiser spacing")
-                        min: 0
-                        max: 10
-                        value: Math.round(rootPane.visualiserSpacing)
-                        onValueModified: value => {
-                            rootPane.visualiserSpacing = value;
-                            rootPane.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("Visualiser spacing")
+                                    font.pointSize: Appearance.font.size.normal
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                }
+
+                                StyledRect {
+                                    Layout.preferredWidth: 70
+                                    implicitHeight: visualiserSpacingInput.implicitHeight + Appearance.padding.small * 2
+                                    color: visualiserSpacingInputHover.containsMouse || visualiserSpacingInput.activeFocus 
+                                           ? Colours.layer(Colours.palette.m3surfaceContainer, 3)
+                                           : Colours.layer(Colours.palette.m3surfaceContainer, 2)
+                                    radius: Appearance.rounding.small
+                                    border.width: 1
+                                    border.color: visualiserSpacingInput.activeFocus 
+                                                  ? Colours.palette.m3primary
+                                                  : Qt.alpha(Colours.palette.m3outline, 0.3)
+
+                                    Behavior on color { CAnim {} }
+                                    Behavior on border.color { CAnim {} }
+
+                                    MouseArea {
+                                        id: visualiserSpacingInputHover
+                                        anchors.fill: parent
+                                        hoverEnabled: true
+                                        cursorShape: Qt.IBeamCursor
+                                        acceptedButtons: Qt.NoButton
+                                    }
+
+                                    StyledTextField {
+                                        id: visualiserSpacingInput
+                                        anchors.centerIn: parent
+                                        width: parent.width - Appearance.padding.normal
+                                        horizontalAlignment: TextInput.AlignHCenter
+                                        validator: DoubleValidator { bottom: 0; top: 2 }
+                                        
+                                        Component.onCompleted: {
+                                            text = (rootPane.visualiserSpacing).toFixed(1);
+                                        }
+                                        
+                                        onTextChanged: {
+                                            if (activeFocus) {
+                                                const val = parseFloat(text);
+                                                if (!isNaN(val) && val >= 0 && val <= 2) {
+                                                    rootPane.visualiserSpacing = val;
+                                                    rootPane.saveConfig();
+                                                }
+                                            }
+                                        }
+                                        onEditingFinished: {
+                                            const val = parseFloat(text);
+                                            if (isNaN(val) || val < 0 || val > 2) {
+                                                text = (rootPane.visualiserSpacing).toFixed(1);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            StyledSlider {
+                                id: visualiserSpacingSlider
+
+                                Layout.fillWidth: true
+                                implicitHeight: Appearance.padding.normal * 3
+
+                                from: 0
+                                to: 2
+                                value: rootPane.visualiserSpacing
+                                onMoved: {
+                                    rootPane.visualiserSpacing = visualiserSpacingSlider.value;
+                                    if (!visualiserSpacingInput.activeFocus) {
+                                        visualiserSpacingInput.text = (visualiserSpacingSlider.value).toFixed(1);
+                                    }
+                                    rootPane.saveConfig();
+                                }
+                            }
                         }
                     }
                 }