/* ============ GRAVITY Media · die zweite Gangart: Finger statt Maus (mobil.css) ============ Eine Oberflaeche, zwei Gangarten - wie im GRAVITY OS (GRAVITY APP SERVICES/gestaltung/ GESTALTUNG.md: Maus / Finger / schmal + Finger). Keine zweite App fuers Telefon: dieselben Ansichten, dieselben Daten, derselbe Code - nur wird dort, wo ein Finger statt eines Zeigers kommt, anders gegriffen. Am Schreibtisch greift hier nichts: die Maus ist fein (pointer:fine), ein Fenster ab 761 px ist nicht schmal, und die sicheren Zonen (--safe-*) sind dort 0. Was fuer jede GRAVITY-App gilt, steht nicht hier, sondern in gestaltung.css (laedt ZUERST, Kopie der Gestaltung): die Masse --touch 44 und --input-touch 16, die sicheren Zonen --safe-*, die Touch-Grundlage fuer Felder (input, select, textarea: 16 px Schrift, 44 px hoch) und .g-ziel - die unsichtbar groessere Trefferflaeche fuer kleine Sinnbilder, die index.html an die Knoepfe setzt. Hier steht, was die Mediathek daraus macht. WARUM JEDE REGEL MIT :root BEGINNT: Tailwind (CDN) haengt seine Klassen erst zur Laufzeit ans Ende des - HINTER diese Datei. Gegen Tailwind hilft der letzte Platz also nicht. :root davor gibt jeder Regel eine Klasse mehr als jede Tailwind-Klasse (.p-2, .w-8) - ohne !important, und ohne an der Reihenfolge zu haengen. Die Anker (gm-kopf, gm-zeile, gm-kachelknopf ...) stehen als Klassen in index.html und tragen am Schreibtisch keine einzige Regel. Die Schalter, jeder fuer genau eine Frage: @media (pointer:coarse) Finger: Ziele >= 44 px iPhone UND iPad @media (hover:none) was nur beim Ueberfahren erscheint, steht @media (max-width:760px) schmal: Zuschnitt fuers Telefon - dieselbe Grenze wie SCHMAL in index.html (Schublade, zwei Spalten) Gemessen wird das bei jeder Aenderung (CHANGELOG 2.20.0). */ /* ================= 1 · sichere Zonen ================= viewport-fit=cover legt die Seite unter Notch, Statusleiste und Home-Strich - als Lesezeichen auf dem Home-Bildschirm (black-translucent) liegt die Statusleiste UEBER der Seite. Die Huelle rueckt seitlich ein (Notch quer), die Kopfzeile und die Schublade oben, der Inhalt unten. Am Schreibtisch ist jede Zone 0 - die Rechnungen ergeben dort dieselben Werte wie vorher. */ :root .gm-app{padding-left:var(--safe-l);padding-right:var(--safe-r)} :root .gm-leiste{padding-top:var(--safe-t);padding-bottom:var(--safe-b)} :root .gm-kopf{padding-top:calc(16px + var(--safe-t))} /* ================= 2 · Finger: Trefferflaechen ================= Zwei Wege, wie im OS: - echt groesser, wo Platz ist: die Zeilen der Seitenleiste, die Abschnittskoepfe; - unsichtbar groesser (.g-ziel aus der Gestaltung), wo die Leiste kompakt bleiben soll: die Sinnbilder in der Kopfzeile, auf den Kacheln, in der Seitenleiste. Wo zwei solche Sinnbilder nebeneinander stehen, bekommen sie Luft (8 bis 12 px), damit sich ihre 44-px-Flaechen nicht oder nur um wenige Pixel ueberdecken - sonst traefe ein Finger am Rand den falschen. */ @media (pointer:coarse){ :root .gm-zeile,:root .gm-abschnitt{min-height:var(--touch)} /* In einer Zeile ist der Name selbst der Knopf - er fuellt die Zeile, nicht nur seine Schrift. */ :root .gm-zeile>button.flex-1{align-self:stretch} /* Neuer Ordner / neue Sammlung: 12-px-Sinnbilder mit 4 px Abstand - mit 32 px Flaeche und 12 px Luft liegen die Mitten 44 px auseinander. */ :root .gm-knopfreihe{gap:12px} :root .gm-knopfreihe>.g-ziel{padding:10px} /* Fuss der Seitenleiste: Protokoll und Abmelden lagen mit 28 px Flaeche 40 px auseinander. */ :root .gm-leiste-fuss .g-ziel{padding:8px} /* Auf der Kachel: Favorit, Download, Setcard - zwischen zwei Knoepfen 8 px statt 4 px. */ :root .gm-kachelgruppe{gap:var(--touch-gap)} /* Die Suche in der Kopfzeile: die Huelle (Lupe + Feld + Kreuz) ist das Ziel. */ :root .gm-suchfeld{min-height:var(--touch)} :root .gm-suchfeld input{min-height:0} /* Der Regler fuer die Spaltenzahl malt seine Spur als Hintergrund (Verlauf im style-Attribut). Die Grundlage macht ihn 44 px hoch - dann waere die Spur eine 44 px dicke Pille. Die Spur bleibt 8 px, mittig; die Flaeche fuer den Daumen ist die volle Hoehe. !important, weil der Verlauf im style-Attribut steht und Groesse und Lage als Kurzschrift mitsetzt. */ :root .gm-regler{background-size:100% 8px!important;background-position:center!important;background-repeat:no-repeat!important} /* Grosse Ansicht: das Kreuz mindestens 44 px (auf dem Telefon waren es 40, ab 640 px sind es 48). */ :root .gm-ansicht-zu{min-width:var(--touch);min-height:var(--touch)} /* Die Werkzeuge der Kopfzeile rollen seitlich, statt rechts aus dem Bild zu ragen: auf dem iPad hochkant bleiben neben der Seitenleiste rund 500 px - sieben Werkzeuge waren dort abgeschnitten und nicht zu erreichen. Oben und unten 5 px Luft, sonst schnitte der rollende Bereich die 44-px-Flaechen (.g-ziel) der 34-px-Knoepfe ab. */ :root .gm-kopf-links{flex:none} :root .gm-werkzeuge{min-width:0;overflow-x:auto;padding-top:5px;padding-bottom:5px; overscroll-behavior-x:contain;scrollbar-width:none} :root .gm-werkzeuge::-webkit-scrollbar{display:none} :root .gm-werkzeuge>*{flex:none} } /* ================= 3 · kein Ueberfahren ================= Was am Schreibtisch erst beim Ueberfahren erscheint, steht hier von Anfang an - sonst gaebe es das auf Glas nicht. Die Knoepfe der Kachel (Favorit, Download, Setcard) waren auf dem Telefon unsichtbar (index.html schaltete sie dort sogar ausdruecklich ab, "spart CPU"). Auch nach dem Antippen bleibt die Leiste stehen: iOS meldet danach :hover. */ @media (hover:none){ :root .img-hover .gm-kachelleiste,:root .img-hover:hover .gm-kachelleiste{opacity:1} /* Ordner umbenennen / loeschen, Sammlung loeschen */ :root .gm-nur-hover{opacity:1} /* Schmale Kacheln (iPad hochkant mit vier Spalten, Telefon mit drei: rund 105 px) tragen drei 32-px-Knoepfe nicht - sie lagen uebereinander. Unter 150 px werden sie kleiner und ruecken zusammen. Die 44-px-Flaechen ueberdecken sich dort: drei davon passen nicht in 105 px. Die Vorgabe auf dem Telefon sind zwei Spalten (170 px), da passt alles. */ :root .asset-card{container-type:inline-size} @container (max-width:150px){ :root .gm-kachelleiste{padding:6px} :root .gm-kachelknopf{width:26px;height:26px} :root .gm-kachelgruppe{gap:4px} } } /* ================= 4 · Telefon: Kopfzeile in zwei Zeilen ================= Titel, Zaehler und sieben Werkzeuge passten nicht in 390 px - der Titel brach um, die Werkzeuge ragten rechts aus dem Bild. Jetzt: oben Menue, Titel und Zaehler (einzeilig), darunter die Werkzeuge als eigene, seitlich rollende Zeile - die Suche vorn. */ @media (max-width:760px){ :root .gm-kopf{flex-wrap:wrap;row-gap:10px;padding-bottom:10px} :root .gm-kopf-links{flex:1 1 100%;min-width:0} :root .gm-kopf-text{min-width:0;flex:1 1 auto} :root .gm-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root .gm-werkzeuge{flex:0 0 calc(100% + 32px);margin:0 -16px;padding:5px 16px;overflow-x:auto; overscroll-behavior-x:contain;scrollbar-width:none} :root .gm-werkzeuge::-webkit-scrollbar{display:none} :root .gm-werkzeuge>*{flex:none} :root .gm-werkzeuge>.gm-suche{order:-1} :root .gm-suchfeld{flex:1 0 200px} :root .gm-suchfeld input{flex:1;width:auto;min-width:0} /* Inhalt: unten frei fuer den Home-Strich; Meldungen ueber ihm. */ :root .gm-inhalt{padding-bottom:calc(16px + var(--safe-b))} :root .gm-meldung{bottom:calc(24px + var(--safe-b));max-width:calc(100vw - 32px)} /* Grosse Ansicht: Kreuz, Pfeile und Name nicht unter Notch und Home-Strich. Geblaettert wird auch per Wischen (index.html, wischGeste) - links/rechts, nach unten schliesst. */ :root .gm-ansicht-zu{top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r))} :root .gm-ansicht-pfeil{bottom:calc(24px + var(--safe-b))} :root .gm-ansicht-fuss>div{padding-bottom:calc(28px + var(--safe-b))} } /* ================= 6 · Telefon: die grosse Ansicht (seit 2.20.1) ================= Hochkant: das Bild zuerst. Es steht bildschirmbreit zwischen dem Kreuz oben und EINER kompakten Zeile unten - Pfeil, Angaben, Pfeil, alle 44 px hoch, auf dem Telefon-Rand. In der Pille: der Name (12,5 px) und darunter Zaehler, Projekt, Aufloesung, Bildrate (11 px), beides einzeilig. Ein Tipp auf die Pille klappt den Rest auf (Typ, Laenge, Codec, Groesse, der ganze Name) - am Schreibtisch nicht (index.html, mitFinger). Quer (Telefon quer, dieselbe Bedingung wie TELEFON_QUER in index.html): nur noch das Bild, so gross es geht, und das Kreuz. Blaettern per Wischen, nach unten schliesst. Im Rahmen des GRAVITY OS bittet die Seite dazu um Vollbild (Rahmen-Nachricht) - die sicheren Zonen sind dann 0, ausserhalb des Rahmens (Home-Bildschirm) halten sie das Kreuz und die Steuerung des Videos von Insel und Home-Strich fern. */ @media (max-width:760px){ :root .preview-content{padding:calc(64px + var(--safe-t)) 0 calc(66px + var(--safe-b))} :root .gm-ansicht-medium{width:100%;max-width:100%;max-height:calc(100dvh - 130px - var(--safe-t) - var(--safe-b));border-radius:0;box-shadow:none} :root .gm-ansicht-zu{width:var(--touch);height:var(--touch)} :root .gm-ansicht-pfeil{width:var(--touch);height:var(--touch);bottom:calc(10px + var(--safe-b))} :root .gm-ansicht-fuss>div{padding-bottom:calc(10px + var(--safe-b))} :root .gm-ansicht-pille{max-width:calc(100vw - 2 * (var(--rand-telefon) + var(--touch) + var(--touch-gap))); min-height:var(--touch);display:flex;align-items:center;padding:4px 14px;border-radius:var(--r-m);cursor:pointer} :root .gm-ansicht-pille>div{min-width:0} :root .gm-ansicht-text{min-width:0;max-width:100%} :root .gm-ansicht-name{max-width:100%;font-size:12.5px;line-height:16px} :root .gm-ansicht-projekt{font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root .gm-ansicht-zahl,:root .gm-ansicht-meta{display:inline} } /* Die aufgeklappten Angaben: ein Blatt ueber der Pille, gleich breit wie der Platz zwischen den Pfeilen. Ein Tipp darauf klappt es wieder zu. */ :root .gm-ansicht-mehr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:5px;margin:0 0 8px; width:calc(100vw - 2 * var(--rand-telefon));max-width:420px;padding:12px 14px;border-radius:var(--r-m); background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12px;line-height:16px} :root .gm-ansicht-mehr>div{display:contents} :root .gm-ansicht-mehr dt{color:rgb(var(--sk-zinc-500))} :root .gm-ansicht-mehr dd{margin:0;color:rgb(var(--sk-white));overflow-wrap:anywhere} @media (orientation:landscape) and (pointer:coarse) and (max-height:520px){ :root .preview-content{padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)} :root .gm-ansicht-medium{width:auto;max-width:100%;height:auto;max-height:calc(100dvh - var(--safe-t) - var(--safe-b)); border-radius:0;box-shadow:none} :root video.gm-ansicht-medium{width:100%;height:calc(100dvh - var(--safe-t) - var(--safe-b))} :root .gm-ansicht-pfeil,:root .gm-ansicht-fuss{display:none} :root .gm-ansicht-zu{top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));width:var(--touch);height:var(--touch); background:rgba(0,0,0,.45)} } /* Mit Finger gibt es keine Tasten - "← → navigate • SPACE close" hat dort nichts zu sagen. */ @media (pointer:coarse){ :root .gm-tastenhilfe{display:none} } /* Auf dem Telefon hat die Werkzeugzeile ihre eigene Zeile - Platz genug, die Knoepfe echt 44 px gross zu machen statt nur unsichtbar. Dann stehen sie auch gleich hoch wie die Auswahl des Seitenverhaeltnisses, die als Feld ohnehin 44 px hat (Touch-Grundlage). */ @media (max-width:760px) and (pointer:coarse){ :root .gm-werkzeuge>button{min-width:var(--touch);min-height:var(--touch)} :root .gm-werkzeuge>div{min-height:var(--touch)} } /* ================= 5 · Anmeldeseite ================= Dieselbe Datei laedt die Anmeldeseite (start_server.LOGIN_PAGE). Die Karte war 269 px schmal, die Felder 14 px (Safari zoomte beim Antippen hinein), der Knopf 43 px. Die Wahl des Hintergrunds (18 Knoepfe zu 24 px, nur beim Ueberfahren sichtbar) ist ein Werkzeug fuer den Schreibtisch - auf dem Telefon nicht zu treffen und nicht zu sehen. */ @media (pointer:coarse){ :root .btn-login{min-height:var(--touch)} } @media (max-width:760px){ :root body.gm-anmeldung{min-height:100dvh;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);box-sizing:border-box} :root .login-container{max-width:min(360px,calc(100vw - 32px));padding:28px 24px} :root .mode-selector{display:none} }