/* ============================================================ UniOrb – JAVÍTÁSOK Helye: a weboldal gyökérkönyvtára, a tailwind.css mellett. FONTOS: ezt a fájlt MINDIG a tailwind.css (és a style.css) UTÁN kell betölteni az index.html részében. Mit old meg? 1. Sötét mód: mostantól minden képernyőméreten működik. Nincs benne egyetlen @media (min-width) feltétel sem, ezért telefonon, tableten és kis kijelzős laptopon is ugyanaz. 2. A felső nyíl (mobil fejléc) mindig látszik: kivágásvédelem (notch / lekerekített sarok), fix magasság, dinamikus képernyőmagasság. 3. Discord gomb megjelenése. ============================================================ */ /* ============================================================ 1. KÉPERNYŐMAGASSÁG – "a felső nyíl néha eltűnik" A régi kód 100vh-t (h-screen) használt. Mobilon a 100vh a böngésző címsorával EGYÜTT számol, ezért a doboz magasabb, mint a ténylegesen látható terület – így a fejléc kicsúszhat felfelé. A 100dvh a valóban látható magasságot jelenti. ============================================================ */ @supports (height: 100dvh) { #app-root, #app-root .h-screen { height: 100dvh; } } /* ============================================================ 2. MOBIL FEJLÉC ÉS A FELSŐ NYÍL Három hiba volt egyszerre: a) viewport-fit=cover miatt a tartalom a "nem biztonságos" területre (notch, lekerekített sarok, státuszsáv) is kicsúszott, és fekvő módban pont a jobb szélen lévő nyíl tűnt el; b) a fejléc flex-elem volt, ezért alacsony képernyőn összenyomódhatott; c) 1024 és 1280 képernyőpont között sem a nyíl, sem az asztali jobb oldalsáv nem látszott – így kis laptopon nem lehetett elérni az üzeneteket és az értesítéseket. ============================================================ */ #mobile-header { flex: 0 0 auto; /* soha ne nyomódjon össze */ } /* Az env(safe-area-inset-*) kitöltések innen eltűntek. Az index.html-ből kivettük a viewport-fit=cover kapcsolót, ezért a böngésző maga tartja a tartalmat a biztonságos területen belül, és minden inset értéke nulla. Így nem lehet se levágott nyíl, se üres sáv – függetlenül attól, melyik böngésző hogyan számol. */ /* Biztonsági háló: az alsó menüsávon a Tailwind osztályban benne maradt a pb-[env(safe-area-inset-bottom,0px)]. Ha valamelyik böngésző a viewport-fit=cover nélkül is ad vissza értéket, abból újra üres sáv lenne a menü alatt – ezért itt nullázzuk. */ #app-root nav.fixed.bottom-0 { padding-bottom: 0; } /* A nyílgomb mérete fix marad, akkor is, ha a logó hosszú */ #mobile-sidebar-btn { flex: 0 0 auto; } /* A mobil jobb oldalsáv is kerülje el a kivágást */ /* A mobil jobb oldalsávból is kikerült az inset-alapú kitöltés */ /* 1024–1279 képernyőpont (kis laptop): itt még nincs asztali jobb oldalsáv, ezért mutatjuk a nyilat és a hozzá tartozó kihúzható panelt. Az azonosítós szabály erősebb, mint a Tailwind lg:hidden osztálya. */ @media (min-width: 1024px) and (max-width: 1279.98px) { #mobile-header { display: flex; } #mobile-right-sidebar { display: flex; } #mobile-right-overlay:not(.hidden) { display: block; } } /* ============================================================ 3. SÖTÉT MÓD A módszer: nem egyesével írjuk felül a több ezer elemet, hanem magukat a Tailwind színváltozóit cseréljük ki a .dark-mode alatt. Így minden bg-white, text-slate-500, border-slate-200 stb. automatikusan átvált – függetlenül attól, hogy telefonon vagy asztali gépen nézzük. Ez az oka annak, hogy eddig kis kijelzőn nem működött: a mobil nézet más elemeket használ, mint az asztali, és azokra nem volt szabály. Most nincs elemenkénti szabály. ============================================================ */ /* A .dark-mode osztály a ÉS a elemen is működik. A azért kell, mert az index.html már az első kirajzolás előtt felteszi – így nem villan fel a világos háttér. */ html.dark-mode { background-color: #1b212b; } .dark-mode { /* Natív vezérlők (görgetősáv, dátumválasztó, űrlapmezők) */ color-scheme: dark; /* --- Semleges skála: megfordítva --- Fontos a sorrend: az oldal háttere a LEGSÖTÉTEBB, a kártya (bg-white) ennél VILÁGOSABB. Így marad meg a mélységérzet, és így látszik például a fülkapcsolón, melyik az aktív fül. */ --color-slate-50: #1b212b; /* oldal háttér – a legsötétebb */ --color-slate-100: #232a36; /* halvány háttér, keretek */ --color-slate-200: #343d4c; /* keretek */ --color-slate-300: #4d5768; --color-slate-400: #98a1b2; /* halvány szöveg */ --color-slate-500: #b3bac8; /* másodlagos szöveg */ --color-slate-600: #cbd1dc; --color-slate-700: #e0e5ed; /* A slate-800 és slate-900 marad sötét: ezeket a modális hátterek (bg-slate-900/50) használják. */ --color-gray-400: #98a1b2; --color-gray-500: #b3bac8; --color-gray-700: #e0e5ed; --color-gray-800: #e8edf4; --color-gray-900: #f3f6fa; /* címsorok */ /* --- Márkaszín: csak a világos árnyalatok sötétednek --- */ --color-brand-50: #213247; --color-brand-100: #28405c; --color-brand-200: #33506f; /* brand-500..800 marad: ezek gombháttérként kellenek */ /* --- Jelzőszínek pasztell háttere --- */ --color-red-50: #47242a; --color-red-100: #582d33; --color-red-200: #6b373d; --color-emerald-50: #1a3f37; --color-emerald-100: #1f4f43; --color-emerald-200: #256150; --color-green-50: #1a3f37; --color-green-100: #1f4f43; --color-orange-50: #47301c; --color-orange-100: #583b21; --color-orange-200: #6b4828; --color-amber-50: #473619; --color-amber-100: #58431e; --color-amber-200: #6b5225; --color-yellow-50: #473619; --color-yellow-100: #58431e; --color-blue-50: #213247; --color-blue-100: #28405c; --color-indigo-50: #282b4c; --color-indigo-100: #31355c; --color-violet-50: #30284a; --color-violet-100: #3b305b; --color-purple-100: #3b2c50; --color-pink-100: #4a2839; --color-rose-100: #4a2832; --color-teal-50: #1a3e3e; --color-teal-100: #1f4d4d; --color-sky-50: #1a3648; --color-sky-100: #1f4359; background-color: #1b212b; color: #e0e5ed; } /* --- Fehér felületek (kártyák, mezők, panelek) --- A --color-white változót szándékosan NEM írjuk át, mert a text-white a színes gombokon fehér kell maradjon. */ .dark-mode .bg-white { background-color: #2a3240; } .dark-mode .bg-white\/95 { background-color: rgba(42, 50, 64, .95); } .dark-mode .bg-white\/60 { background-color: rgba(42, 50, 64, .60); } .dark-mode .hover\:bg-white:hover, .dark-mode .focus\:bg-white:focus { background-color: #333c4b; } .dark-mode .border-white { border-color: #2a3240; } .dark-mode .border-white\/50 { border-color: rgba(255, 255, 255, .07); } .dark-mode .divide-white > * + * { border-color: #2a3240; } /* --- FONTOS: a világos árnyalatok SZÖVEGKÉNT világosak maradnak --- A text-brand-100 például a kék bal panelen fut. Ha a változóval együtt ez is besötétedne, sötétkék szöveg lenne sötétkék háttéren. (Pontosan ez történt a bejelentkező képernyő alcímével.) */ .dark-mode .text-brand-50 { color: #eff6ff; } .dark-mode .text-brand-100 { color: #dbeafe; } .dark-mode .text-brand-200 { color: #bfdbfe; } .dark-mode .text-brand-300 { color: #93c5fd; } .dark-mode .text-blue-100 { color: #dbeafe; } .dark-mode .text-blue-200 { color: #bfdbfe; } .dark-mode .text-indigo-200 { color: #c7d2fe; } .dark-mode .text-indigo-300 { color: #a5b4fc; } .dark-mode .text-red-100 { color: #fee2e2; } .dark-mode .text-red-200 { color: #fecaca; } .dark-mode .text-emerald-100{ color: #d1fae5; } .dark-mode .text-emerald-200{ color: #a7f3d0; } .dark-mode .text-amber-100 { color: #fef3c7; } .dark-mode .text-amber-200 { color: #fde68a; } .dark-mode .text-orange-100 { color: #ffedd5; } .dark-mode .text-orange-200 { color: #fed7aa; } /* Kivétel: a sötét slate hátterek maradjanak sötétek */ .dark-mode .bg-slate-700 { background-color: #334155; } .dark-mode .bg-slate-800 { background-color: #1e293b; } .dark-mode .hover\:bg-slate-800:hover { background-color: #263449; } /* --- Olvasható szövegszínek a sötét pasztell hátterekhez --- */ .dark-mode .text-brand-600 { color: #7cb0ff; } .dark-mode .text-brand-700 { color: #9ec5ff; } .dark-mode .text-brand-800 { color: #bfdbfe; } .dark-mode .text-red-600, .dark-mode .text-red-700 { color: #fca5a5; } .dark-mode .text-red-800, .dark-mode .text-red-900 { color: #fecaca; } .dark-mode .text-emerald-600, .dark-mode .text-emerald-700 { color: #6ee7b7; } .dark-mode .text-emerald-800, .dark-mode .text-emerald-900 { color: #a7f3d0; } .dark-mode .text-orange-600, .dark-mode .text-orange-700 { color: #fdba74; } .dark-mode .text-orange-800, .dark-mode .text-orange-900 { color: #fed7aa; } .dark-mode .text-amber-600, .dark-mode .text-amber-700 { color: #fcd34d; } .dark-mode .text-amber-800, .dark-mode .text-amber-900 { color: #fde68a; } .dark-mode .text-indigo-700, .dark-mode .text-indigo-800 { color: #a5b4fc; } .dark-mode .text-blue-700, .dark-mode .text-blue-800 { color: #93c5fd; } /* ============================================================ HOVER ÁLLAPOTOK Világos módban a hover SÖTÉTÍT (fehér lapon a slate-50 szürke folt). Sötét módban ezt meg kell fordítani: az egér alatt lévő elem legyen VILÁGOSABB, különben lyukat üt a felületbe. A legsúlyosabb eset a bal menü volt: "hover:bg-slate-50 hover:text-slate-900" – a slate-900-at szándékosan nem cseréltük ki (a modális hátterek használják), így a menüpont szövege ráhúzáskor majdnem feketére váltott sötét háttéren, vagyis eltűnt. ============================================================ */ .dark-mode .hover\:bg-slate-50:hover { background-color: #333c4b; } .dark-mode .hover\:bg-slate-100:hover { background-color: #394353; } .dark-mode .hover\:bg-slate-200:hover { background-color: #414c5e; } .dark-mode .hover\:bg-brand-50:hover { background-color: #24405f; } .dark-mode .hover\:bg-brand-100:hover { background-color: #2b4f76; } .dark-mode .hover\:bg-brand-200:hover { background-color: #33608f; } .dark-mode .hover\:bg-red-50:hover { background-color: #52282c; } .dark-mode .hover\:bg-red-100:hover { background-color: #613036; } .dark-mode .hover\:bg-orange-50:hover { background-color: #513418; } .dark-mode .hover\:bg-orange-100:hover { background-color: #613f1e; } .dark-mode .hover\:bg-orange-200:hover { background-color: #714b24; } .dark-mode .hover\:bg-amber-50:hover { background-color: #513b18; } .dark-mode .hover\:bg-amber-100:hover { background-color: #61481e; } .dark-mode .hover\:bg-emerald-50:hover { background-color: #17453a; } .dark-mode .group:hover .group-hover\:bg-brand-50 { background-color: #24405f; } /* A hover-szövegszínek is világosodjanak, ne sötétedjenek */ .dark-mode .hover\:text-slate-600:hover { color: #e0e5ed; } .dark-mode .hover\:text-slate-700:hover { color: #eef1f6; } .dark-mode .hover\:text-slate-900:hover { color: #ffffff; } /* A slate-800/900 változót nem cseréljük (kell a modális háttérnek), de SZÖVEGKÉNT világosnak kell lennie */ .dark-mode .text-slate-800 { color: #e8edf4; } .dark-mode .text-slate-900 { color: #f3f6fa; } /* --- Csevegőbuborék --- */ .dark-mode .chat-bubble-other { background-color: #333c4b; border-color: #414c5e; color: #e0e5ed; } /* --- Űrlapmezők --- */ .dark-mode input, .dark-mode textarea, .dark-mode select { color: #e8edf4; caret-color: #7cb0ff; } .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: #7b8497; } .dark-mode option { background-color: #2a3240; color: #e8edf4; } /* AUTOMATIKUS KITÖLTÉS (a képen látott olajzöld mezők oka) A Chrome a mentett jelszóval kitöltött mezőre saját, halvány sárga hátteret rak, amit a background-color NEM ír felül. Sötét módban (color-scheme: dark) ebből lesz a piszkos olajzöld szín. Az egyetlen megbízható megoldás a belső árnyék: ez kifesti a mező teljes felületét. */ .dark-mode input:-webkit-autofill, .dark-mode input:-webkit-autofill:hover, .dark-mode input:-webkit-autofill:focus, .dark-mode input:-webkit-autofill:active, .dark-mode textarea:-webkit-autofill, .dark-mode select:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px #1b212b !important; box-shadow: inset 0 0 0 1000px #1b212b !important; -webkit-text-fill-color: #e8edf4 !important; caret-color: #7cb0ff; transition: background-color 9999s ease-out 0s; } /* --- Árnyékok: sötét háttéren erősebb, hogy elváljanak a lapok --- */ .dark-mode .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .dark-mode .shadow, .dark-mode .shadow-md { box-shadow: 0 4px 10px rgba(0, 0, 0, .5); } .dark-mode .shadow-lg, .dark-mode .shadow-xl, .dark-mode .shadow-2xl { box-shadow: 0 12px 32px rgba(0, 0, 0, .6); } /* --- Görgetősáv --- */ .dark-mode ::-webkit-scrollbar-thumb { background: #49535f; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #5d6878; } /* --- Betöltési képernyő (index.html) --- */ .dark-mode #splash h1 { color: #f3f6fa; } .dark-mode #splash p { color: #b3bac8; } .dark-mode .spinner { border-color: #343d4c; border-top-color: #7cb0ff; } .dark-mode #load-error { background: #473619; border-color: #6b5225; color: #fcd34d; } /* --- Képek: a sötét módban a nagyon világos logók ne vakítsanak --- */ .dark-mode img[src$="icon-512.png"] { filter: brightness(.95); } /* ============================================================ 5. A HIÁNYZÓ style.css PÓTLÁSA Az app.js több olyan saját osztályt használ, amihez SEHOL nincs szabály: sem a tailwind.css-ben, sem az index.html-ben. Ezek a style.css fájlban lettek volna, amit viszont az index.html soha nem töltött be. Emiatt ezek az osztályok egyszerűen nem csinálnak semmit. A legfeltűnőbb a .tab-strip: 9 helyen fordul elő, és ez adná a füleknek a vízszintes elrendezést. Nélküle a gombok egyszerű blokk-elemként egymás ALÁ kerülnek – ezért lett minden fülsáv oszlopos. ============================================================ */ /* --- Fülsáv: vízszintes, mobilon oldalra görgethető --- */ .tab-strip { display: flex; align-items: center; gap: .25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .tab-strip::-webkit-scrollbar { display: none; } .tab-strip > * { flex: 0 0 auto; } /* --- Betöltési helyőrző (skeleton) --- Csak méretosztályokat kapott (h-9 w-48), háttér nélkül láthatatlan volt. */ .skeleton { display: block; border-radius: .75rem; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%); background-size: 400% 100%; animation: uo-shimmer 1.4s ease infinite; } .dark-mode .skeleton { background: linear-gradient(90deg, #2a3240 25%, #343d4c 37%, #2a3240 63%); background-size: 400% 100%; } @keyframes uo-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --- Információs doboz --- */ .info-box { background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8; } .dark-mode .info-box { background: #213247; border-color: #33506f; color: #9ec5ff; } /* --- Kiemelt említés és címke a szövegekben --- */ .hl-at, .hl-hash { color: #2563eb; font-weight: 600; } .dark-mode .hl-at, .dark-mode .hl-hash { color: #7cb0ff; } /* --- Kártyaemelés egérrel --- */ .lift { transition: transform .18s ease, box-shadow .18s ease; } .lift:hover { transform: translateY(-2px); } /* --- Animációk (a bejelentkező képernyő úszó foltjai stb.) --- */ @keyframes uo-float-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -28px) scale(1.08); } } @keyframes uo-soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } @keyframes uo-card-glow { 0%, 100% { box-shadow: 0 12px 32px rgba(37, 99, 235, .28); } 50% { box-shadow: 0 12px 44px rgba(37, 99, 235, .48); } } .animate-float-orb { animation: uo-float-orb 14s ease-in-out infinite; } .animate-float-orb-delayed { animation: uo-float-orb 17s ease-in-out infinite; animation-delay: 2.5s; } .animate-float-orb-slow { animation: uo-float-orb 22s ease-in-out infinite; animation-delay: 1s; } .animate-blob { animation: uo-float-orb 18s ease-in-out infinite; } .animate-soft-pulse { animation: uo-soft-pulse 2.6s ease-in-out infinite; } .animate-card-glow { animation: uo-card-glow 3.5s ease-in-out infinite; } .animation-delay-2000 { animation-delay: 2s; } /* --- "Böngészés vendégként" gomb --- A wrapperen lévő animate-float-icon szándékosan NEM mozgat semmit. Bármilyen elmozdulás vagy külső fény átlóg a fölötte lévő kártyára, mert a gomb és a kártya között mindössze 24 képpont a hely. */ .animate-float-icon { animation: none; } /* Helyette egy fényvillanás fut végig a gombon. Ez a gomb SAJÁT felületén belül marad (overflow: hidden vágja), tehát semmilyen körülmények között nem érhet hozzá más elemhez. */ .guest-btn-custom { position: relative; overflow: hidden; } .guest-btn-custom > * { position: relative; z-index: 1; } .guest-btn-custom::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(59, 130, 246, .30), transparent); transform: skewX(-20deg); pointer-events: none; animation: uo-guest-sheen 4.5s ease-in-out infinite; } .dark-mode .guest-btn-custom::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); } @keyframes uo-guest-sheen { 0% { left: -60%; } 35% { left: 130%; } 100% { left: 130%; } } /* Egérrel fölé húzva álljon meg, ne zavarjon kattintás közben */ .guest-btn-custom:hover::after { animation: none; opacity: 0; } /* Csökkentett mozgás igénylése esetén állítsuk le az animációkat */ @media (prefers-reduced-motion: reduce) { .animate-float-orb, .animate-float-orb-delayed, .animate-float-orb-slow, .animate-blob, .animate-float-icon, .animate-soft-pulse, .animate-card-glow, .skeleton { animation: none; } .guest-btn-custom::after { animation: none; opacity: 0; } } /* ============================================================ 6. DISCORD GOMB ============================================================ */ .uo-discord { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; padding: .75rem 1rem; border-radius: .75rem; background: #5865f2; color: #fff; font-weight: 700; font-size: .875rem; line-height: 1.2; border: 0; cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .15s ease; } .uo-discord:hover { background: #4752c4; } .uo-discord:active { transform: scale(.98); } .uo-discord i { font-size: 1.05rem; } /* Nagyobb, kártyás változat (beállítások oldal, mobil menü) */ .uo-discord-card { display: flex; align-items: center; width: 100%; padding: 1rem; border-radius: 1rem; background: #5865f2; color: #fff; text-align: left; border: 0; cursor: pointer; text-decoration: none; transition: background-color .15s ease; } .uo-discord-card:hover { background: #4752c4; } .uo-discord-card .uo-discord-ico { width: 3rem; height: 3rem; border-radius: .75rem; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-right: 1rem; flex: 0 0 auto; } .uo-discord-card .uo-discord-title { font-weight: 700; font-size: 1rem; } .uo-discord-card .uo-discord-sub { font-size: .75rem; opacity: .85; margin-top: .125rem; }