From 7ca6471a4cb491046ae944ca963261726d97f8dc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Oct 2025 09:57:56 +0000
Subject: [PATCH 1/2] Initial plan
From d5a129a4ffc1f310925fd192f9673972d8215961 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Oct 2025 10:28:46 +0000
Subject: [PATCH 2/2] Fix download cards layout and enhance theme HUD
atmospheres
Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com>
---
docs/scifi-ui/index.html | 10 ++---
docs/scifi-ui/styles/cyberpunk.css | 69 +++++++++++++++++++++++++++++-
docs/scifi-ui/styles/lcars.css | 49 ++++++++++++++++++++-
docs/scifi-ui/styles/starwars.css | 63 ++++++++++++++++++++++++---
4 files changed, 178 insertions(+), 13 deletions(-)
diff --git a/docs/scifi-ui/index.html b/docs/scifi-ui/index.html
index 34f19d4..82ac5ee 100644
--- a/docs/scifi-ui/index.html
+++ b/docs/scifi-ui/index.html
@@ -76,23 +76,23 @@ Formázás a jövőből
Letöltések
diff --git a/docs/scifi-ui/styles/cyberpunk.css b/docs/scifi-ui/styles/cyberpunk.css
index f5d544e..30c6664 100644
--- a/docs/scifi-ui/styles/cyberpunk.css
+++ b/docs/scifi-ui/styles/cyberpunk.css
@@ -54,10 +54,77 @@ h1{ position:relative; text-shadow: 0 0 10px rgba(0,255,245,.4), 0 0 20px rgba(2
}
@keyframes cp-stream{ 0%{ background-position: 0% 0%, 0% 0% } 100%{ background-position: 200% 200%, 120% 120% } }
@keyframes cp-flicker{ 0%,100%{ opacity: .32 } 50%{ opacity: .42 } }
+/* Code rain texture overlay */
+.telemetry::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,255,245,.02) 3px 4px, transparent 4px 8px);
+ opacity: .5;
+ animation: code-rain 15s linear infinite;
+}
+@keyframes code-rain { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } }
+/* Glitch sweep */
+.telemetry::after {
+ content: "";
+ position: fixed;
+ top: -20%;
+ left: -30%;
+ width: 40%;
+ height: 140%;
+ background: linear-gradient(90deg, transparent, rgba(255,0,184,.15), rgba(0,255,245,.15), transparent);
+ filter: blur(8px);
+ opacity: .4;
+ animation: glitch-sweep 4.5s ease-in-out infinite;
+}
+@keyframes glitch-sweep { 0%, 100% { left: -30%; opacity: 0; } 20% { opacity: .4; } 80% { opacity: .4; } 100% { left: 100%; opacity: 0; } }
/* Loader: scan‑bar panel */
#loader{ background: linear-gradient(180deg, rgba(10,12,24,.9), rgba(10,12,24,.65)); backdrop-filter: blur(6px) }
#loader .loader-content{ color: var(--neon) }
#loader .loader-visual{ position:relative; width:min(640px,86vw); height:120px; border:1px solid var(--border); border-radius:14px; box-shadow: 0 0 24px rgba(0,255,245,.25), inset 0 0 24px rgba(255,0,184,.15); overflow:hidden }
#loader .loader-visual::after{ content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background: linear-gradient(90deg, rgba(255,0,184,.0), rgba(255,0,184,.22), rgba(0,255,245,.22), rgba(0,255,245,.0)); filter: blur(6px); animation: scan-move 1.6s linear infinite }
-@keyframes scan-move{ 0%{ left:-40% } 100%{ left:100% } }
\ No newline at end of file
+@keyframes scan-move{ 0%{ left:-40% } 100%{ left:100% } }
+
+/* ========== OVERRIDE: Download Cards — Block Layout & Airy Spacing ========== */
+.download-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 1.2rem;
+ margin: 1rem 0;
+}
+
+.download-card {
+ display: block !important;
+ white-space: normal !important;
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ padding: 1.1rem 1.2rem;
+ border-radius: 10px;
+ text-align: left;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.download-card:hover,
+.download-card:focus {
+ transform: translateY(-3px);
+ border-color: var(--magenta);
+ box-shadow: 0 0 24px rgba(255,0,184,.3) inset, 0 4px 16px rgba(0,255,245,.2);
+ background: radial-gradient(120px 40px at 20% 0%, rgba(255,0,184,.28), transparent 60%), linear-gradient(180deg, rgba(255,0,184,.18), rgba(0,255,245,.18)), linear-gradient(180deg, rgba(10,12,24,.9), rgba(10,12,24,.5));
+}
+
+.download-card strong {
+ display: block;
+ color: var(--neon);
+ font-size: 1.05em;
+ margin-bottom: 0.4rem;
+ text-shadow: 0 0 8px rgba(0,255,245,.5);
+}
+
+.download-card small {
+ display: block;
+ color: var(--text);
+ opacity: 0.9;
+ font-size: 0.85em;
+ line-height: 1.4;
+}
\ No newline at end of file
diff --git a/docs/scifi-ui/styles/lcars.css b/docs/scifi-ui/styles/lcars.css
index 8a08a40..3293ee0 100644
--- a/docs/scifi-ui/styles/lcars.css
+++ b/docs/scifi-ui/styles/lcars.css
@@ -28,6 +28,10 @@ body::before{
animation: rail-flow 5.5s ease-in-out infinite;
}
.chrome::after{ height:4px; margin-top:26px; background: var(--rail2); border-radius: 2px; opacity:.95; animation:none }
+/* Rail character: subtle gradient overlay */
+.chrome {
+ background: linear-gradient(to bottom, rgba(247,191,164,.03), transparent 15%);
+}
@keyframes rail-flow{ 0%,100%{ filter:hue-rotate(0deg) brightness(1) } 50%{ filter:hue-rotate(-10deg) brightness(1.1) } }
nav{ backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(10,14,24,.72), rgba(10,14,24,.38)); border-bottom:0 }
@@ -64,4 +68,47 @@ nav button, .panel .btn, .quick-links a, .download-card{
#loader .loader-visual{ width:min(560px,86vw); display:grid; gap:.5rem }
#loader .loader-visual span{ display:block; height:16px; border-radius:12px; background: linear-gradient(90deg, var(--rail), var(--rail2)); box-shadow: inset 0 -2px 6px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06); animation: lcars-scan 1.6s ease-in-out infinite }
#loader .loader-visual span:nth-child(2){ animation-delay:.2s } #loader .loader-visual span:nth-child(3){ animation-delay:.4s } #loader .loader-visual span:nth-child(4){ animation-delay:.6s }
-@keyframes lcars-scan{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.25) } }
\ No newline at end of file
+@keyframes lcars-scan{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.25) } }
+
+/* ========== OVERRIDE: Download Cards — Block Layout & Airy Spacing ========== */
+.download-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 1.2rem;
+ margin: 1rem 0;
+}
+
+.download-card {
+ display: block !important;
+ white-space: normal !important;
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ padding: 1.1rem 1.2rem;
+ border-radius: 12px;
+ text-align: left;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.download-card:hover,
+.download-card:focus {
+ transform: translateY(-3px);
+ border: 2px solid var(--rail);
+ box-shadow: 0 0 20px rgba(247,191,164,.3), 0 4px 16px rgba(126,200,255,.2);
+}
+
+.download-card strong {
+ display: block;
+ color: var(--text);
+ font-size: 1.05em;
+ margin-bottom: 0.4rem;
+ font-weight: 800;
+ letter-spacing: 0.03em;
+}
+
+.download-card small {
+ display: block;
+ color: var(--muted);
+ opacity: 0.9;
+ font-size: 0.85em;
+ line-height: 1.4;
+}
\ No newline at end of file
diff --git a/docs/scifi-ui/styles/starwars.css b/docs/scifi-ui/styles/starwars.css
index 5eb841a..5abe30a 100644
--- a/docs/scifi-ui/styles/starwars.css
+++ b/docs/scifi-ui/styles/starwars.css
@@ -10,8 +10,8 @@ body{ margin:0; background: var(--bg); color: var(--text); font-family:"Aurebesh
/* Csillagmező + scanlines */
body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2 }
-body::before{ background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent 50%), radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,.35), transparent 50%); animation: stars-move 70s linear infinite; opacity:.8 }
-body::after{ background: repeating-linear-gradient(0deg, rgba(96,229,255,.08) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity:.16; animation: scanlines 6s linear infinite }
+body::before{ background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.7), transparent 50%), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent 50%), radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,.35), transparent 50%); animation: stars-move 90s linear infinite; opacity:.75 }
+body::after{ background: repeating-linear-gradient(0deg, rgba(96,229,255,.06) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity:.12; animation: scanlines 8s linear infinite }
@keyframes stars-move{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-1200px) } }
@keyframes scanlines{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-3px) } }
@@ -20,7 +20,7 @@ body::after{ background: repeating-linear-gradient(0deg, rgba(96,229,255,.08) 0
/* NAV / CTA */
nav{ background: rgba(5,10,18,.55); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); box-shadow: 0 0 20px rgba(96,229,255,.10) inset }
-nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border:1px solid var(--border); border-radius:8px; padding:.6rem .95rem; background: linear-gradient(180deg, rgba(10,20,28,.55), rgba(10,20,28,.25)); color: var(--holo2); text-shadow: 0 0 8px rgba(96,229,255,.6); text-decoration:none }
+nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border:1px solid var(--border); border-radius:8px; padding:.6rem .95rem; background: linear-gradient(180deg, rgba(10,20,28,.55), rgba(10,20,28,.25)); color: var(--holo2); text-shadow: 0 0 6px rgba(96,229,255,.45); text-decoration:none }
.download-card small{ color: var(--holo2) }
.mirror{ color: var(--holo2) }
.features .box{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 0 24px rgba(96,229,255,.12) inset }
@@ -33,10 +33,19 @@ nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border
animation: sw-stream-x 9s linear infinite;
}
@keyframes sw-stream-x{ 0%{ background-position: 0 0, 0 0 } 100%{ background-position: -320px 0, 0 0 } }
+.telemetry::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(96,229,255,.04) 40%, transparent 60%, rgba(96,229,255,.03) 80%, transparent 100%);
+ opacity: .6;
+ animation: ring-pulse 12s ease-in-out infinite;
+}
+@keyframes ring-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .7; transform: scale(1.05); } }
.telemetry::after{
content:""; position:fixed; left:-25%; top:0; width:35%; height:100%;
- background: linear-gradient(90deg, rgba(96,229,255,.0), rgba(96,229,255,.20), rgba(96,229,255,.0));
- filter: blur(10px); opacity:.35; mix-blend-mode: screen; animation: holo-sweep 2.8s linear infinite;
+ background: linear-gradient(90deg, rgba(96,229,255,.0), rgba(96,229,255,.18), rgba(96,229,255,.0));
+ filter: blur(10px); opacity:.3; mix-blend-mode: screen; animation: holo-sweep 2.8s linear infinite;
}
@keyframes holo-sweep{ 0%{ left:-25% } 100%{ left:100% } }
@@ -45,4 +54,46 @@ nav button, .panel .btn, .quick-links a, .download-card{ appearance:none; border
#loader .loader-content{ color: var(--holo2) }
#loader .loader-visual{ width:160px; height:160px; border-radius:50%; background: conic-gradient(from 0deg, rgba(96,229,255,.0), rgba(96,229,255,.6) 30%, rgba(96,229,255,.0) 60%), radial-gradient(closest-side, rgba(6,12,20,1) 68%, transparent 70%), radial-gradient(closest-side, rgba(96,229,255,.25) 0, transparent 70%); box-shadow: 0 0 24px rgba(96,229,255,.3), 0 0 120px rgba(96,229,255,.15) inset; animation: holo-spin 2.4s linear infinite }
#loader .loader-visual span{ display:none }
-@keyframes holo-spin{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } }
\ No newline at end of file
+@keyframes holo-spin{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } }
+
+/* ========== OVERRIDE: Download Cards — Block Layout & Airy Spacing ========== */
+.download-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 1.2rem;
+ margin: 1rem 0;
+}
+
+.download-card {
+ display: block !important;
+ white-space: normal !important;
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ padding: 1.1rem 1.2rem;
+ border-radius: 12px;
+ text-align: left;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.download-card:hover,
+.download-card:focus {
+ transform: translateY(-3px);
+ border-color: var(--holo);
+ box-shadow: 0 0 24px rgba(96,229,255,.25) inset, 0 4px 16px rgba(96,229,255,.2);
+}
+
+.download-card strong {
+ display: block;
+ color: var(--holo2);
+ font-size: 1.05em;
+ margin-bottom: 0.4rem;
+ text-shadow: 0 0 6px rgba(96,229,255,.5);
+}
+
+.download-card small {
+ display: block;
+ color: var(--holo2);
+ opacity: 0.85;
+ font-size: 0.85em;
+ line-height: 1.4;
+}
\ No newline at end of file