/* ===================================================================== SKIN „graphit" — der dritte Skin: „Graphit & Messing". Quelle der Werte: frontend-next/DESIGN.md (Abschnitt 1 „Graphit & Messing" und Abschnitt 2 Design-Tokens). Er wirkt wie „bento" ausschließlich über die Klasse .skin-graphit am plus CSS-Variablen; kein Render-Modul wird dupliziert, kein Layout umgebaut. Grundidee: KEINE Schatten, KEIN Glow, KEINE Verläufe — Hierarchie entsteht über genau drei Helligkeitsebenen (Seite #0F1115 < Karte #151921 < gehoben #1C212C) plus 1px-Hairlines. --lo/--hi transparent zu stellen löscht (wie im Bento-Skin) alle Neumorphism-Doppelschatten auf einen Schlag; die Regeln weiter unten holen die Form als Kante zurück. Der Akzent ist entsättigtes Messing und bleibt sparsam: aktive Nav, Knöpfe, Fokus-Ringe, Markierungen — nie als Serienfarbe. ===================================================================== */ html.skin-graphit{ --lo:transparent; --hi:transparent; /* Die drei Ebenen. --canvas ist die Seite, --surface die Karte, --inset (Name aus dem Bento-Skin beibehalten, damit die geteilten Flächenregeln gleich heißen) ist hier die GEHOBENE Ebene 2 — Graphit staffelt nach oben hell, nicht in Mulden. */ --canvas:#0F1115; --surface:#151921; --inset:#1C212C; --line:#262C38; --line2:#384050; --track:#262C38; /* Ink-Abstufungen EXAKT aus DESIGN.md — keine eigenen Varianten. (ink 14,5:1 · ink2 8,1:1 · ink3 5,0:1 auf --surface, nachgerechnet.) */ --ink:#E6E9F0; --ink2:#A9B0C2; --ink3:#8089A0; /* --cyan ist im Bestand DIE Akzentvariable (aktive Reiter, Knöpfe, Fokus-Ringe, Fortschrittsbalken) → Messing. Die Diagrammserien hängen NICHT mehr daran, sie stehen unten als --chart-… fest — sonst würde der Akzent als Serienfarbe recycelt (DESIGN-Verbot). --violet trägt Avatar-Initialen u. Ä. → das Experimentell-Violett. */ --cyan:#C9A96A; --violet:#A98BD8; /* Statusfarben: Win = Blau (LoL-Konvention), gedeckt statt grell. */ --win:#5E9DE6; --loss:#D66A72; --amber:#D9913D; --spike:#D95926; /* Mate-Score-Stufen: Basis ist das Experimentell-Violett aus DESIGN.md, die zweite Stufe eine hellere Ablesung derselben Familie. Gegen den Pillen-Untergrund (--inset) geprüft: --mate-up 5,7:1, --mate-up2 8,5:1. */ --mate-up:#A98BD8; --mate-up2:#C9B3E8; /* Divergenz-Skala der Heatmap: DESIGN.md schreibt --loss ↔ #343A46 ↔ --win um 50 % WR vor. ACHTUNG: als Hex ausgeschrieben, weil mix()/hx() in js/view/render.js #rrggbb parsen. Die neutrale Mitte #343A46 erreicht gegen die leere Zelle nur ≈1,7:1 (die tokens.css-Zielmarke von 2,5:1 ist mit dem DESIGN-Wert nicht erreichbar) — die leere Zelle unterscheidet sich deshalb zusätzlich per Schraffur, siehe .skin-graphit .cell.null unten. */ --hm-warm:#D66A72; --hm-cool:#5E9DE6; --hm-neut:#343A46; --hm-null:#0B0D11; /* Teamfarben: Blau-Seite = Serienblau, Rot-Seite = gedecktes Rot. */ --team-b:#3987E5; --team-r:#D66A72; --grid:#262C38; --axis:#384050; /* Diagramme: die fünf validierten Serienfarben aus DESIGN.md, fest verdrahtet statt über --cyan/--violet — der Messing-Akzent darf keine Datenreihe färben. Flächenton unter den Diagrammen ist die gehobene Ebene, denn dort (Wells) liegen die Charts. Die Referenzlinie nutzt --ink-3 aus DESIGN.md: gedämpft, aber AA-lesbar. */ --chart-surf:var(--inset); --chart-cat1:#3987E5; --chart-cat2:#D95926; --chart-cat3:#199E70; --chart-ref:#8089A0; /* Zeilentönung der History: dieselben Statusfarben, hauchdünn. */ --rowwin:rgba(94,157,230,.05); --rowloss:rgba(214,106,114,.045); /* Spielerfarben Vergleich/Lobby: die validierte Serienreihenfolge aus DESIGN.md (s1–s5), Slot 6 = Info-Blau. Bewusst OHNE var(--win): das DESIGN verbietet Win/Loss als Serienfarbe. */ --w-p1:#3987E5; --w-p2:#D95926; --w-p3:#199E70; --w-p4:#C98500; --w-p5:#D55181; --w-p6:#7FA7CF; /* Radii aus DESIGN.md (sm 4 / md 6 / lg 8): Karten lg, Wells md. Rhythmus im 4er-Raster. */ --r:8px; --rw:6px; --gap:16px; --pad:16px; --padx:20px; scrollbar-color:#384050 #0F1115; } /* ---- Flächen: 1px-Hairline statt Doppelschatten; Karten sind eine Stufe heller als die Seite, gehobene Elemente noch eine Stufe. ---- */ .skin-graphit .card,.skin-graphit .tile,.skin-graphit .pcard{ background:var(--surface);border:1px solid var(--line)} .skin-graphit .well,.skin-graphit .swell,.skin-graphit .duel,.skin-graphit .rcard, .skin-graphit .callout,.skin-graphit .banner,.skin-graphit .sess,.skin-graphit .sbhead, .skin-graphit .spechint{ background:var(--inset);border:1px solid var(--line);border-radius:var(--rw)} .skin-graphit .chip,.skin-graphit .wl,.skin-graphit .pill,.skin-graphit .lobby,.skin-graphit .obj, .skin-graphit .pbadge,.skin-graphit .itile,.skin-graphit .scpill,.skin-graphit .modebadge, .skin-graphit .bslot .bimg,.skin-graphit .rchip,.skin-graphit .soon .badge, .skin-graphit .btn,.skin-graphit .rwell.sq,.skin-graphit .iwell,.skin-graphit .logo{ background:var(--inset);border:1px solid var(--line);border-radius:6px;box-shadow:none} /* Eingaben und Vorwahl-Schienen liegen TIEFER als die Karte (Seitenton): ein Feld liest sich als Vertiefung, der aktive Knopf darin als gehobener Chip — drei Ebenen, null Schatten. */ .skin-graphit .seg,.skin-graphit select,.skin-graphit .dinput,.skin-graphit .acctsearch, .skin-graphit .cmp-input input{ background:var(--canvas);border:1px solid var(--line);border-radius:6px;box-shadow:none} .skin-graphit .seg button{border-radius:4px} .skin-graphit .seg button.on{background:var(--inset);border:1px solid var(--line2); color:var(--cyan);box-shadow:none} .skin-graphit select option{background:var(--inset)} /* Kopfzeile: dieselbe Rangfolge wie in den anderen Skins — die Vorwahlen (Skin/Sprache) bleiben leise, der aktive steht in --ink, nicht im Akzent. */ .skin-graphit .tb-prefs .seg{background:transparent;border-color:transparent} .skin-graphit .tb-prefs .seg button.on{color:var(--ink);background:var(--surface); border:1px solid var(--line2)} /* Feste Hover-Farbe des Neo-Skins (#7ad4f0, helles Cyan) passt nicht zu Messing — Hover hellt hier schlicht auf Primärtext auf (nur Farbe, ≤150ms). */ .skin-graphit .btn:hover{color:var(--ink)} .skin-graphit .btn:active{background:var(--track)} .skin-graphit .homelink:hover .logo{color:var(--ink)} /* Rang-Juwel: der Bestand trägt einen Gold-Verlauf — Verläufe sind im Graphit-Skin verboten, das Juwel wird eine flache Messing-Fläche. */ .skin-graphit .rankgem{background:var(--cyan)} /* Team-Punkte an die ECHTEN Teamfarben binden: im Neo-Skin fallen --cyan/--team-b zusammen, hier nicht mehr — ein Messing-Punkt für „blaues Team" wäre falsch. */ .skin-graphit .teamdot.b{background:var(--team-b)} .skin-graphit .teamdot.r{background:var(--team-r)} .skin-graphit .fgroup+.fgroup{border-left:1px solid var(--line);box-shadow:none} /* Runde Elemente behalten ihre Form, bekommen aber dieselbe Kante. */ .skin-graphit .cicon,.skin-graphit .cfall,.skin-graphit .cicon2,.skin-graphit .cfall2, .skin-graphit .oiwell,.skin-graphit .rwell,.skin-graphit .avatar,.skin-graphit .aopt .aav, .skin-graphit .rwell.rune,.skin-graphit .iwell.rune,.skin-graphit .iwell.tree{ background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .ftrack,.skin-graphit .otrack,.skin-graphit .dtrack,.skin-graphit .dtrack2, .skin-graphit .wrtrack{background:var(--track);box-shadow:none} .skin-graphit .fbar,.skin-graphit .dbar,.skin-graphit .dbar2,.skin-graphit .otrack .fill{border-radius:2px} /* ---- Fest verdrahtete Cyan-/Schattenreste des Neo-Skins nachziehen. Schwebende Flächen (Menü, Tooltip, Modal) dürfen als einzige einen hauchdünnen Wurfschatten behalten — sie liegen ÜBER der Seite, Helligkeit allein trennt sie nicht vom Untergrund. ---- */ .skin-graphit .acctmenu{background:var(--inset);border:1px solid var(--line2); border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.5)} /* Der „Messing-Tick": 2px Akzentstrich an der aktiven Auswahl — das Signatur-Element aus DESIGN.md. */ .skin-graphit .aopt.sel{box-shadow:inset 2px 0 0 0 var(--cyan);background:rgba(255,255,255,.04)} .skin-graphit #tip{background:var(--inset);border:1px solid var(--line2); border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.45)} .skin-graphit .sbrows{border:1px solid var(--line);border-radius:8px} .skin-graphit .prow+.prow{box-shadow:none;border-top:1px solid var(--line)} .skin-graphit .prow:nth-child(even){background:rgba(255,255,255,.02)} .skin-graphit .prow.me{background:rgba(201,169,106,.09);box-shadow:inset 2px 0 0 0 var(--cyan)} .skin-graphit .prow.me:hover{background:rgba(201,169,106,.14)} .skin-graphit .pbadge.mvp{color:var(--amber);background:rgba(217,145,61,.12); border-color:rgba(217,145,61,.5);box-shadow:none} .skin-graphit .pbadge.ace{color:#e08fad;background:rgba(213,81,129,.12); border-color:rgba(213,81,129,.45);box-shadow:none} .skin-graphit button.rcard:hover{box-shadow:none;border-color:var(--cyan)} .skin-graphit .wrci{background:rgba(201,169,106,.24)} .skin-graphit #chtbl tbody tr.on td{background:rgba(201,169,106,.09)} .skin-graphit .pcard.me{outline:2px solid rgba(201,169,106,.65)} .skin-graphit .sess .schip.W{background:rgba(94,157,230,.85)} .skin-graphit .sess .schip.L{background:rgba(214,106,114,.8)} /* Leere Heatmap-Zelle: die Divergenz-Mitte aus DESIGN.md ist dunkel (siehe Hinweis im Variablenblock) — die Schraffur ist hier deshalb nicht Zierde, sondern der zweite Kanal neben der Helligkeit. */ .skin-graphit .cell.null{background:var(--hm-null);opacity:1; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,0) 2px 6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .skin-graphit .lgrad{border-radius:2px} /* ---- Startseite (dieselben vier Flächen wie im Bento-Block von css/tabs/home.css, nur mit den Graphit-Ebenen). ---- */ .skin-graphit .home-search,.skin-graphit .home-fail{ background:var(--inset);border:1px solid var(--line);border-radius:8px} .skin-graphit .hacc,.skin-graphit .home-rchip{ background:var(--inset);border:1px solid var(--line);border-radius:6px} .skin-graphit .home-rchip{border-radius:999px} .skin-graphit .hacc:hover{border-color:var(--line2)} .skin-graphit .hacc.sel{background:var(--track);border-color:var(--line2)} .skin-graphit .hacc .hav{background:var(--track);border:1px solid var(--line)} /* ---- Champions-Tab: Rollen und Kaufreihenfolge (Gegenstück zum Bento-Block in css/tabs/champs.css). ---- */ .skin-graphit .rolebox{background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .bobasis{background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .boimg,.skin-graphit .botrack{background:var(--track);box-shadow:none} .skin-graphit .botrack i{border-radius:2px} .skin-graphit .boch{border-bottom:1px solid var(--line)} .skin-graphit .boitem:hover{background:var(--surface)} .skin-graphit .cb2h{border-bottom:1px solid var(--line)} .skin-graphit .bospin{border-color:var(--line2);border-top-color:transparent} .skin-graphit .rolehead .rlmain{background:var(--surface);border:1px solid var(--line2);box-shadow:none} .skin-graphit .rolebody .well{background:var(--surface)} /* ---- Diagramm-Modal (Gegenstück zum Bento-Block in css/chartmodal.css; die Bento-Rasteränderungen dahinter bleiben bewusst außen vor). ---- */ .skin-graphit .cmback{background:rgba(0,0,0,.72)} .skin-graphit .cmzoom,.skin-graphit .cmclose{ background:var(--inset);border:1px solid var(--line);border-radius:6px;box-shadow:none} .skin-graphit .cmzoom:hover,.skin-graphit .cmclose:hover{border-color:var(--cyan)} .skin-graphit .cmwin{box-shadow:0 18px 44px rgba(0,0,0,.6)} .skin-graphit .cmbar .fgroup+.fgroup{border-left:1px solid var(--line);box-shadow:none} .skin-graphit .cmstats .swell.link{border:1px solid var(--line);background:var(--inset)} .skin-graphit .cmstats .swell.link:hover{border-color:var(--cyan)} .skin-graphit .cmtrig:focus-visible,.skin-graphit .cmplot .chart:focus-visible{border-radius:6px} /* ---- Verdrahtung/Admin/Vergleich (Gegenstück zu css/wiring-bento.css). ---- */ .skin-graphit .w-admin,.skin-graphit .w-admsel{background:var(--canvas);border:1px solid var(--line); border-radius:6px;box-shadow:none} .skin-graphit .w-admin.ok{border-color:var(--win)} .skin-graphit .w-admin.bad{border-color:var(--loss)} .skin-graphit .w-admsel option{background:var(--inset)} .skin-graphit .w-admpill,.skin-graphit .w-admeditbox{ background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-admpill{border-radius:999px} .skin-graphit .w-admeditbox{border-radius:var(--rw)} .skin-graphit .w-admbar{background:var(--track);box-shadow:none} .skin-graphit .w-admtbl td{border-top:1px solid var(--line)} .skin-graphit .w-syncbox{background:var(--surface);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-lfpill,.skin-graphit .w-cmpchip,.skin-graphit .w-caveat,.skin-graphit .w-h2hcard, .skin-graphit .w-h2hrole .win{ background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-lfpill,.skin-graphit .w-cmpchip{border-radius:999px} .skin-graphit .w-caveat,.skin-graphit .w-h2hcard{border-radius:var(--rw)} .skin-graphit .w-h2hrole .win{border-radius:6px} .skin-graphit .w-lftrack,.skin-graphit .w-progwrap,.skin-graphit .w-sptrack{background:var(--track);box-shadow:none} .skin-graphit .w-kusrcs,.skin-graphit .w-kucard{background:var(--inset); border:1px solid var(--line);box-shadow:none} .skin-graphit .w-kucell{background:var(--surface);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-kutag,.skin-graphit .w-kustate{background:var(--surface); border:1px solid var(--line);box-shadow:none} .skin-graphit .w-keyform input{background:var(--canvas);border:1px solid var(--line); border-radius:6px;box-shadow:none} .skin-graphit .w-keyform input.ok{border-color:var(--win)} .skin-graphit .w-keyform input.bad{border-color:var(--loss)} .skin-graphit .w-loading .w-spin{border-color:var(--line2);border-top-color:transparent} .skin-graphit .w-c2tab,.skin-graphit .w-c2badge,.skin-graphit .w-c2elo,.skin-graphit .w-c2row, .skin-graphit .w-c2win,.skin-graphit .w-c2pair{background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-c2tab,.skin-graphit .w-c2badge{border-radius:999px} .skin-graphit .w-c2elo,.skin-graphit .w-c2win,.skin-graphit .w-c2row, .skin-graphit .w-c2pair{border-radius:var(--rw)} .skin-graphit .w-c2tab.on{background:var(--surface);border-color:var(--line2);color:var(--cyan)} .skin-graphit .w-c2track{background:var(--track);box-shadow:none} .skin-graphit .w-c2fill{border-radius:2px} .skin-graphit .w-c2nerd{border-top:1px solid var(--line)} .skin-graphit .w-c2src,.skin-graphit .w-c2flag{background:var(--inset);border:1px solid var(--line)} .skin-graphit .w-c2src{border-radius:var(--rw)} /* ---- Beta-Tab (Gegenstück zum Bento-Block in css/tabs/beta.css). ---- */ .skin-graphit .w-btcard{background:var(--surface);border:1px solid var(--line);box-shadow:none} .skin-graphit .w-btnote,.skin-graphit .w-btchip{background:var(--inset);border:1px solid var(--line); box-shadow:none} .skin-graphit .w-btnote{border-radius:var(--rw)} .skin-graphit .w-btchip{border-radius:999px} .skin-graphit .w-btprog,.skin-graphit .w-bttrack,.skin-graphit .w-btmeter{background:var(--track); box-shadow:none} .skin-graphit .w-btprog i,.skin-graphit .w-btfill,.skin-graphit .w-btmfill{border-radius:2px} .skin-graphit .w-btskel i{background:var(--track)} .skin-graphit .w-btfoot{border-top:1px solid var(--line)} .skin-graphit .w-btrow:hover{background:rgba(255,255,255,.04)} /* ---- Vorschläge-Formular + Wendepunkt (Gegenstück zu css/mobile.css). ---- */ .skin-graphit .sugta,.skin-graphit .sugbar,.skin-graphit .sugtag,.skin-graphit .sugstat{ background:var(--canvas);border:1px solid var(--line);box-shadow:none} .skin-graphit .sugnote,.skin-graphit .sugcard,.skin-graphit .sugstat1{ background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .sugauth{border-top:1px solid var(--line)} .skin-graphit .tpmom.turn{background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-graphit .tpstrip{background:var(--inset);border:1px solid var(--line);box-shadow:none}