Skip to content

Achieve strict pixel parity for Sci-Fi UI themes (LCARS, Star Wars, Cyberpunk) #45

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 3 commits into from
Closed

Achieve strict pixel parity for Sci-Fi UI themes (LCARS, Star Wars, Cyberpunk) #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d843cc
Initial plan
Copilot Oct 22, 2025
9d5d962
Update base CSS and all three theme files with improved styling
Copilot Oct 22, 2025
f295514
Add HUD grid overlay for Star Wars theme and minor refinements
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
1 change: 1 addition & 0 deletions docs/scifi-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
<div class="fx fx-scanlines" aria-hidden="true"></div>
<div class="fx fx-noise" aria-hidden="true"></div>
<div class="fx fx-vignette" aria-hidden="true"></div>
<div class="fx fx-holo-grid" aria-hidden="true"></div>
<div id="theme-layers" aria-hidden="true"></div>

<div id="preloader" class="preloader" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
Expand Down
29 changes: 15 additions & 14 deletions docs/scifi-ui/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
/* Reset + alap komponensek (JS nélkül is működő) */
*,*::before,*::after{box-sizing:border-box}
:root{
--bg:#080a0d;--text:#e9eefc;--muted:#9fb3bf;
--bg:#0b0d10;--text:#e9eefc;--muted:#9fb3bf;
--accent:#ff9800;--accent-2:#ffa726;--border:#ff9800;
--panel:rgba(255,255,255,.02);--card:rgba(255,255,255,.04);
--radius:18px;--max:1100px;--pad:18px;--progress-dur:1.6s;
--radius:26px;--card-radius:20px;--max:1100px;--pad:18px;--progress-dur:1.6s;
--space-1:8px;--space-2:12px;--space-3:16px;--space-4:20px;--space-6:28px;--space-8:36px;
}
html{height:100%}
body{min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#121622 0%,var(--bg) 45%) fixed,var(--bg);
body{min-height:100%;background:radial-gradient(ellipse 1200px 600px at 50% -10%,#1a1d25 0%,var(--bg) 50%),radial-gradient(ellipse 100% 70% at 50% 30%,transparent 60%,rgba(0,0,0,.35)),var(--bg);
color:var(--text);font:600 16px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;height:auto}
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-holo-grid{display:none}
.fx-scanlines{background-image:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.05) 2px 3px);mix-blend-mode:soft-light;opacity:.25}
.fx-noise{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.06'/></svg>");
background-size:220px;animation:noiseMove 2.5s linear infinite;mix-blend-mode:overlay}
Expand All @@ -23,12 +25,12 @@ img{max-width:100%;height:auto}
.switcher .theme{border:1.8px solid var(--border);border-radius:999px;color:#ffd089;padding:9px 16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.switcher .theme[aria-pressed="true"]{background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent),black 30%));color:#141518}
.hero{max-width:var(--max);margin:40px auto 12px;padding:0 20px;text-align:center}
.progress{position:relative;height:44px;max-width:620px;margin:0 auto 18px;border-radius:24px;background:#0b0d10;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55);overflow:hidden}
.progress .bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);transition:none;width:0;animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite}
.progress .cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216);border-left:2px solid rgba(122,74,0,.5)}
.progress{position:relative;height:44px;max-width:620px;margin:0 auto var(--space-3);border-radius:24px;background:#0b0d10;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55);overflow:hidden}
.progress .bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);transition:none;width:var(--w,0)}
.progress .cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216);border-left:2px solid rgba(122,74,0,.8)}
@keyframes fill{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}
.brand{margin:0 0 12px;font:900 clamp(34px,6.5vw,66px)/1.05 "Segoe UI",system-ui,Roboto,Arial,sans-serif;letter-spacing:.1em;color:var(--accent-2);text-shadow:0 0 12px #ff9d00aa,0 0 1px #000}
.chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.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:.1em;color:var(--accent-2);text-shadow:0 0 8px rgba(255,157,0,.45),0 0 1px #000}
.chips{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-top:var(--space-3)}
.chip{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:999px;padding:10px 16px;text-transform:uppercase;font-weight:900;letter-spacing:.12em;background:transparent;color:#ffd089}
.container{max-width:var(--max);margin:20px auto 60px;padding:0 20px;position:relative;z-index:1}
.lcars-rails{position:absolute;inset:0;pointer-events:none;z-index:0}
Expand All @@ -37,10 +39,10 @@ img{max-width:100%;height:auto}
.rail-b{left:-10px;top:230px;height:76px;background:#d45588}
.rail-c{right:-10px;top:120px;height:130px;background:#d45588}
.rail-d{right:-10px;top:270px;height:210px;background:#ff9900}
.panel{background:var(--panel);border:1.6px solid var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(255,152,0,.15) inset;margin-bottom:22px}
.panel>h2{margin:0 0 10px;font:800 26px/1.2 "Segoe UI",system-ui,Arial,sans-serif;letter-spacing:.06em}
.panel{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(255,152,0,.12) inset;margin-bottom:var(--space-4)}
.panel>h2{margin:0 0 var(--space-2);font:800 26px/1.2 "Segoe UI",system-ui,Arial,sans-serif;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1.2px solid color-mix(in oklab,var(--border),#000 35%);border-radius:16px;padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.card{background:var(--card);border:2px solid color-mix(in oklab,var(--border),#000 35%);border-radius:var(--card-radius);padding:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.card h3{margin:0 0 6px;font-weight:800;font-size:18px;letter-spacing:.04em}
.card .muted{margin:0 0 10px;color:var(--muted);font:500 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.card .actions{display:flex;gap:10px;flex-wrap:wrap}
Expand All @@ -54,8 +56,7 @@ img{max-width:100%;height:auto}
.preloader{position:fixed;inset:0;display:grid;place-items:center;background:#070809;z-index:1000}
.preloader[hidden]{display:none}
.preloader__lcars{position:relative;height:44px;max-width:520px;width:80%;border-radius:24px;background:#0b0d10;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55)}
.preloader__lcars .preloader__bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite;width:var(--w,0)}
.preloader__lcars .preloader__cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216);border-left:2px solid rgba(122,74,0,.5)}
.preloader__lcars .preloader__bar{position:absolute;inset:2px 52px 2px 2px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffa726,#cc6f00);width:var(--w,0)}
.preloader__lcars .preloader__cap{position:absolute;top:2px;right:2px;bottom:2px;width:50px;border-radius:0 22px 22px 0;background:linear-gradient(180deg,#181a1e,#0f1216);border-left:2px solid rgba(122,74,0,.8)}
.preloader__label{margin-top:16px;color:#ffd089;text-align:center}
@keyframes fill{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.fx-noise,.fx-scanlines{animation:none}.preloader__lcars .preloader__bar,.progress .bar{animation:none}}
188 changes: 178 additions & 10 deletions docs/scifi-ui/styles/cyberpunk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,178 @@
:root[data-theme="cyberpunk"]{--bg:#0a0010;--text:#ffe990;--muted:#ff86e6;--panel:#ff00ff14;--card:#ff00ff24;--cp-magenta:#FF2EC0;--cp-cyan:#00E5FF;--cp-yellow:#FFD500;--magenta:#FF2EC0;--cyan:#00E5FF;--yellow:#FFD500;--accent:#FF2EC0;--accent-2:#FFD500;--border:#FF2EC0}
:root[data-theme="cyberpunk"] body{background:radial-gradient(1200px 600px at 50% -10%,#1a0024 0%,#0a0010 45%) fixed,#0a0010;filter:contrast(1.06) saturate(1.25);font-family:"OCR-A","VT323",ui-monospace,monospace}
:root[data-theme="cyberpunk"] .brand{font-family:"OCR-A","VT323",ui-monospace,monospace;color:var(--yellow);text-shadow:0 0 6px rgba(255,46,192,.35),0 0 2px #000,0 0 16px rgba(0,229,255,.25)}
:root[data-theme="cyberpunk"] .panel,:root[data-theme="cyberpunk"] .card,:root[data-theme="cyberpunk"] .chip{border-color:color-mix(in oklab,var(--magenta),#000 35%);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 0 40px #ff00ff22,inset 0 0 30px #ff00ff11}
:root[data-theme="cyberpunk"] .progress .bar{background:linear-gradient(90deg,var(--cp-cyan),#8c2eff)}
@keyframes cp-glitch{0%{clip-path:inset(0 0 0 0);transform:translateX(0)}10%{clip-path:inset(0 0 85% 0);transform:translateX(-2px)}20%{clip-path:inset(80% 0 0 0);transform:translateX(1px)}30%{clip-path:inset(10% 0 60% 0);transform:translateX(-1px)}40%{clip-path:inset(60% 0 20% 0);transform:translateX(2px)}50%{clip-path:inset(0 0 0 0);transform:translateX(0)}60%{clip-path:inset(0 0 70% 0);transform:translateX(2px)}70%{clip-path:inset(65% 0 0 0);transform:translateX(-2px)}80%{clip-path:inset(20% 0 40% 0);transform:translateX(1px)}100%{clip-path:inset(0 0 0 0);transform:translateX(0)}}
@keyframes huePulse{0%{filter:hue-rotate(0)}50%{filter:hue-rotate(12deg)}100%{filter:hue-rotate(0)}}
:root[data-theme="cyberpunk"] .brand[data-glitch="on"]{animation:cp-glitch 1.2s steps(6) infinite, huePulse 1.2s linear infinite}
:root[data-theme="cyberpunk"] .preloader__lcars .preloader__bar{background:linear-gradient(90deg,#FF2EC0,#9b0bb0)}
:root[data-theme="cyberpunk"] .preloader__label{color:#ffe990}
/* Cyberpunk Neon Theme */
:root[data-theme="cyberpunk"]{
--bg:#0b0d10;
--text:#ffe990;
--muted:#ff86e6;
--panel:#ff00ff1a;
--card:#ff00ff28;
--cp-magenta:#FF2EC0;
--cp-cyan:#00F0FF;
--cp-yellow:#FFD500;
--magenta:#FF2EC0;
--cyan:#00F0FF;
--yellow:#FFD500;
--accent:#FF2EC0;
--accent-2:#FFD500;
--border:#FF2EC0;
}

:root[data-theme="cyberpunk"] body{
background:
radial-gradient(ellipse 1200px 600px at 50% -10%,#1a0024 0%,#0b0d10 50%),
radial-gradient(ellipse 100% 70% at 50% 30%,transparent 60%,rgba(255,46,192,.15)),
#0b0d10;
filter:contrast(1.06) saturate(1.25);
font-family:"OCR-A","VT323",ui-monospace,monospace;
}

/* Heavy scanlines across page */
:root[data-theme="cyberpunk"] .fx-scanlines{
background-image:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,46,192,.12) 2px 3px);
mix-blend-mode:soft-light;
opacity:.33;
}

/* Magenta vignette at edges */
:root[data-theme="cyberpunk"] .fx-vignette{
background:radial-gradient(ellipse 100% 70% at 50% 30%,transparent 50%,rgba(255,46,192,.25));
}

/* Title with glitch effect */
:root[data-theme="cyberpunk"] .brand{
position:relative;
font-family:"OCR-A","VT323",ui-monospace,monospace;
color:var(--yellow);
text-shadow:
2px 0 4px rgba(0,240,255,.6),
-2px 0 4px rgba(255,46,192,.6),
0 0 12px rgba(255,46,192,.35),
0 0 2px #000;
}
:root[data-theme="cyberpunk"] .brand[data-glitch="on"]{
animation:cp-glitch 1.4s steps(8) infinite,cp-noise 0.6s steps(4) infinite;
}
@keyframes cp-glitch{
0%{clip-path:inset(0 0 0 0);transform:translateX(0)}
8%{clip-path:inset(0 0 88% 0);transform:translateX(-3px)}
16%{clip-path:inset(82% 0 0 0);transform:translateX(2px)}
24%{clip-path:inset(12% 0 62% 0);transform:translateX(-2px)}
32%{clip-path:inset(58% 0 22% 0);transform:translateX(3px)}
40%{clip-path:inset(0 0 0 0);transform:translateX(0)}
48%{clip-path:inset(0 0 75% 0);transform:translateX(2px)}
56%{clip-path:inset(68% 0 0 0);transform:translateX(-3px)}
64%{clip-path:inset(22% 0 42% 0);transform:translateX(2px)}
72%{clip-path:inset(45% 0 30% 0);transform:translateX(-2px)}
80%{clip-path:inset(0 0 55% 0);transform:translateX(3px)}
88%{clip-path:inset(55% 0 0 0);transform:translateX(-2px)}
100%{clip-path:inset(0 0 0 0);transform:translateX(0)}
}
@keyframes cp-noise{
0%{filter:hue-rotate(0deg) brightness(1)}
25%{filter:hue-rotate(5deg) brightness(1.05)}
50%{filter:hue-rotate(-5deg) brightness(0.95)}
75%{filter:hue-rotate(8deg) brightness(1.02)}
100%{filter:hue-rotate(0deg) brightness(1)}
}

/* Panels with magenta border and inner glow */
:root[data-theme="cyberpunk"] .panel{
background:var(--panel);
border:2px solid var(--magenta);
border-radius:26px;
box-shadow:
0 0 0 1px rgba(255,255,255,.02) inset,
0 0 40px rgba(255,46,192,.28),
inset 0 0 35px rgba(255,46,192,.15);
}
:root[data-theme="cyberpunk"] .panel>h2{
color:var(--magenta);
}

/* Cards */
:root[data-theme="cyberpunk"] .card{
background:var(--card);
border:2px solid var(--magenta);
border-radius:20px;
box-shadow:
0 0 0 1px rgba(255,255,255,.02) inset,
0 0 28px rgba(255,46,192,.25),
inset 0 0 25px rgba(255,46,192,.12);
}

/* Chips/Buttons - neon bordered with filled cores */
:root[data-theme="cyberpunk"] .chip{
border:2px solid currentColor;
border-radius:12px;
color:#121316;
font-weight:800;
box-shadow:
0 0 16px currentColor,
inset 0 0 20px currentColor;
}
:root[data-theme="cyberpunk"] .chip[href="#letoltesek"]{
background:var(--cyan);
border-color:var(--cyan);
}
:root[data-theme="cyberpunk"] .chip[href="#funkciok"]{
background:var(--magenta);
border-color:var(--magenta);
}
:root[data-theme="cyberpunk"] .chip[href="#dokumentumok"]{
background:var(--yellow);
border-color:var(--yellow);
}
:root[data-theme="cyberpunk"] .chip.hollow{
color:var(--magenta);
background:transparent;
border-color:var(--magenta);
box-shadow:0 0 12px rgba(255,46,192,.2);
}

/* Pill buttons */
:root[data-theme="cyberpunk"] .pill{
border:2px solid var(--magenta);
background:var(--magenta);
color:#121316;
border-radius:12px;
box-shadow:
0 0 16px var(--magenta),
inset 0 0 20px rgba(255,255,255,.2);
}
:root[data-theme="cyberpunk"] .pill.ghost{
background:transparent;
color:var(--magenta);
border-style:dashed;
box-shadow:0 0 12px rgba(255,46,192,.2);
}

/* Progress bar */
:root[data-theme="cyberpunk"] .progress .bar{
background:linear-gradient(90deg,var(--cyan),var(--magenta));
}
:root[data-theme="cyberpunk"] .preloader__lcars .preloader__bar{
background:linear-gradient(90deg,#FF2EC0,#9b0bb0);
}
:root[data-theme="cyberpunk"] .preloader__label{
color:var(--yellow);
}

/* Theme selector buttons */
:root[data-theme="cyberpunk"] .switcher .theme{
border:2px solid var(--magenta);
background:transparent;
color:var(--yellow);
box-shadow:0 0 12px rgba(255,46,192,.2);
}
:root[data-theme="cyberpunk"] .switcher .theme[aria-pressed="true"]{
background:var(--magenta);
color:#121316;
box-shadow:0 0 20px rgba(255,46,192,.4),inset 0 0 20px rgba(255,255,255,.15);
}

/* Footer */
:root[data-theme="cyberpunk"] .footer .copy{color:var(--cyan)}
:root[data-theme="cyberpunk"] .footer .to-top{color:var(--yellow);border-bottom:2px solid var(--yellow)}

@media (prefers-reduced-motion:reduce){
:root[data-theme="cyberpunk"] .brand[data-glitch="on"]{animation:none}
}
Loading