From 9bfcd65001ef9438cafac63ce40a56cd2b2ee282 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Oct 2025 17:54:44 +0000 Subject: [PATCH 1/2] Initial plan From 95c7df96f093aaa722a209be084af3408aeb79ba Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Oct 2025 18:08:29 +0000 Subject: [PATCH 2/2] Achieve LCARS theme pixel parity with mock design Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com> --- docs/scifi-ui/index.html | 43 +++++--- docs/scifi-ui/styles/base.css | 5 +- docs/scifi-ui/styles/lcars.css | 180 ++++++++++++++++++++++++++++---- docs/scifi-ui/styles/themes.css | 18 +++- 4 files changed, 203 insertions(+), 43 deletions(-) diff --git a/docs/scifi-ui/index.html b/docs/scifi-ui/index.html index 724f8af..4fdbe9b 100644 --- a/docs/scifi-ui/index.html +++ b/docs/scifi-ui/index.html @@ -63,7 +63,7 @@

FORMÁZÁS A JÖVŐBŐL

-

Gyors. Moduláris. Bővíthető. Azonos eszközök, eltérő stílusok.

+

Gyors. Moduláris. Bővíthető.
Azonos eszközök, eltérő stílusok.

-
+

Letöltések

-
-
+
+

FormatX Light telepítő

Windows app • hutoczky/formatx

- Letöltés
-
+
+

Windows App Runtime (x64)

+

Komponens • Microsoft

+
+ Letöltés +
+
+

README.txt

Kiinduló információk

- Megnyitás
-
-

Licenc.txt

-

Felhasználási feltételek

+
+

.NET Desktop Runtime 10.0 (x64)

+

Komponens • Microsoft

+
+ Letöltés +
+
+
- Villámgyors - Bővíthető - Web UI + Villámgyors + Bővíthető + Web UI
@@ -158,7 +169,7 @@

Dokumentumok

diff --git a/docs/scifi-ui/styles/base.css b/docs/scifi-ui/styles/base.css index 57e0cd7..e7d5623 100644 --- a/docs/scifi-ui/styles/base.css +++ b/docs/scifi-ui/styles/base.css @@ -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 */ @@ -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} diff --git a/docs/scifi-ui/styles/lcars.css b/docs/scifi-ui/styles/lcars.css index 68c3eea..fd63791 100644 --- a/docs/scifi-ui/styles/lcars.css +++ b/docs/scifi-ui/styles/lcars.css @@ -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); @@ -47,32 +61,80 @@ /* 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); @@ -80,22 +142,55 @@ 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); @@ -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; @@ -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%)} \ No newline at end of file +: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; +} \ No newline at end of file diff --git a/docs/scifi-ui/styles/themes.css b/docs/scifi-ui/styles/themes.css index c23a5cc..baca149 100644 --- a/docs/scifi-ui/styles/themes.css +++ b/docs/scifi-ui/styles/themes.css @@ -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}