/* ══════════════════════════════════════════════════════════════════════════ pulse-wall.css — "visa mer"-klippet och bildfallbacken på wall-posten. Skapad 2026-08-29 ur design-proposals/hubben-hel-2026-08-29.html. VARFÖR EGEN FIL: forre_pulse.css är delad och har trunkerats en gång (2026-07-12, två samtidiga sessioner). Husregeln är liten kollisionsyta. Laddas bara på hub + profile via $__wallRoutes/$__wr i default.php, registrerad på BÅDA ställena (link ~342 och $pushA ~151) — annars saknas den efter en PJAX-navigering (varningen står i pulse-discord-chat.php:19-21). ── VAD SOM MEDVETET INTE STÅR HÄR ──────────────────────────────────────── Rubrikens täthet (header 11/12/8, avatar 34px, namn 12,5px, meta 10,5px, body 12,5/1,5) fanns REDAN, i pulse-nav.php:1488-1500, med !important på varje deklaration. Jag skrev först samma regler här och de var död kod: samma specificitet, senare i dokumentet, plus !important — de kunde aldrig vinna. Borttagna 2026-08-29. Ska tätheten ändras är det DEN filen som gäller. Att wall-postens CSS bor i en navigations-partial är i sig skevt, men !important-blocket är trunkeringsförsvar och flyttas inte i förbifarten. Kvar här: bara det som faktiskt saknades i produktionen. ══════════════════════════════════════════════════════════════════════════ */ /* ══ NY LUCKA STÄNGD: lång text hade varken klipp eller "visa mer" ══════ Kontrollerat i produktionen 2026-08-29: inget -webkit-line-clamp på .post .body, ingen expandera-knapp. Ett långt inlägg tryckte ner hela flödet. Fem rader, sedan knapp. .klipp sätts av JS (wall-post-card.php), inte av PHP: kör inte skriptet ska texten synas i sin helhet hellre än att sitta fast avklippt. */ /* ══ KLIPPET — omgjort 2026-09-02, vy A "Kanten" ur design-proposals/wall-visa-mer-2026-09-02.html ═══════════════════ padding-bottom:0 är INTE kosmetik. `.card.post .body` har padding:0 12px 10px!important (pulse-nav.php:1542), och overflow:hidden klipper vid PADDINGKANTEN — inte vid innehållskanten. Rad 6 ritades därför ändå, avskuren på mitten, i de tio pixlarna. Det var den trasiga textremsan under klippta inlägg (uppmätt: 53 % av en 18,75 px rad). Specificitet: .card.post .body.klipp (0,4,0) slår .card.post .body (0,3,0), båda !important — därför behövs !important även här. overflow-wrap:anywhere: en klistrad URL utan mellanslag sprängde kortet i sidled. Egen bugg, hittad i samma genomgång, rör samma element. */ .card.post .body.klipp{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; padding-bottom:0!important; } .card.post .body{ overflow-wrap:anywhere; } /* ══ "VISA MER"-KNAPPEN ═════════════════════════════════════ Var tidigare 11 px naken text helt utan padding, dessutom uppdragen -6px rakt in i läckan ovanför. Två fel som förstärkte varandra: etiketten låg mitt i den avskurna raden, och :focus-visible (forre_pulse.css:91) ritade en tajt blå rektangel tätt runt bokstäverna eftersom knappen saknade form att rita ringen runt. STANDARD SEDAN 2026-09-02 ÄR VY B "RADEN" — Kentas val efter att ha sett båda skarpt på live. Ett eget band tvärs kortet med hårfin linje över, som fotens rad. Hela remsan är tryckyta: 560×32 = 17 920 px² i rälen, mot 43×11 = 476 px² före omgörningen. Radantalet längst ut till höger säger hur mycket text som återstår och göms när posten är utfälld — då är frågan besvarad och talet vore brus. Vy A "Kanten" finns kvar som reserv längst ner i det här avsnittet. */ .card.post .mer{ padding:0; margin:8px 0 0; } .card.post .mer[hidden]{ display:none; } .card.post .mer button{ display:flex; align-items:center; gap:5px; width:100%; height:32px; padding:0 12px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--accent-ink); cursor:pointer; text-align:left; font:700 11.5px/1 'Roboto',sans-serif; transition:background .12s ease-out; } .card.post .mer button:hover{ background:var(--inset); } .card.post .mer button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } /* order:-1 — chevronen står FÖRE etiketten i bandet men EFTER den i vy A. Markupen har alltid etikett → svg; ordningen är ett rent presentationsval. */ .card.post .mer button svg{ order:-1; width:11px; height:11px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.4; transition:transform .16s ease-out; } .card.post .mer button[aria-expanded="true"] svg{ transform:rotate(180deg); } .card.post .mer .mer-kvar{ margin-left:auto; padding-left:10px; font-size:10.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; } .card.post .mer button[aria-expanded="true"] .mer-kvar{ visibility:hidden; } @media(prefers-reduced-motion:reduce){ .card.post .mer button,.card.post .mer button svg{ transition:none; } } /* ══ VY A "KANTEN" — RESERV, ?mer=a ═══════════════════════════════════════ B kördes igång "sålänge" 2026-09-02, alltså med öppen dörr tillbaka. ?mer=a visar den tysta raden i den EGNA webbläsaren (valet ligger i localStorage), ?mer=b återgår till standard. Ingen annan användare rörs. NÄR KENTA BESTÄMT SIG: · stannar det vid B → ta bort blocket nedan och växeln i wall-post-card.php · blir det A ändå → avscopa reglerna nedan och flytta bandets regler hit */ html[data-mer="a"] .card.post .mer{ padding:2px 12px 9px; margin:0; } html[data-mer="a"] .card.post .mer button{ display:inline-flex; width:auto; height:26px; padding:0 9px; margin-left:-9px; border-top:0; border-radius:var(--r-sm); } html[data-mer="a"] .card.post .mer button:hover{ background:var(--accent-wash); } html[data-mer="a"] .card.post .mer button:focus-visible{ outline-offset:1px; } html[data-mer="a"] .card.post .mer button svg{ order:0; } html[data-mer="a"] .card.post .mer .mer-kvar{ display:none; } /* ══════════════════════════════════════════════════════════════════════════ BILDFÖNSTRET OCH AFFISCHFORMEN (2026-09-02) Vy B ur design-proposals/wall-hoga-bilder-2026-09-02.html — Kentas val. ── VAR LIGGER VAD ──────────────────────────────────────────────────────── themes/forre_pulse/views/partials/wall-post-card.php sätter klasserna + --wm-ar, och har JS-fallbacken för poster utan sparade mått. app/Helpers/WallMediaService.php ★ räknar kvoten (AR_MIN/AR_MAX/AR_AFFISCH). app/Helpers/CreatorStatusService.php promoBatch() — live-status + kanaler. themes/forre_pulse/js/pulse.js:1145 lightboxen (bild + hela inlägget). ── VAD SOM VAR FEL ─────────────────────────────────────────────────────── forre_pulse.css:903 gav `max-height:520px` + `object-fit:contain` åt ALLA bilder. Taket satt alltså på fel axel: uppmätt på live 2026-09-02 fick en 16:9-bild 297 px och en 9:16-affisch 520 px — den bild som visar minst per pixel fick 75 % mer skärm, och skillnaden fylldes med `--inset`. Affischen renderades 293×520 i en 528×522 låda: 118 px grå remsa per sida, 45 % av mediablocket tomt, kortet 655 px = 54 % av fönstret. ── ★ DET SOM BÄR ───────────────────────────────────────────────────────── `--wm-ar` är hela mekaniken. Den sätts av PHP (sparade mått) eller av JS-fallbacken (naturalWidth/naturalHeight) och avgör mediablockets form. Talen 4/3 och 3/1 står i WallMediaService::AR_MIN/AR_MAX — ändras de där MÅSTE JS-fallbacken i wall-post-card.php ändras med. De två ställena är med flit de enda. ── FALLGROPAR ──────────────────────────────────────────────────────────── • `.ar-fonster` sätts BARA när kvoten är känd. Utan klassen gäller produktionens gamla regler oförändrat — en post utan mått ska aldrig hamna i ett `max-height:none` utan tak. • Blocket ligger FÖRE `.wm-fel` med flit: bägge är (0,4,0) på `.card.post .wallmedia.X`, så den som står SIST vinner. Flyttar du hit något nedanför `.wm-fel` blir en trasig bild plötsligt 396 px hög. • Chippet är `pointer-events:none`. Det ska inte vara en egen träffyta — klicket faller igenom till bilden, och det är BILDEN som pulse.js lyssnar på (`.wallmedia:not(.wallmedia-mini) img`). Ger man chippet egna pointer-events slutar det att öppna lightboxen. • Rutnätet (`.pc-media[data-n="2..4"]`) har egna mått i forre_pulse.css:915. Mina regler är mer specifika och hade slagit ut dem — därför återställs de längst ner, som kvadrater så cellerna blir lika höga. ══════════════════════════════════════════════════════════════════════════ */ /* ── FÖNSTRET: gäller varje bild vars kvot vi känner ─────────────────────── */ .card.post .wallmedia.ar-fonster:not(.wallmedia-mini){ display:block; position:relative; background:var(--inset); cursor:zoom-in; } .card.post .wallmedia.ar-fonster:not(.wallmedia-mini) img{ display:block; width:100%; max-width:100%; height:auto; max-height:none; aspect-ratio:var(--wm-ar); object-fit:cover; /* 8 % uppifrån, inte 50 %: en affisch bär sitt budskap i övre halvan. Beskärningen är dum med flit — en innehållsmedveten hade krävt att vi analyserade bilden, och det är ett annat bygge. */ object-position:50% 8%; } /* ── "HELSKÄRM"-CHIPPET — bara när fönstret faktiskt beskär ──────────────── */ .card.post .wallmedia .wm-helbild{ display:none; } .card.post .wallmedia.ar-kapad .wm-helbild{ display:inline-flex; align-items:center; gap:5px; position:absolute; right:8px; bottom:8px; height:24px; padding:0 9px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--board-bg) 74%, transparent); color:var(--board-ink); font:700 10.5px/1 'Roboto',sans-serif; pointer-events:none; } .card.post .wallmedia .wm-helbild svg{ width:11px; height:11px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.2; } /* ══ AFFISCHFORMEN ════════════════════════════════════════════════════════ En 9:16-bild från någon med kopplad kanal är ingen bild — det är en affisch, och en affisch har ett ärende. Den visas HEL och obeskuren till vänster, och de 118+118 px som förut var grå remsa bär postens nytta. Beskär ingenting: en affisch som beskärs tappar just det den annonserar. */ .card.post .wallmedia.ar-affisch:not(.wallmedia-mini){ display:grid; grid-template-columns:auto minmax(0,1fr); /* ★ align-items MÅSTE stå här. `.wallmedia:not(.wallmedia-mini)` (forre_pulse.css:902) är `display:flex; align-items:center; justify-content:center` — jag bytte display till grid men lät centreringen stå kvar, och då centrerades kolumnen VERTIKALT i stället för att börja i toppen: namnet hamnade mitt i rutan med 130 px tomt över och under. Uppmätt på live 2026-09-02: .wpromo blev 314×50 i en 342 px hög rad. Byter du display på ett element ärver du dess gamla utfyllnadsregler — nolla dem uttryckligen. */ align-items:start; justify-content:normal; justify-items:stretch; gap:12px; padding:0; margin:0 16px 12px; /* Ingen ruta: affischen och texten ligger direkt på kortet. Den grå plattan var inte neutral — den ritade en låda vars nedre två tredjedelar alltid är tomma när sändaren är offline, och en halvtom låda läser som ett fel. Subtraktion före addition. */ background:transparent; border:0; overflow:visible; cursor:default; } .card.post .wallmedia.ar-affisch:not(.wallmedia-mini) img{ height:320px; width:auto; max-width:none; max-height:none; aspect-ratio:var(--wm-ar); object-fit:cover; border-radius:var(--r-sm); align-self:start; cursor:zoom-in; } .card.post .wallmedia.ar-affisch .wm-helbild{ display:none; } .card.post .wallmedia .wpromo{ display:none; } .card.post .wallmedia.ar-affisch .wpromo{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; padding:2px 2px 0 0; } /* LIVE = närvaro. Enda gröna i kortet, och den syns bara när sändningen faktiskt pågår — offline renderas raden inte alls (tystnad är signalen). */ .card.post .wpromo .wpr-live{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:var(--r-sm); background:var(--live-wash); color:var(--live); font:900 9.5px/1 'Roboto',sans-serif; letter-spacing:.1em; text-transform:uppercase; } .card.post .wpromo .wpr-dot{ width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); } .card.post .wpromo .wpr-t{ font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card.post .wpromo .wpr-s{ font-size:11.5px; color:var(--dim); line-height:1.45; } .card.post .wpromo .wpr-row{ display:flex; flex-wrap:wrap; gap:5px; } /* Kanalerna är DÖRRAR, inte status — de får synas även när ingen sänder. Ikonen bär plattformen, inte en fjärde accentfärg (gråskaletestet). */ .card.post .wpromo .wpr-p{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--card); color:var(--ink2); font:700 10.5px/1 'Roboto',sans-serif; text-decoration:none; transition:background .12s ease-out, color .12s ease-out, border-color .12s ease-out; } .card.post .wpromo .wpr-p:hover{ background:var(--inset); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 34%, var(--line2)); } .card.post .wpromo .wpr-p .bi{ font-size:11px; line-height:1; } .card.post .wpromo .wpr-go{ display:inline-flex; align-items:center; gap:6px; /* Innehållet grupperas i TOPPEN, inte utspritt över affischens 320 px. `margin-top:auto` stod här först och var död kod: grid-cellen är `align-items:start` och sträcks alltså inte, så det fanns inget auto att äta. Hade den fungerat vore den ändå fel — en knapp 200 px under sin egen rubrik hör inte ihop med den. */ height:28px; padding:0 13px; margin-top:2px; border:0; border-radius:var(--r-sm); background:var(--accent); color:#fff; font:700 11.5px/1 'Roboto',sans-serif; text-decoration:none; transition:filter .12s ease-out; } .card.post .wpromo .wpr-go:hover{ filter:brightness(1.08); } .card.post .wpromo .wpr-go .bi{ font-size:12px; } @media(prefers-reduced-motion:reduce){ .card.post .wpromo .wpr-p, .card.post .wpromo .wpr-go{ transition:none; } } /* Mobil: affischen staplas över texten i stället för att klämma den. 430 px, inte 560: under det blir högerkolumnen smalare än 200 px och plattformsknapparna radbryter en och en. */ @media(max-width:430px){ .card.post .wallmedia.ar-affisch:not(.wallmedia-mini){ grid-template-columns:1fr; justify-items:center; } .card.post .wallmedia.ar-affisch:not(.wallmedia-mini) img{ height:300px; } .card.post .wallmedia.ar-affisch .wpromo{ width:100%; } .card.post .wpromo .wpr-go{ margin-top:4px; } } /* ── RUTNÄTET (2–4 media) behåller sina egna mått ───────────────────────── forre_pulse.css:915 kapar cellerna till 340 px. Mina regler ovan är mer specifika och hade slagit ut det taket. Kvadrat i stället för 340 px: celler i ett rutnät ska vara lika höga, annars ser raden trasig ut. */ .pc-media[data-n="2"] .wallmedia.ar-fonster img, .pc-media[data-n="3"] .wallmedia.ar-fonster img, .pc-media[data-n="4"] .wallmedia.ar-fonster img{ aspect-ratio:1; max-height:none; object-position:50% 30%; } .pc-media[data-n="2"] .wallmedia.ar-affisch, .pc-media[data-n="3"] .wallmedia.ar-affisch, .pc-media[data-n="4"] .wallmedia.ar-affisch{ display:block; padding:0; } .pc-media[data-n="2"] .wallmedia.ar-affisch .wpromo, .pc-media[data-n="3"] .wallmedia.ar-affisch .wpromo, .pc-media[data-n="4"] .wallmedia.ar-affisch .wpromo{ display:none; } .pc-media[data-n="2"] .wallmedia.ar-affisch img, .pc-media[data-n="3"] .wallmedia.ar-affisch img, .pc-media[data-n="4"] .wallmedia.ar-affisch img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:0; } /* ══ BILD SOM INTE LADDAR ═══════════════════════════════════════════════ Produktionen hade ingen onerror: en död media_url gav en trasig bildikon mitt i kortet. Nu en tyst platta med förklaring i stället. */ .card.post .wallmedia.wm-fel img{ display:none; } .card.post .wallmedia.wm-fel{ min-height:64px; display:grid; place-items:center; background:var(--inset); border:1px dashed var(--line2); border-radius:var(--r-sm); color:var(--faint); font:700 9px/1 'Roboto Condensed','Roboto',system-ui,sans-serif; letter-spacing:1px; text-transform:uppercase; } .card.post .wallmedia.wm-fel::after{ content:'Bilden kunde inte laddas'; }