/* Chicago - Art Deco speakeasy-identitet ovanpå Pico. Mörkt (filtbord) som default, ljust (pergament) via prefers-color-scheme. Layout- och animationsnivå styrs av data-layout / data-anim på . */ [x-cloak] { display: none !important; } @font-face { font-family: "Poiret One"; src: url("/static/fonts/poiret-one.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Marcellus"; src: url("/static/fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* Suit-symbolerna (♠♥♦♣) subsettade ur Liberation Serif - metrik-kompatibel med Windows-kärnfonterna (Times/Georgia-stil), som är glyfen jag såg på desktop. Egen inbäddad font => telefon och desktop renderar SAMMA glyf (annars faller .p tillbaka på plattformens font: DejaVu/Liberation på servern, Noto på Android). */ @font-face { font-family: "CardSuits"; src: url("/static/fonts/card-suits.woff2") format("woff2"); font-display: swap; } :root { --felt-1: #0c3527; --felt-2: #08281d; --gold: #c9a24a; --gold-bright: #e7cd86; --cream: #f4ecd6; /* rubriktext (mörknar i ljust läge) */ --card-face-1: #fffdf5; /* kortyta - alltid ljus i bägge teman */ --card-face-2: #f0e6cc; --ink: #ecf3ee; --ink-dim: #9db3a6; /* Subtila ytor/kantlinjer/inputs. Vit-alpha mot mörkt filtbord som default; överrids till mörk-alpha i ljust läge (annars vitt-på-pergament = osynligt). */ --surface: #ffffff0d; --surface-faint: #ffffff08; --surface-hover: #ffffff17; --hair: #ffffff14; --hair-strong: #ffffff26; --field-bg: #ffffff0d; --placeholder: #ffffff55; --suit-red: #c23b30; --suit-dark: #1b1b1b; /* Fyrfärgslek: klöver grön, ruter blå, hjärter röd, spader svart */ --suit-hearts: #c23b30; --suit-diamonds: #2059a8; --suit-spades: #1b1b1b; --suit-clubs: #1f7a44; --danger: #d1584a; --ok: #3f9d78; --card-w: 3.1rem; /* skalas per layout */ --card-h: 4.4rem; --radius: 6px; --anim: 220ms; /* nollställs av data-anim="off" */ --font-display: "Poiret One", "Marcellus", serif; --font-head: "Marcellus", Georgia, serif; --font-body: ui-serif, Georgia, "Times New Roman", serif; /* Pico-överstyrning */ --pico-font-family: var(--font-body); --pico-border-radius: var(--radius); --pico-primary: var(--gold); --pico-primary-hover: var(--gold-bright); --pico-primary-inverse: #1a1205; } /* Kortfärgsschema (TASK-279): valbart alternativ till klassisk fyrfärgslek, satt via data-cards på (classic = default, ingen override behövs). Svenska Bridgeförbundets schema: spader blå, hjärter röd, ruter gul/orange, klöver grön. Kortytan (--card-face-1) är alltid ljus i båda teman, så EN override räcker (ingen ljus/mörk-variant behövs). .scheme-* i selektorlistorna är förhandsvisningen i sidfoten (TASK-705): samma deklaration gäller både dokumentet och minikorten, så färgvärdena finns på ETT ställe. Classic behöver en egen regel eftersom :root bär defaultvärdena. */ :root[data-cards="bridge"], .scheme-bridge { --suit-spades: #1f5fb0; --suit-hearts: #c23b30; --suit-diamonds: #c9670f; --suit-clubs: #1f7a44; } .scheme-classic { --suit-hearts: #c23b30; --suit-diamonds: #2059a8; --suit-spades: #1b1b1b; --suit-clubs: #1f7a44; } /* Tvåfärg (TASK-419): klassiskt rött/svart för den som tycker fyrfärg är rörigt. Återanvänder --suit-red/--suit-dark så tvåfärgsleken följer samma två grundtoner som resten av UI:t. */ :root[data-cards="twocolor"], .scheme-twocolor { --suit-spades: var(--suit-dark); --suit-hearts: var(--suit-red); --suit-diamonds: var(--suit-red); --suit-clubs: var(--suit-dark); } /* ---- Sidfotens inställningar (TASK-705) ---- En rad per post i SETTINGS (platform.js). Ikonknappar i stället för länkar: det ÄR knappar (byter tillstånd, navigerar inte), och aria-pressed berättar vilket val som gäller. Aktivt läge markeras med ram + ökad opacitet, inte bara färg, så det syns även för den som inte skiljer guld från grått. */ .settings-bar { margin: 1.2rem 0 0; } .settings-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .35rem 0; flex-wrap: wrap; } .settings-label { font-size: .78rem; } .settings-options { display: inline-flex; align-items: center; gap: .3rem; } .settings-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; min-height: 1.9rem; padding: .15rem .35rem; margin: 0; background: var(--surface-faint); color: var(--ink-dim); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; opacity: .65; line-height: 1; transition: opacity var(--anim), border-color var(--anim), background var(--anim); } .settings-opt:hover { opacity: .9; background: var(--surface-hover); } .settings-opt.active { opacity: 1; color: var(--gold-bright); border-color: var(--gold); background: #e7cd8614; } .settings-opt:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* Ikonstorlek: SVG:erna är 24x16 (flaggformat), emoji ärver textstorleken. */ .set-icon { width: 1.35rem; height: .9rem; display: block; } .set-flag { border-radius: 2px; box-shadow: 0 0 0 1px #00000030; } /* Kortfärgs-förhandsvisningen: fyra minikort som ärver --suit-* ur .scheme-*. */ .mini-cards { display: inline-flex; gap: 1px; } .mini-card { width: .78rem; height: 1.18rem; border-radius: 1.5px; background: var(--card-face-1); font-size: .95rem; line-height: 1.18rem; text-align: center; font-family: "CardSuits", serif; } .mini-card.s-hearts { color: var(--suit-hearts); } .mini-card.s-diamonds { color: var(--suit-diamonds); } .mini-card.s-spades { color: var(--suit-spades); } .mini-card.s-clubs { color: var(--suit-clubs); } html[data-anim="off"] *, html[data-reduced-motion="true"] *, [data-reduced-motion="true"] ::before, [data-reduced-motion="true"] ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { :root, html { --anim: 0ms !important; } *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Bakgrund: filtbord med deco-strålning ---- */ body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-body); background: radial-gradient(120% 90% at 50% -10%, #12463349 0%, transparent 60%), repeating-conic-gradient(from 90deg at 50% 0%, #ffffff05 0deg 4deg, transparent 4deg 8deg), linear-gradient(160deg, var(--felt-1), var(--felt-2)); background-attachment: fixed; } .wrap { max-width: 40rem; margin: 0 auto; padding: 1.1rem 1rem 3rem; } /* ---- Deco-panel ---- */ .panel { position: relative; background: linear-gradient(180deg, #0f4130, #0a2f22); border: 1px solid var(--hair); border-radius: 10px; padding: 1.4rem 1.2rem; box-shadow: 0 18px 40px #00000055, inset 0 1px 0 #ffffff12; } .panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold); opacity: .35; border-radius: 5px; pointer-events: none; } /* ---- Wordmark ---- */ .wordmark { text-align: center; font-family: var(--font-display); letter-spacing: .12em; font-size: clamp(2rem, 8vw, 3.1rem); margin: .2rem 0 .1rem; color: var(--cream); text-shadow: 0 2px 0 #00000040; } .wordmark .suit-r { color: var(--suit-red); } .tagline { text-align: center; font-family: var(--font-head); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--gold-bright); margin: 0 0 .3rem; } .subtag { text-align: center; color: var(--ink-dim); font-size: .82rem; margin: 0 0 1.1rem; } .rule { height: 0; border: none; margin: 1rem auto; border-top: 1px solid var(--gold); opacity: .4; max-width: 12rem; position: relative; } .rule::after { content: "◆"; color: var(--gold); font-size: .7rem; position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%); background: transparent; padding: 0 .4rem; } h2, h3 { font-family: var(--font-head); letter-spacing: .04em; color: var(--cream); } /* ---- Knappar ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .8rem 1rem; margin: .35rem 0; font-family: var(--font-head); letter-spacing: .06em; font-size: 1rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform var(--anim), box-shadow var(--anim), background var(--anim); } .btn:active { transform: translateY(1px); } button.btn-gold, a.btn-gold, .btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--btn-gold-text, #1a1205); box-shadow: 0 6px 16px #00000040; } button.btn-gold:hover, a.btn-gold:hover, .btn-gold:hover { box-shadow: 0 8px 22px #c9a24a55; } button.btn-ghost, a.btn-ghost, .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hair-strong); } button.btn-ghost:hover, a.btn-ghost:hover, .btn-ghost:hover { background: var(--surface-hover); } button.btn-danger, a.btn-danger, .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); } button.btn-danger:hover, a.btn-danger:hover, .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.active { border-color: var(--gold-bright); color: var(--gold-bright); background: #e7cd8618; } .rules-box { border: 1px solid var(--hair); border-radius: var(--radius); padding: .6rem .7rem; margin: .6rem 0; } .rules-box .lbl { margin: 0 0 .2rem; } .preset-box { border: 1px solid var(--hair); border-radius: var(--radius); padding: .6rem .7rem; margin: .6rem 0; } /* Regelpanel-accordion: yttre "Anpassa regler" + en fällning per grupp. */ .rules-advanced { margin: .5rem 0; } .rules-advanced > summary { cursor: pointer; padding: .55rem .2rem; color: var(--gold-bright); font-weight: 600; border: 1px solid var(--gold); border-radius: var(--radius); } .rules-advanced[open] > summary { margin-bottom: .3rem; } .rules-advanced .rules-box { margin: 0; } .rule-group { border-top: 1px solid var(--hair); } .rule-group:first-of-type { border-top: none; } .rule-group > summary { cursor: pointer; padding: .5rem .2rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .rule-group > summary .lbl { margin: 0; } .rule-group[open] > summary .lbl { color: var(--gold-bright); } .rule-group[open] > summary .group-summary { visibility: hidden; } .group-summary { font-size: .72rem; white-space: nowrap; } /* Icke-värdars kompakta läslista över gällande regler. */ .rules-summary { border: 1px solid var(--hair); border-radius: var(--radius); padding: .5rem .7rem; margin: .6rem 0; } .rules-summary > .lbl { margin: 0 0 .3rem; } .rules-summary-group { margin-bottom: .4rem; } .group-mini { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; margin: .3rem 0 .1rem; } .rules-summary-list { list-style: none; padding: 0; margin: 0; } .rules-summary-list li { font-size: .82rem; padding: .1rem 0; } .rules-summary-row { display: flex; align-items: baseline; gap: .3rem; } .rules-summary-row > span::first-letter { text-transform: uppercase; } .preset-box .rule-group-label { margin-top: 0; } /* Preset-kort: namn på egen rad, admin-knappar (föreslå/radera) i en footer INUTI kortets kant. Vertikalt så det inte svämmar över vid smal mobil. */ .preset-chip { display: inline-flex; flex-direction: column; gap: .3rem; border: 1px solid var(--hair-strong); border-radius: 8px; padding: .35rem .4rem; background: var(--surface); max-width: 100%; vertical-align: top; } .preset-apply { background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-weight: 600; color: var(--ink); padding: .15rem .3rem; border-radius: 6px; } .preset-apply:hover { background: var(--surface-hover); color: var(--accent); } .preset-name { font-weight: 600; color: var(--ink); padding: .15rem .3rem; } /* profil: ej klickbar */ .preset-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: 0 .1rem; } .preset-del, .preset-propose { background: none; cursor: pointer; font: inherit; font-size: .74rem; line-height: 1.3; padding: .12rem .4rem; border-radius: 6px; border: 1px solid var(--hair-strong); color: var(--muted, #999); } .preset-del:hover { color: var(--danger); border-color: var(--danger); } .preset-propose:hover { color: var(--accent); border-color: var(--accent); } .preset-pending { font-size: .68rem; color: var(--muted, #999); font-style: italic; padding: 0 .2rem; } /* Admin-listrader: namn/meta vänster, åtgärder höger; wrappar på smal mobil */ .admin-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem .5rem; padding: .35rem 0; border-bottom: 1px solid var(--hair); } .admin-row-main { min-width: 0; overflow-wrap: anywhere; } .admin-row-actions { display: flex; gap: .3rem; flex-shrink: 0; } .admin-btn { width: auto; margin: 0; padding: .25rem .6rem; font-size: .8rem; } .rule-group-label { margin-top: .8rem; font-size: .9rem; } .rules-box > div:first-of-type .rule-group-label { margin-top: 0; } .rule-row { margin-top: .5rem; } .rule-row--disabled { opacity: .45; pointer-events: none; } .rule-row-head { display: flex; align-items: center; gap: .35rem; } .rule-row-head .lbl { margin: 0; } .rule-info-btn { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .2rem; } .rule-info-btn:hover, .rule-info-btn:focus-visible { color: var(--gold-bright); } .rule-info-text { font-size: .76rem; margin: .1rem 0 .3rem; } .leave-dialog { border: 1px solid var(--gold); border-radius: var(--radius); padding: .7rem .8rem; margin: .6rem 0; background: #00000022; } .leave-dialog .lbl { margin: .4rem 0 .2rem; } /* ---- Kort ---- */ /* Top-margin ger de upplyfta kombinations-/dragkorten utrymme så de inte överlappar innehållet ovanför (t.ex. Chicago-knapparna). */ /* gap måste rymma .card.selected-outlinen (2px + 2px offset varje sida = ~8px) så markeringen på två intilliggande valda kort inte korsar - gäller båda spelen. */ .hand { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .9rem 0 .3rem; } /* Sortera-knapp (rumsregel autosort): liten, centrerad under handen. */ .hand-tools { display: flex; justify-content: center; margin: .1rem 0 .3rem; } .btn-sort { width: auto; margin: 0; padding: .25rem .7rem; font-size: .8rem; letter-spacing: .04em; background: var(--surface); color: var(--ink); border: 1px solid var(--hair-strong); border-radius: var(--radius); font-family: var(--font-head); cursor: pointer; } .btn-sort:hover { background: var(--surface-hover); } .hand .card { touch-action: none; /* dra-ordna utan att sidan scrollar */ user-select: none; -webkit-user-select: none; /* ingen textmarkering vid drag */ cursor: grab; } .hand .card.dragging { cursor: grabbing; } .card { width: var(--card-w); height: var(--card-h); /* Pico ger span:ar 1rem padding via --pico-spacing; med box-sizing:border-box krymper det kortets content-box så att den centrerade suit-pippen (bredare än boxen) landar snett i sidled. Nolla den så pippen centreras rent. */ padding: 0; border-radius: var(--radius); background: linear-gradient(160deg, var(--card-face-1), var(--card-face-2)); color: var(--suit-dark); border: 1px solid #00000030; box-shadow: 0 4px 10px #00000045; position: relative; flex: 0 0 auto; font-family: var(--font-head); display: grid; place-items: center; cursor: default; overflow: hidden; /* suit-glyfen får aldrig spilla ut över kortkanten (fontmetriken varierar per enhet; box-shadow/outline/transform klipps ej) */ transition: transform var(--anim), box-shadow var(--anim), outline-color var(--anim); } .card .r { position: absolute; top: 3px; left: 5px; font-size: .82rem; line-height: 1; } /* 2.6rem (ej 3rem) i ett 3.1rem-brett kort -> marginal så breda suit-glyfer på mobil inte trycks mot/utanför kanten. Minikort/trickhög har egna mindre värden. */ /* Suit-glyfen sitter ~0.05em högt i em-boxen (place-items:center centrerar boxen, inte bläcket) - em-baserad nudge ner skalar lika för hand- och minikort. */ .card .p { font-family: "CardSuits", serif; font-size: 2.6rem; line-height: 1; transform: translateY(0.05em); } .mini .card .p { font-size: 1.4rem; } /* minikort: håll symbolen liten */ .card.s-hearts, .chip.s-hearts, .suit-order .s-hearts { color: var(--suit-hearts); } .card.s-diamonds, .chip.s-diamonds, .suit-order .s-diamonds { color: var(--suit-diamonds); } .card.s-spades, .chip.s-spades, .suit-order .s-spades { color: var(--suit-spades); } .card.s-clubs, .chip.s-clubs, .suit-order .s-clubs { color: var(--suit-clubs); } .card.selectable { cursor: pointer; } .card.selectable:hover { transform: translateY(-6px); } .card.selected { outline: 2px solid var(--gold-bright); outline-offset: 2px; transform: translateY(-10px); } .card.playable { cursor: pointer; } .card.playable:hover { transform: translateY(-8px); box-shadow: 0 10px 20px #00000055; } .card.disabled { opacity: .5; filter: grayscale(.4); } .card.swapslot { outline: 2px dashed var(--gold-bright); outline-offset: 2px; } .card.preselectable { cursor: pointer; } .card.preselectable:hover { transform: translateY(-5px); } .card.preplay { outline: 2px dashed var(--gold-bright); outline-offset: 2px; transform: translateY(-9px); box-shadow: 0 8px 18px #00000055; } .card.trickbest { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* just nu högst */ /* Budgivningens rang-stepper: claim-kort mellan -/+, tryckbart för att buda. */ .bid-stepper { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .5rem 0 .6rem; } .bid-stepper .bid-step { width: 2.6rem; height: 2.6rem; min-width: 0; padding: 0; margin: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; flex: 0 0 auto; } .card.bid-claim { cursor: pointer; outline: 2px solid var(--gold-bright); outline-offset: 2px; } .card.bid-claim:hover { transform: translateY(-6px); box-shadow: 0 10px 20px #00000055; } .bid-drive .bid-hint { font-size: .78rem; margin-top: .35rem; } /* Kort som bildar din aktuella kombination skjuts upp lite. */ .card.incombo { transform: translateY(-11px); box-shadow: 0 10px 20px #00000055; } .mini .card.incombo { transform: translateY(-6px); box-shadow: 0 5px 10px #00000055; } /* mindre lyft för minikort */ .card.trickwin { outline: 3px solid var(--gold-bright); outline-offset: 2px; box-shadow: 0 0 16px #e7cd8688, 0 4px 10px #00000045; /* bekräftad vinnare */ } .card.enter { animation: dealin var(--anim) ease both; } @keyframes dealin { from { transform: translateY(12px) rotate(-4deg); opacity: 0; } } /* Kortbaksida (motståndare) */ .card.back { background: repeating-linear-gradient(45deg, #0e3b2c 0 6px, #0a2e22 6px 12px); border: 1px solid var(--gold); } .card.back::after { content: "◆"; color: var(--gold); opacity: .6; } /* Utspelad hög av egna kort - fannas ut vid hover/tap */ .pile-slot { min-height: calc(var(--card-h) + 1.5rem); } /* reserverar egna-kort-högens plats */ .pile-wrap { text-align: center; margin: .5rem 0; } .pile-wrap .dim { display: block; margin-bottom: .3rem; } .played-pile { position: relative; height: var(--card-h); margin: 0 auto; cursor: pointer; overflow: visible; } .played-pile .card { position: absolute; top: 0; left: 0; transform: translateX(calc(var(--i) * 9px)); transition: transform var(--anim); box-shadow: -2px 2px 7px #00000055; } .played-pile:hover .card, .played-pile.fanned .card { /* Bredare fan så färgsymbolen i mitten syns, inte bara rank i hörnet. */ transform: translateX(calc(var(--i) * var(--card-w) * 0.7)); } .mini { --card-w: 1.5rem; --card-h: 2.1rem; } .mini .p { font-size: .8rem; } .mini .r { font-size: .55rem; } /* ---- Bord / stick ---- */ .table { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; /* Reserverar plats för ett spelat kort + namn så bordet inte hoppar i höjd. */ min-height: calc(var(--card-h) + 3.3rem); align-items: center; padding: 1rem; margin: .6rem 0; border: 1px dashed var(--hair-strong); border-radius: 10px; background: #00000022; } .played { text-align: center; } .played .who { font-size: .62rem; color: var(--ink-dim); margin-top: .2rem; font-family: var(--font-head); letter-spacing: .04em; } /* ---- Spelarlista / poäng ---- */ .players { list-style: none; padding: 0; margin: .5rem 0; } .players li { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; margin: .3rem 0; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface-faint); } .players li.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-bright) inset; } .players li.revealwin { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-bright) inset; } .players li.out { opacity: .45; text-decoration: line-through; } /* Kombination + vinnarstjärna i spelarlistan under reveal - vänsterställd efter namnet (tabbstopp via namnets min-width). */ .rvl-combo { color: var(--gold-bright); font-size: .78rem; font-family: var(--font-head); letter-spacing: .02em; } .rvl-medal { color: var(--gold-bright); font-size: .9rem; } .pl-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .players .name { flex: 0 0 auto; min-width: 5rem; font-family: var(--font-head); letter-spacing: .03em; } .players .score { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-bright); } .badge { font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; padding: .12rem .4rem; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-bright); } .badge.host { border-color: var(--gold); } .badge.chic { border-color: var(--suit-red); color: #f0a49b; } .badge.chic.broken { text-decoration: line-through; opacity: .8; color: var(--danger); border-color: var(--danger); } .badge.win { border-color: var(--gold-bright); color: #1a1205; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); } /* Botantal i server-browsern: gemener, dämpad ton (inte en prestation) */ .badge.bot { text-transform: none; letter-spacing: 0; border-color: var(--ink-dim); color: var(--ink-dim); } /* Statistik-badges (Chicago-utfall + fyrtal-nollning): siffror, inte versaler. */ .badge.stat { text-transform: none; letter-spacing: 0; font-weight: 600; } /* Egna färgvärden, INTE --suit-*: badgarna är statusdekor och ska inte byta färg med kortfärgsschemat (i tvåfärg blev won svart och quad röd). */ .badge.stat.won { border-color: #1f7a44; color: #6fcf97; } .badge.stat.lost { border-color: var(--danger); color: #f0a49b; } .badge.stat.quad { border-color: #2059a8; color: #7fb0e8; } .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); } .dot.off { background: #6b6b6b; } /* ---- Kod / dela ---- */ .code { font-family: var(--font-display); letter-spacing: .35em; font-size: 2.2rem; text-align: center; color: var(--gold-bright); padding: .3rem 0 .1rem; } /* ---- Meddelandelogg ---- */ .log { margin: .8rem 0 0; max-height: 8.5rem; overflow-y: auto; } .log p { margin: .18rem 0; font-size: .82rem; color: var(--ink-dim); padding-left: .8rem; border-left: 2px solid var(--hair); } /* Löpande loggens rader wrappas i (fas-rubrik ELLER meddelande) - highlighta bara det sista faktiska meddelandet, inte varje

i sin span. */ .log > span:last-child p { color: var(--ink); border-color: var(--gold); } /* Fas-rubrik i loggen (löpande + slutlogg): diskret sektionshuvud, ingen kantlinje. */ .log-phase { border-left: none !important; padding-left: 0; margin: .45rem 0 .12rem; color: var(--gold-bright) !important; font-family: var(--font-head); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .log > span:first-child .log-phase { margin-top: 0; } /* Fullständig logg vid spelslut: högre, egen ram, grupperad per omgång */ .full-log { max-height: 24rem; overflow-y: auto; border: 1px solid var(--hair); border-radius: var(--radius); padding: .4rem .6rem; margin-top: .5rem; text-align: left; } .full-log .log { max-height: none; overflow: visible; margin: .1rem 0 .5rem; } .full-log p:last-child { color: var(--ink-dim); border-color: var(--hair); } .full-log-round { margin-bottom: .2rem; } .full-log-round-head { width: 100%; text-align: left; background: none; border: none; margin: 0; color: var(--gold-bright); font-family: var(--font-head); font-size: .84rem; letter-spacing: .04em; padding: .3rem 0; cursor: pointer; } .score-row { color: var(--gold-bright); font-size: .78rem; font-weight: 600; border-left-color: var(--gold) !important; } .chip { display: inline-flex; align-items: center; background: var(--card-face-1); color: var(--suit-dark); border: 1px solid #00000030; border-radius: 3px; padding: 0 3px; margin: 0 1px; font-size: .72rem; font-family: var(--font-head); line-height: 1.5; } /* Kombinationen i loggen: EN gyllene box runt hela gruppen (inte varje kort) */ .combo-box { display: inline-flex; gap: 1px; padding: 1px 2px; border-radius: 4px; outline: 2px solid var(--gold-bright); outline-offset: 1px; margin: 0 1px; } /* Svårighetstagg direkt efter bot-namn (spelarlista + logg): 🤖 (nivå) */ .bot-tag { color: var(--ink-dim); font-size: .8rem; white-space: nowrap; margin-left: .1rem; } /* Svep-visning: korten slängs fram och droppar in ett i taget (fallande) */ .sweep-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0; } .sweep-card { animation: sweep-drop .35s ease both; animation-delay: calc(var(--i) * .13s); } @keyframes sweep-drop { from { opacity: 0; transform: translateY(-22px) rotate(-5deg); } to { opacity: 1; transform: none; } } /* ---- Toast / fel ---- */ .toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: #1a1205; color: #f4ecd6; border: 1px solid var(--gold); padding: .7rem 1.1rem; border-radius: var(--radius); z-index: 50; box-shadow: 0 10px 30px #00000066; font-family: var(--font-head); max-width: 90vw; } .status { text-align: center; color: var(--ink-dim); font-style: italic; margin: .8rem 0; } /* ---- Turtimer ---- */ .turn-timer-slot { min-height: 1.7rem; } /* reserverar timerns rad även när den är dold */ .combo-line { min-height: 1.5rem; margin: .3rem 0; } /* reserverar "Din kombination"-raden så handen inte hoppar */ /* Byte: reservera status- (ovan hand) och kontrollutrymme (under hand) med fast höjd, så handens Y aldrig flyttas och Byt/Avstår aldrig dyker upp under fingret när turen växlar (persistent hand delas mellan din-tur/väntar). */ .swap-status-slot { min-height: 5rem; display: flex; flex-direction: column; justify-content: center; } .swap-status-slot p { margin: .15rem 0; } /* kompakta rader så båda turerna ryms i sloten (= min-height) och handens Y är fast */ .swap-controls-slot { min-height: 5.4rem; margin-top: .6rem; } /* Trickspel: status/"kan inte följa"/"spela ut resten" NEDANFÖR handen i en reserverad slot (fast höjd) så handen inte hoppar och inget under flyttas när texten/knappen dyker upp/försvinner. */ .trick-status-slot { min-height: 4.6rem; margin-top: .4rem; } .trick-status-slot p { margin: .25rem 0; } /* Budloggen: fast höjd + auto-skroll till senaste steget (x-effect i templaten) så den inte bygger på höjd rad-för-rad med den finare per-steg-avslöjningen. */ .bid-log { max-height: 8.5rem; overflow-y: auto; } .turn-timer { font-family: var(--font-head); letter-spacing: .05em; font-size: .82rem; color: var(--ink-dim); margin: .2rem 0 .4rem; } .turn-timer.mine { color: var(--gold-bright); } .turn-timer.warn { color: #e0b83a; } /* gult vid halva tiden */ .turn-timer.crit { color: var(--danger); font-weight: bold; } /* rött sista 15% */ /* ---- Chatt ---- */ .chat { margin: 1rem 0 .3rem; } .chat-toggle { background: none; border: none; color: var(--gold-bright); cursor: pointer; font-family: var(--font-head); letter-spacing: .04em; font-size: .82rem; padding: .2rem 0; } .chat-toggle.unread { font-weight: 700; } .suit-order { display: inline-flex; gap: .25rem; align-items: center; background: var(--card-face-1); color: var(--suit-dark); border-radius: 4px; padding: .05rem .35rem; margin-left: .3rem; font-weight: 700; } .chat-log { max-height: 8rem; overflow-y: auto; margin: .3rem 0 .5rem; border: 1px solid var(--hair); border-radius: var(--radius); padding: .4rem .6rem; background: #00000022; } .chat-log p { margin: .18rem 0; font-size: .85rem; } .chat-name { color: var(--gold-bright); font-family: var(--font-head); } /* ---- Reveal / utmärkelse ---- */ .award { font-family: var(--font-head); color: var(--gold-bright); letter-spacing: .06em; font-size: 1.1rem; margin: .1rem 0 .2rem; } .reveal-in { animation: revealin var(--anim) ease both; } @keyframes revealin { from { opacity: 0; transform: translateY(8px); } } .medal { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1205; font-size: .8rem; border: 1px solid var(--gold-bright); flex: 0 0 auto; } .reveal-grid { margin: .8rem 0; text-align: left; } .reveal-row { padding: .55rem .7rem; margin: .4rem 0; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface-faint); } .reveal-row.best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-bright) inset; } .reveal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .reveal-head .rname { font-family: var(--font-head); letter-spacing: .03em; } .reveal-head .combo { flex: 1; color: var(--gold-bright); font-size: .82rem; font-family: var(--font-head); } .reveal-head .score { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-bright); } .reveal-row .hand { justify-content: flex-start; gap: .25rem; } .field { width: 100%; padding: .75rem; margin: .3rem 0 .6rem; border-radius: var(--radius); border: 1px solid var(--hair-strong); background: var(--field-bg); color: var(--ink); font-size: 1rem; font-family: var(--font-body); } .field::placeholder { color: var(--placeholder); } label.lbl { font-family: var(--font-head); letter-spacing: .05em; font-size: .8rem; color: var(--gold-bright); } .row { display: flex; gap: .5rem; } .row .btn { margin: .35rem 0; } /* Återanvändbar modal-host (app-rot). Innehållet väljs via modal.type. */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #0009; backdrop-filter: blur(2px); } .modal-box { max-width: 26rem; width: 100%; max-height: 85vh; overflow-y: auto; background: linear-gradient(180deg, #0f4130, #0a2f22); color: var(--ink); border: 1px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 18px 44px #000a; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; } .modal-head h3 { margin: 0; } .modal-close { width: auto; margin: 0; padding: 0 .4rem; background: none; border: none; color: var(--ink-dim); font-size: 1.7rem; line-height: 1; cursor: pointer; } .modal-close:hover { color: var(--ink); } /* I modal har rules-summary redan en inramning runtomkring - släpp den egna */ .modal-body .rules-summary { border: none; padding: 0; margin: 0; } /* Spelväljare: vald-spel-rad i create-vyn + spelkort i modalen */ .selected-game { display: flex; align-items: center; gap: .6rem; } .selected-game-icon { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; } .selected-game-name { display: flex; flex-direction: column; line-height: 1.15; } .selected-game-name .lbl { margin: 0; font-size: .68rem; } .selected-game-change { margin: 0 0 0 auto; flex: 0 0 auto; width: auto; } .game-picker { display: flex; flex-direction: column; gap: .8rem; } .game-card { display: flex; gap: .8rem; padding: .7rem; border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--surface); } .game-illustration { flex: 0 0 auto; width: 4rem; height: 5rem; border-radius: var(--radius); display: grid; place-items: center; font-size: 2.4rem; background: linear-gradient(160deg, var(--card-face-1), var(--card-face-2)); border: 1px solid #00000025; box-shadow: 0 3px 8px #00000030; } .game-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; } .game-card-head { display: flex; align-items: center; gap: .35rem; } .game-card-head h4 { margin: 0; font-family: var(--font-head); } .game-card-body p { margin: 0; font-size: .82rem; } .game-card-rules { border-top: 1px solid var(--hair); padding-top: .35rem; } .game-rules-intro { font-size: .8rem; margin: 0 0 .3rem; } .game-variations li { padding: .2rem 0; } .game-variations .lbl { margin: 0; } .game-variation-info { display: block; font-size: .72rem; line-height: 1.3; } .game-choose { margin: .3rem 0 0; } .game-choose.active { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* Filter/sortering i server-browsern: staplat på mobil, i rad från 480px */ .lobby-filters { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; } .lobby-filters .field { margin: 0; } .lobby-filter-check { display: flex; align-items: center; gap: .45rem; color: var(--ink); font-family: var(--font-body); letter-spacing: normal; text-transform: none; } .lobby-filter-check input { width: auto; margin: 0; } @media (min-width: 480px) { .lobby-filters { flex-direction: row; flex-wrap: wrap; align-items: end; } .lobby-filters > label:not(.lobby-filter-check) { flex: 1 1 10rem; } .lobby-filter-check { flex: 0 0 100%; } } .center { text-align: center; } .dim { color: var(--ink-dim); } /* ---- Desktop: större kort, luftigare ---- */ @media (min-width: 900px) { :root { --card-w: 4rem; --card-h: 5.7rem; } .wrap[data-wide] { max-width: 52rem; } } html[data-layout="desktop"] { --card-w: 4.4rem; --card-h: 6.3rem; } /* ---- Ljust läge: pergamentbord ---- */ /* Ljust tema (pergament). Aktiveras av data-theme="light" på (temaväxlaren i footern). "auto" resolvas av JS via matchMedia till light/dark och sätter data-theme, så CSS behöver bara ETT ljus-block - ingen @media/data-theme-dubblering. Mörkt = base :root (data-theme="dark" el. resolvat dark). Kontosidorna länkar inte denna fil. */ :root[data-theme="light"] { --felt-1: #e9dcc0; --felt-2: #d8c8a4; --ink: #26332b; --ink-dim: #5c6b60; --cream: #123a2b; --gold: #8a6b22; --gold-bright: #6f5518; /* mörkare guld för kontrast på pergament */ --btn-gold-text: #fffdf5; /* Vänd subtila ytor/kantlinjer till mörk-alpha så de syns mot pergament. */ --surface: #0000000c; --surface-faint: #00000008; --surface-hover: #00000016; --hair: #0000001f; --hair-strong: #0000003a; --field-bg: #fffdf7; --placeholder: #00000066; } :root[data-theme="light"] body { color: var(--ink); } :root[data-theme="light"] .panel { background: linear-gradient(180deg, #fbf4e2, #f1e7cd); border-color: #00000018; } :root[data-theme="light"] .modal-box { background: linear-gradient(180deg, #fbf4e2, #f1e7cd); border-color: #00000030; } :root[data-theme="light"] .panel::before { opacity: .55; } :root[data-theme="light"] .wordmark { color: #123a2b; } :root[data-theme="light"] h2, :root[data-theme="light"] h3 { color: #123a2b; } :root[data-theme="light"] .players li { background: #00000008; border-color: #00000016; } :root[data-theme="light"] .table { background: #ffffff40; border-color: #00000022; } :root[data-theme="light"] .log p { color: var(--ink-dim); } /* Konto-UI (inloggning/registrering i entry-vyn) */ .account-box { margin: .3rem 0; text-align: center; } .account-box .btn { margin-top: .4rem; } .auth-err { color: var(--danger); font-size: .85rem; margin: .3rem 0; text-align: center; } /* Topplista (Fas 5) */ .leaderboard { width: 100%; border-collapse: collapse; margin: .3rem 0 .6rem; font-size: .9rem; } .leaderboard th, .leaderboard td { padding: .35rem .5rem; border-bottom: 1px solid var(--hair); text-align: left; } .leaderboard th { color: var(--gold-bright); font-family: var(--font-head); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .leaderboard td:first-child, .leaderboard th:first-child { color: var(--ink-dim); width: 2rem; } .leaderboard .num { text-align: right; font-variant-numeric: tabular-nums; } .leaderboard tbody tr:first-child td { color: var(--gold-bright); font-weight: 600; } .leaderboard-player { display: inline-flex; align-items: center; gap: .4rem; max-width: clamp(5rem, 28vw, 14rem); min-width: 0; color: inherit; } .leaderboard-player .avatar { flex: 0 0 auto; } .leaderboard-player span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Liten inline-textknapp (t.ex. "koppla loss" i profilens kopplade inloggningar) */ .link-inline { background: none; border: none; padding: 0 0 0 .25rem; margin: 0; color: var(--gold-bright); font-size: .78rem; cursor: pointer; text-decoration: underline; } .link-inline:hover { color: var(--cream); } .linked-row { display: flex; align-items: baseline; gap: .1rem; margin-top: .2rem; flex-wrap: wrap; } /* SSO-inloggningsknapp (login-menyn & profilens koppla-knappar) */ .sso-btn-google, .sso-btn-github, .sso-btn-discord, a.sso-google, a.sso-github, a.sso-discord { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; } .sso-btn-google:hover, .sso-btn-github:hover, .sso-btn-discord:hover, a.sso-google:hover, a.sso-github:hover, a.sso-discord:hover, .sso-btn-google:focus, .sso-btn-github:focus, .sso-btn-discord:focus, a.sso-google:focus, a.sso-github:focus, a.sso-discord:focus { text-decoration: none !important; } .sso-btn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-family: var(--font-body, inherit); letter-spacing: 0; font-size: .82rem; gap: .5rem; padding: .8rem .6rem; } .sso-btn-google:hover { background: #f7f8f8; color: #1f1f1f; } .sso-btn-github { background: #24292e; color: #fff; border: 1px solid #444c56; font-family: var(--font-body, inherit); letter-spacing: 0; font-size: .82rem; gap: .5rem; padding: .8rem .6rem; } .sso-btn-github:hover { background: #2c3137; color: #fff; } .sso-btn-discord { background: #5865F2; color: #fff; border: 1px solid #4752c4; font-family: var(--font-body, inherit); letter-spacing: 0; font-size: .82rem; gap: .5rem; padding: .8rem .6rem; } .sso-btn-discord:hover { background: #4752c4; color: #fff; } .sso-svg-logo { flex: none; width: 1.15rem; height: 1.15rem; display: inline-block; vertical-align: middle; } /* SSO-avatar (profilbild). Liten i kontoboxen, större i profilen. */ .avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 1px solid var(--hair); } .avatar-lg { width: 3rem; height: 3rem; } /* Avatar-väljare (TASK-316, omdesign): tre benämnda val - SSO-bubbla i respektive sso-provider-card, "ingen bild" och "egen bild" som egna kort ovanför. Aktivt val ringas in med guld + en liten bock-badge, samma markering i alla tre kategorier. */ .avatar-bubble-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; flex: none; margin: 0; padding: .15rem; background: none; border: 2px solid transparent; border-radius: 50%; line-height: 0; cursor: pointer; transition: border-color var(--anim, 150ms); } .avatar-bubble-btn .avatar { width: 2rem; height: 2rem; } .avatar-bubble-btn.active { border-color: var(--gold-bright, #e7cd86); } /* Guldkant vid hover/fokus (dimmare än det aktiva ljusguldet) - signalerar att bubblan är klickbar (väljbar avatar). Aktiv behåller full ljusguld. */ .avatar-bubble-btn:hover, .avatar-bubble-btn:focus-visible { border-color: var(--gold, #c9a24a); } .avatar-bubble-btn.active:hover, .avatar-bubble-btn.active:focus-visible { border-color: var(--gold-bright, #e7cd86); } .avatar-selected-badge { position: absolute; bottom: -2px; right: -2px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--gold-bright, #e7cd86); color: #1a1205; font-size: .68rem; line-height: 1.05rem; text-align: center; border: 1px solid var(--gold, #b8912f); font-weight: 700; } .avatar-options-list { display: flex; flex-direction: column; gap: 0.45rem; } .avatar-option-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair, rgba(255, 255, 255, 0.1)); border-radius: 6px; transition: background 0.15s ease, border-color 0.15s ease; } .avatar-option-card.active { background: #e7cd8614; border-color: var(--gold, #b8912f); } .avatar-option-info { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .avatar-option-label { font-weight: 600; font-size: 0.85rem; color: var(--cream, #f0f0f0); } .avatar-option-action { display: flex; gap: .35rem; flex-wrap: wrap; } .avatar-option-action .btn-xs { font-size: 0.75rem; padding: 0.25rem 0.6rem; margin: 0; border-radius: 4px; } /* SSO-inloggningsknapp & leverantörskort i profilen */ .sso-profile-section { margin: 0.8rem 0; } .sso-providers-list { display: flex; flex-direction: column; gap: 0.45rem; } .sso-provider-card { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair, rgba(255, 255, 255, 0.1)); border-radius: 6px; transition: background 0.15s ease, border-color 0.15s ease; } .sso-provider-card.linked { background: rgba(46, 160, 67, 0.06); border-color: rgba(46, 160, 67, 0.3); } .sso-provider-info { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .sso-provider-details { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sso-provider-name { font-weight: 600; font-size: 0.85rem; color: var(--cream, #f0f0f0); } .sso-provider-email { font-size: 0.75rem; color: var(--ok, #4ade80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sso-provider-status { font-size: 0.75rem; opacity: 0.6; } .sso-provider-action .btn-xs { font-size: 0.75rem; padding: 0.25rem 0.6rem; margin: 0; border-radius: 4px; text-decoration: none !important; } .sso-unlink-btn { color: var(--err, #f87171) !important; border: 1px solid rgba(248, 113, 113, 0.3) !important; background: rgba(248, 113, 113, 0.05) !important; } .sso-unlink-btn:hover { background: rgba(248, 113, 113, 0.18) !important; border-color: rgba(248, 113, 113, 0.6) !important; color: #ef4444 !important; } .sso-connect-btn, .sso-connect-btn:hover, .sso-connect-btn:focus, .sso-connect-btn:active, .sso-connect-btn *, .sso-connect-actions a, .sso-connect-actions a * { text-decoration: none !important; } .sso-connect-btn { color: var(--gold-bright, #facc15) !important; border: 1px solid rgba(250, 204, 21, 0.3) !important; background: rgba(250, 204, 21, 0.05) !important; } .sso-connect-btn:hover { background: rgba(250, 204, 21, 0.18) !important; border-color: rgba(250, 204, 21, 0.6) !important; color: var(--gold-bright, #facc15) !important; } /* Login-raden: vanliga "Logga in" smalare, SSO-knapparna bredare. Radbryts vid behov (fler SSO-providers än ryms brett - annars overflow på mobil). OBS: flex-basis måste vara 0 (inte auto) - .btn har width:100% som annars blir flex-basis via "auto" och tvingar varje knapp till egen rad även på desktop. */ .auth-row { flex-wrap: wrap; } .auth-row .btn { flex: 1 1 0; } .auth-row .sso-btn-google, .auth-row .sso-btn-github, .auth-row .sso-btn-discord { flex: 1.9 1 0; } /* Admin UI Refactor (TASK-224) */ .admin-settings-layout { display: flex; gap: 1.5rem; margin-top: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-height: 600px; } .admin-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.2rem; border-right: 1px solid var(--border); padding-right: 1rem; } .admin-content { flex-grow: 1; min-width: 0; } button.tab-btn, .tab-btn { width: 100%; text-align: left; padding: 0.4rem 0.8rem; margin-bottom: 0.2rem; justify-content: flex-start; border: 1px solid transparent; color: var(--dim); background: transparent; } button.tab-btn:hover, .tab-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); } button.tab-btn.active, .tab-btn.active { color: var(--fg); background: var(--surface); border-color: var(--border); font-weight: 600; } .nav-header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin: 1rem 0 0.5rem 0.5rem; font-weight: bold; } /* PicoCSS overrides for simple-datatables to fit the theme natively */ .dataTable-wrapper, .datatable-wrapper { color: var(--fg); font-size: 0.95rem; max-width: 100%; } /* Bibliotekets egen CSS laddas inte (bara JS) - ge tabellen en egen horisontell scroll-container så en bred tabell scrollar inuti sin box i st f att trycka ut sidan på smal mobil (annars ~11px sidoverflow vid 390px). */ .dataTable-container, .datatable-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dataTable-top, .dataTable-bottom, .datatable-top, .datatable-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .dataTable-selector, .dataTable-input, .datatable-selector, .datatable-input { background-color: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.8rem; } .dataTable-input:focus, .dataTable-selector:focus, .datatable-input:focus, .datatable-selector:focus { border-color: var(--accent); outline: none; } .dataTable-table, .datatable-table { width: 100%; border-collapse: collapse; display: table !important; } .dataTable-table > thead, .datatable-table > thead { display: table-header-group !important; } .dataTable-table > tbody, .datatable-table > tbody { display: table-row-group !important; } .dataTable-table > thead > tr, .datatable-table > tbody > tr { display: table-row !important; } .dataTable-table > thead > tr > th, .datatable-table > thead > tr > th { display: table-cell !important; border-bottom: 2px solid var(--border); color: var(--fg); font-weight: 600; padding: 0.8rem 0.5rem; text-align: left; } .dataTable-sorter, .datatable-sorter, button.datatable-sorter { background: transparent !important; border: none !important; color: inherit !important; padding: 0 !important; margin: 0 !important; font-weight: inherit !important; text-align: left !important; box-shadow: none !important; width: 100% !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .dataTable-sorter:hover, .dataTable-sorter:focus, .datatable-sorter:hover, .datatable-sorter:focus { background: transparent !important; color: var(--accent) !important; box-shadow: none !important; } .dataTable-table > thead > tr > th[aria-sort="ascending"] .dataTable-sorter::after, .dataTable-table > thead > tr > th[aria-sort="ascending"] .datatable-sorter::after { content: " ↑"; opacity: 0.5; } .dataTable-table > thead > tr > th[aria-sort="descending"] .dataTable-sorter::after, .dataTable-table > thead > tr > th[aria-sort="descending"] .datatable-sorter::after { content: " ↓"; opacity: 0.5; } .dataTable-table > tbody > tr > td, .datatable-table > tbody > tr > td { display: table-cell !important; border-bottom: 1px solid var(--hair); padding: 0.8rem 0.5rem; vertical-align: middle; text-align: left; } /* Låt lång e-post (den .dim-märkta raden) brytas i st f att bredda Namn-kolumnen och trycka ut Åtgärder. Visningsnamnet bryts INTE mitt itu. Åtgärder-cellen (sista) hålls ihop så knapparna aldrig radbryts. */ .datatable-table > tbody > tr > td:first-child .dim { overflow-wrap: anywhere; } .datatable-table > tbody > tr > td:last-child { white-space: nowrap; } .datatable-table .admin-row-actions { display: inline-flex; gap: .3rem; } .dataTable-pagination, .datatable-pagination { margin: 0; } .dataTable-pagination li, .datatable-pagination li { display: inline-block; margin: 0 0.1rem; } .dataTable-pagination a, .datatable-pagination a { color: var(--fg); padding: 0.4rem 0.8rem; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; } .dataTable-pagination a:hover, .datatable-pagination a:hover { background-color: var(--surface); border-color: var(--border); } .dataTable-pagination .active a, .dataTable-pagination .active a:focus, .dataTable-pagination .active a:hover, .datatable-pagination .active a, .datatable-pagination .active a:focus, .datatable-pagination .active a:hover { background-color: var(--accent); color: var(--bg); border-color: var(--accent); } .dataTable-info, .datatable-info { color: var(--dim); } @media (max-width: 768px) { .admin-settings-layout { flex-direction: column; } .admin-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1rem; flex-direction: row; flex-wrap: wrap; align-items: center; } .tab-btn { width: auto; margin-bottom: 0; padding: 0.3rem 0.6rem; } .nav-header { width: 100%; margin-left: 0; } } /* Topplistans regelfilter (TASK-714). Egen rad ovanför tabellen; select:en ärver Pico men behöver inte fylla hela bredden på desktop. */ .lb-rules-filter { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; } .lb-rules-filter label { font-size: .8rem; white-space: nowrap; } .lb-rules-filter select { margin: 0; max-width: 22rem; font-size: .85rem; }