/* ========================================================================== AnimeRadar V2.4.257 - Mobile Bottom-Navigation nach Referenzbild Alle Regeln stehen in @media (max-width: 959px). Das ist die Grenze, die das Projekt seit V2.4.212 fuer Mobil und Desktop verwendet: ab 960 px traegt .mobile-tabs bereits display: none und die Desktop-Seitenleiste uebernimmt. Der Desktop wird von dieser Datei nicht erreicht. Aufbau: 1. Masse als Variablen - alles leitet sich aus dem Viewport ab 2. Die schwebende Kapsel 3. Glow in sechs Schichten 4. Die sechs Eintraege 5. Aktiver Eintrag mit Unterstrich 6. Inhaltsabstand, Sicherheitsbereiche, Sonderfaelle ========================================================================== */ @media (max-width: 959px) { /* ======================================================================== */ /* 1. Masse */ /* ======================================================================== */ /* Jeder Wert ist ein clamp aus Mindestmass, Viewportanteil und Hoechstmass. Damit gibt es keine feste Breite, keine Position je Eintrag und keinen Wert, der nur auf einer Geraetebreite stimmt. Die Leiste rechnet sich auf jeder Breite selbst aus. Die Variablen liegen auf :root, weil ausser der Leiste auch der Inhaltsabstand der Shell sie braucht - sonst laufen beide auseinander. */ :root { /* Seitlicher Abstand zum Bildschirmrand. 320: 9 | 390: 12 | 430: 13 */ --ar-nav-gutter: clamp(9px, 3.1vw, 18px); /* Abstand zur Unterkante, zusaetzlich zum Sicherheitsbereich. */ --ar-nav-bottom: clamp(8px, 2.4vw, 16px); /* Hoehe der Kapsel. 320: 56 | 390: 60 | 430: 67 | Tablet: 68 */ --ar-nav-height: clamp(56px, 15.5vw, 68px); /* Hoechstbreite auf Tablets - die Leiste bleibt zentriert statt sich ueber die ganze Flaeche zu ziehen. */ --ar-nav-max: 600px; --ar-nav-radius: clamp(22px, 7vw, 30px); --ar-nav-pad-inline: clamp(4px, 1.6vw, 12px); --ar-nav-icon: clamp(19px, 5.5vw, 23px); --ar-nav-label: clamp(8.4px, 2.55vw, 11px); --ar-nav-item-radius: clamp(11px, 3.4vw, 16px); /* Die Markenfarbe der Leiste als Komponenten, damit die Glow-Schichten dieselbe Farbe in verschiedenen Deckkraeften nutzen koennen. */ --ar-nav-red: 226, 38, 55; --ar-nav-red-bright: 255, 74, 90; } /* Quer gehaltene Telefone sind sehr flach. Dort faellt die Leiste eine Stufe kompakter aus, damit vom Inhalt genug uebrig bleibt. Greift beim Drehen sofort, ohne Neuladen - es ist reines CSS. */ @media (max-height: 460px) { :root { --ar-nav-height: 50px; --ar-nav-bottom: 6px; --ar-nav-icon: 18px; --ar-nav-label: 8.4px; --ar-nav-radius: 18px; } } /* ======================================================================== */ /* 2. Die schwebende Kapsel */ /* ======================================================================== */ /* Zentriert ueber margin-inline: auto zwischen den beiden Sicherheitskanten - kein transform, damit Treffer- und Layoutberechnung unveraendert bleiben. Die Breite ist der kleinere Wert aus "volle Breite minus Seitenabstand" und der Hoechstbreite; auf Telefonen gewinnt der erste, auf Tablets der zweite. */ html body .mobile-tabs { position: fixed !important; top: auto !important; left: env(safe-area-inset-left, 0px) !important; right: env(safe-area-inset-right, 0px) !important; bottom: calc(var(--ar-nav-bottom) + env(safe-area-inset-bottom, 0px)) !important; z-index: 60 !important; box-sizing: border-box !important; width: min(100% - 2 * var(--ar-nav-gutter), var(--ar-nav-max)) !important; max-width: none !important; margin-inline: auto !important; min-height: var(--ar-nav-height) !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 0 !important; padding: 6px var(--ar-nav-pad-inline) !important; border: 1px solid rgba(var(--ar-nav-red-bright), .30) !important; border-radius: var(--ar-nav-radius) !important; /* Sehr dunkel mit einem Stich ins Bordeaux, leicht durchscheinend. */ background: linear-gradient(180deg, rgba(30, 11, 16, .80), rgba(13, 6, 9, .88)) !important; /* Der Glow liegt ausserhalb der Kapsel und darf nicht beschnitten werden. */ overflow: visible !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; backdrop-filter: blur(18px) saturate(118%) !important; } /* Ohne Weichzeichner - aeltere Android-WebViews unter Capacitor - waere der Grund zu durchsichtig und der Inhalt schiene durch. Dann deckt die Flaeche staerker. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html body .mobile-tabs { background: linear-gradient(180deg, rgba(26, 10, 14, .97), rgba(11, 5, 8, .99)) !important; } } /* ======================================================================== */ /* 3. Glow in sechs Schichten */ /* ======================================================================== */ /* Ein einzelner grosser Schatten sieht nach Gaming-Beleuchtung aus. Die Referenz zeigt ein ruhiges, mehrstufiges Licht. Deshalb sechs Ebenen: 1. die feine rote Kontur - steht oben als border 2. ein hauchduenner Ring direkt an der Kante 3. ein enger, deutlich sichtbarer Schein 4. ein mittlerer, weicher Schein 5. ein sehr schwacher grosser Schein, der die Kapsel vom Grund loest 6. ein staerkeres Licht entlang der Unterkante Dazu ein dezenter innerer Schein, der die Flaeche von innen anhebt. Die Radien sind feste Pixelwerte und wachsen nicht mit dem Viewport - sonst wuerde der Schein auf Tablets riesig und auf kleinen Geraeten nichts. */ html body .mobile-tabs { box-shadow: 0 0 0 1px rgba(var(--ar-nav-red-bright), .10), 0 2px 10px rgba(var(--ar-nav-red), .20), 0 8px 24px rgba(var(--ar-nav-red), .16), 0 18px 48px rgba(var(--ar-nav-red), .10), 0 14px 26px -14px rgba(var(--ar-nav-red-bright), .40), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(var(--ar-nav-red-bright), .22), inset 0 0 22px rgba(var(--ar-nav-red), .07) !important; } /* Auf sehr kleinen Geraeten nimmt ein grosser Schein einen spuerbaren Teil des Bildes ein. Dort bleiben dieselben Schichten, nur enger und leiser. */ @media (max-width: 380px) { html body .mobile-tabs { box-shadow: 0 0 0 1px rgba(var(--ar-nav-red-bright), .09), 0 2px 8px rgba(var(--ar-nav-red), .18), 0 6px 18px rgba(var(--ar-nav-red), .13), 0 12px 32px rgba(var(--ar-nav-red), .08), 0 10px 20px -12px rgba(var(--ar-nav-red-bright), .34), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(var(--ar-nav-red-bright), .14), inset 0 0 18px rgba(var(--ar-nav-red), .06) !important; } } /* ======================================================================== */ /* 4. Die sechs Eintraege */ /* ======================================================================== */ /* Jeder Eintrag ist eine eigene Rasterspalte gleicher Breite. Drei Zeilen: Symbol, Beschriftung, Unterstrich. Die dritte Zeile ist immer da, auch ohne Unterstrich - dadurch sitzen alle Beschriftungen auf derselben Linie, egal welcher Eintrag gerade aktiv ist. */ html body .mobile-tabs .mobile-tab { position: relative !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; /* Die ganze Flaeche ist die Trefferflaeche, nicht nur Symbol und Text. */ height: 100% !important; display: grid !important; grid-template-rows: auto auto 3px !important; place-items: center !important; gap: 3px !important; padding: 6px 1px 4px !important; border: 0 !important; border-radius: var(--ar-nav-item-radius) !important; background: transparent !important; box-shadow: none !important; color: #b9c2c8 !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } html body .mobile-tabs .mobile-tab > span { width: var(--ar-nav-icon) !important; height: var(--ar-nav-icon) !important; min-height: 0 !important; display: grid !important; place-items: center !important; color: currentColor !important; background: none !important; font-size: inherit !important; line-height: 1 !important; } html body .mobile-tabs .mobile-tab > span svg { width: 100% !important; height: 100% !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* Beschriftung wie in der Referenz: normale Schreibweise, keine Grossbuchstaben, keine Sperrung - beides kostet auf 320 px genau die Breite, die "Bibliothek" braucht. */ html body .mobile-tabs .mobile-tab > small { max-width: 100% !important; display: block !important; color: currentColor !important; font-size: var(--ar-nav-label) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.1 !important; text-align: center !important; text-transform: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } /* ======================================================================== */ /* 5. Aktiver Eintrag */ /* ======================================================================== */ html body .mobile-tabs .mobile-tab.active { color: rgb(var(--ar-nav-red-bright)) !important; background: rgba(var(--ar-nav-red), .10) !important; box-shadow: 0 0 16px rgba(var(--ar-nav-red), .17) !important; } html body .mobile-tabs .mobile-tab.active > span svg { stroke-width: 1.95 !important; filter: drop-shadow(0 0 5px rgba(var(--ar-nav-red-bright), .45)) !important; } html body .mobile-tabs .mobile-tab.active > small { font-weight: 700 !important; } /* Der Unterstrich ist die dritte Rasterzeile: eine kurze, stark gerundete Linie mit eigenem Schein - keine Linie ueber die ganze Eintragsbreite. Als Rasterelement braucht er keine absolute Lage und sitzt auf jeder Breite von selbst mittig. */ html body .mobile-tabs .mobile-tab::after { content: "" !important; grid-row: 3 !important; width: clamp(14px, 4.4vw, 20px) !important; height: 2px !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; } html body .mobile-tabs .mobile-tab.active::after { background: rgb(var(--ar-nav-red-bright)) !important; box-shadow: 0 0 7px rgba(var(--ar-nav-red-bright), .58) !important; } /* Ruhende Eintraege bleiben ruhig: kein Grund, kein Schein, kein Strich. */ html body .mobile-tabs .mobile-tab:not(.active) { background: transparent !important; box-shadow: none !important; } html body .mobile-tabs .mobile-tab:focus-visible { outline: 2px solid rgba(var(--ar-nav-red-bright), .75) !important; outline-offset: -2px !important; } /* ======================================================================== */ /* 6. Inhaltsabstand, Sicherheitsbereiche, Sonderfaelle */ /* ======================================================================== */ /* Der Inhalt braucht unten genau so viel Platz, wie die Leiste einnimmt - aus denselben Variablen gerechnet, damit beides zusammenbleibt. */ html body .shell { padding-bottom: calc( var(--ar-nav-height) + var(--ar-nav-bottom) + 30px + env(safe-area-inset-bottom, 0px) ) !important; } html body .site-footer { margin-bottom: calc(var(--ar-nav-height) + var(--ar-nav-bottom) + 8px) !important; } /* Waehrend ein Sheet oder Dialog offen ist, gehoert die Aufmerksamkeit diesem - die Leiste bleibt in ihrer Ebene unter den Overlays. Die bestehende Ebenenordnung wird nicht angefasst; z-index 60 ist derselbe Wert wie vorher. */ html body.more-sheet-open .mobile-tabs { box-shadow: 0 0 0 1px rgba(var(--ar-nav-red-bright), .10), 0 2px 10px rgba(var(--ar-nav-red), .14) !important; } }