/* ========================================================================== AnimeRadar V2.4.259 - Mobile-Korrekturen in Detailansicht und Profil Alle Regeln stehen in @media (max-width: 959px) - die Grenze, die das Projekt seit V2.4.212 fuer Mobil und Desktop verwendet. Der Desktop wird von dieser Datei nicht erreicht. Die Statistik-Korrektur dieser Runde liegt nicht hier, sondern in material-profile-detail-v2-4-247.css: dort fehlte in den Flaechenkarten der schmalen Breiten der Name "topgenres". Das ist die Ursache und gehoert an ihre Stelle, nicht in ein Korrekturblatt. Inhalt: 1. Detailansicht - "Deine Bewertung" im Rezensionen-Reiter 2. Profil - Dropdowns der Bewertungen 3. Profil - Aktionen der Erinnerungen ========================================================================== */ @media (max-width: 959px) { /* ======================================================================== */ /* 1. "Deine Bewertung" im Rezensionen-Reiter */ /* ======================================================================== */ /* Gemessen bei 390: Beschriftung und Wert standen als zwei Inline-Elemente in einem Block ohne jeden Zwischenraum - Abstand exakt 0 px, beide auf derselben Zeile, der Wert zusaetzlich in Grossbuchstaben. Daraus wurde "Deine BewertungNOCH NICHT BEWERTET". Auf dem Desktop stehen dieselben beiden Elemente untereinander und lesen sich einwandfrei; dort wird nichts geaendert. Mobil wird die Zeile zu einem Flexbereich mit echtem Abstand. Im unbewerteten Fall treten Beschriftung und Wert ganz zurueck und es steht ein vollstaendiger Satz da. */ html body #view-detail .rating-editor-head > .rating-editor-label { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 8px !important; min-width: 0 !important; } /* Der Wert steht in normaler Schreibweise - die Versalien kamen aus einer aelteren Mobilregel und klebten optisch an der Beschriftung. */ html body #view-detail .rating-editor-head > .rating-editor-label > strong { text-transform: none !important; letter-spacing: 0 !important; } /* Unbewertet: ein Satz statt Beschriftung plus Platzhalterwert. */ html body #view-detail .rating-editor-label.is-unrated > small:not(.rating-editor-unrated-hint), html body #view-detail .rating-editor-label.is-unrated > strong { display: none !important; } html body #view-detail .rating-editor-label.is-unrated > .rating-editor-unrated-hint.is-hidden { display: block !important; color: var(--md-muted, #aeb6bb) !important; font-size: 12.5px !important; line-height: 1.35 !important; text-transform: none !important; } /* Bewertet: Beschriftung, Abstand, Wert - der Abstand kommt aus dem gap oben, nicht aus einem Leerzeichen im Text. */ html body #view-detail .rating-editor-label.is-rated > .rating-editor-unrated-hint { display: none !important; } /* ======================================================================== */ /* 2. Dropdowns der Bewertungen */ /* ======================================================================== */ /* Ausgangslage, gemessen bei 390: der Knopf ist 146 x 34 px, der Pfeil darin 44 x 32 px. Der Grund: jede andere Ansicht des Projekts (Kalender, Entdecken, Bibliothek, News, Roadmap, Modale) bringt eine eigene Regel fuer .ar-select-arrow mit - das Profil nicht. Dort blieb die Grundfassung aus styles-v2-4-141.css stehen: ein Rasterfeld mit eigener Flaeche und linker Trennlinie, das sich die Breite nimmt, die das Raster ihm gibt. Die Beschriftung wurde dadurch abgeschnitten (benoetigt 88 px, verfuegbar 78). Auf dem Desktop ist der Knopf breiter; dort wird nichts abgeschnitten und deshalb auch nichts geaendert. */ /* Entscheidend ist die Spur, nicht das Element: der Knopf ist ein Raster mit grid-template-columns: minmax(0, 1fr) 44px. Wird nur der Pfeil schmaler gemacht, bleibt die 44-px-Spur stehen und der Beschriftung fehlen weiterhin 26 px. Deshalb wird hier die Spur selbst verkleinert. Die Raender sind zugleich enger gefasst: bei 320 ist der Knopf 111 px breit, mit 10 + 8 px Rand, 4 px Spalte und 18 px Pfeilspur bleiben 71 px fuer den Text - die laengste Grundbeschriftung "Genre: Alle" braucht 67 px. */ html body #view-profile .profile-gm-rating-toolbar .ar-select-btn { grid-template-columns: minmax(0, 1fr) 18px !important; gap: 4px !important; padding: 0 8px 0 10px !important; } html body #view-profile .profile-gm-rating-toolbar .ar-select-arrow { width: 18px !important; min-width: 18px !important; /* Keine eigene Flaeche und keine Trennlinie - der Pfeil sitzt im Feld, er teilt es nicht. */ border: 0 !important; border-left: 0 !important; background: none !important; place-items: center !important; } html body #view-profile .profile-gm-rating-toolbar .ar-select-arrow::before { width: 7px !important; height: 7px !important; border-right-width: 1.6px !important; border-bottom-width: 1.6px !important; } html body #view-profile .profile-gm-rating-toolbar .ar-select-text { padding: 0 !important; min-width: 0 !important; } /* Die Leiste selbst darf das geoeffnete Menue nicht abschneiden. material-reference-pages-v2-4-194.css setzt ab 760 px abwaerts overflow-x: auto. Das stammt aus der Zeit, als hier echte select- Elemente in einer einzigen, nicht umbrechenden Zeile standen und waagerecht geschoben werden mussten. Seit V2.4.247 bricht die Leiste um (flex-wrap: wrap, width: 100%), die waagerechte Rolle ist also gegenstandslos - ihre Nebenwirkung aber nicht: ein overflow-x ungleich visible zwingt auch overflow-y auf auto. Die Leiste wurde damit zum Rollbereich und hat das aufgeklappte Menue senkrecht abgeschnitten. Gemessen bei 320 und 390: Leiste 118 px hoch, Menue 280 px - 204 px davon lagen unterhalb der Kante. Auf dem Desktop gab es diese Regel nie; dort ist nichts zu tun. */ html body #view-profile .profile-gm-rating-toolbar { overflow: visible !important; } /* Das Menue selbst liegt als Overlay ueber dem Inhalt (position: absolute, z-index 9999) und verschiebt nichts - nachgemessen: 0 px Layoutverschiebung. Hier wird nur sichergestellt, dass es breit genug bleibt und am rechten Rand nicht herauslaeuft. */ html body #view-profile .profile-gm-rating-toolbar .ar-select-menu { min-width: min(220px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; } /* ======================================================================== */ /* 3. Aktionen der Erinnerungen */ /* ======================================================================== */ /* Gemessen bei 390: "Aktualisieren" y 671..707, "Alle deaktivieren" y 675..711 - vier Pixel versetzt. Beide sind 36 px hoch und stehen in einem Flexbereich mit align-items: center; der zweite Knopf trug zusaetzlich margin-top: 8px und wurde dadurch nach unten geschoben. Auf dem Desktop haben beide margin 0 und stehen bereits auf einer Linie - dort ist nichts zu tun. Der Abstand zwischen den Knoepfen kommt jetzt aus dem gap des Flexbereichs, nicht aus einem Rand an einem der beiden. */ html body #view-profile .release-reminders-head-actions { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 8px !important; } html body #view-profile .release-reminders-head-actions > * { margin: 0 !important; /* Gleiche Hoehe, unabhaengig davon, ob der Knopf als block oder flex gerendert wird. */ min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Reicht die Breite nicht, brechen beide sauber um und stehen dann jeweils ueber die volle Breite - nicht halb versetzt nebeneinander. */ @media (max-width: 360px) { html body #view-profile .release-reminders-head-actions > * { flex: 1 1 100% !important; } } }