/* * AnimeRadar v2.4.232 * * Einheitlicher Auswahlzustand (aktiv / ausgewaehlt / selected / current) * fuer Reiter, Filter, Chips, Pills und Segmented Controls. * * QUELLE DER WAHRHEIT * * Der aktive Reiter der Toplisten. Im Browser gemessen an * #view-toplists.toplists-2026 .tl-mode.is-active: * * background-color rgb(106, 17, 23) = #6a1117 * background-image keiner * border 1px solid rgba(255, 64, 78, .8) * box-shadow rgba(255, 64, 78, .35) 0 0 0 1px, * rgba(229, 32, 46, .5) 0 0 18px 0 * color rgb(255, 255, 255) * Icon stroke: currentColor, damit ebenfalls #ffffff * opacity 1, keine Pseudo-Elemente, kein Verlauf * * Diese Werte stehen unten als Tokens. Die Toplisten selbst verweisen seit * dieser Fassung auf dieselben Tokens (material-news-toplists-v2-4-224.css) * und sehen deshalb unveraendert aus. * * UMFANG * * Geaendert wird ausschliesslich der Auswahlzustand. Form, Groesse, Radius, * Abstaende, Schriftgroessen, Hover, Fokus, aria-Attribute und alle * Funktionen bleiben unveraendert. Nicht enthalten und bewusst unberuehrt: * Sidebar, Kopfzeile, mobile Navigationsleiste, die Illustration der * App-Navigation im Telefon-Mockup, Karussellpunkte, Datumsauswahl im * Kalenderraster, Statusfarben, Premium-Gold, Bewertungsgelb sowie normale * Schaltflaechen und Links. * * ZWEI AUSPRAEGUNGEN * * 1. Flaeche - Chips, Pills, Reiter mit eigener Flaeche, Segmented * Controls. Vollstaendiger Toplisten-Look inklusive Schein. * 2. Zeile - Auswahlzeilen in Aufklappmenues und Filterlisten. Gleiche * Farbfamilie und gleiche Textfarbe, aber ohne aeusseren Schein: die * Zeilen stossen buendig aneinander, ein 18px-Schein wuerde die * Nachbarzeilen ueberstrahlen. * * Reiter, die als Unterstrich gebaut sind, behalten ihre Form. Sie erhalten * die deckende Variante der Randfarbe als Markerfarbe und die weisse * Textfarbe des Tokens. * * Die Regeln tragen !important, weil die aelteren Blaetter ihre * Aktivzustaende ebenfalls mit !important setzen. Diese Datei wird als * letzte geladen und ist damit die einzige Stelle, an der der * Auswahlzustand definiert wird. */ /* ========================================================================== */ /* Tokens */ /* ========================================================================== */ :root { /* Flaeche */ --ar-selected-bg: #6a1117; --ar-selected-border: rgba(255, 64, 78, .8); --ar-selected-ring: rgba(255, 64, 78, .35); --ar-selected-glow: rgba(229, 32, 46, .5); --ar-selected-glow-size: 18px; --ar-selected-shadow: 0 0 0 1px var(--ar-selected-ring), 0 0 var(--ar-selected-glow-size) var(--ar-selected-glow); /* Text und Icon. Icons der betroffenen Bausteine zeichnen mit currentColor, sie folgen der Textfarbe ohne eigene Regel. */ --ar-selected-text: #ffffff; --ar-selected-icon: currentColor; /* Unterstrich-Reiter: deckende Fassung der Randfarbe rgba(255,64,78,.8). */ --ar-selected-marker: #ff404e; --ar-selected-marker-shadow: 0 0 10px var(--ar-selected-glow); /* Zeile (Aufklappmenues, Filterlisten) */ --ar-selected-row-bg: rgba(255, 64, 78, .16); --ar-selected-row-line: var(--ar-selected-border); } /* ========================================================================== */ /* 1. Flaechiger Auswahlzustand */ /* ========================================================================== */ /* -- Entdecken: Genre-Chips in der Seite --------------------------------- */ html body #view-search .discover-chip-row button.is-active, /* -- Entdecken: Filter-Chips im Filterbereich (Genres, Formate, Herkunft, Studios, Anbieter) ------------------------------------------------- */ html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters) .discover-filter-chip.is-active, html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips button.is-active, /* -- Entdecken: Ansicht Raster / Liste ----------------------------------- */ html body #view-search .discover-view-toggle button.is-active, /* -- Kalender: Filter-Chips ---------------------------------------------- */ html body #calendarFilters[id] .calendar-chip.is-active, html body #calendarFilters[id].calendar-filters .calendar-chip-row button.is-active, /* -- Seasons: Season-Reiter und Ansicht Raster / Liste ------------------- */ html body #view-season .seasons-tabs .season-choice.is-active, html body #view-season .seasons-view-switch button.is-active, /* -- Bibliothek: Listen-Pills -------------------------------------------- */ html body #view-lists .list-tab-item.active, html body #view-lists .lib-reference-listbar #customLists.list-tabs .list-tab-item.active, /* -- Mein Planer: Reiter ------------------------------------------------- */ html body #view-planner .planner-reference-tabs button.is-active, /* -- Anime-News: Filterpills --------------------------------------------- */ html body #view-news.news-2026 .news-pill.is-active, /* -- Giveaway: Reiter ---------------------------------------------------- */ html body #view-giveaway.giveaway-2026 .gw-tab.is-active, /* -- Anime Voting: Segmented Control Anime / Charaktere ------------------ */ html body #view-voting.voting-2026 .vt-mode-btn.is-active, /* -- Roadmap: Statusfilter (Reiter, nicht die Statusfarben der Karten) --- */ html body #view-roadmap.rm-2026 .rm-page-roadmap .rm-filter.active, /* -- Anime-Detail: Folgenfilter ------------------------------------------ */ html body #view-detail .detail-chip.is-active:not(.is-static) { border-color: var(--ar-selected-border) !important; background: var(--ar-selected-bg) !important; color: var(--ar-selected-text) !important; box-shadow: var(--ar-selected-shadow) !important; } /* Der Haken vor einem gewaehlten Filter-Chip und die Zaehler in den Bibliotheks-Pills erben die Textfarbe, damit Icon und Text zusammen passen. Groesse und Position bleiben unveraendert. */ html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters) .discover-filter-chip.is-active::before, html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips button.is-active::before { color: var(--ar-selected-text) !important; } html body #view-lists .list-tab-item.active .list-tab, html body #view-detail .detail-chip.is-active b { color: var(--ar-selected-text) !important; } /* Das Menuezeichen der Listen-Pill besteht aus Rahmenlinien. */ html body #view-lists .list-tab-item.active .list-menu-toggle span { border-color: var(--ar-selected-text) !important; } html body #view-lists .list-tab-item.active .list-menu-toggle { border-left-color: rgba(255, 255, 255, .35) !important; } /* ========================================================================== */ /* 2. Reiter mit Unterstrich */ /* ========================================================================== */ /* Grundmuster fuer alle Abschnittsreiter. */ html body :where(.list-tab, .mobile-section-tab).active { color: var(--ar-selected-text) !important; } html body :where(.list-tab, .mobile-section-tab).active::after { background: var(--ar-selected-marker) !important; box-shadow: var(--ar-selected-marker-shadow) !important; } /* Profil: Uebersicht / Statistik / Bewertungen / Erinnerungen / Einstellungen */ html body #view-profile .profile-gm-tabs .mobile-section-tab.active { color: var(--ar-selected-text) !important; } html body #view-profile .profile-gm-tabs .mobile-section-tab.active::after { background: var(--ar-selected-marker) !important; box-shadow: var(--ar-selected-marker-shadow) !important; } /* Statistiken: gleiche Reiterleiste */ html body #view-stats .profile-hub-tabs .mobile-section-tab.active { color: var(--ar-selected-text) !important; } html body #view-stats .profile-hub-tabs .mobile-section-tab.active::after { background: var(--ar-selected-marker) !important; box-shadow: var(--ar-selected-marker-shadow) !important; } /* Bibliothek und Favoriten: Alle / Listen / Favoriten */ html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab.active { color: var(--ar-selected-text) !important; } html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab.active::after { background: var(--ar-selected-marker) !important; box-shadow: var(--ar-selected-marker-shadow) !important; } /* Anime-Detail: Uebersicht / Folgen / Besetzung / Rezensionen / ... */ html body #view-detail .detail-tab.is-active { color: var(--ar-selected-text) !important; } html body #view-detail .detail-tab.is-active::after { background: var(--ar-selected-marker) !important; box-shadow: var(--ar-selected-marker-shadow) !important; } /* ========================================================================== */ /* 3. Ausgewaehlte Zeilen in Aufklappmenues und Filterlisten */ /* ========================================================================== */ /* Die Platzhalterzeile eines Aufklappmenues traegt is-selected, solange nichts gewaehlt ist, und ist dabei deaktiviert. Sie bleibt ausgenommen. */ html body .ar-select-option.is-selected:not(:disabled), html body .ar-select-option[aria-selected="true"]:not(:disabled), html body #calendarFilters[id].calendar-filters .ar-select-option.is-selected:not(:disabled), html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .ar-select-option.is-selected:not(:disabled), html body :is(#view-lists, #view-planner) .ar-select-option.is-selected:not(:disabled), html body #view-roadmap.rm-2026 .rm-select .ar-select-option.is-selected:not(:disabled) { background: var(--ar-selected-row-bg) !important; color: var(--ar-selected-text) !important; } /* Seasons: Jahresauswahl, im Blatt und im ausgelagerten Menue. */ html body .season-year-option.is-active, html body .season-year-menu.season-year-menu--portal .season-year-option.is-active, html body #view-season .seasons-archive .season-year-option.is-active, html body #view-season .season-year-dropdown.seasons-archive .season-year-option.is-active { border-color: transparent !important; background: var(--ar-selected-row-bg) !important; color: var(--ar-selected-text) !important; box-shadow: none !important; } html body .season-year-option.is-active::before, html body .season-year-menu.season-year-menu--portal .season-year-option.is-active::before, html body #view-season .seasons-archive .season-year-option.is-active::before { color: var(--ar-selected-text) !important; } /* Bibliothek: Filterzeilen der Seitenspalte (Genre, Status, Bewertung, Schnellzugriff). Auch Zeilen, deshalb ohne aeusseren Schein. */ html body #view-lists :where(.lib-genre-row, .lib-status-row, .lib-rating-row, .lib-quick-row).is-active { border-color: var(--ar-selected-row-line) !important; background: var(--ar-selected-row-bg) !important; color: var(--ar-selected-text) !important; }