/* ============================================================================ v0589-live-mobil.css - V0.58.9, Strang live-mobil Pruefbericht zu V0.58.3: D22, D23, D24 (Live-Spiel am Laptop), D25, D26 (Handy) und der CSS-Anteil von F16. Laedt direkt nach v0576-passung.css und vor ui-v0420/system.css. Ungeschichtet, ohne Wichtig-Markierung; jede Regel traegt die Kennung #pl391Live bzw. #pl420Root/#pl420Overlay und schlaegt so die ungeschichteten Altblaetter ui-v0391/ui-v0400 (0,1,x bis 0,3,x) und die gleich spezifischen Zeilen aus v0576-passung.css ueber die Ladeposition. Bruchpunkte nur aus der Liste der Stil-Wache: Breite 640/980/981, Hoehe 800 und - seit der Entscheidung der Hauptsitzung vom 21.09. abends - Hoehe 960. ========================================================================= */ /* ---------------------------------------------------------------------------- D22 + D24 - DIE RECHTE SPALTE DES LIVE-SPIELS Vorher (gemessen, messungen/live-vorher-de.txt): v0576-passung.css:1838 gab Konferenz und Traineranweisung feste Boeden von 120 und 188 px, die Spielerleistung bekam den Rest - 130 von 311 px bei 1536x770, 174/265 bei 1366x768, 126/265 bei 1280x720 - und rollte innen. Die Konferenz zeigte bei allen drei Groessen genau EINE Begegnung (Zeilen 53 px hoch, Kopf 44 px). Jetzt: Leistung und Anweisung stehen in ihrer Inhaltshoehe (auto), die Konferenz nimmt den Rest und rollt als Liste (erlaubt); ihr Boden von 88 px haelt Kopf und eine Begegnung auch im schlechtesten Fall sichtbar - Vorrang haben die beiden Tafeln, die Konferenz ist die Liste. grid-auto-rows statt grid-template-rows: im zweispaltigen Tablet-Raster (ui-v0391/live-match.css:39, unter 1200 px) entstehen damit nur ZWEI Zeilen statt der leeren dritten, die v0576:1838 dort als 205-px-Band erzeugte. */ #pl391Live [data-pl391-region="side"].pl496-mit-konferenz{ grid-template-rows:none; grid-auto-rows:auto minmax(88px,1fr) auto; } /* Die Anweisung rollt (v0576-passung.css:1834-1836: overflow:auto). Wird sie auf den Bruchteil eines Pixels genau bemessen, erscheint eine Leiste, der Text bricht dadurch um und wird hoeher als die Zeile (gemessen 149/154 px bei freier Konferenzflaeche). Die reservierte Rinne haelt die Breite fest. */ @media (min-width:981px){ #pl391Live .pl391-instruction{scrollbar-gutter:stable} } /* Ohne Konferenz (Pokal, Freundschaftsspiel): dieselbe Regel fuer zwei Tafeln. */ #pl391Live .pl391-live-grid>[data-pl391-region="side"]:not(.pl496-mit-konferenz){ grid-template-rows:auto minmax(0,1fr); } /* D24 - Konferenzzeilen: jeder Vereinsname ist ein Knopf und erbte in der Live-Ansicht min-height:44px (ui-v0391/live-match.css:6/:11 und phase1-product-foundation.css:7). Die Ruecknahme in v0522-spielerblatt.css setzt min-height nicht zurueck. Ab 981 px mit Maus/Touchpad (pointer:fine) wieder Textzeilen; auf Touch-Geraeten (auch Tablet quer, 1024 px) und unter 981 px bleibt die Tippgroesse von 44 px. */ @media (min-width:981px) and (pointer:fine){ #pl391Live #pl496Konferenz button{min-height:0} } /* Wettbewerb und Spieltag wurden in 350 px Spaltenbreite auf 68 von 151 px gekuerzt (Ellipse). Sie stehen jetzt vollstaendig in einer eigenen zweiten Kopfzeile (auf jeder Breite gleich, damit nicht mal die Minute, mal die Reiter allein umbrechen); lange Namen brechen dort um statt zu kuerzen. */ #pl391Live #pl496Konferenz .pl496-kopf{flex-wrap:wrap;row-gap:var(--pl42-s1);column-gap:var(--pl42-s2)} #pl391Live #pl496Konferenz .pl496-kontext{order:9;flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} /* Die Reiter SPIELE/TABELLE erbten ueber `font:inherit;color:inherit` (ui-v0391:11) das Gold der Kopfzeile - aktiv und inaktiv sahen gleich aus, weil v0496-konferenz.css:23-24 in Schicht "legacy" verliert. */ #pl391Live #pl496Konferenz .pl496-tabs button{color:var(--pl42-ink-3)} #pl391Live #pl496Konferenz .pl496-tabs button.is-active{color:var(--pl42-gold)} /* D22 - VERDICHTUNG FUER FLACHE LAPTOPS (Fensterhoehe bis 960 px: 1536x770, 1366x768, 1280x720 und die Zwischenhoehen 1536x864, 1440x900, 1600x900 - ein maximiertes Spielfenster auf 900-px-Monitoren ist rund 820 px hoch). Bis V0.58.9-Nachbesserung endete die Stufe bei 800 px; darueber galt die hohe Grundstufe (Kopf 196, Fuss 90, Polster 25) und die Spielerleistung rollte bei 1536x864 und 1600x900 innen - mit aktiver Traineranweisung in 18 von 18 Messungen (9 Sprachen, messungen/hoehe-strang-v1.txt), die Konferenz zeigte dort 1 Begegnung. Ab 961 px (1680x1050, 1920x1080 mit rund 1000 px Fenster) bleibt alles wie bisher. Rest (gemessen, messungen/hoehe-strang-c1.txt): bei 961-~980 px Fenster- hoehe (1680x1050-Monitor maximiert, ~971 px) rollt die Leistung in it um 13 px (309/322); mit der Marke 980 statt 960 waere auch das frei (messungen/hoehe-probe980-e980.txt) - Entscheidung der Hauptsitzung. Erst Abstaende und Zierflaechen, keine Schriftgroesse. Kopf 196/162 -> mind. 150 px (Inhaltshoehe), Fuss 90/82 -> 60 px; die Tafeln verlieren Luft, nicht Inhalt. Die Nachspielkarte (is-post-match) bleibt ausgenommen - sie hat eigene Regeln (ui-v0391:34/45, v0576-passung.css Abschnitt 28). */ @media (min-width:981px) and (max-height:960px){ /* Kopf mindestens 150 px, sonst so hoch wie sein Inhalt: ueber 1450 px Breite bleibt die Anzeigetafel bei 76 px Ergebnisschrift und braucht 165 px - mit fest 150 px ragten Minute und Goldlinie 15 px in die Tafeln darunter (gemessen, messungen/hoehe-n6.txt, KOPF 1536x770). */ #pl391Live.pl400-live.pl391-live:not(.is-post-match){grid-template-rows:minmax(150px,max-content) minmax(0,1fr) 60px} /* Zeilenabstand der beiden Tafeln 1.45 -> 1.25 (Grundwert body, visual-polish-v03619.css:51): Titelzeile, Name und Auftrag ruecken zusammen; der Auftragstext behaelt seine eigene Zeilenhoehe (ui-v0391:27). */ #pl391Live .pl391-performance, #pl391Live .pl391-instruction{line-height:1.25} #pl391Live .pl391-scoreboard{padding-top:var(--pl42-s3)} #pl391Live .pl391-match-title>div{margin-top:var(--pl42-s2)} #pl391Live .pl391-match-title time{margin-top:var(--pl42-s1);padding-bottom:var(--pl42-s1)} #pl391Live .pl391-live-grid{padding-bottom:var(--pl42-s1)} #pl391Live .pl391-actionbar{padding-bottom:var(--pl42-s2)} #pl391Live .pl391-live-grid>[data-pl391-region="side"]{gap:var(--pl42-s2)} #pl391Live .pl391-performance, #pl391Live .pl391-instruction{padding:var(--pl42-s3) var(--pl42-s4)} #pl391Live .pl391-player-head{margin-top:var(--pl42-s2)} #pl391Live .pl391-rating b, #pl391Live .pl391-fitness b, #pl391Live .pl391-live-metrics b{line-height:1.1} #pl391Live .pl391-rating b, #pl391Live .pl391-fitness b{margin-top:var(--pl42-s1)} #pl391Live .pl391-live-metrics{margin-top:var(--pl42-s2)} #pl391Live .pl391-live-metrics>div{padding:var(--pl42-s2) var(--pl42-s1)} #pl391Live .pl391-instruction-body, #pl391Live .pl391-empty-instruction{margin-top:var(--pl42-s2)} #pl391Live .pl391-instruction-body{grid-template-columns:40px minmax(0,1fr);gap:var(--pl42-s3)} #pl391Live .pl391-instruction-body>i, #pl391Live .pl391-empty-instruction i{width:36px;height:36px} #pl391Live .pl391-instruction h3{margin-bottom:var(--pl42-s1);line-height:1.2} #pl391Live .pl391-instruction-progress{margin-top:var(--pl42-s2)} #pl391Live #pl496Konferenz{padding:var(--pl42-s2) var(--pl42-s3)} #pl391Live #pl496Konferenz .pl496-kopf{margin-bottom:var(--pl42-s1)} } /* ---------------------------------------------------------------------------- D23 - LEGENDE UNTER DEM FELD Drei gleich breite Spalten, jede nowrap + overflow:hidden + justify-content:center (ui-v0400/live-match.css:14): bei 1280x720 liefen alle drei Spalten links UND rechts aus ihrem Kasten (gemessen -9/-3, -2/-2, -16/-18 px). Jetzt bricht der Text um statt zu verschwinden; der Kreis DU bleibt neben seinem Text, das Kennzeichen DEIN TEAM bleibt ein Stueck. Unter 981 px bleibt es bei den bestehenden Regeln (ui-v0400:21/22). */ @media (min-width:981px){ #pl391Live .pl391-pitch-legend>span{flex-wrap:wrap;white-space:normal;row-gap:var(--pl42-s1);line-height:1.15;text-align:center} #pl391Live .pl391-pitch-legend>span.user{flex-wrap:nowrap} #pl391Live .pl391-pitch-legend em{white-space:nowrap} } /* ---------------------------------------------------------------------------- D25 - BEDIENLEISTE DES LIVE-SPIELS UNTER 1200 PX Vorher (gemessen bei 390x844): Leiste 950 px breit in 390 px Fenster, 5 von 8 Knoepfen rechts ausserhalb, nur waagerecht wischbar; die Tempo-Gruppe wurde auf 0 px gedrueckt (einziges schrumpfbares Kind, min-width:0, ui-v0400/live-match.css:27) und stapelte ihre Knoepfe, Leiste 119 px hoch ueber einem Polster von 72 px. (1) Tempo-Gruppe auf jeder Breite: nicht schrumpfen, nicht stapeln. (2) Die Leiste bricht um statt quer zu rollen, und sie klebt am unteren Rand des Rollbereichs (#pl391Live rollt unter 1200 px selbst, ui-v0391:39) statt fest darueber zu liegen - damit braucht es keine feste Polsterzahl mehr, die je Sprache und Breite nicht stimmt. Ab 1200 px ist die Leiste ein Raster in der dritten Zeile; position:sticky ohne rollenden Vorfahren wirkt dort wie relative, flex-wrap wird im Raster nicht ausgewertet - der Desktop bleibt unveraendert. */ #pl391Live .pl391-actionbar>.pl391-tempo{flex:0 0 auto;margin-top:0;flex-wrap:nowrap} /* Bricht die Leiste zwischen 641 und 1199 px um, bleibt die Tempo-Gruppe am rechten Rand - dort stand sie vorher am Ende der einen Zeile. Im Raster ab 1200 px richtet margin-left:auto sie ebenfalls rechts aus, wie bisher (ui-v0400/live-match.css:27 justify-content:flex-end). */ #pl391Live .pl391-actionbar>.pl391-tempo{margin-left:auto} #pl391Live.pl391-live:not(.is-post-match)>.pl391-actionbar{position:sticky;bottom:0;flex-wrap:wrap;overflow-x:visible} /* Das feste Polster fuer die feste Leiste (78/72 px, ui-v0391:39/:40) entfaellt mit ihr; ab 1200 px gab es keins (Raster). */ #pl391Live.pl391-live:not(.is-post-match){padding-bottom:env(safe-area-inset-bottom,0px)} /* Telefon: drei Zeilen - Hauptaktion + Sprung, die drei Ansichten, Haltung + Ueberspringen. Nichts entfaellt, nichts liegt ausserhalb. */ @media (max-width:640px){ #pl391Live .pl391-actionbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--pl42-s2);padding-left:var(--pl42-s2);padding-right:var(--pl42-s2)} #pl391Live .pl391-actionbar>.pl391-primary{grid-column:1/4;grid-row:1;min-width:0} #pl391Live .pl391-actionbar .pl391-primary span{white-space:normal} #pl391Live .pl391-actionbar>.pl391-tempo{grid-column:4/7;grid-row:1;justify-content:stretch;margin-left:0} #pl391Live .pl391-actionbar .pl391-tempo-knopf{flex:1 1 0;min-width:0;padding:0 var(--pl42-s1)} #pl391Live .pl391-actionbar>nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} #pl391Live .pl391-actionbar>nav>button{min-width:0} #pl391Live .pl391-actionbar>[data-pl391-action="stance"]{grid-column:1/4;grid-row:3;min-width:0;white-space:normal} #pl391Live .pl391-actionbar>[data-pl391-action="skip"]{grid-column:4/7;grid-row:3;min-width:0;white-space:normal} } /* ---------------------------------------------------------------------------- D26 - KEINE ZWEI SENKRECHTEN LEISTEN NEBENEINANDER (A) Altdialoge (Einstellungen, Speicherstaende, ...) bis 980 px: die Karte hatte min-height:100dvh (ui-v0420/responsive.css:190), der Deckel der Altschicht ist aber Flaeche minus Polster - min-height schlaegt max-height, die Karte lief 8/16/48 px ueber, und die Flaeche bekam eine zweite Leiste neben der der Karte (gemessen 390x844: 852/844). 100 % = Inhaltshoehe der Flaeche (absolut, inset:0, shell.css:378). Das Blatt ueber die volle Hoehe bleibt, es passt nur jetzt hinein. */ @media (max-width:980px){ #pl420Overlay #modalRoot .modal, #pl420Overlay #modalRoot .modal.card{min-height:100%} } /* (C) Auf dem Telefon rollte ZUSAETZLICH das Dokument: die Altflaeche #careerScreen ist unter 641 px display:block (v03812-responsive.css:223, Altschicht mit Wichtig-Markierung schlaegt shell.css:344), unsichtbar, aber 4930 px hoch - html hatte 5028 px Rollhoehe hinter jeder Schale und jedem Live-Spiel, rechts neben der Leiste von #pl420Content bzw. #pl391Live (gemessen auf 6 von 6 Hauptschirmen und im Live-Spiel). body.pl42-active{overflow:hidden} (shell.css:355) wollte genau das verhindern, begrenzt aber die eigene Hoehe nicht. Das tut diese Zeile. Sichtbares geht nicht verloren: die Altflaeche ist visibility:hidden. Nur bis 640 px - darueber ist die Altflaeche ohnehin ausgeblendet. */ @media (max-width:640px){ body.pl42-active{min-height:0;height:100dvh} } /* (B) Live-Spiel auf dem Telefon: #pl391Live rollt als Seite; Ereignisliste, Konferenz und Kaderliste hatten darin eigene feste Rollbereiche (440 px / 150 px / 52vh). Auf dem Telefon wachsen sie mit der Seite. */ @media (max-width:640px){ #pl391Live .pl391-live-grid>[data-pl391-region="feed"]{height:auto} #pl391Live .pl391-feed{height:auto} #pl391Live .pl391-feed ol{overflow:visible} #pl391Live #pl496Konferenz{max-height:none;overflow:visible} #pl391Live #pl497Kader{max-height:none;overflow:visible} /* D23 auf dem Telefon: das Feld hat feste Hoehen (410 px bis 767 px Breite, 375 px unter 380 px, ui-v0391/live-match.css:40/:41), seine Zeilen brauchen 52 + 28 + mind. 280 px plus die zweizeilige Legende - bei 360x740 schnitt die Feldkachel (overflow hidden) die Legende um 30 px ab ("DU Lukas Probe ยท LINKER VERTEIDIGER", gemessen messungen/live-strang-c3.txt). Das Feld waechst jetzt mit seinem Inhalt; die Seite rollt hier ohnehin. */ #pl391Live .pl391-live-grid>[data-pl391-region="pitch"]{height:auto} } /* ---------------------------------------------------------------------------- F15 - Speichern/Laden, Einstellungen und Export stehen auch in der Schublade des Menueknopfs (v0420-shell.js rail(), Klasse pl42-rail-aktion). Ab 981 px ist die Schublade die feste Seitenleiste; dort traegt die Kopfleiste diese Aktionen, die Seitenleiste bleibt wie bisher reine Navigation. */ @media (min-width:981px){ #pl420Root .pl42-rail nav .pl42-rail-aktion{display:none} } /* F15-Nebenbefund (Export bis 1280 px unerreichbar): NICHT als Symbol in der Kopfleiste - das kostete 56 px und drueckte in fr bei 981-1024 px Wortmarke, "Sauvegarder / Charger" und "Nouvelle carriere" zweizeilig (gemessen, messungen/marke2-n5.txt, shots/kopf-n5-fr-1024x768.png). Der Export steht stattdessen im Speicherdialog (v0420-shell.js normalizeLegacyDialog). */ /* F15 (Nachbesserung, Entscheidung der Hauptsitzung 21.09.): dieselbe Schreibweise wie die Routenknoepfe daneben. Deren Grossbuchstaben stehen im Katalog ("CARRIERA", "AGENTE"; gemessen: text-transform none), die drei Aktionen tragen die Katalogtexte der Kopfleiste in gemischter Schreibung ("Salva/Carica"). Kein neuer Text - die Liste setzt sie gross. */ #pl420Root .pl42-navsheet-list button[data-pl42-act] span, #pl420Root .pl42-rail nav .pl42-rail-aktion span{text-transform:uppercase} /* Die geschlossene Schublade (unter 981 px aus dem Bild geschoben, ui-v0420/responsive.css:132-138) lag mit allen Knoepfen im Tab-Weg und im Zugaenglichkeitsbaum - die 9 Routen schon immer, seit F15 auch die drei Aktionen (Gegenpruefung: 22 statt 19 Knoepfe im Baum bei 390x844). Geschlossen ist sie jetzt unsichtbar fuer Tastatur und Vorleser; das Hinausgleiten beim Schliessen bleibt (visibility erst nach der Bewegung). */ @media (max-width:980px){ #pl420Root .pl42-rail:not([data-open="1"]){visibility:hidden;transition:transform var(--pl42-mo-flaeche) var(--pl42-ease),visibility 0s linear var(--pl42-mo-flaeche)} } /* ---------------------------------------------------------------------------- F16 - Das Sammelziel NAVIGATION der unteren Leiste traegt seine Beschriftung. Die Ausnahme v0530-postfach.css:81 (0,2,1) verlor gegen :77 (0,2,2); bei 390 px war der Knopf ein nacktes Symbol ohne Namen. */ #pl420Root .pl42-bottomnav .pl42-bottomnav-more span{display:-webkit-box} /* Mit sichtbarer Beschriftung braucht das Sammelziel etwas mehr Breite: bei 390 px brach "NAVIGAZIONE" (it) mitten im Wort um (NAVIGAZION/E, gemessen, shots/kopf-n6-it-390x844.png). Die Symbolknoepfe daneben geben dafuer je rund 2 px ab (gerechnet). Der aktive Knopf behaelt flex 1.7 (v0530:82). */ #pl420Root .pl42-bottomnav .pl42-bottomnav-more:not(.is-active){flex-grow:1.3}