/* internt/assets/internt.css — hela formspråket för nya internt. Inget Bootstrap: den här filen ÄR designsystemet. Skälet är att gamla internt drog in Bootstrap + Bootstrap Icons + jQuery från CDN och ändå behövde egna stilblock i varje fil. Här är allt på ett ställe, och CSP:n slipper undantag. Palett från private/internt.css, oförändrad: marin #16315f / #112647 / #0c1a36 mässing #e6cd92 / #bb9140 / #97712a / #7a5a20 papper #f8f3e8 / #fffdf6 */ :root{ --marin-djup:#0c1a36; --marin:#16315f; --massing:#bb9140; --massing-ljus:#e6cd92; --massing-mork:#7a5a20; --papper:#fffdf6; --kort:#ffffff; --kant:#e7dfcd; --kant-svag:#f0e9db; /* Kanten runt något man kan SKRIVA I eller TRYCKA PÅ. --kant mäter 1.33:1 mot vitt, och WCAG 1.4.11 kräver 3:1 för gränsen som gör en kontroll till en kontroll: fälten och de tysta knapparna såg ut som text på papper. Den här ligger på 3.18:1. Ljusa --kant är kvar till avdelare, kortkanter och tabellinjer, som bara är dekor. */ --kant-kontroll:#9c8f74; --text:#1d2433; --text-svag:#5f6878; --gron:#2f6b4f; --gron-bg:#e8f2ec; --rost:#a5401f; --rost-bg:#fbeae4; --gra:#6b7280; --radie:10px; --skugga:0 1px 2px rgba(12,26,54,.06), 0 6px 18px rgba(12,26,54,.05); } *{box-sizing:border-box} /* Rotstorleken i PROCENT och inte px: rem raknas mot rotelementet, och procent later den som hojt textstorleken i sin webblasare fa med sig hojningen. Allt nedan ar i rem och skalar darfor med den har raden. Golvet i internt: ingen text under 15 px, brodtext 18. */ html{font-size:112.5%;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--papper);color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:1rem;line-height:1.5; } a{color:var(--massing-mork)} a:hover{color:var(--marin)} /* Fokusringen var mässing på 55 % = 1.72:1 mot pappret. Den syntes för den som redan visste var den var. Marin ligger på 12.8:1, och den vita ytterringen gör att den syns även mot mässing och mot en markerad rad. */ :focus-visible{outline:3px solid var(--marin);outline-offset:2px;box-shadow:0 0 0 5px rgba(255,255,255,.85)} /* I den mörka toppen är det tvärtom: där är det marin som försvinner. */ .topp :focus-visible{outline-color:var(--massing-ljus);box-shadow:0 0 0 5px rgba(12,26,54,.85)} .visasom-band :focus-visible{outline-color:var(--marin);box-shadow:0 0 0 5px rgba(255,255,255,.85)} /* Första tabbstoppet på varje sida. Utan den ligger tio–tjugofem menyrader före sidans första knapp, på varje sida, för den som inte använder mus. */ /* fixed och inte absolute: fokuserar man den när sidan redan är scrollad ska den synas där man är, inte uppe vid dokumentets början. */ .hoppa{ position:fixed;left:.6rem;top:-6rem;z-index:60; background:var(--marin-djup);color:#fff;text-decoration:none;font-weight:600; padding:.7rem 1.1rem;border-radius:0 0 8px 8px;border:2px solid var(--massing); } .hoppa:focus{top:0;color:#fff} #innehall:focus{outline:none} /* Sidan bakom en öppen panel ska ligga still. */ body.laast{overflow:hidden} .tal{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} [hidden]{display:none!important} .dold{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- navigering ---------- .topp är det som klistrar: navbaren och visa-som-bandet i en och samma behållare. Förut klistrade de var för sig med top:0, och eftersom navbaren låg högre i z-led försvann bandet bakom den så fort man scrollade – det band som är enda kvittot på att man visar som någon annan. */ .topp{position:sticky;top:0;z-index:40} .nav-topp{ background:var(--marin-djup);border-bottom:.2em solid var(--massing);color:#fff; display:flex;align-items:center;gap:1rem;padding:.55rem 1rem; flex-wrap:wrap; } .nav-marke{display:flex;align-items:center;gap:.6rem;font-weight:600;color:#fff;text-decoration:none} .nav-marke:hover{color:#fff} .nav-marke img{width:38px;height:38px;border-radius:50%} .nav-marke small{display:block;font-weight:400;opacity:.72;font-size:0.85rem;letter-spacing:.08em;text-transform:uppercase} .nav-lankar{display:flex;gap:.15rem;flex-wrap:wrap;align-items:center;margin-left:auto} /* Menyraden är det man trycker på oftast och satt lägst: 40 px. Golvet i internt är 48, och det är innermarginalen som sätter det – inte textstorleken. */ .nav-lankar a{ color:#dfe4ee;text-decoration:none;padding:.6rem .8rem;border-radius:6px;font-size:1rem;white-space:nowrap; display:inline-flex;align-items:center;min-height:48px; } .nav-lankar a:hover{background:rgba(230,205,146,.14);color:var(--massing-ljus)} .nav-lankar a.pa{background:rgba(230,205,146,.18);color:var(--massing-ljus);font-weight:600} .nav-lankar a.gammal::after{content:" ↗";opacity:.6;font-size:0.9rem} .nav-meny{position:relative} .nav-meny > button{ appearance:none;border:0;background:none;font:inherit;color:#dfe4ee;cursor:pointer; padding:.6rem .8rem;border-radius:6px;font-size:1rem;white-space:nowrap; display:inline-flex;align-items:center;min-height:48px; } .nav-meny > button:hover{background:rgba(230,205,146,.14);color:var(--massing-ljus)} .nav-meny > button.pa{background:rgba(230,205,146,.18);color:var(--massing-ljus);font-weight:600} .nav-meny > button::after{content:" ▾";opacity:.7} /* Admin med alla behörigheter är tolv rader à 48 px – högre än ett lågt webbläsarfönster. Rullgardinen får därför scrolla i sig själv i stället för att sluta i underkanten. */ .nav-meny ul{ position:absolute;right:0;top:calc(100% + .35rem);min-width:230px;margin:0;padding:.3rem; list-style:none;background:#fff;border:1px solid var(--kant);border-radius:8px; box-shadow:0 12px 34px rgba(12,26,54,.22);z-index:45; max-height:calc(100vh - var(--topphojd, 5rem) - 1rem);overflow-y:auto;overscroll-behavior:contain; } .nav-meny ul a{display:flex;align-items:center;min-height:48px;color:var(--text);padding:.5rem .7rem;border-radius:6px;text-decoration:none;font-size:1rem} .nav-meny ul a:hover{background:var(--kant-svag);color:var(--marin-djup)} .nav-meny ul a.pa{background:var(--marin);color:#fff} .nav-meny hr{border:0;border-top:1px solid var(--kant);margin:.3rem 0} .nav-meny li.rubrik{padding:.4rem .6rem .15rem;font-size:0.85rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-svag);font-weight:700} /* Menyknappen på mobilen: 66x38 var den minsta träffytan på hela sidan, och den som allt annat på en telefon börjar med. */ .nav-knapp{ appearance:none;border:1px solid rgba(230,205,146,.55);background:none;color:var(--massing-ljus); font:inherit;font-size:0.95rem;padding:.6rem 1rem;border-radius:6px;cursor:pointer; display:inline-flex;align-items:center;min-height:48px; } .nav-knapp:hover{background:rgba(230,205,146,.14)} .nav-toggle{display:none} /* ---------- visa som ---------- Bandet ligger under navbaren INNE i .topp och ska inte gå att missa: det är enda kvittot på att sidan visar någon annan än dig, och enda vägen tillbaka. Egen sticky hade det förut, med samma top:0 som navbaren och lägre z-index – alltså osynligt i samma sekund man scrollade. */ .visasom-band{ background:var(--rost-bg);border-bottom:1px solid #e8c3b6;color:var(--rost); display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:.6rem 1rem; } .visasom-band strong{display:block;color:var(--rost)} .visasom-band span{font-size:0.95rem;opacity:.85} .visasom-band form{margin:0} /* ---------- sidyta ---------- */ .yta{max-width:1180px;margin:0 auto;padding:1.4rem 1rem 5rem} /* ---------- sidhuvud ---------- */ .sidhuvud{ display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:.9rem;margin-bottom:1rem;border-bottom:1px solid var(--kant);position:relative; } .sidhuvud::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--massing)} .sidhuvud h1{margin:0;font-size:1.6rem;line-height:1.2;color:var(--marin-djup);letter-spacing:-.01em;font-weight:700} .sidhuvud p{margin:.3rem 0 0;color:var(--text-svag);font-size:1rem;max-width:56ch} .sidhuvud .atgarder{display:flex;gap:.5rem;flex-wrap:wrap} /* ---------- flikar inom en sida ---------- */ .flikar{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid var(--kant);margin-bottom:1.2rem} .flikar button,.flikar a{ appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-weight:600; color:var(--text-svag);padding:.55rem .9rem;border-bottom:3px solid transparent;white-space:nowrap; text-decoration:none; } .flikar button:hover,.flikar a:hover{color:var(--marin);background:var(--kant-svag)} .flikar [aria-selected="true"]{color:var(--marin-djup);border-bottom-color:var(--massing)} /* ---------- verktygsrad ---------- */ .verktyg{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .sok{flex:1 1 260px;min-width:0;position:relative} .sok input{ width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--kant-kontroll); border-radius:8px;background:#fff;color:var(--text); } .sok input:focus{outline:3px solid var(--marin);outline-offset:1px;border-color:var(--marin);box-shadow:none} .chip{ appearance:none;font:inherit;font-size:0.95rem;cursor:pointer; border:1px solid var(--kant-kontroll);background:#fff;color:var(--text-svag); padding:.5rem .9rem;border-radius:999px;white-space:nowrap; display:inline-flex;align-items:center;min-height:44px; } .chip:hover{border-color:var(--massing-mork);color:var(--marin)} .chip[aria-pressed="true"]{background:var(--marin);border-color:var(--marin);color:#fff;font-weight:600} .chip .antal{opacity:.65;margin-left:.3rem;font-variant-numeric:tabular-nums} .chip[aria-pressed="true"] .antal{opacity:.85} .rakn{margin-left:auto;color:var(--text-svag);font-size:0.95rem;white-space:nowrap} /* Vyval som ska kunna gälla samtidigt som ett chip – kryssruta och sorteringsval. Formen är chippens, men de är avsiktligt inte chip: chippen är ett val i taget. */ .verktygsval{ display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;cursor:pointer; font-size:0.95rem;color:var(--text-svag);min-height:44px; border:1px solid var(--kant-kontroll);background:#fff;border-radius:999px;padding:.5rem .9rem; } .verktygsval:hover{border-color:var(--massing-mork);color:var(--marin)} .verktygsval input{margin:0;accent-color:var(--marin)} .verktygsval .antal{opacity:.65;font-variant-numeric:tabular-nums} .verktygsval-falt{ font:inherit;font-size:0.95rem;color:var(--text);background:#fff;cursor:pointer;min-height:44px; border:1px solid var(--kant-kontroll);border-radius:8px;padding:.65rem .7rem; } .verktygsval-falt:hover{border-color:var(--massing-mork)} .verktygsval-falt:focus{outline:3px solid var(--marin);outline-offset:1px;border-color:var(--marin);box-shadow:none} /* ---------- knappar ---------- Innermarginalerna ar satta sa att varje klickyta blir minst 48 px hog med den rotstorlek som star hogst upp. Krymper man dem hamnar knapparna under gransen igen - textstorleken ensam racker inte. */ .knapp{ appearance:none;font:inherit;font-weight:600;cursor:pointer;border-radius:8px; padding:.7rem 1.05rem;border:1px solid transparent;text-decoration:none; display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap; } .knapp[disabled]{opacity:.5;cursor:not-allowed} .knapp-primar{background:var(--marin);color:#fff} .knapp-primar:hover:not([disabled]){background:var(--marin-djup);color:#fff} .knapp-tyst{background:#fff;border-color:var(--kant-kontroll);color:var(--marin)} .knapp-tyst:hover:not([disabled]){border-color:var(--massing-mork);background:#fffaf0;color:var(--marin)} .knapp-fara{background:#fff;border-color:#e0b8ab;color:var(--rost)} .knapp-fara:hover:not([disabled]){background:var(--rost-bg);color:var(--rost)} .knapp-liten{padding:.6rem .85rem;font-size:0.95rem} /* En knapp som ser ut som en länk är fortfarande en knapp: 32 px räckte inte, och den sitter mitt i en textrad ("Svara senast … Frågor och meddelande"), så den måste växa utan att bryta raden. */ .lank{ background:none;border:0;padding:0 .15rem;font:inherit;font-size:0.95rem; color:var(--massing-mork);cursor:pointer;text-decoration:underline; display:inline-flex;align-items:center;min-height:44px;vertical-align:middle; } .lank:hover{color:var(--marin)} /* ---------- kort ---------- */ .kort{background:var(--kort);border:1px solid var(--kant);border-radius:var(--radie);box-shadow:var(--skugga);overflow:hidden} .kort + .kort{margin-top:1rem} .kort-huvud{ padding:.7rem 1rem;background:#faf6ec;border-bottom:1px solid var(--kant); font-weight:700;color:var(--marin-djup);font-size:1rem; display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap; } .kort-kropp{padding:1rem} /* ---------- tabell ---------- */ table.lista{width:100%;border-collapse:collapse} table.lista thead th{ text-align:left;font-size:0.85rem;letter-spacing:.09em;text-transform:uppercase; color:var(--text-svag);font-weight:700;padding:.6rem .8rem; background:#faf6ec;border-bottom:1px solid var(--kant); } table.lista tbody td{padding:.7rem .8rem;border-bottom:1px solid var(--kant-svag);vertical-align:top} table.lista tbody tr:last-child td{border-bottom:0} table.lista tbody tr:hover{background:#fffaf0} table.lista .agera{text-align:right;white-space:nowrap} table.lista .agera .knapp{margin-left:.25rem} /* ---------- datatabell (.tabell) ---------- Biljettsidorna räknar: serier, betalsätt, ombud, nycklar. Sådana tabeller ska INTE bli kort på mobilen som .lista blir – en kolumn med bara siffror utan sin rubrik betyder ingenting. De ska behålla sin form och få scrolla i sidled inuti .tabellyta, vilket är undantaget i WCAG 1.4.10 ("kräver tvådimensionell layout för sin innebörd"). Klassen hade tidigare ingen CSS alls. Tabellerna renderades med webbläsarens standardstil, och eftersom .kort har overflow:hidden KLIPPTES de på smala skärmar: Spärra-knappen i Kassanycklar låg på x 410–492 på en 375 px telefon, utanför kortet, utan sidscroll någonstans. Den gick inte att nå. */ .tabellyta{overflow-x:auto;-webkit-overflow-scrolling:touch} .tabellyta:focus-visible{outline-offset:-3px} table.tabell{width:100%;border-collapse:collapse} table.tabell thead th{ text-align:left;font-size:0.85rem;letter-spacing:.09em;text-transform:uppercase; color:var(--text-svag);font-weight:700;padding:.6rem .8rem;white-space:nowrap; background:#faf6ec;border-bottom:1px solid var(--kant); } table.tabell tbody td{padding:.7rem .8rem;border-bottom:1px solid var(--kant-svag);vertical-align:top} table.tabell tbody tr:last-child td{border-bottom:0} table.tabell tbody tr:hover{background:#fffaf0} table.tabell th.tal,table.tabell td.tal{text-align:right;font-variant-numeric:tabular-nums} table.tabell .under{white-space:nowrap} /* statusremsa: vänsterkanten kodar radens tillstånd, alltid tillsammans med en textetikett i cellen. Färg är aldrig ensam bärare av betydelse (WCAG 1.4.1). */ td.remsa{position:relative;padding-left:1.1rem} td.remsa::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;border-radius:2px;background:transparent} tr.st-atgard td.remsa::before{background:var(--massing)} tr.st-publik td.remsa::before{background:var(--marin)} tr.st-klar td.remsa::before{background:var(--gron)} tr.st-vilande td.remsa::before{background:#d4d8e0} .namn{font-weight:600;color:var(--marin-djup)} .under{display:block;color:var(--text-svag);font-size:0.9rem;margin-top:.1rem} /* Överrad: ett arkivsignum eller liknande nyckel som hör ihop med namnet under. Egen form och inte .mark, eftersom ett märke läses som en egenskap medan det här är beteckningen man slår upp med. Se notreg_rad_html(). */ .beteckning{ display:block;font-size:0.85rem;font-weight:700;letter-spacing:.09em; color:var(--massing-mork);margin-bottom:.1rem; } /* ---------- märken ---------- */ .mark{ display:inline-block;font-size:0.85rem;font-weight:700;letter-spacing:.03em; padding:.15rem .45rem;border-radius:5px;background:var(--kant-svag);color:var(--marin-djup); border:1px solid var(--kant);margin:.1rem .15rem .1rem 0;white-space:nowrap; } .mark-massing{background:#fbf1dc;border-color:#e5cf9e;color:#6b4d13} .mark-marin{background:#e8edf6;border-color:#c8d4e8;color:var(--marin)} .mark-gron{background:var(--gron-bg);border-color:#bcd8c8;color:var(--gron)} .mark-rost{background:var(--rost-bg);border-color:#e8c3b6;color:var(--rost)} /* --gra mot den ljusgrå bakgrunden gav 4.39:1, precis under gränsen. */ .mark-tyst{background:#f3f4f6;border-color:#e2e5ea;color:var(--text-svag)} /* ---------- datumblock ---------- */ .datum{width:44px;flex:none;text-align:center;border:1px solid var(--kant);border-radius:8px;overflow:hidden;background:#fff} .datum .m{display:block;background:var(--marin-djup);color:var(--massing-ljus);font-size:0.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.1rem 0;font-weight:700} .datum .d{display:block;font-size:1.25rem;font-weight:700;color:var(--marin-djup);padding:.1rem 0;font-variant-numeric:tabular-nums} /* ---------- svarsstapel ---------- */ .svar{min-width:150px} .svar-stapel{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#eceff4;margin-bottom:.25rem} .svar-ja{background:var(--gron)} .svar-nej{background:#c98a72} .svar-tyst{background:#dfe3ea} .svar-text{font-size:0.9rem;color:var(--text-svag);font-variant-numeric:tabular-nums} /* ---------- panel ---------- */ .panel-tack{position:fixed;inset:0;background:rgba(12,26,54,.42);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50} .panel-tack.pa{opacity:1;pointer-events:auto} .panel{ position:fixed;top:0;right:0;bottom:0;width:min(580px,100%); background:var(--kort);border-left:4px solid var(--massing); transform:translateX(100%);transition:transform .22s ease; z-index:51;display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(12,26,54,.18); } .panel.pa{transform:none} .panel-huvud{padding:.9rem 1.1rem;border-bottom:1px solid var(--kant);background:#faf6ec;display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem} .panel-huvud h2{margin:0;font-size:1.12rem;color:var(--marin-djup)} .panel-kropp{padding:1.1rem;overflow:auto;flex:1} .panel-fot{padding:.8rem 1.1rem;border-top:1px solid var(--kant);background:#faf6ec;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .panel-fot .hoger{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end} /* På en telefon får knapparna i foten bryta rad, och en lång knapptext ("Registrera 1 betalning och bekräfta 1 adress") bryter inuti knappen. Förut hölls gruppen på en rad och sköt ut knapparna utanför panelen – redan "Avbryt | Granska igen | Registrera 1 betalning" var ungefär 150 px för bred på 375 px, och sista knappen gick inte att nå. */ @media (max-width:520px){.panel-fot .knapp{white-space:normal;text-align:center;max-width:100%}} /* Krysset var 27x29 – panelens enda synliga väg ut, och dess minsta yta. */ .stang{ appearance:none;border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer; color:var(--text-svag);border-radius:6px;flex:none; min-width:44px;min-height:44px;display:grid;place-items:center; } .stang:hover{background:#fff;color:var(--marin-djup)} /* ---------- formulär ---------- */ .falt{margin-bottom:.85rem} .falt > label{display:block;font-size:0.9rem;font-weight:700;color:var(--marin-djup);margin-bottom:.22rem} .falt input,.falt textarea,.falt select{ width:100%;font:inherit;padding:.65rem .7rem;border:1px solid var(--kant-kontroll);border-radius:7px;background:#fff;color:var(--text); } .falt input:focus,.falt textarea:focus,.falt select:focus{outline:3px solid var(--marin);outline-offset:1px;border-color:var(--marin);box-shadow:none} .falt input[readonly]{background:#f7f4ec;color:var(--text-svag)} /* Hjälptexten står ibland fritt i ett kort och inte under ett fält – då är den löpande text och ska ha samma radlängdstak som annan prosa (158 tecken i Meddelande innan taket). */ .hjalp{max-width:70ch} .falt .hjalp{font-size:0.9rem;color:var(--text-svag);margin-top:.2rem} .falt .fel{font-size:0.9rem;color:var(--rost);margin-top:.2rem;font-weight:600} .falt.har-fel input,.falt.har-fel textarea{border-color:var(--rost);box-shadow:0 0 0 .2rem rgba(165,64,31,.16)} .rad2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .rad3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem} /* ---------- formulärrad med knapp sist ---------- Uppladdningsformulären (arkiv, protokoll, spelare, noter, press) är en rad med ett par fält och en knapp. De bottenjusterade kolumnerna med ett inline align-items:end, vilket ser rätt ut bara så länge kolumnerna är lika höga: en kolumn med hjälptext under fältet är högre än en utan, och då hamnade fälten på olika höjd medan hjälptexterna låg i linje. Här toppjusteras de i stället. Etiketterna ligger då på en rad och kontrollerna på nästa, och hjälptexten hänger under utan att påverka något. */ .formrad{align-items:start} .formrad .falt{margin-bottom:0} /* Knappkolumnen har ingen etikett. ::before är en tom etikettrad med exakt samma typografi som en riktig, så knappen hamnar i linje med fälten – utan att någon behöver hålla ett pixelvärde i synk med .falt > label. */ .formrad .falt-knapp::before{ content:"\00a0";display:block; font-size:0.9rem;font-weight:700;line-height:1.5;margin-bottom:.22rem; } .formrad .falt-knapp .knapp{width:100%;justify-content:center} @media (max-width:820px){ /* En kolumn: då är etikettspåret bara en tom rad ovanför knappen. */ .formrad .falt-knapp::before{display:none} .formrad .falt{margin-bottom:.85rem} .formrad .falt:last-child{margin-bottom:0} } fieldset.grupp{border:1px solid var(--kant);border-radius:8px;padding:.7rem .85rem 1rem;margin:0 0 .9rem} fieldset.grupp legend{font-size:0.85rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--text-svag);padding:0 .35rem} fieldset.fara{border-color:#e0c8be} fieldset.fara legend{color:var(--rost)} /* Spåren i REM och inte px: 150 px var smalare än flera av etiketterna, och ett ord som inte får plats i sitt spår flödar ut i grannkolumnen i stället för att brytas — "Admin Medlemsregistret" la sig över "Admin Access", och "Se och hantera uniformsansökningar" över "Hantera biljetter". Rutorna stod hela tiden rätt i sina spår; det var texten som gick utanför, vilket inte syns om man mäter elementens boxar. Mät med Range.getClientRects() över textnoden. 11rem ger två spalter i panelen (580 px) i stället för tre, och ett enda spår när användaren har höjt textstorleken eller sitter på telefon. Bredare spår löser det för dagens etiketter; break-word och hyphens nedan är nätet som gör att en framtida längre etikett bryts i stället för att lägga sig över något. */ .krysslista{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.2rem .6rem} /* Kryssrutorna är de tätaste kontrollerna i internt (53 i medlemspanelen, ett nittiotal i Meddelande) och satt på 32 px rad med en 16 px ruta. Hela raden är etiketten och därmed träffytan – den ska vara minst 44. */ .kryss{ display:flex;align-items:center;gap:.55rem;font-size:1rem;padding:.45rem .2rem;cursor:pointer;min-height:44px; overflow-wrap:break-word;hyphens:auto; } .kryss input{accent-color:var(--marin);width:20px;height:20px;flex:none} .kryss input[disabled]{cursor:not-allowed} .kryss.lasta{color:var(--text-svag);cursor:not-allowed} /* ---------- liten textredigerare ---------- Ersätter Summernote (som drogs in från CDN). Bara det som faktiskt behövs för ett brev: fet, kursiv, punktlista, länk. */ .redigerare-verktyg{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:-1px} .redigerare-verktyg button{ appearance:none;font:inherit;font-size:0.95rem;cursor:pointer; border:1px solid var(--kant-kontroll);background:#faf6ec;color:var(--marin); padding:.5rem .8rem;border-radius:6px 6px 0 0;min-height:44px; } .redigerare-verktyg button:hover{background:#fff;border-color:var(--massing-mork)} .redigerare{ min-height:170px;max-height:340px;overflow:auto; border:1px solid var(--kant-kontroll);border-radius:0 7px 7px 7px;background:#fff; padding:.6rem .7rem;font-size:1rem;line-height:1.55; } .redigerare:focus{outline:3px solid var(--marin);outline-offset:1px;border-color:var(--marin);box-shadow:none} .redigerare:empty::before{content:attr(data-tom);color:#9aa1ad} .redigerare p{margin:0 0 .6rem} .redigerare ul,.redigerare ol{margin:0 0 .6rem;padding-left:1.3rem} .brevruta{border:1px solid var(--kant);border-radius:8px;padding:.8rem;background:#fff;max-height:300px;overflow:auto} .brevruta img{max-width:100%;height:auto} /* Etikettfält direkt i en lista (pressbilder, logotyper) – ligger utanför .falt. */ .mat-etikett{ width:100%;max-width:26rem;font:inherit;font-size:1rem; padding:.55rem .6rem;border:1px solid var(--kant-kontroll);border-radius:6px;background:#fff;color:var(--text); } .mat-etikett:focus{outline:3px solid var(--marin);outline-offset:1px;border-color:var(--marin);box-shadow:none} /* ---------- Min sida: kalendern ---------- En rad per post med en tydlig datumruta till vänster. Gamla vyn använde float-baserade spalter som la sig om olyckligt på smala skärmar. */ .manadsrubrik{ font-size:1.05rem;color:var(--marin-djup);margin:1.6rem 0 .6rem; padding-bottom:.35rem;border-bottom:1px solid var(--kant); font-variant-caps:small-caps;letter-spacing:.03em; } .manadsrubrik:first-child{margin-top:.4rem} .dagpost{ display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--kant-svag); } .dagpost:last-child{border-bottom:0} .dagruta{ flex:none;width:3rem;text-align:center;padding-top:.1rem; } .dagnr{display:block;font-size:1.5rem;font-weight:700;line-height:1;color:var(--marin-djup)} .dagnamn{display:block;font-size:0.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-svag);margin-top:.15rem} .dagruta.rod .dagnr,.dagruta.rod .dagnamn{color:var(--rost)} .dagkropp{flex:1;min-width:0} /* Ytan är 1180 px bred för tabellernas skull. Löpande text blev då 117 tecken per rad, ungefär dubbelt så långt som ögat orkar hoppa tillbaka från. */ .dagrubrik{font-weight:700;color:var(--marin-djup);font-size:1.02rem;max-width:70ch} .dagtext{font-size:1rem;color:#4a5262;margin-top:.35rem;max-width:70ch} .anmalan{margin-top:.7rem} .anmalan-rad{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem} .anmalan-rad .knapp{flex:1 1 auto;justify-content:center;min-width:8rem} .anmalan-status{line-height:1.9} @media (max-width:520px){ .dagpost{gap:.6rem} .dagruta{width:2.4rem} .dagnr{font-size:1.3rem} /* Tre svarsknappar på en rad i en dagpost: 285 px att dela på, alltså ~90 px var. "Jag deltar inte" vill ha 156 px på en rad, och eftersom .knapp har white-space:nowrap rann texten rakt ut över knappkanten – flex:1 1 30% med min-width:0 låter lådan bli smalare än sitt innehåll utan att texten bryts. Etiketten måste alltså brytas. Alternativen mättes: alla tre på var sin rad blir högre än den brutna varianten, och "Jag deltar" + "Jag deltar inte" på samma rad ryms på 282,5 av 285 px – 2,5 px marginal är ingen marginal, det spricker på första typsnitt som renderar en aning bredare. Knapparna blir 108 px höga när etiketten går i två rader. Alla tre får samma höjd av flex, så raden ser avsiktlig ut, och träffytan blir större – inte mindre. */ .anmalan-rad .knapp{ min-width:0;flex:1 1 30%; padding-left:.5rem;padding-right:.5rem; white-space:normal;text-align:center;line-height:1.25; } } /* ---------- Spelare ---------- Klass- och id-namnen matchar assets/spelare.js, som är en ordagrann kopia av den finslipade playlistPlayer2.js. Rör dem inte utan att ändra båda. */ #playerContainer ul{list-style:none;padding:0;margin:.8rem 0 0} #playlist{ max-height:42vh;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth; border:1px solid var(--kant);border-radius:8px; } #playlist li{margin:0;border-bottom:1px solid var(--kant-svag);display:flex;align-items:center;gap:.4rem;padding-right:.4rem} #playlist li:last-child{border-bottom:0} #playlist .track{ font-size:1.05rem;color:var(--text);text-decoration:none;display:block; padding:.5rem .7rem;flex:1 1 auto;background:none;border:0;text-align:left;width:100%; white-space:normal;font-family:inherit;cursor:pointer; } #playlist .track:hover{background:#fffaf0} #playlist .track.active{background:var(--marin);color:#fff;border-bottom:.2em solid var(--massing)} #playlist .track:focus-visible{outline:3px solid var(--massing);outline-offset:-3px;background:#eef2f8} #playlist .track.active:focus-visible{background:var(--marin);color:#fff} .large-toggle-btn{ display:block;width:max-content;margin:.25rem auto .5rem; font-size:4.5rem;line-height:1;text-align:center;color:var(--marin); cursor:pointer;border:0;background:none;padding:0; transition:transform .15s ease,color .15s ease;user-select:none; } .large-toggle-btn:hover{color:var(--massing);transform:scale(1.06)} .large-toggle-btn:active{transform:scale(.97)} .spar-hopp{font-size:1.4rem;line-height:1;padding:.1rem .7rem;min-width:48px;min-height:48px;justify-content:center} /* Transportrad: knapparna i kanterna, titeln mitt emellan. Ersätter float:left/ float:right, som la titeln på egen rad och sköt den ur mitten. */ .spelare-rad{display:flex;align-items:center;gap:.6rem} .spelare-titel{flex:1;min-width:0;text-align:center} .spelare-titel .namn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #playerContainer progress{width:100%;height:14px;appearance:none;border:0;margin-top:.4rem} #playerContainer progress::-webkit-progress-bar{background:var(--kant-svag);border-radius:7px} #playerContainer progress::-webkit-progress-value{background:var(--massing);border-radius:7px} #playerContainer progress::-moz-progress-bar{background:var(--massing);border-radius:7px} @media (max-width:576px){ .large-toggle-btn{font-size:3.4rem} #playlist{max-height:38vh} } /* ---------- Meddelande: mottagarval ---------- En spalt per grupp med medlemmarna under rubriken, så man ser vilka man är på väg att skriva till. Kolumnerna fylls efter bredd, inte efter antal grupper. */ .medd-grupper{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.1rem .9rem} .medd-grupp{padding:.2rem 0 .6rem;min-width:0} .medd-grupp .kryss{font-size:0.95rem} .medd-grupp .kryss span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .medd-rubrik{ font-weight:700;color:var(--marin-djup); border-bottom:1px solid var(--kant);padding-bottom:.2rem;margin-bottom:.15rem; } .medd-antal{font-weight:400;font-size:0.9rem;color:var(--text-svag);font-variant-numeric:tabular-nums} /* ---------- Noter: sidrutnätet i Admin Noter ---------- En ruta per sida i en inskannad PDF. Kryssrutan i rutan är den riktiga kontrollen (tabbbar, uppläsbar); .vald är bara den synliga markeringen, och klick var som helst i rutan växlar kryssrutan. */ .notpalett{ /* Toppens höjd MÄTS av internt.js (--topphojd). Här stod 60px handskrivet, och toppen mäter 73 – paletten låg 13 px in under menyn. Talet ändras dessutom när menyn radbryts och när användaren höjer textstorleken i webbläsaren, så det finns inget pixelvärde som hade kunnat vara rätt. */ position:sticky;top:calc(var(--topphojd, 73px) + .5rem);z-index:6;margin-bottom:1rem; background:var(--kort);border:1px solid var(--kant);border-left:4px solid var(--massing); border-radius:var(--radie);box-shadow:var(--skugga);padding:.7rem .9rem; } .notpalett-rad{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .notfamilj{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;margin-bottom:.3rem} .notfamilj-namn{ flex:none;width:6em;font-size:0.85rem;letter-spacing:.08em;text-transform:uppercase; color:var(--text-svag);font-weight:700; } .notinstr{font-size:0.9rem;padding:.5rem .8rem;min-height:44px} .notrutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.8rem} .notsida{ background:var(--kort);border:1px solid var(--kant);border-radius:8px;overflow:hidden; display:flex;flex-direction:column;cursor:pointer; } .notsida:hover{border-color:var(--massing)} .notsida.vald{border-color:var(--marin);box-shadow:0 0 0 3px rgba(22,49,95,.22)} /* Minsta höjden måste rymma en 44 px-knapp uppe OCH sifferbrickan nere utan att de möts – annars är vi tillbaka i buggen där brickan åt upp vridknappens klick. Bilden är normalt mycket högre; det här gäller innan den laddat. */ .notsida-bild{position:relative;background:#fff;min-height:104px} .notsida-bild img{display:block;width:100%;height:auto} /* Vrid- och zoomknappen ligger över miniatyren. 30 px räckte inte här heller – PDF-verktyget hade redan en egen förstoring (.pdfv-kort .notsida-knapp), och sidorna i Admin Noter är precis lika små. */ .notsida-knapp{ position:absolute;top:.3rem;appearance:none;cursor:pointer;font:inherit;font-size:1.1rem;line-height:1; background:rgba(255,255,255,.92);border:1px solid var(--kant-kontroll);border-radius:6px; color:var(--marin);min-width:44px;min-height:44px;display:grid;place-items:center; } .notsida-knapp:hover{background:#fff;border-color:var(--massing-mork)} .notrotera{left:.3rem} .notzoom{right:.3rem} .notsida-kropp{padding:.4rem .55rem .55rem;border-top:1px solid var(--kant-svag)} .notsida-kropp .kryss{font-size:0.95rem;font-weight:600;color:var(--marin-djup)} .notsida-kropp .under{margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notmarken{margin-top:.25rem} button.mark{appearance:none;font:inherit;font-size:0.85rem;font-weight:700;cursor:pointer} button.mark:hover{background:var(--rost-bg);border-color:#e8c3b6;color:var(--rost)} @media (max-width:900px){ /* Navigeringen radbryts på smala skärmar, så en fast sticky-offset skulle lägga paletten över menyn. */ .notpalett{position:static} .notfamilj-namn{width:auto} } /* ---------- PDF-verktyget ---------- Sidkorten återanvänder .notrutnat/.notsida från Admin Noter – det är samma sak på skärmen (en ruta per sida med miniatyr, vrid och zoom) och ska se likadant ut. Här ligger bara det som skiljer: ordningsnummer, flyttknappar, dragning och hur en omarkerad sida ser ut. */ .pdfv-kort{cursor:grab} .pdfv-kort.dras{opacity:.45;cursor:grabbing} /* Omarkerad sida tonas ned – men bara bilden, aldrig texten, och kryssrutan är fortfarande den som bär beskedet (WCAG 1.4.1: färg är inte ensam bärare). */ .pdfv-kort:not(.vald) .notsida-bild img{opacity:.4;filter:grayscale(1)} /* Numret är sidans plats i den nya filen, inte i källfilen. NEDERKANTEN, inte överkanten: där uppe sitter redan .notrotera till vänster och .notzoom till höger, och brickan låg över vridknappen och åt upp klicken. */ .pdfv-nr{ position:absolute;bottom:.3rem;left:.3rem;z-index:1;min-width:1.6rem;height:1.6rem; padding:0 .35rem;border-radius:5px;background:var(--marin-djup);color:var(--massing-ljus); font-size:0.9rem;font-weight:700;line-height:1.6rem;text-align:center; font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(12,26,54,.35); } .pdfv-kort:not(.vald) .pdfv-nr{background:#e4e7ec;color:var(--text-svag);box-shadow:none} /* Vrid- och zoomknappen ligger över miniatyren och ärver .notsida-knapp, som är knappt 30 px. Här är publiken äldre och sidorna små – 44 px är minsta rimliga träffyta, och resten av kortet växlar markeringen om man missar. */ .pdfv-kort .notsida-knapp{min-width:44px;min-height:44px;font-size:1.1rem;line-height:1} .pdfv-flytta{display:flex;gap:.3rem;margin-top:.35rem} .pdfv-flytta .knapp{flex:1;min-width:48px;justify-content:center} /* Källistan under "Filer i arbetsytan" har inga fält kvar sedan sidrutnätet tog över redigeringen – bara knappen behöver en träffyta. */ .pdfv-lista .knapp{min-width:48px} /* ---------- Instrument och koder ---------- Pilarna är bara en pilspets bred, och en knapp med ett tecken i blir smalare än golvet på 44 px hur stor innermarginalen än är. */ .kod-flytta{min-width:48px;justify-content:center} /* ---------- Grupper ---------- Rubriken över ett block som inte är ett enskilt fält: samma utseende som fältets etikett, men ingen