/* ============================================================ PETELGO — skórka dla Postiza Paleta przeniesiona z aplikacji Instagram Manager + jasny wariant. Nakładka CSS — nie modyfikuje Postiza, przeżywa jego aktualizacje. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); /* ---- Antymigotanie: strona zaslonieta, dopoki nie naloze brandingu i PL ---- klase .petelgo-boot ustawia inline-skrypt w , zdejmuje petelgo.js (albo bezpiecznik po 2,5 s) ---- */ html[data-pg-boot] body { visibility: hidden !important; } html[data-pg-boot] { background: #0d1117; } /* ---- Typografia ---- */ body, button, input, textarea, select { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif !important; } code, pre, kbd { font-family: 'Consolas', monospace !important; } /* ============ TRYB CIEMNY (domyslny) ============ */ body.dark, .dark, [data-theme="dark"], body[data-petelgo-auth] { --color-primary: #0d1117 !important; --color-secondary: #0a0e14 !important; --color-third: #0a0e14 !important; --color-text: #ffffff !important; --new-back-drop: rgba(0, 0, 0, 0.65) !important; --new-bgColor: #0d1117 !important; --new-bgColorInner: #161b22 !important; --new-border: #3a4453 !important; --new-bgLineColor: #1c2230 !important; --new-table-border: #3a4453 !important; --new-btn-primary: #4cc9f0 !important; /* jasny — uzywany tez przez etykiety pol; ciemny tekst na przyciskach wymuszaja klasy nizej */ --new-btn-text: #ffffff !important; --new-ai-btn: #00b4d8 !important; --new-textColor: 230 237 243 !important; --purple-light: rgba(76, 201, 240, 0.14) !important; } /* ============ TRYB JASNY ============ */ body.light, .light, [data-theme="light"] { --color-primary: #eef1f5 !important; --color-secondary: #ffffff !important; --color-third: #ffffff !important; --color-text: #0d1117 !important; --new-back-drop: rgba(13, 17, 23, 0.40) !important; --new-bgColor: #eef1f5 !important; --new-bgColorInner: #ffffff !important; --new-border: #cfd8e3 !important; --new-bgLineColor: #e3e8ef !important; --new-table-border: #cfd8e3 !important; --new-btn-primary: #00b4d8 !important; --new-btn-text: #0d1117 !important; --new-ai-btn: #0096c7 !important; --new-textColor: 13 17 23 !important; --purple-light: rgba(0, 180, 216, 0.12) !important; } /* ---- Powierzchnie zawsze-ciemne (auth, marketingowe) ---- */ .bg-\[\#0E0E0E\], .bg-\[\#0B0A0A\], .bg-\[\#000000\] { background-color: #0d1117 !important; } .bg-\[\#121212\] { background-color: #10151d !important; } .bg-\[\#1A1919\] { background-color: #161b22 !important; } .bg-\[\#2A2929\] { background-color: #1c2230 !important; } /* ---- Fiolet/roz Postiza -> cyjan Petelgo (oba tryby) ---- */ .bg-\[\#612BD3\], .bg-\[\#612bd3\], .bg-forth { background-color: #4cc9f0 !important; color: #06121b !important; } .bg-forth *, .bg-\[\#612BD3\] *, .bg-\[\#612bd3\] * { color: #06121b !important; } .bg-\[\#612bd3\]\/10 { background-color: rgba(76, 201, 240, 0.12) !important; } .text-\[\#612BD3\], .text-\[\#612bd3\], .text-\[\#B69DEC\] { color: #00b4d8 !important; } .dark .text-\[\#612BD3\], .dark .text-\[\#612bd3\], .dark .text-\[\#B69DEC\] { color: #4cc9f0 !important; } .bg-\[\#D82D7E\] { background-color: #00b4d8 !important; } .bg-\[\#AA0FA4\] { background-color: #0096c7 !important; } .bg-\[\#AA0FA4\]\/10 { background-color: rgba(76, 201, 240, 0.10) !important; } .border-\[\#AA0FA4\]\/30 { border-color: rgba(76, 201, 240, 0.35) !important; } .bg-\[\#FC69FF\] { background-color: #4cc9f0 !important; } .text-\[\#FC69FF\] { color: #00b4d8 !important; } .from-\[\#622aff\] { --tw-gradient-from: #00b4d8 var(--tw-gradient-from-position) !important; --tw-gradient-to: #00b4d800 var(--tw-gradient-to-position) !important; } .to-\[\#8b5cf6\] { --tw-gradient-to: #4cc9f0 var(--tw-gradient-to-position) !important; } /* resztki fioletu na obramowaniach (spinner, aktywne zakladki) */ [class*="612bd3"], [class*="612BD3"], [class*="612ad5"], [class*="622aff"], [class*="8b5cf6"] { border-color: #4cc9f0 !important; } /* ---- Kontrast: przytlumione teksty jasniejsze (adaptuje sie do trybu) ---- */ .text-newTextColor\/60, .text-newTextColor\/\[0\.6\] { color: rgb(var(--new-textColor) / 0.92) !important; } .text-newTextColor\/40 { color: rgb(var(--new-textColor) / 0.78) !important; } .dark .text-\[\#A3A3A3\] { color: #b9c4d0 !important; } .dark .text-\[\#D1D1D1\] { color: #e6edf3 !important; } .light .text-\[\#A3A3A3\] { color: #4a5666 !important; } .light .text-\[\#D1D1D1\] { color: #2a3343 !important; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #3a4453; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #4cc9f0; background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } .light ::-webkit-scrollbar-thumb { background: #c3ccd9; background-clip: content-box; } .light ::-webkit-scrollbar-thumb:hover { background: #00b4d8; background-clip: content-box; } /* ---- Przycisk-logo (powrot na glowna) — w rownej linii z reszta nawigacji ---- */ .petelgo-home-btn { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 6px; padding: 5px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s, background .18s, filter .18s; } .petelgo-home-btn img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; display: block; filter: grayscale(55%) opacity(.68); transition: filter .18s; } .petelgo-home-btn:hover img, .petelgo-home-btn:focus-visible img { filter: grayscale(0%) opacity(1); } .petelgo-home-btn:hover, .petelgo-home-btn:focus-visible { transform: translateY(-1px); border-color: var(--new-btn-primary, #4cc9f0); background: rgba(76, 201, 240, .06); box-shadow: 0 0 14px rgba(76, 201, 240, .38); } .petelgo-home-btn:active { transform: translateY(0) scale(.96); box-shadow: 0 0 22px rgba(76, 201, 240, .6); } /* ---- Placeholder edytora renderowany przez ::before (nie jest atrybutem) ---- */ [data-placeholder="Write something ..."]::before, [data-placeholder="Write something..."]::before, .is-editor-empty:first-child::before { content: "Napisz coś…" !important; } /* ---- Asystent AI (CopilotKit) — wylaczony ---- */ [class*="copilotKit"], [class*="CopilotKit"], .copilotKitButton, .copilotKitPopup, .copilotKitWindow { display: none !important; } /* ---- Przycisk "Opublikuj teraz" w edytorze posta ---- */ #petelgo-post-now { background: linear-gradient(135deg, #4cc9f0, #00b4d8) !important; color: #06121b !important; border: none !important; font-weight: 800 !important; } #petelgo-post-now * { color: #06121b !important; } #petelgo-post-now:hover { box-shadow: 0 4px 16px rgba(76, 201, 240, .45) !important; } /* ---- Ukryte sekcje nawigacji (zostaje: kalendarz, analityka, media) ---- */ a[href="/agents"], a[href="/plugs"], a[href="/third-party"], a[href="/settings"] { display: none !important; } /* ---- "Date passed" jest rysowane przez CSS (content), nie jest tekstem w drzewie strony — dlatego wymaga nadpisania reguly, nie slownika ---- */ .col-calendar:hover:before { content: "Termin minął" !important; } /* ---- Akcenty interakcji ---- */ input:focus, textarea:focus, select:focus { border-color: #4cc9f0 !important; outline-color: #4cc9f0 !important; } ::selection { background: rgba(76, 201, 240, 0.35); } /* ============ STRONA LOGOWANIA (zawsze ciemna, minimalistyczna) ============ Atrybut data-pg-auth ustawia inline-skrypt w na podstawie adresu, ZANIM cokolwiek sie wyrenderuje — dzieki temu ponizsze reguly dzialaja od pierwszej klatki i przezywaja pelna przebudowe strony przez Reacta. */ html[data-pg-auth] form, body[data-petelgo-auth] form { max-width: 420px; margin: 0 auto; flex-direction: column !important; } /* karta logowania Postiza ma sztywne 600px przy lewej krawedzi — na caly ekran */ html[data-pg-auth] .lg\:w-\[600px\], body[data-petelgo-auth] .lg\:w-\[600px\] { width: 100% !important; flex: 1 1 auto !important; } /* logo "petelgo" rysowane czystym CSS-em (zadnego czekania na skrypt) */ html[data-pg-auth] form::before { content: ''; display: block; height: 96px; margin: 0 auto 30px; width: 260px; background: url('/petelgo/wordmark-white.png') center / contain no-repeat; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5)); } .petelgo-auth-title { display: none !important; } .petelgo-auth-logo { display: none !important; } /* zostaje tylko: logo, e-mail, haslo, przycisk */ html[data-pg-auth] form h1, body[data-petelgo-auth] form h1 { display: none !important; } html[data-pg-auth] a[href="/auth/forgot"], body[data-petelgo-auth] a[href="/auth/forgot"] { display: none !important; } html[data-pg-auth] a[href="/auth"], body[data-petelgo-auth] a[href="/auth"] { display: none !important; } /* oryginalny logotyp-napis nad formularzem */ html[data-pg-auth] .max-w-\[440px\] > svg { display: none !important; } /* kolumna z opiniami po prawej */ html[data-pg-auth] div.pt-\[88px\] { display: none !important; } /* logowanie Google + separator OR */ html[data-pg-auth] form div.mt-\[32px\].text-\[14px\], html[data-pg-auth] form div.mt-\[32px\] { display: none !important; } html[data-pg-auth] form .h-\[20px\].mb-\[24px\].mt-\[24px\] { display: none !important; } html[data-pg-auth] form div:has(> div > svg[viewBox="0 0 48 48"]) { display: none !important; } /* czytelne etykiety i widoczne pola */ html[data-pg-auth] form div.text-\[14px\], body[data-petelgo-auth] form div.text-\[14px\] { color: #ffffff !important; font-weight: 600; } html[data-pg-auth] input, body[data-petelgo-auth] input { background: #161b22 !important; border: 1px solid #3a4453 !important; border-radius: 10px !important; color: #e6edf3 !important; } html[data-pg-auth] input:focus, body[data-petelgo-auth] input:focus { border-color: #4cc9f0 !important; } /* autofill Chrome maluje pola na jasno — wymuszamy ciemne */ html[data-pg-auth] input:-webkit-autofill, html[data-pg-auth] input:-webkit-autofill:hover, html[data-pg-auth] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #161b22 inset !important; -webkit-text-fill-color: #e6edf3 !important; caret-color: #e6edf3; }