/* ============================================================ forre_pulse — LFG ("Hitta spelare") Page-scoped, byggt på Pulse-tokens (--card, --line, --accent, --inset, --ink…, --r). OBS: skriv ALDRIG en stjärna följd av snedstreck i en variabellista här — den sekvensen STÄNGER kommentaren mitt i rubriken. Det var precis vad som hänt fram till 2026-08-05 (rubriken listade tokens med snedstreck emellan), och resten av huvudet tolkades då som CSS och kastades av webbläsaren. Platt · hårfina kanter · tabulära siffror · ljust default + auto [data-theme=dark]. Laddas endast på ?page=lfg (villkorlig i layouts/default.php). ============================================================ */ .lfgp a { color:inherit; text-decoration:none; } .lfgp .lfg-main { display:flex; flex-direction:column; gap:16px; min-width:0; } /* Delade knapp-/chip-primitiver (om ej redan i forre_pulse.css-scope) */ .lfgp .btn.danger { background:var(--danger-fill); color:#fff; border-color:transparent; } .lfgp .btn.danger:hover { filter:brightness(.94); } .lfg-btn-sm { padding:7px 12px; font-size:12.5px; } .lfg-btn-xs { padding:5px 9px; font-size:12px; } .lfg-block { width:100%; justify-content:center; margin-top:10px; } .lfg-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink2); background:var(--inset); border:1px solid var(--line); padding:3px 9px; border-radius:var(--r-sm); white-space:nowrap; } .lfg-chip i { color:var(--dim); font-size:11px; } .lfg-dim { color:var(--dim); font-size:13px; } .pdot { width:8px; height:8px; border-radius:50%; background:var(--live); display:inline-block; box-shadow:0 0 0 3px var(--live-wash); } /* Avatar-tile (fyrkantig i board = tät korndata-look) */ .lfg-av { flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-sm); overflow:hidden; background:var(--inset); border:1px solid var(--line2); display:grid; place-items:center; } .lfg-av img { width:100%; height:100%; object-fit:cover; } .lfg-av.noimg::after { content:attr(data-i); font-family:'Roboto'; font-weight:900; font-size:14px; color:var(--ink2); } .lfg-livedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--live); margin-left:5px; vertical-align:middle; box-shadow:0 0 0 2px var(--live-wash); animation:lfgLive 1.8s ease-out infinite; } @keyframes lfgLive { 0%{box-shadow:0 0 0 0 rgba(26,166,75,.4)} 70%{box-shadow:0 0 0 5px rgba(26,166,75,0)} 100%{box-shadow:0 0 0 0 rgba(26,166,75,0)} } @media (prefers-reduced-motion:reduce){ .lfg-livedot{animation:none} } .lfg-rkico { width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin-right:4px; } .lfg-friend { color:var(--accent); font-size:12px; margin-left:5px; } /* ── Hero ── */ .lfg-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; } .lfg-hero-txt { flex:1; min-width:220px; } .lfg-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); } .lfg-hero h1 { margin:0 0 6px; font-family:'Roboto'; font-weight:900; font-size:26px; line-height:1.05; letter-spacing:-.01em; color:var(--ink); } .lfg-hero p { margin:0; max-width:520px; color:var(--dim); font-size:13.5px; line-height:1.5; } .lfg-hero-stats { display:flex; gap:22px; } .lfg-stat { display:flex; flex-direction:column; line-height:1.05; } .lfg-stat-num { font-family:'Roboto'; font-size:24px; font-weight:900; color:var(--ink); letter-spacing:-.01em; } .lfg-stat-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); font-weight:700; margin-top:3px; } .lfg-hero-acts { display:flex; gap:8px; } /* ── Filterrad ── */ .lfg-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; } .lfg-search-box { display:flex; align-items:center; gap:8px; background:var(--inset); border:1px solid var(--line); border-radius:var(--r); padding:8px 12px; color:var(--dim); flex:1; min-width:180px; } .lfg-search-box input { border:0; background:none; outline:none; font-family:inherit; font-size:13.5px; color:var(--ink); width:100%; } .lfg-filters select { font-family:inherit; font-size:12.5px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; } .lfg-filters select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } /* ── Sektionsrubrik ── */ .lfg-sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; padding:0 2px; } .lfg-sec-head .slabel { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; } .lfg-sec-head .slabel i { color:var(--accent); } .lfg-sec-sub { font-size:11.5px; color:var(--dim); } .lfg-count { background:var(--inset); border:1px solid var(--line); color:var(--ink2); font-size:11px; padding:1px 7px; border-radius:20px; } .lfg-refresh { background:var(--inset); border:1px solid var(--line); color:var(--ink2); width:30px; height:30px; border-radius:var(--r-sm); cursor:pointer; display:grid; place-items:center; transition:.12s; } .lfg-refresh:hover { color:var(--accent); border-color:var(--line2); } .lfg-refresh.spin i { animation:lfgSpin .7s linear infinite; } @keyframes lfgSpin { to{transform:rotate(360deg)} } /* ── Toppmatchningar + Din listing (detaljerad lista) ── */ .lfg-matches, .lfg-mine-wrap { display:flex; flex-direction:column; gap:10px; } .lfg-mlist { display:flex; flex-direction:column; gap:8px; } /* Få kolumner → allt linar även i den smala mittkolumnen. All detalj ligger i spelar-cellens meta-rad (trunkeras); bara match-baren + actions är egna kolumner. */ .lfg-mrow { display:grid; grid-template-columns:22px minmax(0,1fr) 132px auto; align-items:center; gap:12px; padding:9px 14px; transition:border-color .12s, box-shadow .12s; } .lfg-mrow > * { min-width:0; } .lfg-mrow:hover { border-color:var(--line2); box-shadow:0 3px 10px rgba(16,24,40,.05); } /* "Mina poster" = ingen match-bar → rank-dot, spelare, actions. Ingen färgad kantlinje. */ .lfg-mrow.is-mine { grid-template-columns:22px minmax(0,1fr) auto; } /* (Här låg en .is-mine.has-event-regel som upprepade raden ovan ordagrant — no-op, borttagen 2026-07-25.) */ .lfg-mrow-rankchip { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:var(--ink2); background:var(--inset); border:1px solid var(--line); border-radius:20px; padding:1px 8px; vertical-align:middle; } .lfg-mrow-rankchip img { width:13px; height:13px; object-fit:contain; } .lfg-mrow-rankchip i { font-size:11px; } .lfg-msub-ico { color:var(--dim); font-size:11px; margin-right:5px; } .lfg-mrank { font-family:'Roboto'; font-weight:900; font-size:14px; color:var(--faint); text-align:center; display:grid; place-items:center; } .lfg-mrow-user { display:flex; align-items:center; gap:10px; min-width:0; } .lfg-mrow-id { min-width:0; } .lfg-mrow-id strong { display:block; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-mrow-sub { display:flex; align-items:center; font-size:11.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-mine-tag { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--live); background:var(--card); border:1px solid var(--line); padding:1px 5px; border-radius:var(--r-sm); vertical-align:middle; } .lfg-mrow-acts { display:flex; gap:6px; justify-content:flex-end; align-items:center; } /* Match-bar (rak 0-100%, tokenfärgad efter styrka) */ .lfg-mbar { display:flex; align-items:center; gap:8px; } .lfg-mbar-track { flex:1; height:7px; border-radius:20px; background:var(--inset); border:1px solid var(--line); overflow:hidden; } .lfg-mbar-fill { display:block; height:100%; border-radius:20px; background:var(--mp-c,var(--accent)); transition:width .3s ease; } .lfg-mbar-num { flex:0 0 auto; font-family:'Roboto'; font-weight:900; font-size:12.5px; color:var(--ink); width:34px; text-align:right; } .lfg-mbar.mp-champ { --mp-c:var(--champ); } .lfg-mbar.mp-elite { --mp-c:var(--elite); } .lfg-mbar.mp-dia { --mp-c:var(--dia); } .lfg-mbar.mp-plat { --mp-c:var(--plat); } .lfg-mbar.mp-low { --mp-c:var(--faint); } /* ── Board ── */ .lfg-board { display:flex; flex-direction:column; gap:10px; } .lfg-rows { display:flex; flex-direction:column; gap:8px; } /* KOMPAKT TVÅRADSRAD (2026-07-26). Sju kolumner ersatta av tre. Den gamla gridden gav den smala första kolumnen minmax(150px,1.6fr) — när rankchips, omdömen och socials lades till radbröt varje chip till en egen rad och kortet blev en 200px hög kolumn. Nu: avatar | innehåll | actions, där avataren spänner båda raderna så HÖJDEN styrs av avataren och inte av innehållet. */ .lfg-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:2px 11px; padding:9px 13px; transition:border-color .12s, box-shadow .12s; } /* Avataren spänner båda raderna → fast radhöjd oavsett innehåll. */ .lfg-row > .lfg-avl, .lfg-row > .lfg-av { grid-row:1 / 3; align-self:center; } .lfg-row .lfg-av { width:38px; height:38px; } /* Rad 1: namn + allt man fattar beslut på, som EN textrad. */ .lfg-row .lfg-r1 { grid-column:2; display:flex; align-items:baseline; gap:7px; min-width:0; } .lfg-row .lfg-r1 > strong { font-size:14px; font-weight:600; white-space:nowrap; flex:0 0 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; } .lfg-row .lfg-r1-meta { font-size:11.5px; color:var(--dim); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lfg-row .lfg-r1-meta img { width:13px; height:13px; object-fit:contain; vertical-align:-2px; margin-right:3px; } .lfg-row .lfg-mic-on { color:var(--live); } /* Rad 2: spelarens egna ord. Alltid EN rad — vill man läsa allt: expandera. */ .lfg-row .lfg-r2 { grid-column:2; font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* Actions spänner båda raderna, till höger. */ .lfg-row .lfg-row-acts { grid-column:3; grid-row:1 / 3; display:flex; align-items:center; gap:7px; } .lfg-row .lfg-kemi-n { font-size:12px; font-weight:600; color:var(--dim); white-space:nowrap; } .lfg-row .lfg-kemi-n.hi { color:var(--accent); } .lfg-row .lfg-row-mine-note { font-size:11px; color:var(--faint); white-space:nowrap; } /* Chevron + expand-läge: allt som INTE styr beslutet bor här. */ .lfg-exp-btn { flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; display:grid; place-items:center; font-size:12px; transition:background .12s, color .12s, transform .12s; } .lfg-exp-btn:hover { background:var(--inset); color:var(--ink2); } .lfg-exp-btn[aria-expanded="true"] i { transform:rotate(180deg); } .lfg-exp-btn i { transition:transform .15s; } .lfg-exp-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .lfg-exp { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px; padding-top:9px; border-top:1px solid var(--line); } .lfg-exp[hidden] { display:none; } .lfg-exp .lfg-socrow { margin-top:0; } .lfg-exp-acts { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; } /* Event-ribbon spänner hela raden (var redan grid-column 1/-1). */ .lfg-row .lfg-ev-ribbon { margin-bottom:4px; } /* Gamla kolumnerna finns kvar i "Mina poster"-raderna — inte i boarden. */ .lfg-row > .lfg-row-kd, .lfg-row > .lfg-row-region, .lfg-row > .lfg-row-mode, .lfg-row > .lfg-row-ml, .lfg-row > .lfg-row-msg, .lfg-row > .lfg-row-user { display:none; } .lfg-row-legacy-unused { display:grid; grid-template-columns:minmax(150px,1.6fr) 52px 48px minmax(110px,1fr) 60px minmax(120px,1.4fr) auto; align-items:center; gap:12px; padding:10px 14px; } .lfg-row:hover { border-color:var(--line2); box-shadow:0 3px 10px rgba(16,24,40,.05); } .lfg-row.is-hidden { display:none; } /* ── Event-ribbon på board-rader (Fortnite-event-look, färgas av lägets färg) ── */ .lfg-row.has-event { border-color:var(--line); border-color:color-mix(in srgb, var(--m, var(--accent)) 45%, var(--line)); } .lfg-ev-ribbon { grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:5px 11px; border-radius:var(--r-sm); font-size:12px; background:var(--inset); background:color-mix(in srgb, var(--m, var(--accent)) 12%, var(--card)); border:1px solid var(--line); border-color:color-mix(in srgb, var(--m, var(--accent)) 30%, var(--line)); } .lfg-ev-ribbon > i { color:var(--m, var(--accent)); font-size:13px; flex:0 0 auto; } .lfg-ev-seek { text-transform:uppercase; letter-spacing:.07em; font-size:9.5px; font-weight:800; color:var(--m, var(--accent)); flex:0 0 auto; } .lfg-ev-ribbon strong { color:var(--ink); font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .lfg-ev-when { color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; } .lfg-ev-mode { margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--ink2); background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1px 9px; white-space:nowrap; } .lfg-row-user { display:flex; align-items:center; gap:10px; min-width:0; } .lfg-row-id { min-width:0; } .lfg-row-id strong { display:block; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-row-rank { display:flex; align-items:center; font-size:11.5px; color:var(--dim); } .lfg-row-kd { font-size:13.5px; font-weight:700; color:var(--ink2); text-align:center; } .lfg-row-region { font-size:12px; font-weight:700; color:var(--ink2); text-align:center; } .lfg-row-ml { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--dim); } .lfg-row-ml .bi-mic-fill { color:var(--live); } .lfg-lang { font-size:10px; font-weight:800; color:var(--ink2); background:var(--inset); border:1px solid var(--line); padding:1px 5px; border-radius:var(--r-sm); } .lfg-row-msg { font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-row-acts { display:flex; gap:6px; justify-content:flex-end; } .lfg-empty { text-align:center; padding:44px 18px; color:var(--dim); } .lfg-empty i { font-size:30px; opacity:.5; color:var(--accent); } .lfg-empty h3 { margin:12px 0 4px; font-size:16px; color:var(--ink2); } .lfg-empty p { margin:0 0 14px; font-size:13px; } .lfg-empty[hidden] { display:none; } /* Djuplänk ?player= där posten hunnit gå ut (2026-07-26). Dämpad ton med flit: det är en förklaring, inte ett fel användaren gjort. */ .lfg-gone { margin: 0 0 12px; padding: 10px 13px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; color: var(--dim); line-height: 1.5; } /* ── Höger rail ── */ .lfg-pad { padding:14px; } .lfg-count-badge { background:var(--live-wash); color:var(--live); font-size:11px; font-weight:800; padding:1px 8px; border-radius:20px; } .lfg-mysquads { display:flex; flex-direction:column; } .lfg-mysquad { display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line); transition:background .12s; } .lfg-mysquad:last-child { border-bottom:0; } .lfg-mysquad:hover { background:var(--inset); } .lfg-sq-logo { flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-sm); overflow:hidden; background:var(--inset); border:1px solid var(--line2); display:grid; place-items:center; font-family:'Roboto'; font-weight:900; font-size:13px; color:var(--ink2); } .lfg-sq-logo img { width:100%; height:100%; object-fit:cover; } .lfg-sq-info { flex:1; min-width:0; } .lfg-sq-info strong { display:block; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-sq-tag { font-size:11px; font-weight:800; color:var(--faint); } .lfg-sq-role { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:800; } .lfg-sq-arrow { color:var(--faint); font-size:13px; } .lfg-live { display:flex; flex-direction:column; } .lfg-live-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); } .lfg-live-row:last-child { border-bottom:0; } .lfg-live-id { flex:1; min-width:0; } .lfg-live-id strong { display:block; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfg-live-pl { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--live); font-weight:600; } .lfg-events { display:flex; flex-direction:column; } .lfg-event { display:flex; align-items:center; gap:11px; padding:10px 14px; border-bottom:1px solid var(--line); transition:background .12s; } .lfg-event:last-child { border-bottom:0; } .lfg-event:hover { background:var(--inset); } .lfg-event-cal { flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; } .lfg-event-info strong { display:block; font-size:13px; color:var(--ink); } /* ── Nästa event — live countdown ── */ .lfg-next-event { padding:15px 16px; } .lfg-ne-kicker { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:var(--accent); margin-bottom:6px; } .lfg-ne-title { font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.25; margin-bottom:11px; } .lfg-ne-clock { display:flex; gap:7px; margin-bottom:13px; } .lfg-ne-unit { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 4px; } .lfg-ne-unit b { font-size:19px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; } .lfg-ne-unit small { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); } .lfg-ne-livenow { color:var(--live); font-weight:800; font-size:13px; } .lfg-ne-cta { width:100%; justify-content:center; display:inline-flex; align-items:center; gap:7px; } /* ── Event-chips (filtrera boarden på event) ── */ .lfg-evchips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:11px 14px; } .lfg-evchips-lbl { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink2); } .lfg-evchips-lbl i { color:var(--accent); } .lfg-evchip { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12px; font-weight:600; color:var(--ink2); background:var(--inset); border:1px solid var(--line); border-radius:20px; padding:5px 11px; cursor:pointer; transition:.12s; white-space:nowrap; } .lfg-evchip:hover { border-color:var(--line2); color:var(--ink); } .lfg-evchip.is-active { background:var(--accent); border-color:var(--accent); color:#fff; } .lfg-evchip-n { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; font-size:10.5px; font-weight:800; border-radius:20px; background:rgba(0,0,0,.14); } .lfg-evchip.is-active .lfg-evchip-n { background:rgba(255,255,255,.28); } /* ── Event-badge på boardrader ── */ .lfg-ev-badge { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; color:var(--accent); background:var(--accent-wash); border-radius:var(--r-sm); padding:1px 6px; margin-right:5px; white-space:nowrap; vertical-align:middle; } .lfg-ev-badge i { font-size:10px; } /* ── Spelläges-badge (event) ── */ .lfg-mode-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--ink2); background:var(--inset); border:1px solid var(--line); border-radius:20px; padding:2px 9px; white-space:nowrap; } .lfg-mode-badge i { font-size:10.5px; color:var(--accent); } .lfg-mode-badge.sm { font-size:10px; padding:1px 7px; } .lfg-mode-badge.solo i { color:var(--dim); } .lfg-ne-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; } .lfg-ne-solonote { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink2); background:var(--inset); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; } .lfg-ne-solonote i { color:var(--dim); } .lfg-event-sub { display:flex; align-items:center; flex-wrap:wrap; gap:6px; } /* ── Mina poster (multi-post, upp till 3) ── */ .lfg-myposts { display:flex; flex-direction:column; gap:8px; } /* ── Seeker-förslag i skapa-modalen ── */ .lfg-seekers { display:flex; flex-direction:column; gap:7px; margin:0 0 2px; padding:10px; background:var(--inset); border:1px solid var(--line); border-radius:var(--r-sm); } .lfg-seek-head { font-size:11.5px; font-weight:700; color:var(--ink2); line-height:1.35; } .lfg-seek-load, .lfg-seek-empty { font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px; } .lfg-seeker { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; } .lfg-seek-id { min-width:0; display:flex; flex-direction:column; gap:1px; } .lfg-seek-id strong { font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:4px; } .lfg-seek-meta { font-size:10.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; } .lfg-seek-acts { display:flex; gap:5px; flex:0 0 auto; } .lfg-btn-xs.is-in { opacity:.6; pointer-events:none; } .lfg-share { display:flex; gap:8px; margin-top:10px; } .lfg-sh { flex:1; height:36px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--inset); color:var(--ink2); display:grid; place-items:center; cursor:pointer; font-size:15px; transition:.12s; } .lfg-sh:hover { border-color:var(--line2); color:var(--accent); } .lfg-sh.x:hover { color:var(--ink); } .lfg-sh.fb:hover { color:#1877f2; } .lfg-sh.wa:hover { color:#25d366; } /* ── Modaler ── */ .lfgmodal { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(11,15,20,.5); backdrop-filter:blur(2px); } .lfgmodal.is-open { display:flex; } .lfgm-card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--line2); border-radius:var(--r); box-shadow:0 24px 60px rgba(16,24,40,.28); overflow:hidden; animation:lfgPop .14s ease-out; } @keyframes lfgPop { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } .lfgm-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); } .lfgm-head h3 { margin:0; font-family:'Roboto'; font-weight:900; font-size:17px; color:var(--ink); } .lfgm-x { background:none; border:0; color:var(--dim); cursor:pointer; font-size:18px; } .lfgm-x:hover { color:var(--ink); } .lfgm-body { padding:16px 18px; display:flex; flex-direction:column; gap:13px; } .lfgm-row { display:flex; gap:12px; } .lfgm-row .lfgm-lbl { flex:1; } .lfgm-lbl { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--ink2); } .lfgm-lbl select, .lfgm-lbl input[type=text], .lfgm-lbl textarea { font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; width:100%; } .lfgm-lbl textarea { min-height:74px; resize:vertical; } .lfgm-lbl select:focus, .lfgm-lbl input:focus, .lfgm-lbl textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } .lfgm-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink2); cursor:pointer; } .lfgm-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; } .lfgm-foot .btn { min-width:120px; justify-content:center; } /* ── Toast ── */ .lfg-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1300; background:var(--board-bg); color:var(--board-ink); font-size:13px; font-weight:600; padding:11px 18px; border-radius:var(--r); box-shadow:0 10px 30px rgba(16,24,40,.3); max-width:90vw; } .lfg-toast[hidden] { display:none; } .lfg-toast.err { background:var(--danger-fill); } /* ── Responsivt ── */ @media (max-width:900px) { .lfg-hero { flex-direction:column; align-items:flex-start; } .lfg-hero-stats { width:100%; justify-content:space-between; } /* Tvåradsgriden håller på mobil också — bara smalare avatar och tightare luft. Ingen omflödning: hela poängen är att alla rader är lika höga. */ .lfg-row { grid-template-columns:32px minmax(0,1fr) auto; gap:2px 9px; padding:8px 11px; } .lfg-row .lfg-av { width:32px; height:32px; } .lfg-row .lfg-r1 > strong { max-width:52%; } .lfg-row .lfg-exp-acts { margin-left:0; flex-basis:100%; } /* Beskrivningslösa poster: göm gråtexten i st f att lägga till brus. Raden behåller sin höjd ändå (avataren spänner båda raderna). */ .lfg-row .lfg-r2 .lfg-dim { visibility:hidden; } .lfg-mrow, .lfg-mrow.is-mine { grid-template-columns:22px 1fr; grid-auto-flow:row; gap:8px 12px; } .lfg-mrow .lfg-mbar { grid-column:1 / -1; } .lfg-mrow-acts { grid-column:1 / -1; justify-content:flex-start; } } /* ── Gruppchatt (slide-in drawer, messenger-stil) ── */ .lfg-chat-scrim { position:fixed; inset:0; z-index:1300; background:rgba(11,15,20,.4); } .lfg-chat { position:fixed; top:0; right:0; z-index:1310; width:380px; max-width:92vw; height:100dvh; background:var(--card); border-left:1px solid var(--line2); box-shadow:-14px 0 40px rgba(16,24,40,.18); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1); } .lfg-chat.is-open { transform:translateX(0); } .lfg-chat-head { display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line); flex:0 0 auto; } .lfg-chat-ic { width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; font-size:15px; } .lfg-chat-ti { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; } .lfg-chat-ti strong { font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lfg-chat-sub { font-size:11px; color:var(--dim); } .lfg-chat-x { flex:0 0 auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--inset); color:var(--ink2); cursor:pointer; display:grid; place-items:center; } .lfg-chat-x:hover { color:var(--ink); border-color:var(--line2); } .lfg-chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; } .lfg-chat-empty { margin:auto; color:var(--dim); font-size:13px; text-align:center; } .lfg-msg { display:flex; flex-direction:column; align-items:flex-start; max-width:82%; } .lfg-msg.is-me { align-self:flex-end; align-items:flex-end; } .lfg-msg-au { font-size:10.5px; font-weight:700; color:var(--ink2); margin:0 0 2px 2px; } .lfg-msg-bub { font-size:13px; line-height:1.4; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:14px; padding:7px 11px; word-break:break-word; } .lfg-msg.is-me .lfg-msg-bub { background:var(--accent); border-color:var(--accent); color:#fff; } .lfg-msg-t { font-size:9.5px; color:var(--dim); margin:2px 4px 0; } .lfg-chat-input { flex:0 0 auto; display:flex; gap:8px; align-items:flex-end; padding:11px 13px; border-top:1px solid var(--line); } .lfg-chat-input textarea { flex:1; resize:none; max-height:96px; font-family:inherit; font-size:13px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:12px; padding:9px 12px; outline:none; } .lfg-chat-input textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } .lfg-chat-send { flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0; background:var(--accent); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:15px; } .lfg-chat-send:hover { filter:brightness(1.06); } .lfg-grp-ico { color:var(--accent); font-size:14px; } @media (max-width:520px){ .lfg-chat{ width:100vw; max-width:100vw; } } /* ============================================================ Hitta spelare (2026-07-16): FORRE-placering, DNA-kemi, Spela-ping, scout-modal. Tokenfärger (accent/gold) — funkar i ljust OCH mörkt tema, medvetet inget lila (Kentas notering; lila reserveras för Champion-rank). ============================================================ */ .lfg-lbpos { display:inline-block; margin-left:6px; font-size:10px; font-weight:800; color:var(--gold); letter-spacing:.02em; white-space:nowrap; } .lfg-lbpos::before { content:"FORRE "; font-size:8.5px; letter-spacing:.08em; color:var(--dim); } .lfg-kemichip { display:inline-block; margin-left:7px; font-size:10px; font-weight:800; padding:1px 7px; border-radius:20px; background:var(--accent-wash); color:var(--accent-ink); white-space:nowrap; } .lfg-kemichip.hi { background:var(--live-wash); color:var(--live); } .lfg-kemichip.low { background:var(--inset); color:var(--dim); } .lls-kemi { font-size:10.5px; font-weight:800; color:var(--accent-ink); } .lls-ping { border:0; background:none; color:var(--accent); cursor:pointer; font-size:13px; padding:0 2px; line-height:1; } .lls-ping:hover { color:var(--accent-ink); } .lls-ping.is-in, [data-lfg-ping].is-in { opacity:.45; pointer-events:none; } .lfg-ne-place { font-size:11.5px; font-weight:700; color:var(--gold); margin:2px 0 6px; } .lfg-ne-place i { margin-right:4px; } .lfg-scout-body { display:flex; flex-direction:column; gap:0; } .lfg-scout-load { padding:18px 4px; text-align:center; color:var(--dim); font-size:13px; } .lfg-scout-pct { text-align:center; padding:4px 0 12px; } .lfg-scout-pct .n { display:block; font-weight:900; font-size:34px; line-height:1; color:var(--accent-ink); } .lfg-scout-pct .l { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } .lfg-scout-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:12.5px; color:var(--ink2); } .lfg-scout-row b { color:var(--ink); text-align:right; font-weight:700; } .lfg-scout-sum { margin-top:10px; font-size:12.5px; color:var(--dim); line-height:1.5; } /* ============================================================ Hitta spelare etapp 2 (2026-07-16): inbäddad DNA-swipe + vän-förslag. Tokenfärger, funkar i båda temana. ============================================================ */ .lfg-swipe-card { max-width: 400px; } .lfg-swipe-modes { display:flex; gap:2px; background:var(--inset); border:1px solid var(--line); border-radius:30px; padding:2px; margin-left:auto; margin-right:10px; } .lfg-swipe-mode { border:0; background:none; cursor:pointer; padding:4px 12px; border-radius:30px; font-weight:800; font-size:11.5px; color:var(--dim); } .lfg-swipe-mode.is-active { background:var(--accent); color:#fff; } .lfg-swipe-body { min-height: 240px; } .lfg-swipe-load { padding:40px 10px; text-align:center; color:var(--dim); font-size:13px; } .lfg-swipe-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .lfg-swipe-av { width:52px !important; height:52px !important; } .lfg-swipe-id { flex:1; min-width:0; display:flex; flex-direction:column; } .lfg-swipe-id strong { font-size:15px; } .lfg-swipe-id .sub { font-size:11.5px; color:var(--dim); } .lfg-swipe-pct { font-weight:900; font-size:26px; color:var(--accent-ink); flex:0 0 auto; } .lfg-swipe-axes { display:flex; flex-direction:column; gap:7px; } .lfg-swipe-axis { display:grid; grid-template-columns:86px 1fr 30px; align-items:center; gap:9px; font-size:11px; color:var(--ink2); } .lfg-swipe-axis .bar { position:relative; height:7px; background:var(--inset); border:1px solid var(--line); border-radius:20px; overflow:visible; } .lfg-swipe-axis .bar i { display:block; height:100%; background:var(--accent); border-radius:20px; } .lfg-swipe-axis .bar b { position:absolute; top:-3px; width:3px; height:11px; border-radius:2px; background:var(--gold); transform:translateX(-50%); } .lfg-swipe-axis .val { font-weight:800; text-align:right; } .lfg-swipe-reason { margin-top:11px; font-size:12px; color:var(--dim); line-height:1.5; } .lfg-swipe-count { margin-top:9px; font-size:10.5px; color:var(--faint); text-align:center; } .lfg-swipe-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } .lfg-swipe-btn { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:19px; display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .12s; } .lfg-swipe-btn:hover { transform:scale(1.07); } .lfg-swipe-btn.no { color:var(--danger); } .lfg-swipe-btn.yes { color:var(--live); } .lfg-swipe-full { font-size:11.5px; font-weight:700; color:var(--accent-ink); text-decoration:none; } .lfg-swipe-full:hover { text-decoration:underline; } .lfg-fp { padding:11px 14px; } .lfg-fp-head { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px; } .lfg-fp-head i { margin-right:5px; } .lfg-fp-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed var(--line); flex-wrap:wrap; } .lfg-fp-row:first-of-type { border-top:0; } .lfg-fp-txt { flex:1; min-width:180px; font-size:13px; color:var(--ink2); } .lfg-fp-acts { display:flex; gap:6px; } /* ============================================================ Hitta spelare etapp 3 (2026-07-16): co-play-frågan + Ditt gäng. ============================================================ */ .lfg-cp { padding:11px 14px; } .lfg-cp-head { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--live); margin-bottom:8px; } .lfg-cp-head i { margin-right:5px; } .lfg-cp-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed var(--line); flex-wrap:wrap; } .lfg-cp-row:first-of-type { border-top:0; } .lfg-cp-txt { flex:1; min-width:200px; font-size:13px; color:var(--ink2); } .lfg-cp-acts { display:flex; gap:6px; } .lfg-cp-stars { display:inline-flex; gap:3px; } .lfg-cp-star { border:0; background:none; cursor:pointer; font-size:17px; color:var(--dim); padding:2px; line-height:1; } .lfg-cp-star.is-on { color:var(--gold); } .lfg-cp-comment { flex:1; min-width:150px; font-family:inherit; font-size:12.5px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:var(--r); padding:6px 10px; outline:none; } .lfg-cp-comment:focus { border-color:var(--accent); } .lfg-gang .lfg-gang-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .lfg-gang-avs { display:flex; } .lfg-gang-avs .lfg-av { width:32px; height:32px; border-radius:50%; margin-left:-8px; border:2px solid var(--card); } .lfg-gang-avs .lfg-av:first-child { margin-left:0; } .lfg-gang-info { flex:1; min-width:0; display:flex; flex-direction:column; } .lfg-gang-info strong { font-size:12.5px; line-height:1.3; } .lfg-gang-sub { font-size:11px; color:var(--dim); } .lfg-gang-on { color:var(--live); font-weight:700; } .lfg-gang-acts { display:flex; gap:7px; flex-wrap:wrap; } [data-lfg-gang-ping].is-in { opacity:.55; pointer-events:none; } /* ============================================================ Fix 2026-07-16: ansökningskö på Mina poster + egen rad i boarden. ============================================================ */ .lfg-reqs { width:100%; border-top:1px dashed var(--line); margin-top:10px; padding-top:9px; } .lfg-req-head { font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .lfg-req-cap { font-weight:700; font-size:10.5px; color:var(--dim); text-transform:none; letter-spacing:0; margin-left:auto; } .lfg-req-row { display:flex; align-items:center; gap:9px; padding:6px 0; flex-wrap:wrap; } .lfg-req-id { flex:1; min-width:150px; display:flex; flex-direction:column; line-height:1.3; } .lfg-req-meta { font-size:11px; color:var(--dim); } .lfg-req-acts { display:flex; gap:6px; } .lfg-row-mine-note { font-size:11px; color:var(--dim); font-style:italic; white-space:nowrap; } .lfg-flash { animation: lfgflash 1.3s ease-in-out 2; } @keyframes lfgflash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--accent); } } @media (prefers-reduced-motion: reduce){ .lfg-flash { animation:none; outline:2px solid var(--accent); } } /* ============================================================ Fix 2026-07-16 (Kentas skärmdumpar): (1) platser-raden i Mina poster blev en smal ordkolumn — .lfg-reqs är ett grid-item och måste spänna alla kolumner. (2) Ranken bröts till två rader i boarden — rank-texten är nu en nowrap-enhet och chipsen radbryts som hela enheter. ============================================================ */ .lfg-mrow .lfg-reqs { grid-column: 1 / -1; } .lfg-req-cap { white-space: nowrap; } .lfg-reqs > .lfg-req-cap:only-child { padding: 2px 0; } .lfg-row-rank { flex-wrap: wrap; column-gap: 8px; row-gap: 3px; line-height: 1.35; } .lfg-rk-txt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .lfg-row-rank .lfg-lbpos, .lfg-row-rank .lfg-kemichip { margin-left: 0; } /* (LFG-dropdownens stilar bor nu i pulse-topbar.php:s styleblock, 2026-07-16) */ /* ============================================================ ETAPP 1+2 (2026-07-25) — "ingen återvändsgränd" + kontaktytan 1) .lfg-avl: avataren är nu en profillänk. Får INTE ändra .lfg-av:s geometri — wrappern är ren layout-neutral (line-height:0 dödar inline-baslinjens extraspace) + synlig fokusring för tangentbord. 2) .lfg-socrow/.lfg-soc: sociala kontaktvägar per spelarkort. 3) .lfg-livepill: sänder-just-nu (StreamService-sanning, ej presence). ============================================================ */ .lfg-avl { display:inline-block; flex:0 0 auto; line-height:0; border-radius:10px; text-decoration:none; color:inherit; } .lfg-avl:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* .lfg-av är `display:grid; place-items:center` — initialerna i .noimg::after centreras av det. Wrappern får INTE platta till det (display:block skulle slå ut gridet, och line-height:0 ärvs ned och klipper initialerna i överkant). */ .lfg-avl > .lfg-av { line-height:normal; } /* "Ditt gäng": avatarerna överlappar via margin-left:-8px med :first-child-undantag. Nu ligger varje .lfg-av ensam i sin -wrapper → :first-child matchade ALLA och stacken blev en rak rad. Marginalen flyttas därför till wrappern. */ .lfg-gang-avs > * { margin-left:-8px; } .lfg-gang-avs > *:first-child { margin-left:0; } /* Kontaktrad — kompakt, bryter aldrig kortets grid. OBS specificitet: rad 8 sätter `.lfgp a { color:inherit }` (0,1,1). Färg- deklarationerna nedan MÅSTE därför scopas med .lfgp (0,2,0), annars äter den regeln både chip-färgen och LIVE-pillens vita text (röd pill + mörk text). */ .lfg-socrow { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; } .lfgp .lfg-soc { display:inline-flex; align-items:center; gap:4px; max-width:150px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; background:var(--inset); color:var(--ink2); font-size:10.5px; font-weight:700; line-height:1.6; text-decoration:none; cursor:pointer; transition:background .12s, border-color .12s, color .12s; } .lfgp .lfg-soc i { font-size:11px; color:var(--sc,var(--dim)); flex:0 0 auto; } .lfgp .lfg-soc .lfg-soc-h { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfgp .lfg-soc:hover { background:var(--sc,var(--accent)); border-color:var(--sc,var(--accent)); color:#fff; } .lfgp .lfg-soc:hover i { color:#fff; } .lfgp .lfg-soc:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .lfgp .lfg-soc-ver { font-size:9px; color:var(--accent); flex:0 0 auto; } .lfgp .lfg-soc:hover .lfg-soc-ver { color:#fff; } /* LIVE-pill — sänder NU (StreamService). Skild från .lfg-livedot = spelar Fortnite nu. */ .lfgp .lfg-livepill { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:6px; padding:1px 7px; border-radius:999px; background:#e91916; color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.02em; text-decoration:none; white-space:nowrap; } .lfgp .lfg-livepill--twitch { background:#9146ff; } .lfgp .lfg-livepill--kick { background:#53fc18; color:#0b1211; } .lfgp .lfg-livepill--youtube{ background:#ff0000; } .lfgp .lfg-livepill:hover { filter:brightness(1.08); } .lfgp .lfg-livepill .llp-dot { width:5px; height:5px; border-radius:50%; background:currentColor; animation:lfgLivePulse 1.6s ease-in-out infinite; } .lfgp .lfg-livepill .llp-vc { opacity:.85; font-size:9px; } @keyframes lfgLivePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } @media (prefers-reduced-motion: reduce){ .lfg-livepill .llp-dot { animation:none; } } /* Seeker-förslagen i skapa-modalen fick avatar (saknade den helt). */ .lfg-seeker { display:flex; align-items:center; gap:9px; } .lfg-seeker .lfg-seek-id { min-width:0; flex:1 1 auto; } /* Chattens författarnamn är nu en profillänk — ärver färgen, accent på hover. */ .lfg-msg-aul { color:inherit; text-decoration:none; } .lfg-msg-aul:hover { color:var(--accent); text-decoration:underline; } /* ── Etapp 3 (2026-07-26): "därför just hen" + gratisfält ────────────── Meningen är kortets viktigaste rad — den ska läsas, inte trunkeras. Därför egen rad med normal radbrytning (till skillnad från .lfg-mrow-sub som är nowrap + ellipsis). */ .lfgp .lfg-why { display:flex; align-items:flex-start; gap:5px; margin-top:4px; font-size:11.5px; font-weight:600; line-height:1.4; color:var(--ink2); white-space:normal; } .lfgp .lfg-why i { color:var(--accent); font-size:10.5px; margin-top:2px; flex:0 0 auto; } /* Metaraden bär nu fler chips än den rymmer på en rad (verifierade omdömen, wins, topprank, förfrågan-skickad, Epic-chips, LIVE). Den var `white-space:nowrap` + `overflow:hidden` + ellipsis (rad 85) → allt efter K/D hade klippts bort UTAN att synas. Samma lösning som .lfg-row-rank fick 2026-07-16: låt raden radbryta. Scopad till .lfg-mlist: "Mina poster" och "Grupper jag är med i" använder samma klass men har kort innehåll och ska behålla sin ellips. */ .lfgp .lfg-mlist .lfg-mrow-sub { flex-wrap:wrap; white-space:normal; row-gap:3px; overflow:visible; text-overflow:clip; } /* Toppen förra säsongen + "förfrågan skickad" — dämpade, ska inte tävla med rank. */ .lfgp .lfg-peak, .lfgp .lfg-pending { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:6px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); background:var(--inset); font-size:9.5px; font-weight:700; color:var(--dim); white-space:nowrap; } .lfgp .lfg-pending { color:var(--ink2); } /* .lfg-row-rank har redan column-gap:8px → nolla marginalen där, precis som .lfg-lbpos/.lfg-kemichip gör, annars blir det 14px mellan chipsen. */ .lfgp .lfg-row-rank .lfg-pending, .lfgp .lfg-row-rank .lfg-peak { margin-left:0; } /* Metaraden radbryter nu → hindra att "(3 verifierade)" bryts mitt i parentesen. */ .lfgp .lfg-mm-dim { color:var(--dim); font-weight:600; white-space:nowrap; } /* Rykte på boardraden: betyg + ANTAL. Antalet är hela poängen — "★5.0 av ett omdöme" och "★4.6 av trettio" är inte samma sak. */ .lfgp .lfg-rep { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); background:var(--inset); font-size:10px; font-weight:700; color:var(--ink2); white-space:nowrap; } .lfgp .lfg-rep .lfg-mm-dim { font-size:9px; } /* Mobil: kontaktraden är det viktigaste på kortet — den får ALDRIG döljas (till skillnad från region/mic som göms under 900px). */ @media (max-width:900px){ .lfg-socrow { margin-top:5px; } .lfgp .lfg-soc { max-width:118px; } } /* ============================================================ ANSÖKNINGSSTATUS (D1, 2026-07-26) Ersätter Ansök-knappen när man redan sökt. Tre tillstånd, samma form som knappen den ersätter så raden inte hoppar i höjd. ============================================================ */ .lfgp .lfg-reqst { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--inset); font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; line-height:1.4; } .lfgp .lfg-reqst i { font-size:11px; } .lfgp .lfg-reqst.accepted { color:var(--live); border-color:color-mix(in srgb, var(--live) 35%, var(--line)); } .lfgp .lfg-reqst.rejected { color:var(--ink2); } .lfgp .lfg-reqst-age { color:var(--faint); font-weight:500; } .lfgp .lfg-reqst-why { color:var(--dim); font-weight:500; } /* Orsaken kan bli lång — göm den på smala skärmar, title= bär den ändå. */ @media (max-width:700px){ .lfgp .lfg-reqst-why { display:none; } } .lfgp .lfg-myreq-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .lfgp .lfg-myreq-hint { flex-basis:100%; font-size:11px; color:var(--dim); } /* Avslutad gruppchatt: läsbar men låst, med nedräkning till radering. OBS: chatt-drawern ligger UTANFÖR .lfgp (den är portalerad till body), därför ingen .lfgp-prefix här. */ .lfg-chat-closed { flex:0 0 auto; margin:0; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--inset); color:var(--ink2); font-size:11.5px; line-height:1.5; } .lfg-chat-closed i { color:var(--dim); margin-right:4px; } .lfg-chat-closed b { color:var(--ink); font-weight:700; } .lfg-chat-closed-hint { display:block; color:var(--dim); margin-top:2px; } .lfg-chat .is-locked { opacity:.55; } .lfg-chat textarea[disabled] { cursor:not-allowed; } /* ============================================================ FLIKAR (2026-07-26) — "Alla som söker" / "Bäst för dig" / "Live nu" Ersätter det separata Toppmatchningar-blocket. Pillerform, samma höjd som .lfg-refresh, aktiv flik = fylld. ============================================================ */ .lfgp .lfg-tabbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .lfgp .lfg-tabs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .lfgp .lfg-tabs-hint { color:var(--dim); font-size:11px; } @media (max-width:700px){ .lfgp .lfg-tabs-hint { display:none; } } .lfgp .lfg-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:12.5px; font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s; } .lfgp .lfg-tab i { font-size:12px; } .lfgp .lfg-tab:hover { border-color:var(--line2); background:var(--inset); } .lfgp .lfg-tab.is-active { background:var(--ink); border-color:var(--ink); color:var(--card); } .lfgp .lfg-tab.is-active .lfg-count { background:rgba(255,255,255,.18); color:inherit; } .lfgp .lfg-tab .lfg-count { margin-left:2px; } .lfgp .lfg-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .lfgp .lfg-tabbar .lfg-refresh { margin-left:auto; } /* KRITISKT: `hidden` är en UA-regel (`[hidden]{display:none}`) och förlorar mot VARJE författar-`display:`. `.lfg-rows` (rad 100) och `.lfg-matches` (rad 67) har `display:flex` → utan detta syns matchpanelen direkt vid sidladdning (= den dubbla listan tillbaka) och "Bäst för dig" döljer inga board-rader. */ .lfgp [data-lfg-filters][hidden], .lfgp [data-lfg-evchips][hidden], .lfgp .lfg-rows[hidden], .lfgp .lfg-matches[hidden] { display:none; } /* ============================================================ TYPOGRAFI-STÄDNING (2026-07-26, Kentas beslut "stilrent") Problemet var inte färgerna utan hierarkin: namn, rank, K/D, region och fem chips låg alla på ~11-13px och tävlade om samma uppmärksamhet, så raden läste sig som en ordlista i stället för en person. Tre grepp, ingen ny palett: 1. NAMNET får tydligt försprång (15px) — det är det man scannar efter. 2. Allt sekundärt sjunker till 11.5px och --dim, en enda nivå. 3. Chipsen blir tystare (tunnare kant, ingen fyllning som ropar) och får gemensam höjd så raden inte hoppar. ============================================================ */ .lfgp .lfg-row-id strong { font-size:15px; font-weight:600; letter-spacing:-.005em; } .lfgp .lfg-row-id .pl-name { font-weight:600; } .lfgp .lfg-row-rank { font-size:11.5px; color:var(--dim); margin-top:2px; } .lfgp .lfg-row-kd { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; } .lfgp .lfg-row-region { font-size:11.5px; font-weight:600; color:var(--dim); } .lfgp .lfg-row-msg { font-size:12.5px; color:var(--ink2); } /* Chipsen: en gemensam tystare grundton. Rank-ikonen och LIVE behåller sin färg — de betyder något. Resten ska synas först när man läser raden. */ /* `border:1px solid`, inte bara border-color: .lfg-lbpos och .lfg-kemichip har ingen border i basen, så enbart border-color hade varit en no-op och lämnat dem som naken text utan pillform. */ .lfgp .lfg-lbpos, .lfgp .lfg-kemichip, .lfgp .lfg-rep, .lfgp .lfg-peak, .lfgp .lfg-pending { font-size:10px; font-weight:600; line-height:1.7; border:1px solid var(--line); background:transparent; color:var(--dim); border-radius:999px; padding:1px 8px; } /* Hög kemi är en signal värd att se — den enda som får behålla accentfärg. */ .lfgp .lfg-kemichip.hi { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); } /* Luftigare rader — tätheten var det som fick sidan att kännas plottrig. */ .lfgp .lfg-row { padding-top:11px; padding-bottom:11px; } .lfgp .lfg-mrow { padding-top:11px; padding-bottom:11px; } .lfgp .lfg-row-user, .lfgp .lfg-mrow-user { gap:11px; } /* ============================================================ MOBIL: högerrailen viks in i huvudkolumnen (2026-07-26) Ersätter den tidigare .lfg-mobrail-speglingen. Den duplicerade markup för "Ditt gäng" + nästa event i
— två ställen att hålla i synk, och Kenta såg dem som dubbletter i koden. Samma mönster som tracker-sidan redan använder (pulse-tracker.css:331): sid-scopat un-hide av railen i st f kopierad DOM. Bonus: squad-kortet, kommande events och dela-kortet kommer också tillbaka på telefon. .rail.right döljs av den GLOBALA shell-regeln (forre_pulse.css:561) som inte får röras — därför scopar vi med .lfgp och samma 820px-brytpunkt. ============================================================ */ @media (max-width:820px){ /* display:contents i st f flex: railen försvinner som box och dess KORT blir egna grid-items i .shell. Då kan de ordnas individuellt — annars hade hela railen legat i klump allra sist, efter boarden, och "Ditt gäng" varit lika osynligt som när den var helt dold. */ .lfgp .rail.right { display:contents; } .lfgp .rail.right > * { position:static; top:auto; max-height:none; overflow:visible; } /* De två handlingstäta korten upp direkt efter hero; resten ligger kvar sist. */ .lfgp .rail.right .lfg-gang { order:-2; } .lfgp .rail.right .lfg-next-event { order:-1; } /* "Spelar nu"-kortet dubblerar live-strippen som redan ligger i
. Strippen är kompaktare och har ping+messa → behåll den, göm kortet. */ .lfgp .rail.right .lfg-livecard { display:none; } /* Railen är byggd för en 320px-kolumn — i huvudkolumnen blir korten breda. */ .lfgp .rail.right .lfg-ne-unit b { font-size:19px; } .lfgp .rail.right .lfg-ne-clock { gap:6px; } } /* ============================================================ "BÄST FÖR DIG" — RASTER-RAD (.lfg-m2), 2026-07-26, Kentas val Problemet: .lfg-mrow är ett grid, men mittcellen staplade fem block vertikalt (namn, metarad m flex-wrap, why-text, socials, Epic-chips). Höjden styrdes alltså av HUR MYCKET spelaren hade — 120-180px per kort och olika höjd för varje person. Listan fick ingen rytm. Lösningen: fasta kolumner. Rank hamnar under rank, K/D under K/D, så listan går att jämföra lodrätt i stället för att läsas kort för kort. Exakt två rader, ~61px fast höjd. Allt övrigt bakom chevronen. SCOPE: .lfg-m2 sätts BARA på matchraderna i .lfg-mlist. "Mina poster" och "Grupper jag är med i" använder samma .lfg-mrow-bas och ska INTE påverkas — därför en extra klass i stället för att skriva om basen. ============================================================ */ .lfgp .lfg-m2 { display:grid; grid-template-columns:18px 32px minmax(72px,1fr) 88px 42px 92px auto; grid-template-rows:auto auto; align-items:center; gap:2px 9px; } /* Avataren spänner båda raderna → radhöjden ägs av avataren, inte av texten. */ .lfgp .lfg-m2 > .lfg-avl, .lfgp .lfg-m2 > .lfg-av { grid-column:2; grid-row:1 / 3; align-self:center; } .lfgp .lfg-m2 .lfg-av { width:32px; height:32px; } .lfgp .lfg-m2 .m2-num { grid-column:1; grid-row:1 / 3; font-weight:900; font-size:12.5px; color:var(--faint); text-align:center; } .lfgp .lfg-m2 .m2-nm { grid-column:3; grid-row:1; display:flex; align-items:center; gap:4px; min-width:0; } .lfgp .lfg-m2 .m2-nm strong { font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Namnet är det enda som får krympa i cellen — utan detta klämmer en lång LIVE-pill ihop sig och radbryter i stället för att korta namnet. */ .lfgp .lfg-m2 .m2-nm .lfg-livedot, .lfgp .lfg-m2 .m2-nm .lfg-livepill { flex:0 0 auto; margin-left:0; } .lfgp .lfg-m2 .m2-rank { grid-column:4; grid-row:1; font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lfgp .lfg-m2 .m2-kd { grid-column:5; grid-row:1; font-size:13px; font-weight:600; color:var(--ink2); text-align:right; } .lfgp .lfg-m2 .m2-bar { grid-column:6; grid-row:1; display:flex; align-items:center; gap:7px; } .lfgp .lfg-m2 .m2-bar .lfg-mbar-track { flex:1; height:5px; } .lfgp .lfg-m2 .m2-pct { flex:0 0 auto; font-weight:800; font-size:11.5px; color:var(--ink); width:30px; text-align:right; } .lfgp .lfg-m2 .m2-acts { grid-column:7; grid-row:1 / 3; display:flex; align-items:center; gap:6px; } /* Rad 2 — "därför just hen". ALLTID en rad: vill man läsa hela, expandera. Cellen har alltid innehåll (vyn faller tillbaka på spelstil/region/läge), annars hade kortet blivit enradigt och rastret tappat sin rytm. */ .lfgp .lfg-m2 .m2-r2 { grid-column:3 / 7; grid-row:2; min-width:0; font-size:12px; color:var(--ink2); line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lfgp .lfg-m2 .m2-r2 i { color:var(--accent); font-size:10.5px; margin-right:4px; } /* Match-barens färgklasser ärvs från .lfg-mbar-blocket via samma --mp-c-token. */ .lfgp .lfg-m2 .m2-bar.mp-champ { --mp-c:var(--champ); } .lfgp .lfg-m2 .m2-bar.mp-elite { --mp-c:var(--elite); } .lfgp .lfg-m2 .m2-bar.mp-dia { --mp-c:var(--dia); } .lfgp .lfg-m2 .m2-bar.mp-plat { --mp-c:var(--plat); } .lfgp .lfg-m2 .m2-bar.mp-low { --mp-c:var(--faint); } /* Kolumnhuvud — rastret läser sig som en tabell först när kolumnerna heter något. 15px sidopadding, inte 14: raderna är .card med 1px kant, så deras innehåll börjar en pixel längre in. Utan den pixeln linjerar inte rubrikerna. */ .lfgp .m2-hdr { padding:0 15px 5px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); background:none; border:0; box-shadow:none; } .lfgp .m2-hdr .m2-kd { text-align:right; } /* Rubrikraden har EN rad — nolla radspannen som cellerna ärver från raderna, annars öppnar .m2-num/.m2-acts en tom implicit rad under huvudet. */ .lfgp .m2-hdr .m2-num, .lfgp .m2-hdr .m2-acts { grid-row:1; } .lfgp .m2-hdr > span:nth-child(2) { grid-column:2; grid-row:1; } /* Metan som why-texten trängde undan (spelstil · region · läge · wins) — först i utfällningen, så ingen uppgift försvinner. */ .lfgp .lfg-m2-full { font-size:11.5px; color:var(--dim); white-space:nowrap; } /* ── Mobil: sju kolumner får inte plats. Kolumnerna viks till egna rader i stället för att döljas — ingen uppgift ska försvinna på telefon. ── */ @media (max-width:900px){ .lfgp .lfg-m2 { grid-template-columns:18px 32px minmax(0,1fr) auto; } .lfgp .lfg-m2 .m2-nm { grid-column:3; grid-row:1; } .lfgp .lfg-m2 .m2-acts { grid-column:4; grid-row:1; } .lfgp .lfg-m2 .m2-rank { grid-column:3; grid-row:2; } .lfgp .lfg-m2 .m2-kd { grid-column:4; grid-row:2; } .lfgp .lfg-m2 .m2-bar { grid-column:3 / 5; grid-row:3; } .lfgp .lfg-m2 .m2-r2 { grid-column:3 / 5; grid-row:4; white-space:normal; } .lfgp .m2-hdr { display:none; } } /* ═══════════════════════════════════════════════════════════════════════════ LFG 6.8 — "Hitta spelare", chat-first (2026-07-30) Allt scopat under .lfg6. Tokenblocken ligger redan i forre_pulse.css. MEDVETET BORTTAGET (Kentas order 2026-07-30): · alla gradienter — platta ytor i stället · min egen chatt-drawer (.chatp/.scrim) — chatten ÄR messengern · .tools .top → .tools .tbar, eftersom forre_pulse.css rad 75 ger varje .top `position:sticky;z-index:50`, vilket la verktygsraden ÖVER navets dropdowns. GRUNDPRINCIP: LFG = gruppchatt. Fortnite-partyt är ett steg efter. ═══════════════════════════════════════════════════════════════════════════ */ .lfg6 .mono{font-variant-numeric:tabular-nums} .lfg6 button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0;font-size:inherit} .lfg6 a{color:inherit;text-decoration:none} .lfg6 input,.lfg6 select,.lfg6 textarea{font-family:inherit} .lfg6 .btn.pressed{animation:press .34s cubic-bezier(.2,1.5,.4,1)} @keyframes press{0%{transform:scale(1)}40%{transform:scale(.93)}70%{transform:scale(1.06)}100%{transform:scale(1)}} .lfg6 .btn.sent i.bi-check-lg{animation:tick .42s cubic-bezier(.2,1.6,.4,1)} @keyframes tick{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.35) rotate(0)}100%{transform:scale(1);opacity:1}} .lfg6 .r.flash{animation:flash 1.5s ease-out} @keyframes flash{0%{background:var(--live-wash)}100%{background:transparent}} .lfg6 .le.flash{animation:leflash 1.6s ease-out} @keyframes leflash{0%{background:var(--live-wash)}100%{background:transparent}} .lfg6 .pips i.leaving{animation:leave .5s cubic-bezier(.3,1,.4,1)} @keyframes leave{0%{transform:scale(1);background:var(--dim)}50%{transform:scale(.4)}100%{transform:scale(1)}} .lfg6 .sk{border-bottom:1px solid var(--line);padding:8px 12px;display:grid;grid-template-columns:34px minmax(0,1fr) 52px 118px 108px 22px;gap:12px;align-items:center} .lfg6 .sk span{display:block;border-radius:5px;background:var(--inset);animation:shimmer 1.25s linear infinite} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} .lfg6 .sk .a{width:34px;height:34px;border-radius:50%} .lfg6 .sk .b1{height:11px;width:52%;margin-bottom:8px} .lfg6 .sk .b2{height:9px;width:78%} .lfg6 .sk .c{height:10px} .lfg6 .sk .d{height:24px;border-radius:6px} html[data-loading="1"] .lfg6 .rows,html[data-loading="1"] .lfg6 .empty{display:none} .lfg6 html:not([data-loading="1"]) #skel{display:none} .lfg6 .rkd i,.lfg6 .rk .em{transform:rotate(45deg)} .lfg6 .rl .l1 .rkd i{width:7px;height:7px;border-radius:1.5px} .lfg6 .md::before{opacity:1} .lfg6 .rl .av{transition:transform .18s cubic-bezier(.2,.8,.2,1)} .lfg6 .r:hover .av{transform:scale(1.07)} .lfg6 .rl .nm{transition:transform .18s cubic-bezier(.2,.8,.2,1)} .lfg6 .r:hover .nm{transform:translateX(1px)} .lfg6 .btn.g{position:relative;overflow:hidden} .lfg6 .btn.g::after{content:none} .lfg6 .btn.g:hover::after{opacity:1;animation:sheen .55s cubic-bezier(.3,.7,.3,1)} @keyframes sheen{from{left:-40%}to{left:120%}} .lfg6 .seats .t.bump,.lfg6 .mine .cnt.bump{animation:bump .5s cubic-bezier(.2,1.4,.4,1)} .lfg6 .av.pop{animation:avpop .45s cubic-bezier(.2,1.5,.4,1)} @keyframes avpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}} @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}} .lfg6 .pips i{transition:background .3s,box-shadow .3s} .lfg6 .pips i.justfilled{box-shadow:0 0 0 3px rgba(43,208,107,.18)} .lfg6 .segs button[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .lfg6 .tabs button[aria-selected="true"]{border-bottom-color:var(--accent)} .lfg6 .livebar,.lfg6 .scout{transition:border-color .2s} .lfg6 .livebar:hover{border-color:var(--line2)} .lfg6 .scout:hover{border-top-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2)} .lfg6 .tb{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)} .lfg6 .tbin{width:100%;max-width:var(--shell-w);margin:0 auto;padding:0 16px;height:48px;display:flex;align-items:center;gap:12px} .lfg6 .brand{font-weight:900;font-size:15.5px;letter-spacing:-.045em} .lfg6 .brand b{color:var(--accent-ink)} .lfg6 .nav{display:flex;gap:1px;margin-left:8px} .lfg6 .nav a{font-size:12px;font-weight:500;color:var(--dim);padding:4px 8px;border-radius:var(--r-sm);transition:.12s} .lfg6 .nav a:hover{color:var(--ink);background:var(--inset)} .lfg6 .nav a.on{color:var(--ink);background:var(--inset);font-weight:700} .lfg6 .tbrt{margin-left:auto;display:flex;align-items:center;gap:8px} .lfg6 .wal{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;color:var(--ink2)} .lfg6 .wal span{display:inline-flex;align-items:center;gap:4px} .lfg6 .wal .cn{color:var(--gold)} .lfg6 .wal .st{color:var(--danger)} .lfg6 .ib{width:29px;height:29px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--dim);position:relative;transition:.12s} .lfg6 .ib:hover{background:var(--inset);color:var(--ink)} .lfg6 .ib .bdg{position:absolute;top:1px;right:1px;min-width:13px;height:13px;padding:0 4px;border-radius:7px;background:var(--danger-fill);color:#fff;font-size:8.5px;font-weight:900;display:grid;place-items:center;border:2px solid var(--card)} .lfg6 .me{width:29px;height:29px;border-radius:50%;background:#3b6ea5;color:#fff;display:grid;place-items:center;font-weight:900;font-size:11.5px} .lfg6 .shell{width:100%;max-width:var(--shell-w);margin:0 auto;padding:8px 16px 64px;display:grid;grid-template-columns:1fr 292px;gap:12px;align-items:start} .lfg6 .main{min-width:0;display:flex;flex-direction:column;gap:8px} .lfg6 .rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:62px} /* ★ 2026-08-19: `.lfg6 .rail` (0,2,0) slog `@media(max-width:1100px){.left{display:none}}` i forre_pulse.css:618 (0,1,0), och vyn skriver `