Skip to content

Achieve exact pixel parity (±2px) for LCARS theme with mock design #49

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
Closed

Achieve exact pixel parity (±2px) for LCARS theme with mock design #49

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
9bfcd65
Initial plan
Copilot Oct 22, 2025
95c7df9
Achieve LCARS theme pixel parity with mock design
Copilot Oct 22, 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
43 changes: 27 additions & 16 deletions docs/scifi-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<div class="cap"></div>
</div>
<h2 class="brand" id="brand">FORMÁZÁS A JÖVŐBŐL</h2>
<p class="muted" style="opacity:.85">Gyors. Moduláris. Bővíthető. Azonos eszközök, eltérő stílusok.</p>
<p class="subtitle">Gyors. Moduláris. Bővíthető.<br>Azonos eszközök, eltérő stílusok.</p>
<div class="chips" role="navigation" aria-label="Gyors linkek">
<a class="chip" href="#letoltesek">LETÖLTÉS</a>
<a class="chip" href="#funkciok">FUNKCIÓK</a>
Expand All @@ -78,38 +78,49 @@ <h2 class="brand" id="brand">FORMÁZÁS A JÖVŐBŐL</h2>
<span class="rail rail-c"></span><span class="rail rail-d"></span>
</div>

<section id="letoltesek" class="panel" aria-labelledby="h-let">
<section id="letoltesek" class="panel downloads-panel" aria-labelledby="h-let">
<h2 id="h-let">Letöltések</h2>
<div class="grid">
<article class="card">
<div class="downloads-grid">
<article class="card card-full">
<h3>FormatX Light telepítő</h3>
<p class="muted">Windows app • hutoczky/formatx</p>
<div class="actions">
<button class="pill ghost">Villámgyors</button>
<a class="pill primary" href="https://github.com/hutoczky/formatui/releases/latest/download/FormatX_Installer_v1015.exe" target="_blank" rel="noopener" download>Letöltés</a>
</div>
</article>
<article class="card">
<article class="card card-left">
<h3>Windows App Runtime (x64)</h3>
<p class="muted">Komponens • Microsoft</p>
<div class="actions">
<a class="pill primary" href="https://github.com/hutoczky/formatui/releases/latest/download/FormatX_Installer_v1015.exe" target="_blank" rel="noopener" download>Letöltés</a>
</div>
</article>
<article class="card card-right card-compact">
<h3>README.txt</h3>
<p class="muted">Kiinduló információk</p>
<div class="actions">
<button class="pill ghost">Bővíthető</button>
<a class="pill primary" href="https://github.com/hutoczky/formatui/releases/latest/download/README.txt" target="_blank" rel="noopener">Megnyitás</a>
</div>
</article>
<article class="card">
<h3>Licenc.txt</h3>
<p class="muted">Felhasználási feltételek</p>
<article class="card card-left">
<h3>.NET Desktop Runtime 10.0 (x64)</h3>
<p class="muted">Komponens • Microsoft</p>
<div class="actions">
<a class="pill primary" href="https://github.com/hutoczky/formatui/releases/latest/download/FormatX_Installer_v1015.exe" target="_blank" rel="noopener" download>Letöltés</a>
</div>
</article>
<article class="card card-right card-compact">
<h3>Web UI</h3>
<p class="muted">Alternatív interfész</p>
<div class="actions">
<button class="pill ghost">Információ</button>
<a class="pill primary" href="https://github.com/hutoczky/formatui/releases/latest/download/LICENSE.txt" target="_blank" rel="noopener">Megnyitás</a>
<a class="pill primary" href="#dokumentumok">Megnyitás</a>
</div>
</article>
</div>
<div class="chip-row">
<span class="chip hollow">Villámgyors</span>
<span class="chip hollow">Bővíthető</span>
<span class="chip hollow">Web UI</span>
<span class="chip chip-filled">Villámgyors</span>
<span class="chip chip-gradient">Bővíthető</span>
<span class="chip chip-magenta">Web UI</span>
</div>
</section>

Expand Down Expand Up @@ -158,7 +169,7 @@ <h2 id="h-doc">Dokumentumok</h2>
</main>

<footer class="footer" role="contentinfo">
<div class="copy">© 2025 Sci‑Fi UI</div>
<div class="copy">© 2023 Sci‑Fi UI</div>
<a class="to-top" href="#top">Vissza a tetejére</a>
</footer>

