/* * AnimeRadar V2.4.244 - Mobile-Korrekturen. * * Alle Regeln hier gelten ausschliesslich unterhalb der Desktopgrenze. Ziel * ist keine eigene Mobilgestaltung, sondern dieselbe Bildsprache wie auf dem * Desktop. Jede Korrektur nennt den gemessenen Ausgangswert. * * Die Datei steht nach material-giveaway-entry-v2-4-243.css und vor * material-ui-fixes-v2-4-235.css. */ /* ========================================================================== */ /* 1. Profilbild in der Mobilkopfzeile war eine Ellipse */ /* */ /* Gemessen bei 360 bis 430 px im angemeldeten Zustand: #authBtnAvatar war */ /* 18 x 36 px bei border-radius 50 Prozent - also ein stehendes Oval. */ /* */ /* Zwei Ursachen greifen ineinander: */ /* */ /* a) styles-v2-4-141.css, @media (max-width: 760px): */ /* ".top-actions .solid-action#authBtn { padding-inline: 9px !important }"*/ /* Diese alte Regel traegt eine ID und schlaegt damit die neuere Regel */ /* "html body.is-signed-in .topbar .top-account-button { padding: 0 */ /* !important }" aus material-reference-shell-v2-4-194.css. Der runde */ /* Knopf ist 38 px breit; mit 2 x 9 px Innenabstand und 2 x 1 px Rand */ /* bleiben innen 18 px. */ /* */ /* b) styles-v2-4-141.css: "*, *::before, *::after { max-inline-size: 100% }"*/ /* klemmt den 36 px breiten Avatar auf diese 18 px. Die Hoehe bleibt bei */ /* 36 px, weil sie nicht geklemmt wird. */ /* */ /* Korrektur: der Innenabstand des Knopfes wird im angemeldeten Zustand mit */ /* gleicher ID-Spezifitaet auf 0 gesetzt, und der Avatar wird vom globalen */ /* Klemmer ausgenommen. aspect-ratio haelt ihn zusaetzlich quadratisch, falls */ /* eine kuenftige Regel nur eine der beiden Achsen setzt. */ /* ========================================================================== */ @media (max-width: 959px) { html body.is-signed-in .topbar .top-account-button#authBtn { padding: 0 !important; padding-inline: 0 !important; } html body .top-account-avatar, html body .top-account-avatar img { max-inline-size: none; max-width: none; flex-shrink: 0; } html body .top-account-avatar { aspect-ratio: 1 / 1; } /* Der runde Knopf der Mobilkopfzeile zeigt seit V2.4.223 bewusst die Initiale statt des Fotos, material-social-media-v2-4-223.css setzt das Bild dort auf display: none. Die folgenden zwei Regeln greifen deshalb nur dort, wo derselbe Avatar mit Bild erscheint, und halten es rund und unverzerrt. */ html body .top-account-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } /* ========================================================================== */ /* 2. Startseite: Kartenflaechen wie auf dem Desktop */ /* */ /* Gemessen Desktop gegen Mobil (390): */ /* .pulse-card rgba(26, 18, 17, .42) gegen rgb(35, 18, 22) */ /* .content-band rgba(26, 18, 17, .42) gegen rgb(27, 13, 16) */ /* .hero-panel rgba(26, 18, 17, .42) gegen rgb(27, 13, 16) */ /* .poster-card rgb(14, 8, 8) gegen rgb(27, 13, 16) */ /* Rand rgb(43, 29, 32) gegen rgb(58, 42, 45) */ /* Schatten keiner gegen vorhanden */ /* */ /* Ursache: material-reference-home-v2-4-194.css setzt die Kartenfamilie der */ /* Startseite nur innerhalb von @media (min-width: 960px). Unterhalb davon */ /* gewinnt die aeltere Gruppe aus material-redesign-v2-4-194.css mit */ /* --md-surface, --md-outline und --md-elevation-1. */ /* */ /* Korrektur: dieselben Werte wie auf dem Desktop, aus denselben Variablen. */ /* Nur Flaeche, Rand, Radius und Schatten - Groessen, Abstaende und Raster */ /* der Mobilansicht bleiben unangetastet. Die Durchsichtigkeit des Desktops */ /* wird bewusst nicht uebernommen: hinter der Shell liegt auf Mobile kein */ /* Hintergrundbild, dort ist der deckende Grundton dasselbe Ergebnis. */ /* ========================================================================== */ @media (max-width: 959px) { html body #view-home .hero-panel, html body #view-home .pulse-card, html body #view-home .content-band, html body #view-home .watch-box, html body #view-home .accent-box { border: 1px solid var(--home-card-line) !important; border-radius: var(--home-card-radius) !important; background: var(--home-card-bg) !important; box-shadow: none !important; } html body #view-home .poster-card { border: 1px solid var(--home-card-line) !important; border-radius: var(--home-card-radius) !important; background: var(--home-sub-bg) !important; box-shadow: none !important; } /* Die Reihe "Naechste Releases" trug mobil einen Schatten, den es auf dem Desktop nicht gibt. */ html body #view-home .release-item { box-shadow: none !important; } } /* ========================================================================== */ /* 3. Seasons: abgeschnittener Text im Sortierfeld */ /* */ /* Gemessen bei 390: das Feld ist 112 px breit, davon 10 px Innenabstand. */ /* .ar-select-btn ist in styles-v2-4-141.css ein Raster mit den Spalten */ /* "minmax(0, 1fr) 44px" - die zweite Spalte ist fuer den Pfeil reserviert. */ /* Fuer den Text bleiben damit 56 px Kastenbreite, davon 24 px eigener */ /* Innenabstand: 32 px fuer ein Wort, das 55 px braucht. Auf dem Desktop ist */ /* das Feld 190 px breit, dort faellt dieselbe 44-px-Spalte nicht auf. */ /* */ /* Korrektur: die Pfeilspalte wird mobil auf die Breite gebracht, die der */ /* Pfeil tatsaechlich braucht, und das Feld waechst um 12 px. Schriftgroesse, */ /* Hoehe und Farben bleiben wie in der Referenz. */ /* ========================================================================== */ @media (max-width: 760px) { html body #view-season .seasons-reference-actions > .ar-select { width: 124px; min-width: 124px; } html body #view-season .seasons-reference-actions > .ar-select .ar-select-btn { grid-template-columns: minmax(0, 1fr) 24px !important; } html body #view-season .seasons-reference-actions > .ar-select .ar-select-text { min-width: 0; } } @media (max-width: 370px) { html body #view-season .seasons-reference-actions { grid-template-columns: auto 118px 73px; } html body #view-season .seasons-reference-actions > .ar-select { width: 118px; min-width: 118px; } } /* ========================================================================== */ /* 4. Entdecken: Sortierfeld war nur 28 px hoch */ /* */ /* Gemessen bei 390: 28 px gegenueber 35 px auf dem Desktop. Damit liegt das */ /* Tippziel unter der Hoehe der uebrigen Bedienelemente der Seite (Filter und */ /* Ansichtsschalter liegen bei 34 px). Schrift und Farben bleiben unveraendert.*/ /* ========================================================================== */ @media (max-width: 959px) { html body #view-search .discover-toolbar-end .ar-select .ar-select-btn { height: 34px !important; min-height: 34px !important; } } /* ========================================================================== */ /* 5. Anime-Detail: Episodenzeile und Schnellaktionen auf Mobil */ /* */ /* a) Episodenzeile. Gemessen auf der Uebersicht: der Titel ist bei 360 px */ /* genau 6 px breit, bei 390 px 36 px - im Bild steht "Folge" ohne Nummer. */ /* Die Zeile ist ein Raster mit sechs Spalten: */ /* "20px 46px minmax(0, 1fr) 58px 82px 28px" */ /* Spalte vier und fuenf gehoeren .detail-eprow-duration und */ /* .detail-eprow-aired. Beide sind unterhalb von 760 px auf display: none */ /* gesetzt, ihre Spalten bleiben jedoch stehen und belegen zusammen mit */ /* den Abstaenden rund 160 px. */ /* */ /* material-reference-detail-v2-4-194.css raeumt das in */ /* "@media (max-width: 760px)" bereits auf, aber nur ueber */ /* "html body #view-detail .detail-eprow" - eine ID und eine Klasse. Die */ /* Zeilenvarianten stehen mit ".detail-eplist.is-compact .detail-eprow" */ /* und ".detail-eplist.has-no-dates.has-no-streams .detail-eprow" bei drei */ /* bzw. vier Klassen und gewinnen deshalb auch innerhalb der Media Query. */ /* */ /* Korrektur: dieselbe Vereinfachung noch einmal mit passender */ /* Spezifitaet. Auf Mobil beanspruchen nur die vier sichtbaren Zellen */ /* Platz - Nummer, Vorschaubild, Titel, Status. Spaltenbreiten und */ /* Abstaende bleiben die der jeweiligen Variante. */ /* */ /* b) Schnellaktionen. Gemessen bei 390 px: .detail-episodes-top-grid ist ein */ /* Zweispalter "minmax(0, 570fr) minmax(0, 273fr)" ohne Mobilregel. Die */ /* rechte Spalte ist dort 97 px breit, ihr Inhalt braucht 112 px; die */ /* linke Spalte ist 203 px breit bei 238 px Inhalt. Ergebnis: "Als gesehen */ /* markieren" bricht auf drei Zeilen, "Alle als ungesehen" wird von der */ /* Kartenkante abgeschnitten. Auf dem Desktop stehen beide Bloecke */ /* nebeneinander; mobil gehoeren sie untereinander. */ /* ========================================================================== */ @media (max-width: 760px) { html body #view-detail .detail-eplist.has-no-dates.has-no-streams .detail-eprow, html body #view-detail .detail-eplist.has-no-dates .detail-eprow, html body #view-detail .detail-eplist.has-no-streams .detail-eprow, html body #view-detail .detail-eplist .detail-eprow { grid-template-columns: 22px 52px minmax(0, 1fr) 30px; } html body #view-detail .detail-eplist.is-compact.has-no-dates.has-no-streams .detail-eprow, html body #view-detail .detail-eplist.is-compact.has-no-dates .detail-eprow, html body #view-detail .detail-eplist.is-compact.has-no-streams .detail-eprow, html body #view-detail .detail-eplist.is-compact .detail-eprow { grid-template-columns: 20px 46px minmax(0, 1fr) 28px; } html body #view-detail .detail-episodes-top-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ========================================================================== */ /* 6. Kalender: leere Tageskarte war rechts abgeschnitten */ /* */ /* Gemessen bei 390 px im Monatsraster: .ui-state-card in */ /* .cal-month-day-list ist 354 px breit - genau so breit wie die Liste - und */ /* traegt gleichzeitig "margin: 12px 13px" aus */ /* material-reference-calendar-v2-4-194.css. Die 13 px des rechten Rands */ /* schieben die Karte ueber die Kante, .cal-month-day schneidet sie dort ab. */ /* Ursache ist "width: 100%" auf .ui-state-card in styles-v2-4-141.css. */ /* */ /* Korrektur: die Karte bemisst sich mobil nach dem verbleibenden Platz, die */ /* beabsichtigte Einrueckung von 13 px bleibt auf beiden Seiten erhalten. */ /* Der Desktop behaelt seine Breite - dort steht die Liste auf overflow-x: */ /* auto und zeigt dieselbe Ueberbreite als Scrollschiene, was ausserhalb */ /* dieses Mobil-Auftrags liegt. */ /* ========================================================================== */ @media (max-width: 959px) { html body #view-calendar .cal-month-day-list .ui-state-card { width: auto; } } /* ========================================================================== */ /* 7. Anime-Detail: Werkzeugzeile der Folgentabelle bei 320 px */ /* */ /* Gemessen bei 320 px: .detail-eptable-tools ist 254 px breit, ihr Inhalt */ /* braucht 286 px (Legende 184, Abstand 14, Sortierknopf 88) und steht auf */ /* flex-wrap: nowrap. Der Sortierknopf wird dadurch um 16 px von der */ /* Kartenkante abgeschnitten. Ab 360 px passt die Zeile exakt, deshalb greift */ /* die Korrektur nur darunter. */ /* ========================================================================== */ @media (max-width: 359px) { html body #view-detail .detail-eptable-tools { flex-wrap: wrap; } } /* ========================================================================== */ /* 8. Entdecken: geoeffnete Auswahlmenues lagen hinter den Nachbarfeldern */ /* */ /* Gemessen bei 320 bis 430 px: das offene Menue von "Alle Genres" wird an 33 */ /* abgetasteten Punkten von den beiden folgenden Feldern ueberdeckt - */ /* .ar-select-btn, .ar-select-text und .ar-select-arrow von */ /* "Alle Streaming-Anbieter" und vom Sortierfeld liegen darueber. Ursache: */ /* jedes .ar-select steht auf "position: relative; z-index: 20". Bei gleichem */ /* z-index entscheidet die Reihenfolge im Dokument, und das Menue selbst kann */ /* mit seinem z-index 9999 nichts ausrichten, weil es im Stapelkontext seines */ /* eigenen Feldes gefangen ist. */ /* */ /* Korrektur: das gerade geoeffnete Feld kommt nach vorn. Im geschlossenen */ /* Zustand aendert sich nichts, deshalb bleibt auch die Darstellung gleich. */ /* Der Wert 30 liegt ueber den 20 der Nachbarfelder und unter den 60 der */ /* unteren Navigationsleiste, die weiterhin oben liegen muss. */ /* */ /* Dieselbe Gleichstand-Situation besteht auf dem Desktop im Markup, ist dort */ /* aber nicht aufgetreten, weil die Felder in der Filterkarte untereinander */ /* stehen. Der Desktop wird deshalb nicht angefasst. */ /* ========================================================================== */ @media (max-width: 959px) { html body .ar-select.is-open { z-index: 30; } /* Das Genrefeld steckt zusaetzlich in einem Etikett, das in material-targeted-fixes-v2-4-214.css auf "position: relative; z-index: 1" steht. Damit bildet es einen eigenen Stapelkontext, und alles darin - auch ein Menue mit z-index 9999 - bleibt unter den Nachbarfeldern mit z-index 20. Das Etikett kommt deshalb mit nach vorn, solange sein Menue offen ist. */ html body #view-search .discover-mobile-genre-field:has(.ar-select.is-open) { z-index: 30; } } /* ========================================================================== */ /* 9. Entdecken: Sortiermenue ragte rechts aus dem Bild */ /* */ /* Gemessen: .ar-select-menu steht in styles-v2-4-141.css auf "left: 0; */ /* right: 0; min-width: 180px". Das Sortierfeld ist 136 px breit und sitzt am */ /* rechten Rand der Werkzeugzeile, also waechst das Menue nach rechts ueber */ /* das Fenster hinaus: bei 390 px um 21 px, bei 393 px um 18 px, bei 320 px */ /* um 2 px. Sichtbar wird das als abgeschnittene rechte Menuekante, einen */ /* waagerechten Scrollbalken gibt es wegen overflow-x: clip nicht. */ /* */ /* Korrektur: das Menue haengt mobil an der rechten Kante seines Feldes und */ /* waechst nach links. Breite, Hoehe und Gestaltung bleiben unveraendert. */ /* ========================================================================== */ @media (max-width: 959px) { html body #view-search .discover-toolbar-end .ar-select .ar-select-menu { left: auto; right: 0; } } /* ========================================================================== */ /* 10. Profil bei 320 px: Legende des Statistikrings war abgeschnitten */ /* */ /* Gemessen bei 320 px auf dem Reiter "Statistik": .profile-gm-donut-wrap ist */ /* ein Zweispalter "140px minmax(0, 1fr)" in einem 228 px breiten Kasten. Der */ /* Ring belegt 145 px, die Legende braucht als kleinste Breite 126 px, dazu */ /* 10 px Abstand - zusammen 281 px. Die Legende ragt dadurch 12 px ueber den */ /* Bildschirmrand und wird abgeschnitten. Ab 360 px passt beides nebeneinander*/ /* (gemessen kein Ueberstand), deshalb greift die Korrektur nur darunter. */ /* */ /* Die massgebliche Regel steht in material-reference-pages-v2-4-194.css bei */ /* ".profile-gm-status-chart .profile-gm-donut-wrap" mit "145px 1fr". Ein */ /* 1fr hat als Mindestbreite min-content, deshalb schrumpft die Legende nicht */ /* mit. Der Selektor wird hier in gleicher Tiefe aufgegriffen. */ /* ========================================================================== */ @media (max-width: 359px) { html body #view-profile .profile-gm-status-chart .profile-gm-donut-wrap, html body #view-profile .profile-gm-donut-wrap { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== */ /* 11. Zwei Dialoge waren um die Breite der Bildlaufleiste zu breit */ /* */ /* material-redesign-v2-4-194.css setzt unterhalb von 760 px fuer alle */ /* Dialoge "width: 100dvw !important". 100dvw schliesst eine klassische */ /* Bildlaufleiste mit ein, der sichtbare Bereich nicht. Gemessen bei einem */ /* 390-px-Fenster: Dialog 390 px, Sichtbereich 380 px. Fuenf der sieben */ /* Dialoge haben eigene, spaetere Breitenregeln und sind deshalb nicht */ /* betroffen; bei .release-planner-info-dialog und .avatar-crop-dialog bleibt */ /* die globale Regel stehen, und bei 320 und 360 px rutscht dadurch der */ /* Schliessen-Knopf aus dem Bild. */ /* */ /* Auf Geraeten mit ueberlagerter Bildlaufleiste faellt das nicht auf, in */ /* einem schmalen Fenster am Rechner schon. 100 Prozent bezieht sich beim */ /* modalen Dialog auf den Sichtbereich und ist damit in beiden Faellen */ /* richtig. */ /* ========================================================================== */ @media (max-width: 760px) { html body dialog.release-planner-info-dialog, html body dialog.avatar-crop-dialog { width: 100% !important; max-width: 100% !important; } }