/* ---------------------------------------------------------------- * * Startseite — das, womit jede grosse LoL-Seite anfaengt: * * ein Suchfeld in der Mitte und darunter der Weg zu den Konten. * * * * Uebernommen ist die ANORDNUNG, nicht das Aussehen: * * - das Suchfeld ist der Blickfang und steht mittig oben, * * - die Region klebt LINKS IM Feld (op.gg macht das genauso), * * - unter dem Feld steht eine Zeile, die den Zustand der Suche * * erklaert, statt ihn zu verschweigen, * * - darunter die zuletzt gesuchten Namen als Chips, * * - ganz unten die getrackten Konten als Kachelraster. * * Farben, Rundungen und Schatten kommen unveraendert aus * * css/tokens.css bzw. css/skin-bento.css — kein fester Wert steht * * hier, sonst wuerde ein Skinwechsel diese Seite auslassen. * * * * Nur Desktop (Ansage des Betreibers). Es gibt hier deshalb KEINE * * Telefon-Fassung; die beiden Umbruchregeln am Ende sind kein * * Handy-Layout, sondern nur die Zusicherung, dass die Seite in * * keinem Fenster seitlich ueberlaeuft. * * ---------------------------------------------------------------- */ /* ---------- Kopfbereich mit dem Suchfeld ---------- */ /* Viel Luft nach oben und unten: das Feld soll die einzige Sache sein, die man beim Aufruf sieht. */ .home-hero{padding:52px var(--padx) 40px;text-align:center} .home-hero .hh1{font-size:27px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--ink)} .home-lead{font-size:13px;line-height:1.6;color:var(--ink3); max-width:56ch;margin:10px auto 0} /* Die Suchzeile. Region, Eingabe und Knopf sitzen in EINER Mulde — sie sind eine Bedienung, nicht drei. */ .home-search{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap; max-width:660px;margin:26px auto 0;padding:7px;border-radius:16px; box-shadow:inset 5px 5px 11px var(--lo),inset -5px -5px 11px var(--hi)} /* Regionsmarke. Die grossen Vorbilder haben hier ein Auswahlmenue; diese Seite sammelt genau EINE Region, also steht hier auch nur eine — ein Menue mit einem Eintrag waere eine Bedienzusage ohne Wirkung. */ .home-region{display:flex;align-items:center;padding:0 14px;flex:0 0 auto; font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--ink3)} .home-search input{ flex:1 1 260px;min-width:0;border:0;outline:none;background:transparent;color:var(--ink); font:inherit;font-size:16px;padding:13px 4px} .home-search input::placeholder{color:var(--ink3)} /* Ein abgeschaltetes Feld sieht abgeschaltet aus — der Satz darunter sagt, warum. Beides zusammen, nie nur eines von beidem. Am Feld allein reicht das nicht: der Platzhalter ist ohnehin schon --ink3, ein `:disabled` daran aendert also NICHTS am Bild. Gemessen am 29.07.2026 (Bild bei abgeschalteter Suche): das Feld sah voll bedienbar aus, und nur der rote Satz darunter verriet den Zustand. Deshalb traegt die ganze Mulde die Marke — Region, Feld und Knopf treten gemeinsam zurueck, wie ein ausgegrauter Bedienbereich es tun soll. */ .home-search input:disabled{color:var(--ink3);cursor:not-allowed} .home-search.off{opacity:.55;cursor:not-allowed} .home-search.off input,.home-search.off .btn{cursor:not-allowed} .home-search input.bad{color:var(--loss)} .home-search .btn{flex:0 0 auto;padding:11px 24px;font-size:13px} .home-search .btn:disabled{color:var(--ink3);cursor:not-allowed} /* Zustandszeile unter dem Feld: Kontingent, Abschaltung oder Formfehler. Sie ist nie leer, solange etwas zu sagen ist. */ .home-note{margin:14px auto 0;max-width:640px;font-size:12px;line-height:1.6;color:var(--ink2)} .home-note:empty{display:none} .home-note.err{color:var(--loss)} .home-note .why{display:block;margin-top:5px;font-size:11px;color:var(--ink3)} .home-note .n{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} .home-note.err .n{color:var(--loss)} /* ---------- Zuletzt gesucht ---------- */ .home-recent{display:flex;align-items:center;justify-content:center;gap:8px; flex-wrap:wrap;margin:20px auto 0;max-width:660px} .home-recent:empty{display:none} .home-recent .rlbl{font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.8px;color:var(--ink3)} /* Der Chip ist aussen ein mit ZWEI Knoepfen darin (Name und ×). Ein Knopf im Knopf waere ungueltig, und das × liesse sich nicht anklicken — deshalb traegt die Huelle das Aussehen und die Knoepfe darin sind unsichtbar. */ .home-rchip{display:inline-flex;align-items:center;gap:4px; background:var(--canvas);padding:4px 6px 4px 4px;border-radius:999px; box-shadow:4px 4px 9px var(--lo),-3px -3px 8px var(--hi)} .home-rchip button{border:0;background:transparent;font:inherit;font-size:12px; color:var(--ink2);cursor:pointer;padding:3px 8px;border-radius:999px} .home-rchip .rgo:hover:not(:disabled){color:var(--ink)} .home-rchip button:disabled{cursor:not-allowed;color:var(--ink3)} .home-rchip.off{opacity:.72} .home-rchip .tag{color:var(--ink3)} .home-rchip .x{padding:0;width:19px;height:19px;line-height:1;font-size:13px; display:inline-flex;align-items:center;justify-content:center;color:var(--ink3)} .home-rchip .x:hover{color:var(--loss)} /* ---------- Getrackte Konten ---------- */ /* Vier Spalten: bei genau sieben Konten ergibt das 4 + 3 und damit zwei Reihen, die beide gefuellt aussehen. Mit auto-fill waeren es je nach Skin fuenf Spalten und eine Reihe mit zwei einsamen Kacheln. Die Stufen darunter sind KEINE Telefon-Fassung — sie sind nur die Zusicherung, dass in einem schmalen Fenster nichts seitlich ueberlaeuft. */ .home-accs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1080px){ .home-accs{grid-template-columns:repeat(3,1fr)} } @media(max-width:860px){ .home-accs{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .home-accs{grid-template-columns:1fr} } .hacc{display:flex;align-items:center;gap:12px;text-align:left;width:100%; border:0;cursor:pointer;font:inherit;color:var(--ink);background:var(--canvas); padding:13px 15px;border-radius:var(--rw); box-shadow:5px 5px 12px var(--lo),-4px -4px 10px var(--hi); transition:box-shadow .15s} .hacc:hover{box-shadow:7px 7px 15px var(--lo),-5px -5px 12px var(--hi)} .hacc:active{box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)} /* Der gerade gewaehlte Account ist markiert — sonst sieht die eigene Kachel aus wie jede andere. */ .hacc.sel{box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)} .hacc.sel .hn{color:var(--cyan)} /* Ein Konto ohne ein einziges Spiel ist nicht anklickbar; der Grund steht in der Kachel, nicht in einem Hinweis, den niemand sieht. */ .hacc.off{cursor:not-allowed;opacity:.62} .hacc .hav{width:44px;height:44px;border-radius:50%;flex:0 0 auto;overflow:hidden; display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:700;color:var(--violet);background:var(--canvas); box-shadow:5px 5px 11px var(--lo),-4px -4px 9px var(--hi)} .hacc .hav img{width:100%;height:100%;object-fit:cover} /* Drei Zeilen, nicht drei Woerter: Name, Rang+LP, Spielzahl stehen untereinander. Ohne das display:block liefen sie auf breiten Kacheln zu einer einzigen Zeile zusammen. */ .hacc .hwho{min-width:0;flex:1} .hacc .hn,.hacc .hrank,.hacc .hgames{display:block} .hacc .hn{font-size:14px;font-weight:700;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hacc .hn span{color:var(--ink3);font-weight:500} /* Rang und LP stehen in EINER Zeile, LP hervorgehoben: das ist die Zahl, wegen der man auf die eigene Kachel klickt. */ .hacc .hrank{font-size:11.5px;color:var(--ink2);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hacc .hrank .lp{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} .hacc .hgames{font-size:11px;color:var(--ink3);margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hacc .hwarn{display:block;font-size:11px;color:var(--amber);margin-top:2px; white-space:normal} /* Fussnote unter dem Raster: woher die Zahlen kommen. */ .home-foot{margin-top:14px;font-size:11px;line-height:1.6;color:var(--ink3); font-variant-numeric:tabular-nums} .home-foot:empty{display:none} /* Kein Backend, keine Konten: hier steht der Grund, nicht eine leere Flaeche. */ .home-fail{padding:22px 18px;border-radius:var(--rw);font-size:12.5px;line-height:1.65; color:var(--ink2); box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)} .home-fail b{color:var(--loss);font-weight:700} /* Im Kachelraster nimmt der Grund die volle Breite — er soll gelesen werden, nicht in eine Spalte gequetscht sein (wie .tile.failbox). */ .home-accs .home-fail{grid-column:1/-1} /* Marke in der Kopfzeile ist der Rueckweg. Sie sieht deshalb anklickbar aus. */ .homelink{cursor:pointer;display:flex;align-items:center;gap:18px; border:0;background:transparent;font:inherit;color:inherit;padding:0;text-align:left} .homelink:hover .logo{color:#7ad4f0} .homelink:hover .appname{color:var(--ink)} /* ---------- Skin „bento" ---------- Dort sind --lo/--hi transparent; Form entsteht ueber Kante und Flaeche. Es sind dieselben Regeln wie fuer .card/.well/.btn in skin-bento.css, nur auf die vier neuen Flaechen dieser Seite angewandt. */ .skin-bento .home-search,.skin-bento .home-fail{ background:var(--inset);border:1px solid var(--line);border-radius:8px} .skin-bento .hacc,.skin-bento .home-rchip{ background:var(--inset);border:1px solid var(--line);border-radius:6px} .skin-bento .home-rchip{border-radius:999px} .skin-bento .hacc:hover{border-color:var(--line2)} .skin-bento .hacc.sel{background:var(--track);border-color:var(--line2)} .skin-bento .hacc .hav{background:var(--track);border:1px solid var(--line)} .skin-bento .home-hero .hh1{font-size:24px;text-transform:none;letter-spacing:0} /* Kein Handy-Layout, nur die Zusicherung „laeuft nirgends seitlich ueber". */ @media(max-width:760px){ .home-hero{padding:34px 4px 26px} .home-hero .hh1{font-size:21px} .home-search input{font-size:15px} }