quickshell: fade hover highlights via transparent base02, no black flash

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-17 12:52:52 +01:00
parent 2f51d2b4f1
commit 2697614e1b

View file

@ -162,6 +162,10 @@ in
// 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}"
// Transparent base02: hover highlights fade to/from this so the
// colour animation stays in-hue instead of dipping through
// transparent *black* (which reads as an extra flash colour).
readonly property color base02t: "#00${c.base02}"
readonly property string fontFamily: "${monoFont}"
// Ligature-based icon font: text "volume_up" renders the icon
readonly property string iconFont: "Material Symbols Rounded"
@ -1633,7 +1637,7 @@ in
width: 200
height: modelData.isSeparator ? 9 : 28
color: !modelData.isSeparator && itemMouse.containsMouse && modelData.enabled
? Theme.base02 : "transparent"
? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: modelData.isSeparator ? 0 : 4
@ -1742,7 +1746,7 @@ in
Rectangle {
width: parent.width
height: 28
color: masterMuteMa.containsMouse ? Theme.base02 : "transparent"
color: masterMuteMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny
@ -1891,7 +1895,7 @@ in
visible: netWidget.netState === "connected"
width: parent.width
height: 28
color: disconnectMouse.containsMouse ? Theme.base02 : "transparent"
color: disconnectMouse.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny
@ -1937,7 +1941,7 @@ in
required property var modelData
width: parent.width
height: 32
color: netItemMouse.containsMouse ? Theme.base02 : "transparent"
color: netItemMouse.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny
@ -2097,7 +2101,7 @@ in
height: 36
radius: Theme.radiusSmall
color: profMouse.containsMouse && batteryWidget.powerProfile !== modelData.name
? Theme.base02 : "transparent"
? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
Column {
@ -2266,7 +2270,7 @@ in
Rectangle {
width: 28; height: 28; radius: Theme.radiusSmall
anchors.left: parent.left
color: calPrevMa.containsMouse ? Theme.base02 : Qt.rgba(Theme.base02.r, Theme.base02.g, Theme.base02.b, 0)
color: calPrevMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon {
anchors.centerIn: parent
@ -2299,7 +2303,7 @@ in
Rectangle {
width: 28; height: 28; radius: Theme.radiusSmall
anchors.right: parent.right
color: calNextMa.containsMouse ? Theme.base02 : Qt.rgba(Theme.base02.r, Theme.base02.g, Theme.base02.b, 0)
color: calNextMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon {
anchors.centerIn: parent
@ -2503,7 +2507,7 @@ in
id: mediaBtn
required property var modelData
width: 28; height: 28; radius: 14
color: mediaBtnMa.containsMouse ? Theme.base02 : "transparent"
color: mediaBtnMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon {
anchors.centerIn: parent