From 98699b53463dcd2563fec77d5f3cd1cffbb14195 Mon Sep 17 00:00:00 2001 From: rope Date: Wed, 17 Jun 2026 11:30:13 +0100 Subject: [PATCH] quickshell: fix hover/colour bugs, translucent card surfaces - calendar month chevrons: fade from transparent base02, no black flash - power menu: all four buttons use the logout base05 setup - runner results: base01 card segment matching other dropdowns - cards: translucent cardBg so the bar-layer blur shows through Co-Authored-By: Claude Opus 4.8 --- settings/quickshell.nix | 45 +++++++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/settings/quickshell.nix b/settings/quickshell.nix index 8a40372..717d128 100644 --- a/settings/quickshell.nix +++ b/settings/quickshell.nix @@ -159,6 +159,9 @@ in readonly property color base0C: "#${c.base0C}" readonly property color base0D: "#${c.base0D}" readonly property color barBg: "#B3${c.base00}" + // Card surfaces are translucent so the compositor's bar-layer + // blur shows through — a lessened blur over the panel tint. + readonly property color cardBg: "#CC${c.base01}" readonly property string fontFamily: "${monoFont}" // Ligature-based icon font: text "volume_up" renders the icon readonly property string iconFont: "Material Symbols Rounded" @@ -368,7 +371,7 @@ in default property alias cardData: _cardCol.data property alias cardSpacing: _cardCol.spacing radius: Theme.radius - color: Theme.base01 + color: Theme.cardBg implicitHeight: _cardCol.height + 2 * Theme.cardPad Column { id: _cardCol @@ -604,7 +607,7 @@ in width: 48 height: sessionCol.height + 8 radius: Theme.radius - color: Theme.base01 + color: Theme.cardBg // Sliding selection pill — same tech as the power // profile selector; glides between the buttons. @@ -641,11 +644,9 @@ in SIcon { anchors.centerIn: parent text: sessBtn.modelData.icon - // Calendar palette: base05 icons; red only when - // a destructive action is the armed selection - color: sessBtn.selected && sessBtn.modelData.danger - ? Theme.base08 : Theme.base05 - Behavior on color { ColorAnimation { duration: Theme.animFade } } + // All four buttons share the logout + // setup: base05, FILL on selection. + color: Theme.base05 font.pixelSize: 20 font.weight: 600 font.variableAxes: { "FILL": sessBtn.selected ? 1.0 : 0.0 } @@ -674,7 +675,7 @@ in property bool open: false readonly property real panelW: 420 property real targetH: 36 + launcherList.contentHeight - + (launcherList.count > 0 ? 8 : 0) + 24 + + (launcherList.count > 0 ? 8 + 2 * Theme.cardPad : 0) + 24 // Both axes animate: expands from a small point on the // bottom edge (like the top dropdowns' stub seed). property real openH: open ? targetH : 0 @@ -759,10 +760,19 @@ in width: launcherPanel.panelW - 24 spacing: 8 - ListView { - id: launcherList + // Results sit in a base01 card segment, like the + // notification list and the other dropdowns. + Rectangle { width: parent.width - height: contentHeight + height: launcherList.contentHeight + 2 * Theme.cardPad + radius: Theme.radius + color: Theme.cardBg + visible: launcherList.count > 0 + + ListView { + id: launcherList + anchors.fill: parent + anchors.margins: Theme.cardPad interactive: false model: launcherPanel.entries highlight: Rectangle { @@ -813,12 +823,13 @@ in } } } + } Rectangle { width: parent.width height: 36 - radius: Theme.radiusSmall - color: Theme.base01 + radius: Theme.radius + color: Theme.cardBg SIcon { id: searchIcon @@ -2243,7 +2254,7 @@ in Rectangle { width: 28; height: 28; radius: Theme.radiusSmall anchors.left: parent.left - color: calPrevMa.containsMouse ? Theme.base02 : "transparent" + color: calPrevMa.containsMouse ? Theme.base02 : Qt.rgba(Theme.base02.r, Theme.base02.g, Theme.base02.b, 0) Behavior on color { ColorAnimation { duration: Theme.animFade } } SIcon { anchors.centerIn: parent @@ -2276,7 +2287,7 @@ in Rectangle { width: 28; height: 28; radius: Theme.radiusSmall anchors.right: parent.right - color: calNextMa.containsMouse ? Theme.base02 : "transparent" + color: calNextMa.containsMouse ? Theme.base02 : Qt.rgba(Theme.base02.r, Theme.base02.g, Theme.base02.b, 0) Behavior on color { ColorAnimation { duration: Theme.animFade } } SIcon { anchors.centerIn: parent @@ -2346,7 +2357,7 @@ in width: parent.width height: weatherRow.height + 16 radius: Theme.radius - color: Theme.base01 + color: Theme.cardBg visible: calPopup.weatherDays.length > 0 Row { @@ -2401,7 +2412,7 @@ in width: parent.width height: 64 radius: Theme.radius - color: Theme.base01 + color: Theme.cardBg visible: calPopup.player !== null Row {