vinzenz/nova-shell
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

background overlay: neon cyberpunk clock with glow, color cycling, seconds bar

Browse source
This commit is contained in:
Damocles 2026-04-12 23:06:54 +02:00
parent 4715ab9bb6
commit 81d0da4cd7
1 changed files with 142 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

110
modules/BackgroundOverlay.qml
View file

@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Effects
import Quickshell
import Quickshell.Wayland
import "." as M
@ -27,15 +28,66 @@ PanelWindow {
Column {
anchors.centerIn: parent
spacing: 8
spacing: 12
Row {
// Neon clock
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: clockRow.height
// Glow layer — rendered offscreen, only its neon halo is visible
Row {
id: glowSource
visible: false
anchors.centerIn: parent
Text {
text: Qt.formatDateTime(clock.date, "HH")
color: M.Theme.base05
opacity: 0.7
color: M.Theme.base0D
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: ":"
color: colon._colors[colon._colorIdx % colon._colors.length]
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
opacity: colon.opacity
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: Qt.formatDateTime(clock.date, "mm")
color: M.Theme.base0E
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
}
MultiEffect {
source: glowSource
anchors.fill: glowSource
shadowEnabled: true
shadowColor: M.Theme.base0D
shadowBlur: 1.0
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
// Actual visible text on top of the glow
Row {
id: clockRow
anchors.centerIn: parent
Text {
text: Qt.formatDateTime(clock.date, "HH")
color: M.Theme.base0D
opacity: 0.85
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
@ -45,9 +97,9 @@ PanelWindow {
id: colon
text: ":"
font.pixelSize: 72
anchors.verticalCenter: parent.verticalCenter
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
property int _colorIdx: 0
readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
@ -69,7 +121,7 @@ PanelWindow {
NumberAnimation {
target: colon
property: "opacity"
to: 0.7
to: 0.85
duration: 1000
easing.type: Easing.InOutSine
}
@ -77,22 +129,62 @@ PanelWindow {
}
Text {
text: Qt.formatDateTime(clock.date, "mm")
color: M.Theme.base05
opacity: 0.7
anchors.verticalCenter: parent.verticalCenter
color: M.Theme.base0E
opacity: 0.85
font.pixelSize: 72
font.family: M.Theme.fontFamily
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
}
}
// Date with subtle glow
Text {
id: dateText
anchors.horizontalCenter: parent.horizontalCenter
text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
color: M.Theme.base05
opacity: 0.5
font.pixelSize: 18
font.family: M.Theme.fontFamily
font.letterSpacing: 4
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: M.Theme.base0D
shadowBlur: 0.4
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
}
// Seconds as a thin animated progress bar
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: clockRow.width
height: 2
Rectangle {
anchors.fill: parent
color: M.Theme.base02
radius: 1
opacity: 0.3
}
Rectangle {
width: parent.width * (clock.date.getSeconds() / 59)
height: parent.height
color: colon._colors[colon._colorIdx % colon._colors.length]
radius: 1
opacity: 0.6
Behavior on width {
NumberAnimation {
duration: 300
}
}
}
}
}
}