/* ============================================================================ FORRE.NU — NOTISPANELEN, A2. Reglerna är hämtade RAKT UR design-proposals/notiser-A2-2026-08-01.html (rad 98-190) — inte omtolkade. Första försöket uttryckte dem som Tailwind-utilities och tappade hälften på vägen; det var därför live inte liknade mockupen. Mockupens CSS ÄR designen. Egen namnrymd `fnx-` så ingenting krockar med .ddh/.ddrow/.dd-foot som sajtens övriga dropdowns använder. React renderar dessa klasser. Tätheten ligger i variabler precis som i mockupen — byt --np/--nav/--nt på #dd-notifs så flyttar hela panelen med. "Kompakt" är default. ========================================================================== */ #dd-notifs{ /* Mockupen: .dd{width:340px}. Live låg på 320 och rader med citat blev två rader där mockupen har en. */ /* ★ 340 → 240 px (2026-08-22, D · Spegeln). Alla fyra menyerna delar nu bredd med flikpanelerna, och typskalan är navbarens: 10,5 / 9,5 / 9. Uppmätt före: titel 12px mot flikens 10,5, avatar 28px mot flikikonens 15. Se .fnx-fp-blocket längre ned för härledningen och för sidorna i pulse-topdeck.css där talen bor. */ width:240px!important; border-radius:var(--r)!important; --np:5px 8px; --nav:20px; --nbg:12px; --nt:10.5px; --nq:9.5px; --nm:9px; --ngap:7px; --nlh:1.3; } /* ── HUVUD ───────────────────────────────────────────────────────────────── */ .tb-dd .fnx-list{max-height:420px;overflow-y:auto} .tb-dd .fnx-h{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .tb-dd .fnx-h .t{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--faint)} .tb-dd .fnx-h .n{font-size:9px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums} .tb-dd .fnx-h .acts{margin-left:auto;display:flex;gap:2px} .tb-dd .fnx-h .acts button,.tb-dd .fnx-h .acts a{width:24px;height:24px;border-radius:var(--r); display:grid;place-items:center;font-size:12.5px;color:var(--faint);background:none;border:0;padding:0; cursor:pointer;text-decoration:none} .tb-dd .fnx-h .acts button:hover,.tb-dd .fnx-h .acts a:hover{background:var(--inset);color:var(--ink)} /* ── FILTERCHIPS ─────────────────────────────────────────────────────────── */ .tb-dd .fnx-f{display:flex;gap:4px;padding:7px 11px;border-bottom:1px solid var(--line);overflow-x:auto} .tb-dd .fnx-f button{height:21px;padding:0 9px;border-radius:999px;border:1px solid var(--line); background:var(--inset);font-size:9.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase; color:var(--dim);white-space:nowrap;cursor:pointer;flex:0 0 auto} .tb-dd .fnx-f button.on{background:var(--accent);border-color:var(--accent);color:#fff} /* ── BRIEFING ────────────────────────────────────────────────────────────── */ .tb-dd .fnx-brief{padding:8px 11px;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 5%,transparent); font-size:var(--nt);color:var(--ink);line-height:var(--nlh)} .tb-dd .fnx-brief b{font-weight:900} /* ── RAD ─────────────────────────────────────────────────────────────────── */ .tb-dd .fnx-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ngap);align-items:start; padding:var(--np);border-bottom:1px solid var(--line);--ntc:var(--accent);position:relative; color:inherit;text-decoration:none} .tb-dd .fnx-row:hover{background:var(--zebra)} /* ★ §0.5 (2026-08-22). Här stod: .tb-dd .fnx-row.unread::before{...left:0;top:0;bottom:0;width:2px;background:var(--ntc)} — en lodrät färgad stapel per oläst rad. Exakt det 02-ui-facit §0.5 förbjuder, och den överlevde städpasset 2026-08-19. Kentas ord: "vill INTE ha dessa linjer HATAR DEM". Ersatt av en ton på HELA raden, enligt facit-blocket i §0.5: 4-6 % i ljust, 8-9 % i mörkt — under 6 % går tonen inte att skilja från raden bredvid i mörkt läge, över 10 % ser den ut som ett felmeddelande. */ .tb-dd .fnx-row.unread{background:color-mix(in srgb,var(--ntc) 6%,transparent)} [data-theme="dark"] .tb-dd .fnx-row.unread{background:color-mix(in srgb,var(--ntc) 9%,transparent)} .tb-dd .fnx-av{position:relative;width:var(--nav);height:var(--nav);flex:0 0 auto} .tb-dd .fnx-im{width:var(--nav);height:var(--nav);border-radius:50%;background:var(--inset); border:1px solid var(--line);display:grid;place-items:center;font-size:calc(var(--nav)*.4); font-weight:900;color:var(--ink2);overflow:hidden;background-size:cover;background-position:center} .tb-dd .fnx-im.sq{border-radius:var(--r)} .tb-dd .fnx-bg{position:absolute;right:-2px;bottom:-2px;width:var(--nbg);height:var(--nbg); border-radius:50%;display:grid;place-items:center;font-size:calc(var(--nbg)*.55);color:#fff; background:var(--ntc);border:2px solid var(--card)} .tb-dd .fnx-ic{width:var(--nav);height:var(--nav);border-radius:var(--r);display:grid;place-items:center; font-size:calc(var(--nav)*.44);color:var(--ntc);background:color-mix(in srgb,var(--ntc) 14%,transparent)} .tb-dd .fnx-body{min-width:0} /* font-weight:400 uttryckligen — .tb-dd ärver 600 från sajten, och då blev hela meningen halvfet i stället för bara namnet. Uppmätt mot mockupen. */ .tb-dd .fnx-title{font-size:var(--nt);color:var(--ink2);line-height:var(--nlh);display:block;font-weight:400} .tb-dd .fnx-title b{font-weight:800;color:var(--ink)} .tb-dd .fnx-row.unread .fnx-title{color:var(--ink)} .tb-dd .fnx-stars{color:var(--gold);font-size:calc(var(--nt) - 1px);letter-spacing:-.5px;white-space:nowrap} .tb-dd .fnx-quote{font-size:var(--nq);color:var(--dim);font-style:italic;margin-top:2px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .tb-dd .fnx-meta{display:flex;align-items:center;gap:5px;font-size:var(--nm);font-weight:700; color:var(--faint);margin-top:2px;flex-wrap:wrap} .tb-dd .fnx-meta .ok{color:var(--live);display:inline-flex;align-items:center;gap:3px} .tb-dd .fnx-faces{display:inline-flex;vertical-align:middle;margin-left:4px} .tb-dd .fnx-faces span{width:14px;height:14px;border-radius:50%;background:var(--inset); border:1.5px solid var(--card);margin-left:-4px;display:grid;place-items:center;font-size:7px; font-weight:900;color:var(--ink2);background-size:cover;background-position:center} .tb-dd .fnx-faces span:first-child{margin-left:0} .tb-dd .fnx-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .tb-dd .fnx-time{font-size:var(--nm);font-weight:700;color:var(--faint);white-space:nowrap; font-variant-numeric:tabular-nums} .tb-dd .fnx-dot{width:6px;height:6px;border-radius:50%;background:var(--ntc)} /* ── INLINE-ÅTGÄRDER (vänförfrågan) ──────────────────────────────────────── */ .tb-dd .fnx-act{display:flex;gap:4px;margin-top:6px} .tb-dd .fnx-btn{height:23px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line2); background:var(--card);font-size:10.5px;font-weight:800;color:var(--ink2);display:inline-flex; align-items:center;gap:4px;cursor:pointer} .tb-dd .fnx-btn:hover{border-color:var(--accent);color:var(--accent)} .tb-dd .fnx-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .tb-dd .fnx-btn[disabled]{opacity:.5;cursor:default} .tb-dd .fnx-done{font-size:var(--nm);font-weight:800;color:var(--live);margin-top:6px;display:block} /* ── CO-PLAY-STJÄRNOR ("Kräver svar", B 2.0 2026-08-02) ─────────────────── Stjärnan ÄR bekräftelsen — ingen Ja-knapp, ingen Skicka-knapp. Reglerna är kopierade ur design-proposals/omdome-B2-2026-08-02.html (§0C R5: mockupens CSS tas rakt av, inte omtolkad), namnrymdade fnx- och scopade till .tb-dd — ALDRIG till #dd-notifs, det bröt de tre andra menyerna samma dag den gången. FÄRGREGELN: osatta stjärnor är GRÅ (--faint), guld tänds först när ett betyg finns. Guld betyder därmed "här finns ett omdöme" i stället för att vara dekoration (§0B punkt 5). Blek guld på tre osatta rader blev femton bruna klumpar som inte betydde något. --live/--danger används INTE här: de betyder närvaro respektive fara på resten av sajten, inte ja/nej. */ .tb-dd .fnx-stars{display:inline-flex;gap:1px;align-items:center;flex:0 0 auto} .tb-dd .fnx-star{width:22px;height:28px;display:grid;place-items:center; border:0;background:none;padding:0;cursor:pointer;font-size:15px;line-height:1} .tb-dd .fnx-star > i{color:var(--faint);opacity:.5;transition:color .12s ease-out,opacity .12s ease-out} .tb-dd .fnx-star.on > i{color:var(--gold);opacity:1} .tb-dd .fnx-star:hover > i{color:var(--gold);opacity:.7} .tb-dd .fnx-star[disabled]{cursor:default} .tb-dd .fnx-nope{width:24px;height:28px;display:grid;place-items:center;border:0;background:none; padding:0;margin-left:5px;cursor:pointer;color:var(--faint);font-size:12px} .tb-dd .fnx-nope:hover{color:var(--ink2)} .tb-dd .fnx-saved{color:var(--gold);font-weight:700} .tb-dd .fnx-err{color:var(--danger);font-weight:700} /* Kommentaren finns bara vid <= 3 stjärnor. 56px = 11px radpadding + 28px avatar + 9px gap + 8px — meningen linjerar med titeln ovanför (§0B "symmetri och lod"). */ .tb-dd .fnx-why{padding:0 11px 8px 56px} .tb-dd .fnx-why input{width:100%;height:28px;padding:0 9px;border-radius:var(--r-sm); background:var(--inset);border:1px solid var(--line2);color:var(--ink); font:inherit;font-size:var(--nq)} .tb-dd .fnx-why input::placeholder{color:var(--faint)} .tb-dd .fnx-why input:focus{outline:none;border-color:var(--accent)} /* PHP-fallbacken göms först när React FAKTISKT monterat, och flaggan sitter på ELEMENTET — aldrig på (§0D P3, FÖR DIG-fällan gav en tom låda). */ .tdk-ask[data-fnx-coplay="1"] .ask-row--star{display:none!important} /* Mobil: 22px stjärna är under 44px touch-mål, så raden bryts och stjärnorna växer. Enda stället designen blir högre — uppmätt +38px. */ @media (max-width:820px){ .tb-dd .fnx-row:has(.fnx-stars){flex-wrap:wrap} .tb-dd .fnx-stars{flex-basis:100%;margin-top:6px;padding-left:37px} .tb-dd .fnx-star{width:42px;height:38px;font-size:17px} .tb-dd .fnx-nope{width:42px;height:38px;font-size:14px} .tb-dd .fnx-why{padding-left:11px} } /* ── HOPVIKT GRUPP ───────────────────────────────────────────────────────── */ .tb-dd .fnx-fold{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ngap);align-items:center; padding:var(--np);border-bottom:1px solid var(--line);--ntc:var(--plat);width:100%;text-align:left; background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;position:relative} .tb-dd .fnx-fold:hover{background:var(--zebra)} .tb-dd .fnx-fold .ch{font-size:11px;color:var(--faint);transition:transform .15s} .tb-dd .fnx-fold[aria-expanded="true"] .ch{transform:rotate(180deg)} .tb-dd .fnx-sub{background:color-mix(in srgb,var(--dim) 4%,transparent);border-bottom:1px solid var(--line)} .tb-dd .fnx-sub a{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 30px;font-size:11px; color:var(--ink2);text-decoration:none} .tb-dd .fnx-sub a:hover{background:var(--zebra)} .tb-dd .fnx-sub a b{font-weight:800;color:var(--ink)} .tb-dd .fnx-sub a .tm{margin-left:auto;font-size:10px;color:var(--faint);font-weight:700; font-variant-numeric:tabular-nums} /* ── TOMT + FOT ──────────────────────────────────────────────────────────── */ .tb-dd .fnx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 20px;text-align:center} .tb-dd .fnx-empty i{font-size:20px;color:var(--faint)} .tb-dd .fnx-empty b{font-size:12.5px;font-weight:900;color:var(--ink)} .tb-dd .fnx-empty span{font-size:11.5px;color:var(--dim);max-width:30ch} .tb-dd .fnx-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px; border-top:1px solid var(--line);font-size:11px;font-weight:800;color:var(--accent);text-decoration:none} .tb-dd .fnx-foot:hover{background:var(--zebra)} /* Kategorifärger SIST — de förlorade mot .fnx-fold när de stod först. Samma anteckning finns i mockupen; det var en riktig bugg där. */ /* ★ ELVA HÅRDKODADE HEX → SEX TOKENS (2026-08-22). Här stod --nt-friend:#2796f2 … --nt-system:#64748b, deklarerade ORDAGRANT TRE gånger i den här filen (#dd-notifs, #dd-msgs/friends/me, .fnx-fp). De var hex, inte tokens, så INGEN av dem bytte i mörkt läge — och --nt-friend:#2796f2 ÄR var(--accent), medan --nt-lfg:#10b981 stod bredvid var(--live) och gav två gröna för samma sak. Kartan följer nu skalets färgvokabulär (BRAIN.md §0B:5): BLÅTT = människor pratar RÖTT = trasigt/kräver beslut GRÖNT = live/närvaro LILA = din stab / ditt lag GULD = varning/väntar DIM = system, ingen betydelse Flera typer delar färg med flit. Det är poängen: färg = betydelse, och det finns färre betydelser än det fanns typer. */ .tb-dd [data-nt="friend"]{--ntc:var(--accent)} .tb-dd [data-nt="comment"]{--ntc:var(--accent)} .tb-dd [data-nt="like"]{--ntc:var(--danger)} .tb-dd [data-nt="mention"]{--ntc:var(--champ)} .tb-dd [data-nt="squad"]{--ntc:var(--champ)} .tb-dd [data-nt="post"]{--ntc:var(--live)} .tb-dd [data-nt="lfg"]{--ntc:var(--live)} .tb-dd [data-nt="reward"]{--ntc:var(--gold)} /* Ingen orange token finns i pulse, och skalet ska inte få en accent till för att butiken råkar vara orange hos Epic. Butiken brådskar = guld. */ .tb-dd [data-nt="fortnite"]{--ntc:var(--gold)} .tb-dd [data-nt="news"]{--ntc:var(--plat)} .tb-dd [data-nt="system"]{--ntc:var(--dim)} .tb-dd [data-nt="danger"]{--ntc:var(--danger)} .tb-dd [data-nt="live"]{--ntc:var(--live)} /* ============================================================================ MENY-KÄRNAN — samma delar i meddelanden, vänförfrågningar och kontot. Scopet utökat från #dd-notifs till alla fyra panelerna (2026-08-01). ========================================================================== */ #dd-msgs,#dd-friends,#dd-me{ width:240px!important;border-radius:var(--r)!important; --np:5px 8px; --nav:20px; --nbg:12px; --nt:10.5px; --nq:9.5px; --nm:9px; --ngap:7px; --nlh:1.3; } /* Närvaroprick — RUND avatar = människa, pricken sitter på personen. */ .tb-dd .fnx-pres{ position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%; border:2px solid var(--card);background:var(--faint)} .tb-dd .fnx-pres.on{background:var(--live)} .tb-dd .fnx-pres.play{background:var(--gold)} .tb-dd .fnx-pres:empty{display:block} /* Oläst-räknaren till höger på en tråd. */ .tb-dd .fnx-ct{ min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--ntc);color:#fff; font-size:9px;font-weight:900;display:grid;place-items:center;font-variant-numeric:tabular-nums} .tb-dd .fnx-onl{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:900; color:var(--live);background:color-mix(in srgb,var(--live) 14%,transparent);border-radius:999px; padding:1px 5px;font-variant-numeric:tabular-nums} .tb-dd .fnx-onl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live)} .tb-dd .fnx-pin{font-size:9px;color:var(--faint);margin-left:4px} .tb-dd .fnx-go{font-size:11px;color:var(--faint)} /* Sektionsrad ("Förfrågningar", "Senaste"). */ .tb-dd .fnx-sec{ display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--inset);font-size:8.5px; font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--faint); border-bottom:1px solid var(--line);border-top:1px solid var(--line)} .tb-dd .fnx-sec .ct{margin-left:auto;letter-spacing:0} /* ── KONTOMENYN ──────────────────────────────────────────────────────────── */ #dd-me{padding:0} #dd-me .fnx-mehead{display:flex;align-items:center;gap:10px;padding:11px; border-bottom:1px solid var(--line);text-decoration:none;color:inherit} #dd-me .fnx-mehead:hover{background:var(--zebra)} #dd-me .fnx-meav{width:38px;height:38px;border-radius:50%;background:var(--inset); border:1px solid var(--line);display:grid;place-items:center;font-size:15px;font-weight:900; flex:0 0 auto;background-size:cover;background-position:center;overflow:hidden} #dd-me .fnx-mei{flex:1;min-width:0;display:block} #dd-me .fnx-menm{font-size:13px;font-weight:900;letter-spacing:-.2px;display:flex; align-items:center;gap:5px;color:var(--ink)} #dd-me .fnx-metag{font-size:9px;font-weight:900;color:#fff;background:var(--champ,#8b3df0); border-radius:3px;padding:1px 5px;letter-spacing:.4px} #dd-me .fnx-mesub{font-size:10px;font-weight:700;color:var(--faint);margin-top:1px; display:flex;align-items:center;gap:4px} #dd-me .fnx-melvl{height:4px;border-radius:2px;background:var(--inset);overflow:hidden; margin-top:5px;display:block} #dd-me .fnx-melvl i{display:block;height:100%;background:var(--accent)} #dd-me .fnx-mexp{font-size:9.5px;font-weight:700;color:var(--faint);margin-top:3px;display:block} #dd-me .fnx-mexp b{color:var(--gold);font-weight:900} #dd-me .fnx-megrid{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line)} #dd-me .fnx-megrid a{padding:9px 4px;text-align:center;border-right:1px solid var(--line); text-decoration:none} #dd-me .fnx-megrid a:last-child{border-right:0} #dd-me .fnx-megrid a:hover{background:var(--zebra)} #dd-me .fnx-megrid i{font-size:14px;color:var(--dim);display:block;margin-bottom:3px} #dd-me .fnx-megrid span{font-size:9px;font-weight:900;text-transform:uppercase; letter-spacing:.5px;color:var(--dim)} #dd-me .fnx-melinks{padding:5px 0} #dd-me .fnx-melinks a,#dd-me .fnx-melinks button{display:flex;align-items:center;gap:9px; padding:7px 11px;font-size:12px;color:var(--ink2);width:100%;text-align:left; background:none;border:0;cursor:pointer;text-decoration:none} #dd-me .fnx-melinks a:hover,#dd-me .fnx-melinks button:hover{background:var(--zebra);color:var(--ink)} #dd-me .fnx-melinks i{font-size:13px;color:var(--faint);width:15px;text-align:center} #dd-me .fnx-melinks .ct{margin-left:auto;min-width:16px;height:16px;padding:0 5px; border-radius:999px;background:var(--danger);color:#fff;font-size:9px;font-weight:900; display:grid;place-items:center} #dd-me .fnx-melinks .kbd{margin-left:auto;font-size:9px;font-weight:800;color:var(--faint); border:1px solid var(--line);border-radius:3px;padding:1px 4px;white-space:nowrap} #dd-me .fnx-mesep{height:1px;background:var(--line);margin:5px 0} #dd-me .fnx-mdanger{color:var(--danger)!important} #dd-me .fnx-mdanger i{color:var(--danger)!important} #dd-me .fnx-champ{color:var(--champ,#8b3df0)!important} #dd-me .fnx-champ i{color:var(--champ,#8b3df0)!important} #dd-me .fnx-row{grid-template-columns:auto 1fr auto} /* PHP-fallbacken göms först när React monterat — laddar inte React ser man exakt dagens menyer. */ html.forre-msgs-react #dd-msgs > .ddh, html.forre-msgs-react #dd-msgs > .ddlist{display:none!important} html.forre-van-react #dd-friends > .ddh, html.forre-van-react #dd-friends > .ddlist{display:none!important} html.forre-me-react #dd-me > .me-head, html.forre-me-react #dd-me > .me-links{display:none!important} /* SMART: vänikonen försvinner ur navbaren när ingen har frågat något. Tystnad är signalen. ?ikoner=alla stänger av regeln så den går att testa. */ html.fnx-inga-vanner:not(.fnx-tvinga-van) body .top .in .right .tb-item:has([data-dd="friends"]){display:none!important} /* "Visa alla ikoner": radar, ärenden och crew ligger normalt bakom ••• */ /* Radarn och ärendeknappen är gömda med FLIT i pulse-shoutbox.php:536 och pulse-topdeck.css — radarns siffror bor på pulsraden, ärendena i kontomenyn. De reglerna har hög specificitet, så den här måste ha högre. Klassen sätts av pulse-topbar.php och är en rad att ta bort den dagen du vill tillbaka. */ html.fnx-alla-ikoner body .top .in .right .tb-item.tb-sec{display:inline-flex!important} html.fnx-alla-ikoner body .top .in .right .tb-item:has(> [data-dd="radar"]){display:inline-flex!important} html.fnx-alla-ikoner body .top .in .right .tb-item:has([data-dd="tickets"]){display:inline-flex!important} html.fnx-alla-ikoner .top .right .more-btn{display:none!important} /* ============================================================================ FLIKPANELERNA — D · "SPEGELN" (2026-08-22, Kentas val). Förlaga: design-proposals/dropdowns-v2-2026-08-22.html, vy D. §0C R3: CSS:en är tagen RAKT ur mockupen, inte omtolkad. ★ VARFÖR MÅTTEN SER UT SOM DE GÖR. Panelen är navbaren nedvikt. Inget värde här är påhittat — de är LÅNADE ur topbaren, för det var hela felet med den gamla panelen: etikett 10,5px pulse-topdeck.css:34 + forre_pulse.css:88 ikon 15px pulse-topdeck.css:35 gap 5px pulse-topdeck.css:33 padding 8px pulse-topdeck.css:33 flik 38px pulse-topdeck.css:33 → raden är 30 Uppmätt före: titel 12px (+14 % mot fliken), rad 45px (+18 %), avatar 28px (+87 % mot flikikonen), butikspanelen 252px = 4,3× topbarens 58px. Kentas ord: "tycker dropdown är för stora mot vad själva navbar texten är". ★ EN RAD TEXT PER RAD. Den gamla raden bar titel OCH meta i två våningar — fyra rader gav åtta textrader. Metan lever nu vidare som dämpad text på SAMMA rad (.fnx-fpm är inline, inte block). Det är det som tar panelen från 252 till 174px utan att en enda uppgift försvinner. ★ §0.5: NOLL lodräta färgade linjer. Ingen border-left, ingen border-right, ingen box-shadow:inset som ritar samma stapel med en annan penna. Betydelsefärg bärs av talet till höger (.fnx-fpx.hot/.liv) och av avatarens fyllning. Vågräta avdelare är temats språk och är kvar. ========================================================================== */ .fnx-fpwrap{position:fixed;z-index:1200;width:240px} /* Glaset. Solid som grund så en webbläsare utan backdrop-filter aldrig får en genomskinlig panel utan oskärpa — då lyser sidan igenom siffrorna. 86 % är mätt: under ~80 % går text bakom att läsa genom talen. */ .fnx-fp{width:240px;background:var(--card);border:1px solid var(--line2); border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.30)} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .fnx-fp{background:color-mix(in srgb,var(--card) 86%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35)} } /* Huvud och fot: 26px. Lägre än raden, för de är ramen och inte innehållet. */ .fnx-fph{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--faint);white-space:nowrap;overflow:hidden} .fnx-fph > i{font-size:11px;color:var(--faint);letter-spacing:0} .fnx-fph .r{margin-left:auto;letter-spacing:.02em;text-transform:none; font-size:9px;font-weight:700;color:var(--faint);flex:0 0 auto} /* Raden. 30px, en textrad, inget mer. */ .fnx-fprow{display:flex;align-items:center;gap:5px;height:30px;padding:0 8px; border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); --c:var(--accent);text-decoration:none;color:inherit} .fnx-fph + .fnx-fprow{border-top:0} .fnx-fprow:hover{background:var(--zebra)} /* Ikonen är flikens ikon i flikens storlek. Ingen bricka, ingen tonad platta — den gamla 28px-brickan var det som bar de elva hårdkodade typfärgerna. */ .fnx-fpico{font-size:15px;line-height:1;color:var(--dim);width:15px; text-align:center;flex:0 0 auto} /* Runda avatarer = människa. Fyrkantiga = lag/data/tävling (§0B:7). */ .fnx-fpav{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid; place-items:center;font-size:8.5px;font-weight:800;color:#fff; background-color:var(--c);background-size:cover;background-position:center; position:relative} /* Fyrkanten bär ofta en 4-teckens squad-tag ("4FUN"). 7,5 px gav 18 px text i en 18 px inre ruta och taggen nuddade kanten — uppmätt i Chromium 2026-08-22. 7 px med negativ spärr ger 16,4 px och ryms med marginal. */ /* Fyrkanten bär ofta en 4-teckens squad-tag ("4FUN"). Uppmätt i Chromium 2026-08-22: 7,5 px gav 20 px text i en 18 px inre ruta — taggen klipptes. TVÅ ändringar, båda ur facit: ringen ritas med box-shadow i stället för border (02-ui-facit §0.5: "ringar via box-shadow/outline, aldrig border — det ändrar elementets storlek"), vilket ger tillbaka 2 px inre bredd, och graden går till 6,5 px med negativ spärr. En inset-ring på ALLA fyra sidor är ingen lodrät stapel; förbudet gäller `inset Npx 0 0`. */ .fnx-fpav.fyrkant{border-radius:var(--r-sm);background-color:var(--inset); box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2); font-size:6.5px;font-weight:900;letter-spacing:-.03em;overflow:hidden} .fnx-fppres{position:absolute;right:-1px;bottom:-1px;width:7px;height:7px; border-radius:50%;background:var(--live);border:1.5px solid var(--card)} /* Titeln bär allt: fet del + dämpad fortsättning på samma rad. */ .fnx-fpt{font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--ink); line-height:1.25;min-width:0;flex:1 1 auto; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fnx-fpt b{font-weight:800} .fnx-fpm{color:var(--dim);font-weight:500} /* Talet till höger. Här — och bara här — bor betydelsefärgen. */ .fnx-fpx{margin-left:auto;flex:0 0 auto;font-size:9px;font-weight:700; color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap} .fnx-fpx.hot{color:var(--danger);font-weight:800} .fnx-fpx.liv{color:var(--live);font-weight:700} /* Lista mig — samma rytm som raderna, ingen egen låda. */ .fnx-fpseek{display:flex;align-items:center;gap:6px;width:100%;height:30px; padding:0 8px;border:0; border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); background:none;cursor:pointer;text-align:left;font-family:inherit} .fnx-fpseek:hover{background:var(--zebra)} .fnx-fpseek[disabled]{opacity:.6;cursor:progress} .fnx-fpseek .pt{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:0 0 auto} .fnx-fpseek.pa .pt{background:var(--live)} .fnx-fpseek .tx{font-size:10.5px;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fnx-fpseek .kn{margin-left:auto;flex:0 0 auto;font-size:9px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)} .fnx-fpseek.pa .kn{color:var(--faint);font-weight:700} /* Primärknapp och fot: 26px, samma som huvudet. En hero per panel. */ .fnx-fpcta{display:block;text-align:center;height:26px;line-height:26px; font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase; color:#fff;background:var(--accent);text-decoration:none} .fnx-fpcta:hover{background:color-mix(in srgb,var(--accent) 86%,#000)} .fnx-fp .fnx-foot{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--accent-ink);text-decoration:none} .fnx-fp .fnx-foot i{margin-left:auto;font-size:10px} .fnx-fp .fnx-foot:hover{background:var(--zebra)} .fnx-fptom{padding:10px;font-size:10px;color:var(--dim);text-align:center} /* De gamla PHP-flyouterna för LFG och Forum stängs av när React monterat — annars öppnas två paneler samtidigt. Squad-flyouten rörs INTE. */ html.forre-flikar-react #tdkLfgFly, html.forre-flikar-react #tdkForumFly{display:none!important} @media(prefers-reduced-motion:reduce){.fnx-fp{transition:none}} /* Hover-paneler finns inte på pekskärm. Kvar sedan 2026-08-01, avsiktligt. */ @media(max-width:820px){.fnx-fpwrap{display:none}} /* ============================================================================ LFG-SIDANS SKAL — Kentas val 2026-08-01 (mockup B "Rummet") ============================================================================ Före: .lfg6 .shell = 1fr 292px → main 864, högerrail 292. Uppmätt på live: railen var 612 px hög bredvid 587 px innehåll — längre än sidan den stod bredvid. Huvudkolumnens rader slutade vid ~640 px av 864. Efter: 250px 1fr → main 938 px, alltså BREDARE än före trots att en hel kolumn tillkommit. Vänsterrailen kostar 250, högerrailen ger 292. HANS MARKUP ÄR ORÖRD. Högerrailen flyttas inte i DOM och raderas inte — den placeras i rad 2 av kolumn 1, direkt under vänsterrailen, medan main spänner båda raderna i kolumn 2. SJÄLVGUARDANDE: hela blocket hänger på :has(> .rail.left). Renderas inte vänsterrailen (include borta, utloggad, fel tema) gäller ingenting av det här och sidan är exakt dagens sida. --------------------------------------------------------------------------- */ /* ─── TRE KOLUMNER IGEN (Kentas beslut 2026-08-05) ──────────────────────── "vill ha högerspalten med och vänster spalten och mitten." Före: 250px + 1fr, med högerrailen i rad 2 av kolumn 1 (under vänsterrailen) och main spännande båda raderna. Det gav en bredare mittkolumn, men med bara två listrader lämnade det ~700 px dödyta till höger under listan — och etapp 1 fyller högerspalten med sådant som MÅSTE synas bredvid innehållet: inkorgen ("N vill spela med dig") och väntrummet. Efter: 250px · minmax(0,1fr) · 320px. Exakt måtten i .shell.c3 i forre_pulse.css — ingen egen siffra. Varje rail ligger i sin egen kolumn på rad 1, så ingen behöver spänna två rader. SJÄLVGUARDANDE, som förut: hela blocket hänger på :has(> .rail.left). Renderas inte vänsterrailen gäller ingenting av det här. */ .lfgp.lfg6 .shell:has(> .rail.left){ grid-template-columns:250px minmax(0,1fr) 320px; align-items:start; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail.left{ grid-column:1; grid-row:1; min-width:0; } .lfgp.lfg6 .shell:has(> .rail.left) > main.main{ grid-column:2; grid-row:1; min-width:0; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left){ grid-column:3; grid-row:1; min-width:0; } /* Mittkolumnen är ~574 px i trekolumnsläget — smalare än de 906 px som listraderna ritades för. Sekundär meta viker undan FÖRST (plattform, "Utan mic"), så namn, spelläge, rank och knappen behåller sin plats. .hidesm är sidans egen klass för precis det här och fanns redan. */ @media (min-width:1181px){ .lfgp.lfg6 .shell:has(> .rail.left) > main.main .hidesm{ display:none; } /* Uppmätt på live 2026-08-05: raden gav .l1 bara 154 px, och eftersom .nm står på flex:0 0 auto var det spelläget och ranken som krympte — till 22 respektive 17 px, alltså "Z" och "S". Fel sak gav vika. Prioritet i en smal rad: åldern går först (den finns kvar i expansionen), sedan får NAMNET krympa — ett avhugget namn känner man igen. Spelläge och rank får aldrig krympa: en bokstav säger ingenting. */ /* Radens grid är FAST i temat: 34px 154px 52px 118px 108px 22px — ritat för en ~900 px bred rad. Att gömma .age gav därför ingenting: spåret ligger kvar. Här görs .id till det flexibla spåret och resten till auto, så det som göms faktiskt lämnar tillbaka sin plats. Uppmätt: .id 154 px -> ~330 px. */ .lfgp.lfg6 .shell:has(> .rail.left) > main.main .rl{ grid-template-columns:34px minmax(0,1fr) auto auto auto 22px; } .lfgp.lfg6 .shell:has(> .rail.left) > main.main .rl > .age{ display:none; } /* "Scout-val"-brickan är dekor — raden är redan visuellt lyft ur listan, och 38 px av ett namn är dyrare än en etikett som upprepar det man ser. Samma bricka göms redan på mobil (pulse-lfg.css @media 820px). */ .lfgp.lfg6 .shell:has(> .rail.left) > main.main .scout .kick{ display:none; } .lfgp.lfg6 .shell:has(> .rail.left) > main.main .rl .l1 > .nm{ flex:0 1 auto; min-width:0; } .lfgp.lfg6 .shell:has(> .rail.left) > main.main .rl .l1 > .md, .lfgp.lfg6 .shell:has(> .rail.left) > main.main .rl .l1 > .rkd{ flex:0 0 auto; } } /* Mellanläge: under 1180 px får högerrailen inte plats som egen kolumn utan att klämma mitten. Då faller den tillbaka på det gamla beteendet — rad 2 i kolumn 1 — i stället för att stapla under hela sidan. */ @media (max-width:1180px){ .lfgp.lfg6 .shell:has(> .rail.left){ grid-template-columns:250px minmax(0,1fr); } .lfgp.lfg6 .shell:has(> .rail.left) > main.main{ grid-column:2; grid-row:1 / span 2; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left){ grid-column:1; grid-row:2; } } /* Railen ritades för 292 px. På 250 måste statuspanelens nyckel/värde-rader få brytas i stället för att spilla — mätt: "1 spelar nu · 1 söker lag" är den längsta strängen och går i 214 px vid 11 px text. */ .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left) .statp .kv{ flex-wrap:wrap; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left) .statp .kv .v{ flex:1 0 100%; } /* Mobil: pulse-skalets brytpunkt är 820 px överallt. Under den staplas allt, och vänsterrailen ska ligga SIST — på telefon vill man se grupperna först. */ @media (max-width:820px){ .lfgp.lfg6 .shell:has(> .rail.left){ grid-template-columns:minmax(0,1fr); } .lfgp.lfg6 .shell:has(> .rail.left) > main.main{ grid-column:1; grid-row:1; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left){ grid-column:1; grid-row:2; } .lfgp.lfg6 .shell:has(> .rail.left) > .rail.left{ grid-column:1; grid-row:3; } } /* ============================================================================ VÄGGEN — LFG-KORTET OCH SVARSRADEN (2026-08-01, Kentas bild 1 + bild 2) ============================================================================ Bild 1 är hur kortet SKA se ut, bild 2 är svarsraden han underkände: "när man svarar på inlägg ser det inte bra ut! ingen spaceing osv". Uppmätt på live före: kortet pad 9px 12px, gap 1px 10px, titel 13/800, meta 11px med margin-top 1px. Svarsraden: .cm gap 8, .cm-bub pad 7px 11px, .cm-meta margin-top 2px, .cpreview pad 0 12px 8px. Basreglerna bor kvar i wall-post-card.php — hans fil är orörd. Det här är ett lager ovanpå, i React-motorns egen CSS (BRAIN §0C R5), så det kan tas bort i ett stycke utan att röra väggen. --------------------------------------------------------------------------- */ /* ── SPECIFICITET (uppmätt 2026-08-01) ───────────────────────────────────── Första försöket skrevs som `.wlfg{...}` och `.card.post .cpreview{...}`. Uppmätt på live efteråt: border-top och gap slog igenom, men padding och margin gjorde det INTE. Orsaken är att hans regler ligger i ett