/* ============================================================ Lajkto · AI Atlas — vzhled (vychází z Lajkto Music) Témata se přepínají atributem data-theme na . Každé téma přemapuje barvy, komponenty pak dědí --bg/--text/akcenty. ============================================================ */ /* ---------- TÉMATA ---------- */ :root, [data-theme="dark"]{ --bg:#0b0c12; --panel:#14151f; --panel2:#1b1d2a; --stroke:#2a2c3c; --text:#eef0f7; --muted:#9aa0b5; --a1:#ff2bd6; --a2:#7a4dff; --a3:#00e7ff; --red:#ff2b68; --green:#22c98a; --glow:rgba(122,77,255,.18); } [data-theme="light"]{ --bg:#f4f5fb; --panel:#ffffff; --panel2:#eef0f7; --stroke:#d9dcea; --text:#181a26; --muted:#5b6076; --a1:#d61aa8; --a2:#6b3ff0; --a3:#0093a8; --red:#e0245e; --green:#12996a; --glow:rgba(107,63,240,.12); } [data-theme="midnight"]{ --bg:#070d1c; --panel:#0e1830; --panel2:#132244; --stroke:#22335c; --text:#e7edfb; --muted:#8fa0c4; --a1:#3ea6ff; --a2:#6d5cff; --a3:#22d3ee; --red:#ff5c7a; --green:#38d39f; --glow:rgba(62,166,255,.20); } [data-theme="purple"]{ --bg:#120a1f; --panel:#1c1030; --panel2:#271641; --stroke:#3a2560; --text:#f2e9ff; --muted:#b39fd0; --a1:#c04bff; --a2:#8b5cff; --a3:#ff5cc8; --red:#ff5c7a; --green:#4bd6a0; --glow:rgba(192,75,255,.20); } [data-theme="emerald"]{ --bg:#06140f; --panel:#0d2019; --panel2:#123026; --stroke:#1e4a3a; --text:#e6fff4; --muted:#8ec4b0; --a1:#25d98a; --a2:#12b3a6; --a3:#7be86a; --red:#ff6b6b; --green:#25d98a; --glow:rgba(37,217,138,.18); } [data-theme="ember"]{ --bg:#160b06; --panel:#241209; --panel2:#331b0d; --stroke:#4d2c14; --text:#fff1e6; --muted:#d0a98e; --a1:#ff7a2b; --a2:#ff4d6d; --a3:#ffb02b; --red:#ff4d4d; --green:#4bd6a0; --glow:rgba(255,122,43,.20); } [data-theme="rose"]{ --bg:#1a0d12; --panel:#28141c; --panel2:#371c27; --stroke:#4f2937; --text:#ffeaf1; --muted:#d3a4b6; --a1:#ff4d94; --a2:#c04bff; --a3:#ff9ec4; --red:#ff4d6d; --green:#4bd6a0; --glow:rgba(255,77,148,.18); } [data-theme="mono"]{ --bg:#000000; --panel:#0f0f0f; --panel2:#181818; --stroke:#333333; --text:#ffffff; --muted:#b9b9b9; --a1:#ffffff; --a2:#cfcfcf; --a3:#9a9a9a; --red:#ff5555; --green:#55d38a; --glow:rgba(255,255,255,.08); } /* aliasy pro zpětnou kompatibilitu s komponentami */ :root{ --pink:var(--a1); --violet:var(--a2); --cyan:var(--a3); --radius:16px; --shadow:0 18px 50px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0} body{ background:radial-gradient(1200px 600px at 80% -10%,var(--glow),transparent),var(--bg); color:var(--text); font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; min-height:100vh; } a{color:inherit;text-decoration:none} .muted{color:var(--muted)} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em} /* ---------- hlavička ---------- */ .top{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);z-index:400;flex-wrap:wrap} .brand{font-weight:900;font-size:18px;background:linear-gradient(135deg,var(--a1),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent} .topnav{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap} .topnav a{color:var(--muted);font-weight:700} .topnav a:hover{color:var(--text)} .who{color:var(--muted);font-size:13px} .theme-pick{display:flex;align-items:center;gap:6px} .theme-pick label{font-size:12px} .theme-pick select{background:var(--panel2);color:var(--text);border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;font:inherit;font-size:13px} .wrap{max-width:1040px;margin:0 auto;padding:22px 20px 60px} .foot{max-width:1040px;margin:0 auto;padding:22px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--stroke)} .foot-cta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} h1{font-size:24px;margin:0 0 4px} h2{font-size:18px;margin:0 0 12px} h3{margin:0 0 6px} .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .back{display:inline-block;margin-bottom:10px;font-size:13px;color:var(--a3)} /* ---------- tlačítka ---------- */ .btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--stroke);background:var(--panel2);color:var(--text);border-radius:999px;padding:9px 16px;font-weight:800;cursor:pointer;font-size:14px;transition:transform .1s,border-color .1s} .btn:hover{border-color:var(--a2);transform:translateY(-1px)} .btn.primary{background:linear-gradient(135deg,var(--a1),var(--a2));border:0;color:#fff} [data-theme="light"] .btn.primary,[data-theme="mono"] .btn.primary{color:#fff} .btn.sm{padding:6px 12px;font-size:13px} .btn.big{width:100%;justify-content:center;padding:13px;font-size:15px;margin-top:8px} .btn.big2{padding:12px 22px;font-size:15px} .btn.danger{background:transparent;border-color:color-mix(in srgb,var(--red) 55%,transparent);color:var(--red)} .btn.yt{border-color:#ff4d4d55} .btn.ext{} .inline{display:inline} .pill{background:rgba(255,255,255,.18);border-radius:999px;padding:1px 9px;font-size:12px} [data-theme="light"] .pill{background:rgba(0,0,0,.1)} /* ---------- karty / formuláře ---------- */ .card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)} .form label{display:block;margin-bottom:12px;font-weight:700;font-size:13px;color:var(--text)} .form input,.form select,.form textarea{width:100%;margin-top:5px;background:color-mix(in srgb,var(--bg) 55%,var(--panel));border:1px solid var(--stroke);border-radius:10px;color:var(--text);padding:11px 12px;font:inherit} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--a2)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media(max-width:680px){.row2,.row3{grid-template-columns:1fr}} .alert{background:color-mix(in srgb,var(--red) 15%,transparent);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);color:var(--red);padding:10px 14px;border-radius:10px;margin-bottom:14px} .ok{background:color-mix(in srgb,var(--green) 15%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);color:var(--green);padding:10px 14px;border-radius:10px;margin-bottom:14px} .empty{background:var(--panel);border:1px dashed var(--stroke);border-radius:var(--radius);padding:34px;text-align:center;color:var(--muted)} .empty.sm{padding:16px} .tag{font-size:11px;font-weight:800;background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid var(--stroke);border-radius:999px;padding:2px 8px;color:var(--text)} .tag.ok-tag{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)} .tag.warn-tag{color:var(--a1);border-color:color-mix(in srgb,var(--a1) 45%,transparent)} .tag.tag-live{color:#fff;background:var(--red);border:0} /* ---------- vstupní stránka ---------- */ .hero{background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 18%,transparent),color-mix(in srgb,var(--a3) 14%,transparent)),var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:34px 26px;margin-bottom:20px;box-shadow:var(--shadow)} .hero h1{font-size:28px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px} .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} @media(max-width:820px){.cols{grid-template-columns:1fr}} .news-item{border-top:1px solid var(--stroke);padding:12px 0} .news-item:first-of-type{border-top:0} .news-head{display:flex;align-items:center;gap:10px;margin-bottom:2px} .news-head .date{font-size:12px} .event-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--stroke)} .event-item:first-of-type{border-top:0} .ev-ico{font-size:22px;flex:0 0 auto} .ev-body{flex:1;min-width:0} .ev-top{display:flex;align-items:center;gap:8px} .ev-note{font-size:13px;margin-top:2px} .artist-strip{display:flex;gap:12px;flex-wrap:wrap} .artist-chip{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--stroke);border-radius:14px;padding:14px 16px;min-width:120px;transition:transform .1s,border-color .1s} .artist-chip:hover{transform:translateY(-3px);border-color:var(--a2)} .chip-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--panel2),var(--bg));display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden} .chip-av img{width:100%;height:100%;object-fit:cover} .chip-name{font-weight:800} .chip-city{font-size:11px} /* ---------- mapa ---------- */ .seg{display:inline-flex;border:1px solid var(--stroke);border-radius:999px;overflow:hidden} .seg-btn{padding:8px 16px;font-weight:800;color:var(--muted)} .seg-btn.on{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff} .map{height:min(70vh,640px);border-radius:var(--radius);border:1px solid var(--stroke);overflow:hidden;box-shadow:var(--shadow)} .map-hint{margin-top:10px;font-size:12px} .pin-pop{text-align:center;min-width:150px} .pin-av{width:46px;height:46px;border-radius:50%;margin:0 auto 6px;background:#ddd;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden} .pin-av img{width:100%;height:100%;object-fit:cover} .pin-name{font-weight:900;font-size:15px;color:#111} .pin-city{font-size:12px;color:#555;margin-bottom:6px} .pin-go{display:inline-block;background:#7a4dff;color:#fff !important;border-radius:999px;padding:5px 12px;font-weight:800;font-size:13px} .leaflet-popup-content{margin:12px 14px} /* ---------- profil ---------- */ .profile{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)} .cover{height:180px;background:linear-gradient(135deg,var(--a2),var(--a3));background-size:cover;background-position:center} .profile-head{display:flex;align-items:flex-end;gap:16px;padding:0 22px 18px;margin-top:-40px;flex-wrap:wrap} .avatar-lg{width:96px;height:96px;border-radius:50%;border:4px solid var(--panel);background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;flex:0 0 auto} .avatar-lg img{width:100%;height:100%;object-fit:cover} .profile-id{flex:1;min-width:180px;padding-bottom:4px} .profile-id h1{display:flex;align-items:center;gap:8px} .verified{color:var(--a3);font-size:18px} .bio{white-space:pre-wrap;margin:0} .ext-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .ext-link{background:var(--panel2);border:1px solid var(--stroke);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px} .ext-link:hover{border-color:var(--a2)} .preview{border-top:1px solid var(--stroke);padding:12px 0} .preview:first-of-type{border-top:0} .sp-embed{border-radius:12px;margin-top:8px;display:block} .preview-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .album{background:var(--panel2);border:1px solid var(--stroke);border-radius:12px;overflow:hidden} .album-cover{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,var(--panel2),var(--bg))} .album-cover img{width:100%;height:100%;object-fit:cover} .album-meta{padding:10px;display:flex;flex-direction:column;gap:3px} .album-meta b{font-size:14px;line-height:1.2} .album-actions{display:flex;gap:6px;margin-top:8px} /* ---------- nástěnka ---------- */ .board-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .board-form textarea{width:100%;background:color-mix(in srgb,var(--bg) 55%,var(--panel));border:1px solid var(--stroke);border-radius:10px;color:var(--text);padding:11px;font:inherit} .board-form textarea:focus{outline:none;border-color:var(--a2)} .board-form button{align-self:flex-start} .board{display:flex;flex-direction:column;gap:10px} .msg{background:var(--panel2);border:1px solid var(--stroke);border-radius:12px;padding:12px 14px} .msg-head{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:4px} .msg-head .muted{font-size:12px} .msg-text{white-space:pre-wrap;word-break:break-word} .msg-del{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px} .msg-del:hover{color:var(--red)} .delform{margin-left:auto} /* ---------- admin ---------- */ .artist-admin{border:1px solid var(--stroke);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--panel2)} .aa-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .aa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .admin-list{margin-top:12px;display:flex;flex-direction:column;gap:6px} .admin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid var(--stroke);border-radius:10px;padding:8px 12px;font-size:14px} .pv-row{border-top:1px dashed var(--stroke);padding-top:10px;margin-top:6px} /* ============================================================ v1.1.0 — přehrávač ochutnávek, PWA spodní navigace, mobil ============================================================ */ .sp-slot{margin-top:8px;min-height:80px;border-radius:12px;overflow:hidden} .sp-slot iframe{border-radius:12px;display:block;width:100%!important;border:0} /* spodní navigace — jen na mobilu */ .bottom-nav{display:none} @media(max-width:720px){ .bottom-nav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:500; background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px); border-top:1px solid var(--stroke);padding:6px 4px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0} .bottom-nav a span{font-size:20px;line-height:1} .bottom-nav a:active{color:var(--text)} .wrap{padding-bottom:84px} /* v horní liště necháme jen akce (téma, login) — navigace je dole */ .topnav a:not(.btn){display:none} .top{padding:10px 14px;gap:10px} .brand{font-size:16px} .who{display:none} .theme-pick label{display:none} } /* obecné mobilní doladění */ @media(max-width:560px){ .wrap{padding-left:14px;padding-right:14px} h1{font-size:22px} .hero{padding:24px 18px} .hero h1{font-size:23px} .hero-cta{flex-direction:column} .hero-cta .btn{width:100%;justify-content:center} .btn{padding:11px 16px} /* větší dotykové plochy */ .btn.sm{padding:9px 13px} .card{padding:16px} .profile-head{margin-top:-32px} .avatar-lg{width:80px;height:80px;font-size:34px} .cover{height:140px} .map{height:64vh} .album-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .artist-chip{flex:1;min-width:calc(50% - 6px)} .seg{width:100%} .seg-btn{flex:1;text-align:center} .page-head{gap:10px} } /* v1.3.1: více interpretů v jednom městě */ .pin-city-head{font-weight:800;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)} .pin-person{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)} .pin-person:last-child{border-bottom:0} .pin-person-body{min-width:0;flex:1} .pin-person .pin-av{flex:0 0 42px;width:42px;height:42px} .brand{display:inline-flex;align-items:center;gap:8px} .pwa-install{background:linear-gradient(135deg,var(--a1),var(--a2));border:0;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,197,255,.20);font-weight:900} .pwa-install:hover{filter:brightness(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 30px rgba(0,197,255,.28)} .pwa-install.sm{padding:8px 14px;font-size:13px} .pin-pop{min-width:250px;text-align:left;max-height:390px;overflow-y:auto;padding-right:3px} .pin-city-head{position:sticky;top:0;z-index:2;background:var(--panel2);padding:7px 4px 9px;font-weight:900;border-bottom:1px solid rgba(255,255,255,.12)} .pin-person{display:flex!important;visibility:visible!important;opacity:1!important;min-height:58px} .leaflet-tooltip{font-weight:900;background:var(--panel2);color:var(--text);border-color:var(--stroke)} /* ---------- Můj Atlas / samoobslužná registrace ---------- */ .my-atlas-link{white-space:nowrap} .join-atlas-card{background:linear-gradient(135deg,color-mix(in srgb,var(--a3) 10%,var(--panel)),var(--panel))} .join-atlas-copy{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .join-atlas-copy h2{margin:7px 0 2px} .join-atlas-copy p{margin:0} .join-atlas-actions{display:flex;gap:9px;flex-wrap:wrap} .my-atlas-hero .tag{display:inline-flex;margin-bottom:9px} .self-register-note{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin:4px 0 12px;border:1px solid var(--stroke);border-radius:12px;background:color-mix(in srgb,var(--a3) 7%,transparent)} @media(max-width:680px){ .join-atlas-copy,.join-atlas-actions{align-items:stretch} .join-atlas-actions,.join-atlas-actions .btn,.join-atlas-copy>.btn{width:100%;justify-content:center} } /* Spotify fast-loader v1.3.6 */ .sp-player-shell{position:relative;margin-top:8px;min-height:152px;border-radius:12px;overflow:hidden;background:var(--panel2);border:1px solid var(--stroke)} .sp-player-shell .sp-slot{min-height:152px} .sp-player-shell .sp-slot iframe{display:block;width:100%!important;border:0;border-radius:12px} .sp-player-status{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--panel2) 88%,transparent);border-bottom:1px solid var(--stroke)} .sp-player-status.ok{color:var(--green)} .sp-player-status.playing{color:var(--a1)} .sp-player-status.limit{color:var(--orange)} .sp-fast-play{position:absolute;z-index:4;left:14px;bottom:14px;border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,#1ed760,#18a84b);color:#07120a;font-weight:900;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.28)} .sp-fast-play:hover{filter:brightness(1.08);transform:translateY(-1px)} .sp-fast-play:disabled{opacity:.72;cursor:wait;transform:none} .sp-player-shell.is-ready .sp-fast-play{bottom:12px} .sp-player-shell.is-fallback .sp-fast-play{display:none} .sp-spinner{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spSpin .7s linear infinite} @keyframes spSpin{to{transform:rotate(360deg)}}