no background opt for topbar

2026-01-24 13:32:50 -05:00 · 2025-08-23 17:45:18 -04:00
parent 8eaa1a2d7e
commit 1dfc7dc26e
20 changed files with 123 additions and 52 deletions
--- a/Common/SettingsData.qml
+++ b/Common/SettingsData.qml
@@ -87,6 +87,7 @@ Singleton {
    property real topBarSpacing: 4
    property real topBarInnerPadding: 8
    property bool topBarSquareCorners: false
+    property bool topBarNoBackground: false
    property int notificationTimeoutLow: 5000
    property int notificationTimeoutNormal: 5000
    property int notificationTimeoutCritical: 0
@@ -280,6 +281,8 @@ Singleton {
                topBarInnerPadding = settings.topBarInnerPadding !== undefined ? settings.topBarInnerPadding : 8
                topBarSquareCorners = settings.topBarSquareCorners
                        !== undefined ? settings.topBarSquareCorners : false
+                topBarNoBackground = settings.topBarNoBackground
+                        !== undefined ? settings.topBarNoBackground : false
                applyStoredTheme()
                detectAvailableIconThemes()
                detectQtTools()
@@ -363,6 +366,7 @@ Singleton {
                                                "topBarSpacing": topBarSpacing,
                                                "topBarInnerPadding": topBarInnerPadding,
                                                "topBarSquareCorners": topBarSquareCorners,
+                                                "topBarNoBackground": topBarNoBackground,
                                                "notificationTimeoutLow": notificationTimeoutLow,
                                                "notificationTimeoutNormal": notificationTimeoutNormal,
                                                "notificationTimeoutCritical": notificationTimeoutCritical
@@ -902,6 +906,11 @@ Singleton {
        saveSettings()
    }

+    function setTopBarNoBackground(enabled) {
+        topBarNoBackground = enabled
+        saveSettings()
+    }
+
    function _shq(s) {
        return "'" + String(s).replace(/'/g, "'\\''") + "'"
    }
--- a/Modules/Settings/TopBarTab.qml
+++ b/Modules/Settings/TopBarTab.qml
@@ -745,6 +745,17 @@ Item {
                                           checked)
                                   }
                    }
+
+                    DankToggle {
+                        width: parent.width
+                        text: "No Background"
+                        description: "Remove widget backgrounds for a minimal look with tighter spacing."
+                        checked: SettingsData.topBarNoBackground
+                        onToggled: checked => {
+                                       SettingsData.setTopBarNoBackground(
+                                           checked)
+                                   }
+                    }
                }
            }

