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

43
settings/quickshell.nix
View file

@ -159,6 +159,9 @@ in
readonly property color base0C: "#${c.base0C}" readonly property color base0C: "#${c.base0C}"
readonly property color base0D: "#${c.base0D}" readonly property color base0D: "#${c.base0D}"
readonly property color barBg: "#B3${c.base00}" 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}" 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"
@ -368,7 +371,7 @@ in
default property alias cardData: _cardCol.data default property alias cardData: _cardCol.data
property alias cardSpacing: _cardCol.spacing property alias cardSpacing: _cardCol.spacing
radius: Theme.radius radius: Theme.radius
color: Theme.base01 color: Theme.cardBg
implicitHeight: _cardCol.height + 2 * Theme.cardPad implicitHeight: _cardCol.height + 2 * Theme.cardPad
Column { Column {
id: _cardCol id: _cardCol
@ -604,7 +607,7 @@ in
width: 48 width: 48
height: sessionCol.height + 8 height: sessionCol.height + 8
radius: Theme.radius radius: Theme.radius
color: Theme.base01 color: Theme.cardBg
// Sliding selection pill — same tech as the power // Sliding selection pill — same tech as the power
// profile selector; glides between the buttons. // profile selector; glides between the buttons.
@ -641,11 +644,9 @@ in
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
text: sessBtn.modelData.icon text: sessBtn.modelData.icon
// Calendar palette: base05 icons; red only when // All four buttons share the logout
// a destructive action is the armed selection // setup: base05, FILL on selection.
color: sessBtn.selected && sessBtn.modelData.danger color: Theme.base05
? Theme.base08 : Theme.base05
Behavior on color { ColorAnimation { duration: Theme.animFade } }
font.pixelSize: 20 font.pixelSize: 20
font.weight: 600 font.weight: 600
font.variableAxes: { "FILL": sessBtn.selected ? 1.0 : 0.0 } font.variableAxes: { "FILL": sessBtn.selected ? 1.0 : 0.0 }
@ -674,7 +675,7 @@ in
property bool open: false property bool open: false
readonly property real panelW: 420 readonly property real panelW: 420
property real targetH: 36 + launcherList.contentHeight 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 // Both axes animate: expands from a small point on the
// bottom edge (like the top dropdowns' stub seed). // bottom edge (like the top dropdowns' stub seed).
property real openH: open ? targetH : 0 property real openH: open ? targetH : 0
@ -759,10 +760,19 @@ in
width: launcherPanel.panelW - 24 width: launcherPanel.panelW - 24
spacing: 8 spacing: 8
// Results sit in a base01 card segment, like the
// notification list and the other dropdowns.
Rectangle {
width: parent.width
height: launcherList.contentHeight + 2 * Theme.cardPad
radius: Theme.radius
color: Theme.cardBg
visible: launcherList.count > 0
ListView { ListView {
id: launcherList id: launcherList
width: parent.width anchors.fill: parent
height: contentHeight anchors.margins: Theme.cardPad
interactive: false interactive: false
model: launcherPanel.entries model: launcherPanel.entries
highlight: Rectangle { highlight: Rectangle {
@ -813,12 +823,13 @@ in
} }
} }
} }
}
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 36 height: 36
radius: Theme.radiusSmall radius: Theme.radius
color: Theme.base01 color: Theme.cardBg
SIcon { SIcon {
id: searchIcon id: searchIcon
@ -2243,7 +2254,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 : "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 } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
@ -2276,7 +2287,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 : "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 } } Behavior on color { ColorAnimation { duration: Theme.animFade } }
SIcon { SIcon {
anchors.centerIn: parent anchors.centerIn: parent
@ -2346,7 +2357,7 @@ in
width: parent.width width: parent.width
height: weatherRow.height + 16 height: weatherRow.height + 16
radius: Theme.radius radius: Theme.radius
color: Theme.base01 color: Theme.cardBg
visible: calPopup.weatherDays.length > 0 visible: calPopup.weatherDays.length > 0
Row { Row {
@ -2401,7 +2412,7 @@ in
width: parent.width width: parent.width
height: 64 height: 64
radius: Theme.radius radius: Theme.radius
color: Theme.base01 color: Theme.cardBg
visible: calPopup.player !== null visible: calPopup.player !== null
Row { Row {