/* ============================================================ THEME SYSTEM - 8 préset, [data-theme="x"] attribútum -en Minden változó mindegyik témában létezik (visszafelé-kompatibilis) ============================================================ */ /* ----- DARK (alapértelmezett) ----- */ :root, [data-theme="dark"] { --bg-primary: #0f1115; --bg-secondary: #181b22; --bg-tertiary: #1f232c; --text-primary: #e7e9ee; --text-secondary: #9aa1ac; --border-color: #2a2f3a; --input-bg: #1f232c; --input-border: #2a2f3a; --input-focus: #6366f1; --shadow-color: rgba(0, 0, 0, 0.5); --success-bg: #132d22; --success-text: #6ee7b7; --success-border: #1e5340; --error-bg: #3a1a1a; --error-text: #fca5a5; --error-border: #6a2f2f; --info-bg: #16233a; --info-text: #93c5fd; --info-border: #2f4a6a; --btn-primary: #6366f1; --btn-primary-hover: #4f52e4; --btn-secondary: #475569; --btn-secondary-hover: #334155; --btn-success: #10b981; --btn-success-hover: #059669; --btn-danger: #ef4444; --btn-danger-hover: #dc2626; --examples-bg: #181b22; --examples-border: #6366f1; --examples-code-bg: #1f232c; /* Új (preview) változók */ --accent: #6366f1; --accent-2: #8b5cf6; --accent-glow: rgba(99, 102, 241, 0.45); --input-accent: #3b82f6; --output-accent: #10b981; --success-glow: rgba(16, 185, 129, 0.4); } /* ----- LIGHT ----- */ [data-theme="light"] { --bg-primary: #f7f8fb; --bg-secondary: #ffffff; --bg-tertiary: #eef1f6; --text-primary: #1a1d24; --text-secondary: #5a6270; --border-color: #dde2ea; --input-bg: #ffffff; --input-border: #dde2ea; --input-focus: #6366f1; --shadow-color: rgba(0, 0, 0, 0.08); --success-bg: #d1fae5; --success-text: #065f46; --success-border: #a7f3d0; --error-bg: #fee2e2; --error-text: #991b1b; --error-border: #fecaca; --info-bg: #dbeafe; --info-text: #1e40af; --info-border: #bfdbfe; --btn-primary: #6366f1; --btn-primary-hover: #4f46e5; --btn-secondary: #6b7280; --btn-secondary-hover: #4b5563; --btn-success: #10b981; --btn-success-hover: #059669; --btn-danger: #ef4444; --btn-danger-hover: #dc2626; --examples-bg: #eef1f6; --examples-border: #6366f1; --examples-code-bg: #e1e7ef; --accent: #6366f1; --accent-2: #8b5cf6; --accent-glow: rgba(99, 102, 241, 0.25); --input-accent: #3b82f6; --output-accent: #10b981; --success-glow: rgba(16, 185, 129, 0.3); } /* ----- CYBER (neon) ----- */ [data-theme="cyber"] { --bg-primary: #06070e; --bg-secondary: #0d1020; --bg-tertiary: #141833; --text-primary: #d0f4ff; --text-secondary: #6a9bbb; --border-color: #1f2a4a; --input-bg: #141833; --input-border: #1f2a4a; --input-focus: #00ffd1; --shadow-color: rgba(0, 255, 209, 0.25); --success-bg: #0b2a24; --success-text: #00ffaa; --success-border: #1b5546; --error-bg: #3a0f1e; --error-text: #ff3860; --error-border: #6a1f30; --info-bg: #0b2435; --info-text: #00bfff; --info-border: #1b4a6a; --btn-primary: #00ffd1; --btn-primary-hover: #00cca8; --btn-secondary: #ff00e5; --btn-secondary-hover: #c400b5; --btn-success: #00ffaa; --btn-success-hover: #00cc88; --btn-danger: #ff3860; --btn-danger-hover: #cc2d4d; --examples-bg: #0d1020; --examples-border: #00ffd1; --examples-code-bg: #141833; --accent: #00ffd1; --accent-2: #ff00e5; --accent-glow: rgba(0, 255, 209, 0.55); --input-accent: #00bfff; --output-accent: #00ffd1; --success-glow: rgba(0, 255, 170, 0.5); } /* ----- SOLARIZED DARK ----- */ [data-theme="solarized"] { --bg-primary: #002b36; --bg-secondary: #073642; --bg-tertiary: #0c434f; --text-primary: #eee8d5; --text-secondary: #93a1a1; --border-color: #164654; --input-bg: #0c434f; --input-border: #164654; --input-focus: #268bd2; --shadow-color: rgba(0, 0, 0, 0.45); --success-bg: #0d3a2e; --success-text: #859900; --success-border: #1e5340; --error-bg: #3a1a1a; --error-text: #dc322f; --error-border: #6a2f2f; --info-bg: #0b2c3e; --info-text: #268bd2; --info-border: #1b4a6a; --btn-primary: #268bd2; --btn-primary-hover: #1e6fa8; --btn-secondary: #6c71c4; --btn-secondary-hover: #585da0; --btn-success: #859900; --btn-success-hover: #6b7a00; --btn-danger: #dc322f; --btn-danger-hover: #b02826; --examples-bg: #073642; --examples-border: #268bd2; --examples-code-bg: #0c434f; --accent: #268bd2; --accent-2: #6c71c4; --accent-glow: rgba(38, 139, 210, 0.45); --input-accent: #268bd2; --output-accent: #859900; --success-glow: rgba(133, 153, 0, 0.4); } /* ----- NORD ----- */ [data-theme="nord"] { --bg-primary: #2e3440; --bg-secondary: #3b4252; --bg-tertiary: #434c5e; --text-primary: #eceff4; --text-secondary: #9ba2b0; --border-color: #4c566a; --input-bg: #434c5e; --input-border: #4c566a; --input-focus: #88c0d0; --shadow-color: rgba(0, 0, 0, 0.4); --success-bg: #3a4a3a; --success-text: #a3be8c; --success-border: #5a6a5a; --error-bg: #4a3a3a; --error-text: #bf616a; --error-border: #6a4a4a; --info-bg: #3a4050; --info-text: #88c0d0; --info-border: #4c566a; --btn-primary: #88c0d0; --btn-primary-hover: #6ca3b3; --btn-secondary: #81a1c1; --btn-secondary-hover: #6789a8; --btn-success: #a3be8c; --btn-success-hover: #8ba573; --btn-danger: #bf616a; --btn-danger-hover: #a54b55; --examples-bg: #3b4252; --examples-border: #88c0d0; --examples-code-bg: #434c5e; --accent: #88c0d0; --accent-2: #81a1c1; --accent-glow: rgba(136, 192, 208, 0.4); --input-accent: #81a1c1; --output-accent: #a3be8c; --success-glow: rgba(163, 190, 140, 0.4); } /* ----- DRACULA ----- */ [data-theme="dracula"] { --bg-primary: #282a36; --bg-secondary: #1e1f29; --bg-tertiary: #343746; --text-primary: #f8f8f2; --text-secondary: #8d8fa1; --border-color: #44475a; --input-bg: #343746; --input-border: #44475a; --input-focus: #bd93f9; --shadow-color: rgba(0, 0, 0, 0.5); --success-bg: #1a3a2a; --success-text: #50fa7b; --success-border: #2e5a4a; --error-bg: #3a1f2a; --error-text: #ff5555; --error-border: #5a2f3a; --info-bg: #1f2f3a; --info-text: #8be9fd; --info-border: #2e4a5a; --btn-primary: #bd93f9; --btn-primary-hover: #a07ce0; --btn-secondary: #ff79c6; --btn-secondary-hover: #e061af; --btn-success: #50fa7b; --btn-success-hover: #3fc964; --btn-danger: #ff5555; --btn-danger-hover: #e04040; --examples-bg: #1e1f29; --examples-border: #bd93f9; --examples-code-bg: #343746; --accent: #bd93f9; --accent-2: #ff79c6; --accent-glow: rgba(189, 147, 249, 0.5); --input-accent: #8be9fd; --output-accent: #50fa7b; --success-glow: rgba(80, 250, 123, 0.45); } /* ----- SUNSET (meleg narancs/piros) ----- */ [data-theme="sunset"] { --bg-primary: #1a0f0a; --bg-secondary: #2a1812; --bg-tertiary: #35221a; --text-primary: #fff4e6; --text-secondary: #c4a894; --border-color: #4a2f24; --input-bg: #35221a; --input-border: #4a2f24; --input-focus: #f97316; --shadow-color: rgba(249, 115, 22, 0.2); --success-bg: #1f3a0f; --success-text: #84cc16; --success-border: #3a5520; --error-bg: #3a1f1f; --error-text: #ef4444; --error-border: #6a2f2f; --info-bg: #2a1f3a; --info-text: #fbbf24; --info-border: #4a3a6a; --btn-primary: #f97316; --btn-primary-hover: #d95f08; --btn-secondary: #ec4899; --btn-secondary-hover: #c12e7a; --btn-success: #84cc16; --btn-success-hover: #65a30d; --btn-danger: #ef4444; --btn-danger-hover: #dc2626; --examples-bg: #2a1812; --examples-border: #f97316; --examples-code-bg: #35221a; --accent: #f97316; --accent-2: #ec4899; --accent-glow: rgba(249, 115, 22, 0.5); --input-accent: #fb923c; --output-accent: #fbbf24; --success-glow: rgba(132, 204, 22, 0.4); } /* ----- FOREST (zöld/természet) ----- */ [data-theme="forest"] { --bg-primary: #0d1b0d; --bg-secondary: #142414; --bg-tertiary: #1a301a; --text-primary: #dbe9d0; --text-secondary: #8aa876; --border-color: #284028; --input-bg: #1a301a; --input-border: #284028; --input-focus: #22c55e; --shadow-color: rgba(34, 197, 94, 0.2); --success-bg: #1a3a2a; --success-text: #22c55e; --success-border: #2e5a40; --error-bg: #3a1f1f; --error-text: #f87171; --error-border: #6a3a3a; --info-bg: #1f3a3a; --info-text: #2dd4bf; --info-border: #2e5a5a; --btn-primary: #22c55e; --btn-primary-hover: #16a34a; --btn-secondary: #14b8a6; --btn-secondary-hover: #0d9488; --btn-success: #4ade80; --btn-success-hover: #22c55e; --btn-danger: #f87171; --btn-danger-hover: #ef4444; --examples-bg: #142414; --examples-border: #22c55e; --examples-code-bg: #1a301a; --accent: #22c55e; --accent-2: #14b8a6; --accent-glow: rgba(34, 197, 94, 0.45); --input-accent: #4ade80; --output-accent: #2dd4bf; --success-glow: rgba(34, 197, 94, 0.4); } /* ----- GRADIENT (modern, világos, széles közönség) ----- */ [data-theme="gradient"] { --bg-primary: #f0f4f8; --bg-secondary: rgba(255, 255, 255, 0.88); --bg-tertiary: rgba(255, 255, 255, 0.7); --text-primary: #0f172a; --text-secondary: #334155; --border-color: rgba(148, 163, 184, 0.35); --input-bg: rgba(255, 255, 255, 0.92); --input-border: rgba(148, 163, 184, 0.45); --input-focus: #0d9488; --shadow-color: rgba(0, 0, 0, 0.06); --success-bg: #d1fae5; --success-text: #065f46; --success-border: #a7f3d0; --error-bg: #fee2e2; --error-text: #991b1b; --error-border: #fecaca; --info-bg: #dbeafe; --info-text: #1e40af; --info-border: #bfdbfe; --btn-primary: #0d9488; --btn-primary-hover: #0f766e; --btn-secondary: #64748b; --btn-secondary-hover: #475569; --btn-success: #10b981; --btn-success-hover: #059669; --btn-danger: #ef4444; --btn-danger-hover: #dc2626; --examples-bg: rgba(255,255,255,0.5); --examples-border: #0d9488; --examples-code-bg: rgba(255,255,255,0.7); --accent: #0d9488; --accent-2: #6366f1; --accent-glow: rgba(13, 148, 136, 0.25); --input-accent: #0ea5e9; --output-accent: #10b981; --success-glow: rgba(16, 185, 129, 0.25); } /* Gradient téma háttér — a body-ra kerül, nem a CSS változókra */ [data-theme="gradient"] body, html[data-theme="gradient"] body { background: linear-gradient(135deg, #fecdd3 0%, #e0f2fe 40%, #ccfbf1 70%, #d9f99d 100%) !important; background-attachment: fixed !important; min-height: 100vh; } /* Gradient témában a card-ok üveg-hatásúak (glassmorphism) */ [data-theme="gradient"] .io-card, [data-theme="gradient"] .mappings-panel, [data-theme="gradient"] .topbar, [data-theme="gradient"] .privacy-notice, [data-theme="gradient"] .hero-intro, [data-theme="gradient"] #statsSection, [data-theme="gradient"] .pf-info-grid, [data-theme="gradient"] .pf-stat-card, [data-theme="gradient"] .pf-badges-box, [data-theme="gradient"] .pf-avatar-box, [data-theme="gradient"] .pf-pwd-box { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(148, 163, 184, 0.25) !important; } [data-theme="gradient"] .profile-modal-content { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="gradient"] .theme-dropdown { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="gradient"] .theme-item { color: #0f172a !important; } /* ----- Backward compat: body.light-mode → data-theme="light" ----- */ body.light-mode { --bg-primary: #f7f8fb; --bg-secondary: #ffffff; --bg-tertiary: #eef1f6; --text-primary: #1a1d24; --text-secondary: #5a6270; --border-color: #dde2ea; --input-bg: #ffffff; --input-border: #dde2ea; --input-focus: #6366f1; --shadow-color: rgba(0, 0, 0, 0.08); --success-bg: #d1fae5; --success-text: #065f46; --success-border: #a7f3d0; --error-bg: #fee2e2; --error-text: #991b1b; --error-border: #fecaca; --info-bg: #dbeafe; --info-text: #1e40af; --info-border: #bfdbfe; --examples-bg: #eef1f6; --examples-border: #6366f1; --examples-code-bg: #e1e7ef; --accent-glow: rgba(99, 102, 241, 0.25); --success-glow: rgba(16, 185, 129, 0.3); } * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; box-sizing: border-box; } html, body { overflow-x: hidden; max-width: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: var(--bg-primary); color: var(--text-primary); -webkit-text-size-adjust: 100%; } @media (max-width: 600px) { body { padding: 12px; } .container { padding: 16px !important; } } img, video, iframe, table { max-width: 100%; height: auto; } pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; overflow-wrap: anywhere; } .container { background: var(--bg-secondary); border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px var(--shadow-color); position: relative; } /* Theme toggle button (legacy + új picker egyaránt használja) */ .theme-toggle { position: fixed; top: 20px; right: 20px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; z-index: 1000; box-shadow: 0 2px 8px var(--shadow-color); } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 12px var(--shadow-color); } /* Language selector */ .language-selector { position: fixed; top: 80px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; } .lang-btn { background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; transition: all 0.2s; box-shadow: 0 2px 6px var(--shadow-color); } .lang-btn:hover { transform: scale(1.1); box-shadow: 0 3px 10px var(--shadow-color); } .lang-btn.active { border-color: var(--btn-primary); box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.3); } /* BUG-8 fix: Mobile language selector - collapsible + scrollable (12 nyelv elfér) */ @media (max-width: 600px) { .language-selector { position: fixed; top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 8px; flex-direction: column; flex-wrap: nowrap; gap: 4px; width: 44px; max-width: 44px; max-height: 44px; overflow: hidden; background: var(--bg-secondary); padding: 5px; border-radius: 12px; box-shadow: 0 2px 10px var(--shadow-color); transition: max-height 0.3s ease; z-index: 1001; -webkit-overflow-scrolling: touch; } .language-selector:hover, .language-selector:focus-within, .language-selector.expanded { max-height: min(70vh, 420px); overflow-y: auto; } .lang-btn { width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; } } h1 { color: var(--text-primary); margin-bottom: 10px; } .title-row { position: relative; min-height: 60px; padding-right: 12px; } .title-row h1 { margin-right: 180px; /* hely a chipnek */ } .user-chip, .user-chip-login { position: absolute; top: 0; right: 0; z-index: 5; } .user-chip { display: inline-flex; align-items: stretch; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px; gap: 4px; box-shadow: 0 2px 8px var(--shadow-color); max-width: calc(100% - 10px); } @media (max-width: 900px) { .title-row { min-height: 0; padding-top: 60px; } .title-row h1 { margin-right: 0; } } .user-chip-main { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: transparent; border: none; border-radius: 999px; cursor: pointer; color: var(--text-primary); font: inherit; text-align: left; min-width: 0; } .user-chip-main:hover { background: var(--bg-tertiary); } .user-chip-avatar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--btn-primary) 0%, #4f46e5 100%); color: #fff; font-size: 26px; flex-shrink: 0; box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4), inset 0 0 0 2px rgba(255,255,255,0.12); transition: transform 0.25s ease; } .user-chip-main:hover .user-chip-avatar { transform: scale(1.06) rotate(-3deg); } .user-chip-info { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; } .user-chip-name { font-size: 13px; font-weight: 600; color: var(--text-primary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip-meta { display: inline-flex; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--text-secondary); align-items: center; } .user-chip-points { background: var(--bg-tertiary); padding: 1px 7px; border-radius: 999px; color: var(--text-primary); font-weight: 500; } .user-chip-badges .badge-pill { display: inline-block; background: rgba(245, 158, 11, 0.25); color: #f59e0b; padding: 3px 10px; border-radius: 999px; margin-left: 4px; font-weight: 700; font-size: 13px; } .user-chip-points { font-size: 13px; padding: 3px 10px; font-weight: 600; } .user-chip-meta { font-size: 12px; gap: 4px; margin-top: 3px; } .user-chip-logout { display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; height: 34px; border: none; background: var(--btn-danger); color: #fff; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; } .user-chip-logout:hover { background: var(--btn-danger-hover); } .user-chip-login { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: linear-gradient(135deg, var(--btn-primary) 0%, #4f46e5 100%); color: #fff; border: none; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); flex-shrink: 0; } .user-chip-login:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45); transform: translateY(-1px); } .user-chip-avatar { overflow: hidden; position: relative; } .user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 600px) { .user-chip-name { max-width: 120px; } .user-chip-avatar { width: 28px; height: 28px; font-size: 14px; } .user-chip-logout { height: 28px; padding: 0 10px; font-size: 12px; } .user-chip-logout .lbl { display: none; } } .subtitle { color: var(--text-secondary); margin-bottom: 20px; } .hero-description { background: rgba(99, 102, 241, 0.1); border-left: 4px solid var(--accent); padding: 20px 25px; margin: 20px auto 30px; border-radius: 8px; max-width: 800px; } .hero-description p { margin: 10px 0; line-height: 1.6; color: var(--text-primary); } .hero-description p:first-child { margin-top: 0; } .hero-description p:last-child { margin-bottom: 0; }