--- a/Modules/TopBar/Battery.qml
+++ b/Modules/TopBar/Battery.qml
@@ -13,13 +13,15 @@ Rectangle {
    property var parentScreen: null
    property real widgetHeight: 30
    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

    signal toggleBatteryPopup

-    width: BatteryService.batteryAvailable ? 70 : 40
+    width: batteryContent.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = batteryArea.containsMouse
                        || batteryPopupVisible ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
@@ -28,8 +30,9 @@ Rectangle {
    visible: true

    Row {
+        id: batteryContent
        anchors.centerIn: parent
-        spacing: 2
+        spacing: SettingsData.topBarNoBackground ? 1 : 2

        DankIcon {
            name: {
--- a/Modules/TopBar/Clock.qml
+++ b/Modules/TopBar/Clock.qml
@@ -13,13 +13,15 @@ Rectangle {
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS

    signal clockClicked

-    width: clockRow.implicitWidth + Theme.spacingS * 2
+    width: clockRow.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/ControlCenterButton.qml
+++ b/Modules/TopBar/ControlCenterButton.qml
@@ -17,14 +17,16 @@ Rectangle {
    property bool showAudioIcon: SettingsData.controlCenterShowAudioIcon
    property real widgetHeight: 30
    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

    signal clicked
    signal iconClicked(string tab)

-    width: controlIndicators.implicitWidth + Theme.spacingS * 2
+    width: controlIndicators.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = controlCenterArea.containsMouse
                        || root.isActive ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
--- a/Modules/TopBar/CpuMonitor.qml
+++ b/Modules/TopBar/CpuMonitor.qml
@@ -15,11 +15,13 @@ Rectangle {
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

-    width: 55
+    width: cpuContent.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
@@ -54,6 +56,7 @@ Rectangle {
    }

    Row {
+        id: cpuContent
        anchors.centerIn: parent
        spacing: 3

--- a/Modules/TopBar/CpuTemperature.qml
+++ b/Modules/TopBar/CpuTemperature.qml
@@ -15,11 +15,13 @@ Rectangle {
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

-    width: 55
+    width: cpuTempContent.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = cpuTempArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
@@ -54,6 +56,7 @@ Rectangle {
    }

    Row {
+        id: cpuTempContent
        anchors.centerIn: parent
        spacing: 3

--- a/Modules/TopBar/FocusedApp.qml
+++ b/Modules/TopBar/FocusedApp.qml
@@ -11,7 +11,8 @@ Rectangle {
    property bool compactMode: SettingsData.focusedWindowCompactMode
    property int availableWidth: 400
    property real widgetHeight: 30
-    readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
+    readonly property int baseWidth: contentRow.implicitWidth + horizontalPadding * 2
    readonly property int maxNormalWidth: 456
    readonly property int maxCompactWidth: 288
    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
@@ -20,11 +21,12 @@ Rectangle {
                                  maxCompactWidth) : Math.min(baseWidth,
                                                              maxNormalWidth)
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
        if (!activeWindow || !activeWindow.title)
            return "transparent"
-
+        
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = mouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/GpuTemperature.qml
+++ b/Modules/TopBar/GpuTemperature.qml
@@ -30,10 +30,13 @@ Rectangle {
        }
    }

-    width: 55
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))
+
+    width: gpuTempContent.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = gpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
@@ -96,6 +99,7 @@ Rectangle {
    }

    Row {
+        id: gpuTempContent
        anchors.centerIn: parent
        spacing: 3

--- a/Modules/TopBar/IdleInhibitor.qml
+++ b/Modules/TopBar/IdleInhibitor.qml
@@ -12,17 +12,20 @@ Rectangle {
    property var popupTarget: null
    property var parentScreen: null
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

-    width: 40
+    width: idleIcon.width + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : (SessionService.idleInhibited ? Theme.primaryHover : Theme.secondaryHover)
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
    }

    DankIcon {
+        id: idleIcon
        anchors.centerIn: parent
        name: SessionService.idleInhibited ? "motion_sensor_active" : "motion_sensor_idle"
        size: Theme.iconSize - 6
--- a/Modules/TopBar/LauncherButton.qml
+++ b/Modules/TopBar/LauncherButton.qml
@@ -12,10 +12,11 @@ Item {
    property var parentScreen: null
    property real widgetHeight: 30
    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

    signal clicked

-    width: 40
+    width: Theme.iconSize + horizontalPadding * 2
    height: widgetHeight

    MouseArea {
@@ -40,9 +41,10 @@ Item {
    }

    Rectangle {
+        id: launcherContent
        anchors.fill: parent
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceTextHover.r, Theme.surfaceTextHover.g,
+        radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
+        color: SettingsData.topBarNoBackground ? "transparent" : Qt.rgba(Theme.surfaceTextHover.r, Theme.surfaceTextHover.g,
                       Theme.surfaceTextHover.b,
                       Theme.surfaceTextHover.a * Theme.widgetTransparency)

--- a/Modules/TopBar/Media.qml
+++ b/Modules/TopBar/Media.qml
@@ -22,21 +22,26 @@ Rectangle {
    }

    readonly property int currentContentWidth: {
-        // AudioViz (20) + spacing + text + spacing + controls (~90) + padding
-        const baseWidth = 20 + Theme.spacingXS + 90 + Theme.spacingS * 2
-        return baseWidth + textWidth + (textWidth > 0 ? Theme.spacingXS : 0)
+        // Calculate actual content width:
+        // AudioViz (20) + spacing + [text + spacing] + controls (prev:20 + spacing + play:24 + spacing + next:20) + padding
+        const controlsWidth = 20 + Theme.spacingXS + 24 + Theme.spacingXS + 20  // ~72px total
+        const audioVizWidth = 20
+        const contentWidth = audioVizWidth + Theme.spacingXS + controlsWidth
+        return contentWidth + (textWidth > 0 ? textWidth + Theme.spacingXS : 0) + horizontalPadding * 2
    }
    property string section: "center"
    property var popupTarget: null
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

    signal clicked

    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = Theme.surfaceTextHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/NotificationCenterButton.qml
+++ b/Modules/TopBar/NotificationCenterButton.qml
@@ -12,13 +12,15 @@ Rectangle {
    property var parentScreen: null
    property real widgetHeight: 30
    property real barHeight: 48
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

    signal clicked

-    width: 40
+    width: notificationIcon.width + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = notificationArea.containsMouse
                        || root.isActive ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
@@ -26,6 +28,7 @@ Rectangle {
    }

    DankIcon {
+        id: notificationIcon
        anchors.centerIn: parent
        name: SessionData.doNotDisturb ? "notifications_off" : "notifications"
        size: Theme.iconSize - 6
@@ -40,8 +43,8 @@ Rectangle {
        color: Theme.error
        anchors.right: parent.right
        anchors.top: parent.top
-        anchors.rightMargin: 6
-        anchors.topMargin: 6
+        anchors.rightMargin: SettingsData.topBarNoBackground ? 0 : 6
+        anchors.topMargin: SettingsData.topBarNoBackground ? 0 : 6
        visible: root.hasUnread
    }

--- a/Modules/TopBar/PrivacyIndicator.qml
+++ b/Modules/TopBar/PrivacyIndicator.qml
@@ -11,24 +11,29 @@ Rectangle {
    property var popupTarget: null
    property var parentScreen: null
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS

    readonly property bool hasActivePrivacy: PrivacyService.anyPrivacyActive
    readonly property int activeCount: PrivacyService.microphoneActive + PrivacyService.cameraActive
                                       + PrivacyService.screensharingActive
+    readonly property real contentWidth: hasActivePrivacy ? (activeCount * 18 + (activeCount - 1) * Theme.spacingXS) : 0

-    width: hasActivePrivacy ? (activeCount > 1 ? 80 : 60) : 0
+    width: hasActivePrivacy ? (contentWidth + horizontalPadding * 2) : 0
    height: hasActivePrivacy ? widgetHeight : 0
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    visible: hasActivePrivacy
    opacity: hasActivePrivacy ? 1 : 0
    enabled: hasActivePrivacy

-    color: Qt.rgba(
+    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
+        return Qt.rgba(
               privacyArea.containsMouse ? Theme.errorPressed.r : Theme.errorHover.r,
               privacyArea.containsMouse ? Theme.errorPressed.g : Theme.errorHover.g,
               privacyArea.containsMouse ? Theme.errorPressed.b : Theme.errorHover.b,
               (privacyArea.containsMouse ? Theme.errorPressed.a : Theme.errorHover.a)
               * Theme.widgetTransparency)
+    }

    MouseArea {
        id: privacyArea
--- a/Modules/TopBar/RamMonitor.qml
+++ b/Modules/TopBar/RamMonitor.qml
@@ -15,11 +15,13 @@ Rectangle {
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetHeight / 30))

-    width: 55
+    width: ramContent.implicitWidth + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
@@ -54,6 +56,7 @@ Rectangle {
    }

    Row {
+        id: ramContent
        anchors.centerIn: parent
        spacing: 3

--- a/Modules/TopBar/RunningApps.qml
+++ b/Modules/TopBar/RunningApps.qml
@@ -15,6 +15,7 @@ Rectangle {
    property var hoveredItem: null
    property var topBar: null
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS
    // The visual root for this window
    property Item windowRoot: (Window.window ? Window.window.contentItem : null)
    readonly property var sortedToplevels: CompositorService.sortedToplevels
@@ -23,22 +24,23 @@ Rectangle {
        if (windowCount === 0)
            return 0
        if (SettingsData.runningAppsCompactMode) {
-            return windowCount * 24 + (windowCount - 1) * Theme.spacingXS + Theme.spacingS * 2
+            return windowCount * 24 + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2
        } else {
            return windowCount * (24 + Theme.spacingXS + 120)
-                    + (windowCount - 1) * Theme.spacingXS + Theme.spacingS * 2
+                    + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2
        }
    }

    width: calculatedWidth
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    visible: windowCount > 0
    clip: false
    color: {
        if (windowCount === 0)
            return "transparent"
-
+        
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/SystemTrayBar.qml
+++ b/Modules/TopBar/SystemTrayBar.qml
@@ -10,18 +10,20 @@ Rectangle {
    property var parentWindow: null
    property var parentScreen: null
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS

    readonly property int calculatedWidth: SystemTray.items.values.length
                                           > 0 ? SystemTray.items.values.length
-                                                 * 24 + Theme.spacingS * 2 : 0
+                                                 * 24 + horizontalPadding * 2 : 0

    width: calculatedWidth
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
        if (SystemTray.items.values.length === 0)
            return "transparent"
-
+        
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = Theme.secondaryHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/TopBar.qml
+++ b/Modules/TopBar/TopBar.qml
@@ -398,7 +398,7 @@ PanelWindow {
                        id: leftSection

                        height: parent.height
-                        spacing: Theme.spacingXS
+                        spacing: SettingsData.topBarNoBackground ? 2 : Theme.spacingXS
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter

@@ -428,7 +428,7 @@ PanelWindow {
                        property var centerWidgets: []
                        property int totalWidgets: 0
                        property real totalWidth: 0
-                        property real spacing: Theme.spacingS
+                        property real spacing: SettingsData.topBarNoBackground ? 2 : Theme.spacingS

                        function updateLayout() {
                            // Defer layout if dimensions are invalid
@@ -577,7 +577,7 @@ PanelWindow {
                        id: rightSection

                        height: parent.height
-                        spacing: Theme.spacingXS
+                        spacing: SettingsData.topBarNoBackground ? 2 : Theme.spacingXS
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter

@@ -605,10 +605,12 @@ PanelWindow {
                        id: clipboardComponent

                        Rectangle {
-                            width: 40
+                            readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (root.widgetHeight / 30))
+                            width: clipboardIcon.width + horizontalPadding * 2
                            height: root.widgetHeight
-                            radius: Theme.cornerRadius
+                            radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
                            color: {
+                                if (SettingsData.topBarNoBackground) return "transparent"
                                const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
                                return Qt.rgba(
                                            baseColor.r, baseColor.g,
@@ -617,6 +619,7 @@ PanelWindow {
                            }

                            DankIcon {
+                                id: clipboardIcon
                                anchors.centerIn: parent
                                name: "content_paste"
                                size: Theme.iconSize - 6
--- a/Modules/TopBar/Weather.qml
+++ b/Modules/TopBar/Weather.qml
@@ -11,15 +11,17 @@ Rectangle {
    property var parentScreen: null
    property real barHeight: 48
    property real widgetHeight: 30
+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Theme.spacingS

    signal clicked

    visible: SettingsData.weatherEnabled
    width: visible ? Math.min(100,
-                              weatherRow.implicitWidth + Theme.spacingS * 2) : 0
+                              weatherRow.implicitWidth + horizontalPadding * 2) : 0
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)
--- a/Modules/TopBar/WorkspaceSwitcher.qml
+++ b/Modules/TopBar/WorkspaceSwitcher.qml
@@ -77,14 +77,16 @@ Rectangle {
        return 1
    }

+    readonly property real horizontalPadding: SettingsData.topBarNoBackground ? 2 : Math.max(Theme.spacingS, SettingsData.topBarInnerPadding)
+    
    width: SettingsData.showWorkspacePadding ? Math.max(
                                                   120,
-                                                   workspaceRow.implicitWidth + Math.max(Theme.spacingS, SettingsData.topBarInnerPadding)
-                                                   * 2) : workspaceRow.implicitWidth
-                                               + Math.max(Theme.spacingS, SettingsData.topBarInnerPadding) * 2
+                                                   workspaceRow.implicitWidth + horizontalPadding * 2) : workspaceRow.implicitWidth
+                                               + horizontalPadding * 2
    height: widgetHeight
-    radius: Theme.cornerRadius
+    radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
    color: {
+        if (SettingsData.topBarNoBackground) return "transparent"
        const baseColor = Theme.surfaceTextHover
        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
                       baseColor.a * Theme.widgetTransparency)