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

quickshell: restyle volume/brightness OSD

Browse source
This commit is contained in:
rope 2026-07-28 22:03:32 +01:00
parent 0fbb8ad0f3
commit 4df4062806
1 changed files with 51 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

78
settings/quickshell.nix
View file

@ -4214,36 +4214,60 @@ in
} }
} }
Column { // Card body so the OSD reads as a surface, not floating
// marks on the bar. Scales in from slightly small.
Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 8 width: 36
height: osdCol.height + 2 * Theme.cardPad
// Vertical track — fill grows upward from the bottom. radius: Theme.radiusSmall
// PillSlider is horizontal-only, so this is its own color: Theme.cardBg
// rather than a rotated instance. scale: osdItem.shown ? 1 : 0.85
Rectangle { Behavior on scale {
anchors.horizontalCenter: parent.horizontalCenter NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
width: 6
height: 96
radius: 3
color: Theme.base02
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: Math.max(parent.width,
parent.height * Math.max(0, Math.min(1, osdItem.value)))
radius: parent.radius
color: osdItem.fill
Behavior on height { NumberAnimation { duration: 80 } }
}
} }
SIcon { Column {
anchors.horizontalCenter: parent.horizontalCenter id: osdCol
text: osdItem.icon anchors.centerIn: parent
color: Theme.base05 spacing: 6
font.pixelSize: 16
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: Math.round(Math.max(0, Math.min(1, osdItem.value)) * 100)
color: Theme.base04
font.pixelSize: 11
}
// Vertical track — fill grows upward from the bottom.
// PillSlider is horizontal-only, so this is its own
// rather than a rotated instance.
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: 12
height: 96
radius: 6
color: Theme.base02
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: Math.max(parent.width,
parent.height * Math.max(0, Math.min(1, osdItem.value)))
radius: parent.radius
color: osdItem.fill
Behavior on height {
NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
}
}
}
SIcon {
anchors.horizontalCenter: parent.horizontalCenter
text: osdItem.icon
color: Theme.base05
font.pixelSize: 16
}
} }
} }
} }