/* PolyOS — közös arculat. Igazodik a Feladatok (Omnio) apphoz: tiszta FEHÉR felület, LILA #7C3AED elsődleges szín, lágy lila árnyalatok, lekerekített fehér kártyák, finom árnyék. A pasztell hangulat finom háttér-leheletként. Modulonként más akcentus: a váltja. Re-skin = egy hely. */ :root { --panel: #ffffff; --panel-2: #fbfaff; --border: #ececf3; --hairline: #eef0f4; --text: #1f2433; --muted: #6b7280; --accent: #7c3aed; /* Omnio elsődleges lila */ --accent-weak: #f3f0ff; /* aktív/kiemelt háttér */ --accent-strong: #6d28d9; --accent-2: #22c55e; /* élő / siker zöld (AKTÍV pötty) */ --warn: #c9820a; --warn-weak: #fff3dd; --danger: #e0455e; --danger-weak: #fdeaee; --radius: 16px; --shadow: 0 1px 2px rgba(28, 24, 54, 0.04), 0 8px 24px rgba(28, 24, 54, 0.06); /* finom, halvány pasztell-leheletek a fehér háttéren (nem tolakodó) */ --page-grad: radial-gradient(900px 500px at 88% -8%, #f3ecff 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #fdeef6 0, transparent 55%), #f8f7fc; } /* ---- Paletták (modulonként eltérő akcentus, közös fehér alap) -------------- */ body.pal-violet { --accent:#7c3aed; --accent-weak:#f3f0ff; --accent-strong:#6d28d9; --page-grad: radial-gradient(900px 500px at 88% -8%, #f1e9ff 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #f6eefe 0, transparent 55%), #f8f6fd; } body.pal-pink { --accent:#db2777; --accent-weak:#fdeef6; --accent-strong:#be185d; --page-grad: radial-gradient(900px 500px at 88% -8%, #fde7f1 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #fdeef6 0, transparent 55%), #fdf8fb; } body.pal-mint { --accent:#0d9488; --accent-weak:#e6f7f4; --accent-strong:#0f766e; --page-grad: radial-gradient(900px 500px at 88% -8%, #e3f6f1 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #eaf4ff 0, transparent 55%), #f5fbfa; } body.pal-blue { --accent:#2563eb; --accent-weak:#eaf1ff; --accent-strong:#1d4ed8; --page-grad: radial-gradient(900px 500px at 88% -8%, #e7f0ff 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #f3ecff 0, transparent 55%), #f6f8fe; } body.pal-amber { --accent:#d97706; --accent-weak:#fff3dd; --accent-strong:#b45309; --page-grad: radial-gradient(900px 500px at 88% -8%, #fff0d6 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #fdeef6 0, transparent 55%), #fdfaf4; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; color: var(--text); min-height: 100vh; background: var(--page-grad) fixed; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; } header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .brand { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; } .brand span { color: var(--accent); } .subtitle { color: var(--muted); font-size: 13px; } .back { color: var(--muted); text-decoration: none; font-size: 13px; } .back:hover { color: var(--accent); } .source-pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); margin-left: 8px; background: #fff; } .source-pill.supabase, .source-pill.omnio { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; } .source-pill.mock { color: var(--warn); border-color: #f3dcab; background: var(--warn-weak); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; box-shadow: var(--shadow); } h2 { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; } /* Lila gradient hero-sáv (mint a "Szia, Mária!" kártya) */ .hero { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-strong) 100%); color: #fff; border: none; } .hero h2, .hero .muted { color: rgba(255,255,255,0.85); } /* Űrlap */ .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .form-grid .full { grid-column: 1 / -1; } label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 500; } input, select, textarea { width: 100%; background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } input:disabled { background: #f4f4f8; color: var(--muted); } textarea { resize: vertical; min-height: 44px; } .actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; } button { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease; } button:hover { filter: brightness(1.07); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.55; cursor: default; } button.ghost { background: #fff; color: var(--muted); border: 1px solid var(--border); } button.ghost:hover { color: var(--text); border-color: var(--accent); filter: none; } .hint { font-size: 12px; color: var(--muted); } /* Táblázat */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; } th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 600; } tbody tr:hover { background: var(--accent-weak); } td .muted, .muted { color: var(--muted); } .badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); background: #f7f7fb; font-weight: 600; } .eid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--accent); } .link { color: var(--accent); text-decoration: none; font-weight: 600; } .link:hover { text-decoration: underline; } .del { background: #fff; color: var(--danger); border: 1px solid var(--danger-weak); padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 8px; } .del:hover { background: var(--danger-weak); filter: none; } .empty { color: var(--muted); padding: 20px 10px; text-align: center; } /* Szűrők */ .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .filters select { flex: 0 0 auto; width: auto; } /* Bannerek */ .banner { display: none; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; } .banner.err { background: var(--danger-weak); border: 1px solid #f6c9d2; color: #a01f37; } .banner.warn { background: var(--warn-weak); border: 1px solid #f3dcab; color: #8a5a00; } .banner.info { background: var(--accent-weak); border: 1px solid #ddd2fb; color: var(--accent-strong); } footer { margin-top: 36px; color: var(--muted); font-size: 12px; text-align: center; } /* ===== SÖTÉT NÉZET ===== A világos az alapértelmezett; ezt a theme.js kapcsolja a -kal. A változókat felülírjuk, és a beégetett világos felületeket (fehér input/badge/banner) is sötétre vesszük. */ html[data-theme="dark"] { --panel: #151a24; --panel-2: #1b2230; --border: #232c3d; --hairline: #222a38; --text: #e7ecf3; --muted: #93a0b4; --accent: #8b95ff; --accent-weak: #20243a; --accent-strong: #a9b0ff; --accent-2: #38d39f; --warn: #ffb454; --warn-weak: #3a2f12; --danger: #ff6b6b; --danger-weak: #3a1f23; --bg: #0b0e14; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.35); --page-grad: radial-gradient(900px 500px at 88% -8%, #16203a 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #1a1430 0, transparent 55%), #0b0e14; } :root { --bg: #f8f7fc; } /* A body.pal-* osztály saját (világos) --page-grad-ot ad — sötétben felül kell írni, különben sötét kártyák ülnek világos háttéren. A body-célzás erősebb, mint a body.pal-*. */ html[data-theme="dark"] body, html[data-theme="dark"] body[class*="pal-"] { --page-grad: radial-gradient(900px 500px at 88% -8%, #16203a 0, transparent 60%), radial-gradient(700px 480px at -6% 8%, #1a1430 0, transparent 55%), #0b0e14; } html[data-theme="dark"] .source-pill { background: #0e1320; } html[data-theme="dark"] .source-pill.supabase, html[data-theme="dark"] .source-pill.omnio { color: #4ade80; border-color: #1f4a3a; background: #0f2419; } html[data-theme="dark"] .source-pill.mock { background: var(--warn-weak); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0e1320; } html[data-theme="dark"] input:disabled { background: #11161f; } html[data-theme="dark"] button.ghost { background: transparent; } html[data-theme="dark"] .badge { background: #0e1320; } html[data-theme="dark"] .del { background: transparent; } html[data-theme="dark"] .banner.err { background: var(--danger-weak); border-color: #5a2a30; color: #ffb4b4; } html[data-theme="dark"] .banner.warn { background: var(--warn-weak); border-color: #4a3a1f; color: #ffd591; } html[data-theme="dark"] .banner.info { background: var(--accent-weak); border-color: #2a3a5a; color: #c7ccff; } /* Lebegő téma-kapcsoló (theme.js injektálja) */ #polyos-theme-btn { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 0; } #polyos-theme-btn:hover { filter: brightness(1.05); }