/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.07 */ :root{--panel:#121215; --gruen:#3be37a; --tab:var(--nx-register-h)} *{box-sizing:border-box} /* DIE SCHRIFT STEHT AUF DER LEITER DES HAUSES · 10,5 Marke, 11,5 Notiz, 12,5 Text und Bedienung, 15,5 Unterkopf und Name, 20 Kopf, 32 Titel. Am Schreibtisch zieht nxm-typo.js die App-Seiten zur Laufzeit darauf; diese Seite laedt es nicht, sie steht deshalb gleich hier auf den Sprossen, ohne Laufzeit-Uebermaler. Ausgenommen sind nur die Eingaben (16, sonst zoomt iOS hinein) und BETA, das zur Wortmarke gehoert. */ html,body{margin:0;padding:0;background:var(--bg);color:var(--txt); font:400 var(--nx-typo-text)/1.5 'Nunito Sans',-apple-system,sans-serif} h1,h2,h3,b,.enc{font-family:var(--nx-f-text)} /* Logo und Zeichen stehen auf der Kante des Inhalts (14, wie Reiter und Karten darunter) · mit 16 begann der Kopf zwei Punkte neben der Leiste "Feed · Pulse" (knopfreihen.py, Regel 4). */ .m-kopf{position:sticky;top:0;z-index:5;background:none; padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 10px;display:flex;align-items:center;gap:var(--m-kopf-luecke); --m-kopf-luecke:10px;--m-kopf-ziel:44px;--m-kopf-bild:19px} /* DER KOPF DECKT · Glas wie der Kopf jeder anderen Telefonseite und wie die Registerleiste (--nx-glas-leiste, --nx-glas-weich in nextari.css). Hier stand ein Verlauf, der im unteren Drittel durchsichtig wurde: beim Rollen stand die Zeile darunter lesbar unter Logo und Glocke. Das Glas liegt in ::before, damit der Kopf selbst kein Bezugsrahmen fuer Festes wird. */ .m-kopf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:var(--nx-glas-leiste);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .m-kopf::before{background:var(--nx-flaeche)} } .m-logo{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);letter-spacing:.14em} /* BETA so gross wie im Kopf jeder Telefonseite (css/nextari-kopf.css). */ .m-kopf .beta{font:700 var(--nx-schrift-beta) var(--nx-f-text);letter-spacing:.04em;background:var(--accent); color:#fff;border-radius:var(--nx-r-pille);padding:2px 5px} .m-kopf .frei{font-size:var(--nx-typo-meta);color:var(--faint)} /* EINE KANTE FUER ALLES.
traegt am Telefon schon 16 Punkte Rand (nxm-mobil.css). Die Ansicht polsterte noch einmal 16 · gemessen begannen die Karten damit bei 32 Punkten, die Kopfleiste bei 18 und der Reiterschalter bei 32: drei Kanten, und von 390 Punkten blieben 317 fuer den Inhalt. */ .m-ansicht{display:none;padding:4px 0 22px} /* Am Telefon haelt der body den Platz fuer die Registerleiste frei (nxm-mobil.css, --nx-unten) · die Ansicht traegt nur ihre eigene Luft. Im Rahmen am Schreibtisch steht die Leiste im Fluss (unten). */ .m-ansicht.on{display:block} .m-h{font:800 var(--nx-typo-abschnitt)/1.2 var(--nx-f-titel);margin:10px 0 2px} .m-sub{color:var(--faint);font-size:var(--nx-typo-text);margin:0 0 14px} /* Flaeche statt Kante · wie die Feed-Karte daneben. */ .m-karte{background:var(--panel);border:0;border-radius:var(--nx-r-tafel); padding:13px 14px;margin:0 0 10px} .m-grund{display:flex;align-items:center;gap:6px;font:700 var(--nx-typo-klein) var(--nx-f-text); color:var(--nx-text);margin:0 0 6px} .m-grund .p{width:5px;height:5px;border-radius:50%;background:var(--accent)} .m-t{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);margin:0 0 2px} .m-s{color:var(--dim);font-size:var(--nx-typo-text)} .m-karte .geld{color:var(--gold);font-weight:700} .m-kn{display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:0 16px;margin-top:10px;border-radius:var(--nx-r-karte);border:1px solid var(--line); background:var(--nx-hebung);color:var(--txt);font:700 var(--nx-typo-text) var(--nx-f-text); cursor:pointer;text-decoration:none} .m-kn.voll{background:var(--accent);border-color:transparent;color:#fff} .m-kn+.m-kn{margin-left:8px} .m-ende{text-align:center;padding:26px 10px 6px;color:var(--faint)} .m-ende b{display:block;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt);margin-bottom:4px} .m-leer{color:var(--faint);font-size:var(--nx-typo-text);padding:14px 2px} /* Woher man kommt · eine Zeile, kein Kasten. Seit dem landen Telefone in dieser Ansicht statt auf der Sperrseite; ohne diese Zeile waere der Sprung still. */ .m-herkunft{color:var(--faint);font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif; padding:10px 12px;margin:0 0 12px;border-left:2px solid var(--line,rgba(255,255,255,.14))} /* Vorschlaege sind keine eigenen Karten · sie stehen etwas leiser. */ .m-karte.m-vorschlag{opacity:.92} .m-leer.m-leer-kurz{padding-bottom:6px} .m-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px} .m-chip{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--nx-r-karte); border:1px solid var(--line);background:var(--nx-hebung);color:var(--dim); font:700 var(--nx-typo-text) var(--nx-f-text);cursor:pointer} .m-chip.on{border-color:var(--nx-linie);color:#fff;background:var(--accent)} /* Keine Linie zwischen den Zeilen · getrennt wird durch Abstand, wie auf jeder anderen Flaeche des Hauses. */ .m-thread{display:flex;gap:11px;align-items:center;padding:10px 4px; min-height:44px;cursor:pointer} .m-thread .av{width:38px;height:38px;border-radius:var(--nx-r-karte);flex:none;display:grid;place-items:center; font:800 var(--nx-typo-text) var(--nx-f-text);background:var(--accent);color:#fff} .m-thread .tx{min-width:0;flex:1} /* Beide waren in einem · daraus wurde "DoktorFroid CommunityCommunity · 814 members". Der Name gehoert auf seine eigene Zeile, der Zusatz darunter. */ .m-thread .nm{display:block;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-thread .lz{display:block;margin-top:1px;color:var(--faint);font-size:var(--nx-typo-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-verlauf{display:flex;flex-direction:column;gap:6px;margin:10px 0} .m-blase{max-width:82%;padding:9px 12px;border-radius:var(--nx-r-tafel);font-size:var(--nx-typo-text);line-height:1.4} .m-blase.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px} .m-blase.them{align-self:flex-start;background:var(--nx-flaeche-2);border-bottom-left-radius:4px} .m-schreib{display:flex;gap:8px;margin-top:10px} .m-schreib input{flex:1;min-height:44px;border-radius:var(--nx-r-karte);border:1px solid var(--line); background:var(--panel);color:var(--txt);padding:0 13px;font:400 var(--nx-schrift-feld) 'Nunito Sans',sans-serif} .m-schreib button{min-height:44px} .m-pass{border:1px solid rgba(255,255,255,0.14);background: radial-gradient(400px 180px at 20% 0%,transparent,transparent 70%),var(--panel)} .m-pass .kenn{font:700 var(--nx-typo-meta) ui-monospace,Menlo,monospace;color:var(--nx-text);word-break:break-all} .m-qr{width:96px;height:96px;border-radius:var(--nx-r-karte);border:1px dashed rgba(255,255,255,.25); display:grid;place-items:center;color:var(--faint);font:700 var(--nx-typo-klein) var(--nx-f-text); text-align:center;flex:none} .m-zeile{display:flex;gap:12px;align-items:center} /* Die Registerleiste ist ein Bauteil fuer jede Telefonseite: gebaut von nxm-mobil.js, gestaltet in nxm-mobil.css. Hier steht nur, wo sie im Telefonrahmen am Schreibtisch sitzt (unten). */ .m-desktophinweis{display:none} @media(min-width:768px){ body{display:grid;place-items:start center} .m-rahmen{width:410px;min-height:100vh;border-left:1px solid var(--line); border-right:1px solid var(--line);position:relative} /* Am Rechner steht die App in einem Telefonrahmen · ihr Inhalt bekommt denselben Rand wie auf dem Telefon, sonst liegen Beitraege auf der Rahmenlinie. */ .m-rahmen > main{padding-left:14px;padding-right:14px} .m-tabs{display:flex;position:sticky;margin-top:8px} .m-ansicht{padding-bottom:calc(var(--tab) + 22px)} .m-desktophinweis{display:block;max-width:410px;margin:10px auto 0;text-align:center;color:var(--faint);font-size:var(--nx-typo-meta)} } .m-feld{display:flex;gap:8px;margin-top:12px} /* Sechzehn Punkte, weil iOS bei allem darunter in das Feld hineinzoomt und nicht wieder heraus. Die Telefonschwelle in nxm-mobil.css hebt jedes Feld des Hauses auf diesen Wert · stuende hier weiter 15, waere das ein Wert, den nie jemand sieht, und zwei Besitzer fuer eine Schriftgroesse. */ .m-feld input{flex:1;min-width:0;min-height:44px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:var(--nx-r-karte);padding:0 12px;font:400 var(--nx-schrift-feld) 'Nunito Sans',sans-serif} .m-switch{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:var(--nx-r-karte);padding:0 12px;color:var(--txt);font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;text-align:left} .m-switch .k{flex:none;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.14);position:relative} .m-switch .k::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s} .m-switch.an .k{background:#5b27e8} .m-switch.an .k::after{left:17px} .m-code{margin-top:12px;border:1px dashed rgba(255,255,255,0.14);border-radius:var(--nx-r-karte);padding:12px} .m-code .t{font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);margin-bottom:8px} .m-code .c{font:800 var(--nx-typo-seite) var(--nx-f-titel);color:#3be37a} .m-code.offen{border-style:solid;background:rgba(59,227,122,.06)} .m-post{background:var(--nx-hebung);border:1px solid rgba(255,255,255,.08);border-radius:var(--nx-r-karte);padding:12px;margin-top:10px} .m-post b{font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff} .m-post span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);margin-left:8px} .m-post div{margin-top:6px;font:400 var(--nx-typo-text)/1.45 'Nunito Sans',sans-serif;color:var(--txt)} /* ========================================================================== DER KOPF TRAEGT SUCHE UND MICH Wie am Schreibtisch: die Register unten nennen die vier Orte, Me sitzt hinter dem Bild oben rechts. Zwei Knoepfe, beide auf Fingermass. ========================================================================== */ /* Gleiche Knoepfe in einer Reihe: gemessen waren sie 44, 40 und 44 hoch und standen mit 12 und 18 Punkten Abstand · ihre Masse stehen deshalb an der Leiste (--m-kopf-ziel, --m-kopf-bild), nicht in Sonderregeln. DIE ZIELE SIND BLANK wie im Kopf jeder Telefonseite (css/nextari-kopf.css): sichtbar ist nur das Zeichen, die Tippflaeche bleibt das Fingermass. Zwischen zwei Zielen steht keine Luecke · ihre Zeichen haben in der Flaeche Luft genug (21 Punkte von Zeichen zu Zeichen). Erst so passen Hand, Wortmarke und BETA neben die vier Ziele. Das letzte Ziel steht mit seinem Zeichen auf der Kante, seine Tippflaeche reicht nach aussen. Me zeigt sich aktiv wie im Kopf der anderen Seiten: weiss statt leise. */ .m-kopf .m-kopf-k,.m-kopf .m-kopf-ich{flex:none;width:var(--m-kopf-ziel);height:var(--m-kopf-ziel); min-width:var(--m-kopf-ziel);min-height:var(--m-kopf-ziel); border-radius:999px;border:0;background:transparent;color:var(--dim); display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .m-kopf .frei{margin-left:auto} .m-kopf-k + .m-kopf-k,.m-kopf-k + .m-kopf-ich{margin-left:calc(var(--m-kopf-luecke) * -1)} .m-kopf-k svg,.m-kopf-ich svg{width:var(--m-kopf-bild);height:var(--m-kopf-bild)} .m-kopf-ich{margin-right:calc((var(--m-kopf-bild) - var(--m-kopf-ziel)) / 2)} .m-kopf-ich.on{color:#fff} /* ========================================================================== NOW HAT ZWEI REITER Reiter eins sind drei Kacheln der eigenen Auswahl, Reiter zwei der Strom. Die Leiste ist eine Zeile und bleibt eine · zwei Woerter brauchen keinen Umbruch, aber sie brauchen ihre 44 Punkte. ========================================================================== */ /* ZWEI PILLEN, NICHT ZWEI HALBE BREITEN. Ein Umschalter ueber die ganze Breite wirkt wie zwei Knoepfe, die gleich wichtig sind · gemeint ist ein kleiner Griff neben dem Inhalt. EINE JA/NEIN-ENTSCHEIDUNG DARF KEINEN ACHTEL SCHIRM KOSTEN. Hier standen 44 Punkte Hoehe plus 8 oben und 14 unten · 66 Punkte, auf einem Telefon von 844 fast ein Zwoelftel der Flaeche, und das ueber dem Inhalt, wegen dem jemand die App geoeffnet hat. Festgelegt: "der switch feed/puls verbraucht zu viel platz". Die 44 Punkte waren als Fingerkuppe begruendet. Das ist die richtige Zahl fuer einen Knopf, der allein steht · hier stehen zwei Griffe nebeneinander, breit, mit Abstand, und die Vorlage des Hauses macht es genauso: Spotifys Auswahlpillen oben sind 32 Punkte hoch. Wir nehmen 34 und geben ihnen ueber die Breite reichlich Flaeche. Gesamthoehe 44 statt 66 · die Zeile bleibt eine Zeile, der Inhalt rueckt 22 Punkte nach oben. */ /* DIE KENNZAHL, NICHT DAS AUSRUFEZEICHEN. ".m-reiter-k" allein verlor gegen die Trefferflaechen-Regel in nxm-mobil.css · gemessen blieb die Pille bei 44 Punkten, obwohl hier 34 standen. Keine der beiden Regeln trug ein !important; die andere hatte schlicht die hoehere Kennzahl. Ein Ausrufezeichen haette den Streit gewonnen und den Berg um einen Stein erhoeht. Drei Klassen tun es auch. DIE FINGERKUPPE BLEIBT · sie steht nur nicht mehr im Weg. Die 44 Punkte aus nxm-mobil.css sind richtig: darunter trifft man den Nachbarn. Sie muessen aber nicht als HOEHE im Fluss stehen. Der unsichtbare Streifen unten legt fuenf Punkte ueber und unter die Pille, ohne dass eine einzige Zeile Platz dazukommt · getroffen wird 44, gesehen und gerechnet werden 34. */ /* EIN SCHALTER, NICHT ZWEI PILLEN (Nr. C83, Marvin 08.10.). Feed und Pulse sind eine Wahl zwischen zwei Ansichten · wie der Segment-Schalter in iOS: EINE Flaeche, darin ein Knopf, der zur Wahl gleitet. Die Breite bleibt die eigene (inline-grid, beide Haelften so breit wie das laengere Wort) · ein kleiner Griff, kein Balken ueber die Bildschirmbreite. Der Knopf ist ::before der Flaeche; seine Lage kommt aus der Markierung, die nxm-mobilapp.js setzt (reiterMarken), es gibt also keinen zweiten Besitzer. Lila nur als Flaeche des Knopfs. LUFT ZUM KOPF: 12 oben (Kopfleiter 16/12), 14 bis zum Inhalt. */ .m-reiter{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr; gap:0;margin:12px 0 14px;padding:3px;border-radius:var(--nx-r-rund); background:var(--nx-flaeche);isolation:isolate} .m-reiter::before{content:'';position:absolute;z-index:-1;top:3px;bottom:3px;left:3px; width:calc(50% - 3px);border-radius:var(--nx-r-rund);background:var(--nx-akzent); box-shadow:0 1px 4px rgba(0,0,0,.35);transition:translate .24s cubic-bezier(.3,.7,.2,1)} .m-reiter:has(.m-reiter-k:nth-child(2).on)::before{translate:100% 0} @media (prefers-reduced-motion:reduce){.m-reiter::before{transition:none}} .m-ansicht .m-reiter .m-reiter-k{position:relative;flex:0 0 auto; min-height:34px;height:34px;padding:0 20px;border:0;border-radius:var(--nx-r-rund); cursor:pointer;background:none;color:var(--nx-dim); font:700 var(--nx-typo-meta) var(--nx-f-text);letter-spacing:.02em; transition:color .2s ease} .m-ansicht .m-reiter .m-reiter-k::after{content:'';position:absolute; left:0;right:0;top:-5px;bottom:-5px} .m-ansicht .m-reiter .m-reiter-k.on{background:none;color:var(--nx-weiss)} /* Der Druck gilt dem Knopf, nicht dem Wort · ein schrumpfendes Wort im stehenden Knopf saehe nach Fehler aus. */ .m-ansicht .m-reiter .m-reiter-k:active{scale:1} .m-reiter:active::before{scale:.97} /* ZIEHEN ZUM AKTUALISIEREN · das Zeichen (.m-zieh) steht seit Nr. C84 in nxm-mobil.css: Games, People und Events ziehen jetzt auch (nxm-handy.js). */ /* Eine Widget-Zeile ist Name links, Zahl rechts · dieselbe Form wie auf dem Brett am Schreibtisch, nur eine Spalte statt drei. */ /* VIERUNDVIERZIG PUNKTE, WEIL MAN SIE ANTIPPT. Die Zeile war eine Anzeige und dreissig Punkte hoch. Seit sie zu ihrem Spiel, ihrem Abend, ihrer Gruppe fuehrt, ist sie ein Bedienelement und faellt unter dasselbe Fingermass wie jeder Knopf. Die Hoehe steht an der Zeile selbst und nicht nur am Link, sonst stehen in einer Liste hohe und niedrige Zeilen nebeneinander, je nachdem ob eine Kennung vorlag. */ .m-wg-z{display:flex;align-items:center;gap:10px;padding:7px 0;min-width:0;min-height:44px} /* Ein Weg sieht aus wie die Zeile daneben · er traegt keine Kante und keine Farbe, nur das Zeichen rechts sagt, dass es weitergeht. */ a.m-wg-z{text-decoration:none;color:inherit} a.m-wg-z::after{content:"\203A";flex:none;color:var(--faint); font:400 var(--nx-typo-kartenkopf) 'Nunito Sans',sans-serif;line-height:1} /* Keine Linie zwischen den Zeilen · getrennt wird durch Abstand. Das ist dieselbe Regel wie auf jeder anderen Flaeche des Hauses. */ .m-wg-z + .m-wg-z{margin-top:2px} /* Der Name bricht um, statt abzuschneiden: zwei Abende desselben Formats hiessen sonst beide "DoktorFroid Community Chall…" und waren nur noch am Datum zu unterscheiden. Zwei Zeilen genuegen, danach hoert er auf. */ .m-wg-z b{font:700 var(--nx-typo-text)/1.35 var(--nx-f-text);color:var(--txt); flex:1;min-width:0;overflow:hidden;white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Die Angabe rechts ist kurz (Stunden, Termin, Plaetze). Wird sie ein Satz ("Counter-Strike 2 · Community-Ankuendigungen"), nimmt sie hoechstens die halbe Zeile und bricht um · sonst blieb dem Namen links ein Wort. */ .m-wg-z .z{flex:0 1 auto;min-width:0;max-width:50%;text-align:right;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim)} .m-wg-z .z.geld{color:#3be37a;font-weight:700} /* ========================================================================== EINE KACHEL MIT IHREM SPIEL DAHINTER Dieselbe Form wie auf dem Brett von Home: das Artwork liegt unscharf HINTER der Kachel, darueber eine dunkle Flaeche. Bunt ist damit nur das Bild, die Schrift bleibt ruhig · das ist die Regel aus den Gestaltungsgrundlagen, und es ist der Grund, warum das Brett am Schreibtisch gut aussieht. Das Bild sucht nxm-bannerart.js. ========================================================================== */ .m-wg[data-nxbg]{position:relative;overflow:hidden;background-color:transparent; border-color:rgba(255,255,255,.14)} .m-wg[data-nxbg]::before{content:"";position:absolute;inset:-10px;z-index:0; background-image:var(--bg);background-size:cover;background-position:center;filter:blur(5px)} .m-wg[data-nxbg]::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(8,8,13,.80) 0%,rgba(8,8,13,.86) 55%,rgba(8,8,13,.96) 100%)} .m-wg[data-nxbg] > *{position:relative;z-index:1} .m-wg[data-nxbg] .m-grund,.m-wg[data-nxbg] b{text-shadow:0 1px 10px rgba(0,0,0,.85)} /* Die Kopfleiste traegt die Wortmarke, die Glocke und dich · in dieser Reihenfolge, wie am Schreibtisch. */ /* Das Logo ist ein Verweis · 12 Punkte hoch war es der kleinste Weg zurueck auf der ganzen Seite. Die Leiste ist hoeher als 44, die Mindesthoehe kostet also keinen Platz. */ .m-kopf .m-logo{display:flex;align-items:center;gap:6px;text-decoration:none;flex:none;min-height:44px} .m-kopf .m-logo svg{display:block} /* DAS ZEICHEN UND WO MAN IST (nxm-mobil.js), wie im Kopf jeder Telefonseite (css/nextari-kopf.css): auf Now die Peace-Hand mit Wortmarke und BETA, in Games, People, Events und Me die Hand mit dem Namen des Registers. */ .m-kopf .nx-kopf-zeichen{color:var(--nx-weiss)} .m-kopf .nx-kopf-titel{display:none} /* Seit 06.10. ("Handy-Kopf und -Leiste") steht auch hier kein Zeichen mehr, nur der Titel des Registers (Now, Games, People, Events, Me) · wie im Kopf jeder Telefonseite (css/nextari-kopf.css). */ html[data-nx-kopf="titel"] .m-kopf .m-logo, html[data-nx-kopf="titel"] .m-kopf .beta{display:none} html[data-nx-kopf="titel"] .m-kopf .nx-kopf-titel{display:block;flex:0 1 auto;min-width:0;overflow:hidden; margin-left:0;pointer-events:none; text-overflow:ellipsis;white-space:nowrap;color:var(--nx-weiss);font:800 var(--nx-typo-kartenkopf)/1.2 var(--nx-f-text)} #inbox{position:relative;cursor:pointer} #inbox .counter{position:absolute;top:4px;right:4px;min-width:16px;height:16px; border-radius:999px;background:var(--accent,#5b27e8);color:#fff; font:800 var(--nx-typo-klein)/1.524 var(--nx-f-text);text-align:center;padding:0 4px} /* ABOZEILEN · eine Zeile je Abo, getrennt durch Flaeche und Abstand, nicht durch einen Strich. Die Herkunft steht klein daneben: jede Zeile sagt, woher sie weiss, was sie behauptet. */ .m-abos{margin-top:12px;display:flex;flex-direction:column;gap:8px} .m-abo{display:grid;grid-template-columns:1fr auto;gap:2px 10px; background:var(--nx-hebung);border-radius:var(--nx-r-bedien);padding:10px 12px} .m-abo-k{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;min-width:0} .m-abo-w{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .m-abo-s{grid-column:1/-1;font-size:var(--nx-typo-meta);color:var(--dim)} .m-abo-q{grid-column:1/-1;font:700 var(--nx-typo-klein) var(--nx-f-text); color:var(--dim)} a.m-kn{text-decoration:none} /* DIE LEISTE DER WEGGEKLICKTEN BEITRAEGE. Das Kreuz gibt es am Telefon jetzt auch · dann braucht der Rueckweg ("Show all") dort ebenfalls eine Form. Auf Home traegt sie css/nextari-home.css. */ .nx-floatbar{position:fixed;left:16px;right:16px;bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px) + 12px); z-index:10;display:none;align-items:center;gap:8px;background:var(--panel,#1f1f24); border-radius:var(--nx-r-karte);padding:10px 12px;font-size:var(--nx-typo-text);color:var(--dim)} .nx-floatbar.on{display:flex} .nx-floatbar b{color:#fff} .nx-floatbar button{margin-left:auto;min-height:40px;padding:0 14px;border:0;border-radius:var(--nx-r-bedien); background:var(--nx-hebung-2);color:#fff;font:700 var(--nx-typo-text) var(--nx-f-text);cursor:pointer} /* ========================================================================== DIE BIBLIOTHEK · RANG LINKS, ZAHL RECHTS Eine Liste mit Nummern liest sich als Rangfolge und nicht als Aufzaehlung · dieselbe Form, die Spotify seinen Bestenlisten gibt. Die Nummer ist grau und schmal: sie ordnet, sie schreit nicht. Keine Kante, keine Linie. ========================================================================== */ .m-rz{display:flex;align-items:center;gap:10px} .m-rz .m-rang{flex:0 0 18px;text-align:right; font:800 var(--nx-typo-text) var(--nx-f-text);color:var(--dim); font-variant-numeric:tabular-nums} .m-rz > b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-rz .z{flex:0 0 auto;font-variant-numeric:tabular-nums} /* "yours" ist eine Tatsache ueber dich, keine Werbung · deshalb die Hausfarbe in der ruhigsten Stufe und keine eigene Flaeche. */ .m-rz .m-meins{flex:0 0 auto;font:800 var(--nx-typo-klein) var(--nx-f-text); color:var(--nx-text)} /* Ein Abend traegt zwei Angaben: wie voll (unter dem Namen, ruhig) und wie lange noch (rechts, wo sonst die Zahl steht). Zwei Zeilen in einer Zeile · deshalb umbricht der Name nicht, und die Frist bleibt bei ihm. */ .m-ev-z{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .m-ev-z > b{flex:1 1 60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-ev-z .z{flex:0 0 auto;margin-left:auto} .m-ev-z .m-ev-u{flex:1 1 100%;order:3; font:400 var(--nx-typo-meta)/1.4 'Nunito Sans',sans-serif;color:var(--dim)} /* ========================================================================== DER FEED SOLL SICH WIE EIN FEED LESEN Festgelegt: "so richtig nach klassischem scroll feed sieht der feed auch noch nicht aus". WAS ICH ZUERST VERSUCHT HABE, UND WARUM ES ZURUECKGENOMMEN IST. Gemessen begann der Inhalt bei x=76 statt x=32 · die Textspalte steht neben dem Bild, und auf 390 Punkten kostet das vierzehn Prozent jeder Zeile. Der Versuch, die Spalte mit display:contents aufzuloesen und den Inhalt unter die Kopfzeile zu legen, hat im Bild das Gegenteil getan: "started Counter-Strike 2" rutschte neben den Namen und ueber die Uhrzeit, und die zweite Zeile verschwand ganz. Eine Umordnung, die den Bauer nicht kennt, raet · und der Bauer baut dieselben Karten auch am Schreibtisch, wo die Spalte breit genug ist. Der richtige Ort dafuer ist nxm-feedbauer.js mit einer eigenen Form fuers Telefon, nicht eine Regel, die die vorhandene verbiegt. Was hier bleibt, ist das, was gemessen haelt. ========================================================================== */ /* MEHR LUFT ZWISCHEN DEN BEITRAEGEN ALS DARIN. Zehn Punkte zwischen zwei Beitraegen und sechzehn innerhalb: der Abstand nach aussen war kleiner als der nach innen, und dadurch klebten die Beitraege aneinander wie Zeilen einer Tabelle. Ein Strom braucht die Trennung zwischen den Dingen, nicht in ihnen. */ #nowListe .post{margin-bottom:14px} /* Das Wegwischen bleibt · es ist eine Funktion, kein Schmuck. Es traegt nur nicht mehr dieselbe Aufmerksamkeit wie der Name daneben. */ #nowListe .post .phead .kbtn{opacity:.45} #nowListe .post .phead .kbtn:focus{opacity:1}@media (hover:hover){#nowListe .post .phead .kbtn:hover{opacity:1}} /* ---------------- Manage elements, am Telefon ---------------- Derselbe Griff wie auf Home, an demselben Register. Er fehlte hier ganz: wer nur ein Telefon hat, konnte seine Kacheln nicht waehlen. Flaeche statt Kante, und der Zustand ist ein Punkt · dieselbe Regel wie ueberall. Der Punkt ist gefuellt, wenn die Kachel laeuft, und leer, wenn sie aus ist. Keine zweite Farbe, keine Linie, kein Haken · ein Zustand braucht kein Symbol. */ .m-wg-liste{margin-top:10px} .m-wg-w{display:flex;align-items:center;gap:10px;width:100%;min-height:44px; padding:7px 10px;margin:0;border:0;border-radius:var(--nx-r-bedien,10px); background:transparent;color:var(--txt);text-align:left;cursor:pointer; font:700 var(--nx-typo-text)/1.35 var(--nx-f-text)} .m-wg-w + .m-wg-w{margin-top:2px} .m-wg-w .ic{flex:none;width:18px;color:var(--dim); font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;line-height:1;text-align:center} .m-wg-w b{flex:1;min-width:0;font:inherit;overflow:hidden;white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Abgeschaltet heisst leiser, nicht durchgestrichen und nicht weg. */ .m-wg-w:not(.on){color:var(--dim)} .m-wg-w:not(.on) .ic{opacity:.5} .m-wg-w:focus-visible{background:var(--nx-hebung)}@media (hover:hover){.m-wg-w:hover{background:var(--nx-hebung)}} /* Der Punkt · gefuellt an, hohl aus. */ .m-wg-w .m-wg-pkt{flex:none;width:9px;height:9px;border-radius:50%; background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint,#a9a9b6)} .m-wg-w.on .m-wg-pkt{background:var(--green,#3be37a);box-shadow:none} /* Was dieses Geraet nicht bauen kann, sagt es an seiner Zeile · die Liste bleibt trotzdem der ganze Katalog. Eine kuerzere Liste am Telefon waere eine zweite Wahrheit. */ .m-wg-w .m-wg-nur{flex:none;font:400 var(--nx-typo-klein) 'Nunito Sans',sans-serif; color:var(--dim);opacity:.75} /* ---------------- Der Kopf bei schmalen Telefonen ---------------- Mit dem vierten Knopf (Messages) lief die Leiste ueber: gemessen bei 375 Punkten stand die rechte Kante des Ich-Knopfes auf 392 · siebzehn Punkte drausssen. Vier Ziele zu 44 plus drei Luecken zu 10 plus Wortmarke und BETA passen dort nicht nebeneinander. Kleiner werden die ZIELE, nicht die Marke: 40 Punkte sind das Mass, das ein Finger noch sicher trifft, und der Fingerpruefer misst gegen genau diese Zahl. */ @media (max-width: 420px) { .m-kopf { --m-kopf-luecke: 8px; --m-kopf-ziel: 40px; --m-kopf-bild: 18px; } } /* ========================================================================== PEOPLE UND EVENTS AM TELEFON · der freigegebene Entwurf Das Suchfeld steht oben wie auf Games. Der Zustand eines Menschen ist ein Punkt, sonst nichts: rot live, gruen gerade dabei, ein leerer Ring nicht da. Eine leere Karte zeigt gestrichelte Kaestchen in der Form der fehlenden Zeilen · leer heisst nicht weg. ========================================================================== */ .m-feld.m-feld-oben{margin:0 0 10px} .m-punkt{flex:none;width:8px;height:8px;border-radius:var(--nx-r-pille); background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)} .m-punkt.on{background:var(--green);box-shadow:none} .m-punkt.live{background:var(--live);box-shadow:none} .m-punkt.ev{background:var(--accent);box-shadow:none} .m-grund .m-punkt{width:6px;height:6px} .m-kaest{display:block;min-height:44px;border-radius:var(--nx-r-bedien); background:var(--nx-hebung)} .m-kaest + .m-kaest{margin-top:8px} /* Sieben Tage in einer Zeile · jeder Tag ist ein Tippziel von mindestens 44 Punkten, darum ragt der Streifen links und rechts etwas in den Rand der Karte. */ .m-woche{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:4px -6px 10px} .m-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:60px;min-width:0;padding:6px 0;border:0;border-radius:var(--nx-r-bedien); background:transparent;color:var(--dim);font:700 var(--nx-typo-klein) var(--nx-f-text);cursor:pointer} .m-tag .n{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt)} .m-tag.m-tag-frei .n{color:var(--faint)} .m-tag.on{background:var(--nx-hebung);color:var(--txt)} .m-tag .m-punkt{width:5px;height:5px} .m-tag .m-punkt-platz{display:block;height:5px} /* HEADLINES · der Titel steht ganz da und oben, seine Quelle darunter, beide auf der linken Kante · das Zeichen rechts sagt, dass die Zeile zur Quelle fuehrt. Gebaut von wgSchlag() in nxm-mobilapp.js. */ .m-wg-z.m-schlag{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center} .m-wg-z.m-schlag b{grid-column:1;display:block;-webkit-line-clamp:none;overflow:visible} .m-wg-z.m-schlag .z{grid-column:1;max-width:none;text-align:left} a.m-wg-z.m-schlag::after{grid-column:2;grid-row:1 / span 2} /* DIE MELDUNG UNTEN · dieselbe Form wie auf Home (css/nextari-home.css), in Namen statt Zahlen. Ohne sie stand jede Meldung (Gemerkt, Link kopiert) als nackte Zeile am Ende des Dokuments, unter der Registerleiste und ausserhalb des Bildes · gemessen sah man am Telefon nach Merken und Teilen nichts. Die Hoehe ueber der Registerleiste setzt nxm-mobil.css. */ .nx-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);z-index:9600; padding:16px;border:1px solid var(--line);border-radius:var(--nx-r-karte); background:var(--nx-flaeche-2);box-shadow:var(--nx-schatten);color:var(--txt); font:700 var(--nx-typo-text) var(--nx-f-text);opacity:0;transition:.25s} .nx-toast.show{opacity:1;transform:translate(-50%,0)}