fix gtk3 colors and clean media player

Modules/DankDash/MediaPlayerTab.qml

@@ -16,19 +16,6 @@ Item {
     property MprisPlayer activePlayer: MprisController.activePlayer
     property var allPlayers: MprisController.availablePlayers
 
-    onActivePlayerChanged: {
-        if (activePlayer) {
-            lastValidTitle = ""
-            lastValidArtist = ""
-            lastValidAlbum = ""
-            lastValidArtUrl = ""
-        }
-    }
-
-    property string lastValidTitle: ""
-    property string lastValidArtist: ""
-    property string lastValidAlbum: ""
-    property string lastValidArtUrl: ""
 
     property var defaultSink: AudioService.sink
 
@@ -36,11 +23,6 @@ Item {
     property color extractedAccentColor: Theme.primary
     property bool colorsExtracted: false
 
-    readonly property color primaryTransparent12: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
-    readonly property color primaryTransparent20: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
-    readonly property color surfaceVariantTransparent80: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
-    readonly property color outlineTransparent30: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
-
     readonly property real ratio: {
         if (!activePlayer || activePlayer.length <= 0) {
             return 0
@@ -81,105 +63,41 @@ Item {
         return "volume_up"
     }
 
+    function adjustVolume(step) {
+        if (!defaultSink?.audio) return
 
-    readonly property var dropdownStyle: ({
+        const currentVolume = Math.round(defaultSink.audio.volume * 100)
-        backgroundColor: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98),
+        const newVolume = Math.min(100, Math.max(0, currentVolume + step))
-        borderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6),
-        borderWidth: 2,
-        cornerRadius: Theme.cornerRadius * 2,
-        shadowOffset: 8,
-        shadowBlur: 1.0,
-        shadowColor: Qt.rgba(0, 0, 0, 0.4),
-        shadowOpacity: 0.7,
-        animationDuration: Anims.durShort
-    })
 
-    property bool isSeeking: false
+        defaultSink.audio.volume = newVolume / 100
-
+        if (newVolume > 0 && defaultSink.audio.muted) {
-    Timer {
+            defaultSink.audio.muted = false
-        id: cleanupTimer
-        interval: 2000
-        running: !activePlayer
-        onTriggered: {
-            lastValidTitle = ""
-            lastValidArtist = ""
-            lastValidAlbum = ""
-            lastValidArtUrl = ""
-            extractedDominantColor = Theme.surface
-            extractedAccentColor = Theme.primary
-            colorsExtracted = false
-            stop()
         }
     }
 
     ColorQuantizer {
         id: colorQuantizer
-        source: (root.activePlayer?.trackArtUrl) || root.lastValidArtUrl || ""
+        source: activePlayer?.trackArtUrl || ""
         depth: 6
 
-        onSourceChanged: {
-            if (source) {
-                root.colorsExtracted = false
-                colorFallbackTimer.restart()
-            }
-        }
-
         onColorsChanged: {
             if (colors.length > 0) {
-                colorFallbackTimer.stop()
+                extractedDominantColor = colors[0]
-                root.extractedDominantColor = enhanceColorForBackground(colors[0])
+                extractedAccentColor = colors.length > 2 ? colors[2] : colors[0]
-                root.extractedAccentColor = enhanceColorForBackground(colors.length > 2 ? colors[2] : colors[0])
+                colorsExtracted = true
-                root.colorsExtracted = true
             }
         }
     }
     
     
-    function enhanceColorForBackground(color) {
-        const luminance = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b
 
-        if (luminance < 0.2) {
+    property bool isSeeking: false
-            const boost = 0.4 / Math.max(luminance, 0.05)
-            return Qt.rgba(
-                Math.min(1.0, color.r * boost),
-                Math.min(1.0, color.g * boost), 
-                Math.min(1.0, color.b * boost),
-                color.a
-            )
-        }
 
-        return color
-    }
-
-    Timer {
-        id: colorFallbackTimer
-        interval: 3000
-        onTriggered: {
-            if (!root.colorsExtracted) {
-                root.extractedDominantColor = Qt.rgba(
-                    Theme.primary.r * 0.7 + 0.3 * 0.5,
-                    Theme.primary.g * 0.7 + 0.3 * 0.5,
-                    Theme.primary.b * 0.7 + 0.3 * 0.5,
-                    Theme.primary.a
-                )
-                root.extractedAccentColor = Qt.rgba(
-                    Theme.secondary.r * 0.8 + 0.2 * 0.4,
-                    Theme.secondary.g * 0.8 + 0.2 * 0.4,
-                    Theme.secondary.b * 0.8 + 0.2 * 0.4,
-                    Theme.secondary.a
-                )
-                root.colorsExtracted = true
-            }
-        }
-    }
 
     Rectangle {
-        id: dynamicBackground
         anchors.fill: parent
         radius: Theme.cornerRadius
-        visible: true 
         opacity: colorsExtracted ? 1.0 : 0.3
-        
         gradient: Gradient {
             GradientStop {
                 position: 0.0
@@ -193,75 +111,17 @@ Item {
                     Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.3) :
                     Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.15)
             }
-            GradientStop { 
-                position: 0.7
-                color: colorsExtracted ?
-                    Qt.rgba(extractedDominantColor.r, extractedDominantColor.g, extractedDominantColor.b, 0.2) :
-                    Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
-            }
             GradientStop {
                 position: 1.0
                 color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 0.85)
             }
         }
-        
-        Behavior on visible {
-            NumberAnimation { 
-                duration: Anims.durShort
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Anims.standard
-            }
-        }
-    }
-
-    Rectangle {
-        id: dynamicOverlay
-        anchors.fill: parent
-        radius: Theme.cornerRadius
-        visible: colorsExtracted && ((activePlayer && activePlayer.trackTitle !== "") || lastValidTitle !== "")
-        color: "transparent"
-        
-        Rectangle {
-            width: parent.width * 0.8
-            height: parent.height * 0.4
-            x: parent.width * 0.1
-            y: parent.height * 0.1
-            radius: Theme.cornerRadius * 2
-            opacity: 0.15
-            
-            gradient: Gradient {
-                GradientStop { 
-                    position: 0.0
-                    color: Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.6)
-                }
-                GradientStop { 
-                    position: 1.0
-                    color: "transparent"
-                }
-            }
-            
-            layer.enabled: true
-            layer.effect: MultiEffect {
-                blurEnabled: true
-                blur: 1.0
-                blurMax: 64
-                blurMultiplier: 1.0
-            }
-        }
-        
-        Behavior on visible {
-            NumberAnimation { 
-                duration: Anims.durShort
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Anims.standard
-            }
-        }
     }
 
     Column {
         anchors.centerIn: parent
         spacing: Theme.spacingM
-        visible: (!activePlayer && !lastValidTitle) || (activePlayer && activePlayer.trackTitle === "" && lastValidTitle === "")
+        visible: !activePlayer || activePlayer.trackTitle === ""
 
         DankIcon {
             name: "music_note"
@@ -281,7 +141,7 @@ Item {
     Item {
         anchors.fill: parent
         clip: false
-        visible: (activePlayer && activePlayer.trackTitle !== "") || lastValidTitle !== ""
+        visible: activePlayer && activePlayer.trackTitle !== ""
 
         MouseArea {
             anchors.fill: parent
@@ -318,10 +178,10 @@ Item {
                 return node.audio && node.isSink && !node.isStream
             })
             
-            color: dropdownStyle.backgroundColor
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
-            border.color: dropdownStyle.borderColor
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
-            border.width: dropdownStyle.borderWidth
+            border.width: 2
-            radius: dropdownStyle.cornerRadius
+            radius: Theme.cornerRadius * 2
             
             opacity: audioDevicesButton.devicesExpanded ? 1 : 0
             
@@ -330,15 +190,15 @@ Item {
             layer.effect: MultiEffect {
                 shadowEnabled: true
                 shadowHorizontalOffset: 0
-                shadowVerticalOffset: dropdownStyle.shadowOffset
+                shadowVerticalOffset: 8
-                shadowBlur: dropdownStyle.shadowBlur
+                shadowBlur: 1.0
-                shadowColor: dropdownStyle.shadowColor
+                shadowColor: Qt.rgba(0, 0, 0, 0.4)
-                shadowOpacity: dropdownStyle.shadowOpacity
+                shadowOpacity: 0.7
             }
             
             Behavior on height {
                 NumberAnimation {
-                    duration: dropdownStyle.animationDuration
+                    duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.emphasizedDecel
                 }
@@ -346,7 +206,7 @@ Item {
 
             Behavior on opacity {
                 NumberAnimation {
-                    duration: dropdownStyle.animationDuration
+                    duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.standard
                 }
@@ -386,7 +246,7 @@ Item {
                                 width: parent.width
                                 height: 48
                                 radius: Theme.cornerRadius
-                                color: deviceMouseAreaLeft.containsMouse ? primaryTransparent12 : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                                color: deviceMouseAreaLeft.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
                                 border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                                 border.width: modelData === AudioService.sink ? 2 : 1
                                 
@@ -443,21 +303,8 @@ Item {
                                     }
                                 }
                                 
-                                Behavior on color {
+                                Behavior on color { ColorAnimation { duration: Anims.durShort } }
-                                    ColorAnimation { 
+                                Behavior on border.color { ColorAnimation { duration: Anims.durShort } }
-                                        duration: Anims.durShort
-                                        easing.type: Easing.BezierSpline
-                                        easing.bezierCurve: Anims.standard
-                                    }
-                                }
-                                
-                                Behavior on border.color {
-                                    ColorAnimation { 
-                                        duration: Anims.durShort
-                                        easing.type: Easing.BezierSpline
-                                        easing.bezierCurve: Anims.standard
-                                    }
-                                }
                             }
                         }
                     }
@@ -475,10 +322,10 @@ Item {
             clip: true
             z: 150
 
-            color: dropdownStyle.backgroundColor
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
-            border.color: dropdownStyle.borderColor
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
-            border.width: dropdownStyle.borderWidth
+            border.width: 2
-            radius: dropdownStyle.cornerRadius
+            radius: Theme.cornerRadius * 2
 
             opacity: playerSelectorButton.playersExpanded ? 1 : 0
 
@@ -486,15 +333,15 @@ Item {
             layer.effect: MultiEffect {
                 shadowEnabled: true
                 shadowHorizontalOffset: 0
-                shadowVerticalOffset: dropdownStyle.shadowOffset
+                shadowVerticalOffset: 8
-                shadowBlur: dropdownStyle.shadowBlur
+                shadowBlur: 1.0
-                shadowColor: dropdownStyle.shadowColor
+                shadowColor: Qt.rgba(0, 0, 0, 0.4)
-                shadowOpacity: dropdownStyle.shadowOpacity
+                shadowOpacity: 0.7
             }
 
             Behavior on height {
                 NumberAnimation { 
-                    duration: dropdownStyle.animationDuration
+                    duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.emphasizedDecel
                 }
@@ -502,7 +349,7 @@ Item {
 
             Behavior on opacity {
                 NumberAnimation { 
-                    duration: dropdownStyle.animationDuration
+                    duration: Anims.durShort
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Anims.standard
                 }
@@ -640,8 +487,6 @@ Item {
                     height: width
                     anchors.centerIn: parent
                     activePlayer: root.activePlayer
-                    lastValidArtUrl: root.lastValidArtUrl
-                    onLastValidArtUrlChanged: root.lastValidArtUrl = lastValidArtUrl
                 }
             }
 
@@ -658,13 +503,7 @@ Item {
                     anchors.horizontalCenter: parent.horizontalCenter
 
                     StyledText {
-                        text: {
+                        text: activePlayer?.trackTitle || "Unknown Track"
-                            if (activePlayer && activePlayer.trackTitle) {
-                                lastValidTitle = activePlayer.trackTitle
-                                return activePlayer.trackTitle
-                            }
-                            return lastValidTitle || "Unknown Track"
-                        }
                         font.pixelSize: Theme.fontSizeLarge
                         font.weight: Font.Bold
                         color: Theme.surfaceText
@@ -676,13 +515,7 @@ Item {
                     }
 
                     StyledText {
-                        text: {
+                        text: activePlayer?.trackArtist || "Unknown Artist"
-                            if (activePlayer && activePlayer.trackArtist) {
-                                lastValidArtist = activePlayer.trackArtist
-                                return activePlayer.trackArtist
-                            }
-                            return lastValidArtist || "Unknown Artist"
-                        }
                         font.pixelSize: Theme.fontSizeMedium
                         color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
                         width: parent.width
@@ -693,13 +526,7 @@ Item {
                     }
 
                     StyledText {
-                        text: {
+                        text: activePlayer?.trackAlbum || ""
-                            if (activePlayer && activePlayer.trackAlbum) {
-                                lastValidAlbum = activePlayer.trackAlbum
-                                return activePlayer.trackAlbum
-                            }
-                            return lastValidAlbum || ""
-                        }
                         font.pixelSize: Theme.fontSizeSmall
                         color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
                         width: parent.width
@@ -963,7 +790,7 @@ Item {
             x: parent.width - 40 - Theme.spacingM
             y: 235
             color: playerSelectorArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
-            border.color: outlineTransparent30
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
             z: 100
             visible: (allPlayers?.length || 0) >= 1
@@ -996,8 +823,8 @@ Item {
             radius: 20
             x: parent.width - 40 - Theme.spacingM
             y: 180  
-            color: volumeButtonArea.containsMouse ? primaryTransparent20 : surfaceVariantTransparent80
+            color: volumeButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
-            border.color: outlineTransparent30
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
             z: 100
 
@@ -1034,23 +861,11 @@ Item {
                     }
                 }
                 onWheel: wheelEvent => {
-                    if (defaultSink?.audio) {
+                    adjustVolume(wheelEvent.angleDelta.y > 0 ? 3 : -3)
-                        const step = 3
-                        const currentVolume = Math.round(defaultSink.audio.volume * 100)
-                        const newVolume = wheelEvent.angleDelta.y > 0 ? 
-                            Math.min(100, currentVolume + step) : 
-                            Math.max(0, currentVolume - step)
-                        
-                        defaultSink.audio.volume = newVolume / 100
-                        if (newVolume > 0 && defaultSink.audio.muted) {
-                            defaultSink.audio.muted = false
-                        }
-                        
                     volumeButton.volumeExpanded = true
                     wheelEvent.accepted = true
                 }
             }
-            }
 
         }
 
@@ -1062,7 +877,7 @@ Item {
             x: parent.width + Theme.spacingS
             y: 130
             color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
-            border.color: outlineTransparent30
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
             visible: volumeButton.volumeExpanded
             clip: true
@@ -1145,20 +960,7 @@ Item {
                             updateVolume(mouse)
                         }
                         
-                        onWheel: function(wheel) {
+                        onWheel: wheel => adjustVolume(wheel.angleDelta.y > 0 ? 3 : -3)
-                            if (defaultSink) {
-                                const step = 3
-                                const currentVolume = Math.round(defaultSink.audio.volume * 100)
-                                const newVolume = wheel.angleDelta.y > 0 ? 
-                                    Math.min(100, currentVolume + step) : 
-                                    Math.max(0, currentVolume - step)
-                                
-                                defaultSink.audio.volume = newVolume / 100
-                                if (newVolume > 0 && defaultSink.audio.muted) {
-                                    defaultSink.audio.muted = false
-                                }
-                            }
-                        }
                         
                         function updateVolume(mouse) {
                             if (defaultSink) {
@@ -1192,8 +994,8 @@ Item {
             radius: 20
             x: parent.width - 40 - Theme.spacingM
             y: 290  
-            color: audioDevicesArea.containsMouse ? primaryTransparent20 : surfaceVariantTransparent80
+            color: audioDevicesArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
-            border.color: outlineTransparent30
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
             border.width: 1
             z: 100
 

matugen/templates/gtk-colors.css

@@ -76,8 +76,8 @@
 @define-color scrollbar_hover_color {{colors.primary.default.hex}};
 
 /* Selection and highlight colors */
-@define-color selection_bg_color {{colors.primary_container.default.hex}};
+@define-color selection_bg_color {{colors.primary.default.hex}};
-@define-color selection_fg_color {{colors.on_primary_container.default.hex}};
+@define-color selection_fg_color {{colors.on_primary.default.hex}};
 
 /* Tooltip colors */
 @define-color tooltip_bg_color {{colors.inverse_surface.default.hex}};

matugen/templates/gtk3-colloid-light.css

@@ -1,975 +0,0 @@
-@keyframes ripple {
-  to {
-    background-size: 1000% 1000%;
-  }
-}
-
-@keyframes ripple-on-slider {
-  to {
-    background-size: auto, 1000% 1000%;
-  }
-}
-
-@keyframes ripple-on-headerbar {
-  from {
-    background-image: radial-gradient(circle, {{colors.primary.default.hex}} 0%, transparent 0%);
-  }
-  to {
-    background-image: radial-gradient(circle, {{colors.primary.default.hex}} 100%, transparent 0%);
-  }
-}
-
-* {
-  background-clip: padding-box;
-  -GtkToolButton-icon-spacing: 0;
-  -GtkTextView-error-underline-color: #E53935;
-  -GtkScrolledWindow-scrollbar-spacing: 0;
-  -GtkToolItemGroup-expander-size: 11;
-  -GtkWidget-text-handle-width: 24;
-  -GtkWidget-text-handle-height: 24;
-  -GtkDialog-button-spacing: 6;
-  -GtkDialog-action-area-border: 6;
-  outline-style: solid;
-  outline-width: 2px;
-  outline-color: transparent;
-  outline-offset: -4px;
-  -gtk-outline-radius: 6px;
-  -gtk-secondary-caret-color: {{colors.primary.default.hex}};
-}
-
-*:focus {
-  outline-color: alpha(currentColor, 0.1);
-}
-
-XfdesktopIconView.view:active, calendar.raven-calendar:selected, box.vertical > widget > widget:selected, calendar:selected, popover.background modelbutton.flat:selected,
-popover.background .menuitem.button.flat:selected, .csd treeview.view:selected, .background.csd .view:selected {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: alpha(currentColor, 0.1);
-}
-
-.nemo-window .view selection, .nemo-window .view:selected, .nautilus-window notebook .view:not(treeview) selection, .nautilus-window notebook .view:not(treeview):selected, .nautilus-window flowboxchild:selected .icon-item-background, label selection, flowbox flowboxchild:selected {
-  color: {{colors.primary.default.hex}};
-  background-color: {{colors.primary_container.default.hex}};
-}
-
-.nemo-window .nemo-window-pane widget.entry:selected, window.background.csd evview.view.content-view:selected, window.background.csd evview.view.content-view:selected:backdrop, .nautilus-window.background.csd notebook widget.view:selected, entry selection, textview text selection:focus, textview text selection, widget.view:selected, .view:selected {
-  color: {{colors.on_primary.default.hex}};
-  background-color: {{colors.primary.default.hex}};
-}
-
-.linked:not(.vertical) > button, .linked:not(.vertical) > entry {
-  border-radius: 0;
-}
-
-.linked:not(.vertical) > button:first-child, .linked:not(.vertical) > entry:first-child {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.linked:not(.vertical) > button:last-child, .linked:not(.vertical) > entry:last-child {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.linked:not(.vertical) > button:only-child, .linked:not(.vertical) > entry:only-child {
-  border-radius: 6px;
-}
-
-.linked.vertical > button, .linked.vertical > entry {
-  border-radius: 0;
-}
-
-.linked.vertical > button:first-child, .linked.vertical > entry:first-child {
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-}
-
-.linked.vertical > button:last-child, .linked.vertical > entry:last-child {
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.linked.vertical > button:only-child, .linked.vertical > entry:only-child {
-  border-radius: 6px;
-}
-
-/***************
- * Base States *
- ***************/
-.background {
-  background-color: {{colors.surface.default.hex}};
-  color: {{colors.on_surface.default.hex}};
-}
-
-dnd {
-  color: {{colors.on_surface.default.hex}};
-}
-
-.background:backdrop {
-  background-color: {{colors.surface_dim.default.hex}};
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.csd.background {
-  border-radius: 12px;
-}
-
-/*************
- * Scrolling *
- *************/
-scrollbar {
-  background-color: {{colors.surface.default.hex}};
-  transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-}
-
-scrollbar.top {
-  border-bottom: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
-}
-
-scrollbar.bottom {
-  border-top: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
-}
-
-scrollbar.left {
-  border-right: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
-}
-
-scrollbar.right {
-  border-left: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
-}
-
-scrollbar:backdrop {
-  background-color: {{colors.surface_container_low.default.hex}};
-  border-color: alpha({{colors.outline.default.hex}}, 0.3);
-  transition: 200ms ease-out;
-}
-
-scrollbar slider {
-  min-width: 6px;
-  min-height: 6px;
-  margin: -1px;
-  border: 4px solid transparent;
-  border-radius: 8px;
-  background-clip: padding-box;
-  background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.5);
-}
-
-scrollbar slider:hover {
-  background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.7);
-}
-
-scrollbar slider:hover:active {
-  background-color: {{colors.on_surface_variant.default.hex}};
-}
-
-scrollbar slider:backdrop {
-  background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.4);
-}
-
-scrollbar slider:disabled {
-  background-color: transparent;
-}
-
-scrollbar.fine-tune slider {
-  min-width: 4px;
-  min-height: 4px;
-}
-
-scrollbar.fine-tune.horizontal slider {
-  border-width: 2px 4px;
-}
-
-scrollbar.fine-tune.vertical slider {
-  border-width: 4px 2px;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  border-color: transparent;
-  opacity: 0.4;
-  background-color: transparent;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-  margin: 0;
-  min-width: 3px;
-  min-height: 3px;
-  background-color: {{colors.on_surface.default.hex}};
-  border: 1px solid {{colors.surface.default.hex}};
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
-  min-width: 5px;
-  min-height: 5px;
-  background-color: {{colors.on_surface.default.hex}};
-  background-clip: padding-box;
-  border-radius: 100px;
-  border: 1px solid {{colors.surface.default.hex}};
-  -gtk-icon-source: none;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-  margin: 0 2px;
-  min-width: 40px;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
-  margin: 1px 2px;
-  min-width: 5px;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-  margin: 2px 0;
-  min-height: 40px;
-}
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
-  margin: 2px 1px;
-  min-height: 5px;
-}
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
-  opacity: 0.8;
-}
-
-scrollbar.horizontal slider {
-  min-width: 40px;
-}
-
-scrollbar.vertical slider {
-  min-height: 40px;
-}
-
-scrollbar button {
-  padding: 0;
-  min-width: 12px;
-  min-height: 12px;
-  border-style: none;
-  border-radius: 0;
-  transition-property: min-height, min-width, color;
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface_variant.default.hex}}, 0.5);
-}
-
-scrollbar button:hover {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface_variant.default.hex}}, 0.7);
-}
-
-scrollbar button:active, scrollbar button:checked {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-scrollbar button:disabled {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-scrollbar button:backdrop {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface_variant.default.hex}}, 0.4);
-}
-
-scrollbar button:backdrop:disabled {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
-}
-
-scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
-}
-
-scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
-}
-
-scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
-}
-
-/***********
- * Buttons *
- ***********/
-@keyframes needs_attention {
-  from {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to({{colors.primary.default.hex}}), to(transparent));
-  }
-  to {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to({{colors.primary.default.hex}}), to(transparent));
-  }
-}
-
-button {
-  min-height: 24px;
-  min-width: 16px;
-  padding: 8px 16px;
-  border: 1px solid;
-  border-radius: 6px;
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border-color: alpha({{colors.outline.default.hex}}, 0.5);
-  background-color: {{colors.surface.default.hex}};
-  color: {{colors.on_surface.default.hex}};
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  box-shadow: none;
-}
-
-button:hover {
-  border-color: alpha({{colors.outline.default.hex}}, 0.5);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.08);
-  color: {{colors.on_surface.default.hex}};
-}
-
-button:active, button:checked {
-  border-color: alpha({{colors.outline.default.hex}}, 0.5);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.12);
-  color: {{colors.on_surface.default.hex}};
-  box-shadow: none;
-  transition-duration: 50ms;
-}
-
-button:backdrop {
-  border-color: alpha({{colors.outline.default.hex}}, 0.3);
-  background-color: {{colors.surface_dim.default.hex}};
-  color: {{colors.on_surface_variant.default.hex}};
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-}
-
-button:backdrop:active, button:backdrop:checked {
-  border-color: alpha({{colors.outline.default.hex}}, 0.3);
-  background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.08);
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-button:backdrop:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-}
-
-button:backdrop:disabled:active, button:backdrop:disabled:checked {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-}
-
-button:disabled:active, button:disabled:checked {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-  box-shadow: none;
-}
-
-button.suggested-action {
-  border-color: {{colors.primary.default.hex}};
-  background-color: {{colors.primary.default.hex}};
-  color: {{colors.on_primary.default.hex}};
-}
-
-button.suggested-action.flat {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  color: {{colors.primary.default.hex}};
-}
-
-button.suggested-action:hover {
-  border-color: {{colors.primary.default.hex}};
-  background-color: alpha({{colors.on_primary.default.hex}}, 0.08);
-  color: {{colors.on_primary.default.hex}};
-}
-
-button.suggested-action:active, button.suggested-action:checked {
-  border-color: {{colors.primary.default.hex}};
-  background-color: alpha({{colors.on_primary.default.hex}}, 0.12);
-  color: {{colors.on_primary.default.hex}};
-}
-
-button.suggested-action:backdrop {
-  border-color: {{colors.primary.default.hex}};
-  background-color: {{colors.primary.default.hex}};
-  color: {{colors.on_primary.default.hex}};
-}
-
-button.suggested-action:backdrop:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.suggested-action:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.destructive-action {
-  border-color: {{colors.error.default.hex}};
-  background-color: {{colors.error.default.hex}};
-  color: {{colors.on_error.default.hex}};
-}
-
-button.destructive-action.flat {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  color: {{colors.error.default.hex}};
-}
-
-button.destructive-action:hover {
-  border-color: {{colors.error.default.hex}};
-  background-color: alpha({{colors.on_error.default.hex}}, 0.08);
-  color: {{colors.on_error.default.hex}};
-}
-
-button.destructive-action:active, button.destructive-action:checked {
-  border-color: {{colors.error.default.hex}};
-  background-color: alpha({{colors.on_error.default.hex}}, 0.12);
-  color: {{colors.on_error.default.hex}};
-}
-
-button.destructive-action:backdrop {
-  border-color: {{colors.error.default.hex}};
-  background-color: {{colors.error.default.hex}};
-  color: {{colors.on_error.default.hex}};
-}
-
-button.destructive-action:backdrop:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.destructive-action:disabled {
-  border-color: alpha({{colors.outline.default.hex}}, 0.12);
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.flat {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  transition: none;
-}
-
-button.flat:hover {
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transition-duration: 500ms;
-  border-color: transparent;
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.08);
-  background-image: none;
-}
-
-button.flat:hover:active {
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-button.flat:backdrop {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-button.flat:disabled {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.flat:backdrop:disabled {
-  border-color: transparent;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.flat:active, button.flat:checked {
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border-color: transparent;
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.12);
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-}
-
-button.flat:backdrop:active, button.flat:backdrop:checked {
-  border-color: transparent;
-  background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.08);
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-button.flat:disabled:active, button.flat:disabled:checked {
-  border-color: transparent;
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.flat.suggested-action {
-  color: {{colors.primary.default.hex}};
-}
-
-button.flat.suggested-action:hover {
-  border-color: transparent;
-  background-color: alpha({{colors.primary.default.hex}}, 0.08);
-  background-image: none;
-  color: {{colors.primary.default.hex}};
-}
-
-button.flat.suggested-action:active, button.flat.suggested-action:checked {
-  border-color: transparent;
-  background-color: alpha({{colors.primary.default.hex}}, 0.12);
-  background-image: none;
-  color: {{colors.primary.default.hex}};
-}
-
-button.flat.suggested-action:backdrop {
-  color: {{colors.primary.default.hex}};
-}
-
-button.flat.suggested-action:disabled, button.flat.suggested-action:backdrop:disabled {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.flat.destructive-action {
-  color: {{colors.error.default.hex}};
-}
-
-button.flat.destructive-action:hover {
-  border-color: transparent;
-  background-color: alpha({{colors.error.default.hex}}, 0.08);
-  background-image: none;
-  color: {{colors.error.default.hex}};
-}
-
-button.flat.destructive-action:active, button.flat.destructive-action:checked {
-  border-color: transparent;
-  background-color: alpha({{colors.error.default.hex}}, 0.12);
-  background-image: none;
-  color: {{colors.error.default.hex}};
-}
-
-button.flat.destructive-action:backdrop {
-  color: {{colors.error.default.hex}};
-}
-
-button.flat.destructive-action:disabled, button.flat.destructive-action:backdrop:disabled {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-button.image-button {
-  min-width: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-button.text-button {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-button.text-button.image-button {
-  padding-left: 12px;
-  padding-right: 16px;
-}
-
-button.text-button.image-button label {
-  padding-left: 8px;
-  padding-right: 0px;
-}
-
-button.text-button.image-button label:dir(rtl) {
-  padding-left: 0px;
-  padding-right: 8px;
-}
-
-menubutton.circular button, button.circular {
-  border-radius: 9999px;
-  -gtk-outline-radius: 9999px;
-}
-
-menubutton.circular button label, button.circular label {
-  padding: 0;
-}
-
-button:drop(active) {
-  border-color: {{colors.primary.default.hex}};
-  box-shadow: inset 0 0 0 1px {{colors.primary.default.hex}};
-}
-
-/***************
- * Header bars *
- ***************/
-.nemo-window .primary-toolbar button:not(.text-button), headerbar button:not(.suggested-action):not(.destructive-action) {
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.nemo-window .primary-toolbar .linked:not(.vertical) > button:not(.text-button), headerbar .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
-  border-radius: 6px;
-}
-
-.nemo-window .primary-toolbar button:focus:not(.text-button), headerbar button:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:hover:not(.text-button), headerbar button:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:active:not(.text-button), headerbar button:active:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:checked:not(.text-button), headerbar button:checked:not(.suggested-action):not(.destructive-action) {
-  color: {{colors.on_surface.default.hex}};
-}
-
-.nemo-window .primary-toolbar button:disabled:not(.text-button), headerbar button:disabled:not(.suggested-action):not(.destructive-action) {
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-.nemo-window .primary-toolbar button:checked:disabled:not(.text-button), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) {
-  background-color: transparent;
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.nemo-window .primary-toolbar button:backdrop:not(.text-button), headerbar button:backdrop:not(.suggested-action):not(.destructive-action) {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.nemo-window .primary-toolbar button:backdrop:focus:not(.text-button), headerbar button:backdrop:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:hover:not(.text-button), headerbar button:backdrop:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:active:not(.text-button), headerbar button:backdrop:active:not(.suggested-action):not(.destructive-action) {
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.nemo-window .primary-toolbar button:backdrop:disabled:not(.text-button), headerbar button:backdrop:disabled:not(.suggested-action):not(.destructive-action) {
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-.nemo-window .primary-toolbar button:backdrop:checked:not(.text-button), headerbar button:backdrop:checked:not(.suggested-action):not(.destructive-action) {
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.nemo-window .primary-toolbar button:backdrop:checked:disabled:not(.text-button), headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructive-action) {
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-.nemo-window .primary-toolbar entry, .titlebar entry {
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: {{colors.on_surface.default.hex}};
-}
-
-.nemo-window .primary-toolbar entry:disabled, .titlebar entry:disabled {
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.nemo-window .primary-toolbar entry image, .titlebar entry image {
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.nemo-window .primary-toolbar entry image:hover, .titlebar entry image:hover, .nemo-window .primary-toolbar entry image:active, .titlebar entry image:active {
-  color: {{colors.on_surface.default.hex}};
-}
-
-.nemo-window .primary-toolbar entry image:disabled, .titlebar entry image:disabled {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.titlebar {
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  background-color: {{colors.surface_container_low.default.hex}};
-  color: {{colors.on_surface.default.hex}};
-  border-radius: 12px 12px 0 0;
-  box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
-}
-
-.titlebar:disabled {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.titlebar:backdrop {
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.titlebar:backdrop:disabled {
-  color: alpha({{colors.on_surface.default.hex}}, 0.3);
-}
-
-.csd .titlebar:backdrop {
-  background-color: {{colors.surface_container_lowest.default.hex}};
-}
-
-.titlebar .title {
-  padding: 0 12px;
-  font-weight: bold;
-}
-
-.titlebar .subtitle {
-  padding: 0 12px;
-  font-size: smaller;
-}
-
-.titlebar .subtitle,
-.titlebar .dim-label {
-  transition: color 75ms cubic-bezier(0, 0, 0.2, 1);
-  color: {{colors.on_surface_variant.default.hex}};
-}
-
-.titlebar .subtitle:backdrop,
-.titlebar .dim-label:backdrop {
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.titlebar .titlebar {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.titlebar + separator, .titlebar + separator.sidebar {
-  background-color: {{colors.surface_container_low.default.hex}};
-  background-image: none;
-  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
-}
-
-.titlebar + separator:backdrop, .titlebar + separator.sidebar:backdrop {
-  background-color: {{colors.surface_container_lowest.default.hex}};
-}
-
-.titlebar.selection-mode + separator, .titlebar.selection-mode + separator.sidebar, .selection-mode .titlebar + separator, .selection-mode .titlebar + separator.sidebar {
-  background-color: {{colors.primary.default.hex}};
-}
-
-.titlebar.selection-mode + separator:backdrop, .titlebar.selection-mode + separator.sidebar:backdrop, .selection-mode .titlebar + separator:backdrop, .selection-mode .titlebar + separator.sidebar:backdrop {
-  background-color: {{colors.primary.default.hex}};
-}
-
-.background.csd.unified .titlebar + separator, .background.csd.unified .titlebar + separator.sidebar {
-  box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12);
-}
-
-.titlebar .linked:not(.vertical) > entry {
-  border-radius: 6px;
-  margin-left: 3px;
-  margin-right: 3px;
-}
-
-.titlebar button.suggested-action:disabled, .titlebar button.destructive-action:disabled {
-  background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
-  color: alpha({{colors.on_surface.default.hex}}, 0.38);
-}
-
-.titlebar .path-bar button:not(.suggested-action):not(.destructive-action).text-button {
-  min-width: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.titlebar.selection-mode {
-  transition: background-color 0.1ms 225ms, color 75ms cubic-bezier(0, 0, 0.2, 1);
-  animation: ripple-on-headerbar 225ms cubic-bezier(0, 0, 0.2, 1);
-  background-color: {{colors.primary.default.hex}};
-  color: {{colors.on_primary.default.hex}};
-  box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.2);
-}
-
-.titlebar.selection-mode:backdrop {
-  color: alpha({{colors.on_primary.default.hex}}, 0.7);
-  background-color: {{colors.primary.default.hex}};
-}
-
-.titlebar.selection-mode .subtitle:link {
-  color: {{colors.on_primary.default.hex}};
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action) {
-  color: {{colors.on_primary.default.hex}};
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled {
-  color: alpha({{colors.on_primary.default.hex}}, 0.5);
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked {
-  color: {{colors.on_primary.default.hex}};
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled {
-  color: alpha({{colors.on_primary.default.hex}}, 0.5);
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:not(.titlebutton) {
-  color: alpha({{colors.on_primary.default.hex}}, 0.7);
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:disabled {
-  color: alpha({{colors.on_primary.default.hex}}, 0.32);
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked {
-  color: alpha({{colors.on_primary.default.hex}}, 0.7);
-}
-
-.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked:disabled {
-  color: alpha({{colors.on_primary.default.hex}}, 0.32);
-}
-
-.titlebar.selection-mode .selection-menu {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.titlebar.selection-mode .selection-menu arrow {
-  -GtkArrow-arrow-scaling: 1;
-}
-
-.titlebar.selection-mode .selection-menu .arrow {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
-}
-
-.tiled .titlebar, .tiled-top .titlebar, .tiled-right .titlebar, .tiled-bottom .titlebar, .tiled-left .titlebar, .maximized .titlebar, .fullscreen .titlebar {
-  border-radius: 0;
-}
-
-.titlebar.default-decoration {
-  min-height: 24px;
-  padding: 6px 12px;
-  border-radius: 12px 12px 0 0;
-  border: none;
-  background-color: {{colors.surface_container_low.default.hex}};
-  background-image: none;
-  box-shadow: inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
-}
-
-.titlebar.default-decoration:backdrop {
-  background-color: {{colors.surface_container_lowest.default.hex}};
-}
-
-.tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration {
-  box-shadow: none;
-  border-radius: 0;
-}
-
-.titlebar.default-decoration button.titlebutton {
-  min-height: 24px;
-  min-width: 24px;
-  margin: 0;
-  padding: 0;
-}
-
-.background.csd .titlebar.default-decoration {
-  padding: 6px;
-  box-shadow: none;
-}
-
-.background:not(.csd) .titlebar.default-decoration button.titlebutton:active {
-  background-size: 1000% 1000%;
-}
-
-.solid-csd .titlebar:dir(rtl), .solid-csd .titlebar:dir(ltr) {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-headerbar {
-  min-height: 46px;
-  padding: 0 6px;
-}
-
-box.vertical headerbar {
-  background-color: {{colors.surface_container_low.default.hex}};
-}
-
-headerbar entry,
-headerbar spinbutton,
-headerbar button,
-headerbar stackswitcher {
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
-headerbar button, headerbar button.image-button {
-  border-radius: 6px;
-}
-
-headerbar > box.left,
-headerbar > box.right {
-  padding: 0 4px;
-}
-
-headerbar separator.titlebutton, headerbar separator.sidebar {
-  margin-top: 11.5px;
-  margin-bottom: 11.5px;
-  background-color: transparent;
-}
-
-headerbar switch {
-  margin-top: 11px;
-  margin-bottom: 11px;
-}
-
-headerbar spinbutton button {
-  margin-top: 0;
-  margin-bottom: 0;
-}

scripts/matugen-worker.sh

@@ -81,11 +81,8 @@ build_once() {
     echo "" >> "$TMP_CFG"
   fi
   
-  if [ "$mode" = "light" ]; then
+  # GTK3 colors based on colloid
-    COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colloid-light.css"
+  COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colors.css"
-  else
-    COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colloid-dark.css"
-  fi
   
   sed -i "/\[templates\.gtk3\]/,/^$/ s|input_path = './matugen/templates/gtk-colors.css'|input_path = '$COLLOID_TEMPLATE'|" "$TMP_CFG"
   sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CFG"