overview backdrop: dark bg, gradient-filled hexagons without outlines
This commit is contained in:
Damocles
parent
9874a9c094
commit
9d4d14138e
1 changed files with 91 additions and 182 deletions
|
|
@ -20,69 +20,63 @@ PanelWindow {
|
|||
anchors.right: true
|
||||
anchors.bottom: true
|
||||
|
||||
// Dark base tint
|
||||
// Solid dark background
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: M.Theme.base00
|
||||
opacity: 0.4
|
||||
opacity: 0.85
|
||||
}
|
||||
|
||||
// Gradient wash — slowly shifting via animated stop positions
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
property real _t: 0
|
||||
NumberAnimation on _t {
|
||||
from: 0
|
||||
to: 1
|
||||
duration: 20000
|
||||
loops: Animation.Infinite
|
||||
}
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.2)
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.5
|
||||
color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.12)
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hex grid
|
||||
// Hex grid with gradient-filled cells, no outlines
|
||||
Canvas {
|
||||
anchors.fill: parent
|
||||
opacity: 0.12
|
||||
|
||||
onPaint: {
|
||||
const ctx = getContext("2d");
|
||||
const w = width, h = height;
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.strokeStyle = M.Theme.base0D.toString();
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
const size = 50;
|
||||
const dx = size * 1.5;
|
||||
const dy = size * Math.sqrt(3);
|
||||
for (let col = -1; col < w / dx + 1; col++) {
|
||||
for (let row = -1; row < h / dy + 1; row++) {
|
||||
|
||||
const c0 = M.Theme.base0C;
|
||||
const c1 = M.Theme.base0E;
|
||||
const c2 = M.Theme.base09;
|
||||
|
||||
for (let col = -1; col < w / dx + 2; col++) {
|
||||
for (let row = -1; row < h / dy + 2; row++) {
|
||||
const cx = col * dx;
|
||||
const cy = row * dy + (col % 2 ? dy / 2 : 0);
|
||||
|
||||
// Position-based color interpolation across the screen
|
||||
const fx = Math.max(0, Math.min(1, cx / w));
|
||||
const fy = Math.max(0, Math.min(1, cy / h));
|
||||
|
||||
// Blend: left=base0C, center=base0E, right=base09, modulated by y
|
||||
const t = fx;
|
||||
const r = t < 0.5 ? c0.r + (c1.r - c0.r) * (t * 2) : c1.r + (c2.r - c1.r) * ((t - 0.5) * 2);
|
||||
const g = t < 0.5 ? c0.g + (c1.g - c0.g) * (t * 2) : c1.g + (c2.g - c1.g) * ((t - 0.5) * 2);
|
||||
const b = t < 0.5 ? c0.b + (c1.b - c0.b) * (t * 2) : c1.b + (c2.b - c1.b) * ((t - 0.5) * 2);
|
||||
|
||||
// Opacity varies: brighter near edges, dimmer in center
|
||||
const distFromCenter = Math.sqrt(Math.pow(fx - 0.5, 2) + Math.pow(fy - 0.5, 2));
|
||||
const alpha = 0.03 + distFromCenter * 0.06;
|
||||
|
||||
ctx.fillStyle = "rgba(" + Math.round(r * 255) + "," + Math.round(g * 255) + "," + Math.round(b * 255) + "," + alpha + ")";
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const angle = Math.PI / 3 * i - Math.PI / 6;
|
||||
const px = cx + size * 0.5 * Math.cos(angle);
|
||||
const py = cy + size * 0.5 * Math.sin(angle);
|
||||
const px = cx + size * 0.48 * Math.cos(angle);
|
||||
const py = cy + size * 0.48 * Math.sin(angle);
|
||||
if (i === 0)
|
||||
ctx.moveTo(px, py);
|
||||
else
|
||||
ctx.lineTo(px, py);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,7 +87,7 @@ PanelWindow {
|
|||
id: hScan
|
||||
width: 2
|
||||
height: parent.height
|
||||
opacity: 0.25
|
||||
opacity: 0.2
|
||||
color: M.Theme.base0D
|
||||
NumberAnimation on x {
|
||||
from: -100
|
||||
|
|
@ -116,35 +110,17 @@ PanelWindow {
|
|||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.12)
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.right
|
||||
width: 40
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.06)
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "transparent"
|
||||
color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.08)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical scan line — different speed, different color
|
||||
// Vertical scan line
|
||||
Rectangle {
|
||||
id: vScan
|
||||
width: parent.width
|
||||
height: 1
|
||||
opacity: 0.15
|
||||
opacity: 0.12
|
||||
color: M.Theme.base0E
|
||||
NumberAnimation on y {
|
||||
from: -50
|
||||
|
|
@ -153,35 +129,16 @@ PanelWindow {
|
|||
loops: Animation.Infinite
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.top
|
||||
height: 80
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "transparent"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.06)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Diagonal scan — third line, slowest, warm color
|
||||
// Diagonal scan
|
||||
Rectangle {
|
||||
id: diagScan
|
||||
width: 1
|
||||
height: parent.height * 1.5
|
||||
opacity: 0.1
|
||||
opacity: 0.06
|
||||
color: M.Theme.base09
|
||||
rotation: 30
|
||||
transformOrigin: Item.Top
|
||||
|
||||
SequentialAnimation on x {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation {
|
||||
|
|
@ -199,136 +156,88 @@ PanelWindow {
|
|||
}
|
||||
}
|
||||
|
||||
// Corner accent marks — top-left
|
||||
Rectangle {
|
||||
x: 40
|
||||
y: 40
|
||||
width: 60
|
||||
height: 1
|
||||
color: M.Theme.base0C
|
||||
opacity: 0.3
|
||||
}
|
||||
Rectangle {
|
||||
x: 40
|
||||
y: 40
|
||||
width: 1
|
||||
height: 60
|
||||
color: M.Theme.base0C
|
||||
opacity: 0.3
|
||||
}
|
||||
// Top-right
|
||||
Rectangle {
|
||||
x: parent.width - 100
|
||||
y: 40
|
||||
width: 60
|
||||
height: 1
|
||||
color: M.Theme.base09
|
||||
opacity: 0.3
|
||||
}
|
||||
Rectangle {
|
||||
x: parent.width - 41
|
||||
y: 40
|
||||
width: 1
|
||||
height: 60
|
||||
color: M.Theme.base09
|
||||
opacity: 0.3
|
||||
}
|
||||
// Bottom-left
|
||||
Rectangle {
|
||||
x: 40
|
||||
y: parent.height - 41
|
||||
width: 60
|
||||
height: 1
|
||||
color: M.Theme.base0E
|
||||
opacity: 0.3
|
||||
}
|
||||
Rectangle {
|
||||
x: 40
|
||||
y: parent.height - 100
|
||||
width: 1
|
||||
height: 60
|
||||
color: M.Theme.base0E
|
||||
opacity: 0.3
|
||||
}
|
||||
// Bottom-right
|
||||
Rectangle {
|
||||
x: parent.width - 100
|
||||
y: parent.height - 41
|
||||
width: 60
|
||||
height: 1
|
||||
color: M.Theme.base08
|
||||
opacity: 0.3
|
||||
}
|
||||
Rectangle {
|
||||
x: parent.width - 41
|
||||
y: parent.height - 100
|
||||
width: 1
|
||||
height: 60
|
||||
color: M.Theme.base08
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
// Pulsing corner dots
|
||||
// Corner accent marks
|
||||
Repeater {
|
||||
model: [
|
||||
{
|
||||
cx: 40,
|
||||
cy: 40,
|
||||
col: M.Theme.base0C
|
||||
col: M.Theme.base0C,
|
||||
dx: 1,
|
||||
dy: 1
|
||||
},
|
||||
{
|
||||
cx: root.width - 41,
|
||||
cx: -100,
|
||||
cy: 40,
|
||||
col: M.Theme.base09
|
||||
col: M.Theme.base09,
|
||||
dx: -1,
|
||||
dy: 1
|
||||
},
|
||||
{
|
||||
cx: 40,
|
||||
cy: root.height - 41,
|
||||
col: M.Theme.base0E
|
||||
cy: -100,
|
||||
col: M.Theme.base0E,
|
||||
dx: 1,
|
||||
dy: -1
|
||||
},
|
||||
{
|
||||
cx: root.width - 41,
|
||||
cy: root.height - 41,
|
||||
col: M.Theme.base08
|
||||
cx: -100,
|
||||
cy: -100,
|
||||
col: M.Theme.base08,
|
||||
dx: -1,
|
||||
dy: -1
|
||||
}
|
||||
]
|
||||
Rectangle {
|
||||
Item {
|
||||
required property var modelData
|
||||
x: modelData.cx - 2
|
||||
y: modelData.cy - 2
|
||||
x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx
|
||||
y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy
|
||||
|
||||
Rectangle {
|
||||
width: 60
|
||||
height: 1
|
||||
color: parent.modelData.col
|
||||
opacity: 0.25
|
||||
}
|
||||
Rectangle {
|
||||
width: 1
|
||||
height: 60
|
||||
color: parent.modelData.col
|
||||
opacity: 0.25
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 5
|
||||
height: 5
|
||||
radius: 2.5
|
||||
color: modelData.col
|
||||
|
||||
color: parent.modelData.col
|
||||
SequentialAnimation on opacity {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation {
|
||||
to: 0.15
|
||||
to: 0.1
|
||||
duration: 1500 + Math.random() * 1000
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0.6
|
||||
to: 0.5
|
||||
duration: 1500 + Math.random() * 1000
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Floating particles — slow drifting dots
|
||||
// Floating particles
|
||||
Repeater {
|
||||
model: 20
|
||||
model: 15
|
||||
Rectangle {
|
||||
required property int index
|
||||
width: 2
|
||||
height: 2
|
||||
radius: 1
|
||||
color: [M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base09, M.Theme.base08][index % 5]
|
||||
opacity: 0.15 + Math.random() * 0.15
|
||||
x: Math.random() * root.width
|
||||
y: Math.random() * root.height
|
||||
opacity: 0.1 + Math.random() * 0.1
|
||||
|
||||
NumberAnimation on x {
|
||||
from: -20
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue