no background opt for topbar

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, "'\\''") + "'"
     }

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)
+                                   }
+                    }
                 }
             }
 

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: {

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)

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,

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
 

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
 

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)

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
 

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

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
+        radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceTextHover.r, Theme.surfaceTextHover.g,
+        color: SettingsData.topBarNoBackground ? "transparent" : Qt.rgba(Theme.surfaceTextHover.r, Theme.surfaceTextHover.g,
                        Theme.surfaceTextHover.b,
                        Theme.surfaceTextHover.a * Theme.widgetTransparency)
 

Modules/TopBar/Media.qml

@@ -22,21 +22,26 @@ Rectangle {
     }
 
     readonly property int currentContentWidth: {
-        // AudioViz (20) + spacing + text + spacing + controls (~90) + padding
+        // Calculate actual content width:
-        const baseWidth = 20 + Theme.spacingXS + 90 + Theme.spacingS * 2
+        // AudioViz (20) + spacing + [text + spacing] + controls (prev:20 + spacing + play:24 + spacing + next:20) + padding
-        return baseWidth + textWidth + (textWidth > 0 ? Theme.spacingXS : 0)
+        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)

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.rightMargin: SettingsData.topBarNoBackground ? 0 : 6
-        anchors.topMargin: 6
+        anchors.topMargin: SettingsData.topBarNoBackground ? 0 : 6
         visible: root.hasUnread
     }
 

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

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
 

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)

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)

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

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)

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)
+                                                   workspaceRow.implicitWidth + horizontalPadding * 2) : workspaceRow.implicitWidth
-                                                   * 2) : workspaceRow.implicitWidth
+                                               + horizontalPadding * 2
-                                               + Math.max(Theme.spacingS, SettingsData.topBarInnerPadding) * 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)