Expand Down
5 changes: 3 additions & 2 deletions docs/scifi-ui/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ body{
/* Fejléc + kapcsolók */
.topbar{position:sticky;top:0;z-index:5;padding:16px 20px 10px;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);backdrop-filter:blur(8px)}
.switcher{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.switcher .theme{border:var(--border-w) solid var(--border);border-radius:999px;padding:9px 16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#111; background:transparent}
.switcher .theme{border:3px solid var(--border);border-radius:999px;padding:9px 18px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#111; background:transparent}
.switcher .theme[aria-pressed="true"]{color:#0f1116}

/* Hős sáv */
Expand All @@ -57,12 +57,13 @@ body{

h1,h2{margin:0}
.brand{margin:0 0 var(--space-2);font:900 clamp(34px,6.5vw,66px)/1.05 "Segoe UI",system-ui,Roboto,Arial,sans-serif;letter-spacing:.08em}
.subtitle{margin:var(--space-2) auto 0;font-size:16px;line-height:1.5;color:var(--muted)}

/* Chips + gombok */
.chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--space-2)}
.chip,.pill{
display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
border:var(--border-w) solid var(--border);padding:10px 16px;font-weight:900;letter-spacing:.12em;text-transform:uppercase
border:var(--border-w) solid var(--border);padding:11px 20px;font-weight:900;letter-spacing:.14em;text-transform:uppercase
}
.pill.primary{color:#101217}
.pill.ghost{border-style:dashed;color:var(--muted);background:transparent}
Expand Down
180 changes: 158 additions & 22 deletions docs/scifi-ui/styles/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,30 @@
position:relative;
color:var(--accent);
text-shadow:
0 0 12px #ff9d00aa,
0 0 1px #000;
font-weight:800;
letter-spacing:.10em;
0 0 20px #ff9d00dd,
0 0 40px #ff9d0088,
0 0 2px #FFD79A;
font-weight:900;
letter-spacing:.14em;
}

/* Progress – borostyán átmenet LCARS sapkával */
/* Hero alcím – cyan két sorban */
:root[data-theme="lcars"] .subtitle{
color:#2EE6FF;
font-size:16px;
line-height:1.5;
margin:var(--space-2) auto 0;
opacity:1;
}

/* Progress – borostyán átmenet LCARS sapkával (decorative, non-animated) */
:root[data-theme="lcars"] .progress{
margin-bottom:var(--space-3);
}
:root[data-theme="lcars"] .progress .bar{
background:linear-gradient(90deg,#FF9A3C,#FFD79A);
animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite;
width:75%;
animation:none;
}
:root[data-theme="lcars"] .preloader__lcars .preloader__bar{
background:linear-gradient(90deg,#FF9A3C,#FFD79A);
Expand All @@ -47,55 +61,136 @@

/* Téma-váltó kapszulák */
:root[data-theme="lcars"] .switcher .theme{
border:2px solid var(--border);
border:3px solid var(--border);
color:#ffd089;
background:transparent;
border-radius:999px;
padding:9px 18px;
}
:root[data-theme="lcars"] .switcher .theme[aria-pressed="true"]{
background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent),black 30%));
color:#141518;
color:#0f1116;
}
:root[data-theme="lcars"] .switcher .theme[data-theme="starwars"]{
border-color:#FF9A3C;
}
:root[data-theme="lcars"] .switcher .theme[data-theme="cyberpunk"]{
border-color:#FF2EC0;
}

/* LCARS sín-elemek (a képen lévő oldalsó sínek) */
:root[data-theme="lcars"] .lcars-rails .rail{background:#ff9900;opacity:.9;filter:drop-shadow(0 0 8px rgba(255,153,0,.4))}
:root[data-theme="lcars"] .lcars-rails .rail-b,
:root[data-theme="lcars"] .lcars-rails .rail-c{background:#d45588}
:root[data-theme="lcars"] .lcars-rails{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
:root[data-theme="lcars"] .lcars-rails .rail{
position:absolute;
border-radius:12px;
opacity:.85;
filter:drop-shadow(0 0 8px rgba(255,153,0,.35));
}
:root[data-theme="lcars"] .lcars-rails .rail-a{
background:#FF9A3C;
width:80px;
height:120px;
top:20px;
left:-40px;
border-radius:0 12px 12px 0;
}
:root[data-theme="lcars"] .lcars-rails .rail-b{
background:#d45588;
width:60px;
height:180px;
top:160px;
left:-30px;
border-radius:0 20px 20px 0;
}
:root[data-theme="lcars"] .lcars-rails .rail-c{
background:#d45588;
width:60px;
height:180px;
top:160px;
right:-30px;
border-radius:20px 0 0 20px;
}
:root[data-theme="lcars"] .lcars-rails .rail-d{
background:#FF9A3C;
width:80px;
height:120px;
top:20px;
right:-40px;
border-radius:12px 0 0 12px;
}

/* Panelek – dupla kontúr, erős LCARS körívek */
:root[data-theme="lcars"] .panel{
background:var(--panel);
border:2px solid var(--border);
border-radius:28px;
border:3px solid var(--border);
border-radius:32px;
box-shadow:
0 0 0 1px rgba(255,255,255,.02) inset,
0 0 0 3px rgba(255,154,60,.12) inset,
0 0 0 6px rgba(255,154,60,.15) inset,
0 10px 30px rgba(0,0,0,.45),
0 0 40px var(--panel-glow);
padding:22px;
padding:26px;
}
:root[data-theme="lcars"] .panel>h2{
color:var(--accent);
font:800 26px/1.2 "Eurostile","Segoe UI",system-ui,Arial,sans-serif;
letter-spacing:.06em;
}

/* Downloads panel special styling */
:root[data-theme="lcars"] .downloads-panel{
border-width:3px;
box-shadow:
0 0 0 1px #FF9A3C inset,
0 0 0 8px rgba(255,154,60,.08) inset,
0 10px 30px rgba(0,0,0,.45),
0 0 40px var(--panel-glow);
}

/* Downloads grid layout */
:root[data-theme="lcars"] .downloads-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:20px;
}
:root[data-theme="lcars"] .downloads-grid .card-full{
grid-column:1 / -1;
}
:root[data-theme="lcars"] .downloads-grid .card-compact{
padding:12px;
}
:root[data-theme="lcars"] .downloads-grid .card-compact h3{
font-size:16px;
}
:root[data-theme="lcars"] .downloads-grid .card-compact .muted{
font-size:13px;
}

/* Kártyák – belső keret és LCARS-sarkok */
:root[data-theme="lcars"] .card{
background:var(--card);
border:2px solid color-mix(in oklab,var(--border),#000 22%);
border:3px solid color-mix(in oklab,var(--border),#000 22%);
border-radius:20px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
padding:16px;
}

/* Chip-ek és gombok a képen látható színekkel */
:root[data-theme="lcars"] .chip{
border:2px solid var(--border);
border:3px solid var(--border);
border-radius:999px;
padding:10px 16px;
padding:11px 20px;
color:#1a1203;
background:linear-gradient(180deg,#ffbe66,#FF9A3C);
text-shadow:0 1px 0 rgba(255,255,255,.15);
font-weight:900;
letter-spacing:.14em;
}
:root[data-theme="lcars"] .chip[href="#funkciok"]{
background:linear-gradient(90deg,#FF9A3C,#ffbe66);
Expand All @@ -111,12 +206,42 @@
border-style:solid;
}

/* CTA chips row - specific styling */
:root[data-theme="lcars"] .chip-row{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}
:root[data-theme="lcars"] .chip-row .chip{
border-width:3px;
}
:root[data-theme="lcars"] .chip-row .chip-filled{
background:linear-gradient(180deg,#FFD79A,#FF9A3C);
border-color:#FF9A3C;
color:#0f1116;
}
:root[data-theme="lcars"] .chip-row .chip-gradient{
background:linear-gradient(135deg,#FF9A3C,#ff7722);
border-color:#FF9A3C;
color:#0f1116;
}
:root[data-theme="lcars"] .chip-row .chip-magenta{
background:linear-gradient(180deg,#d08fff,#8C6AFF);
border-color:#8C6AFF;
color:#0f1116;
}

/* „Pill” akciógombok */
:root[data-theme="lcars"] .pill{
border:2px solid var(--border);
border:3px solid var(--border);
border-radius:999px;
color:#1a1203;
padding:11px 20px;
color:#0f1116;
background:linear-gradient(180deg,#ffd089,#FF9A3C);
font-weight:900;
letter-spacing:.14em;
}
:root[data-theme="lcars"] .pill.ghost{
color:#ffd089;
Expand All @@ -126,5 +251,16 @@
}

/* Lábléc – bal oldalt cyan copyright, jobb oldalt narancs link */
:root[data-theme="lcars"] .footer .copy{color:#39d3ff}
:root[data-theme="lcars"] .footer .to-top{color:#FF9A3C;border-bottom:2px solid color-mix(in oklab,var(--accent),#fff 10%)}
:root[data-theme="lcars"] .footer{
margin-top:50px;
}
:root[data-theme="lcars"] .footer .copy{
color:#2EE6FF;
font-weight:600;
}
:root[data-theme="lcars"] .footer .to-top{
color:#FF9A3C;
border-bottom:2px solid #FF9A3C;
font-weight:700;
text-decoration:none;
}
18 changes: 15 additions & 3 deletions docs/scifi-ui/styles/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,21 @@
[data-theme="lcars"]{--accent:#FF9A3C;--accent-2:#8C6AFF;--border:#FF9A3C}
[data-theme="starwars"]{--accent:#2EE6FF;--accent-2:#90F0FF;--border:#2EE6FF}
[data-theme="cyberpunk"]{--accent:#FF2EC0;--accent-2:#FFD500;--border:#FF2EC0}
.switcher .theme[data-theme="starwars"]{border-color:#2EE6FF;color:#bfe9ff}
.switcher .theme[data-theme="cyberpunk"]{border-color:#FF2EC0;color:#ffe88a}

/* Theme switcher chips - uniform styling across all themes */
.switcher .theme{
border-width:3px;
padding:9px 18px;
font-weight:900;
letter-spacing:.14em;
}
.switcher .theme[data-theme="starwars"]{border-color:#FF9A3C;color:#ffd089}
.switcher .theme[data-theme="cyberpunk"]{border-color:#FF9A3C;color:#ffd089}
.fx.holo-grid{position:fixed;inset:0;opacity:.25;mix-blend-mode:screen;pointer-events:none}
.fx.glitch-overlay{position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.3}
@media (prefers-reduced-motion:reduce){[data-anim]{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){
[data-anim]{animation:none!important;transition:none!important}
.progress .bar{animation:none!important}
.preloader__bar{animation:none!important}
}
:where(a,button,.chip,.pill):focus-visible{outline:3px solid color-mix(in oklab,var(--accent),#fff 10%);outline-offset:3px;border-radius:12px}