/* ========================================================================== AnimeRadar V2.4.255 - Mobile-Korrekturen Jede Regel dieser Datei steht in @media (max-width: 959px). Der Desktop wird dadurch nicht erreicht; die Grenze 959/960 ist dieselbe, die das Projekt seit V2.4.212 fuer Mobil und Desktop verwendet. Inhalt: 1. Startseite - Punkte des Wechselbanners aus den Schaltflaechen heraus 2. Startseite - "Naechste Releases" ohne rote Striche 3. Startseite - "Gerade heiss": Titel und Bewertung unter das Bild 4. Entdecken - Filtersymbol in der Suchleiste entfernt 5. Entdecken - Genre-Abzeichen bleiben in der Karte 6. Entdecken - Bildausschnitt der Karten 7. Seasons - Season-Auswahl nutzt die Breite, Jahresarchiv schmal 8. Bibliothek - Werkzeugleiste linksbuendig 9. Kopfzeile - echtes Profilbild statt Initiale 10. Kopfzeile - Account-Menue in der aktuellen Gestaltung ========================================================================== */ @media (max-width: 959px) { /* ======================================================================== */ /* 1. Startseite - Punkte des Wechselbanners */ /* ======================================================================== */ /* Ausgangslage: die Punkte lagen mittig unter der Textspalte und damit genau ueber "Release-Kalender oeffnen" beziehungsweise "Mehr entdecken" - gemessen 1 px Ueberlappung bei 320, 360, 390 und 430. Der Grund ist Platzmangel, kein falscher Versatz: das Karussell ist auf Mobil auf 232 px festgelegt (Referenzmass aus V2.4.212) und die Textspalte fuellt diese Hoehe vollstaendig aus - Titel, Bewertung, Beschreibung und die beiden Schaltflaechen enden exakt an der unteren Innenkante. Mehr Polsterung nach unten haette den Text herausgedrueckt, eine groessere Hoehe das Referenzmass verletzt. Deshalb bekommen die Punkte ihren eigenen Bereich waagerecht statt senkrecht: sie sitzen in der unteren rechten Ecke ueber der Bildspalte. Die Schaltflaechen stehen in der Textspalte links davon; beide Bereiche ueberschneiden sich auf keiner Breite mehr. Die Pille aus styles-v2-4-141.css (dunkler Grund, Rand, Weichzeichner) bleibt und sorgt fuer den Kontrast ueber dem Artwork. */ html body #view-home .hero-carousel-dots { left: auto !important; right: 10px !important; bottom: 14px !important; transform: none !important; } /* ======================================================================== */ /* 2. Startseite - "Naechste Releases" */ /* ======================================================================== */ /* Die roten Striche waren kein Zufall und kein Fehler im Inhalt: jede Zeile traegt aus styles-v2-4-141.css ein ::before mit position: absolute, voller Hoehe und der Markenfarbe - auf Mobil gemessen 2 px breit, rgb(229, 57, 53). Der Desktop blendet genau dieses Element seit V2.4.194 aus, allerdings in einem @media (min-width: 960px)-Block. Mobil hat diese Behandlung nie bekommen. Hier wird sie nachgezogen, und die Zeilen erhalten dieselbe ruhige Kartenflaeche, die die uebrigen mobilen Listen des Projekts verwenden (#101619 auf var(--collection-border), Radius 8). */ html body #view-home .release-stack.compact .release-item::before { display: none !important; } html body #view-home #homeCountdowns .release-item { padding: 8px !important; border: 1px solid var(--collection-border, rgba(167, 187, 195, .18)) !important; border-radius: 8px !important; background: #101619 !important; box-shadow: none !important; } /* Ohne eigenen Abstand stossen die Karten aneinander und wirken wie eine Flaeche. Der Wert entspricht dem Kartenabstand der uebrigen Startseite. */ html body #view-home #homeCountdowns.release-stack { gap: 8px !important; } /* Der Titel darf nicht mehr an der Kartenkante abreissen. */ html body #view-home #homeCountdowns .release-item .release-title { overflow: hidden !important; text-overflow: ellipsis !important; } /* ======================================================================== */ /* 3. Startseite - "Gerade heiss" */ /* ======================================================================== */ /* .poster-info traegt aus styles-v2-4-141.css position: absolute mit left/right/bottom 12 - gedacht als Beschriftung ueber dem Poster. Die mobile Karte ist aber ein Raster aus 66 px Bild und 44 px Textzeile; die absolute Lage hat den Titel deshalb ueber den unteren Bildrand und ueber die rechte Kartenkante hinaus geschoben (gemessen: Bild endet 429, Titel beginnt 426; Titel bis x 152 bei Kartenkante 145). Mobil wird die Beschriftung deshalb wieder Teil des Flusses und fuellt die zweite Rasterzeile. Bild- und Textbereich sind damit sauber getrennt. */ /* Das Bild traegt aus derselben Datei position: absolute mit inset: 0 und liegt damit ebenfalls ausserhalb des Flusses. Beide Teile muessen zurueck in das Raster, sonst landet die Beschriftung in der ersten Zeile und liegt wieder auf dem Bild. */ html body #view-home #trendingRail .poster-card > img { position: static !important; inset: auto !important; height: 66px !important; border-radius: 7px !important; } html body #view-home #trendingRail .poster-card .poster-info { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; } /* Der Verlauf ueber der ganzen Karte war fuer die Beschriftung auf dem Bild gedacht. Unter dem Bild braucht sie ihn nicht mehr, und er wuerde die Textzeile verdunkeln. */ html body #view-home #trendingRail .poster-card::after { content: none !important; } /* ======================================================================== */ /* 4. Entdecken - Filtersymbol in der Suchleiste */ /* ======================================================================== */ /* Nur das Symbol im Eingabefeld entfaellt. Der eigenstaendige Knopf "Mehr Filter" (#searchFilterToggle) bleibt unberuehrt, ebenso die Suchfunktion selbst. display: none nimmt den Knopf zugleich aus der Tastaturreihenfolge. */ html body #view-search .search-input-label .discover-inline-filter { display: none !important; } /* ======================================================================== */ /* 5. Entdecken - Genre-Abzeichen */ /* ======================================================================== */ /* Im Raster ist die Karte auf 390 px nur 173 px breit. Die Abzeichenreihe steht auf flex-wrap: nowrap mit overflow: hidden, das dritte Abzeichen reichte deshalb bis x 205 bei einer Kartenkante von 185 und wurde mitten im Wort abgeschnitten. Statt eines angeschnittenen Abzeichens zeigt die Karte jetzt nur noch vollstaendige: die Reihe darf umbrechen, bleibt aber auf die Hoehe einer Zeile begrenzt. Was nicht mehr in die erste Zeile passt, rutscht in die zweite und wird sauber abgeschnitten. Die Kartenhoehe aendert sich dadurch nicht. In der Listenansicht ist die Karte breit genug, dort aendert sich nichts. */ html body #view-search .search-results:not(.is-list) .search-card-genres { flex-wrap: wrap !important; max-height: 20px !important; overflow: hidden !important; } /* ======================================================================== */ /* 6. Entdecken - Bildausschnitt */ /* ======================================================================== */ /* Es gibt im Projekt keine Fokusdaten zu den Covern - weder in Supabase noch im Master noch in der AniList-Antwort. Der bisherige Wert center 22% stammt aus der Desktop-Konvention, wo das Bildfenster hoeher ist. Auf Mobil zeigt das Fenster nur rund 45 Prozent der Posterhoehe; bei 22 Prozent landet es auf dem oberen Kopfbereich. Der Ausschnitt wandert deshalb nach unten: bei gleichem Fenster liegt er damit ueber Gesicht und Oberkoerper statt ueber Stirn und Haaransatz. Kein Wert je Titel, keine Bilderkennung - nur eine andere Regel fuer das flachere mobile Fenster. */ /* Der Selektor entspricht genau dem der Mobilregel aus material-reference-discover-v2-4-194.css; dieses Blatt laedt spaeter und gewinnt deshalb bei gleicher Spezifitaet. */ html body #view-search .search-row-image-link img { object-fit: cover !important; object-position: center 35% !important; } /* ======================================================================== */ /* 7. Seasons - Season-Auswahl und Jahresarchiv */ /* ======================================================================== */ /* Gemessen auf 390: die Zeile ist 366 px breit, der Chip-Scroller bekam davon nur 255 px, weil das Jahresarchiv daneben 102 px belegte - fuer einen Aufklapper, der auf Mobil ausser dem Pfeil nichts zeigt. Dadurch waren nur zwei Seasons sichtbar, obwohl Platz fuer drei war. Das Archiv wird deshalb auf die Breite seines Symbols gesetzt. Der gewonnene Platz geht an den Scroller; waagerechtes Scrollen bleibt moeglich, greift aber erst, wenn die Breite wirklich ausgeschoepft ist. Die Beschriftung bleibt als aria-label erhalten, die Trefferflaeche bleibt 40 px hoch. */ /* Der eigentliche Grund fuer die ungenutzte Flaeche: die Zeile ist ein Raster mit fest verdrahteter zweiter Spalte von 102 px (material-targeted-fixes-v2-4-214.css, @media max-width 760). Der Aufklapper zeigt auf Mobil aber nur seinen Pfeil. Die Spalte bekommt deshalb die Breite, die der Knopf wirklich braucht; die gewonnenen 62 px gehen an die Season-Schaltflaechen. */ html body #view-season .seasons-tabrow { grid-template-columns: minmax(0, 1fr) 40px !important; } html body #view-season .season-year-dropdown.seasons-archive > summary { width: 40px !important; min-width: 40px !important; padding-inline: 0 !important; justify-content: center !important; } html body #view-season .season-year-dropdown.seasons-archive { flex: 0 0 auto !important; width: 40px !important; min-width: 40px !important; } html body #view-season .season-year-dropdown.seasons-archive > summary #seasonYearMoreLabel, html body #view-season .season-year-dropdown.seasons-archive > summary > span:not([class]) { display: none !important; } html body #view-season .season-button-group.seasons-tabs { flex: 1 1 auto !important; min-width: 0 !important; } /* Das Jahresmenue haengt am Aufklapper und wuerde bei 40 px Ankerbreite aus dem Bild laufen. Es wird deshalb rechtsbuendig am Anker verankert und in der Breite an das Sichtfeld gebunden. */ html body #view-season .season-year-dropdown.seasons-archive .season-year-menu { left: auto !important; right: 0 !important; min-width: 168px !important; max-width: calc(100vw - 32px) !important; max-height: 60vh !important; overflow-y: auto !important; z-index: 60 !important; } /* ======================================================================== */ /* 8. Bibliothek - Werkzeugleiste */ /* ======================================================================== */ /* material-ui-fixes-v2-4-233.css setzt die Leiste auf Mobil auf justify-content: flex-end. Die drei Knoepfe standen dadurch rechts, mit 87 px ungenutzter Flaeche links. Auf Mobil wird daraus flex-start; die Reihenfolge Liste erstellen, Importieren, Exportieren bleibt, der Umbruch bei zu schmaler Breite ebenfalls. Die Desktop-Regel (margin-left: auto) steht ausserhalb dieses Media-Blocks und bleibt unveraendert. */ html body #view-lists .lib-listbar-actions { justify-content: flex-start !important; } /* ======================================================================== */ /* 9. Kopfzeile - echtes Profilbild */ /* ======================================================================== */ /* V2.4.223 hatte auf Mobil bewusst das Bild ausgeblendet und stattdessen die Initiale als ::after gesetzt. Beides lief unabhaengig voneinander: das war zwar im Markup, aber display: none, und die Initiale erschien immer - auch wenn ein Bild vorhanden war. Nach der neuen Vorgabe gilt wieder: Bild wenn vorhanden, Initiale nur als Rueckfall. Die Umschaltung macht die Klasse has-avatar, die renderAuthState() setzt, sobald ein Bild wirklich geladen ist; bei einem Ladefehler nimmt der Renderpfad sie wieder zurueck. So bleibt kein Buchstabe ueber dem Bild stehen. */ html body.is-signed-in .topbar .top-account-button .top-account-avatar img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: 50% !important; } /* Die Initiale kommt wieder aus dem Textinhalt, den renderAuthState() ohnehin setzt und den der Desktop seit jeher nutzt. Das ::after aus V2.4.223 entfaellt damit ganz - sonst stuenden bei fehlendem Bild zwei Buchstaben uebereinander, einer aus dem Text und einer aus dem Pseudoelement. */ html body.is-signed-in .topbar .top-account-button .top-account-avatar::after { content: none !important; } /* Ohne Bild bleibt es beim bisherigen Zustand: Initiale auf der roten Flaeche. Mit Bild traegt die Flaeche nichts mehr bei. */ html body.is-signed-in .topbar .top-account-button .top-account-avatar.has-avatar { background: #0c1114 !important; } html body .top-account-avatar { aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 50% !important; } /* ======================================================================== */ /* 10. Kopfzeile - Account-Menue */ /* ======================================================================== */ /* Das Menue trug noch die alte Gestaltung: durchsichtiger Grund ohne Weichzeichner und ein goldener Rand (rgba(244, 185, 95, .46)), der sonst nirgends mehr vorkommt. Es uebernimmt jetzt dieselbe Bildsprache wie die uebrigen Aufklapper der Anwendung - dunkler, leicht blaeulicher Grund mit Weichzeichner, feiner heller Rand, Radius 14, weisse Haupt- und graue Nebentexte. Aufbau, Funktion und Beschriftungen bleiben unveraendert; nur die Darstellung wird ersetzt. */ html body .mobile-account-menu:not(.is-hidden) { display: grid !important; gap: 2px !important; /* Rechts am Profilbild verankert; die Breite bleibt so, dass links genug Seite sichtbar bleibt und der Rand rechts nicht klebt. */ width: min(78vw, 240px) !important; max-width: calc(100vw - 24px) !important; padding: 6px !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 14px !important; background: rgba(13, 17, 23, .94) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .03) inset !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } html body .mobile-account-menu.is-hidden { display: none !important; } /* Die alte goldene Lichtkante ueber dem Menue gehoert nicht mehr zur Bildsprache und entfaellt. */ html body .mobile-account-menu:not(.is-hidden)::before { content: none !important; } html body .mobile-account-menu button { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; width: 100% !important; /* 44 px Trefferflaeche, unabhaengig von der Schriftgroesse. */ min-height: 44px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #eef2f5 !important; font-size: 14px !important; font-weight: 550 !important; line-height: 1.2 !important; text-align: left !important; cursor: pointer; } html body .mobile-account-menu button > span[aria-hidden="true"] { display: grid !important; place-items: center !important; width: 20px !important; color: #9fb0bb !important; font-size: 15px !important; line-height: 1 !important; } /* Die Beschriftung selbst: aeltere Blaetter setzen hier eigene Groessen und Farben, die sonst gegen die neue Gestaltung stehen. */ html body .mobile-account-menu button > span:last-child { min-width: 0 !important; color: inherit !important; font-size: 14px !important; font-weight: 550 !important; letter-spacing: 0 !important; text-transform: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .mobile-account-menu button:where(:hover, :focus-visible) { background: rgba(255, 255, 255, .07) !important; } html body .mobile-account-menu button:active { background: rgba(255, 255, 255, .11) !important; } /* "Abmelden" bleibt die abweichende Aktion und traegt weiter die Markenfarbe - jetzt nur im Text und im Symbol, nicht als Flaeche. */ html body .mobile-account-menu button.danger, html body .mobile-account-menu button.danger > span[aria-hidden="true"] { color: var(--md-primary, #e53935) !important; } html body .mobile-account-menu button.danger:where(:hover, :focus-visible) { background: rgba(229, 57, 53, .14) !important; } /* Eine feine Trennlinie zwischen Navigation und Abmelden, wie in den uebrigen Menues des Projekts. */ html body .mobile-account-menu button.danger { margin-top: 4px !important; border-top: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 0 0 10px 10px !important; padding-top: 2px !important; } }