diff --git a/docs/scifi-ui/index.html b/docs/scifi-ui/index.html index 3d760cf..038de25 100644 --- a/docs/scifi-ui/index.html +++ b/docs/scifi-ui/index.html @@ -40,6 +40,7 @@ +
diff --git a/docs/scifi-ui/styles/base.css b/docs/scifi-ui/styles/base.css index 16ac4bf..3e8771b 100644 --- a/docs/scifi-ui/styles/base.css +++ b/docs/scifi-ui/styles/base.css @@ -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,"); background-size:220px;animation:noiseMove 2.5s linear infinite;mix-blend-mode:overlay} @@ -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} @@ -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} @@ -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}} diff --git a/docs/scifi-ui/styles/cyberpunk.css b/docs/scifi-ui/styles/cyberpunk.css index c7cea4b..89ad3c2 100644 --- a/docs/scifi-ui/styles/cyberpunk.css +++ b/docs/scifi-ui/styles/cyberpunk.css @@ -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} +} diff --git a/docs/scifi-ui/styles/lcars.css b/docs/scifi-ui/styles/lcars.css index 68c3eea..4d1733e 100644 --- a/docs/scifi-ui/styles/lcars.css +++ b/docs/scifi-ui/styles/lcars.css @@ -1,23 +1,25 @@ /* LCARS (Star Trek) — véglegesített megjelenés a referenciakép alapján */ :root[data-theme="lcars"]{ /* Alapszínek */ - --bg:#070809; + --bg:#0b0d10; --text:#ffe7b6; --muted:#ffc977; - --accent:#FF9A3C; - --accent-2:#8C6AFF; - --border:#FF9A3C; - --panel:#1a12030e; + --accent:#F4A019; + --accent-2:#C64B7F; + --cyan-text:#35D8F5; + --border:#F4A019; + --panel:#121418; --card:#ff99000f; - --panel-glow:rgba(255,154,60,0.12); + --panel-glow:rgba(244,160,25,0.12); --progress-dur:1.6s; } /* Háttér és betű */ :root[data-theme="lcars"] body{ background: - radial-gradient(1200px 600px at 50% -10%,#161008 0%,#070809 45%) fixed, - #070809; + radial-gradient(ellipse 1200px 600px at 50% -10%,#1a1510 0%,#0b0d10 50%), + radial-gradient(ellipse 100% 70% at 50% 30%,transparent 60%,rgba(0,0,0,.35)), + #0b0d10; color:var(--text); font-family:"Eurostile","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; letter-spacing:.02em; @@ -28,48 +30,83 @@ position:relative; color:var(--accent); text-shadow: - 0 0 12px #ff9d00aa, - 0 0 1px #000; - font-weight:800; - letter-spacing:.10em; + 0 0 8px rgba(244,160,25,.55), + 0 0 1px #000, + inset 0 2px 4px rgba(0,0,0,.3); + font-weight:900; + letter-spacing:.07em; } /* Progress – borostyán átmenet LCARS sapkával */ :root[data-theme="lcars"] .progress .bar{ - background:linear-gradient(90deg,#FF9A3C,#FFD79A); - animation:fill var(--progress-dur) cubic-bezier(.2,.9,.2,1) infinite; + background:linear-gradient(90deg,#F4A019,#FFD79A); +} +:root[data-theme="lcars"] .progress .cap{ + background:linear-gradient(180deg,#181a1e,#0f1216); + border-left:2px solid rgba(122,74,0,.9); } :root[data-theme="lcars"] .preloader__lcars .preloader__bar{ - background:linear-gradient(90deg,#FF9A3C,#FFD79A); - animation:lcars-sheen 1.6s linear infinite; + background:linear-gradient(90deg,#F4A019,#FFD79A); +} +:root[data-theme="lcars"] .preloader__lcars .preloader__cap{ + background:linear-gradient(180deg,#181a1e,#0f1216); + border-left:2px solid rgba(122,74,0,.9); } -@keyframes lcars-sheen{0%{opacity:.85}50%{opacity:1}100%{opacity:.85}} /* Téma-váltó kapszulák */ :root[data-theme="lcars"] .switcher .theme{ border:2px solid var(--border); - color:#ffd089; - background:transparent; + color:#0f1116; + background:linear-gradient(180deg,#F4A019,color-mix(in oklab,#F4A019,black 20%)); border-radius:999px; + box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18); +} +:root[data-theme="lcars"] .switcher .theme[data-theme="cyberpunk"]{ + background:linear-gradient(180deg,#C64B7F,color-mix(in oklab,#C64B7F,black 20%)); + border-color:#C64B7F; } :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; + box-shadow:0 4px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22); + transform:translateY(-1px); } /* 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{ + background:#F4A019; + opacity:.9; + filter:drop-shadow(0 0 8px rgba(244,160,25,.45)); + width:28px; + border-radius:14px; +} :root[data-theme="lcars"] .lcars-rails .rail-b, -:root[data-theme="lcars"] .lcars-rails .rail-c{background:#d45588} +:root[data-theme="lcars"] .lcars-rails .rail-c{background:#C64B7F} +:root[data-theme="lcars"] .lcars-rails::before, +:root[data-theme="lcars"] .lcars-rails::after{ + content:""; + position:absolute; + width:28px; + height:28px; + border-radius:14px; + background:#F4A019; + filter:drop-shadow(0 0 8px rgba(244,160,25,.45)); +} +:root[data-theme="lcars"] .lcars-rails::before{ + bottom:0; + left:-10px; +} +:root[data-theme="lcars"] .lcars-rails::after{ + bottom:0; + right:-10px; +} /* 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-radius:26px; 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 3px rgba(244,160,25,.12) inset, 0 10px 30px rgba(0,0,0,.45), 0 0 40px var(--panel-glow); padding:22px; @@ -78,6 +115,20 @@ color:var(--accent); font:800 26px/1.2 "Eurostile","Segoe UI",system-ui,Arial,sans-serif; letter-spacing:.06em; + position:relative; +} +:root[data-theme="lcars"] .panel>h2::after{ + content:""; + position:absolute; + bottom:-6px; + left:0; + width:80px; + height:1px; + background:var(--accent); + box-shadow:0 0 4px rgba(244,160,25,.4); +} +:root[data-theme="lcars"] .muted{ + color:var(--cyan-text); } /* Kártyák – belső keret és LCARS-sarkok */ @@ -93,38 +144,60 @@ border:2px solid var(--border); border-radius:999px; padding:10px 16px; - color:#1a1203; - background:linear-gradient(180deg,#ffbe66,#FF9A3C); + color:#0f1116; + background:linear-gradient(180deg,#ffcd7a,#F4A019); text-shadow:0 1px 0 rgba(255,255,255,.15); + box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.3); } +:root[data-theme="lcars"] .chip[href="#letoltesek"], :root[data-theme="lcars"] .chip[href="#funkciok"]{ - background:linear-gradient(90deg,#FF9A3C,#ffbe66); + background:linear-gradient(180deg,#ffcd7a,#F4A019); + border-color:#F4A019; } :root[data-theme="lcars"] .chip[href="#dokumentumok"]{ - color:#2b1230; - border-color:var(--accent-2); - background:linear-gradient(180deg,#d08fff,#8C6AFF); + color:#0f1116; + border-color:#C64B7F; + background:linear-gradient(180deg,#e87ec0,#C64B7F); } :root[data-theme="lcars"] .chip.hollow{ color:#ffd089; background:transparent; border-style:solid; + box-shadow:none; } /* „Pill” akciógombok */ :root[data-theme="lcars"] .pill{ border:2px solid var(--border); border-radius:999px; - color:#1a1203; - background:linear-gradient(180deg,#ffd089,#FF9A3C); + color:#0f1116; + background:linear-gradient(180deg,#ffcd7a,#F4A019); + box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.3); } :root[data-theme="lcars"] .pill.ghost{ color:#ffd089; background:transparent; border-color:#ffb35a; border-style:dashed; + box-shadow:none; } /* 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{ + position:relative; +} +:root[data-theme="lcars"] .footer .copy{color:var(--cyan-text)} +:root[data-theme="lcars"] .footer .to-top{color:#F4A019;border-bottom:2px solid color-mix(in oklab,var(--accent),#fff 10%)} +:root[data-theme="lcars"] .footer::before, +:root[data-theme="lcars"] .footer::after{ + content:""; + position:absolute; + bottom:-20px; + width:60px; + height:16px; + border-radius:8px; + background:#F4A019; + opacity:.7; +} +:root[data-theme="lcars"] .footer::before{left:0} +:root[data-theme="lcars"] .footer::after{right:0;background:#C64B7F} \ No newline at end of file diff --git a/docs/scifi-ui/styles/starwars.css b/docs/scifi-ui/styles/starwars.css index 03b05e7..b67b922 100644 --- a/docs/scifi-ui/styles/starwars.css +++ b/docs/scifi-ui/styles/starwars.css @@ -1,12 +1,191 @@ -:root[data-theme="starwars"]{--bg:#061118;--text:#dffcff;--muted:#9be4f1;--accent:#2EE6FF;--accent-2:#90F0FF;--border:#2EE6FF;--panel:#0c2a3740;--card:#0d2e3a66;--sw-main:#2EE6FF;--sw-accent:#90F0FF;--grid-glow:rgba(46,230,255,0.08)} -:root[data-theme="starwars"] body{background:radial-gradient(1200px 600px at 50% -10%,#0f2a3a 0%,#061118 45%) fixed,#061118;font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace;letter-spacing:.06em} -:root[data-theme="starwars"] .brand{font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace;letter-spacing:.06em;text-shadow:0 0 18px #73ffff55,0 0 3px #72ffff} -:root[data-theme="starwars"] .panel,:root[data-theme="starwars"] .card,:root[data-theme="starwars"] .chip{border-color:color-mix(in oklab,var(--accent),#000 35%);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 22px #6df6ff22,inset 0 0 26px #6df6ff11} -:root[data-theme="starwars"] .fx.holo-grid{opacity:.28;mix-blend-mode:screen;filter:drop-shadow(0 0 6px var(--grid-glow))} -:root[data-theme="starwars"] .fx.holo-grid .hud-line{stroke:#2EE6FF;stroke-opacity:.35;stroke-width:.3;stroke-dasharray:6 8;stroke-dashoffset:0;animation:sw-grid 2s linear infinite} -@keyframes sw-grid{to{stroke-dashoffset:-14}} -:root[data-theme="starwars"] .progress .bar{background:linear-gradient(90deg, rgba(46,230,255,0.12), rgba(144,240,255,0.06))} -:root[data-theme="starwars"] .preloader__lcars .preloader__bar{background:linear-gradient(90deg,#2EE6FF,#0AA1C4)} -:root[data-theme="starwars"] .preloader__label{color:#bff5ff} -:root[data-theme="starwars"] .brand::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 30%, rgba(144,240,255,.18) 45%, transparent 60%);animation:holo-sheen 1.8s ease-in-out infinite;mask:linear-gradient(#000,#000)} -@keyframes holo-sheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}} +/* Star Wars HUD Theme */ +:root[data-theme="starwars"]{ + --bg:#0b0d10; + --text:#dffcff; + --muted:#9be4f1; + --accent:#7DEBFF; + --accent-2:#B5F7FF; + --border:#4AD6E8; + --panel:#0c2a3740; + --card:#0d2e3a66; + --sw-main:#7DEBFF; + --sw-accent:#B5F7FF; + --sw-outline:#4AD6E8; + --sw-shadow:#00AAFF; + --grid-glow:rgba(125,235,255,0.12); +} + +:root[data-theme="starwars"] body{ + background: + radial-gradient(ellipse 1200px 600px at 50% -10%,#0f2a3a 0%,#0b0d10 50%), + radial-gradient(ellipse 100% 70% at 50% 30%,transparent 60%,rgba(0,0,0,.35)), + #0b0d10; + font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace; + letter-spacing:.06em; +} + +/* Title with bevel and scratches */ +:root[data-theme="starwars"] .brand{ + position:relative; + font-family:"Orbitron","Roboto Mono",ui-monospace,system-ui,monospace; + letter-spacing:.06em; + color:var(--sw-main); + text-shadow:0 0 16px rgba(125,235,255,.55),0 0 3px #72ffff,0 2px 4px rgba(0,0,0,.5); +} +:root[data-theme="starwars"] .brand::after{ + content:""; + position:absolute; + top:-2px; + left:-2px; + right:auto; + width:50%; + height:3px; + background:linear-gradient(90deg,var(--sw-main),transparent); + box-shadow:0 0 6px var(--sw-main); + pointer-events:none; +} + +/* Panels with cyan glow and corner notches */ +:root[data-theme="starwars"] .panel{ + background:var(--panel); + border:2px solid var(--sw-outline); + border-radius:26px; + box-shadow: + 0 0 0 1px rgba(255,255,255,.05) inset, + 0 0 24px rgba(125,235,255,.25), + inset 0 0 28px rgba(125,235,255,.12); + position:relative; +} +:root[data-theme="starwars"] .panel>h2{ + position:relative; + color:var(--sw-main); +} +:root[data-theme="starwars"] .panel>h2::after{ + content:""; + position:absolute; + bottom:-8px; + left:0; + width:100%; + height:2px; + background:linear-gradient(90deg,var(--sw-outline),transparent 40%); + box-shadow:0 0 6px var(--sw-main); +} +:root[data-theme="starwars"] .panel::before{ + content:""; + position:absolute; + top:-2px; + left:-2px; + width:20px; + height:20px; + border-top:3px solid var(--sw-accent); + border-left:3px solid var(--sw-accent); + border-radius:26px 0 0 0; +} + +/* Cards with filled background */ +:root[data-theme="starwars"] .card{ + background:var(--card); + border:2px solid var(--sw-outline); + border-radius:20px; + box-shadow: + 0 0 0 1px rgba(255,255,255,.05) inset, + 0 0 18px rgba(125,235,255,.22), + inset 0 0 22px rgba(125,235,255,.1); +} + +/* Chips/Buttons - filled with dark cyan background */ +:root[data-theme="starwars"] .chip{ + border:2px solid var(--sw-outline); + background:linear-gradient(180deg,#1a3844,#0f2026); + color:var(--sw-main); + border-radius:999px; + box-shadow: + 0 0 0 1px rgba(255,255,255,.05) inset, + 0 0 16px rgba(125,235,255,.2), + inset 0 0 20px rgba(125,235,255,.08); +} +:root[data-theme="starwars"] .chip.hollow{ + background:transparent; +} + +/* Pill buttons */ +:root[data-theme="starwars"] .pill{ + border:2px solid var(--sw-outline); + background:linear-gradient(180deg,#1a3844,#0f2026); + color:var(--sw-main); + box-shadow: + 0 0 0 1px rgba(255,255,255,.05) inset, + 0 0 16px rgba(125,235,255,.2), + inset 0 0 20px rgba(125,235,255,.08); +} +:root[data-theme="starwars"] .pill.ghost{ + background:transparent; + border-style:dashed; +} + +/* Progress bar */ +:root[data-theme="starwars"] .progress .bar{ + background:linear-gradient(90deg,rgba(125,235,255,0.3),rgba(181,247,255,0.15)); +} +:root[data-theme="starwars"] .preloader__lcars .preloader__bar{ + background:linear-gradient(90deg,#7DEBFF,#4AD6E8); +} +:root[data-theme="starwars"] .preloader__label{ + color:var(--sw-accent); +} + +/* Theme selector buttons */ +:root[data-theme="starwars"] .switcher .theme{ + border:2px solid var(--sw-outline); + background:linear-gradient(180deg,#1a3844,#0f2026); + color:var(--sw-main); + box-shadow:0 0 12px rgba(125,235,255,.18),inset 0 0 16px rgba(125,235,255,.08); +} +:root[data-theme="starwars"] .switcher .theme[aria-pressed="true"]{ + box-shadow:0 0 18px rgba(125,235,255,.3),inset 0 0 20px rgba(125,235,255,.15); + transform:translateY(-1px); +} + +/* HUD grid overlay - strengthened */ +:root[data-theme="starwars"] .fx.holo-grid, +:root[data-theme="starwars"] .fx-holo-grid{ + display:block; + opacity:.35; + mix-blend-mode:screen; + filter:drop-shadow(0 0 6px var(--grid-glow)); + background-image: + repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(125,235,255,.25) 24px,rgba(125,235,255,.25) 25px), + repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(125,235,255,.25) 24px,rgba(125,235,255,.25) 25px); + animation:sw-scan-v 6s linear infinite,sw-scan-h 120s linear infinite; +} +@keyframes sw-scan-v{ + 0%{background-position:0 0,0 0} + 100%{background-position:0 -25px,0 0} +} +@keyframes sw-scan-h{ + 0%{background-position:0 0,0 0} + 100%{background-position:0 0,-25px 0} +} + +/* Footer */ +:root[data-theme="starwars"] .footer .copy{color:var(--sw-accent)} +:root[data-theme="starwars"] .footer .to-top{color:var(--sw-main);border-bottom:2px solid var(--sw-outline)} + +/* Scan scratches and dust within panels */ +:root[data-theme="starwars"] .panel::after{ + content:""; + position:absolute; + inset:0; + background: + linear-gradient(90deg,transparent 0,rgba(125,235,255,.03) 1px,transparent 1px) 0 0 / 120px 100%, + radial-gradient(circle at 20% 30%,rgba(125,235,255,.04) 1px,transparent 1px), + radial-gradient(circle at 80% 70%,rgba(125,235,255,.04) 1px,transparent 1px); + pointer-events:none; + border-radius:inherit; +} + +@media (prefers-reduced-motion:reduce){ + :root[data-theme="starwars"] .fx.holo-grid, + :root[data-theme="starwars"] .fx-holo-grid{animation:none} + :root[data-theme="starwars"] .brand::after{animation:none} +} diff --git a/docs/scifi-ui/styles/themes.css b/docs/scifi-ui/styles/themes.css index c23a5cc..ee22609 100644 --- a/docs/scifi-ui/styles/themes.css +++ b/docs/scifi-ui/styles/themes.css @@ -7,4 +7,4 @@ .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}} -:where(a,button,.chip,.pill):focus-visible{outline:3px solid color-mix(in oklab,var(--accent),#fff 10%);outline-offset:3px;border-radius:12px} +:where(a,button,.chip,.pill):focus-visible{outline:3px solid color-mix(in oklab,var(--accent),#fff 12%);outline-offset:3px;border-radius:12px}