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

quickshell: fix hover/colour bugs, translucent card surfaces

Browse source 
- 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 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-17 11:30:13 +01:00
parent 7fc29c82bf
commit 98699b5346
1 changed files with 28 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

45
settings/quickshell.nix
View file

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