/* PODZIEL SIE PUBLIKACJA - okienko przy dolnej krawedzi. Wlasciciel pokazal okienko Facebooka i poprosil o to samo, tylko w naszym dizajnie: kolka sieci z nazwami pod nimi. Trzy rzeczy warte zapamietania: 1. Okienko lezy na koncu i jest position:fixed, a nad dolnym paskiem (tabbar.css ma z-index 1100) stoi z 1300. W srodku karty nie moglo zostac - karta ma overflow:hidden i przycielaby je. 2. NIE JEST na caly ekran. Wlasciciel odrzucil kiedys duza plachte wprost ("nie nalewaj mi duzego ekranu") - wiec okienko ma tyle wysokosci, ile potrzebuje tresc, i konczy sie nad paskiem. 3. Kolory kolek sa WPISANE WPROST w szablonie, nie brane z motywu: zielen WhatsAppa i blekit Facebooka to ich znaki. Reszta okienka chodzi za motywem portalu. */ .udost-tlo{position:fixed;inset:0;z-index:1290;background:rgba(8,8,10,.62)} .udost-tlo[hidden]{display:none} .udost{position:fixed;left:0;right:0;bottom:0;z-index:1300; max-width:520px;margin:0 auto; background:var(--card);border-top:3px solid transparent; border-image:var(--gold) 1; border-radius:20px 20px 0 0; padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -18px 46px rgba(0,0,0,.35); animation:udost-w .18s ease-out} .udost[hidden]{display:none} @keyframes udost-w{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.udost{animation:none}} .udost-chwyt{display:block;width:42px;height:4px;border-radius:3px; background:var(--gline);margin:2px auto 10px} .udost-g{display:flex;align-items:center;justify-content:space-between;gap:10px} .udost-g h3{font-family:var(--f-display);font-weight:700;font-size:17px;margin:0} .udost-x{background:transparent;border:0;color:var(--ink2);font-size:26px; line-height:1;padding:0 6px;cursor:pointer} /* --- co wysylam: male zdjecie i adres */ .udost-podglad{display:flex;align-items:center;gap:10px;margin:11px 0 4px; padding:9px 10px;background:var(--gsoft);border:1px solid var(--gline2);border-radius:12px} .udost-mini{width:44px;height:44px;flex:0 0 44px;border-radius:9px;overflow:hidden; background:#0E0D09;display:grid;place-items:center} .udost-mini img{width:100%;height:100%;object-fit:cover} .udost-opis{min-width:0} .udost-opis b{display:block;font-size:13.5px;font-weight:600;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .udost-opis small{display:block;color:var(--ink2);font-size:11.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* --- kolka sieci: cztery w rzedzie, nazwa pod kolkiem */ .udost-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px; margin:14px 0 12px} .udost-i{display:flex;flex-direction:column;align-items:center;gap:6px; background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink)} .udost-i b{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.04em; font-weight:700;font-size:9.5px;color:var(--ink2);text-align:center;line-height:1.15} .udost-i[hidden]{display:none} .udost-kolo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center; box-shadow:0 3px 10px rgba(0,0,0,.18)} .udost-kolo svg{width:26px;height:26px} .udost-kolo.zloto{background:var(--gold)} .udost-kolo.ciemny{background:#2A2A31} .udost-i:active .udost-kolo{transform:scale(.94)} .udost-i.zrobione b{color:#0F8A4F} :root[data-theme="dark"] .udost-i.zrobione b{color:var(--green)} /* --- sam adres, do przeczytania i zaznaczenia palcem */ .udost-pasek{display:flex;align-items:center;gap:8px; border:1px solid var(--line);border-radius:12px;padding:5px 5px 5px 11px; background:var(--paper)} .udost-pasek input{flex:1;min-width:0;border:0;background:transparent; font-family:var(--f-body);font-size:12.5px;color:var(--ink2);padding:8px 0} .udost-pasek button{border:0;border-radius:9px;background:var(--gold);color:#14130F; min-height:38px;padding:0 13px;cursor:pointer; font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.06em; font-weight:700;font-size:11px} /* Napis tylko dla czytnikow ekranu - w projekcie nie bylo takiej klasy. */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* --------------------------------------------- wlasna strona publikacji */ /* Tu trafia czlowiek z odnosnika wyslanego na Telegram. Karta stoi sama, wiec dostaje odstep od glowki strony, a pod nia dwie drogi dalej: do autora i - dla goscia bez konta - do rejestracji. */ .wpis-strona{padding-top:14px} .wpis-autor{display:flex;align-items:center;justify-content:space-between; gap:10px;margin:12px 0 0;padding:14px;border:1px solid var(--line); border-radius:12px;background:var(--card);font-weight:600;font-size:14.5px} .wpis-arr{color:var(--ink2);font-size:20px;line-height:1} .wpis-zapros{margin:14px 0 0;padding:16px 14px;border-radius:14px; background:var(--gsoft);border:1px solid var(--gline2)} .wpis-zapros b{display:block;font-family:var(--f-display);font-weight:800;font-size:17px} .wpis-zapros p{margin:6px 0 13px;color:var(--ink2);font-size:14px;line-height:1.45} .wpis-lenta{display:block;margin-top:11px;text-align:center;font-size:13.5px; color:var(--ink2);border-bottom:1px solid var(--gline);width:fit-content; margin-left:auto;margin-right:auto} .udost-mini[hidden]{display:none}