/** * Primy Roulette auf /primy/. * * Laedt NACH app.css. Der Kopfbaukasten (pc-eyebrow, pc-page-title, * pc-description, pc-title-rule), die Uebersichtsleiste (pc-overview, * pc-ov-item) und der Info-Aufklapper (pc-head-details) kommen von dort * beziehungsweise aus site.css und stehen hier ausdruecklich NICHT. * * WER HIER EINE REGEL ERGAENZT, die einen Namen aus dem Kopfbaukasten * trifft, schlaegt bei gleicher Genauigkeit die aus app.css. Genau daran ist * die Stats-Seite mit 6.60.2 gescheitert und die 404-Seite bis 6.64.4 * auseinandergelaufen. Alles Eigene traegt deshalb das Vorsatzstueck * `pc-ro-` und trifft nichts, was es schon gibt. * * Zu den Farben der drei Felder steht die Begruendung in * includes/roulette.php an pc_ro_felder(); sie stehen dort und nicht hier, * weil der Server sie auch fuer das Canvas braucht und eine zweite Fassung * im CSS eine zweite Stelle waere, an der jemand eine Farbe aendert. */ /* --------------------------------------------------------------- * Breite * * Ohne diese Regel klebt der Kopf am Fensterrand. Genau das ist der * Stats-Seite passiert, und es steht seit jeher in CLAUDE.md. * ------------------------------------------------------------- */ .pc-primy-head, .pc-primy-container { width: var(--pc-width); max-width: var(--pc-max) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; box-sizing: border-box; background: transparent !important; background-color: transparent !important; } /* Der Seitenkopf ist mit Primy_v5 aus der Seitenfassung verschwunden: Titel, Beschriftung und Info stehen jetzt unten im Aufklapper, und oben beginnt die Seite sofort mit dem Rad. Die Regel bleibt fuer die aelteren Fassungen stehen, die ihn noch tragen; dort blendet ihn kopfAusblenden() aus, sobald der Aufklapper da ist. */ .pc-primy-head { margin-top: 0 !important; margin-bottom: 34px !important; } /* Ein Flex-Behaelter, damit sich die Reihenfolge am Telefon ueber order aendern laesst. Das ist der Grund, warum der Verlauf seit Primy_v5 ein DIREKTES Kind ist und nicht mehr im Radkasten liegt: order wirkt nur auf direkte Kinder. */ .pc-primy-container { display: flex; flex-direction: column; margin-top: 0 !important; } /* --------------------------------------------------------------- * Eine Rundung für alles * * Rad, Setzleiste, die drei Felder, der Feed und der Nachweis tragen * denselben Radius. Eine Variable statt fünf Werten: Wer die Rundung * ändern will, ändert sie an einer Stelle, und sie kann nicht auseinander * laufen. * * MIT 6.69.0 SIND DIE RAHMEN WEGGEFALLEN, alle drei: der goldene Lauframen * um das Rad, der Strich um die Setzleiste und die farbigen Linien um die * drei Felder. Sie haben die Blöcke zusammengeschnürt; ohne sie stehen sie * frei nebeneinander und der Blick kommt zur Ruhe. Was die Blöcke jetzt * trennt, ist ihr eigener Grund und der Abstand dazwischen. * ------------------------------------------------------------- */ .pc-primy-container { --pc-ro-radius: 16px; --pc-ro-luft: 22px; } /* --------------------------------------------------------------- * Das Rad * ------------------------------------------------------------- */ /* margin-top 0: Ohne den Kopf darueber soll das Rad ganz oben stehen. Robert wollte das Spiel "ab Das Rad hoch" geschoben. */ .pc-ro-stage { background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 var(--pc-ro-luft) 0 !important; box-sizing: border-box; } /* --------------------------------------------------------------- * Der Weg zurueck zur Arcade * * Aussehen und Farbe kommen aus .pc-detail-back in app.css, damit er * genauso aussieht wie auf der Turnier- und der Team-Detailseite. Hier * steht nur, was der Flex-Behaelter braucht. * * align-self ist tragend, nicht Kosmetik: .pc-primy-container ist eine * Flex-Spalte, und ein Kind darin waere ohne diese Angabe ueber die volle * Breite gestreckt. Der Verweis ist ein Klickziel; ueber die ganze Seite * gestreckt fuehrte jeder Klick in dieser Zeile von der Seite weg. * ------------------------------------------------------------- */ .pc-ro-back { align-self: flex-start; } /* Der Lichtpunkt aus site.css wird abgeschaltet. * * Primy_v1 traegt am Rad noch die Klasse pc-lauframen, und der Rahmen * haengt dort an einem ::before. Plugin und Seitenfassung werden getrennt * eingespielt; ohne diese Regel stuende der goldene Rahmen zwischen den * beiden Schritten noch da, obwohl er weg sein soll. Mit Primy_v2 trifft * die Regel nichts mehr und stoert auch nicht. */ .pc-ro-stage.pc-lauframen::before { display: none !important; } /* "Das Rad - Testprojekt" ist mit 6.89.0 aus der Seite genommen, Robert wollte es weg. Die Regel bleibt stehen: Plugin und Seitenfassung werden getrennt eingespielt, und zwischen den beiden Schritten laeuft das neue CSS auf Primy_v6, wo der Titel noch steht. Ab Primy_v7 trifft sie nichts mehr und stoert auch nicht - dieselbe Ueberlegung wie bei .pc-ro-stage.pc-lauframen::before darueber. */ .pc-ro-titel { display: block; font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 1.8px; text-transform: uppercase; color: var(--pc-muted); margin: 0 0 12px 0; } .pc-ro-rad { position: relative; overflow: hidden; border-radius: var(--pc-ro-radius); background: #101116; border: none; box-sizing: border-box; } #pcPrimyCanvas { display: block; width: 100%; height: 118px; /* touch-action ist tragend, nicht Kosmetik: Ohne die Angabe deutet ein Telefon jeden Tipp zuerst als möglichen Beginn einer Wischgeste, und das Rad ruckelt beim Zusehen. Dieselbe Lehre wie beim Minispiel der 404-Seite aus 6.65.0. */ touch-action: pan-y; } /* --------------------------------------------------------------- * Der Fangbügel * * Bei csgoempire ist der Marker ein weißer Strich. Hier ist es ein * goldener Bügel mit zwei Spitzen, in der Hausfarbe der Seite: Er soll * aussehen, als gehöre er zu PRIMECUP, und nicht wie ein Cursor. * * Die beiden Spitzen liegen an .pc-ro-marker::before und ::after, damit es * bei EINEM Element bleibt. Drei Elemente für einen Strich mit zwei * Dreiecken wären drei Stellen, an denen die Mitte auseinanderlaufen kann. * ------------------------------------------------------------- */ .pc-ro-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--pc-gold); box-shadow: 0 0 14px rgba(245, 213, 110, 0.75); pointer-events: none; z-index: 3; } .pc-ro-marker::before, .pc-ro-marker::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; } .pc-ro-marker::before { top: 0; border-top: 9px solid var(--pc-gold); } .pc-ro-marker::after { bottom: 0; border-bottom: 9px solid var(--pc-gold); } /* --------------------------------------------------------------- * Countdown und Ergebnis über dem Rad * ------------------------------------------------------------- */ .pc-ro-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; z-index: 4; transition: opacity 0.25s ease; } /* Während das Rad läuft, steht davor nichts. Ein halbdurchsichtiger Schleier wäre genau in dem Augenblick im Weg, in dem alle hinsehen. */ .pc-ro-overlay.is-laeuft { opacity: 0; } .pc-ro-overlay.is-zaehlt { background: rgba(16, 17, 22, 0.82); } .pc-ro-overlay.is-fertig { background: rgba(16, 17, 22, 0.86); } .pc-ro-ov-label { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 2px; text-transform: uppercase; color: var(--pc-muted); } .pc-ro-ov-zahl { font-family: "droid-sans-mono", monospace; font-size: 30px; font-weight: 400; letter-spacing: -1px; color: var(--pc-text); line-height: 1; } .pc-ro-overlay.is-fertig.is-primy .pc-ro-ov-zahl, .pc-ro-overlay.is-fertig.is-primy .pc-ro-ov-label { color: #F5D56E; } .pc-ro-overlay.is-fertig.is-rot .pc-ro-ov-zahl, .pc-ro-overlay.is-fertig.is-rot .pc-ro-ov-label { color: #FF4D6D; } .pc-ro-overlay.is-fertig.is-schwarz .pc-ro-ov-zahl, .pc-ro-overlay.is-fertig.is-schwarz .pc-ro-ov-label { color: #E1E4EB; } /* --------------------------------------------------------------- * Der Verlauf * * ZWEI ANSICHTEN AUS EINEM MARKUP, und das ist der Kern dieses Blocks. * * Am Rechner steht alles in EINER Zeile: links die Beschriftung und die * Kreise, rechts aussen die Zaehlung. Am Telefon stapelt sich derselbe * Baustein mittig uebereinander, so wie es die Vorlage macht, und rutscht * per order zwischen die Einsaetze und die beiden Aufklapper. * * Ein zweites Markup je Breite waere die Doppelung, vor der die erste * Zeile von CLAUDE.md warnt - und es muesste beim Drehen des Geraets * seinen Zustand mitnehmen, genau die Falle aus 6.54.1. Entschieden wird * deshalb allein hier im CSS; verlaufBauen() baut einmal. * * Die Kreise sind mit 6.73.0 wieder auf ihre alten 26 Pixel zurueck. Die * 46 aus 6.72.0 waren zu gross und zu auffaellig; der Verlauf ist eine * Nebenangabe und soll das Rad darueber nicht ueberstimmen. * ------------------------------------------------------------- */ #pcPrimyHistory { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--pc-ro-luft) 0; } /* Beschriftung, Leertext und das Wort vor der Zaehlung tragen dieselbe Schrift und Groesse. Robert wollte "Letzte Rolls" genau so gesetzt wie "Letzte 100", deshalb stehen sie in EINER Selektorliste statt in drei Regeln, die auseinanderlaufen koennen. */ .pc-ro-hist-titel, .pc-ro-hist-leer, .pc-ro-hist-zahl-label { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 1.2px; text-transform: uppercase; color: var(--pc-muted); } /* Etwas Luft nach rechts, damit die Beschriftung nicht am ersten Kreis klebt. Am Telefon wird sie zurueckgenommen, dort steht sie darueber. */ .pc-ro-hist-titel { margin-right: 4px; } .pc-ro-hist-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pc-ro-hist { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; /* border-box, damit der Ring die 26 Pixel nicht auf 29 aufblaeht. Ohne die Angabe messen die Kreise im Browser 29 statt 26 und passen bei 375 Pixeln eine Spalte weniger in die Reihe. */ box-sizing: border-box; border-radius: 50%; background: var(--ro-grund, #252629); border: 1.5px solid var(--ro-farbe, #8E9299); color: var(--ro-farbe, #E1E4EB); font-family: "droid-sans-mono", monospace; font-size: 11px; line-height: 1; /* EIN PIXEL POLSTERUNG UNTEN, und die ist gemessen, nicht geraten. * * Robert hat gemeldet, die Zahl sitze nicht mittig. An der laufenden * Seite nachgemessen: ueber der Ziffer stehen 9,5 Pixel, darunter 7,5 * bis 8,5 - die Tinte sitzt einen halben bis einen ganzen Pixel zu * tief. * * Die Ursache ist die Schrift, nicht die Ausrichtung: align-items * zentriert die ZEILE, und die Grundlinie liegt darin um die Haelfte * des Unterschieds zwischen Zeilenhoehe (11) und Schriftkoerper * (12 + 3) verschoben. Ziffern haben keine Unterlaenge, ihre Tinte * steht damit ueber der Grundlinie - und die Mitte der Tinte liegt * unter der Mitte des Kreises. * * Ein Pixel Polsterung unten verkleinert die Inhaltsflaeche um eins, * und die zentrierte Zeile rueckt um einen halben Pixel nach oben. * box-sizing: border-box haelt den Kreis dabei auf seinen 26 Pixeln. * Am Telefon wird sie zurueckgenommen, dort sitzt die Ziffer ohnehin * eine Spur zu hoch. */ padding-bottom: 1px; } /* Das schwarze Feld traegt ein fast schwarzes Zeichen auf dunklem Gold. Im Kreis ist die Flaeche zu klein, als dass das noch zu lesen waere; dort steht die Zahl deshalb hell und der Ring traegt die Farbe. Auf dem Rad selbst ist die Flaeche gross genug, dort bleibt es beim Schwarz. */ .pc-ro-hist.is-schwarz { color: #E9E2C6; } /* ---------- Die Zaehlung: "Letzte 100" und drei Punkte ---------- * * Der Punkt in der Feldfarbe steht seit 6.72.0 anstelle des Farbworts. * Das bleibt: Die drei Farben stehen auf dieser Seite ohnehin an jedem * Kreis und an jedem Setzfeld, und mit den Woertern war die Zeile am * Telefon die einzige Stelle, die in eine zweite Reihe brach. */ .pc-ro-hist-zahl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; /* Rechts aussen. Am Telefon wird das zurueckgenommen. */ margin-left: auto; } .pc-ro-hist-z { display: inline-flex; align-items: center; gap: 5px; } .pc-ro-hist-punkt { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--ro-grund); border: 1.5px solid var(--ro-farbe); box-sizing: border-box; } .pc-ro-hist-z b { font-family: "droid-sans-mono", monospace; font-size: 13px; font-weight: 400; color: var(--pc-text); } /* --------------------------------------------------------------- * Die Setzleiste * * NUR NOCH DER EINSATZ, seit 6.96.0 auf JEDER Breite. Der Rahmen ist mit * 6.69.0 weggefallen, der graue Grund am Telefon mit 6.95.0, und Robert * hat beides jetzt auch fuer den Rechner verlangt: "entferne auch auf der * Desktop Version bei Einsatz eintragen den Namen und den Punktestand * daneben. Der reine Einsatz Block soll bestehen bleiben." * * Mit dem Grund geht die Polsterung mit: Sie war der Abstand zum Rand des * Kastens, und ohne ihn zoege sie das Feld nur nach innen, waehrend alles * daneben an der Seitenkante steht. Die Rundung faellt aus demselben * Grund, sie rundet nichts mehr. * ------------------------------------------------------------- */ #pcPrimyBar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0; margin: 0 0 14px 0; border: none; border-radius: 0; background: none; box-sizing: border-box; } /* --------------------------------------------------------------- * NAME UND PUNKTE FALLEN WEG * * Am Telefon seit 6.89.0, am Rechner seit 6.96.0. Uebrig bleibt in der * Leiste das Eingabefeld mit den sieben Schnellknoepfen - also genau der * Einsatz und sonst nichts. * * AUSGEBLENDET UND NICHT AUSGEBAUT, und das ist tragend: In .pc-ro-konto * haengt #pcPrimyGuthaben, und kontoFuellen() steigt ohne dieses Element * aus, BEVOR es window.pcKopfGuthaben() ruft. Faellt es aus dem Markup, * hoert die Kopfleiste auf mitzulaufen - und das Guthaben steht seit * 6.87.3 nur noch dort. Dieselbe Ueberlegung wie bei der Leiste von Primy * Bird in 6.90.0. * ------------------------------------------------------------- */ .pc-ro-wer { display: none; } .pc-ro-ich-name { font-family: var(--pc-font-page); font-size: 16px; font-weight: var(--pc-weight-page); color: var(--pc-text); } .pc-ro-ich-gast { font-family: var(--pc-font-page); font-size: 14px; font-weight: var(--pc-weight-page); color: var(--pc-muted); } /* Die Punkte stehen unter dem Namen, in einer Zeile mit ihrer Beschriftung. Kein Kasten, kein Rahmen: Sie gehören zur Person darüber und nicht neben das Eingabefeld. */ .pc-ro-konto { display: flex; align-items: baseline; gap: 7px; } /* --------------------------------------------------------------- * Das Guthaben als Fallblattanzeige * * Jede Ziffer ist ein Fenster von einer Zeilenhoehe mit einer Rolle darin. * Die Rolle traegt die Ziffern 0 bis 9 untereinander und wird auf ihre * Zielziffer geschoben; die Begruendung steht bei kontoBauen() in primy.js. * * DIESE REGELN SIND TRAGEND, NICHT KOSMETIK. Ohne overflow: hidden und die * feste Breite stehen alle zehn Ziffern jeder Stelle nebeneinander: Im * Browser gemessen war die Anzeige dann 769 Pixel breit statt 88, also * einundsechzig Zeichen statt sieben. Genau das ist passiert, als der Block * beim Umbau des Bretts versehentlich mit herausgeschnitten wurde. * ------------------------------------------------------------- */ .pc-ro-konto-zahl { display: inline-flex; align-items: baseline; font-family: "droid-sans-mono", monospace; font-size: 21px; color: var(--pc-gold); /* line-height: 1, damit em die Ziffernhoehe ist. Das Skript schiebt die Rolle in em; mit einer anderen Zeilenhoehe stuenden die Ziffern nach dem dritten Schritt sichtbar daneben. */ line-height: 1; } .pc-ro-konto-zahl.is-aus { color: var(--pc-muted); } .pc-ro-flip-stelle { display: inline-block; width: 1ch; height: 1em; overflow: hidden; vertical-align: baseline; /* tabular-nums, sonst wechselt die Breite einer Stelle mit ihrer Ziffer und die ganze Zahl wackelt beim Rollen. */ font-variant-numeric: tabular-nums; } .pc-ro-flip-rolle { display: block; transition: transform 0.55s cubic-bezier(0.22, 1, 0.28, 1); will-change: transform; } .pc-ro-flip-rolle b { display: block; height: 1em; line-height: 1; font-weight: inherit; text-align: center; } .pc-ro-flip-fest { display: inline-block; } /* Wer weniger Bewegung wuenscht, bekommt die Zahl sofort. Dieselbe Ruecksicht wie beim Stoerbild der Spielerkarte aus 6.55.0. */ @media (prefers-reduced-motion: reduce) { .pc-ro-flip-rolle { transition: none !important; } } /* ---------- Die Blase mit der Bewegung ---------- */ .pc-ro-konto { position: relative; } .pc-ro-blase { position: absolute; left: 0; bottom: 100%; font-family: "droid-sans-mono", monospace; font-size: 14px; line-height: 1; pointer-events: none; white-space: nowrap; animation: pcRoBlase 1.6s ease-out forwards; } .pc-ro-blase.is-plus { color: var(--pc-live); } .pc-ro-blase.is-minus { color: var(--pc-muted); } @keyframes pcRoBlase { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .pc-ro-blase { animation: pcRoBlaseRuhig 1.6s linear forwards; } @keyframes pcRoBlaseRuhig { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } } .pc-ro-konto-label { font-family: var(--pc-font-page); font-size: 10px; font-weight: var(--pc-weight-page); letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc-muted); } /* Das Eingabefeld steht rechts, nicht in der Mitte. * * margin-left: auto schiebt es ans rechte Ende, auch wenn der Name links * kurz ist. Ohne das säße es dicht neben dem Namen und die rechte Hälfte * der Leiste bliebe leer. flex-grow steht bewusst NICHT dabei: Ein Feld, * das über die halbe Seite läuft, lädt zu nichts ein; 340 Pixel reichen * für jede Zahl, die hier hineinpasst. */ /* Eine Zeile: Feld links, Schnellknoepfe rechts, alles in einem Kasten. * * Bis 6.69.0 stand das Feld ueber den Knoepfen, und die brachen in zwei * Reihen um; der Block war damit 157 Pixel hoch und so breit wie ein * Absatz. Robert wollte ihn laenger und flacher. Jetzt ist es eine Leiste * wie bei der Vorlage, und sie misst noch 46 Pixel. */ .pc-ro-eingabe { display: flex; align-items: center; gap: 8px; flex: 1 1 460px; max-width: 620px; margin-left: auto; padding: 6px 6px 6px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); box-sizing: border-box; } /* Die Beschriftung steht als Platzhalter IM Feld, nicht darueber: In einer Zeile ist fuer beides kein Platz, und der Platzhalter sagt dasselbe. */ .pc-ro-eingabe-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 16 Pixel, keinen Punkt weniger. Ein iPhone zoomt beim Hineintippen in jedes Feld unter 16 Pixeln in die Seite hinein, und danach steht das Rad halb außerhalb des Bildes. Dieselbe Lehre wie beim Namensfeld der 404-Seite aus 6.65.0. */ /* Das Feld traegt keinen eigenen Grund mehr, es sitzt IN der Leiste. */ #pcPrimyAmount { flex: 1 1 auto; min-width: 0; padding: 8px 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--pc-text) !important; font-family: "droid-sans-mono", monospace !important; font-size: 16px !important; box-sizing: border-box; } #pcPrimyAmount:focus { outline: none !important; } /* Die Leiste leuchtet auf, nicht das Feld darin. */ .pc-ro-eingabe:focus-within { background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 1px rgba(245, 213, 110, 0.55); } .pc-ro-quicks { display: flex; flex-wrap: nowrap; gap: 4px; flex: 0 0 auto; } /* Die Zustandsliste wehrt die Knopfvorgaben des Themes ab. Sie ist (0,2,0) und schlägt jede spätere Regel mit nur der Klasse (0,1,0), und zwar in genau dem Augenblick, in dem der Finger den Knopf berührt. Deshalb steht hier NICHTS, was die Medienabfrage weiter unten neu setzt; Größe und Polsterung stehen in der schlichten Regel darunter. Genau daran ist das Kreuz der Kopfzahlen mit 6.55.2 gescheitert. */ .pc-ro-quick, .pc-ro-quick:hover, .pc-ro-quick:focus, .pc-ro-quick:active { background: rgba(255, 255, 255, 0.05) !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; color: var(--pc-muted) !important; font-family: var(--pc-font-page) !important; font-weight: var(--pc-weight-page) !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; cursor: pointer !important; transform: none !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* padding und font-size tragen !important, weil base.css sie an `button` ebenfalls mit !important setzt (10px 20px). Ohne das gewinnt die Grundregel trotz geringerer Genauigkeit, und der Knopf ist 20 Pixel breit gepolstert - im Browser gemessen, genau so war es beim ersten Anlauf. Genau die Lektion "!important schlägt Genauigkeit". Sie stehen NICHT in der Zustandsliste darüber, obwohl sie gegen das Theme verteidigt werden müssen: Die Medienabfrage unten setzt die Polsterung neu, und aus der Zustandsliste (0,2,0) heraus verlöre sie gegen den Finger. Dieselbe Falle wie beim Kreuz der Kopfzahlen in 6.55.2. Die Medienabfrage trägt deshalb ihrerseits !important. */ .pc-ro-quick { padding: 7px 9px !important; font-size: 10.5px !important; white-space: nowrap; } .pc-ro-quick:hover { background: rgba(245, 213, 110, 0.16) !important; color: var(--pc-text) !important; } /* --------------------------------------------------------------- * Die Meldung * ------------------------------------------------------------- */ .pc-ro-hinweis { font-family: var(--pc-font-page); font-size: 13px; font-weight: var(--pc-weight-page); line-height: 1.6; color: var(--pc-muted); margin: 0 0 var(--pc-ro-luft) 0; padding: 0 4px; min-height: 21px; } /* --------------------------------------------------------------- * DIE MELDEZEILE IST AUSGEBLENDET, AUF JEDER BREITE * * Robert am 17.08.2026: "entferne bei Roulette das Info Feld zwischen dem * Einsatz eintragen Feld und den 3 Feldern fuer den Einsatz den Text." * Genau diese Zeile stand dort. * * WAS DAMIT VERSCHWINDET, und das gehoert gesagt: Sie trug drei Dinge - * den Zustand der Runde ("Einsatz offen", "Das Rad laeuft"), das Ergebnis * in der Farbe seines Feldes und die persoenliche Rueckmeldung nach einem * Einsatz oder einer Gutschrift. Die ersten beiden stehen anderswo weiter: * der Zustand im Countdown der Setzphase, das Ergebnis in den Kreisen des * Verlaufs und in der Bilanz je Feld. DIE EIGENE GEWINNMELDUNG STEHT * NIRGENDWO SONST. * * EIGENE REGEL DIREKT HINTER DER GRUNDREGEL, dieselbe Bauart wie bei * .pc-ah-kopf und .pc-bird-bar: Die Grundregel darueber beschreibt, WIE * die Zeile aussieht, wenn sie dasteht, und ist damit die Vorlage fuer ein * Zurueckdrehen. * * BEWUSST NUR AUSGEBLENDET. hinweisSetzen() schreibt weiter hinein; die * Meldung bleibt damit im Dokument und ein Zurueckdrehen ist eine Zeile. * Herausgeschnitten waere es die Rueckmeldung endgueltig. * ------------------------------------------------------------- */ .pc-ro-hinweis { display: none; } .pc-ro-hinweis.is-ok { color: var(--pc-live); } .pc-ro-hinweis.is-error { color: var(--pc-accent); } .pc-ro-hinweis.is-zu { color: var(--pc-warn); } .pc-ro-hinweis.is-info { color: var(--pc-info); } /* Das Ergebnis in der Farbe seines Feldes. Schwarz steht dabei hell, wie ueberall sonst auch: Die Feldfarbe #0E0F13 waere auf dem Seitengrund nicht zu lesen. */ .pc-ro-hinweis.is-ergebnis.is-primy { color: #F5D56E; } .pc-ro-hinweis.is-ergebnis.is-rot { color: #FF4D6D; } .pc-ro-hinweis.is-ergebnis.is-schwarz { color: #E9E2C6; } /* --------------------------------------------------------------- * Die drei Setzfelder * * Ohne Rahmen seit 6.69.0. Der farbige Grund trägt das Feld allein; eine * Linie darum machte aus drei ruhigen Flächen drei Kästen. * ------------------------------------------------------------- */ /* --------------------------------------------------------------- * Das Spielbrett * * EIN Raster mit drei Spalten und zwei Zeilen: oben die drei Karten, * darunter die drei Listen. Die Begründung, warum das zwei getrennte * Elemente sind, steht bei felderBauen() in primy.js. * * align-items: start, damit jede Spalte so hoch ist wie ihr Inhalt. * Ohne die Angabe streckt das Raster alle drei auf die Höhe der längsten, * und neben einer Liste mit neun Zeilen stünde eine mit dreien in einem * Kasten mit 164 Pixeln Leere darunter. Im Browser gemessen. * ------------------------------------------------------------- */ #pcPrimyFields { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 12px 16px; margin: 0 0 var(--pc-ro-luft) 0; } /* ---------- Die Karte ---------- */ .pc-ro-karte { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: none; border-radius: var(--pc-ro-radius); /* Der weiche Grund kommt aus dem Skript, siehe FELD_ALPHA in primy.js. Der volle Grund steht als Rückfall dahinter: Sollte die Variable einmal fehlen, hat die Karte lieber zu viel Farbe als gar keine. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16)), var(--ro-weich, var(--ro-grund)); box-sizing: border-box; transition: opacity 0.2s ease; } .pc-ro-karte.is-zu-phase, .pc-ro-karte.is-gesperrt { opacity: 0.55; } /* --------------------------------------------------------------- * DAS FELD, AUF DAS ICH GESETZT HABE * * Robert: "wenn man bei Roulette auf ein Feld gesetzt hat, dann soll * dieses leicht die transparenz verlieren, damit man merkt, dass man * drauf gesetzt hat." * * Es ist genau der Grund der Karte, nur ohne die Durchsichtigkeit: statt * --ro-weich (FELD_ALPHA, 0,72) steht dort --ro-grund, die volle Farbe. * Der Verlauf darueber bleibt Zeichen fuer Zeichen derselbe, sonst * aenderte sich mehr als die Transparenz. * * KEINE ZWEITE FARBE, KEIN RAHMEN: Die drei Feldfarben stehen in * pc_ro_felder() und sonst nirgends; ein eigener Ton fuer den gesetzten * Zustand waere ein vierter, der beim naechsten Griff an die Palette * auseinanderlaeuft. * * Der Zustand kommt aus dem Feed, siehe eigenerEinsatz() in primy.js. * ------------------------------------------------------------- */ .pc-ro-karte.is-gesetzt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16)), var(--ro-grund); /* DER GOLDENE RAHMEN, seit 6.97.0. Die Transparenz allein war zu leise: Auf dem Primy-Feld sind es gerechnet fuenf Stufen je Kanal, weil das Feld selbst fast so dunkel ist wie der Seitengrund. Der Rahmen sagt dasselbe auf allen drei Feldern gleich deutlich. ALS INNENSCHATTEN UND NICHT ALS border: Ein Rahmen von 2 Pixeln naehme dem Inhalt bei box-sizing: border-box vier Pixel Breite, und die Karte traegt am Telefon einen Knopf, der sie ganz ausfuellt - der Text darin bricht dann anders um. Ein Innenschatten liegt ueber dem Grund und ruehrt das Layout nicht an. Er folgt der Rundung von allein. */ box-shadow: inset 0 0 0 2px var(--pc-gold); } .pc-ro-feld-kopf { display: flex; align-items: center; gap: 13px; } .pc-ro-feld-kreis { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 2px solid var(--ro-farbe); background: rgba(0, 0, 0, 0.42); } /* Die Scheibe geht IMMER von der Farbe des Abzeichens weg. * * Das schwarze Feld trägt einen fast schwarzen Puls auf dunklem Gold. Auf * einer abgedunkelten Scheibe kommt der Kontrast im Browser gemessen auf * 1,66 zu 1 und ist damit praktisch nicht mehr zu sehen; aufgehellt sind es * 6,62. Dieselbe Regel steckt in roScheibe() in primy.js, dort steht auch * die gemessene Tabelle. Zwei Fassungen sind hier unvermeidlich: Eine * zeichnet auf dem Canvas, die andere im DOM. Wer eine ändert, ändert die * andere mit. */ .pc-ro-karte.is-schwarz .pc-ro-feld-kreis { background: rgba(255, 255, 255, 0.35); } /* Eigener Name, nicht .pc-av: Das Abzeichen im Feld ist größer als das vor einem Spielernamen und richtet sich nach dem Kreis, nicht nach einer Textzeile. Eine Regel an .pc-av träfe jedes Abzeichen im Projekt. */ .pc-ro-av { display: block; width: 62%; height: 62%; overflow: visible; } .pc-ro-feld-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pc-ro-feld-name { font-family: var(--pc-font-page); font-size: 17px; font-weight: var(--pc-weight-page); color: var(--pc-text); letter-spacing: 0.4px; } .pc-ro-feld-quote { font-family: "droid-sans-mono", monospace; font-size: 12px; color: var(--ro-farbe); } /* Der schwarze Puls auf dunklem Gold ist als Zeichen groß genug lesbar, als 12-Pixel-Text daneben nicht mehr. Dort steht die Quote deshalb hell. */ .pc-ro-karte.is-schwarz .pc-ro-feld-quote { color: #E9E2C6; } .pc-ro-setzen, .pc-ro-setzen:hover, .pc-ro-setzen:focus, .pc-ro-setzen:active { background: rgba(0, 0, 0, 0.42) !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; color: var(--pc-text) !important; font-family: var(--pc-font-page) !important; font-weight: var(--pc-weight-page) !important; text-transform: uppercase !important; cursor: pointer !important; transform: none !important; transition: background-color 0.2s ease, color 0.2s ease !important; width: 100%; } /* padding, font-size und letter-spacing stehen NICHT in der Zustandsliste darüber, obwohl padding gegen base.css verteidigt werden muss. * * Die Medienabfrage setzt alle drei am Telefon neu, und aus einer * Zustandsliste (0,2,0) heraus verlören sie gegen eine spätere Regel mit * nur der Klasse (0,1,0), in genau dem Augenblick, in dem der Finger den * Knopf berührt. Die Prüfung auf die Spezifitätsfalle hat das * letter-spacing prompt gemeldet, als ich es mobil kleiner gesetzt habe. * Genau daran ist das Kreuz der Kopfzahlen mit 6.55.2 gescheitert. * * !important trägt padding, weil base.css es an `button` ebenfalls mit * !important setzt (10px 20px); die anderen beiden ziehen mit, damit die * Medienabfrage sie einheitlich überschreiben kann. */ .pc-ro-setzen { padding: 13px 10px !important; font-size: 12px !important; letter-spacing: 1.5px !important; } .pc-ro-setzen:hover { background: var(--ro-farbe) !important; color: #101116 !important; } .pc-ro-setzen:disabled, .pc-ro-setzen:disabled:hover { background: rgba(0, 0, 0, 0.42) !important; color: var(--pc-muted) !important; cursor: not-allowed !important; opacity: 0.6; } /* ---------- Die Spalte mit Fuß und Liste ---------- */ .pc-ro-spalte { border-radius: var(--pc-ro-radius); background: rgba(255, 255, 255, 0.025); padding: 4px 6px 6px 6px; box-sizing: border-box; } /* Der Fuß ist ein Knopf, weil er am Telefon die Liste auf- und zuklappt. Am Rechner tut der Griff nichts, dort ist die Liste immer offen; die Regel dazu steht allein in der Medienabfrage. Dasselbe Muster wie bei is-open an den Kopfzahlen aus 6.55.1. */ .pc-ro-feld-fuss, .pc-ro-feld-fuss:hover, .pc-ro-feld-fuss:focus, .pc-ro-feld-fuss:active { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; font-family: var(--pc-font-page) !important; font-weight: var(--pc-weight-page) !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; color: rgba(225, 228, 235, 0.65) !important; transform: none !important; cursor: default !important; text-align: left; } .pc-ro-feld-fuss { padding: 10px 8px !important; font-size: 11.5px !important; } .pc-ro-feld-wert { font-family: "droid-sans-mono", monospace; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--pc-text); margin-left: auto; } .pc-ro-feld-wert.is-plus { color: var(--pc-live); } .pc-ro-feld-wert.is-minus { color: var(--pc-accent); } .pc-ro-feld-wert.is-null { color: var(--pc-muted); } /* Der Pfeil steht nur am Telefon, dort ist der Fuß ein Griff. */ .pc-ro-fuss-pfeil { display: none; } /* --------------------------------------------------------------- * Die Spielerliste eines Feldes * * Zwei Spalten: wer links, wie viel rechts. Der Name bekommt, was übrig * ist, und wird notfalls abgeschnitten - eine umbrechende Namenszeile * risse die Liste auseinander. * * Eine feste Höhe mit eigenem Bildlauf. Ohne sie wächst ein Feld mit * fünfundzwanzig Einsätzen weit über die beiden daneben hinaus, und die * ganze Seite springt mit jeder neuen Wette. * ------------------------------------------------------------- */ .pc-ro-liste { list-style: none; padding: 0; margin: 0; min-height: 90px; max-height: 260px; overflow-y: auto; } .pc-ro-liste-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; font-family: var(--pc-font-page); font-size: 12.5px; font-weight: var(--pc-weight-page); color: var(--pc-text); } /* Die eigene Zeile bekommt einen leisen Grund. Kein Rahmen: Der wäre in einer Liste ein Fremdkörper. */ .pc-ro-liste-zeile.is-ich { background: rgba(255, 255, 255, 0.10); } /* Die Polsterung schafft dem FOKUSRAHMEN von .pc-pl Luft. Er liegt mit outline-offset zwei Pixel ausserhalb des Elements, die Zeile ist aber nur vierzehn Pixel hoch, und overflow: hidden kappt genau an der Textkante. Der negative Aussenabstand zieht die Box wieder auf ihr altes Mass - die Zeile wird also nicht hoeher. Dieselbe Technik wie an der Trefferflaeche der Kopfzahlen aus 6.55.1. BIS 6.85.0 STAND HIER DER GLANZ als Begruendung: Sein text-shadow reichte acht Pixel ueber die Buchstaben, und hier clippten zwei Ebenen, waehrend es im Team-Kader und im Turnierbaum keine einzige tat - das war der Unterschied, den Robert damals gesehen hat. Den Glanz gibt es seit 6.86.0 nicht mehr; die Polsterung bleibt trotzdem, weil der Fokusrahmen dieselbe Luft braucht, nur weniger davon. WAAGERECHT GENAUSO, und dass das geht, ist gemessen: Die Huelle traegt kein flex-grow und schrumpft auf die Textbreite, die Clipping-Kante lag also auch bei einem KURZEN Namen genau am letzten Buchstaben. Die acht Pixel nach rechts laufen in den `gap` der Zeile, und der betraegt zehn - der Betrag daneben wird nicht beruehrt. Der Scrollbereich .pc-ro-liste darueber clippt weiterhin, und das bleibt so: Er MUSS scrollen. Betroffen ist davon nur die oberste und die unterste sichtbare Zeile, nicht jede. */ .pc-ro-liste-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Senkrecht SIEBEN Pixel, nicht acht: Die Zeile darum traegt padding: 7px 8px, und mit acht ragte die Huelle je einen Pixel oben und unten darueber hinaus - gemessen 32,9 gegen 30,9. In einem Bereich, der scrollt, ist das kein Schoenheitsfehler, sondern eine Huelle, die groesser ist als ihre Zeile. */ padding: 7px 8px; margin: -7px -8px; } /* Der Name traegt den Ausloeser der Spielerkarte. Ein eigenes Element in der Huelle, weil die Huelle overflow: hidden fuehrt und den Fokusrahmen abschneiden wuerde; siehe listeFuellen() in primy.js. */ .pc-ro-liste-name { display: inline-flex; align-items: center; min-width: 0; } .pc-ro-liste-anon { color: rgba(225, 228, 235, 0.55); } .pc-ro-liste-wert { flex: 0 0 auto; font-family: "droid-sans-mono", monospace; font-size: 12.5px; color: rgba(225, 228, 235, 0.78); } .pc-ro-liste-wert.is-plus { color: var(--pc-live); } .pc-ro-liste-wert.is-minus { color: var(--pc-accent); } .pc-ro-liste-wert.is-null { color: var(--pc-muted); } .pc-ro-liste-leer { padding: 7px 8px; font-family: var(--pc-font-page); font-size: 12.5px; font-weight: var(--pc-weight-page); color: rgba(225, 228, 235, 0.45); } /* --------------------------------------------------------------- * Der Fairness-Beleg * ------------------------------------------------------------- */ /* Der Nachweis ist der letzte sichtbare Block der Seite, und deshalb steht sein unterer Abstand auf null. * * Gemessen: Auf /turniere/ endet der Inhalt genau mit dem Rumpf, hier lagen * 34 Pixel dazwischen - der Abstand zu einem Block, der gar nicht kommt. * * NICHT UEBER :last-child, und das ist der Grund: Auf Primy_v7 steht * dahinter noch ein leeres #pcPrimyHistoryView, und ein ausgeblendetes * Element traegt keinen Abstand - die Regel liefe dort ins Leere. Seit * 6.99.0 ist der Nachweis auf jeder Fassung der letzte SICHTBARE Block: * Die History ist ein Aufklapper ueber "Runde und Info" geworden und keine * zweite Ansicht mehr. */ .pc-ro-fairbox { border: none; border-radius: var(--pc-ro-radius); padding: 0; margin: 0; background: rgba(255, 255, 255, 0.025); overflow: hidden; } /* DER HAKEN STEHT RECHTS AUSSEN UND AUF HOEHE DER ERSTEN ZEILE, und das ist ein gemessener Befund, kein Geschmack. Bis 6.82.0 stand hier `align-items: center` und der Haken lief einfach hinter dem Text mit. Bei "Runde und Info" ist der Text kurz und einzeilig, beim Nachweis darunter lang - am Telefon bricht er auf drei Zeilen um. Bei 320 Pixeln gemessen: Runde und Info Text 1 Zeile Haken 124 px vom rechten Rand, 17 von oben Nachweis Text 3 Zeilen Haken 18 px vom rechten Rand, 33 von oben Zwei Aufklapper, die verschieden aussehen, sind zwei Bausteine - und genau das steht seit 6.72.0 als Absicht am Kasten darunter: derselbe Grund, derselbe Griff, derselbe Haken. `margin-left: auto` am Haken schiebt ihn bei BEIDEN an den rechten Rand, `align-items: flex-start` setzt ihn auf die erste Zeile statt in die Mitte eines mehrzeiligen Blocks. Damit sitzt er unabhaengig von der Textlaenge immer an derselben Stelle. */ .pc-ro-fair-summary { display: flex; align-items: flex-start; gap: 9px; padding: 16px 20px; cursor: pointer; list-style: none; font-family: var(--pc-font-page); font-size: 11.5px; font-weight: var(--pc-weight-page); letter-spacing: 1.6px; text-transform: uppercase; color: var(--pc-muted); transition: color 0.2s ease; } .pc-ro-fair-summary::-webkit-details-marker { display: none; } .pc-ro-fair-summary::marker { content: ""; } .pc-ro-fair-summary:hover, .pc-ro-fairbox[open] .pc-ro-fair-summary { color: var(--pc-gold); } .pc-ro-fair-icon { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; /* Immer rechts aussen und nie schrumpfend, Begruendung an der Regel darueber. margin-top haelt ihn optisch auf der Mitte der ersten Zeile: Die Zeile ist 14 Pixel hoch, der Haken 7 - und weil er um 45 Grad gedreht ist, sitzt seine sichtbare Spitze eine Spur tiefer als sein Kasten. Nachgemessen, nicht gerechnet. */ margin-left: auto; margin-top: 2px; flex-shrink: 0; } .pc-ro-fairbox[open] .pc-ro-fair-icon { transform: rotate(-135deg); } #pcPrimyFair { padding: 0 20px 22px 20px; } .pc-ro-fair-text { font-family: var(--pc-font-page); font-size: 13px; font-weight: var(--pc-weight-page); line-height: 1.65; color: var(--pc-muted); margin: 0 0 12px 0; max-width: 780px; } .pc-ro-fair-h { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 1.8px; text-transform: uppercase; color: var(--pc-text); margin: 24px 0 10px 0; } .pc-ro-fair-grid { display: grid; grid-template-columns: 210px 1fr; gap: 7px 16px; margin: 0 0 6px 0; } .pc-ro-fair-key { font-family: var(--pc-font-page); font-size: 12px; font-weight: var(--pc-weight-page); color: var(--pc-muted); } .pc-ro-fair-val { font-family: var(--pc-font-page); font-size: 12.5px; font-weight: var(--pc-weight-page); color: var(--pc-text); } /* word-break, nicht overflow: Ein Seed ist 64 Zeichen ohne Leerzeichen. Ohne den Umbruch schiebt er das Raster auf und die Seite bekommt einen waagerechten Balken. */ .pc-ro-fair-val.is-code { font-family: "droid-sans-mono", monospace; font-size: 11.5px; color: var(--pc-gold); word-break: break-all; } .pc-ro-code { display: block; padding: 16px 18px; margin: 0 0 12px 0; background: rgba(0, 0, 0, 0.32); border: none; border-radius: 10px; color: #C9D2E0; font-family: "droid-sans-mono", monospace; font-size: 11.5px; line-height: 1.65; white-space: pre; overflow-x: auto; box-sizing: border-box; } .pc-ro-fair-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pc-ro-copy, .pc-ro-copy:hover, .pc-ro-copy:focus, .pc-ro-copy:active { background: rgba(245, 213, 110, 0.12) !important; border: none !important; border-radius: 9px !important; box-shadow: none !important; color: var(--pc-gold) !important; font-family: var(--pc-font-page) !important; font-weight: var(--pc-weight-page) !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; cursor: pointer !important; transform: none !important; transition: background-color 0.2s ease, color 0.2s ease !important; } /* !important aus demselben Grund wie bei .pc-ro-quick. */ .pc-ro-copy { padding: 10px 16px !important; font-size: 11px !important; } .pc-ro-copy:hover { background: var(--pc-gold) !important; color: #101116 !important; } .pc-ro-copy.is-plain, .pc-ro-copy.is-plain:hover, .pc-ro-copy.is-plain:focus, .pc-ro-copy.is-plain:active { background: rgba(255, 255, 255, 0.05) !important; color: var(--pc-muted) !important; } .pc-ro-copy.is-plain:hover { background: rgba(255, 255, 255, 0.10) !important; color: var(--pc-text) !important; } .pc-ro-fair-stand { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 1.2px; text-transform: uppercase; color: var(--pc-muted); } /* --------------------------------------------------------------- * Die History * * SEIT 6.99.0 EIN AUFKLAPPER UEBER "RUNDE UND INFO", keine zweite Ansicht * mehr. Bis 6.98.0 stand hier die Umschaltung ueber eine Klasse am * Behaelter; sie ist mit histZeigen() ersatzlos entfallen. * * .pc-ro-hist2-titel ist mit ihr gegangen: Die Ueberschrift der eigenen * Ansicht hat der Aufklapper in seinem Griff, und ein zweiter Titel darin * waere derselbe Text zweimal. * ------------------------------------------------------------- */ /* Die Zahlenleiste liegt seit Primy_v4 IM Behaelter. Sie bringt aus app.css ihre eigene Breite mit (70 Prozent des Elternteils, mit !important); im Behaelter waeren das 70 Prozent von 70 Prozent. Deshalb hier zurueckgenommen. Bei den aelteren Seitenfassungen steht sie ausserhalb, dort trifft die Regel nichts und alles bleibt, wie es war. */ .pc-primy-container > .pc-overview { width: 100% !important; max-width: none !important; margin: 0 0 var(--pc-ro-luft) 0 !important; } /* Altbestand: Bis Primy_v7 stand am Ende der Seite ein leeres
, das die zweite Ansicht getragen hat. Plugin und Seitenfassung werden getrennt eingespielt; ohne diese Zeile stuende dort zwischen den beiden Schritten ein leerer Block. Dieselbe Ueberlegung wie bei #pcPrimyMobilInfo seit 6.72.0. */ #pcPrimyHistoryView { display: none !important; } /* Der Aufklapper selbst. Er nimmt dieselben Regeln wie der Nachweis und "Runde und Info": derselbe Grund, derselbe Griff, derselbe Haken. Drei Aufklapper, die verschieden aussehen, waeren drei Bausteine. */ .pc-ro-histbox { border: none; border-radius: var(--pc-ro-radius); padding: 0; margin: 0 0 12px 0; background: rgba(255, 255, 255, 0.025); overflow: hidden; } .pc-ro-histbox[open] .pc-ro-fair-summary { color: var(--pc-gold); } .pc-ro-histbox[open] .pc-ro-fair-icon { transform: rotate(-135deg); } .pc-ro-hist2-inhalt { padding: 0 20px 20px 20px; } /* Die Reiterleiste kommt aus app.css und braucht hier nur ihren Abstand. Alles Weitere - Farbe, Griff, aktiver Zustand - steht dort und darf nicht doppelt gefuehrt werden. */ .pc-ro-hist2-inhalt .pc-tabs { margin: 0 0 16px 0; } /* Die Tabelle steht in einem Kasten mit fester Breite und traegt sechs Spalten. Am Telefon passt das nicht; sie darf deshalb seitlich rollen, statt den ganzen Block breiter zu machen - genau die Regel aus CLAUDE.md fuer breite Inhalte. */ .pc-ro-hist2-inhalt { overflow-x: auto; } .pc-ro-hist2-tabelle { width: 100%; border-collapse: collapse; font-family: var(--pc-font-page); font-size: 13px; font-weight: var(--pc-weight-page); } .pc-ro-hist2-tabelle th { text-align: left; padding: 0 10px 10px 10px; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc-muted); border-bottom: 1px solid rgba(255, 255, 255, 0.10); white-space: nowrap; } .pc-ro-hist2-tabelle td { padding: 9px 10px; color: var(--pc-text); border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; } .pc-ro-hist2-tabelle tr:last-child td { border-bottom: none; } .pc-ro-hist2-tabelle .is-id code { font-family: "droid-sans-mono", monospace; font-size: 12px; color: var(--pc-gold); background: none; padding: 0; } .pc-ro-hist2-tabelle .is-zahl { font-family: "droid-sans-mono", monospace; text-align: right; white-space: nowrap; } .pc-ro-hist2-tabelle .is-zahl.is-plus { color: var(--pc-live); } .pc-ro-hist2-tabelle .is-zahl.is-minus { color: var(--pc-accent); } .pc-ro-hist2-tabelle .is-zahl.is-null { color: var(--pc-muted); } .pc-ro-hist2-tabelle .is-zahl.is-offen { color: var(--pc-muted); letter-spacing: 2px; } .pc-ro-hist2-tabelle .is-feld.is-rot { color: #FF4D6D; } .pc-ro-hist2-tabelle .is-feld.is-primy { color: #F5D56E; } /* Schwarz steht hell, wie überall sonst: Die Feldfarbe #0E0F13 wäre auf dem Seitengrund nicht zu lesen. */ .pc-ro-hist2-tabelle .is-feld.is-schwarz { color: #E9E2C6; } .pc-ro-hist2-offen { font-family: "droid-sans-mono", monospace; color: var(--pc-muted); letter-spacing: 2px; } .pc-ro-hist2-leer { font-family: var(--pc-font-page); font-size: 13px; font-weight: var(--pc-weight-page); color: var(--pc-muted); padding: 18px 0; } .pc-ro-hist2-blaettern { display: flex; align-items: center; gap: 14px; margin-top: 20px; } .pc-ro-hist2-stand { font-family: var(--pc-font-page); font-size: 11px; font-weight: var(--pc-weight-page); letter-spacing: 1.2px; text-transform: uppercase; color: var(--pc-muted); } .pc-ro-copy:disabled, .pc-ro-copy:disabled:hover { opacity: 0.45; cursor: not-allowed !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--pc-muted) !important; } /* Altbestand: Bis Primy_v4 stand unter dem Brett ein eigener Aufklapper #pcPrimyMobilInfo, den das Skript am Telefon gefuellt hat. Seit 6.72.0 uebernimmt das #pcPrimyInfo auf jeder Breite. Der alte Kasten bleibt in den vier aelteren Seitenfassungen stehen und stuende ohne Inhalt als leeres
mit dem Standardpfeil des Browsers da; Plugin und Seitenfassung werden getrennt eingespielt, und zwischen beiden Schritten soll dort nichts Halbes haengen. */ #pcPrimyMobilInfo { display: none !important; } /* --------------------------------------------------------------- * Der Aufklapper "Runde und Info" * * Er traegt seit Primy_v5, was bis dahin ueber dem Rad stand: die vier * Zahlen und den Info-Text. Auf JEDEM Geraet, nicht nur am Telefon - * Robert wollte oben sofort das Rad. * * Er nimmt dieselben Regeln wie der Nachweis darunter: derselbe Grund, * derselbe Griff, derselbe Haken. Zwei Aufklapper, die verschieden * aussehen, waeren zwei Bausteine; hier ist es einer. * ------------------------------------------------------------- */ #pcPrimyInfo { border-radius: var(--pc-ro-radius); background: rgba(255, 255, 255, 0.025); margin: 0 0 12px 0; overflow: hidden; } #pcPrimyInfo[open] .pc-ro-fair-summary { color: var(--pc-gold); } #pcPrimyInfo[open] .pc-ro-fair-icon { transform: rotate(-135deg); } .pc-ro-info-inhalt { padding: 0 20px 20px 20px; } /* Die Zahlenleiste hat ihre Breite schon vom Kasten und darf sich keine zweite holen. .pc-overview aus app.css traegt width, max-width, margin und padding mit !important; ohne die Ruecknahme stuende sie im Kasten mittig und schmaler als er. Genau die Lektion "!important schlaegt Genauigkeit". */ #pcPrimyInfo .pc-overview { width: 100% !important; max-width: none !important; margin: 0 0 14px 0 !important; padding: 0 0 14px 0 !important; } #pcPrimyInfo .pc-description { margin: 0 !important; max-width: none; } /* --------------------------------------------------------------- * Am Telefon * ------------------------------------------------------------- */ @media (max-width: 1100px) { .pc-primy-head, .pc-primy-container { width: 88%; } } @media (max-width: 768px) { .pc-primy-head, .pc-primy-container { width: 100%; padding: 0 var(--pc-edge) !important; } /* Der Seitenkopf faellt hier auch dann weg, wenn eine aeltere Seitenfassung ihn noch traegt und kopfAusblenden() ihn stehen laesst: Am Telefon war das schon seit 6.71.0 so gewollt. */ .pc-primy-head { display: none !important; } /* Und ohne Kopf braucht das Rad oben etwas Luft zur Kopfleiste. */ .pc-ro-stage { margin-top: 8px !important; } /* ---------- Die Reihenfolge am Telefon ---------- * * Der Verlauf rutscht zwischen die Einsatzfelder und die beiden * Aufklapper. Am Rechner steht er unter dem Rad, wo er hingehoert; * am Telefon nimmt das Rad den ganzen oberen Bildschirm ein, und drei * Reihen Kreise darunter schoeben die Setzleiste aus dem Bild. * * Ueber order, nicht ueber einen Umzug im DOM: Ein Element, das beim * Drehen des Geraets die Seite wechselt, muesste seinen Zustand * mitnehmen - genau die Falle aus 6.54.1. Alle Kinder bekommen einen * Wert, sonst mischt sich die Dokumentreihenfolge dazwischen. */ /* Der Zurueck-Knopf steht ganz oben. Er traegt seinen order-Wert ausdruecklich: Ohne Angabe stuende er auf 0 und damit ebenfalls vorn, aber ein Wert, der zufaellig stimmt, ist keiner - und die Regel oben sagt, dass ALLE Kinder einen bekommen. */ #pcPrimyBack { order: 0; } .pc-ro-stage { order: 1; } #pcPrimyBar { order: 2; } #pcPrimyHint { order: 3; } #pcPrimyFields { order: 4; } #pcPrimyHistory { order: 5; } /* Runde und Info, dann History, dann der Nachweis - dieselbe Reihenfolge wie am Rechner, seit 6.99.0 auf Roberts Vorgabe. */ #pcPrimyInfo { order: 6; } .pc-ro-histbox { order: 7; } .pc-ro-fairbox { order: 8; } /* Ausgeblendet und trotzdem mit Wert: Die Regel oben sagt, dass ALLE Kinder einen bekommen, und auf Primy_v7 gibt es dieses Element noch. */ #pcPrimyHistoryView { order: 9; } #pcPrimyCanvas { height: 88px; } .pc-ro-marker::before { border-top-width: 7px; } .pc-ro-marker::after { border-bottom-width: 7px; } .pc-ro-ov-zahl { font-size: 24px; } /* Hier stapelt sich derselbe Baustein: Beschriftung oben, Kreise in der Mitte, Zaehlung unten, alles zentriert. Das ist der Aufbau aus dem Bild der Vorlage, und er gilt AUSSCHLIESSLICH am Telefon. flex-wrap ausdruecklich aus: In einer Spalte ohne feste Hoehe bricht zwar nichts um, aber das Zusammenspiel von column und wrap ist eine Stelle, an der ein spaeterer Griff an die Hoehe still etwas anderes bewirken wuerde. */ #pcPrimyHistory { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; } .pc-ro-hist-titel { margin-right: 0; text-align: center; } .pc-ro-hist-reihe { justify-content: center; gap: 5px; } /* Der Kreis bleibt bei 23 Pixeln, der RING wird duenner. * * Bis 6.78.0 setzte diese Regel nur die Groesse und erbte die 1,5 Pixel * Rand vom Rechner. Der Kreis ist hier aber kleiner, und damit wurde * der Ring anteilig DICKER statt duenner: gemessen 7,3 Prozent des * Durchmessers gegen 6,4 am Rechner, jeweils bei dreifacher * Pixeldichte. Genau das hat Robert gesehen. * * EIN GANZER PIXEL, kein krummer Wert. Ein Browser rastert den Rand auf * ganze Geraetepixel, und 1,5px ergibt je nach Dichte 2, 1,5 oder 1,67 * CSS-Pixel - derselbe Code sieht auf drei Geraeten verschieden aus. * Ein ganzzahliger Wert rastert ueberall gleich und liegt mit * 4,3 Prozent unter dem Rechner statt darueber. */ .pc-ro-hist { width: 23px; height: 23px; border-width: 1px; font-size: 10px; /* Die Polsterung der Grundregel wird hier zurueckgenommen. Gemessen sitzt die Ziffer am Telefon einen Pixel zu HOCH statt zu tief: Die Schrift ist kleiner, der Kreis auch, und die Rechnung kippt in die andere Richtung. Ein Pixel mehr unten machte es dort schlechter. */ padding-bottom: 0; } /* Die drei Punkte der Zaehlung aus demselben Grund. Sie sind mit 11 Pixeln noch kleiner, und 1,5px Rand waren dort bis zu 18 Prozent des Durchmessers - aus dem Punkt wurde fast ein Ring. */ .pc-ro-hist-punkt { border-width: 1px; } /* Nicht mehr rechts aussen, sondern mittig unter den Kreisen. */ .pc-ro-hist-zahl { margin-left: 0; justify-content: center; } /* Nur die letzten neun Kreise. * * Der Browser zeichnet seit 6.71.0 hoechstens zehn, siehe HIST_MAX in * primy.js. Am Telefon ist auch der zehnte einer zu viel: Neun passen * mit der Beschriftung davor in eine Reihe, zehn brechen um. * * nth-of-type zaehlt die SPAN-Elemente im Behaelter, und das sind * ausschliesslich die Kreise: Die Zaehlung und der Leertext sind seit * 6.70.0 divs, genau deswegen. Waeren sie spans, traefe diese Regel sie * mit und die Zaehlung verschwaende. */ .pc-ro-hist-reihe span.pc-ro-hist:nth-of-type(n+10) { display: none; } /* --------------------------------------------------------------- * DIE LEISTE STEHT AM TELEFON UNTEREINANDER * * Grund, Polsterung und Rundung sind mit 6.96.0 in die Grundregel * gewandert: Sie fallen seither auf JEDER Breite weg, und was hier * stand, war danach dieselbe Angabe ein zweites Mal. Dasselbe gilt fuer * .pc-ro-wer - Name und Punkte sind seit 6.96.0 ueberall aus. * * Die Luecke von 14 Pixeln zwischen Feld und Knoepfen BLEIBT: Sie * trennt zwei Dinge voneinander und nicht den Inhalt vom Rand. * ------------------------------------------------------------- */ #pcPrimyBar { flex-direction: column; align-items: stretch; gap: 14px; } /* Das Eingabefeld nimmt am Telefon die volle Breite und rueckt unter den Namen. Ohne das haengt es an margin-left: auto rechts, und links daneben stehen im Browser gemessen 95 Pixel Leere - bei 375 Pixeln ein Viertel der Seite. Die Schnellknoepfe duerfen hier umbrechen: Sieben davon plus das Eingabefeld gehen in eine Zeile von 355 Pixeln nicht hinein. Sie rutschen deshalb unter das Feld, und die Leiste wird wieder zwei Zeilen hoch - am Telefon ist das der richtige Tausch. */ .pc-ro-eingabe { flex: 1 1 100%; max-width: none; margin-left: 0; flex-wrap: wrap; padding: 10px 12px; } #pcPrimyAmount { flex: 1 1 100%; padding: 4px 0 !important; } .pc-ro-quicks { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* Sieben Schnellknoepfe passen bei 375 Pixeln nicht in eine Reihe. Ein Raster aus Viertelbreiten ergibt vier und drei, und die Luecke am Ende der zweiten Reihe sieht aus wie ein Fehler. Im Browser nachgemessen: Reihe eins vier Knoepfe, Reihe zwei drei und rechts 91 Pixel Leere. MAX nimmt deshalb zwei Spalten. Sieben Knoepfe belegen damit acht Zellen, und beide Reihen sind voll. MAX ist dafuer der richtige: Er ist der einzige, dessen Beschriftung ein Wort ist und kein Zeichen, und er steht ohnehin am Ende. Am Rechner bleibt es beim Flex. */ /* minmax(0, 1fr), nicht 1fr. Ein blosses 1fr heisst minmax(AUTO, 1fr), und der breiteste Knopf schiebt seine Spalte auf: Im Browser gemessen kamen 90,9 / 64,9 / 73,4 / 81,8 Pixel heraus statt viermal 84. Mit der Null als Untergrenze sind alle vier gleich breit. Die Regel steht oben bei .pc-ro-eingabe. */ .pc-ro-quick[data-do="max"] { grid-column: span 2; } /* 12 statt 7 Pixel Polsterung: Damit misst der Knopf rund 40 Pixel in der Hoehe und laesst sich mit dem Finger treffen. Am Rechner reichen die 7, dort zielt eine Maus. !important, weil die schlichte Regel oben es ebenfalls traegt; ohne das gewaenne sie trotz frueherer Stellung. */ .pc-ro-quick { padding: 12px 4px !important; } /* ---------- Das Brett am Telefon ---------- * * Die drei KARTEN stehen nebeneinander, die drei LISTEN darunter jede * ueber die volle Breite. Genau die Aufteilung der Vorlage, und sie geht * nur, weil Karte und Liste seit 6.71.0 getrennte Elemente in EINEM * Raster sind: Die Karten fuellen die drei Spalten, jede Liste spannt * ueber alle drei. * * Bei 355 Pixeln misst eine Karte damit rund 102 Pixel. Eine Zeile mit * "Einsatz setzen" traegt sie seit 6.86.0 nicht mehr, siehe den * Abschnitt "Das ganze Feld ist der Knopf" weiter unten. */ #pcPrimyFields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pc-ro-spalte { grid-column: 1 / -1; } /* position: relative ist der Bezugspunkt fuer den Knopf, der die Karte abdeckt. Ohne die Angabe waere es der naechste positionierte Vorfahr und der Knopf laege irgendwo auf der Seite - dieselbe Falle wie beim mobilen Menue in der Kopfleiste. */ .pc-ro-karte { position: relative; padding: 14px 8px; gap: 10px; align-items: center; text-align: center; } /* Kreis ueber Text statt daneben: Nebeneinander bleiben von 102 Pixeln nach dem Kreis noch 42 fuer den Namen, und "Schwarz" passt dort nicht. */ .pc-ro-feld-kopf { flex-direction: column; gap: 7px; } .pc-ro-feld-kreis { width: 40px; height: 40px; flex: 0 0 40px; } .pc-ro-feld-text { align-items: center; gap: 1px; } .pc-ro-feld-name { font-size: 14px; } .pc-ro-feld-quote { font-size: 11px; } /* ---------- Das ganze Feld ist der Knopf ---------- * * Roberts Vorgabe vom 16.08.2026, und ausdruecklich NUR fuer die mobile * Fassung: "Entferne 'Einsatz setzen' und mache aus den kompletten * Feldern Buttons zum Setzen." Am Rechner bleibt alles, wie es war. * * GEBAUT IST DAS UEBER DEN VORHANDENEN KNOPF, nicht ueber eine neue * Klickflaeche. Er wird aus dem Fluss genommen und deckt die Karte ab. * Drei Dinge sprechen dafuer, und jedes einzelne genuegt: * * Die Karte selbst zum