/* DIE WERTE FEHLTEN AM TELEFON · NICHT DIE REGELN. Gemessen im Geraeterahmen: 44 Tokens werden von den geladenen Stilblaettern benutzt, NEUN sind nirgends erklaert. Eine Regel wie "background:var(--green)" faellt damit still aus · der Online-Punkt am Avatar hatte deshalb keine Fuellung und sah aus wie ein Biss aus dem Kreis, nicht wie ein Zustand. Die Werte sind dieselben wie auf dem Schirm (css/nextari-season.css). --radius liest die Hausleiter, statt eine Zahl zu wiederholen. */ :root{ --green:#3be37a; --cyan:#34e5d8; --live:#d81b45; --glow:transparent; --line2:var(--nx-linie); --radius:var(--nx-r-tafel,14px); } /* DIE SCHRIFTEN FEHLTEN AM TELEFON. Gemessen im Geraeterahmen (375x812, Fingerzeiger): document.fonts war LEER · null @font-face-Regeln. Die mobile Fassung laedt nur drei Stilblaetter (nxm-mobil.css, nextari-feed.css, nextari-pulse.css), und keines davon erklaert eine Schrift. Der Koerper fragt nach "Nunito Sans", niemand liefert sie, also nahm das Telefon -apple-system · deshalb sah die Schrift dort anders aus als auf dem Schirm. Die Erklaerungen stehen jetzt an EINER Stelle, in nextari.css, das jede Seite laedt, Pulse eingeschlossen. Hier und in den Familien-Stilblaettern standen neun Kopien. */ /*! NEXTARI · Author: Marvin Slotta · Build 2026.09.06 */ @media (max-width: 767px) { /* ------------------------------------------------------------------ 1 ABGESCHNITTEN · der einzige harte Defekt. Gemessen: home +1026 px und creator-profile +453 px werden von `body` mit overflow:hidden abgefangen. Abgefangen heisst hier NICHT gerettet · der Inhalt ist weg, und kein Wischen bringt ihn zurueck. Ursache ist fast immer ein Kind mit fester Breite in einem Raster, das auf dem Desktop drei Spalten hat. Die Loesung ist nicht, den Koerper scrollen zu lassen (dann wackelt die ganze Seite seitlich), sondern die Kinder schmal werden zu lassen. */ /* · clip statt hidden: hidden macht aus dem Koerper einen Scrollbehaelter und nimmt jedem sticky darin die Wirkung. clip schneidet genauso, laesst das Kleben aber zu. */ /* html bekommt clip (sonst stirbt jedes sticky darin), der Koerper behaelt hidden · das haelt das seitliche Wischen zuverlaessig auf, ohne das Kleben zu nehmen. Gemessen: mit clip am Koerper liessen sich 83 Punkte zur Seite wischen. */ /* BEIDE auf clip. hidden macht aus dem Element einen Scrollbehaelter, und darin verliert jedes sticky seine Wirkung · gemessen sowohl am html als auch am body. clip schneidet genauso und laesst das Kleben zu. Was dann noch hinausragt, ist ein echter Fehler und gehoert dort behoben, wo er entsteht. */ html { overflow-x: clip; } body { overflow-x: clip; } .shell, .wrap, main, .grid-ov { max-width: 100%; min-width: 0; } /* min-width:0 ist der eigentliche Hebel: ein Raster-Kind weigert sich sonst, schmaler zu werden als sein Inhalt, und schiebt das Raster auf. Das ist der Grund, warum die Seiten trotz vorhandener Media-Regeln hinausragen. */ /* AUSSER IN EINER WISCHSCHIENE. Eine Schiene schiebt waagerecht, ihre Karten sollen NICHT schmaler werden als ihr Mass · sonst bleibt von der Karte ein Streifen. Gemessen in der Reihe "Off the game" auf People: die Karte fiel von 248 auf 64 Punkte, weil diese Zeile ihr min-width:248px wegnahm und das flex:0 0 25% dann gegen 305 Punkte rechnete. Auf den Knoepfen stand danach "Li on Sp" statt "Listen on Spotify". */ [class*="grid"] > *, [class*="cols"] > *, [class*="row"] > * { min-width: 0; } /* min-width:auto heisst in einem Flex-Kind "so schmal wie der Inhalt", nicht "nimm wieder deine eigene Regel". Das Mass steht deshalb hier. */ /* Mit Vorrang, weil die Fingermassregel weiter unten [class*="grid"] > [role="button"] fuehrt · eine Karte, die als Knopf ausgezeichnet ist, trifft das ebenfalls, und bei gleichem Gewicht gewinnt die spaetere Zeile. Eine Karte ist kein Fingerziel, sie ist ohnehin gross. */ /* Auf Games, People und Events steht die Kartenbreite in css/nextari-handyseiten.css (Bausatz der Hauptseiten) · dort gilt diese Zeile nicht, sonst haette die Karte zwei Masse. */ html:where(:not([data-nx-hauptseite])) body .nxsh-grid > .nxsh-card { min-width: 248px; } html:where(:not([data-nx-hauptseite])) body .nx-evr > .nx-evr-k { min-width: 248px; } /* ------------------------------------------------------------------ 2 RASTER WERDEN ZU SPALTEN. Gemessen: div#lib +7732 px (games), div.nxsh-grid +2118 px (community), div#media +1198 px (game-detail), div#lib +869 px (library). Auf 390 Punkten hat eine mehrspaltige Flaeche keinen Sinn: drei Spalten ergeben 130 Punkte je Karte, auf denen weder Bild noch Titel lesbar sind. Eine Spalte, volle Breite. */ /* · overflow-x:visible ist hier raus. Der ID-Selektor schlug die eigene Regel der Wischbahn (.libcarousel{overflow-x:auto}) und nahm ihr das Schieben: gemessen scrollWidth 1234 gegen clientWidth 303, scrollLeft blieb nach scrollTo(400) auf 0 · sechs von acht Spielen unerreichbar. Die Regel soll Raster einspaltig machen, nicht Wischbaendern das Schieben verbieten. */ #lib, #media, .nxsh-grid, [class*="grid"]:not(.pb-switch):not([class*="icon"]) { grid-template-columns: 1fr !important; } /* ------------------------------------------------------------------ 3 TABELLEN. Gemessen: table.dt +463 px auf events. Eine Tabelle laesst sich nicht in eine Spalte falten, ohne ihren Sinn zu verlieren · Zeilen sind Vergleiche. Sie bleibt deshalb ein Wischband, bekommt aber einen sichtbaren Rand, damit erkennbar ist, DASS man wischen kann. Ein unsichtbares Wischband ist schlimmer als ein sichtbares: man haelt die Tabelle fuer abgeschnitten. */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } table thead, table tbody { min-width: max-content; } /* ------------------------------------------------------------------ 4 FINGERMASS. Gemessen: 928 von 2368 Knoepfen unter 44 Punkten Hoehe · 39 Prozent. 44 Punkte ist keine Designzahl, sondern die Groesse einer Fingerkuppe; darunter trifft man den Nachbarn. Nur Hoehe und Innenabstand, keine Schriftgroesse und keine Farbe: das Aussehen bleibt, die Trefferflaeche waechst. Ausgenommen ist, was inline im Fliesstext steht · ein Link mitten im Satz auf 44 Punkte zu ziehen zerreisst den Absatz. */ button, [role="button"], .btn, .cta, input[type="submit"], a.btn, a.cta, a[class*="btn"], a[class*="cta"], .gchip { min-height: var(--nx-h-bedien); padding-top: max(10px, var(--nx-mobil-pad, 10px)); padding-bottom: max(10px, var(--nx-mobil-pad, 10px)); } /* Ikonen-Knoepfe sind quadratisch · nur Hoehe zu setzen macht sie schief. */ button[class*="icon"], [class*="iconbtn"], [class*="btn-icon"] { min-width: var(--nx-h-bedien); min-height: var(--nx-h-bedien); } /* Listeneintraege und Reihen, die als Ganzes anklickbar sind. */ li > a, nav a, [data-nx]:not(p):not(span):not(div) { min-height: var(--nx-h-bedien); } /* ---- · was die Aufzaehlung oben nicht erwischt hat -------------- Regel 4 greift ueber btn/cta im Klassennamen. Das Haus hat aber eigene Namen, und die fielen alle durch: gemessen bei 390 Punkten 26 Stellen zwischen 15 und 42 Punkten Hoehe · die Knoepfe im Strom (27), die Antworten-Knoepfe (40), die Studio-Kacheln, die Glocke (40 hoch bei 44 breit), und mehrere Links, die nur eine Textzeile hoch sind. inline-flex statt Polsterung: die Schrift bleibt, wo sie ist, nur die Trefferflaeche waechst. Links MITTEN im Satz bleiben ausgenommen wie in Regel 4 beschrieben · die hier genannten stehen alle fuer sich. */ a.nxp-b, a.nx-oc-b, a.nx-teamad-b, a.nx-ytmehr, a.nx-fk-a, a.signin, .nx-charea h3 > a, .nx-grp-creator > a, header.ltop > a, div.wg > a.wg-cta, .nx-hostcard-go { min-height: var(--nx-h-bedien); display: inline-flex; align-items: center; } /* div.wg > a war zu weit gefasst. Gemeint war der Knopf am Fuss eines Widgets (a.wg-cta); getroffen wurden auch die ZEILEN darin (a.li), die ihr display:flex aus css/nextari-home.css verloren. Zwei Zeilen standen dadurch nebeneinander · "Soon in your subs" zeigte Starfield und EA Sports FC 25 auf derselben Hoehe, das Datum dazwischen. Die Zeilen holen sich ihre Trefferflaeche ueber die Mindesthoehe, ohne ihr Flussverhalten aufzugeben. */ div.wg > a:not(.wg-cta) { min-height: var(--nx-h-bedien); } /* Die Werkzeugkachel ist ein Kasten, kein Knopf im Satz · inline-flex stellte Ikone, Titel und Beschreibung nebeneinander statt untereinander, mit Zwischenraum null. Gelesen wurde dann "Create an eventFrom a squad night to a full cup.", die Titelspalte war 34 bis 52 Punkte breit und das 34-Punkte-Ikonenfeld auf 14 gequetscht. Gemessen auf 22 Kacheln auf vier Seiten. Die Trefferflaeche holt sie sich ueber die Mindesthoehe. */ a.nx-do-c { min-height: var(--nx-h-bedien); } /* Quadratisch, weil rund oder ikonisch · Hoehe allein macht sie schief. */ .icon-btn { min-width: var(--nx-h-bedien); } button.nx-weg { min-height: var(--nx-h-bedien); } /* ---- · die Kennzahl passt nicht in ihr eigenes Feld ------------- .stat .v traegt in 26 Stilblaettern max-width:calc(100% - 90px) · die 90 Punkte sind fuer die kleine Kurve reserviert, die in der Ecke der Karte liegt. Am Schreibtisch geht das auf; bei 390 Punkten ist die Karte rund 131 breit, also bleiben 41 fuer die Zahl · gemessen brauchte "€18,240" deren 97 und stand ueber ihr Feld hinaus. Am Telefon steht die Kurve deshalb UNTER der Zahl statt daneben: die Zahl bekommt die volle Breite, die Kurve auch, und es geht nichts verloren. */ /* ---- · kein beschnittener Titel, keine Kachel ueber ihrer Kante -- .nx-cl-tx > b traegt nowrap + ellipsis (Games und People). Am Schreibtisch passt der Titel; bei 390 Punkten fehlten gemessen bis zu 17 Punkte an "Helldivers 2 · squad dive · today 20:00". Ein Titel, den man nicht ganz lesen kann, ist kein Titel · schmal darf er umbrechen. Und die Ladenmarke in .lk-meta stand 26 Punkte ueber ihrer Zeile, weil die Zeile nicht umbrechen durfte. */ html body .nx-cl-tx > b { white-space: normal; overflow: visible; text-overflow: clip; } html body .nx-locker .lk-meta { flex-wrap: wrap; min-width: 0; } html body .nx-locker .lk-meta > * { min-width: 0; } .stat .v { max-width: none; } .stat .spark { position: static; display: block; width: 100%; height: 26px; margin-top: 8px; } /* Eingabefelder werden mit dem Finger getroffen wie Knoepfe. */ input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) { min-height: var(--nx-h-bedien); min-width: var(--nx-h-bedien); } /* Nachgemessen: diese Stellen standen noch unter 44, weil sie weder eine btn-Klasse noch einen der Namen oben tragen · sie sind an ihrem PLATZ erkennbar, nicht an ihrer Klasse. Alle stehen fuer sich, keiner steckt mitten in einem Satz. !important, weil die Seiten-CSS hier mit festen Hoehen arbeiten. */ .shead h3 > a, .evname > a, b.nx-griff > a, .bbody > a, .ggmeta > a, .nx-hiw-werte span > a, button.nxa-griff, .nx-ci-fuss > a { min-height: var(--nx-h-bedien); display: inline-flex !important; align-items: center; } .nx-cf-form input { min-width: var(--nx-h-bedien); } button.nx-weg { min-width: var(--nx-h-bedien); } /* ------------------------------------------------------------------ 5 LUFT. Der Desktop hat breite Aussenraender, die auf 390 Punkten ein Drittel der Flaeche fressen. Der Abstand gehoert dem Element, nicht dem Elternkasten · deshalb wird hier nur der aeussere Rahmen schmaler, nicht die Abstaende zwischen den Dingen. Die Kante selbst steht in Abschnitt 5 (EINE SEITENKANTE): die Huellen DIREKT unter body laufen dort randlos, und ihre Kinder stehen auf 14. Eine Huelle tiefer im Baum (section > .wrap auf den Rechtsseiten, Kontakt und der Landingpage, main im Rahmen von Pulse) erreicht Abschnitt 5 nicht. Hier stand fuer alle Huellen 0 · ihr Text lag am Telefon auf x=0. Sie tragen deshalb selbst den Rand der Kopfleiste (14 am Telefon). */ .shell, .wrap, main { padding-left: var(--nx-kopfrand); padding-right: var(--nx-kopfrand); } /* ------------------------------------------------------------------ 6 BILDER UND MEDIEN sprengen sonst jedes Raster. */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ 9 FEED-REIHEN. Gemessen: div.nx-fr-c ist 400 Punkte breit in einem 321-Punkte-Fenster · diese eine Karte bekommt man nie ganz zu sehen. Die Reihe selbst bleibt ein Wischband (das ist richtig), nur ihre Karten werden schmaler als der Bildschirm. */ /* NICHT calc(100vw - 48px) · das war mein erster Versuch und er verfehlt sein Ziel um 21 Punkte: 100vw ist die Fensterbreite des GERAETS (390), das Wischband liegt aber in der Spalte und misst nur 321. Prozent im Flex-Band rechnen gegen den Container, also gegen die richtige Zahl. */ .nx-fr-row > .nx-fr-c { flex: 0 0 100%; max-width: 100%; } .nx-fcar > .post { max-width: 100%; } /* ------------------------------------------------------------------ 10 FINGERMASS · zweiter Durchgang. Regel 4 deckt Knoepfe ab. Die Messung fand danach noch 44 Flaechen, die anklickbar sind, ohne ein Knopf zu sein: Kopfzeilen-Links, das eigene Profil, die Reaktionsknoepfe unter Feed-Karten. */ a.pb-p, a.pb-partner, .rbtn, [class*="rbtn"], .icon-btn, [class*="icon-btn"] { min-height: var(--nx-h-bedien); } .rbtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; } /* ------------------------------------------------------------------ 11 FINGERMASS · dritter Durchgang, nach Mustern statt nach Einzelfaellen. Die Messung nannte danach noch 19 Flaechen. Sie sind keine 19 Faelle, sondern vier Muster · und jedes davon wiederholt sich ueber die 78 Seiten: Fussleisten-Spalten (div.fcol > a) 11 Links à 25 px · der Fuss liegt laut Bestand auf 48 Seiten Reihenkopf ("See all") 3 à 16 px · ueberall, wo Reihen sind Fuss der Aufklapper (Open inbox, 2 à 16-17 px Open Messages) Unterstuetzen-Knopf im Fuss 1 à 22 px Als Einzelfaelle waeren das 19 Regeln, die auf der naechsten Seite wieder nicht greifen. Als Muster sind es vier. */ footer a, .footer a, .fcol a { min-height: var(--nx-h-bedien); display: flex; align-items: center; } a.nx-fgh-all, .nx-fgh a { min-height: var(--nx-h-bedien); display: inline-flex; align-items: center; } .nx-noti-foot a, .nxn-f a, [class*="-foot"] a, [class*="pop"] [class*="-f"] a { min-height: var(--nx-h-bedien); display: inline-flex; align-items: center; } /* Der Unterstuetzen-Knopf traegt display:inline-block im eigenen style · das schlug inline-flex. Die Mindesthoehe blieb, die Mitte nicht: die Schrift sass oben, der ganze Zuwachs auf 44 lag darunter. Vorrang, weil nur so die Regel gegen das style-Attribut gewinnt. */ a.nx-fb-sup { min-height: var(--nx-h-bedien); display: inline-flex !important; align-items: center; } /* ------------------------------------------------------------------ 12 ZEILEN, DIE NICHT UMBRECHEN · die Fehlerklasse, die keine Breitenmessung findet. Der erste echte Screenshot bei 390 Punkten zeigte, was jede DOM-Messung uebersehen hatte: im Heute-Kasten ueberlappte "is live in Valorant" den Namen "DoktorFroid". Nichts davon ragt hinaus · deshalb war alles gruen. Gemessen: .nx-tn-row flex-wrap:nowrap; der Text zwischen Name und Uhrzeit ist ein blosser Textknoten und wird zusammengedrueckt, bis er sich selbst ueberlagert. Umbrechen statt schrumpfen. Bewusst NICHT als Pauschalregel fuer alle Flex-Kaesten: Karussells und Wischbaender BRAUCHEN nowrap, sonst faellt die Reihe in einen Stapel und die ganze Bauart ist hin. (Die Kopfleiste hat ihre eigene Telefonform in css/nextari-kopf.css.) */ /* · .nxach-row ("Add more channels") kam dazu: sie heisst "-row", ist aber ein Wischband mit eigener Regel (nowrap, overflow-x:auto). Der Umbruch machte daraus einen Stapel · gemessen bei 390 acht Karten in acht Zeilen, 1127 statt 124 Punkte hoch. */ .nx-tn-row, .nx-pl-row, [class*="-row"]:not([class*="fr-row"]):not([class*="fcar"]):not(.nxach-row) { flex-wrap: wrap; } } @media(max-width:767px){ .nx-prevbar > .pb-switch > .pb-grp{display:contents} } @media(max-width:767px){ .carousel{width:100%;min-width:0} } @media(max-width:767px){ .nx-cl-row,.tsrow{flex-wrap:wrap} /* Der Hauptknopf einer Kartenzeile (Nr. C72/C73) ist eine kompakte graue Pille rechts, kein Balken ueber die ganze Breite · "Slot sichern" auf Games stand hier als 248 px breite Flaeche. Seine Form malt css/nextari-karten.css; hier steht nur, dass er rechts umbricht. */ .nx-cl-row .nx-cl-act:not(.nx-kz-haupt){flex:1 1 100%;margin-top:8px} .nx-cl-row .nx-cl-act.nx-kz-haupt{flex:none;margin-left:auto} .tsrow>*:last-child{flex:1 1 100%;margin-top:6px} } @media(max-width:767px){ /* Datentabellen scrollen in sich · nie die Seite (dt auf events, matrix, evTable): der Kasten wird der Scroller, hidden wird zu auto. */ .dt,.matrix{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} #evTable{overflow-x:auto} } /* MOBIL · Kopfzeile. Wie der Kopf am Telefon aussieht (Hoehe, Luft, welche Knoepfe bleiben), steht allein in css/nextari-kopf.css · hier stand eine zweite Fassung mit Vorrang, die gegen die Seitenregeln kaempfte. Was bleibt, ist der Ersatzwert fuer --nx-kopf, bevor nxm-kopfmass.js gemessen hat. Er rechnet wie der Kopf selbst: Vorschauleiste (--nx-leiste, ohne Leiste 0) plus 12 Luft plus 48 Flaeche, also 60 ohne Leiste. Hier stand 104 · das war der alte Kopf, und alles, was vor der ersten Messung darunter klebte, hing 44 Punkte zu tief. */ @media(max-width:767px){ :root{--nx-kopf:calc(var(--nx-leiste, 48px) + 60px)} } /* MOBIL · Meldeflaeche. Sie haengt am Glockenknopf, ist 344 Punkte breit und von rechts verankert · auf dem Telefon lag sie damit teils ausserhalb des Bildschirms (gemessen l=-127 bei 390 Breite). Auf die Fensterbreite gedeckelt passt sie immer. Die Regel steht hier statt in einer Seiten-CSS, weil sie jede Seite betrifft. · von RECHTS verankert statt von links. Die Kopfzeile traegt backdrop-filter und wird damit selbst zum Bezugsrahmen des festen Aufklappers. Steht sie auf position:sticky, faellt dieser Rahmen zu breit und zu weit links aus: gemessen auf home, group und profile bei 390 und 430 lag die Flaeche trotz left:8px bei l -164 bis r 180, also 164 Punkte ausserhalb. Die RECHTE Kante des Rahmens stimmt in beiden Faellen mit der des Fensters ueberein · von dort verankert sitzt sie richtig: gemessen 29..373 bei 390 und 69..413 bei 430, auf klebender wie auf fester Kopfzeile. */ @media(max-width:767px){ .nx-noti.nx-noti.nx-noti{position:fixed; right:8px;left:auto; width:min(344px, calc(100vw - 16px));max-width:calc(100vw - 16px); top:calc(var(--nx-kopf, 60px) + 8px);transform:none} } /* MOBIL · Raster-Kinder, die nicht schmaler werden wollen. Regel 1 deckt Klassen mit "grid", "cols" und "row" ab · zwei Raster heissen anders und liefen deshalb weiter hinaus. Gemessen auf dem Profil bei 390: .nx-libsum rechnete "69.05px 89.97px 123.61px 61.97px" in einem 299 Punkte breiten Kasten und schob drei Elemente bis zu 35 Punkte ueber den Rand. min-width:0 nimmt einer Spalte die Mindestbreite ihres laengsten Wortes. */ @media(max-width:767px){ .nx-libsum > *, .finner > * { min-width: 0; } } /* MOBIL · Fingermass, vierter Durchgang. Die Regeln 4, 10 und 11 nennen Knoepfe und Links. Diese hier sind weder das eine noch das andere: Griffe und Farbpunkte an den Profilbloecken (span), die Karten-Knoepfe der People-Seite (div), "See all" (span) und die Ikonenknoepfe der Reihenkoepfe. Gemessen bei 390: .grip 18x18, .bcolor 14x14, .cbtn 34 hoch, .seeall 31 hoch, .nxsh-cbtn und .pc-play 30 breit. Nur Mass, keine Schrift und keine Farbe. */ @media(max-width:767px){ /* .nx-grip ist der Ziehgriff der Events-Reihen (30 Punkte) · gemessen auf Events neben "Join group" (44): zwei Hoehen in einer Kopfzeile. */ .grip, .bcolor, .nx-grip { min-width: var(--nx-h-bedien); min-height: var(--nx-h-bedien); display: flex; align-items: center; justify-content: center; } /* Doppelt geschrieben, weil nextari.css spaeter eingebunden ist und dort .cbtn/.nxsh-go auf min-height:34px stehen · mit einfacher Klasse verliert die Regel hier und die Knoepfe bleiben 34 Punkte hoch (gemessen). */ .cbtn.cbtn, .seeall.seeall, .nxsh-go.nxsh-go, .nx-cl-b.nx-cl-b, .lvl-grp.lvl-grp { min-height: var(--nx-h-bedien); display: inline-flex; align-items: center; } .cbtn.cbtn { justify-content: center; } .nxsh-cbtn, .icon-btn { min-width: var(--nx-h-bedien); } .pc-play, .nxsr-ic, [class*="icon-btn"] { min-width: var(--nx-h-bedien); min-height: var(--nx-h-bedien); } /* Wunschliste: das Entfernen-Kreuz ist nur ein Zeichen breit, der Geldfilter "All" nur drei Buchstaben · die Hoehe allein reicht hier nicht. */ [data-nxwlrm], [data-nxgeld] { min-width: var(--nx-h-bedien); } /* Griff und Farbpunkt sitzen im Blockkopf. 44 statt 18 bzw. 14 Punkte kosten die Zeile 56 Punkte Breite · gemessen schob das die Sichtwahl eines Blocks um 3 Punkte hinaus. Die Zeile darf umbrechen, statt zu klemmen. */ /* EIN KOPF IST EINE ZEILE. Mit flex-wrap:wrap schob der Titel in seiner vollen Textbreite (209 Punkte) den Farbpunkt in eine zweite Zeile · ein umbrechender Kasten schrumpft seine Teile nicht, er verteilt sie. Der Kopf von "Top 8" war damit 128 von 194 Punkten der ganzen Karte hoch, fuer eine 17 Punkte hohe Ueberschrift. Jetzt bleiben Griff, Titel und Farbpunkt in einer Zeile, und was umbricht, ist der Titel in sich · abgeschnitten wird nichts. */ .bhd { flex-wrap: nowrap; row-gap: 0; align-items: center; } .bhd > .btitle { flex: 1 1 0; min-width: 0; flex-wrap: wrap; } .bhd > .btitle > * { min-width: 0; } .bhd > .grip, .bhd > .bcolor, .bhd > .nx-demopill { flex: 0 0 auto; } /* Die Knopfreihe des Profilkopfes war ueberfuellt: "View as visitor" wurde von 102 auf 72 Punkte gequetscht und brach mitten im Satz auf zwei Zeilen, die dann 5 Punkte ueber die Polsterung hinausragten. Sie darf umbrechen, und kein Wort wird dabei zerrissen. */ .phead .pactions { flex-wrap: wrap; row-gap: var(--nx-luecke-knopf); } /* Die HOEHE steht nicht mehr hier. Die Profil-CSS gibt der Reihe --nx-h-bedien, und das ist am Telefon schon das Fingermass. Diese Datei setzte daneben height:auto und 44 als Mindestmass · gemessen standen Edit profile, das Zahnrad und View as visitor dann auf 46, 48 und 44. */ .phead .pactions > * { white-space: nowrap; flex: 0 0 auto; } } /* MOBIL · Spielkarte in der Wischreihe. Die feste Zahl 320 war breiter als der Kasten, in dem sie liegt: gemessen bei 390 ein Karussell von 305 Punkten gegen eine Karte von 320 · man bekam in keiner Reihe eine ganze Karte zu sehen. Prozent rechnen gegen den Kasten, nicht gegen das Geraet (siehe Regel 9), und 34 Punkte bleiben als Vorschau auf die naechste Karte stehen · genau das Mass, das bei 430 heute schon steht. */ /* Nicht auf Games, People und Events · dort zeigt jede Wischreihe zwei und ein Drittel Karten (css/nextari-handyseiten.css). */ @media(max-width:767px){ :where(html:not([data-nx-hauptseite])) .carousel > .gcard { flex: 0 0 min(320px, calc(100% - 34px)); max-width: min(320px, calc(100% - 34px)); } } /* MOBIL · Die Statusleiste eines Spiels und der Bibliotheksfilter. Gemessen bei 360, 375 und 390 Punkten: beide Leisten brachen in zwei Zeilen um und "Dropped" stand allein darunter · das liest sich wie ein eigener Bereich statt wie die letzte von sechs gleichrangigen Wahlen (Leistenhoehe 93 bzw. 94 statt 44). Dazu 53 Bedienpaare enger als 8 Punkte und 9,5px Schrift auf genau dem Knopf, der den Zustand eines Spiels benennt. Eine Zeile ist auf 360 Punkten nicht zu haben: sechs versale Woerter mit Fingerabstand brauchen mehr Platz, als das Geraet hat. Statt an Luecke und Polsterung zu feilen, bis es auf einen Punkt genau passt, ein festes Raster aus drei Spalten · gleich breite Knoepfe, 8 Punkte Abstand, und in der zweiten Zeile steht kein Einzelgaenger mehr. Die Regeln stehen hier und nicht in der Seiten-CSS, weil sie nur auf dem Telefon gelten sollen · am Schreibtisch passt die Zeile. */ @media(max-width:767px){ .nx-gs, .nx-gs-f { gap: 8px; } .nx-gs-b, .nx-gs-f .nx-gs-b { /* 11 steht auf keiner Sprosse der Leiter, und die Grundschrift dieses Knopfes ist ohnehin 10,5 · die Zeile wurde hier also GROESSER gemacht, um sechs Knoepfe unterzubringen. 10,5 ist schmaler und richtig. Seit Nr. C64 steht hier die Groesse, die die Knopfrolle in nxm-typo.js ohnehin setzt (Text, am Telefon 15): die Quelle sagte 12, die Rolle zog nach dem Laden auf 15, gemessen 46 Mal. Ein Mass, ein Besitzer. */ font-size: var(--nx-typo-text); padding-left: 6px; padding-right: 6px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } } /* Das Raster gilt nur so weit, wie die Zeile wirklich nicht mehr passt. Gemessen mit 11px Schrift und 8 Punkten Luecke: die sechs Knoepfe brauchen 366 Punkte, der Kasten hat sie ab 430 Fensterbreite. Ueber 560 kostet das Raster deshalb nur: bei 760 wurden aus einer 44 Punkte hohen Zeile zwei Reihen mit 229 Punkte breiten Knoepfen, die nicht mehr zu den beiden Filterreihen direkt darueber passen. Unterhalb bleibt es, weil es auf jeder Breite traegt · bei 430 hat die Zeile nur 7 Punkte Luft, und das haengt an der Schrift, die das Geraet gerade liefert. */ @media(max-width:560px){ .nx-gs, .nx-gs-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } /* Der Hinweis "Dropped stays private" ist kein Knopf und bekommt eine eigene Zeile, statt eine Rasterzelle zu besetzen · mittig unter den Knoepfen, nicht in der Ecke der Flaeche. */ .nx-gs .nx-gs-p { grid-column: 1 / -1; padding: 2px 11px 9px; text-align: center; } } /* MOBIL · Ergebniszeilen. .nx-erg-s traegt in nextari.css white-space:nowrap mit Ellipse. Am Schreibtisch stimmt das, auf dem Telefon fiel damit die Haelfte der Zeile weg · gemessen 127 von 303 Punkten ("Dota 2 · 2025-09-14 · then …"), also genau der Teil mit Datum und Gegner. Die Zeile ist kurz genug fuer zwei. Doppelt geschrieben, weil nextari.css spaeter eingebunden ist · mit einfacher Klasse blieb die Regel wirkungslos. */ @media(max-width:767px){ .nx-erg-s.nx-erg-s { white-space: normal; overflow: visible; text-overflow: clip; } } /* MOBIL · Das Raster der Spielzeiten im Steckbrief (Feld C14). Gemessen im geoeffneten Editor bei 390: sieben Tagesspalten zu 22 Punkten, Raster 256 Punkte breit, daneben 93 Punkte ungenutzt · jede Zelle kleiner als eine Fingerkuppe. Sieben Spalten passen auf einem Telefon nicht, vier schon. Gedreht wird ohne Eingriff in den Bau: die Zeilen geben ihre Kaesten frei (display:contents), das Raster nimmt alle 40 Felder selbst auf und fuellt sie spaltenweise. Aus 8 Spalten x 5 Zeilen werden 5 Spalten x 8 Zeilen · vier Zeiten oben, sieben Tage untereinander. Das ist die Anordnung, die der Lese-Block "When you play" schon benutzt. */ @media(max-width:767px){ #nxSteckbrief .nx-sbrast { display: grid; grid-auto-flow: column; grid-template-rows: repeat(8, auto); grid-template-columns: 48px repeat(4, minmax(0, 1fr)); gap: 4px; align-items: center; } #nxSteckbrief .nx-sbrz { display: contents; } #nxSteckbrief .nx-sbrc { width: auto; } /* Die Zeitnamen stehen jetzt als Spaltenkoepfe ueber vier schmalen Spalten. "Afternoon" brauchte bei 360 Punkten 55 von 49 verfuegbaren · die Sperrung der Versalien ist hier der Unterschied und traegt nichts zur Lesbarkeit bei, wenn das Wort dafuer ueber den Nachbarn laeuft. */ #nxSteckbrief .nx-sbrl { letter-spacing: 0; text-align: center; } } /* MOBIL · Die Spieltitel in den Bibliotheks-Chips. Das Entfernen-Kreuz daneben ist ein 44-Punkte-Knopf geworden und loescht einen Wunschlisteneintrag ohne Rueckfrage. Der Titel daneben blieb 17 Punkte hoch (128 Stueck gemessen bei 390) · wer den Titel meint und 8 Punkte danebengreift, trifft das Kreuz. Gleiche Trefferhoehe fuer beide. Die Chips mit Kreuz sind schon 62 Punkte hoch, ihre Hoehe aendert sich dadurch nicht. */ @media(max-width:767px){ } /* MOBIL · Reste aus der Messung. 1 Wischbahnen: eine Regel dieser Datei macht Raster zu Spalten. Sie traf auch Baender, die seitlich schieben sollen · in der Bibliothek waren dadurch sechs von acht Spielen unerreichbar. Baender behalten ihr Schieben. 2 Wochenkalender: sieben Spalten auf einem Telefon sind sieben Farbpunkte auf 800 Punkten Hoehe. Untereinander ist er lesbar. 3 Unsichtbare Weiter-Pfeile lagen ueber echten Knoepfen und fingen den Daumendruck ab. Wo es kein Zeigen gibt, nehmen sie keine Klicks mehr. 4 Fingermass: das Mass des Hauses steht in NXMOBIL.regeln.fingermass und ist 44 Punkte. Darunter ist ein Ziel mit dem Daumen nicht sicher zu treffen · die Zahl hier ist dieselbe wie dort, sonst gilt je nach Klasse ein anderes Mass. */ @media(max-width:767px){ .libcarousel, .carousel, .nxsh-carou, .nx-fcar, .nx-shelf, [class*="carou"]{ overflow-x:auto; -webkit-overflow-scrolling:touch; display:flex!important; flex-wrap:nowrap; scroll-snap-type:x proximity} .libcarousel > *, .carousel > *, .nxsh-carou > *, .nx-fcar > *{flex:0 0 auto; scroll-snap-align:start} /* ZWEI TAGE NEBENEINANDER, nicht sieben untereinander. Ein Tag je Zeile machte aus der Woche eine Saeule grosser Ziffern. Events steht schon auf zwei Spalten · derselbe Kalender, dieselbe Form. Heute beginnt die Woche und nimmt die ganze Zeile, dann bleibt am Ende kein Tag allein stehen. */ .nx-cal-week.nx-cal-week{grid-template-columns:repeat(2,minmax(0,1fr))!important} .nx-cal-day{min-height:0} .nx-cal-day.today:first-child, .nxec-day.today:first-child{grid-column:1/-1} } @media(hover:none){ .nx-nfx, .nxsh-nb, .nx-nb, .slider-arrow{pointer-events:none} } @media(max-width:767px){ .nx-tgl, .btn, .nbtn, .nxsh-cbtn, .icon-btn, .chip-f, .fchip, .nx-qr-chip{ min-height:var(--nx-h-bedien)} } /* 2 BEDIENPAARE ENGER ALS 8 PUNKTE. Gemessen bei 390 · nav.nx-snav 4, .grp-tabs 4, .nx-tune 4, .nx-speed 6, #catchips 6, .nx-poll-opts 6, .nx-rec-wahl 6, .nx-qr-chips 7, #nxSelbst .w 7. Alle diese Werte stehen in Stilbloecken, die ihre Module erst zur Laufzeit einhaengen · sie stehen damit hinter dieser Datei und gewinnen bei gleicher Spezifitaet. Deshalb hier mit Gewicht. */ @media(max-width:767px){ nav.nx-snav, .grp-tabs, .nx-speed, .nx-tune, .nx-rec-wahl, .nx-poll-opts, .nx-qr-chips, #catchips.chips, #nxSelbst .w, .nx-kul-rest { gap: 8px !important; } /* Die Filterchips der Ereignisleiste liegen in einer blossen Huelle ohne eigene Luecke · zwischen ihnen stand nur der Wortabstand (gemessen 1,8 Punkte, nachdem die Chips aus Punkt 3b ihre volle Hoehe bekommen hatten). Die Huelle wird selbst zur Reihe, .flabel bleibt aussen vor · sie ist kein Chipbehaelter, sondern die Beschriftung davor. */ .dbar .drow > span:not(.flabel) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } } /* 3 FINGERMASS · was die vier vorherigen Durchgaenge nicht erreicht haben. a Eingabefelder und Auswahlen. Gemessen: #grpPost 21, #nxPzZiel 20, .nx-wz-in 37, #nxFamHandle 39, #nxStreamUrl 39, #nxFinderRang 39 Punkte hoch. min-width:0 kommt dazu, weil ein Feld als Flex-Kind sonst seine Eigenbreite behaelt: im Nachrichten-Fenster schob input.cin den Senden-Knopf 24 Punkte ueber den Rand (l 372 bis r 414 bei 390 Breite) · die Nachricht liess sich nicht abschicken. b Filterchips tragen min-height schon aus Durchgang 4, aber als display:inline verpufft die Regel · min-height gilt nicht fuer nicht-ersetzte Inline-Elemente. Gemessen .fchip auf events: 34 statt 40. c Knoepfe, die nicht zu niedrig, sondern zu schmal sind: ein Zeichen oder ein Zeichen ohne Wort. Gemessen button.x 7 Punkte breit, .nx-prel-ed 19, .eh-pin 22, .nx-tn-fold 27, #nxShare 32, .fr-j 33. d Links, die als Knopf auftreten und deshalb keinen Fliesstext zerreissen, wenn sie wachsen. Gemessen .go 32, .b 27, .nx-plansess 30, .ed-back 34, .gjoin 34, .nx-rsup-go 36, #nxShare a 31, .nx-set-nav a 29 Punkte hoch; .safetybar a 29 und die Bibliothekschips ab 27 Punkte breit. Die Zahl ist 44, nicht 40. Das Register nennt in NXMOBIL.regeln.fingermass 44 Punkte, umgesetzt waren hier 40 · vier Punkte weniger, als die eigene Regel verlangt. Das Register ist die Wahrheit, die Umsetzung zieht nach. */ @media(max-width:767px){ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: var(--nx-h-bedien); min-width: 0; } .chip-f, .fchip, .nx-qr-chip { display: inline-flex; align-items: center; } /* Rule 1 dieser Datei gibt jedem direkten Kind eines "grid"-, "cols"- oder "row"-Kastens min-width:0, damit Textspalten schmal werden koennen. Mit einer Klasse im Selektor schlaegt sie die Regel fuer den blossen Knopf · gemessen blieb button.fr-j in div.fr-row deshalb bei 33 Punkten Breite. Ein Fingerziel ist keine Textspalte und wird hier ausgenommen. */ [class*="grid"] > button, [class*="cols"] > button, [class*="row"] > button, [class*="grid"] > [role="button"], [class*="cols"] > [role="button"], [class*="row"] > [role="button"], button, [role="button"] { min-width: var(--nx-h-bedien); } /* .ed-back fehlt hier mit Absicht: am Telefon steht der Weg zurueck als "‹" im Kopf, die Krumen treten zurueck (Abschnitt Registerleiste, unten). */ a.gjoin, a.go, a.b, a.k, a.nx-plansess, a.nx-rsup-go { min-height: var(--nx-h-bedien); min-width: var(--nx-h-bedien); /* Wer display umstellt, uebernimmt die Ausrichtung und muss sie setzen. Ohne justify-content steht die Beschriftung eines gedehnten Knopfes links an der Kante · gemessen am Knopf "Support" auf Home: 247 Punkte breit, das Wort 42 davon, 0 Punkte Luft links und 206 rechts. */ display: inline-flex; align-items: center; justify-content: center; } /* EIN WORT STEHT AUF DER KANTE, NICHT IN DER MITTE SEINER TIPPFLAECHE. Kaesten (oben) werden mittig gedehnt, ihre Kante ist der Kasten. Ein Wort ohne Kasten hat nur sich selbst als Kante · mittig in 44 Punkten stand "Games" in der Brotkrume der Spielseite 6 Punkte rechts von der Karte darunter. Die Tippflaeche waechst nach rechts, das Wort bleibt. #nxShare a steht nicht mehr hier: seine Hoehe hat der Bauer (nxm-ev3-share.js) fuer Links und Knoepfe gemeinsam. Nur die Links zu heben machte "Copy invite" 40 und WhatsApp und X 44 hoch. */ .safetybar a, .nx-set-nav a, .crumb a, #nxLibArea a { min-height: var(--nx-h-bedien); min-width: var(--nx-h-bedien); display: inline-flex; align-items: center; justify-content: flex-start; } } /* 4 DIE KOPFZEILE EINER FEED-KARTE. Gemessen auf nextari-home bei 390 Punkten: .phead ist 250 Punkte breit und steht auf flex-wrap:nowrap. Der Namensblock darin behielt seine Eigenbreite von 354 Punkten und lief bis r 484 · article.post schneidet mit overflow:hidden ab, der Rest der Zeile war weg. Betroffen waren Name samt Zeitstempel, das Schliesskreuz und die Begruendung "Because you follow ...". Rule 1 fasst nur Kaesten mit "grid", "cols" oder "row" im Klassennamen · .phead heisst anders. Umbrechen UND schmal werden duerfen, wie in Rule 12. */ @media(max-width:767px){ .phead { flex-wrap: wrap; row-gap: 8px; } .phead > * { min-width: 0; } } /* 5 DIE KOPFZEILE DER FEED-KARTE, ZWEITER TEIL. .uname steht in nextari-home.css auf white-space:nowrap mit Ellipse und overflow:hidden. Am Schreibtisch ist die Zeile breit genug; bei 390 Punkten ist sie 250 breit und der Inhalt 354 · gemessen fiel der Spielname (b.nx-fa-g, l 248 bis r 424) vollstaendig weg, und was blieb, endete als "Berlin Phoenixscheduled Cla…". Die Zeile nennt WER WAS getan hat · genau der zweite Teil war weg. Dieselbe Behandlung wie bei .nx-erg-s: umbrechen statt abschneiden. Die Kinder behalten ihr eigenes nowrap, ein Spielname bricht also weiter nicht mitten im Wort. */ @media(max-width:767px){ .uname.uname { flex-wrap: wrap; white-space: normal; overflow: visible; text-overflow: clip; } } /* 6 FINGERMASS · Ueberschriften und Aufrufe, die als Link auftreten. Rule 4 nimmt bewusst aus, was inline im Fliesstext steht · ein Link mitten im Satz auf Fingermass zu ziehen zerreisst den Absatz. Diese hier stehen nicht im Satz: sie SIND die Ueberschrift einer Reihe oder der einzige Aufruf in einem Block. Gemessen bei 390 Punkten: die Reihenkoepfe der People-Seite 19 Punkte hoch, "Live at LVL Berlin" auf events 19, der Gruppenname in der H1 35, "Find your next night" auf dem Profil 15 und "Send a message" 17. Die Zahl ist 44 wie in Rule 3 · das Mass steht in NXMOBIL.regeln.fingermass, und zwei Masse im selben Haus heissen, dass je nach Klasse etwas anderes gilt. Dazu die AUSGAENGE, die ein Modul selbst an eine Reihe oder eine Karte haengt. Sie tragen ihre Gestalt inline, aber keine Hoehe, und standen deshalb unter jedem Mass: "See all" 15 Punkte hoch (fuenfmal auf Home), der Weg von einer Feedkarte zum Spiel 13 (sechsmal), "Browse games" 26, "Manage in Settings" 34, "Skip to content" 38 · alles bei 390 Punkten gemessen. Sie stehen nicht im Satz, sondern am Ende einer Kopfzeile; sie duerfen also wachsen. */ @media(max-width:767px){ .shead h2 a, .shead h3 a, .grp-top h1 a, .lvl-tt b a, #nxProfilNaechte .bbody > a, .ggmeta a, #masonry .block > div > a, a.nx-ausgang, a.nx-kartenweg, a.nx-gm-act, a.nx-stg-kn, a.nx-sprung, /* Der Querweg setzt sich seine Hoehe selbst auf einen festen Wert unter dem Fingermass. Er steht als eigene Pille am Ende einer Reihe, nicht im Satz · also gilt fuer ihn dasselbe Mass wie fuer jeden anderen Ausgang. */ a.nx-quer { min-height: var(--nx-h-bedien); display: inline-flex; align-items: center; } /* Kanalliste und Reiterleiste der Gruppenseite stehen uebereinander und beruehren sich fast · gemessen 1 Punkt zwischen dem letzten Kanal und dem ersten Reiter. */ .grp-tabs { margin-top: 8px; margin-bottom: 8px; } } /* ========================================================================== 13 WERKZEUGSEITEN AM TELEFON · EINE KANTE, EIN GRIFF, EIN FINGERMASS. Die Werkzeugseiten (Studio, Konsole, Agentur, Publisher, Event Studio) stapeln am Telefon, seit das Register sie freigibt. Gestapelt hiess bis hierher: sie laufen, aber sie sind nicht zu bedienen. Gemessen am bei 390 Punkten auf allen 21 Seiten des Registers. */ @media(max-width:767px){ /* a EINE LINKE KANTE. main traegt den Seitenrand von 14 Punkten. Die Seiten-CSS geben jedem Kind zusaetzlich max-width:var(--nx-breite) und zwei Auto-Raender mit, und --nx-breite ist unterhalb von 1328 Punkten calc(100% - 48px). Jedes zweite Kind stand damit 24 Punkte weiter innen als sein Nachbar · der Text lag auf zwei Kanten (gemessen 14 und 38). Faellt die Deckelung, rechnen die Auto-Raender zu null, und es bleibt die Kante von main. */ html body .app > .main > *{max-width:100%} /* b DER WEG ZURUECK IN DIE APP. Die Wortmarke der Werkzeug-Kopfleiste fuehrt zurueck in die App und ist damit der wichtigste Griff der Seite. Als schrumpfendes Flex-Kind war sie auf 7 bis 11 Punkte Hoehe zusammengedrueckt und als Ziel nicht mehr vorhanden. Sie behaelt jetzt ihre Groesse, der Zurueck-Knopf daneben wird quadratisch, und der Rand der Leiste steht auf der Kante von main. */ html body .nx-conbar{padding-left:14px;padding-right:14px;gap:var(--nx-luecke-knopf)} html body .nx-conbar .nx-cb-brand{min-height:var(--nx-h-bedien);flex:0 0 auto;align-items:center} html body .nx-conbar .nx-cb-logo{width:96px;height:auto;flex:none} html body .nx-conbar .nx-cb-back{min-width:var(--nx-h-bedien);height:var(--nx-h-bedien);padding:0 10px;justify-content:center;flex:none} /* Der Kontoblock ist das einzige Kind der Leiste, das nachgeben darf · ohne min-width:0 behaelt er seine Eigenbreite und schiebt sich bei 360 Punkten 5 bis 13 Punkte ueber die rechte Kante. */ html body .nx-conbar .nx-cb-id{min-width:0} html body .nx-conbar .nx-cb-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* c DAS FINGERMASS DES REGISTERS. nextari.css steht in jeder Werkzeugseite HINTER dieser Datei · bei gleicher Spezifitaet gewinnt die spaetere Regel. Dort steht heute --nx-h-bedien, am Telefon also dasselbe Mass wie hier; die hoehere Spezifitaet bleibt, damit eine Seite ihren Knopf weiterhin selbst groesser machen kann, ohne !important. */ html body .btn, html body .btn.sm, html body .joinbtn, html body .buybtn, html body .nx-watch, html body .ebtn, html body .cbtn, html body .rsvp, html body .nx-set-btn, html body .nxsh-go, html body button.nx-fm-btn, html body .nx-cl-act, html body .nx-tn-act{min-height:var(--nx-h-bedien)} html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html body select, html body textarea{min-height:var(--nx-h-bedien)} /* d DIE AUSWAHLKAESTCHEN DER MASSENAKTION. 16 mal 16 Punkte, ohne umschliessendes Label · am Telefon steht das Kaestchen allein auf seiner Zeile, weil die Tabellenzeile dort stapelt, und ist mit dem Finger nicht zu treffen. Ohne Zugriff auf die Auszeichnung bleibt nur das Kaestchen selbst: es waechst auf das Fingermass. Gewachsen war aber auch das gezeichnete Kaestchen: Chrome malte es 44 mal 44 Punkte gross und hellgrau, ein leeres Quadrat ueber jedem Profilbild (Console Members, Nr. C6). Die Trefferflaeche bleibt 44, gezeichnet wird ein Kaestchen von 20 Punkten in ihrer Mitte · Flaeche 2, Rand gedaempft, angehakt die eine Lila-Flaeche mit weissem Haken. */ html body input.bsel, html body input.ball{width:var(--nx-h-bedien);height:var(--nx-h-bedien);flex:none; -webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:var(--nx-r-bedien,10px);cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='6' fill='%232d2d34' stroke='%23aaa9c0' stroke-width='1.5'/%3E%3C/svg%3E") center/20px 20px no-repeat} html body input.bsel:checked, html body input.ball:checked{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' rx='6' fill='%235b27e8'/%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} html body input.bsel:focus-visible, html body input.ball:focus-visible{outline:2px solid #fff;outline-offset:-8px} /* e DER EINTRAGS-EDITOR DER PUBLISHER-SEITE. Namensfeld und Zusatzzeile teilen sich eine Zeile mit vier Knoepfen und einem Typ-Schild · bei 390 Punkten blieben den Feldern 18 Punkte Breite. Am Telefon bekommen die Felder ihre eigene Zeile. */ html body .nx-ped .nx-ced-it{flex-wrap:wrap} html body .nx-ped .nx-ced-fld{flex:1 1 100%;min-width:0} html body .nx-ped .nx-ced-fld input{width:100%;box-sizing:border-box} html body .nx-ped .nx-ced-cb{min-width:var(--nx-h-bedien)} /* f DER FUSS. Die Seiten-CSS setzen .app~footer.footer .finner auf vier Spalten, ohne Abfrage · bei 390 Punkten sind das Spalten von 39 Punkten, in denen "Become a partner" vierzeilig ausfranst. Zwei Spalten, der Markenblock ueber die volle Breite, und der Rand steht auf der Kante der Seite. */ html body .footer .finner, html body .app ~ footer.footer .finner{ grid-template-columns:1fr 1fr; gap:4px 18px; /* Der Fuss steht auf derselben Textkante wie der Inhalt. Am Schreibtisch tun sie das schon: Inhalt 58, Fuss 58 · Seitenrand 34 plus 24 Punkte Polsterung. Am Telefon stand der Fuss auf 14 und der Inhalt auf 38, und beim Scrollen sprang die linke Kante. Dieselbe Rechnung mit der Telefonkante: 14 plus 24. */ padding:38px 38px 30px; max-width:none!important; margin:0!important; } html body .footer .finner > .fbrand{grid-column:1 / -1} /* g LINKS, DIE ALS KNOPF AUFTRETEN. Sie stehen allein auf ihrer Zeile und zerreissen keinen Satz, wenn sie wachsen · gemessen "Sign in" im Konsolen-Hinweis 60 mal 27, "Open Events" 106 mal 33, "Edit under Games" 133 mal 35, "View it live on People" 96 mal 30 Punkte. Links MITTEN im Satz bleiben ausgenommen, wie in Regel 4 dieser Datei festgehalten. */ html body #nxKTuer a, html body .nx-hostcard-go, html body .nx-ced-dis, html body .nx-chx-h > a{min-height:var(--nx-h-bedien);display:inline-flex;align-items:center} /* h DER FUSS HAT EINE KANTE, NICHT ZWEI. Die Schlusszeile sitzt in .fbarin und traegt aus den Seiten-CSS eine Deckelung auf die Seitenbreite (max-width:var(--nx-breite)); bei 390 Punkten wird daraus calc(100% - 68px), zentriert beginnt sie also auf 34 · der Fuss darueber beginnt auf 14. Gemessen auf Home, Games und People. Auf Home gewinnt css/nextari-home.css mit !important, darum hier ebenfalls. Die Werkzeugseiten tragen denselben Fix seit dem (nextari-gemeinsam-werkzeuge.css, nextari-gemeinsam-console.css). */ html body .footer .fbar .fbarin{max-width:none!important;margin-left:0!important; margin-right:0!important;padding-left:14px;padding-right:14px} } /* ========================================================================== DER REIHENKOPF AUF DEM TELEFON · EINE SPALTE Auf dem grossen Schirm stehen Titel, Notiz und "See all" nebeneinander in einer Zeile. Auf 390 Punkten bleibt das ein Flex mit Umbruch: der Titel bricht dreizeilig, die Notiz rutscht daneben in eine schmale zweite Spalte, und "See all" landet irgendwo darunter. Gemessen auf Games: der Kopf von "DoktorFroid's favorites for autumn 2026" war 117 Punkte hoch und dabei nicht zu lesen. Gestapelt liest er sich in der Reihenfolge, in der er gemeint ist: Name, dann was die Reihe ist, dann der Weg zu allem. ========================================================================== */ /* Auf Games, People und Events steht der Kopf in EINER Zeile (Titel links, der Weg zu allem rechts, die Notiz klein darunter) · dort gilt css/nextari-handyseiten.css, und dieser Block greift nicht. */ @media (max-width:640px){ :where(html:not([data-nx-hauptseite])) .shead, :where(html:not([data-nx-hauptseite])) .nx-charea-head{flex-direction:column;align-items:flex-start!important; gap:6px!important;flex-wrap:nowrap!important} :where(html:not([data-nx-hauptseite])) .shead h2, :where(html:not([data-nx-hauptseite])) .shead h3, :where(html:not([data-nx-hauptseite])) .nx-charea-head h2, :where(html:not([data-nx-hauptseite])) .nx-charea-head h3{width:100%;min-width:0; display:flex;flex-wrap:wrap;align-items:center;gap:7px} :where(html:not([data-nx-hauptseite])) .shead .note, :where(html:not([data-nx-hauptseite])) .shead .rsub, :where(html:not([data-nx-hauptseite])) .nx-charea-head .note{width:100%;min-width:0;margin-left:0} :where(html:not([data-nx-hauptseite])) .shead .seeall, :where(html:not([data-nx-hauptseite])) .nx-charea-head .seeall, /* Auch der Zaehler ("9 events") wird auf dem grossen Schirm mit margin-left:auto nach rechts geschoben. In der gestapelten Spalte blieb er dort allein stehen, 261 Punkte vom linken Rand entfernt · in einer Spalte gibt es kein Rechts. */ :where(html:not([data-nx-hauptseite])) .shead .nx-zaehler, :where(html:not([data-nx-hauptseite])) .nx-charea-head .nx-zaehler{margin-left:0;align-self:flex-start} } /* 3f EIN VERWEIS IN EINER TABELLENZELLE IST EIN FINGERZIEL. Gemessen auf Events bei 390: die Spielnamen in der Terminliste sind 17 Punkte hoch (Valorant, PUBG) · das Mass ist 40. Die Zeile wird dadurch hoeher, und genau das ist am Telefon richtig: eine Terminliste, die man treffen kann, ist besser als eine, die auf einen Bildschirm passt. */ @media(max-width:767px){ table td a, table th a, .dt td a, .dt th a{ display:inline-flex; align-items:center; min-height:40px; padding:0 2px; } } /* 3g ZEICHENKNOEPFE UND KONTAKTVERWEISE. Gemessen bei 390: der Wegblenden-Knopf im Strom ist 10 Punkte breit (.kbtn traegt nur eine Schriftgroesse, keine Flaeche), der Kontaktverweis auf der Mobil-Seite 17 hoch. Beide sind Ziele, keine Buchstaben. */ @media(max-width:767px){ .kbtn, a.contact{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; } table td a, table th a, .dt td a, .dt th a{ min-width:40px!important; justify-content:flex-start; } } /* ========================================================================== 4 EIN ROLLER JE REIHE .nxsh-carou ist nur der Rahmen fuer die Weiter-Pfeile · der Roller ist das .nxsh-grid darin, das seit jeher overflow-x:auto traegt. Die Rail-Regel oben in dieser Datei fasst aber jede Klasse mit "carou" im Namen und machte auch den Rahmen zum Flex-Kasten. Damit mass sich das Grid an seinem Inhalt statt am Behaelter: 6199 statt 289 Punkte. Die Kartenregel der Seite rechnet ihre 25 Prozent gegen diese Zahl · gemessen wurden Karten von 1538 Punkten Breite in einem Sichtfeld von 381. Von 21 Bild- und Textmarken lag genau eine im Bild, das freenet-Logo 352 Punkte hinter der rechten Kante. ========================================================================== */ @media(max-width:767px){ /* ZWEI BAUER NUTZEN DIE KLASSE ANDERS. nxm-yt.js und nxm-kultur.js machen .nxsh-carou selbst zum Kartentraeger (.nx-yt-carou, .nx-kul-carou), ohne .nxsh-grid darin · als Block standen ihre Karten untereinander (gemessen auf Games 5 Videokarten, 1258 Punkte hoch). Auf Games, People und Events sind sie Wischreihen (css/nextari-handyseiten.css). */ .nxsh-carou.nxsh-carou:not(:where(html[data-nx-hauptseite] :is(.nx-yt-carou, .nx-kul-carou))){display:block!important;overflow-x:visible!important} .nxsh-carou.nxsh-carou:not(:where(html[data-nx-hauptseite] :is(.nx-yt-carou, .nx-kul-carou))) > *{flex:none} } /* ========================================================================== 5 EINE SEITENKANTE AUF DEM TELEFON Die Seiten-CSS deckeln ihre Bloecke auf die Seitenbreite. Unter 1668 Punkten ist die Seitenbreite calc(100% - 68px), zentriert beginnt ein Block damit auf 34 · auch auf einem Telefon, wo von 381 Punkten dann 265 uebrig bleiben. Die Seiten haben dagegen eine Regel bei 760 Punkten, die 14 setzt, aber sie traegt nur eine Klasse und verliert gegen Regeln wie body > .section.nx-pbox-top. Gemessen auf People: 38 Bloecke bei 34, 20 bei 14 · zwei uebereinanderliegende Kaesten standen 20 Punkte auseinander. Hier gewinnt die Kante, mit doppelt geschriebener Klasse. Nachgetragen: vier Bloecke der Spielseite standen noch auf 34 · Fakten (.nx-fk-sec), Sprungleiste (.nx-snav), Faehigkeiten (.nx-caps-gd) und die eigene Geschichte mit dem Spiel (.nx-mh-sec) · dazu die Reihe Playtests in der Bibliothek (.ptsection). ========================================================================== */ @media(max-width:900px){ /* a · BLOECKE DER OBERSTEN EBENE stehen in der Spalte (14 vom Rand am Telefon, 34 auf dem Tablet · beides sagt --nx-breite). Bis 900, weil die Seiten-CSS ab dort ihre Huellen auf die volle Breite setzen. */ html body > .section.section, html body > .nx-row.nx-row, html body > .nx-charea.nx-charea, html .app > .section.section, html .studiobody > .section.section, html body > .nx-snav.nx-snav, html body > .nx-caps-gd.nx-caps-gd, html body > .nx-mh-sec.nx-mh-sec, html body > .adwrap.adwrap, html body > .nxad.nxad, /* b · DIE HUELLEN (main, .wrap, .pwrap, #rows) rahmen nicht selbst, sie laufen ueber die volle Breite · dafuer steht JEDES ihrer Kinder in der Spalte. Vorher trug eine Huelle mal 16 Punkte Polster (Abschnitt 5 LUFT), mal den Rand --nx-rand, und ihre Kinder legten 14 darauf: Inhalt auf 28, 30 oder 44, der Profilname auf 0. */ html body > main > *, html body > .wrap > *, html body > .pwrap > *, html body #rows > *, html body .ptsection.ptsection, html body .nx-fk-sec.nx-fk-sec{ margin-left:auto!important;margin-right:auto!important; max-width:var(--nx-breite)!important;box-sizing:border-box} html body > main, html body > .wrap, html body > .pwrap, html body #rows{ max-width:none!important;margin-left:0!important;margin-right:0!important; padding-left:0!important;padding-right:0!important} /* .shell (die drei Spalten von Home) stapelt am Telefon und traegt aus den Seiten-CSS 16 Punkte Polster mit Vorrang · die Kante gehoert der Spalte. */ html body .shell.shell{padding-left:0;padding-right:0} /* Home rahmt seine Huelle selbst (.nx-dashhome steht in der Spalte) · ihre Kinder tragen deshalb keinen zweiten Rahmen, sonst stand das Brett auf 28. */ html body > main.nx-dashhome > *{margin-left:0!important;margin-right:0!important;max-width:none!important} /* c · EIN KIND IN DER ZEILE bekommt aus auto keinen Rand: bei inline-flex heisst auto 0. Der Weg zurueck (.nx-krume, von nxm-krume.js als erstes Kind in die Huelle gesetzt) stand deshalb auf x=0, der Kasten darunter auf 14. Er bekommt den Abstand der Spalte ausgerechnet · dieselbe Kante, die auto einem Block gibt. */ html body > main > .nx-krume.nx-krume-fluss, html body > .wrap > .nx-krume.nx-krume-fluss{ margin-left:calc((100% - var(--nx-breite)) / 2)} } /* Und ein Kasten im Kasten polstert nicht zweimal: .section liegt auf People in .section.nx-pbox-top, beide mit 24 Punkten Polsterung · die Schrift begann dadurch erst auf 62 statt auf 38. */ @media(max-width:760px){ .section .section, .section .nx-row, .nx-row .section, .nx-charea .section{ padding-left:0!important;padding-right:0!important} } /* 6 EINE PILLE IST SO BREIT WIE IHR WORT. Gemessen auf der Konsole bei 390 Punkten: die Statuspille "Live" stand als Rasterkind in einer einspaltigen Karte und wurde damit auf 321 Punkte gedehnt · ein Band ueber die ganze Karte fuer vier Buchstaben, mit je 130 Punkten Leere links und rechts. Der Chip daneben hielt seine 78. */ @media(max-width:767px){ .pill{width:max-content;max-width:100%;justify-self:start} } /* ========================================================================== 7 EINE KNOPFREIHE, DIE UMBRECHEN DARF In den Angebotskarten der Sponsoring-Seite standen Accept, Decline und Details in einer Zeile, die bei 390 Punkten nicht reicht. Die Pillen wurden auf ihre Mindestbreite gestaucht, der Inhalt lief ueber: das Haekchen von "Accept" stand 17 Punkte neben seiner Pille, das Verbotszeichen lag quer ueber der Zahl 450, und das Auge von "Details" auf dem letzten e von "Decline" · gelesen hat man "Declin" mit einem Auge darauf. Dabei blieben rechts 120 Punkte Kartenbreite leer. ========================================================================== */ @media(max-width:767px){ .req-act{flex-wrap:wrap;row-gap:8px;margin-left:0} .req-act > *{flex:0 0 auto;white-space:nowrap;overflow:visible; min-height:var(--nx-h-bedien);display:inline-flex;align-items:center;justify-content:center} } /* ========================================================================== 8 FUENF ZEICHEN, EINE ZEILE Die Fussspalte "Follow us" ist am Telefon 167 Punkte breit, fuenf Zeichen zu 34 Punkten mit 8 Punkten Abstand brauchen 202 · das fuenfte fiel allein in eine zweite Zeile, waehrend rechts daneben eine leere Gitterzelle von 167 Punkten stand. Die Spalte nimmt jetzt die ganze Breite, dann steht die Reihe vollstaendig und die leere Zelle ist weg. ========================================================================== */ @media(max-width:767px){ .fcol:has(.fsocial),.fcol:has(#fsocial){grid-column:1/-1} .fsocial,#fsocial{flex-wrap:wrap;gap:8px} } /* ========================================================================== 11 DREI ZAHLEN, DREI SPALTEN Followers, Following und Friends brauchen am Telefon 419 Punkte und haben 294 · die dritte fiel allein auf eine zweite Zeile und liess rechts 162 Punkte frei. Nebeneinander passt es nur, wenn die Beschriftung unter die Zahl geht statt daneben. Drei Spalten zu je rund 88 Punkten, Zahl oben, Wort darunter · und die Zeile ist so hoch wie vorher, nur ohne Bruch. ========================================================================== */ @media(max-width:767px){ .phead .pid > .socialbar{gap:10px;column-gap:10px; justify-content:space-between;align-items:flex-start} .phead .pid > .socialbar > .sb-stat{display:flex;flex-direction:column; align-items:flex-start;flex:1 1 0;min-width:0;line-height:1.3; flex-wrap:wrap} .phead .pid > .socialbar > .sb-stat > b{display:block} } /* Eine Zustandsmarke ist auch am Telefon eine Pille · 22 Punkte, nicht 13. Gemeint sind NUR die Marken, die einen Zustand nennen (live, neu, bald, bezahlt). Jede andere Pille kann am Telefon zugleich ein Ziel sein · "See all", die Filterchips, der Dislike-Knopf · und ein Ziel behaelt sein Fingermass. Gemessen fielen acht Stellen auf die weite Fassung herein und standen wieder auf 22 statt 44 Punkten. */ @media(max-width:767px){ [data-nx-pille][data-nx-zustand]{min-height:22px} } /* ========================================================================== 12 DIE ORTSKARTE PASST IN IHREN KASTEN Die Karte in "Happening in Berlin" traegt eine feste Breite von 400 Punkten. Am Telefon steht sie in einem Kasten von 305 · gemessen ragte sie bis 438 bei 381 Punkten Sicht, und vom Knopf "Open the venue" war nur noch "Op" zu sehen und zu treffen. ========================================================================== */ @media(max-width:767px){ .nx-cl > .nx-cl-row{width:100%;max-width:100%;min-width:0} } /* ========================================================================== 13 EINE BANDKOPFZEILE STAPELT AM TELEFON .pthead ("Playtests & Demos") ist eine Zeile aus vier Teilen: Zeichen, Titel, Beschreibung, Zustandspille · und sie steht auf nowrap. Bei 390 Punkten blieben der Beschreibung nach Zeichen, Titel, Pille und drei Abstaenden noch gut vierzig Punkte, sie fiel in neun Zeilen mit je einem Wort. Die Beschreibung bekommt deshalb ihre eigene Zeile, und die Pille bleibt mit Reihenfolge 2 oben rechts neben dem Titel. ========================================================================== */ @media(max-width:767px){ .pthead{flex-wrap:wrap;align-items:flex-start;gap:8px 12px} .pthead > div{flex:1 1 auto;min-width:0} .pthead .live{order:2;margin-left:auto;flex:none} .pthead .s{order:3;flex:1 1 100%;margin-left:0} } /* ========================================================================== 14 DER AUFTAKT WAECHST AM TELEFON MIT SEINEM INHALT .nx-auf ist 270 Punkte hoch und schneidet ab, .nx-auf-in haengt darin absolut an bottom:26. Am Schreibtisch steht der Inhalt in einer Zeile und passt. Bei 390 Punkten bricht dieselbe Zeile um und wird 269 Punkte hoch · von unten gerechnet begann sie damit 25 Punkte OBERHALB des Auftakts und wurde dort abgeschnitten. Auf der Creator-Seite sah man vom runden Profilbild nur noch den unteren Rand, und weil die Kopfleiste genau darueber liegt, wirkte es wie ein Bild hinter der Leiste. Die Hoehe ist am Telefon deshalb ein Mindestmass statt ein Mass, und der Inhalt steht wieder im Fluss. Gemessen auf Community, Games, People und Events. Im Fluss heisst relativ, nicht static: nxm-auftakt.js gibt dem Inhalt die Ebene 1 ueber dem Schleier, und eine Ebene gilt nur fuer ein positioniertes Element. Mit static lag der Schleier (86 Prozent Schwarz) ueber Titel und Knoepfen, und der ganze Kopf sah am Telefon ausgegraut aus. ========================================================================== */ /* Der Auftakt laeuft randlos, sein Inhalt steht auf der Kante der Kopfleiste · --nx-kopfrand ist 34 auf dem Tablet und 14 am Telefon. Hier stand --nx-rand, und das ist seit dem Rahmen-Umbau das Polster einer schlichten Reihe (0): auf dem Tablet stand der Titel am Bildschirmrand. */ @media(max-width:860px){ html body .nx-auf{height:auto;min-height:270px; padding:24px var(--nx-kopfrand) 26px;box-sizing:border-box} html body .nx-auf-in{position:relative!important;left:auto!important; right:auto!important;bottom:auto!important;max-width:none} } /* ========================================================================== 15 EIN BEGRENZTER TEXT UND EINE TIPPFLAECHE SCHLIESSEN SICH NICHT AUS .nx-kul-rest a ist ein Link, der nach zwei Zeilen aufhoert. Regel 4 gibt ihm dazu 44 Punkte Mindesthoehe und ein Polster von 10 Punkten oben und unten. Zwei Zeilen sind 32 Punkte, mit dem Polster 52 · mehr, als der Kasten hoch war, und die dritte Zeile stand waagerecht durchgeschnitten darunter. Der erste Versuch nahm die Mindesthoehe ganz weg. Damit war der Text in Ordnung und der Link 32 Punkte hoch · unter dem Fingermass, das Tor- Schritt 5k mit Recht rot gemeldet hat. Beides geht: ein kleineres Polster und eine MINDESThoehe statt einer Hoehe. Der Kasten waechst dann mit seinem Inhalt, statt ihn abzuschneiden, und ist nie unter 44 Punkten. ========================================================================== */ @media(max-width:767px){ html body .nx-kul-rest a{min-height:var(--nx-h-bedien); padding-top:8px;padding-bottom:8px} } /* ========================================================================== 16 EINE BILDKARTE WAECHST AM TELEFON MIT IHREM TEXT .ftile steht auf aspect-ratio 16/9 und schneidet ab, .fcontent haengt darin absolut an bottom:14 · dasselbe Muster wie beim Auftakt. Am Schreibtisch passt der Text, bei 390 Punkten bricht der Titel auf zwei Zeilen um und die Sponsorenzeile kommt dazu: gemessen 216 Punkte Inhalt in einer 172 Punkte hohen Karte. Der Titel der obersten Karte stand damit 59 Punkte OBERHALB ihrer Kante und war unsichtbar. Am Telefon steht jede dieser Karten allein in ihrer Zeile, gleiche Kartenhoehen sind dort also keine Bedingung. Die Hoehe wird deshalb ein Mindestmass, und der Text steht wieder im Fluss. ========================================================================== */ @media(max-width:767px){ html body .ftile{aspect-ratio:auto;min-height:172px; display:flex!important;flex-direction:column;justify-content:flex-end} html body .ftile > .fcontent{position:static;left:auto; right:auto;bottom:auto;margin:0 16px 14px} } /* ========================================================================== 17 DIE DEMO-MARKE DES TITELBILDS WEICHT DEM KNOPF .nx-stk-demo sitzt oben links im Titelbild, die Knopfgruppe .nx-covbtns oben rechts. Am Schreibtisch ist das Bild breit genug fuer beide. Bei 390 Punkten ist es 265 Punkte breit: die Marke lief bis x205, "Edit cover" begann bei x122 · 83 Punkte uebereinander, beide Beschriftungen doppelt zu lesen. Die Marke geht deshalb nach unten rechts, wo das Bild frei ist · das Profilbild steht unten links. ========================================================================== */ @media(max-width:767px){ html body .banner > .nx-stk-demo{left:auto;right:14px; top:auto;bottom:16px} } /* ========================================================================== 18 EINE REITERZEILE BLEIBT EINE ZEILE Gruppe, Team und Season tragen dieselbe Leiste aus sechs Reitern. Am Telefon brach sie um: auf der Gruppe standen alle sechs auf 44 Punkten Breite gequetscht ("Feed & Chat" auf drei Zeilen, "Scrims" mitten im Wort abgeschnitten, Leiste 76 statt 33 Punkte hoch), auf dem Team riss sie in zwei Reihen mit 36 Punkten leerem Band dazwischen. Eine Hauptnavigation, die umbricht, verliert ihre Ordnung. Sie bleibt deshalb in EINER Reihe und wird seitlich schiebbar · dasselbe Verhalten wie eine Kartenreihe. Der Balken dazu wird nicht gezeichnet, gescrollt wird mit dem Finger. Die gemischten Schriftgroessen hatten einen eigenen Grund: drei Reiter stehen fest in der Seite, drei haengen Module spaeter an. Die Leiter lief, bevor es die drei gab. Behoben ist das an der Quelle · die Regel in den drei Seiten-CSS steht jetzt auf 12,5 statt auf 14 und 13. ========================================================================== */ @media(max-width:767px){ html body .grp-tabs, html body .tm-tabs{ flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none; row-gap:0!important;column-gap:18px} html body .grp-tabs::-webkit-scrollbar, html body .tm-tabs::-webkit-scrollbar{display:none} html body .grp-tab, html body .tm-tab{flex:0 0 auto;white-space:nowrap;min-width:0} html body .grp-tab{padding-left:10px;padding-right:10px} } /* ========================================================================== 19 DIE FEED-KARTE AM TELEFON Der Feed zeigt seit heute dieselben Karten wie am Schreibtisch · und damit auch deren Masse. Auf 317 Punkten Breite war das zu viel: 44 Punkte Profilbild, Name auf 15,5, Kasten mit 16 Punkten Polsterung und 16 dazwischen. Nebeneinandergelegt mit dem, was Leute sonst am Telefon benutzen, wirkt das gross und unfertig. Kleiner wird hier die SCHRIFT und die POLSTERUNG, nicht die Trefferflaeche: jeder Knopf behaelt seine 44 Punkte Hoehe, er traegt sie nur unsichtbar. Die Groessen bleiben auf den Sprossen der Leiter (12,5 · 11,5 · 10,5), es wird also nichts dazwischen erfunden. ========================================================================== */ @media(max-width:767px){ /* Die Innenluft war am Telefon 13/13/11 und am Schreibtisch 16 · zwei Gestaltungen derselben Karte, gemessen im Zwei-Breiten-Blatt. Der Radius 14 daneben hat nie gewirkt, weil zwei Stellen mit Vorrang dagegenhielten · eine Zeile, die etwas behauptet und nichts tut. Im Strom der App traegt der Beitrag keinen Kasten: css/nextari-feed.css setzt dort Polster 0 und als Abstand die Luft (--nx-fk-polster, --nx-fk-abstand). Ohne Token bleibt die Karte, wie sie war. */ html body .post{padding:var(--nx-fk-polster,16px);margin-bottom:var(--nx-fk-abstand,10px)!important} html body .post .av{width:34px!important;height:34px!important;font-size:var(--nx-typo-meta)!important} html body .post .phead{gap:10px} html body .post .uname{font-size:var(--nx-typo-text);line-height:1.35} html body .post .uname b{font-size:var(--nx-typo-text)} html body .post .sub{font-size:var(--nx-typo-meta);line-height:1.4} html body .post .kicker{font-size:var(--nx-typo-klein)} html body .post .nx-ts{font-size:var(--nx-typo-klein)} html body .post .fc-why{font-size:var(--nx-typo-klein)} html body .post .nx-tune-btn{font-size:var(--nx-typo-klein);padding:0 10px} /* Die Knoepfe behalten ihre 44 Punkte Hoehe · Schrift, Polsterung und Luecke der Feedknoepfe am Telefon setzt css/nextari-feed.css (EIN KNOPFMASS, --nx-fk-*). Hier standen frueher eigene Werte mit Vorrang: Handlung 13, Reaktion 10 Punkte Polsterung. */ /* Das Titelbild einer Karte ist das Bunte daran und darf gross bleiben · nur der Rahmen darum wird schmaler. Im Strom der App laeuft es bis an die Raender des Telefons (--nx-fk-bildrand, css/nextari-feed.css). Das Raster im Bild (.banner-grid) liegt absolut darin und braucht keinen eigenen Rand · ohne Regel ist er 0, wie er hier stand. */ html body .post .banner{margin-left:var(--nx-fk-bildrand,0px);margin-right:var(--nx-fk-bildrand,0px)} } /* ========================================================================== 20 DIE FEED-KARTE HAT ZU VIELE BAENDER Gemessen an der Live-Karte von DoktorFroid: 501 Punkte hoch, davon sechs Baender untereinander, und in dreien steht fast nichts. y108 Zeit, LIVE und das Kreuz · ein eigenes Band ueber 289 Punkte Breite fuer drei kleine Dinge y291 "Follow" bei x14, "Watch now" bei x192 · hundert Punkte Nichts dazwischen, weil die Zeile ihre Knoepfe auseinanderzieht y420 der Grund, darunter "More like this" und "Less" auf einer eigenen Zeile, rechts, der Rest der Zeile leer Die Flaeche ist da, sie wird nur nicht benutzt. Also: Zeit, LIVE und Kreuz gehen nach oben rechts NEBEN den Namen · dort ist Platz, und ein Band faellt weg. Die Knoepfe stehen links beieinander statt an den Raendern zu kleben. Der Grund und die beiden Feinregler teilen sich eine Zeile. Nichts faellt weg, alles behaelt seine 44 Punkte Trefferflaeche · es steht nur dort, wo ohnehin Platz war. ========================================================================== */ @media(max-width:767px){ /* a · Die Ecke rueckt am Telefon einen Punkt naeher an den Rand · die Karte hat dort 13 statt 16 Punkte Polsterung. Die Regel selbst steht in css/nextari-feed.css, denn sie gehoert zur KARTE und gilt auf beiden Flaechen. */ html body .post .kicker{top:11px;right:11px} /* Der Name braucht dann Platz fuer das, was in der Ecke steht. */ /* Platz fuer das, was in der Ecke steht · nur in der NAMENSZEILE, denn darunter ist die Ecke wieder frei. Ein schwimmender Abstandhalter reichte nicht: .uname ist selbst eine Flex-Zeile, und an der laeuft ein Float wirkungslos vorbei · "Elden Ring" lag danach auf "25m". */ /* Keine Reserve mehr noetig · die Ecke liegt in der Zeile (nextari-feed.css). */ html body .post .uname{padding-right:0} /* Der Folgen-Knopf steht in der Namenszeile · ein Angebot neben dem Namen, nicht die Handlung der Karte. Er wird schmal ueber Schrift und seitliche Polsterung, aber NICHT flach: 44 Punkte sind eine Fingerkuppe, und das Register nennt sie als Regel. Wer ihn kleiner will, aendert die Regel, nicht diese eine Stelle. */ html body .post .uname > .nxp-folgen{margin-left:10px;flex:0 0 auto; font-size:var(--nx-typo-meta);padding:0 14px;border-radius:var(--nx-r-pille)} html body .post .uname{align-items:center} /* b · Der Name steht NEBEN dem Bild, nicht darunter. Regel 4 dieser Datei liess die Kopfzeile umbrechen, weil Name, Zeit und Kreuz zusammen nicht in eine Zeile passten. Seit Zeit und Kreuz in der Ecke stehen, passen sie · und ein weiteres Band faellt weg. */ html body .post > .phead{display:flex!important;flex-wrap:nowrap; align-items:flex-start;gap:10px;margin-bottom:10px!important} html body .post > .phead > div:not(.av):not(.kicker){flex:1 1 auto;min-width:0} /* c · Die Knoepfe stehen beieinander, nicht an den Raendern. .btn-primary traegt margin-left:auto · am Schreibtisch schiebt das den Hauptknopf ans rechte Ende der Karte, am Telefon riss es hundert Punkte Nichts zwischen zwei Knoepfe. Wo die Zeile beginnt und wie weit die Knoepfe auseinanderstehen, sagt css/nextari-feed.css (links auf der Kante von Titel und Text, gap --nx-luecke-knopf) · hier stand frueher justify-content:flex-end mit !important und schob "Watch now" allein an den rechten Rand. */ html body .post .actions > .btn{flex:0 0 auto;width:auto; margin-left:0;margin-right:0} /* d · Die beiden Feinregler stehen am Telefon nicht auf der Karte. "More like this" und "Less" sind ein Band von 44 Punkten unter jedem Beitrag, der seinen Grund nennt · am Schreibtisch tragbar, auf 317 Punkten Breite ein Element zu viel. Der GRUND bleibt stehen, denn der ist die Aussage. Verstellen laesst sich der Strom weiterhin am Schreibtisch und ueber die Filter. */ /* .nx-tune liegt jetzt in css/nextari-feed.css still · ein Besitzer. */ } /* ========================================================================== EINGABEFELDER AM TELEFON: SECHZEHN PUNKTE, SONST ZOOMT DAS GERAET iOS vergroessert die Seite, sobald man ein Feld antippt, dessen Schrift kleiner als sechzehn Punkte ist · und es macht das nicht rueckgaengig. Wer einmal in ein Suchfeld getippt hat, liest den Rest der Seite vergroessert und schiebt sie von Hand zurecht. Gemessen im Rahmen von 390 Punkten: 190 Felder allein auf vier Seiten, die kleinsten bei 11,5. EINE REGEL, NICHT FUENFHUNDERT. Die Werte stehen ueber das ganze Haus verstreut in den Seiten-Stylesheets; sie einzeln zu heben hiesse, jede neue Seite wieder zu vergessen. Diese Datei liegt auf 51 der 54 Seiten und hinter allen Seiten-Stylesheets. WARUM VORRANG: die Werte kommen aus Klassenregeln der Seiten (.nx-wz-in, .set-row .sv input). Ein Typselektor verliert dagegen, auch wenn er spaeter steht. Die Sperrklinke fuehrt diese Datei ausdruecklich als Besitzerin der Telefonschwelle · hier ist der Vorrang die Entscheidung und kein Ausweichen. AM SCHREIBTISCH AENDERT SICH NICHTS: die Regel steht hinter derselben Schwelle wie der Rest dieser Datei. ========================================================================== */ @media (max-width:767px){ html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), html body select, html body textarea{font-size:var(--nx-schrift-feld)!important} } /* ========================================================================== DIE SPRUNGLEISTE AM TELEFON: IM FLUSS, AUF DER KANTE, MIT SICHTBAREM ENDE Am Schreibtisch klebt die Leiste unter dem Kopf (nx-handschrift.css). Am Telefon lag sie damit als zweite Klebeleiste unter der Kopfleiste und ueber dem Inhalt: in der Luft zwischen beiden und an ihren runden Enden lief die Seite sichtbar durch, gesehen ein gestrichelter Platzhalter mitten hinter der Leiste. Zwei klebende Leisten nehmen auf einem Telefon ein Siebtel des Bildschirms. Sie steht hier deshalb im Fluss, wie jeder andere Block. Sie traegt die Rundung einer Tafel statt einer Pille und die Luft des Hauses nach oben und unten (--nx-luecke-wort) · der Kasten darunter ("Was diese Seite zeigt") stand Kante an Kante an ihr. Die Reiter laufen in ihrer eigenen Kante: an beiden Enden blendet ein Verlauf in die Flaeche aus. Er klebt am Rand und liegt am Anfang vor dem ersten, am Ende hinter dem letzten Reiter, die dann ganz zu lesen sind · vorher stand dort ein halbes Wort ("Editione"), abgeschnitten von der Kante. ========================================================================== */ @media (max-width:767px){ html body nav.nx-snav{position:static;border-radius:var(--nx-r-tafel); margin-top:var(--nx-luecke-wort);margin-bottom:var(--nx-luecke-wort)} /* Ein Reiter traegt das Fingermass (Abschnitt 3) · sein Wort steht in dessen Mitte, nicht an der Oberkante. */ html body nav.nx-snav > a{display:flex;align-items:center} html body nav.nx-snav::before, html body nav.nx-snav::after{content:"";position:sticky;flex:none;align-self:stretch; width:calc(var(--nx-innen) * 2);pointer-events:none} /* Der Anfang braucht keinen Platz in der Reihe: sein Rand nimmt ihn samt Knopfluecke zurueck, der erste Reiter steht wie bisher. */ html body nav.nx-snav::before{left:calc(var(--nx-innen) * -1); margin:0 calc(var(--nx-innen) * -1 - var(--nx-luecke-knopf)) 0 calc(var(--nx-innen) * -1); background:linear-gradient(270deg,transparent,var(--nx-flaeche))} html body nav.nx-snav::after{right:calc(var(--nx-innen) * -1);margin-right:calc(var(--nx-innen) * -1); background:linear-gradient(90deg,transparent,var(--nx-flaeche))} } /* ========================================================================== DIE REGISTERLEISTE · EIN BAUTEIL FUER JEDE TELEFONSEITE Now, Games, People und Events stehen unten auf jeder Telefonseite, nicht nur auf Pulse. Das Markup baut nxm-mobil.js (NXMOBIL.register), das Aussehen steht nur hier · vorher in css/nextari-pulse.css, als die Leiste nur dort stand. Glas wie der Kopf (--nx-glas-leiste, nextari.css), damit oben und unten dieselbe Flaeche stehen. Unter der Leiste liegt der sichere Bereich des Geraets (Home-Leiste): die Flaeche reicht hinein, die Reiter stehen darueber. Was unten am Rand klebt (Anpassen-Knopf, Meldungen, Minimiert-Leiste), rueckt um --nx-unten ueber die Leiste. Der Wert gilt nur, wo eine Leiste steht; ohne sie ist er der sichere Bereich allein. ========================================================================== */ .m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex; background:var(--nx-glas-leiste); -webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich); padding-bottom:env(safe-area-inset-bottom,0px); view-transition-name:nx-register} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .m-tabs{background:var(--nx-flaeche)} } .m-tab{flex:1;min-height:var(--nx-register-h);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;background:none;border:0;color:var(--nx-schwach); font:700 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:.04em;cursor:pointer;text-decoration:none} /* Nur das Zeichen, kein Wort darunter (Entscheidung 06.10.) · das Wort bleibt im Knopf fuer Vorlesewerkzeuge, die Tippflaeche bleibt die ganze Spalte in Leistenhoehe (64). */ .m-tab .m-tab-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .m-tab svg{width:24px;height:24px} .m-tab.on{color:#fff} .m-tab.on svg{color:var(--nx-text)} @media (min-width:768px){ .m-tabs{display:none} /* Me-Spiegel aus: am Schreibtisch stehen Fuss und Kontomenue selbst da. */ .nx-drawer .nx-dme{display:none} } :root{--nx-unten:env(safe-area-inset-bottom,0px)} @media (max-width:767px){ html.nx-mit-register{--nx-unten:calc(var(--nx-register-h) + env(safe-area-inset-bottom,0px))} /* Das Polster gehoert der Leiste: der letzte Inhalt endet ueber ihr, nie darunter. Pulse rechnet seine Ansichten mit derselben Hoehe. */ html.nx-mit-register body{padding-bottom:var(--nx-unten)} /* Schwebt der Anpassen-Knopf ueber der Leiste (Spielseite), endet der letzte Inhalt auch ueber ihm · sonst deckte er ganz unten die rechte Haelfte der letzten Reihe ("Who is playing"). In einer Reihe stehend (.czfab-leiste) schwebt er nicht. */ html.nx-mit-register body:has(.czfab:not(.czfab-leiste)){ padding-bottom:calc(var(--nx-unten) + var(--nx-luecke-wort) + var(--nx-fab))} html.nx-mit-register .czfab, html.nx-mit-register .nx-demo-fab, html.nx-mit-register .nx-toast, html.nx-mit-register .nxbuy-toast, html.nx-mit-register .bulkbar, html.nx-mit-register #nxEbeneMin{bottom:calc(var(--nx-unten) + var(--nx-luecke-wort))} /* DAS WEBSITE-ENDE ZIEHT NACH ME. Fuss (rund 940 Punkte, zwoelf Verweise), das Band darunter und die Bewertungsleiste stehen am Telefon nicht mehr am Seitenende. Weg ist nichts: die Schublade hinter dem Bild im Kopf (nxm-chrome.js, Me) liest beim Oeffnen Verweise, Sprachwahl, Claim, Band und Sterne aus genau diesen Elementen · sie bleiben deshalb im Dokument, nur unsichtbar. Am Schreibtisch bleibt alles, wie es war. */ html.nx-mit-register footer.footer, html.nx-mit-register .survey, html.nx-mit-register #nxFeedbackBar{display:none} /* In Me fallen die vier Orte weg, sie stehen unten in der Leiste · nur wo eine steht, sonst gaebe es keinen Weg zu ihnen. Auf den Werkzeugseiten fuehrt das Bild der Betreiberleiste nach Me (nxm-chrome.js). */ html.nx-mit-register .nx-drawer .nx-dlink.nx-dnav{display:none} /* Die Live-Zeile steht in Me im Fluss. Am Schreibtisch sitzt sie unten in der Schublade (margin-top:auto, nxm-chrome.js) · in Me folgen ihr Kontomenue und Fuss, und auf kurzen Seiten (Anmeldung) stand sie sonst mitten in einer leeren Flaeche. */ html .nx-drawer .nx-dlive{margin-top:0} .nx-conbar .nx-cb-id{cursor:pointer} } /* ========================================================================== DAS BLATT VON UNTEN (nxm-blatt.js) Kurzinfo, Teilen und Filter steigen am Telefon von unten auf, in EINER Form: Flaeche ueber die ganze Breite, oben gerundet, ein Griff, und Herunterziehen legt das Blatt weg. Die Lage gehoert hier, der Inhalt dem Aufrufer (nxm-ev3-kurz.js, nxm-cover.js, nxm-filterschublade.js, nxm-mobil-heim.js). WARUM DOPPELT GEMARKT (Klasse und data-nx-blatt): die Aufrufer setzen ihre Fenster mit zwei Klassen (.nx-fsch .box) oder einer Kennung. Das Blatt muss dagegen gewinnen, ohne Vorrangzeichen · eine Stufe mehr reicht. Am Schreibtisch setzt niemand diese Marken, die Fenster bleiben. ========================================================================== */ :root{--nx-blatt-grund:rgba(6,6,11,.62);--nx-blatt-hoehe:88vh} .nx-blatt-schleier{display:none} @media (max-width:767px){ html.nx-blatt-offen,html.nx-blatt-offen body{overflow:hidden} html .nx-blatt-hg{align-items:flex-end;justify-content:stretch;padding:0} html .nx-blatt[data-nx-blatt]{position:fixed;left:0;right:0;bottom:0;top:auto; width:auto;max-width:none;max-height:var(--nx-blatt-hoehe);margin:0; display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain; box-sizing:border-box;background:var(--nx-flaeche);border:0;box-shadow:none; border-radius:var(--nx-r-block) var(--nx-r-block) 0 0; padding:0 var(--nx-innen) calc(var(--nx-luecke-wort) + env(safe-area-inset-bottom,0px)); transform:translateY(var(--nx-blatt-zug,0px)); transition:transform var(--nx-dauer-wechsel) ease-out} html .nx-blatt[data-nx-blatt].nx-blatt-zieht{transition:none} /* Der Griff ist das Zeichen, dass man ziehen kann · seine Flaeche ist groesser als der Strich, damit ein Daumen ihn trifft. */ html .nx-blatt[data-nx-blatt] > .nx-blatt-griff{display:block;flex:none;position:relative; width:38px;height:4px;margin:var(--nx-luecke-knopf) auto var(--nx-luecke-kompakt); border-radius:var(--nx-r-pille);background:var(--nx-hebung-2)} html .nx-blatt[data-nx-blatt] > .nx-blatt-griff::before{content:"";position:absolute; left:-40px;right:-40px;top:-14px;bottom:-14px} html .nx-blatt-schleier{display:block;position:fixed;inset:0;background:var(--nx-blatt-grund)} @media (prefers-reduced-motion:no-preference){ html .nx-blatt[data-nx-blatt]{animation:nxBlattAuf var(--nx-dauer-wechsel) ease-out} @keyframes nxBlattAuf{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}} } } /* ZIEHEN ZUM AKTUALISIEREN AUF NOW (nxm-mobilapp.js): der Browser zieht dort nicht selbst · sonst laedt seine Geste die ganze Seite neu, waehrend die eigene den Stand holt. Nur auf Now, nur am Telefon. */ @media (max-width:767px){html[data-nx-register="now"]:has(#ans-now){overscroll-behavior-y:contain}} /* PULSE BEI 360: MESSAGES ZIEHT NACH ME. Wortmarke, BETA und vier Ziele brauchen 330 Punkte · bei 360 bleiben nach dem Rand 328, und Me stand mit seinem Zeichen 2 bis 4 Punkte ueber der Kante. Unter 380 faellt der Brief im Kopf weg; die Unterhaltungen stehen in Me (Karte "Conversations", nxm-mobilapp.js). */ @media (max-width:379px){.m-kopf #mNachrichten{display:none}} /* DIE SCHLANGE AM TELEFON (Nr. C66, 05.10.). Vier Spalten (110, Rest, 100, Knoepfe) liessen dem Titel bei 390 null Punkte · er stand 120 Punkte hoch als Buchstabensaeule. Am Telefon: Quelle und Ziel oben auf einer Zeile, der Titel darunter ueber die ganze Breite, die Knoepfe darunter. Steht hier, weil nxm-mobil.css die Telefonschwelle besitzt (Sperrklinke 5n). */ @media(max-width:767px){ .nx-cur-row{grid-template-columns:1fr auto;row-gap:6px;column-gap:12px} .nx-cur-src{grid-row:1;grid-column:1} .nx-cur-dest{grid-row:1;grid-column:2;text-align:right} .nx-cur-t{grid-row:2;grid-column:1/-1} .nx-cur-act{grid-row:3;grid-column:1/-1} } /* ========================================================================== HANDY WIE EINE APP (Nr. C84) · Ziehen, Platzhalter ========================================================================== */ /* ZIEHEN ZUM AKTUALISIEREN (Now: nxm-mobilapp.js, Games/People/Events: nxm-handy.js) · das Zeichen waechst mit dem Zug ueber dem Reiterschalter, dreht sich, sobald Loslassen laedt, und kreist, bis der Stand da ist. Am Schreibtisch zieht niemand. */ .m-zieh{display:flex;align-items:center;justify-content:center;height:var(--m-zieh,0px); overflow:hidden;color:var(--dim);transition:height var(--nx-dauer-wechsel) ease-out} .m-zieh.zieht{transition:none} .m-zieh svg{width:22px;height:22px;transition:transform var(--nx-dauer-wechsel) ease-out} .m-zieh.bereit{color:var(--nx-weiss)} .m-zieh.bereit svg{transform:rotate(180deg)} .m-zieh.laedt{height:44px;color:var(--nx-weiss)} @media (prefers-reduced-motion:no-preference){ .m-zieh.laedt svg{animation:mZiehKreis .8s linear infinite} @keyframes mZiehKreis{to{transform:rotate(360deg)}} } /* Auf den drei vollen Seiten zieht die Seite selbst · der Browser zieht dort nicht mehr mit, sonst laden zwei Gesten uebereinander. */ @media (max-width:767px){ html:is([data-nx-register="games"],[data-nx-register="people"],[data-nx-register="events"]){overscroll-behavior-y:contain} } /* PLATZHALTER IN INHALTSFORM. Was erst nach dem Laden kommt, stand vorher als Hoehe null da und schob beim Eintreffen alles darunter weg. Solange ein solcher Behaelter leer ist, steht dort die Form seines Inhalts in der Flaeche (--nx-flaeche): Kacheln in der Reihe, Karten im Strom. Die Kopien sind Schatten desselben Kastens, also mit derselben Rundung. Sobald das erste Kind da ist, gilt die Regel nicht mehr · kein Schalter, kein zweiter Besitzer. Das leise Atmen faellt bei reduzierter Bewegung weg. */ @media (max-width:767px){ .carousel:not(:has(*)),.nx-row:not(:has(*)){min-height:194px;overflow:hidden} .carousel:not(:has(*))::before,.nx-row:not(:has(*))::before{content:'';display:block;flex:none; width:230px;height:194px;border-radius:var(--nx-r);background:var(--nx-flaeche); box-shadow:238px 0 0 var(--nx-flaeche),476px 0 0 var(--nx-flaeche)} .hybgrid:not(:has(*))::before{content:'';display:block;height:156px;border-radius:var(--nx-r); background:var(--nx-flaeche)} #nowListe:not(:has(*)){min-height:444px} #nowListe:not(:has(*))::before{content:'';display:block;height:140px;border-radius:var(--nx-r); background:var(--nx-flaeche);box-shadow:0 152px 0 var(--nx-flaeche),0 304px 0 var(--nx-flaeche)} } @media (max-width:767px) and (prefers-reduced-motion:no-preference){ :is(.carousel,.nx-row,.hybgrid,#nowListe):not(:has(*))::before{animation:nxAtmen 1.4s ease-in-out infinite alternate} @keyframes nxAtmen{from{opacity:1}to{opacity:.55}} }