/* --------------------------------------------------------------------- robotatut.pl - krazek awatara i guzik okladki. Plik podpiety JAKO OSTATNI, wiec wygrywa z zaproszenia.css i storyadd.css bez podbijania wagi selektorow. Taka jest zasada w tym projekcie: nowe reguly na koniec, a nie !important w srodku. --------------------------------------------------------------------- */ /* Aparacik na krazku ZNIKA (decyzja wlasciciela): klikalny jest caly krazek, a co sie da z nim zrobic, mowi lista po przytrzymaniu. Zostawiamy sama regule, a nie kasujemy jej w zaproszenia.css - ten znaczek moze jeszcze wrocic, a szukanie go po dwoch plikach kosztuje. */ .phero .pavatar-aparat{display:none} /* Palec na krazku: bez systemowego "zaznacz obrazek" i bez podswietlenia, inaczej przytrzymanie konczy sie menu Androida zamiast naszym. */ .phero .pring{ -webkit-touch-callout:none; -webkit-user-select:none;user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .phero .pring img{pointer-events:none} /* Widac, ze cos sie dzieje, zanim lista wyskoczy - bez tego przytrzymanie przez pol sekundy wyglada jak brak reakcji. */ .phero .pring.trzymam{transform:scale(.955);transition:transform .45s ease-out} .phero .pring{transition:transform .12s ease-out} /* ------------------------------------------------------------- listy WARIANT "PLANKA BUDOWLANA" (wybor wlasciciela). Kazda pozycja to OSOBNA planka ze zlotym torcem - jak rozstawione znaki na budowie. Nie jedna karta z wierszami: planki stoja z przeswitem, wiec palec nigdy nie trafia w sasiedni pozycje, a czerwony torzec na kasowaniu widac zanim czlowiek przeczyta napis. Okienko jest MALE i stoi przy tym, z czego wyszlo (zyczenie wlasciciela): przy krazku awatara albo pod guzikiem okladki. Wspolrzedne stawia public/js/avamenu.js z prawdziwego miejsca elementu, bo: - glowka profilu przycina to, co z niej wystaje (okladka jest jej tlem), wiec okienko rysowane w jej srodku gubilo trzecia planke; - dolny pasek aplikacji ma z-index 1100 (tabbar.css) i wychodzil na wierzch. Dlatego menu jest position:fixed i lezy na koncu . --------------------------------------------------------------------- */ .pokladka-blok{position:absolute;left:14px;top:12px;z-index:6} .pokladka-blok .pokladka-zmien{position:static;margin:0} .pmenu,.pmenu-okl{ position:fixed;z-index:1200; left:0;top:0; /* prawdziwe miejsce daje JavaScript */ right:auto;bottom:auto; width:min(206px,calc(100vw - 24px)); min-width:0; display:flex;flex-direction:column;gap:6px; background:none;border:0;border-radius:0;box-shadow:none; /* plyta jest w plankach */ overflow:visible; } .pmenu[hidden],.pmenu-okl[hidden]{display:none} /* --- planka */ .pmenu-i{ display:flex;align-items:center;gap:9px; min-height:46px;padding:9px 10px; /* Kolory WPISANE WPROST, nie z motywu - patrz uwaga pod regulami. Z motywu w jasnym wariancie wychodzila biala planka z ciemnym napisem na ciemnej glowce, czyli napis nieczytelny. */ background:#17171C; border:1px solid #2A2419; border-left:4px solid #C79A2A; /* torzec - znak, ze to nasze */ border-radius:9px; color:#F6F3EA; font-family:var(--f-cond);font-weight:700;font-size:12.5px; letter-spacing:.06em;text-transform:uppercase;text-align:left; box-shadow:0 8px 20px rgba(0,0,0,.5); cursor:pointer; } .pmenu-i:hover,.pmenu-i:focus-visible{background:#22222A} .pmenu-i:focus-visible{outline:2px solid #E3C765;outline-offset:2px} /* --- znaczek w zlotym kwadracie */ .pmenu-kw{ width:27px;height:27px;flex:0 0 27px;border-radius:6px; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#C79A2A,#F2DC96 46%,#D9B34F 72%,#A6790F); color:#14130F; /* znaczek bierze kolor stad */ } .pmenu-kw svg{width:15px;height:15px} /* --- kasowanie: torzec i napis czerwone, kwadrat przygaszony */ .pmenu-zle{border-left-color:#E4674F;color:#F08C77} .pmenu-zle .pmenu-kw{background:rgba(228,103,79,.20);color:#F08C77} /* --- rozek pokazuje, skad okienko wyszlo */ .pmenu-rozek{ position:absolute;width:11px;height:11px;transform:rotate(45deg); background:#C79A2A; left:-5px;top:18px; /* przy krazku - z lewej */ } .pmenu-rozek-gora{left:18px;top:-5px} /* pod guzikiem okladki - u gory */ /* Planki sa CIEMNE W OBU MOTYWACH portalu, i to ta sama zasada, co przy napisach w glowce profilu: okienko lezy NA glowce, a glowka jest ciemna zawsze - okladka bywa dowolnym zdjeciem. Kolor nie moze wiec zalezec od motywu strony, tylko od tego, na czym lezy. W jasnym motywie planka w kolorze karty wychodzila bialym prostokatem na ciemnej glowce. */ /* ------------------------------------------------- awatar na caly ekran */ .avpod{ position:fixed;inset:0;z-index:1200; /* nad dolnym paskiem (tabbar: 1100) */ display:flex;align-items:center;justify-content:center; padding:24px; background:rgba(8,8,6,.94); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .avpod[hidden]{display:none} .avpod img{ max-width:min(92vw,560px);max-height:82vh; width:auto;height:auto; border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.6); } .avpod-x{ position:absolute;right:14px;top:14px; width:44px;height:44px; /* palec, nie mysz */ display:flex;align-items:center;justify-content:center; appearance:none;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.22); border-radius:50%;color:#fff;font-size:26px;line-height:1;cursor:pointer; } .avpod-x:hover,.avpod-x:focus-visible{background:rgba(0,0,0,.7)} /* --------------------------------------------------------------------- HISTORIE NA CALY EKRAN - poprawki po pokazaniu wlascicielowi. Bylo: film i zdjecie stawaly na srodku, ograniczone do 520px szerokosci i 82vh wysokosci, wiec wokol zostawaly czarne pasy - z boku i u dolu. Ma byc: obraz wypelnia CALY ekran, tak jak w kazdej aplikacji z historiami. "cover", nie "contain": contain wpisuje film w ekran i znowu zostawia pasy. Cover wypelnia i przycina to, co wystaje - przy pionowym filmie z telefonu nie przycina praktycznie nic, a to on jest tu regula. --------------------------------------------------------------------- */ .stv-f{ position:absolute;inset:0; max-width:none;max-height:none; display:flex;align-items:center;justify-content:center; padding:0; } .stv-f img, .stv-f video{ width:100%;height:100%; max-width:none;max-height:none; object-fit:cover; margin:0; background:#000; } /* Podpis lezy NA obrazie, u dolu - wczesniej stal pod nim i odpychal go w gore, czyli sam byl powodem czarnego pasa. */ .stv-f figcaption{ position:absolute;left:0;right:0;bottom:0; padding:18px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to top,rgba(0,0,0,.72),transparent); text-align:center; } /* --- kosz w gornym pasku, przy glosniczku i krzyzyku. Maly i ostatni w kolejnosci palca: kasowanie nie moze byc rowne krzyzykowi, ktory tylko zamyka. */ .stv-kosz{margin:0 2px 0 0;display:flex;align-items:center} .stv-kosz button{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;padding:0 !important;min-height:0 !important; background:none !important;border:0 !important;box-shadow:none !important; color:rgba(255,255,255,.62);cursor:pointer; } .stv-kosz button:hover,.stv-kosz button:focus-visible{color:#F08C77} .stv-kosz svg{width:17px;height:17px} /* --- awatar przy imieniu w gornym pasku historii. Na calym ekranie widac tylko zdjecie, wiec bez awatara nie bylo jak poznac, czyja to historia. Kolko - tak jak wszedzie u czlowieka. Obwodka zlota, ale cienka: to podpis, nie guzik. */ .stv-ava{ flex:0 0 30px;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;overflow:hidden; background:#1A160F; box-shadow:0 0 0 1.5px rgba(242,220,150,.85); margin-right:2px; } .stv-ava img{width:100%;height:100%;object-fit:cover;display:block} .stv-ava i{ font-family:var(--f-display);font-weight:800;font-size:13px;font-style:normal; color:#F2DC96; } /* --- SERCE na historii, u dolu ekranu. Stoi nad dolna krawedzia, po prawej: lewa strona to obszar "wstecz" z .stv-nav, a serce nie moze zabierac palca przewijaniu historii. z-index wyzszy od .stv-nav (2), inaczej niewidzialny guzik nawigacji przyjmowalby stukniecia za serce. */ .stv-serce{ position:absolute;right:0;bottom:0;z-index:4; padding:14px 14px calc(18px + env(safe-area-inset-bottom, 0px)); } .stv-serce a, .stv-serce button{ display:flex;align-items:center;gap:7px; min-height:44px;padding:8px 14px !important; background:rgba(8,8,10,.42) !important;border:1px solid rgba(255,255,255,.18) !important; border-radius:24px;box-shadow:none !important; color:#fff;text-decoration:none;cursor:pointer; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .stv-serce svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2} .stv-serce b{ font-family:var(--f-display);font-weight:800;font-size:15px; font-variant-numeric:tabular-nums;min-width:1ch; } /* Postawione serce jest PELNE i czerwone - po samym obrysie nie dalo sie poznac, czy juz stuknieto. */ .stv-serce .jest{color:#FF5A5A} .stv-serce .jest svg{fill:#FF5A5A;stroke:#FF5A5A} /* --- lista "kto polubil" */ .serce-w{ display:flex;align-items:center;gap:12px; padding:12px 14px;border-bottom:1px solid var(--line); } .serce-w:last-child{border-bottom:0} .serce-zdj{ flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden; display:flex;align-items:center;justify-content:center; background:var(--paper);box-shadow:0 0 0 1.5px var(--gline, rgba(212,175,55,.3)); } .serce-zdj.kwadrat{border-radius:9px} /* firma ma kwadrat, czlowiek kolko */ .serce-zdj img{width:100%;height:100%;object-fit:cover;display:block} .serce-zdj i{font-family:var(--f-display);font-weight:800;font-size:16px; font-style:normal;color:var(--ink2)} .serce-kto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .serce-kto b{font-family:var(--f-display);font-weight:700;font-size:15px} .serce-kto span{font-family:var(--f-cond);font-weight:600;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)} .serce-kiedy{font-size:12px;color:var(--ink2);white-space:nowrap} /* Historie na CUDZYM profilu: bez guzika "dodaj" rzad bywa krotki, wiec zostawiamy mu wlasny odstep, zeby nie kleil sie do glowki. */ .sts-obcy{margin:14px 0 4px} /* --- serce na pelnym ekranie (public/js/rolki.js) */ .rolki-serce{ position:absolute;right:14px;bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:6; display:flex;align-items:center;gap:7px; min-height:44px;padding:8px 14px; border-radius:24px;text-decoration:none;cursor:pointer; background:rgba(8,8,10,.42);border:1px solid rgba(255,255,255,.18); color:#fff; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .rolki-serce[hidden]{display:none} .rolki-serce svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2} .rolki-serce b{font-family:var(--f-display);font-weight:800;font-size:15px; font-variant-numeric:tabular-nums;min-width:1ch} .rolki-serce.jest{color:#FF5A5A} .rolki-serce.jest svg{fill:#FF5A5A;stroke:#FF5A5A}