/* ========================================================================== AnimeRadar V2.4.260 - Mobile: Bewertungskarten, Filterraster, Mehr-Menue 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. Inhalt: 1. Profil - Datum innerhalb der Bewertungskarte 2. Profil - Filter der Bewertungen als Raster 3. Mehr-Menue im aktuellen AnimeRadar-Stil 4. Bug melden / Feature Wunsch - das Menue klappt nach unten auf ========================================================================== */ @media (max-width: 959px) { /* ======================================================================== */ /* 1. Datum innerhalb der Bewertungskarte */ /* ======================================================================== */ /* Gemessen bei 320, 390, 430, 768: das Datum stand in jeder Karte 25 px ueber der rechten Kante. Der Grund ist der Flaechenplan der Karte. Die letzte Zeile lautet "status status datum", das Datum landet also in der dritten Spalte - und die ist 30 px breit, weil sie fuer den Kebab-Knopf gemacht wurde. Das Datum ist mit white-space: nowrap 55 px breit. Der Kasten bleibt bei 30 px, der Text laeuft heraus. Der Elementkasten allein verraet das nicht: er endet sauber an der Kartenkante. Sichtbar wird es erst, wenn man den gemalten Text misst (Range statt getBoundingClientRect) - dort stehen 240..295 gegen eine Karte, die bei 270 endet. Korrektur an der Ursache: die dritte Spur richtet sich nach ihrem Inhalt. "auto" nimmt das breiteste Element der Spur - Kebab 30, Datum 55 - und ist damit unabhaengig von Datumsformat, Sprache und Schriftgroesse. Kein fester Wert, kein overflow: hidden, kein abgeschnittener Text. Auf dem Desktop hat das Datum eine eigene 92-px-Spalte und stand nie falsch; dort wird nichts geaendert. */ /* Die Grenze ist hier 760 und nicht 959: erst ab dort wird aus der Tabellenzeile ueberhaupt eine Karte (material-profile-detail-v2-4-247, @media max-width: 760px). Zwischen 761 und 959 steht weiter die siebenspaltige Tabelle - griffe die Korrektur schon dort, fielen deren sieben Zellen in drei Spalten. */ @media (max-width: 760px) { html body #view-profile .profile-gm-rating-row:not(.is-head) { grid-template-columns: 42px minmax(0, 1fr) auto !important; } /* Die Spur ist jetzt so breit wie das Datum. Damit der Kebab-Knopf trotzdem buendig an der Kante sitzt und nicht links in der Spur klebt. */ html body #view-profile .profile-gm-rt-action { justify-self: end !important; } } /* ======================================================================== */ /* 2. Filter der Bewertungen als Raster */ /* ======================================================================== */ /* Ausgangslage, gemessen bei 320 bis 430: die Leiste war ein Flexbereich mit flex: 1 1 40% je Feld. Die Huelle war dadurch zwar ueberall gleich breit, der Knopf darin aber nicht - er nahm seine Inhaltsbreite. Bei 390 standen 106, 109, 99, 107 und 145 px nebeneinander. Das fuenfte Feld (Sortierung) sass allein in der letzten Reihe und zog sich ueber die volle Breite, waehrend sein Knopf nur 145 px mass. Jetzt ein echtes Raster: zwei gleich breite Spalten, jedes Feld fuellt seine Zelle vollstaendig. Die Sortierung steht bewusst ueber beide Spalten - sie ist kein Filter und bekommt die letzte Reihe fuer sich, statt eine halb leere Reihe zu hinterlassen. */ /* Auch hier 760: die Leiste gehoert zur Kartenansicht. Zwischen 761 und 959 steht die Tabelle, und dazu gehoert die bisherige Zeile. */ @media (max-width: 760px) { html body #view-profile .profile-gm-rating-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin-left: 0 !important; } /* flex: 1 1 40% stammt aus der bisherigen Flex-Fassung und hat im Raster nichts mehr zu suchen. Es wirkt aber nach: die Sortierung, die ueber beide Spalten laufen soll, blieb damit bei 145 statt 300 px stehen - obwohl justify-self bereits stretch ergab. Deshalb wird die Eigenschaft hier ausdruecklich zurueckgenommen und die Breite ueber width gesetzt. */ html body #view-profile .profile-gm-rating-toolbar > * { min-width: 0 !important; margin: 0 !important; flex: none !important; width: 100% !important; } html body #view-profile .profile-gm-rating-toolbar > .profile-gm-rating-sort { grid-column: 1 / -1 !important; } /* Der Stellvertreter fuellt seine Zelle - das ist der Schritt, der aus gleich breiten Huellen auch gleich breite Knoepfe macht. */ html body #view-profile .profile-gm-rating-toolbar .ar-select, html body #view-profile .profile-gm-rating-toolbar .ar-select-btn { width: 100% !important; min-width: 0 !important; } /* Unter 360 px reicht die Breite fuer zwei Spalten nicht mehr aus, ohne dass die laengste Beschriftung ("Genre: Alle", 67 px) gequetscht wird. Dort steht jedes Feld ueber die volle Breite. */ @media (max-width: 359px) { html body #view-profile .profile-gm-rating-toolbar { grid-template-columns: minmax(0, 1fr) !important; } } } /* ======================================================================== */ /* 3. Mehr-Menue im aktuellen AnimeRadar-Stil */ /* ======================================================================== */ /* Das Sheet stammt aus V2.4.212 und trug seitdem eine flache Flaeche (--md-surface-variant) mit einfachem Rand - die Optik von vor dem Redesign. Die untere Leiste ist seit V2.4.257 eine schwebende Kapsel mit roter Kontur, dunklem Glasgrund und mehrschichtigem Schein. Das Sheet uebernimmt diese Bildsprache, ohne die Leiste zu kopieren: es bleibt ein von unten einfahrendes Panel, bekommt aber denselben Grund, dieselbe Kontur, denselben Schein und dieselben Radien. Die Farbwerte kommen aus denselben Variablen wie die Leiste (--ar-nav-red / --ar-nav-red-bright aus material-mobile-nav-v2-4-257), damit beide nicht auseinanderlaufen, wenn sich die Markenfarbe aendert. Aufbau, Links, Reihenfolge und Verhalten bleiben unveraendert. */ /* Der Vorhang wird etwas tiefer und traegt denselben Weichzeichner wie die Kapsel, damit das Sheet aus derselben Ebene zu kommen scheint. */ html body .more-sheet-scrim { background: rgba(5, 2, 4, .72) !important; -webkit-backdrop-filter: blur(6px) saturate(108%) !important; backdrop-filter: blur(6px) saturate(108%) !important; } /* Das Sheet sitzt ueber der Leiste, nicht unter ihr: der Abstand nach unten ist die Kapselhoehe plus ihr eigener Abstand plus der Sicherheitsbereich des Geraets. Damit kollidiert es weder mit der Gestensteuerung noch mit der Navigation. Die Variablen der Leiste haben einen Ersatzwert, falls das Blatt der Leiste einmal fehlt - dann steht das Sheet trotzdem frei. */ /* Die Ebenenordnung bleibt, wie sie war: Vorhang 70, Sheet 71, Leiste 60. Ein eigener z-index waere hier ein Fehler - 61 haette das Sheet unter seinen eigenen Vorhang geschoben. Der Abstand nach unten rechnet mit denselben 30 px Zugabe, die auch .shell fuer die Leiste einplant (material-mobile-nav-v2-4-257, Abschnitt 6). Die Kapsel ist naemlich hoeher als --ar-nav-height: der Wert ist nur ihre Mindesthoehe, dazu kommen Innenabstand und Rand. Mit der Zugabe der Leiste bleiben bei 320 noch 16 px Luft, bei 768 dreissig - und nirgends eine Ueberdeckung. */ html body .more-sheet { padding: 0 var(--ar-nav-gutter, 12px) calc( var(--ar-nav-height, 60px) + var(--ar-nav-bottom, 12px) + env(safe-area-inset-bottom, 0px) + 30px ) !important; } /* Auf Tablets ist die Kapsel auf --ar-nav-max zentriert. Liefe das Sheet dort von Kante zu Kante, stuenden beide unverbunden nebeneinander - deshalb dieselbe Hoechstbreite und dieselbe Zentrierung. Auf Telefonen gewinnt weiterhin die volle Breite. */ html body .more-sheet-panel { box-sizing: border-box !important; max-width: var(--ar-nav-max, 600px) !important; margin-inline: auto !important; max-height: min(72dvh, 600px) !important; padding: 10px 10px 12px !important; border: 1px solid rgba(var(--ar-nav-red-bright, 255, 74, 90), .30) !important; border-radius: var(--ar-nav-radius, 26px) !important; /* Derselbe Verlauf wie die Kapsel, eine Spur dichter - hinter dem Sheet liegt Inhalt, der nicht durchscheinen soll. */ background: linear-gradient(180deg, rgba(32, 12, 17, .90), rgba(13, 6, 9, .95)) !important; -webkit-backdrop-filter: blur(20px) saturate(118%) !important; backdrop-filter: blur(20px) saturate(118%) !important; /* Dieselben Schichten wie die Leiste, nur nach oben statt nach unten gerichtet: das Sheet steht ueber dem Inhalt, sein Licht faellt entsprechend. */ box-shadow: 0 0 0 1px rgba(var(--ar-nav-red-bright, 255, 74, 90), .10), 0 -2px 10px rgba(var(--ar-nav-red, 226, 38, 55), .18), 0 -8px 26px rgba(var(--ar-nav-red, 226, 38, 55), .15), 0 -18px 48px rgba(var(--ar-nav-red, 226, 38, 55), .10), 0 -14px 26px -14px rgba(var(--ar-nav-red-bright, 255, 74, 90), .34), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 22px rgba(var(--ar-nav-red, 226, 38, 55), .07) !important; } /* Ohne Weichzeichner - aeltere Android-WebViews unter Capacitor - deckt die Flaeche staerker, genau wie bei der Leiste. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html body .more-sheet-panel { background: linear-gradient(180deg, rgba(28, 11, 15, .98), rgba(11, 5, 8, .99)) !important; } } /* Der Rollbalken kam aus der Goldpalette der ersten Fassung und stach im roten Panel heraus. Reicht die Hoehe nicht - zehn Eintraege auf einem kleinen Geraet -, rollt die Liste jetzt in derselben Farbfamilie. */ html body .more-sheet-panel { scrollbar-width: thin; scrollbar-color: rgba(var(--ar-nav-red-bright, 255, 74, 90), .45) transparent; } html body .more-sheet-panel::-webkit-scrollbar { width: 4px; } html body .more-sheet-panel::-webkit-scrollbar-track { background: transparent !important; } html body .more-sheet-panel::-webkit-scrollbar-thumb { border: 0 !important; border-radius: 999px !important; background: rgba(var(--ar-nav-red-bright, 255, 74, 90), .45) !important; } html body .more-sheet-grip { width: 42px !important; height: 4px !important; margin: 2px auto 8px !important; background: rgba(var(--ar-nav-red-bright, 255, 74, 90), .42) !important; } html body .more-sheet-list { gap: 3px !important; } /* Trefferflaeche 48 px - dieselbe Groesse, die auch die Eintraege der Leiste anbieten. */ html body .more-sheet-item { min-height: 48px !important; gap: 13px !important; padding: 0 12px !important; border: 1px solid transparent !important; border-radius: var(--ar-nav-item-radius, 14px) !important; background: transparent !important; color: #b9c2c8 !important; font-size: 14.5px !important; font-weight: 600 !important; -webkit-tap-highlight-color: transparent; transition: background-color .16s ease, color .16s ease, border-color .16s ease; } html body .more-sheet-item svg { width: 21px !important; height: 21px !important; flex: 0 0 21px !important; stroke-width: 1.8 !important; } /* Beruehrung und Zeiger zeigen denselben Zustand: ein leichter roter Schleier statt des bisherigen weissen. */ html body .more-sheet-item:hover, html body .more-sheet-item:focus-visible { border-color: rgba(var(--ar-nav-red-bright, 255, 74, 90), .22) !important; background: rgba(var(--ar-nav-red, 226, 38, 55), .12) !important; color: #f4f7f9 !important; } html body .more-sheet-item:active { border-color: rgba(var(--ar-nav-red-bright, 255, 74, 90), .34) !important; background: rgba(var(--ar-nav-red, 226, 38, 55), .20) !important; color: #ffffff !important; } /* Der aktive Bereich wird so markiert wie in der Leiste: rote Schrift, roter Grund, rote Kontur. */ html body .more-sheet-item.active { border-color: rgba(var(--ar-nav-red-bright, 255, 74, 90), .40) !important; background: rgba(var(--ar-nav-red, 226, 38, 55), .16) !important; color: rgb(var(--ar-nav-red-bright, 255, 74, 90)) !important; } /* ======================================================================== */ /* 4. Bug melden / Feature Wunsch - das Menue klappt nach unten auf */ /* ======================================================================== */ /* Die eigentliche Korrektur steht im Programm (positionSelectProxyMenu): auf diesen beiden Seiten wird mobil nicht mehr nach oben geklappt. Diese Regel ist die Absicherung dahinter. Setzt irgendein Weg doch einmal .opens-up, darf daraus kein zusammengefallenes Menue werden: styles-v2-4-141.css setzt dort bottom: calc(100% + 8px) und top: auto - das top wird aber von material-feedback-form-v2-4-228.css mit top: calc(100% + 6px) ueberschrieben, weil dessen Selektor eine ID traegt und damit gewinnt. Stehen top und bottom gleichzeitig, spannt der Browser den Kasten zwischen beide Kanten: 44 - 50 - 52 ist negativ, die Hoehe faellt auf null, uebrig bleiben 14 px Innenabstand und Rand. Deshalb hier ausdruecklich nur eine der beiden Kanten. */ html body #view-roadmap .rm-select .ar-select.opens-up .ar-select-menu { top: calc(100% + 6px) !important; bottom: auto !important; } }