/* ===================================================================== SKIN „bento" — der zweite, bewusst gegensätzliche Skin. Er wirkt ausschließlich über die Klasse .skin-bento am plus CSS-Variablen; kein einziges Render-Modul wird dupliziert. Der zentrale Hebel: --lo und --hi sind die BEIDEN Schattenfarben des Neumorphism. Werden sie transparent, verschwinden auf einen Schlag ALLE weichen Doppelschatten der Basis — Form entsteht danach ausschließlich über 1px-Kanten und Flächenkontrast (Canvas ≪ Surface ≪ Inset). ===================================================================== */ html.skin-bento{ --lo:transparent; --hi:transparent; --canvas:#0e1116; --surface:#191d25; --inset:#14171d; --line:#2b313b; --line2:#3a424e; --track:#232830; --ink:#eff2f7; --ink2:#a2abba; --ink3:#6d7686; /* Kategoriale Serienfarben in fester Reihenfolge: 1 = Amber, 2 = Magenta. Bewusst NICHT das Cyan/Violett des Neo-Skins. */ --cyan:#f2a93b; --violet:#e0559b; /* Statusfarben — von den Serienfarben getrennt gehalten. */ --win:#4fd191; --loss:#ff6b5e; --amber:#f2c14e; --spike:#ff8a5e; /* Mate-Score-Skala — eigene Werte, weil --violet in diesem Skin ein Magenta der Serienfarben ist und nicht als „lila" gelesen würde. Untergrund der Pille ist hier --surface: --mate-up 5,2:1, --mate-up2 8,0:1. */ --mate-up:#b072f0; --mate-up2:#cf9dff; /* Divergenz-Skala der Heatmap: zwei Hues + neutrale Mitte. Die Mitte liegt bewusst deutlich über dem Flächenton der leeren Zelle (--hm-null). */ --hm-warm:#8f5bd6; --hm-cool:#26a89a; --hm-neut:#565e6e; --hm-null:#0d1014; --team-b:#f2a93b; --team-r:#e0559b; --grid:#232932; --axis:#333b46; /* Diagrammfarben — nur die ABWEICHUNGEN von css/tokens.css. cat1/cat2 ziehen über --cyan/--violet ohnehin mit und stehen deshalb nicht noch einmal hier; --win/--loss und die Heatmap-Skala sind Bedeutungsfarben und oben bereits gesetzt. Der Flächenton unter den Diagrammen ist in diesem Skin die EINGELASSENE Fläche und nicht die Karte: die Wells sind hier dunkler als ihr Umfeld, ein Halo in --canvas wäre ein heller Fleck auf dunklem Grund. */ --chart-surf:var(--inset); --chart-cat3:#6f9fd8; --chart-ref:#6d7686; --r:10px; --rw:8px; --gap:12px; --pad:13px; --padx:15px; } /* Dichtere Typografie und weniger Luft als im Neo-Skin. */ html.skin-bento body{font-size:13px;line-height:1.36;padding:16px 20px 56px} .skin-bento .wrap{max-width:1400px} .skin-bento .stickybar{margin:-6px -20px 0;padding:6px 20px 4px} .skin-bento h2{font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink2)} .skin-bento .sub{font-size:10.5px} .skin-bento .chead{min-height:0;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line)} .skin-bento .chead+.chead,.skin-bento .well+.chead{margin-top:12px} .skin-bento .secthead{margin:6px 2px 0} .skin-bento .secthead h3{font-size:10.5px;color:var(--cyan)} .skin-bento table{font-size:11.5px} .skin-bento th{padding:5px 7px;font-size:9.5px;border-bottom:1px solid var(--line2)} .skin-bento td{padding:5px 7px;border-bottom:1px solid var(--line)} .skin-bento .frow{min-height:31px;padding:3px 5px;border-radius:5px} .skin-bento .frow:hover{background:rgba(255,255,255,.05)} .skin-bento .fname{font-size:12px} /* ---- Flächen: flach, mit klarer 1px-Kante statt Doppelschatten ---- */ .skin-bento .card,.skin-bento .tile,.skin-bento .pcard{ background:var(--surface);border:1px solid var(--line)} .skin-bento .well,.skin-bento .swell,.skin-bento .duel,.skin-bento .rcard, .skin-bento .callout,.skin-bento .banner,.skin-bento .sess,.skin-bento .sbhead, .skin-bento .spechint{ background:var(--inset);border:1px solid var(--line);border-radius:var(--rw)} .skin-bento .chip,.skin-bento .wl,.skin-bento .pill,.skin-bento .lobby,.skin-bento .obj, .skin-bento .pbadge,.skin-bento .itile,.skin-bento .scpill,.skin-bento .modebadge, .skin-bento .bslot .bimg,.skin-bento .rchip,.skin-bento .soon .badge,.skin-bento .seg, .skin-bento select,.skin-bento .dinput,.skin-bento .acctsearch,.skin-bento .btn, .skin-bento .cmp-input input,.skin-bento .rwell.sq,.skin-bento .iwell,.skin-bento .logo{ background:var(--inset);border:1px solid var(--line);border-radius:6px;box-shadow:none} .skin-bento .seg button{border-radius:4px} .skin-bento .seg button.on{background:var(--surface);border:1px solid var(--line2); color:var(--cyan);box-shadow:none} /* ---- Kopfzeile: dieselbe Rangfolge wie im Neo-Skin ---- Die Vorwahlen verlieren auch hier ihre eigene Flaeche, damit die Reiterleiste die einzige auffaellige Knopfgruppe bleibt. In diesem Skin sind --lo/--hi transparent; die Mulde des aktiven Vorwahl-Knopfes muss deshalb als 1px-Kante kommen, sonst waere Farbe ihr einziger Kanal. */ .skin-bento .tb-prefs .seg{background:transparent;border-color:transparent} .skin-bento .tb-prefs .seg button.on{color:var(--ink);background:var(--surface); border:1px solid var(--line2)} .skin-bento .btn:active{background:var(--track)} .skin-bento .fgroup+.fgroup{border-left:1px solid var(--line);box-shadow:none} /* Runde Elemente behalten ihre Form, bekommen aber dieselbe Kante. */ .skin-bento .cicon,.skin-bento .cfall,.skin-bento .cicon2,.skin-bento .cfall2, .skin-bento .oiwell,.skin-bento .rwell,.skin-bento .avatar,.skin-bento .aopt .aav, .skin-bento .rwell.rune,.skin-bento .iwell.rune,.skin-bento .iwell.tree{ background:var(--inset);border:1px solid var(--line);box-shadow:none} .skin-bento .ftrack,.skin-bento .otrack,.skin-bento .dtrack,.skin-bento .dtrack2, .skin-bento .wrtrack{background:var(--track);box-shadow:none} .skin-bento .fbar,.skin-bento .dbar,.skin-bento .dbar2,.skin-bento .otrack .fill{border-radius:2px} /* Restliche fest verdrahtete Schatten/Akzente des Neo-Skins nachziehen. */ .skin-bento .acctmenu{background:var(--surface);border:1px solid var(--line2); border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.62)} .skin-bento .aopt.sel{box-shadow:inset 3px 0 0 0 var(--cyan);background:rgba(255,255,255,.05)} .skin-bento #tip{background:#0a0d11;border:1px solid var(--line2);border-radius:6px;box-shadow:none} .skin-bento .sbrows{border:1px solid var(--line);border-radius:8px} .skin-bento .prow+.prow{box-shadow:none;border-top:1px solid var(--line)} .skin-bento .prow:nth-child(even){background:rgba(255,255,255,.02)} .skin-bento .prow.me{background:rgba(242,169,59,.11);box-shadow:inset 3px 0 0 0 var(--cyan)} .skin-bento .prow.me:hover{background:rgba(242,169,59,.17)} .skin-bento .pbadge.mvp{color:var(--amber);background:rgba(242,193,78,.13); border-color:rgba(242,193,78,.55);box-shadow:none} .skin-bento .pbadge.ace{color:#f2a3c7;background:rgba(224,85,155,.13); border-color:rgba(224,85,155,.5);box-shadow:none} .skin-bento button.rcard:hover{box-shadow:none;border-color:var(--cyan)} .skin-bento .wrci{background:rgba(242,169,59,.26)} .skin-bento #chtbl tbody tr.on td{background:rgba(242,169,59,.12)} .skin-bento .pcard.me{outline:2px solid rgba(242,169,59,.7)} .skin-bento .sess .schip.W{background:rgba(79,209,145,.85)} .skin-bento .sess .schip.L{background:rgba(255,107,94,.8)} /* Zeilentoenung der History: schwaecher als im Neo-Skin — Begruendung an der Grundregel (`--rowwin`). */ html.skin-bento{ --rowwin:rgba(79,209,145,.046); --rowloss:rgba(255,107,94,.04) } .skin-bento .cell{height:24px;border-radius:3px} .skin-bento .hm{gap:2px} .skin-bento .cell.null{background:var(--hm-null);opacity:1; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 2px,rgba(0,0,0,0) 2px 6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .skin-bento .lgrad{border-radius:2px} /* Während des Skinwechsels sind alle Übergänge aus — sonst würden Farben aus der alten Palette in die neue überblenden. */ .skin-swap *{transition:none!important} /* ---- Mosaik-Raster: Hero-Kachel + kleine Kennzahl-Zellen ---- */ .skin-bento .tiles{grid-template-columns:repeat(4,1fr)} .skin-bento .tile{padding:10px 12px 9px;border-radius:9px} .skin-bento .tile .lbl{font-size:9px;letter-spacing:.7px} .skin-bento .tile .val{font-size:20px;font-weight:700} .skin-bento .tile .det{font-size:10.5px} /* Die Fehlerkachel bleibt auch im Mosaik lesbar: volle Breite, eigener Rand. */ .skin-bento .tile.failbox{padding:15px 17px 14px} .skin-bento .tile .spark{width:86px} /* Die vier Kacheln neben der Hero-Kachel sind zwei Rasterreihen hoch. Statt die untere Hälfte leer zu lassen, kippt ihr Inhalt in die Vertikale: Label oben, Wert darunter, Sparkline über die volle Breite am Fuß. */ .skin-bento .tile.tall{display:flex;flex-direction:column;padding-bottom:11px} .skin-bento .tile.tall .trow{flex:1;flex-direction:column;align-items:stretch; justify-content:space-between;gap:8px;margin-top:6px} .skin-bento .tile.tall .spark{width:100%;max-width:none;height:auto;margin:0} .skin-bento .tiles .tile:last-child{grid-column:span 2} .skin-bento .tile.hero{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column; padding:20px 22px 14px;border-color:var(--line2); background:linear-gradient(155deg,#232833 0%,#171b22 62%)} .skin-bento .hero .lbl{font-size:10px;color:var(--cyan)} .skin-bento .hero .hval{font-size:62px;font-weight:750;line-height:.98;letter-spacing:-.025em;margin-top:8px} .skin-bento .hero .hval small{font-size:26px;font-weight:600;color:var(--ink3);letter-spacing:0} .skin-bento .hero .hdet{font-size:12.5px;color:var(--ink2);margin-top:8px} .skin-bento .hero .hmeta{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink3);margin-top:3px} .skin-bento .hero .hmeta b.w{color:var(--win)} .skin-bento .hero .hmeta b.l{color:var(--loss)} .skin-bento .hero .spark{width:100%;max-width:none;margin:auto 0 0} /* ---- Dashboard als Bento-Raster (12 Spalten, Kacheln unterschiedlich groß) ---- */ .skin-bento #view-dash{display:grid;grid-template-columns:repeat(12,1fr); gap:var(--gap);align-items:start} .skin-bento #view-dash>*{grid-column:span 12} /* Vergleich v2 ist kein Teaser mehr, sondern eine Rangliste mit sechs Spalten je Zeile — in einer Drittel-Spalte kaeme sie nicht unter. Sie bekommt deshalb (wie die History) eine eigene volle Reihe. */ .skin-bento #view-dash>[data-b="hist"]{grid-column:span 12} .skin-bento #view-dash>[data-b="cmp"]{grid-column:span 12} .skin-bento [data-b="cmp"] .cmp-head{gap:9px} .skin-bento [data-b="cmp"] .cmp-grid{grid-template-columns:1fr;gap:9px} .skin-bento [data-b="cmp"] .cmp-head{gap:9px} /* Kompakte Match-History: die drei nachrangigen Spalten (CS, Pings, Mate) entfallen. */ .skin-bento #hist th:nth-child(4),.skin-bento #hist td:nth-child(4), .skin-bento #hist th:nth-child(8),.skin-bento #hist td:nth-child(8), .skin-bento #hist th:nth-child(10),.skin-bento #hist td:nth-child(10){display:none} /* Ohne Mate-Spalte erklaert die Mate-Legende eine Farbskala, die in diesem Skin nirgends vorkommt — sie geht mit der Spalte. */ .skin-bento .mtleg{display:none} .skin-bento #hist .cicon,.skin-bento #hist .cfall{width:22px;height:22px} .skin-bento tr.srow>td{padding:12px 2px 5px} /* ---- Stats-Tab ebenfalls als Bento statt drei gleicher Reihen ---- */ .skin-bento #view-stats{display:grid;grid-template-columns:repeat(12,1fr); gap:var(--gap);align-items:start} .skin-bento #view-stats>.secthead{grid-column:1/-1} .skin-bento #view-stats>.row3,.skin-bento #view-stats>.rowsplit, .skin-bento #view-stats .rowsplit>.stack{display:contents} /* Jede Reihe summiert sich auf 12, die Kacheln darin sind bewusst unterschiedlich breit. Die mitskalierenden SVG-Charts (Vision, Pings) bekommen nie mehr als 4 Spalten — sonst wüchsen sie in die Höhe. */ .skin-bento [data-b="dmg"]{grid-column:span 5} .skin-bento [data-b="vis"]{grid-column:span 4} .skin-bento [data-b="png"]{grid-column:span 3} .skin-bento [data-b="farm"]{grid-column:span 5} .skin-bento [data-b="roles"]{grid-column:span 3} .skin-bento [data-b="ptypes"]{grid-column:span 4} .skin-bento [data-b="obj"]{grid-column:span 4} .skin-bento [data-b="streaks"]{grid-column:span 5} .skin-bento [data-b="ff"]{grid-column:span 3} .skin-bento .recgrid{grid-template-columns:repeat(5,1fr);gap:10px} .skin-bento .recgrid.small{grid-template-columns:repeat(4,1fr)} @media(max-width:1180px){ /* Einspaltig: keine Nachbarspalte, also auch keine tote Fläche — der Deckel und das Scroll-Panel entfallen wieder. */ .skin-bento #view-dash>[data-b="hist"],.skin-bento #view-dash>[data-b="cmp"]{grid-column:span 12} .skin-bento #view-dash>[data-b="hist"]{max-height:none;display:block} .skin-bento #view-dash>[data-b="hist"] .tblwrap{overflow-y:visible} .skin-bento #view-dash>[data-b="hist"] thead th{position:static} .skin-bento [data-b="cmp"] .cmp-grid{grid-template-columns:repeat(3,1fr)} /* Je Abschnitt EINE breite Kachel (kein SVG-Chart) plus zwei halbe — so bleibt keine halbe Reihe leer, wenn nur zwei Spalten Platz haben. */ .skin-bento [data-b="dmg"],.skin-bento [data-b="farm"], .skin-bento [data-b="obj"]{grid-column:span 12} .skin-bento [data-b="vis"],.skin-bento [data-b="png"],.skin-bento [data-b="roles"], .skin-bento [data-b="ptypes"],.skin-bento [data-b="streaks"], .skin-bento [data-b="ff"]{grid-column:span 6} .skin-bento .recgrid{grid-template-columns:repeat(4,1fr)} .skin-bento .recgrid.small{grid-template-columns:repeat(3,1fr)} .skin-bento .hero .hval{font-size:52px} } @media(max-width:820px){ .skin-bento .tiles{grid-template-columns:repeat(2,1fr)} .skin-bento .tile.hero{grid-row:span 1} .skin-bento [data-b]{grid-column:span 12!important} .skin-bento .recgrid,.skin-bento .recgrid.small{grid-template-columns:repeat(2,1fr)} }