/* Overlay-sidan (/Chatt/Overlay) körs i OBS Browser Source, som fångar den riktiga bakgrunden bakom det som ritas — en genomskinlig div ovanpå en ogenomskinlig räcker inte. Denna klass sätts bara på den routen (se App.razor) och nollställer site.css:s annars globala mörka bakgrund. */ body.chat-overlay-body { background: transparent !important; } /* Blazors återanslutningsdialog får aldrig ritas över sändningsbilden i OBS. */ body.chat-overlay-body #components-reconnect-modal, body.chat-overlay-body #components-reconnect-modal::backdrop { display: none !important; } .chat-overlay-body .chat-overlay-canvas { width: 1920px; height: 1080px; overflow: hidden; position: relative; } .chat-overlay-body .chat-overlay-column { position: absolute; right: 24px; bottom: 24px; width: 420px; max-height: 900px; display: flex; flex-direction: column-reverse; gap: 8px; overflow: hidden; } .chat-overlay-body .chat-overlay-msg { background: rgba(13, 13, 13, 0.72); color: #f0f0f0; border-radius: 8px; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.35; word-wrap: break-word; } .chat-overlay-body .chat-overlay-msg .name { color: rgba(148, 59, 55, 1); font-weight: 600; margin-right: 6px; } /* Järna Live-märket före namnet, för avsändare med roll över Stödmedlem. Samma klass i alla tre vyerna; overlayn ritar den något större eftersom den visas på 1920x1080 och ska läsas på avstånd. Bilden är en nedskalad kopia av logga.png (7 MB) — den fulla filen får aldrig upprepas per meddelande. */ .chat-badge-jl { height: 18px; width: auto; margin-right: 5px; vertical-align: text-bottom; } .chat-overlay-body .chat-badge-jl { height: 21px; } /* Medlemschatt (/Chatt) och adminvyn (/Kommando/Chatt) delar denna enkla meddelandelista-stil — inte overlayns transparenta variant ovan. */ .chat-message-list { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; } .chat-message-row { padding: 6px 10px; border-radius: 6px; background: var(--bg-card, #1a1a1a); } .chat-message-row .name { font-weight: 600; margin-right: 6px; } .chat-message-row .time { color: var(--text-muted, #888); font-size: 0.8em; margin-left: 6px; }