Skip to content

Fix download cards layout and enhance theme HUD atmospheres #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 2 commits into from
+178 −13
Closed

Fix download cards layout and enhance theme HUD atmospheres #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ca6471
Initial plan
Copilot Oct 21, 2025
d5a129a
Fix download cards layout and enhance theme HUD atmospheres
Copilot Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/scifi-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,23 +76,23 @@ <h1 data-glitch="Formázás a jövőből">Formázás a jövőből</h1>
<h2>Letöltések</h2>
<div class="download-list">
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/FormatX_Installer_v1015.exe" download rel="noopener" target="_blank">
FormatX Light telepítő (v1.0.4)
<strong>FormatX Light telepítő (v1.0.4)</strong>
<small>Windows .exe • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/README.txt" rel="noopener" target="_blank">
README.txt
<strong>README.txt</strong>
<small>Kiindulási információk • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/LICENSE.txt" rel="noopener" target="_blank">
LICENSE.txt
<strong>LICENSE.txt</strong>
<small>Licencfeltételek • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/WindowsAppRuntimeInstall-x64.exe" rel="noopener" target="_blank">
Windows App Runtime (x64)
<strong>Windows App Runtime (x64)</strong>
<small>Microsoft telepítő • hutoczky/formatui v1.0.4</small>
</a>
<a class="download-card" href="https://github.com/hutoczky/formatui/releases/download/v1.0.4/windowsdesktop-runtime-10.0.0-rc.1.25451.107-win-x64.exe" rel="noopener" target="_blank">
.NET Desktop Runtime 10.0 (x64)
<strong>.NET Desktop Runtime 10.0 (x64)</strong>
<small>Microsoft telepítő • hutoczky/formatui v1.0.4</small>
</a>
</div>
Expand Down
69 changes: 68 additions & 1 deletion docs/scifi-ui/styles/cyberpunk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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% } }
@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;
}
49 changes: 48 additions & 1 deletion docs/scifi-ui/styles/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down Expand Up @@ -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) } }
@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;
}
63 changes: 57 additions & 6 deletions docs/scifi-ui/styles/starwars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) } }

Expand All @@ -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 }
Expand All @@ -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% } }

Expand All @@ -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) } }
@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;
}