/* Theme Name: RetroTube Child Theme URI: https://toiletpov.com Template: retrotube Author: TPOV Hub Description: Child theme for RetroTube - holds every file this project has directly edited (content-video-player.php tracking-click fix, index.php/category.php personalized-feed injection, search.php "did you mean", content-video.php comment ordering + VideoObject SEO schema + v1.10-v1.12 video-card redesign, content-related.php shortcode rename, content-top-bar.php account dropdown, header.php SEO/dedup override + v1.13 speed/SEO/quality audit fixes across functions.php/404.php/search.php/template-actors.php/template-categories.php/ several template-parts), so a future RetroTube update from WP-Script can never silently wipe these edits. WordPress resolves any template file present here INSTEAD of the parent theme's copy of the same path - everything not overridden here still comes straight from the parent theme, unchanged. Version: 1.29 Text Domain: wpst */ /* ========================================================================== TPOV (2026-08-09) - ciemniejsza, spójniejsza paleta teł "w stylu YouTube". User: tło strony ma być DOKŁADNIE tym co ma YouTube (#0f0f0f, zweryfikowana powszechnie cytowana wartość), a reszta powierzchni (nagłówek/stopka/karty/ pola formularzy/modal) zbudowana na tym jako CIASNA drabinka jasności - zamiast dotychczasowego szerokiego rozstrzału (#111->#333, odziedziczonego głównie z motywu-rodzica, różne odcienie dla praktycznie tej samej roli "powierzchnia nad tłem"). Każdy docelowy selektor znaleziony przez `element.matches(rule.selectorText)` na żywej stronie (nie zgadywane) - patrz historia sesji po pełną listę zweryfikowanych par selektor/wartość. .top-bar CELOWO dostaje TĘ SAMĄ wartość co strona (nie osobny, ciemniejszy odcień jak dotychczas) - dokładnie tak jak YouTube, którego pasek górny to ta sama prawie-czerń co reszta strony, oddzielona cienką linią, nie kolorem - stąd nowy border-bottom zamiast polegania na kontraście barw między nagłówkiem a treścią. Tekst (#ccc -> #f1f1f1) też podniesiony do wartości jakiej YouTube faktycznie używa - jaśniejszy niż dotychczasowy szary, ale ŚWIADOMIE nie czysta biel (#fff na prawie-czerni daje efekt "halo"/męczy oczy, stąd YouTube też tego unika). Wszystkie reguły z !important - te same selektory w motywie-rodzicu nie zawsze mają !important, więc to gwarantuje wygraną niezależnie od dokładnej specyficzności/kolejności ładowania, ten sam wzorzec co reszta tego pliku. Pasek oceny (.tpov-vote-block .rating-bar) używa rgba(255,255,255,0.12) - przezroczysta nakładka względem TEGO na czym akurat siedzi, nie stały hex, więc automatycznie dopasuje się do nowej palety bez osobnej zmiany. ========================================================================== */ body { background-color: #0f0f0f !important; color: #f1f1f1 !important; } .top-bar { background-color: #0f0f0f !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-footer { background-color: #181818 !important; } #site-navigation, .widget-title, .page-title, .page .entry-title, .comments-title, .comment-reply-title, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea, .wp-editor-container { background-color: #1e1e1e !important; } .modal-content, .rating-bar, .categories-list .thumb-block .entry-header, .actors-list .thumb-block .entry-header, #filters .filters-select, #filters .filters-options, .breadcrumbs-area { background-color: #272727 !important; } .breadcrumbs-area { border-color: #272727; } /* ========================================================================== TPOV (2026-08-09) - akcent #ff3565 -> #d92d56 (jaśniejszy magenta stał się ciemniejszą różą), TYLKO tam gdzie kolor SIEDZI POD białym/jasnym tekstem lub jest wypełnieniem "przycisku" - user zgłosił, że PageSpeed flagował niewystarczający kontrast na 3 elementach (guzik Rejestracji, ikona wyszukiwania, odznaka NOWE), wszystkie trzy to biały tekst na #ff3565 (3.53:1, poniżej wymaganych 4.5:1 dla zwykłego tekstu). #d92d56 to proporcjonalne przyciemnienie (każdy kanał *0.85, nie zmiana odcienia) - daje 4.72:1, z zapasem, i nadal wygląda jak TEN SAM róż/magenta, tylko odrobinę głębszy - nie przesunięcie w stronę czerwieni. ŚWIADOMIE NIE zmienione wszędzie - user poprosił o pełną spójność "żeby nic dziwnego się nie stało", więc rozdzielone dokładnie według TEGO co dana reguła faktycznie robi: - Tło pod białym/jasnym tekstem (przyciski, .label, odznaki, paginacja, paski postępu/oceny) -> NOWY, ciemniejszy #d92d56. To jest DOKŁADNIE ten sam wzorzec co 3 zgłoszone elementy, więc każde takie miejsce miało (lub mogło mieć) ten sam problem kontrastu, nie tylko te 3 już złapane. - Sam tekst/ikona koloru różowego SIEDZĄCA BEZPOŚREDNIO na ciemnym tle strony (linki po najechaniu, aktywne serduszko ulubionych, podkreślenie aktywnej zakładki) -> ŚWIADOMIE zostawione na oryginalnym #ff3565. Przyciemnienie TUTAJ zrobiłoby coś PRZECIWNEGO do zamierzonego efektu - różowy tekst na ciemnym tle potrzebuje być jaśniejszy względem tła, nie ciemniejszy, żeby zachować kontrast; te miejsca już zdawały (dlatego PageSpeed ich nie złapał) i przyciemnienie by to popsuło. Poniższe selektory to WIERNA kopia grup z motywu-rodzica (temp-style.php), gdzie 'main-color' (opcja motywu, dziś #ff3565) jest użyte jako TŁO (przyciski/paginacja/etykiety/paski postępu) - nie da się edytować tamtego pliku bezpośrednio (nadpisywany przy aktualizacji), więc nadpisanie TU, celując w te SAME selektory, z !important tak jak oryginał. Grupy 'main- color' użyte jako SAM TEKST/ikona (np. `a`, `.top-bar i:hover`) i jako SAM border (np. `.widget-title`, zakładki wideo) - CELOWO pominięte, z tego samego powodu co wyżej. */ .video-debounce-bar { background: #d92d56 !important; } button, .button, input[type="button"], input[type="reset"], input[type="submit"], .label, .pagination ul li a.current, .pagination ul li a:hover, body #filters .label.secondary.active, .label.secondary:hover, .main-navigation li:hover > a, .main-navigation li.focus > a, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .widget_categories ul li a:hover, .comment-reply-link, a.tag-cloud-link:hover, .template-actors li a:hover { border-color: #d92d56 !important; background-color: #d92d56 !important; } .rating-bar-meter, .vjs-play-progress, #filters .filters-options span:hover, .bx-wrapper .bx-controls-direction a, .top-bar .social-share a:hover, .thumb-block:hover span.hd-video, .featured-carousel .slide a:hover span.hd-video, .appContainer .ctaButton { background-color: #d92d56 !important; } /* TPOV (2026-08-09) - user: ścieżka breadcrumb ("Home -> Femdom -> tytuł filmu") na stronie wideo za jasna/za mocna, ma być ciemniejsza niż navbar. Linki #breadcrumbs (Home/kategoria) dziedziczą kolor z gołej reguły `a { color: main-color }` motywu-rodzica (ta sama reguła co KAŻDY zwykły link na stronie - świadomie NIE dotykana w poprzedniej rundzie, bo jako zwykły tekst na ciemnym tle generalnie działa dobrze gdzie indziej) - tutaj dodajemy WŁASNY, bardziej specyficzny selektor `#breadcrumbs a`, więc zmiana dotyczy TYLKO breadcrumbs, nie wszystkich linków na stronie. Ten sam #d92d56 co reszta przyciemnionego akcentu (nie nowy, czwarty odcień) - przy okazji znaleziono że .breadcrumbs-area (tło za całą ścieżką) wciąż było na starym #333 sprzed konsolidacji palety teł - przeniesione na #272727 wyżej, żeby nie zostawiać jednej powierzchni w tyle za resztą. */ #breadcrumbs a { color: #d92d56 !important; } /* ========================================================================== TPOV (2026-08-09, PageSpeed audyt) - font-display:swap dla FontAwesome. Motyw-rodzic (font- awesome.css) rejestruje @font-face bez font-display w ogóle - domyślne zachowanie przeglądarki to krótki okres niewidocznego tekstu (FOIT) zanim font się wczyta, zamiast pokazać tekst od razu systemowym fontem i podmienić. Nie można edytować pliku motywu-rodzica bezpośrednio (nadpisywany przy aktualizacji) - zamiast tego DRUGA deklaracja @font-face dla TEJ SAMEJ font-family/src, wczytywana PO oryginalnej (kolejność w kaskadzie), z jedyną różnicą - dodanym font-display: swap. Przeglądarki traktują późniejszą pasującą deklarację jako właściwą dla tego font-face - czysto addytywne, nie zmienia wyglądu fontu, tylko moment w którym tekst staje się widoczny. Zweryfikowane na PageSpeed: ~230ms oszczędności na FCP. ========================================================================== */ @font-face { font-family: 'FontAwesome'; src: url('../retrotube/assets/stylesheets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../retrotube/assets/stylesheets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../retrotube/assets/stylesheets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ========================================================================== ODŚWIEŻENIE WIZUALNE (2026-08-06) - świadomie NIE przeprojektowanie na generyczny "YouTube/Netflix" wygląd - ta witryna ma swój własny, niszowy charakter (ciemny motyw, róż/magenta jako akcent - patrz istniejący kolor przycisków) i to zostaje. Poprawiamy tylko rzemiosło (typografia, zaokrąglenia, głębia/cień, waga przycisku CTA), nie ton/branding. ŚWIADOMIE DOBRANE POD KĄTEM SZYBKOŚCI (użytkownik: "bardzo mała utrata szybkości jest ok, ale nie chcemy zwolnić strony"): - Zero nowych requestów sieciowych. Typografia to STOS FONTÓW SYSTEMOWYCH (już zainstalowane na urządzeniu odwiedzającego), NIE webfont z Google Fonts/self-hosted - to samo praktyczne polepszenie względem gołego "sans-serif" (który dotychczas był tu dosłownie używany), zero dodatkowych bajtów/połączeń. - Wszystkie reguły dotykają WYŁĄCZNIE border-radius/box-shadow/transform/ transition/color/background - właściwości malowane przez przeglądarkę (paint) albo kompozytowane (transform), NIE wyzwalające ponownego layoutu/reflow całej strony. Zero nowych obrazków/ikon/JS. - Ten plik i tak już jest wczytywany na każdej stronie (patrz functions.php) - to więcej reguł w JUŻ wymaganym pliku, nie nowy request. ========================================================================== */ /* Typografia - stos fontów systemowych zamiast gołego "sans-serif" (co renderowało się jako domyślny, generyczny font przeglądarki). Każdy system dostaje swój najlepszy, natywny, już wgrany font - bez pobierania niczego. */ body, button, input, select, textarea, .button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; } /* Przyciski/CTA - lekkie zaokrąglenie + delikatne uniesienie na hover (transform, nie zmiana marginesu/rozmiaru - nie wywołuje reflow). */ button, .button, input[type="button"], input[type="reset"], input[type="submit"] { border-radius: 6px; transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } /* "Register" jako prawdziwe CTA zamiast zwykłego, niewyróżniającego się linku (Login i Register dzielą tę samą klasę .login na w motywie, więc celujemy w konkretny href zamiast dodawać nową klasę do szablonu - zero zmian w PHP). Ten sam róż/magenta co reszta przycisków witryny (marka zostaje spójna), Login świadomie zostaje zwykłym, cichszym linkiem - to drugorzędna akcja względem założenia konta. */ .top-bar .membership a[href="#wpst-register"] { background-color: #d92d56; color: #fff; padding: 0.35em 0.9em; border-radius: 6px; font-weight: 600; margin: 0; transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .top-bar .membership a[href="#wpst-register"]:hover { background-color: #b82649; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(217, 45, 86, 0.4); } /* Miniaturki - lekkie zaokrąglenie (.post-thumbnail ma już overflow:hidden w motywie-rodzicu, więc obraz w środku ładnie się przycina, nic dodatkowo nie trzeba maskować) + delikatny cień + subtelne powiększenie obrazka na hover (transform:scale na samym , NIE na kontenerze - kontener zachowuje swój rozmiar/pozycję, więc sąsiednie karty w siatce się nie przesuwają). */ .thumb-block .post-thumbnail { border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .thumb-block .post-thumbnail img { transition: transform 300ms ease; } .thumb-block:hover .post-thumbnail img { transform: scale(1.04); } /* Plakietki na miniaturce (HD/czas trwania/wyświetlenia) - ujednolicone zaokrąglenie (dotąd tylko HD miało 3px, duration/views miały 0). */ span.views, span.duration, span.hd-video { border-radius: 4px; } /* Okno logowania/rejestracji (Bootstrap-style modal) - zaokrąglenie zamiast ostrych rogów, spójne z resztą odświeżenia. */ .modal-content { border-radius: 10px; } /* ========================================================================== POPRAWKI ZGŁOSZONE PO WDROŻENIU v1.1 (2026-08-06) - zweryfikowane NA ŻYWO (wstrzyknięcie reguły + pomiar przez JS na produkcyjnej stronie), nie na podstawie samego czytania kodu. ========================================================================== */ /* 1. "Zniknęła ikonka lupy" - guzik wyszukiwania to , czyli glif Font Awesome zapisany jako SUROWY znak unicode w atrybucie value, renderowany jako ikona TYLKO gdy font-family tego inputu to fontAwesome. Mój gołowy selektor `input` w bloku typografii wyżej (celowo bez podania typu, żeby objąć zwykłe pola tekstowe) przypadkiem złapał też TEN input i nadpisał mu font na systemowy - stąd glif renderował się jako pusty/niewidoczny znak zamiast ikony. Wyjątek dla `.fa-input`/#searchsubmit przywraca właściwy font (klasa ma wyższą specyficzność niż goły `input`, więc wygrywa bez potrzeby !important). 2 i 3 poniżej mają WSPÓLNY korzeń: */ .fa-input, #searchsubmit { font-family: fontAwesome; } /* 2 i 3. "Podpowiedzi renderują się NA polu wyszukiwania" / "scrollowanie podpowiedzi przesuwa cały header" - #searchform ma dzieci float:left (input#s, input#searchsubmit - tak zbudował to motyw-rodzic) BEZ clearfixa, więc sam formularz miał WYSOKOŚĆ 0 (potwierdzone pomiarem na żywo). Skrypt podpowiedzi pozycjonuje dropdown przez `top:100%` względem TEGO formularza - przy wysokości 0 to matematycznie `top:0`, czyli dropdown lądował DOKŁADNIE na polu wyszukiwania zamiast pod nim (bug #3). To z kolei tłumaczy bug #2: odwiedzający próbujący przewinąć listę podpowiedzi w rzeczywistości najeżdża na obszar nakładający się z samym polem, a po dojechaniu do końca wewnętrznego przewijania dropdownu brak `overscroll-behavior` pozwalał przewijaniu "przelać się" na całą stronę - stąd wrażenie że header ucieka w górę. `display:flow-root` to nowoczesny clearfix - w przeciwieństwie do starszego triku `overflow:hidden` NIE przycina dropdownu (który musi wystawać POZA formularz, żeby być widoczny) - kontener po prostu poprawnie liczy swoją wysokość. `overscroll-behavior:contain` na samym dropdownie to dodatkowe, niezależne zabezpieczenie na wypadek gdyby przewijanie mimo poprawki #1 nadal sięgało jego granic. */ #searchform { display: flow-root; } .tpov-search-suggest { overscroll-behavior: contain; } /* Menu główne - motyw-rodzic ma gotowy zestaw ikon per klasa CSS pozycji menu (.home-icon/.cat-icon/.tag-icon/.blog-icon/... - patrz style.css rodzica), ale nie ma nic dla "czatu"/AI. Dokładka w tym samym duchu - żeby dało się przypisać ikonę w Appearance -> Menus -> CSS Classes: "chat-icon", bez dodatkowego kodu. Reszta niespójności w menu (brakujące/błędne klasy typu "book-icon" zamiast "blog-icon", zbłąkany "?" w etykiecie) to kwestia ustawień samego menu w wp-adminie, nie CSS. */ .chat-icon a:before { font-family: fontAwesome; margin-right: 0.4em; content: "\f075"; } /* "Femdom AI Chat" w menu głównym - to reklama/link afiliacyjny, ma WYRÓŻNIAĆ się z rzędu zwykłych pozycji menu jako plakietka/pill, nie tylko inny kolor tekstu. Przypisz w Appearance -> Menus -> [pozycja menu] -> CSS Classes: "ad-highlight" (zastępuje "chat-icon" jeśli był wcześniej przypisany - ta jedna klasa daje TĘ SAMĄ ikonkę czatu + wyróżnienie razem, żeby nie trzeba było przypisywać dwóch osobnych klas). Kolor CELOWO INNY niż różowy akcent reszty witryny (Register, ikonki ⋮, akcenty playlist) - różowy już oznacza "podstawowa akcja serwisu"; identyczny kolor sprawiłby że to wygląda jak kolejna funkcja serwisu, nie promowany/sponsorowany link. Złoto/bursztyn czyta się jako "wyróżnione/promowane" bez kłócenia się z ciemnym motywem + różowym akcentem. Świadomie BEZ animacji/pulsowania - to czytałoby się jako spam, wprost sprzeczne z resztą pracy nad unowocześnieniem wyglądu w tej sesji. #site-navigation z przodu selektora - baza motywu ustawia kolor tekstu linków menu przez `#site-navigation>ul>li>a { color:#fff }` (selektor z ID, wysoka specyficzność), więc goła klasa `.ad-highlight a` przegrałaby o kolor tekstu bez tego dopisku z przodu. POPRAWKI po zgłoszeniu z produkcji (zweryfikowane na żywo - wstrzyknięcie reguły + realne najechanie myszą, nie tylko czytanie kodu): 1. Tekst nie był wyśrodkowany w pionie - `` dziedziczył z motywu `height:50px; line-height:50px` (baza `#site-navigation>ul>li>a`), a mój padding tylko DOKŁADAŁ się do tego, nie zastępował - stąd rozjazd. Jawny reset height/line-height + display:inline-flex/align-items:center daje pełną, niezależną kontrolę zamiast walczyć z odziedziczonymi wartościami. 2. Tło na hover było RÓŻOWE, nie złote - w customizerze motywu jest WYGENEROWANY (nie w tym repo, dynamiczny inline