diff --git a/modules/BackgroundOverlay.qml b/modules/BackgroundOverlay.qml index 696131c..6a47233 100644 --- a/modules/BackgroundOverlay.qml +++ b/modules/BackgroundOverlay.qml @@ -1,5 +1,4 @@ import QtQuick -import QtQuick.Effects import Quickshell import Quickshell.Wayland import "." as M @@ -28,163 +27,69 @@ PanelWindow { Column { anchors.centerIn: parent - spacing: 12 + spacing: 8 - // Neon clock - Item { + Row { 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.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 - } + Text { + text: Qt.formatDateTime(clock.date, "HH") + color: M.Theme.base05 + opacity: 0.7 + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true } + Text { + id: colon + text: ":" + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true - MultiEffect { - source: glowSource - anchors.fill: glowSource - shadowEnabled: true - shadowColor: M.Theme.base0D - shadowBlur: 1.0 - shadowVerticalOffset: 0 - shadowHorizontalOffset: 0 - } + 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] + color: _colors[_colorIdx % _colors.length] - // 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 - anchors.verticalCenter: parent.verticalCenter - } - Text { - id: colon - text: ":" - font.pixelSize: 72 - 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] - color: _colors[_colorIdx % _colors.length] - - SequentialAnimation { - loops: Animation.Infinite - running: true - NumberAnimation { - target: colon - property: "opacity" - to: 0.1 - duration: 1000 - easing.type: Easing.InOutSine - } - ScriptAction { - script: colon._colorIdx++ - } - NumberAnimation { - target: colon - property: "opacity" - to: 0.85 - duration: 1000 - easing.type: Easing.InOutSine - } + SequentialAnimation { + loops: Animation.Infinite + running: true + NumberAnimation { + target: colon + property: "opacity" + to: 0.1 + duration: 1000 + easing.type: Easing.InOutSine + } + ScriptAction { + script: colon._colorIdx++ + } + NumberAnimation { + target: colon + property: "opacity" + to: 0.7 + duration: 1000 + easing.type: Easing.InOutSine } } - Text { - text: Qt.formatDateTime(clock.date, "mm") - color: M.Theme.base0E - opacity: 0.85 - font.pixelSize: 72 - font.family: M.Theme.fontFamily - font.bold: true - anchors.verticalCenter: parent.verticalCenter - } + } + Text { + text: Qt.formatDateTime(clock.date, "mm") + color: M.Theme.base05 + opacity: 0.7 + font.pixelSize: 72 + font.family: M.Theme.fontFamily + font.bold: true } } - // 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 - } - } - } } } }