rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
settings/quickshell.nix
View file

@ -162,6 +162,10 @@ in
// Card surfaces are translucent so the compositor's bar-layer // Card surfaces are translucent so the compositor's bar-layer
// blur shows through — a lessened blur over the panel tint. // blur shows through — a lessened blur over the panel tint.
readonly property color cardBg: "#CC${c.base01}" 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}" readonly property string fontFamily: "${monoFont}"
// Ligature-based icon font: text "volume_up" renders the icon // Ligature-based icon font: text "volume_up" renders the icon
readonly property string iconFont: "Material Symbols Rounded" readonly property string iconFont: "Material Symbols Rounded"
@ -1633,7 +1637,7 @@ in
width: 200 width: 200
height: modelData.isSeparator ? 9 : 28 height: modelData.isSeparator ? 9 : 28
color: !modelData.isSeparator && itemMouse.containsMouse && modelData.enabled color: !modelData.isSeparator && itemMouse.containsMouse && modelData.enabled
? Theme.base02 : "transparent" ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: modelData.isSeparator ? 0 : 4 radius: modelData.isSeparator ? 0 : 4
@ -1742,7 +1746,7 @@ in
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 28 height: 28
color: masterMuteMa.containsMouse ? Theme.base02 : "transparent" color: masterMuteMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny radius: Theme.radiusTiny
@ -1891,7 +1895,7 @@ in
visible: netWidget.netState === "connected" visible: netWidget.netState === "connected"
width: parent.width width: parent.width
height: 28 height: 28
color: disconnectMouse.containsMouse ? Theme.base02 : "transparent" color: disconnectMouse.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny radius: Theme.radiusTiny
@ -1937,7 +1941,7 @@ in
required property var modelData required property var modelData
width: parent.width width: parent.width
height: 32 height: 32
color: netItemMouse.containsMouse ? Theme.base02 : "transparent" color: netItemMouse.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: Theme.radiusTiny radius: Theme.radiusTiny
@ -2097,7 +2101,7 @@ in
height: 36 height: 36
radius: Theme.radiusSmall radius: Theme.radiusSmall
color: profMouse.containsMouse && batteryWidget.powerProfile !== modelData.name color: profMouse.containsMouse && batteryWidget.powerProfile !== modelData.name
? Theme.base02 : "transparent" ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
Column { Column {
@ -2266,7 +2270,7 @@ in
Rectangle { Rectangle {
width: 28; height: 28; radius: Theme.radiusSmall width: 28; height: 28; radius: Theme.radiusSmall
anchors.left: parent.left 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 } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
@ -2299,7 +2303,7 @@ in
Rectangle { Rectangle {
width: 28; height: 28; radius: Theme.radiusSmall width: 28; height: 28; radius: Theme.radiusSmall
anchors.right: parent.right 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 } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
@ -2503,7 +2507,7 @@ in
id: mediaBtn id: mediaBtn
required property var modelData required property var modelData
width: 28; height: 28; radius: 14 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 } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent