/* Topmærket app shell — mobile-first, high contrast */ /* * Lock the shell to the viewport. If body only has min-height, it grows with content * (~1000px+) and the wheel scrolls the document while the real overflow is on * .topmaerket-main — then the wheel often does nothing (arrow keys still move .topmaerket-main). */ /* * WP admin-bar tilføjer html { margin-top: 32px|46px !important; } for at skubbe indhold ned. * Vores body er position:fixed med egen top-offset — sammen giver det ofte dobbelt skub eller at * app-headeren ender visuelt under #wpadminbar. Nulstil html-margin her og styr kun via body.top. */ html:has(body.topmaerket-canvas-page) { margin-top: 0 !important; height: 100%; overflow: hidden; } body.topmaerket-canvas-page { margin: 0; padding: 0; background: #0b1220; box-sizing: border-box; position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* [Claude] v0.17.4: Anvend gemt tema FØR paint — fjerner flash-of-dark når brugeren har valgt light. Inline-script i app-canvas.php sætter data-theme-pref på baseret på localStorage. Vi skal sætte BÅDE body-bg OG CSS-variablerne på .topmaerket-root, fordi root-elementet bruger var(--bv-bg) — variablen er hardcoded dark på .topmaerket-root indtil JS når at sætte data-theme="light". Med html-level fallback er variablerne light fra første paint. */ html[data-theme-pref="light"] body.topmaerket-canvas-page { background: #faf9f5; color: #0f172a; } html[data-theme-pref="light"] .topmaerket-root, html[data-theme-pref="light"] .topmaerket-shell { --bv-bg: #faf9f5; --bv-surface: #ffffff; --bv-card: #ffffff; --bv-text: #0f172a; --bv-muted: #64748b; --bv-border: #e5e7eb; --bv-shadow: rgba(15, 23, 42, 0.06); } html[data-theme-pref="light"] .topmaerket-shell > p, html[data-theme-pref="light"] #topmaerket-canvas > .topmaerket-shell > p { color: #0f172a; } /* Logged-in: reserver plads til #wpadminbar (samme højde som Core: 32px / 46px smalt). */ body.topmaerket-canvas-page.admin-bar { top: var(--wp-admin--admin-bar--height, 32px); } #topmaerket-canvas { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; padding: 0; /* Undgå at tema/global styles gør
til scrollport — så forsvinder app-headeren opad. */ overflow: hidden; max-height: 100%; } .topmaerket-root, .topmaerket-shell { --bv-bg: #0b1220; --bv-surface: #111827; --bv-card: #1e293b; --bv-text: #f8fafc; --bv-muted: #94a3b8; --bv-accent: #38bdf8; --bv-ready: #16a34a; --bv-warn: #f59e0b; --bv-danger: #dc2626; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bv-bg); color: var(--bv-text); } .topmaerket-root { border-radius: 0 0 12px 12px; overflow: hidden; max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box; flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; } /* Indlæsning/fejl: shell inde i #topmaerket-root */ .topmaerket-root > .topmaerket-shell { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* Log ind uden for root: shell ligger direkte under #topmaerket-canvas */ #topmaerket-canvas > .topmaerket-shell { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box; border-radius: 0 0 12px 12px; } .topmaerket-root[data-theme="light"] { --bv-bg: #faf9f5; /* Claude-inspireret varm cream */ --bv-surface: #ffffff; --bv-card: #ffffff; --bv-text: #0f172a; --bv-muted: #64748b; --bv-border: #e5e7eb; --bv-shadow: rgba(15, 23, 42, 0.06); } /* v0.17.4: Light-mode redesign — header, nav og overlay får lys baggrund i stedet for hardcoded #111827. Claude-inspireret varmt udtryk med blå accent. */ .topmaerket-root[data-theme="light"] .topmaerket-header { background: #ffffff; color: #0f172a; border-bottom: 1px solid var(--bv-border); } .topmaerket-root[data-theme="light"] .topmaerket-header-user { color: var(--bv-muted); } .topmaerket-root[data-theme="light"] .topmaerket-build-badge { background: rgba(245, 158, 11, 0.14); color: #b45309; } .topmaerket-root[data-theme="light"] .topmaerket-header-sound, .topmaerket-root[data-theme="light"] .topmaerket-header-theme { background: rgba(15, 23, 42, 0.04); border: 1px solid var(--bv-border); } .topmaerket-root[data-theme="light"] .topmaerket-header-more { color: var(--bv-text); } .topmaerket-root[data-theme="light"] .topmaerket-header-more::before, .topmaerket-root[data-theme="light"] .topmaerket-header-more.is-active::before { color: var(--bv-text); } /* Volume-ikonet er en hvid SVG (designet til mørk header) — i light mode invertér til sort */ .topmaerket-root[data-theme="light"] .topmaerket-header-sound img { filter: brightness(0); } /* Theme-knappens sun-ikon: brightness(0) holder det sort (no-op hvis allerede sort, konverterer til sort hvis moon-icon vises ved en fejl) */ .topmaerket-root[data-theme="light"] .topmaerket-header-theme img { filter: brightness(0); } /* Brand-logo (topmaerket-logo-white.svg) — hvid SVG, farve den med amber-accent i light mode */ .topmaerket-root[data-theme="light"] .topmaerket-header-logo { filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(836%) hue-rotate(2deg) brightness(98%) contrast(101%); } .topmaerket-root[data-theme="light"] .topmaerket-nav { background: #ffffff; border-top: 1px solid var(--bv-border); box-shadow: 0 -4px 16px var(--bv-shadow); } .topmaerket-root[data-theme="light"] .topmaerket-nav button { color: var(--bv-muted); } .topmaerket-root[data-theme="light"] .topmaerket-nav button.is-active { color: #b45309; background: rgba(245, 158, 11, 0.14); } .topmaerket-root[data-theme="light"] .topmaerket-nav-icon-img { /* Slate-grå filter for inaktive ikoner i light mode */ filter: brightness(0) saturate(100%) invert(43%) sepia(17%) saturate(425%) hue-rotate(177deg) brightness(95%) contrast(88%); } .topmaerket-root[data-theme="light"] .topmaerket-nav button.is-active .topmaerket-nav-icon-img { /* Amber accent-filter for aktivt ikon i light mode (matches dark-mode active) */ filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(836%) hue-rotate(2deg) brightness(98%) contrast(101%); } .topmaerket-root[data-theme="light"] .topmaerket-nav-badge { box-shadow: 0 0 0 2px #ffffff; } .topmaerket-root[data-theme="light"] .topmaerket-btn { border-color: var(--bv-border); } /* [Claude] hover gælder KUN neutrale knapper — primary/warn/danger har egne farver der ikke må overskrives */ .topmaerket-root[data-theme="light"] .topmaerket-btn:not(.topmaerket-btn-primary):not(.topmaerket-btn-warn):not(.topmaerket-btn-danger):hover, .topmaerket-root[data-theme="light"] .topmaerket-btn:not(.topmaerket-btn-primary):not(.topmaerket-btn-warn):not(.topmaerket-btn-danger):focus { border-color: var(--bv-warn); background: rgba(245, 158, 11, 0.06); } /* Primary/warn/danger får i stedet en let darken-effekt på hover */ .topmaerket-btn-primary:hover, .topmaerket-btn-primary:focus, .topmaerket-btn-warn:hover, .topmaerket-btn-warn:focus, .topmaerket-btn-danger:hover, .topmaerket-btn-danger:focus, .topmaerket-btn-accent:hover, .topmaerket-btn-accent:focus { filter: brightness(0.92); outline: none; } .topmaerket-root[data-theme="light"] .topmaerket-card { background: #ffffff; border: 1px solid var(--bv-border); box-shadow: 0 1px 3px var(--bv-shadow); } .topmaerket-app { display: flex; flex-direction: column; flex: 1; min-height: 0; } .topmaerket-header { flex-shrink: 0; padding: 12px 16px; background: #111827; border-bottom: 1px solid #334155; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: #f8fafc; } .topmaerket-header h1 { margin: 0; font-size: 1.5rem; font-weight: 800; } .topmaerket-header-home { background: transparent; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .topmaerket-header-logo { width: 32px; height: 32px; max-width: 32px; max-height: 32px; display: block; flex-shrink: 0; } .topmaerket-build-badge { display: inline-block; margin-left: 8px; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; background: rgba(148, 163, 184, 0.15); padding: 2px 7px; border-radius: 10px; vertical-align: middle; line-height: 1.4; font-weight: 600; flex-shrink: 0; } .topmaerket-header-user { margin: 4px 0 0; font-size: 0.8rem; color: #94a3b8; line-height: 1.3; } .topmaerket-sub { margin: 4px 0 0; font-size: 0.95rem; color: var(--bv-muted); } .topmaerket-dashboard-welcome { margin-bottom: 8px; } .topmaerket-header-sound { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.28); flex-shrink: 0; padding: 0; cursor: pointer; } .topmaerket-header-sound img { width: 18px; height: 18px; display: block; filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(260%) hue-rotate(181deg) brightness(104%) contrast(96%); } .topmaerket-header-theme { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.28); flex-shrink: 0; padding: 0; cursor: pointer; } .topmaerket-header-theme img { width: 18px; height: 18px; display: block; filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(260%) hue-rotate(181deg) brightness(104%) contrast(96%); } /* [Claude] v0.32.3: kolonne-layout så build-badge sidder under ikon-rækken * i stedet for at presse titel-rækken. */ .topmaerket-header-actions { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; } .topmaerket-header-actions-row { display: inline-flex; align-items: center; gap: 8px; } .topmaerket-header-actions .topmaerket-build-badge { margin-left: 0; } .topmaerket-header-more { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.28); color: var(--bv-text); flex-shrink: 0; padding: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; } .topmaerket-header-more::before { content: "⋮"; display: block; font-size: 18px; line-height: 1; color: #f8fafc; } .topmaerket-header-more.is-active { border-color: rgba(148, 163, 184, 0.4); color: #f8fafc; background: rgba(148, 163, 184, 0.22); } .topmaerket-header-more.is-active::before { content: "×"; font-size: 22px; line-height: 0.9; } .topmaerket-main { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; padding: 16px; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; -ms-overflow-style: none; } .topmaerket-main::-webkit-scrollbar { width: 0; height: 0; } .topmaerket-nav { display: flex; justify-content: space-around; align-items: center; padding: 10px 8px 14px; background: #111827; border-top: 1px solid #334155; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100%, 480px); box-sizing: border-box; z-index: 120; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); /* Lad klik gå igennem tom plads mellem knapper — ellers blokeres indhold (fx «Gem») under baren på små skærme. */ pointer-events: none; } .topmaerket-nav button, .topmaerket-nav a { pointer-events: auto; } @media (max-width: 640px) { .topmaerket-nav { left: 0; transform: none; width: 100%; max-width: 100%; } } .topmaerket-nav button { background: transparent; border: 0; color: #94a3b8; font-weight: 600; font-size: 1.2rem; padding: 10px 8px; cursor: pointer; min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; position: relative; } /* v0.17.0: ulæst-badge på chat-ikonet i bund-nav */ .topmaerket-nav-badge { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; pointer-events: none; box-shadow: 0 0 0 2px #111827; } .topmaerket-nav button.is-active { color: var(--bv-warn); background: rgba(245, 158, 11, 0.14); } .topmaerket-nav-ico { line-height: 1; font-size: 1.25rem; } .topmaerket-nav-icon-img { width: 22px; height: 22px; display: block; opacity: 0.85; filter: brightness(0) saturate(100%) invert(70%) sepia(12%) saturate(530%) hue-rotate(179deg) brightness(92%) contrast(86%); } .topmaerket-nav button.is-active .topmaerket-nav-icon-img { opacity: 1; filter: brightness(0) saturate(100%) invert(74%) sepia(43%) saturate(1606%) hue-rotate(349deg) brightness(101%) contrast(92%); } .topmaerket-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 2px solid #334155; background: var(--bv-card); color: var(--bv-text); font-weight: 700; font-size: 1.05rem; cursor: pointer; width: 100%; margin-top: 10px; text-decoration: none; /* [Claude] box-sizing eksplicit: width:100% + 16px padding + 2px border ville ellers give overflow over kortets content-area (Bricks-tema sætter ikke universel border-box) */ box-sizing: border-box; } .topmaerket-btn-primary { background: var(--bv-ready); border-color: var(--bv-ready); color: #fff; } .topmaerket-btn-warn { background: var(--bv-warn); border-color: var(--bv-warn); color: #111; } .topmaerket-btn-danger { background: var(--bv-danger); border-color: var(--bv-danger); color: #fff; } /* [Claude] v0.17.4: blå accent-knap til personlig timer (matcher --bv-accent farveskema) */ .topmaerket-btn-accent { background: var(--bv-accent); border-color: var(--bv-accent); color: #0f172a; } .topmaerket-card { background: var(--bv-card); border-radius: 14px; padding: 14px; margin-bottom: 12px; border: 1px solid #334155; } .topmaerket-msg-title { font-weight: 800; margin: 0 0 6px; } .topmaerket-admin-title { margin-bottom: 14px; } .topmaerket-admin-wp-link { margin-top: 14px; text-align: center; } .topmaerket-msg-meta { font-size: 0.95rem; color: var(--bv-muted); line-height: 1.5; } .topmaerket-timer { font-size: clamp(4.8rem, 20vw, 7rem); font-weight: 800; line-height: 0.95; font-variant-numeric: tabular-nums; text-align: center; color: var(--bv-warn); margin: 16px 0; } /* v0.17.4: dual-mode timer — klub er amber (race-urgent), personlig er accent-blå (calmer) */ .topmaerket-timer-personal { color: var(--bv-accent); } .topmaerket-timer-idle { opacity: 0.4; } /* v0.17.4: elapsed-timer efter race-start — mindre stopur under "START" */ .topmaerket-countdown-elapsed-label { margin: 12px 0 4px; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--bv-muted); text-transform: uppercase; } .topmaerket-elapsed-timer { font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; margin: 0 0 12px; color: var(--bv-warn); line-height: 1; } .topmaerket-elapsed-timer.topmaerket-timer-personal { color: var(--bv-accent); } /* v0.17.4: countdown mode-tabs — klar visuel skelnen mellem klub-startur og personlig */ .topmaerket-countdown-tabs { display: flex; gap: 4px; background: rgba(148, 163, 184, 0.08); border-radius: 10px; padding: 4px; margin: 0 0 14px; } .topmaerket-countdown-tab { flex: 1; background: transparent; border: 0; color: var(--bv-muted); padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 120ms, color 120ms; } .topmaerket-countdown-tab:hover, .topmaerket-countdown-tab:focus { color: var(--bv-text); outline: none; } .topmaerket-countdown-tab.is-active { background: var(--bv-card); color: var(--bv-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .topmaerket-root[data-theme="light"] .topmaerket-countdown-tab.is-active { background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } .topmaerket-countdown-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bv-warn); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); animation: topmaerket-dot-pulse 1.5s ease-in-out infinite; } @keyframes topmaerket-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .topmaerket-countdown-mode-label { text-align: center; margin: 4px 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bv-muted); } .topmaerket-countdown-mode-shared { color: var(--bv-warn); } .topmaerket-countdown-mode-personal { color: var(--bv-accent); } .topmaerket-countdown-hint { background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 0.9rem; text-align: center; } /* v0.17.4: Hele countdown-kortet får farvet kant + subtil baggrundstint baseret på mode — så det er IKKE til at tage fejl af hvilken timer du kigger på. */ .topmaerket-countdown-card { border-top: 4px solid transparent; transition: border-color 200ms, background 200ms; } .topmaerket-countdown-card-shared { border-top-color: var(--bv-warn); background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 80px), var(--bv-card); } .topmaerket-countdown-card-personal { border-top-color: var(--bv-accent); background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent 80px), var(--bv-card); } .topmaerket-root[data-theme="light"] .topmaerket-countdown-card-shared { background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), transparent 80px), #ffffff; } .topmaerket-root[data-theme="light"] .topmaerket-countdown-card-personal { background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), transparent 80px), #ffffff; } /* Aktiv tab matcher kort-farven */ .topmaerket-countdown-tab[data-countdown-mode="shared"].is-active { color: var(--bv-warn); } .topmaerket-countdown-tab[data-countdown-mode="personal"].is-active { color: var(--bv-accent); } /* Personlig timer: aktiv prik i blå (i stedet for amber) */ .topmaerket-countdown-tab[data-countdown-mode="personal"] .topmaerket-countdown-dot { background: var(--bv-accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25); } .topmaerket-countdown-label { margin: 6px 0 8px; text-align: center; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; } .topmaerket-countdown-phase { text-align: center; font-size: 0.95rem; } .topmaerket-countdown-start { font-size: clamp(2.75rem, 14vw, 4.25rem); font-weight: 900; text-align: center; color: var(--bv-warn); margin: 8px 0 12px; letter-spacing: 0.12em; line-height: 1.05; animation: topmaerket-start-pulse 0.85s ease-in-out infinite; } @keyframes topmaerket-start-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.88; transform: scale(1.04); } } .topmaerket-overlay { position: fixed; inset: 72px 0 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: flex-start; justify-content: center; z-index: 100000; } .topmaerket-sheet { width: 100%; max-width: 480px; background: #111827; border-radius: 0 0 16px 16px; padding: 16px; border: 0; } .topmaerket-root[data-theme="light"] .topmaerket-overlay { background: rgba(15, 23, 42, 0.25); } .topmaerket-root[data-theme="light"] .topmaerket-sheet { background: var(--bv-bg); border: 1px solid var(--bv-border); border-top: 0; box-shadow: 0 8px 24px var(--bv-shadow); } /* v0.17.4: Menu-rækker — flade list-items med divider, ikke knapper. Gælder både dark og light mode. Mindre "voldsom" UI på en lang menu. */ .topmaerket-sheet .topmaerket-btn, .topmaerket-sheet a.topmaerket-btn { width: 100%; min-height: auto; padding: 14px 18px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid rgba(148, 163, 184, 0.18); font-weight: 400; font-size: 1.1rem; color: var(--bv-text); text-decoration: none; text-align: left; justify-content: flex-start; transition: background 120ms; } .topmaerket-sheet .topmaerket-btn:last-child, .topmaerket-sheet a.topmaerket-btn:last-child { border-bottom: 0; } .topmaerket-sheet .topmaerket-btn:hover, .topmaerket-sheet .topmaerket-btn:focus, .topmaerket-sheet a.topmaerket-btn:hover, .topmaerket-sheet a.topmaerket-btn:focus { background: rgba(245, 158, 11, 0.10); outline: none; } .topmaerket-root[data-theme="light"] .topmaerket-sheet .topmaerket-btn, .topmaerket-root[data-theme="light"] .topmaerket-sheet a.topmaerket-btn { border-bottom-color: var(--bv-border); color: var(--bv-text); } .topmaerket-login-prompt { padding: 24px; text-align: center; } /* v0.15.0: self-signup landing — natural page scroll (override af canvas-page fixed) */ html:has(body.topmaerket-signup-page), body.topmaerket-signup-page { overflow: auto !important; height: auto !important; position: static !important; display: block !important; } body.topmaerket-signup-page #topmaerket-canvas { overflow: visible !important; height: auto !important; max-height: none !important; display: block !important; } body.topmaerket-signup-page #topmaerket-canvas > .topmaerket-shell { overflow: visible !important; height: auto !important; max-height: none !important; flex: none !important; max-width: min(900px, calc(100vw - 24px)); border-radius: 0; } .topmaerket-signup { padding: 24px 16px; max-width: 860px; width: 100%; margin: 0 auto; } .topmaerket-signup[data-theme="light"] { --bv-bg: #faf9f5; --bv-surface: #ffffff; --bv-card: #ffffff; --bv-text: #0f172a; --bv-muted: #64748b; --bv-border: #e5e7eb; --bv-shadow: rgba(15, 23, 42, 0.06); } .topmaerket-signup-card { text-align: left; max-width: 780px; margin: 0 auto; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); } .topmaerket-signup[data-theme="light"] .topmaerket-signup-card { background: #ffffff; border-color: var(--bv-border); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08); } .topmaerket-signup-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: start; margin-bottom: 12px; } .topmaerket-signup-header .topmaerket-login-logo { grid-column: 2; margin: 0 auto; } .topmaerket-signup-theme-toggle { grid-column: 3; justify-self: end; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(15, 23, 42, 0.32); color: var(--bv-text); font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; } .topmaerket-signup[data-theme="light"] .topmaerket-signup-theme-toggle { background: #ffffff; color: #0f172a; border-color: #cbd5e1; } .topmaerket-signup[data-theme="light"] .topmaerket-input { border-color: #cbd5e1; background: #ffffff; color: #0f172a; } .topmaerket-signup-card .topmaerket-msg-title { text-align: center; font-size: 1.4rem; margin-bottom: 8px; } .topmaerket-signup-form p { margin: 0 0 14px; } .topmaerket-signup-form label { display: block; margin-bottom: 4px; font-weight: 600; } .topmaerket-signup-form .topmaerket-msg-meta { display: block; margin-top: 4px; font-size: 0.85rem; } /* [Claude] v0.17.4: GDPR-samtykke — discrete tekst, ikke bold, lille font, single line */ .topmaerket-signup-consent { margin: 16px 0 12px; font-size: 0.85rem; font-weight: 400; color: var(--bv-muted); } .topmaerket-consent-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400; } .topmaerket-consent-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .topmaerket-consent-row a { color: var(--bv-accent); } .topmaerket-signup-error { background: rgba(220, 38, 38, 0.12); border: 1px solid #dc2626; color: #fca5a5; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; } /* v0.15.1: kompakt "Næste tilmelding"-knap på tak-skærm */ .topmaerket-signup-next-btn { display: inline-block; background: var(--bv-ready); color: #fff; border: 2px solid var(--bv-ready); border-radius: 10px; padding: 10px 22px; font-weight: 700; font-size: 1rem; text-decoration: none; } .topmaerket-signup-next-btn:hover, .topmaerket-signup-next-btn:focus { opacity: 0.9; color: #fff; } .topmaerket-signup-actions, .topmaerket-signup-footnote { text-align: center; } .topmaerket-phone-row { display: flex; gap: 8px; } .topmaerket-phone-prefix { flex: 0 0 110px; } .topmaerket-phone-national { flex: 1; } /* v0.15.1: loading-state på submit-knap */ .topmaerket-btn.is-loading { opacity: 0.7; cursor: wait; position: relative; padding-right: 44px; } .topmaerket-btn.is-loading::after { content: ''; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: tm-spin 0.7s linear infinite; } @keyframes tm-spin { to { transform: rotate(360deg); } } .topmaerket-root[data-theme="light"] .topmaerket-signup-error, .topmaerket-signup[data-theme="light"] .topmaerket-signup-error { color: #991b1b; background: rgba(220, 38, 38, 0.08); } @media (min-width: 720px) { .topmaerket-signup { padding: 36px 24px 48px; } .topmaerket-signup-card { padding: 22px; } .topmaerket-signup-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; } .topmaerket-signup-form p { margin: 0; } .topmaerket-signup-field--wide, .topmaerket-signup-consent, .topmaerket-signup-actions, .topmaerket-signup-footnote { grid-column: 1 / -1; } .topmaerket-signup-actions { margin-top: 4px; } .topmaerket-signup-actions .topmaerket-btn { min-width: 260px; } } .topmaerket-privacy-card { margin-bottom: 0; } .topmaerket-privacy-card .topmaerket-msg-title { font-size: 1.25rem; margin-bottom: 8px; } .topmaerket-privacy-card > .topmaerket-msg-meta { margin-bottom: 18px; } .topmaerket-privacy-card section { border-top: 1px solid rgba(148, 163, 184, 0.22); padding-top: 16px; margin-top: 16px; } .topmaerket-privacy-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: var(--bv-text); } .topmaerket-privacy-card p { margin: 0 0 10px; line-height: 1.55; color: var(--bv-muted); } .topmaerket-privacy-card p:last-child { margin-bottom: 0; } .topmaerket-nav a { background: transparent; border: 0; color: #94a3b8; font-weight: 600; font-size: 1.2rem; padding: 10px 8px; cursor: pointer; min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; position: relative; text-decoration: none; } /* v0.14.1 / v0.17.0: forenklet login UX — én mode synlig ad gangen, slide mellem dem */ .topmaerket-login-card { text-align: left; max-width: 420px; margin: 0 auto; } .topmaerket-login-logo { display: block; margin: 0 auto 14px; width: 64px; height: 64px; } /* [Claude/Codex] v0.17.4: hvid logo SVG bliver usynlig på lyse kort. Signup har nu theme-toggle, så filteret må kun bruges i light mode. */ .topmaerket-signup[data-theme="light"] .topmaerket-signup-card .topmaerket-login-logo, .topmaerket-root[data-theme="light"] .topmaerket-login-card .topmaerket-login-logo { filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(836%) hue-rotate(2deg) brightness(98%) contrast(101%); } .topmaerket-login-card .topmaerket-msg-title { text-align: center; font-size: 1.4rem; margin-bottom: 16px; } .topmaerket-login-form p { margin: 0 0 12px; } .topmaerket-login-form label { display: block; margin-bottom: 4px; font-weight: 600; } .topmaerket-login-lost { text-align: center; margin-top: 6px; } .topmaerket-login-mode[hidden] { display: none; } .topmaerket-login-mode { animation: topmaerket-login-slide-in 220ms ease-out; } @keyframes topmaerket-login-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .topmaerket-login-alt-toggle { text-align: center; margin: 14px 0 0; } .topmaerket-login-alt-toggle button { background: transparent; border: 0; color: var(--bv-text); font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 6px 12px; opacity: 0.75; transition: opacity 120ms; } .topmaerket-login-alt-toggle button:hover, .topmaerket-login-alt-toggle button:focus { opacity: 1; outline: none; } .topmaerket-login-alt-tabs { display: flex; gap: 6px; margin: 12px 0; } .topmaerket-login-tab { flex: 1; background: var(--bv-card); color: var(--bv-text); border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600; } .topmaerket-login-tab.is-active { background: var(--bv-accent, #38bdf8); border-color: var(--bv-accent, #38bdf8); color: #0f172a; } .topmaerket-login-alt-panel p { margin: 0 0 10px; } .topmaerket-login-alt-panel[hidden] { display: none; } .topmaerket-card-pending { border: 1px solid var(--bv-warn); background: rgba(245, 158, 11, 0.08); } .topmaerket-root[data-theme="light"] .topmaerket-card-pending { background: rgba(245, 158, 11, 0.12); } .topmaerket-input { width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid #334155; background: var(--bv-surface); color: var(--bv-text); padding: 10px 12px; font-size: 1rem; } .topmaerket-root[data-theme="light"] .topmaerket-input { border-color: #cbd5e1; background: #fff; color: #0f172a; } .topmaerket-admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .topmaerket-admin-sections { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; } .topmaerket-admin-section-btn { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid #334155; background: var(--bv-surface); color: var(--bv-text); font-weight: 800; letter-spacing: 0.02em; cursor: pointer; text-align: center; padding: 0 10px; } .topmaerket-admin-section-btn.is-active { border-color: var(--bv-accent); background: rgba(56, 189, 248, 0.12); } .topmaerket-tab { flex: 1 1 auto; min-height: 44px; border-radius: 12px; border: 1px solid #334155; background: var(--bv-surface); color: var(--bv-text); font-weight: 700; font-size: 0.85rem; cursor: pointer; } .topmaerket-tab.is-active { border-color: var(--bv-accent); background: rgba(56, 189, 248, 0.12); } .topmaerket-root[data-theme="light"] .topmaerket-tab { border-color: #cbd5e1; background: #fff; color: #0f172a; } .topmaerket-list { margin: 0; padding: 0; list-style: none; } .topmaerket-list li { margin: 0; padding: 0; } .topmaerket-list li + li { border-top: 1px solid rgba(148, 163, 184, 0.22); } .topmaerket-list-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; padding: 8px 0; background: transparent; color: var(--bv-text); font: inherit; cursor: pointer; } .topmaerket-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; } .topmaerket-news-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; } button.topmaerket-news-item { background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; padding: 10px 8px; border-radius: 8px; transition: background 120ms; } button.topmaerket-news-item:hover, button.topmaerket-news-item:focus { background: rgba(56, 189, 248, 0.08); outline: none; } .topmaerket-news-title { font-weight: 800; } /* v0.13.2: dedikeret news-side typografi */ h3.topmaerket-news-title { font-size: 1.05rem; line-height: 1.35; margin: 0 0 6px; color: var(--bv-text); } .topmaerket-news-body { color: var(--bv-text); font-size: 0.95rem; line-height: 1.5; margin-top: 8px; } .topmaerket-news-body p { margin: 0 0 0.8em; } .topmaerket-news-body p:last-child { margin-bottom: 0; } .topmaerket-news-body a { color: var(--bv-accent, #38bdf8); } /* [Claude] v0.17.4: responsive iframes/embeds i alt brugerindhold (news, event-noter, excerpts m.m.). WordPress oEmbed konverterer YouTube-URLs til iframes med fast width — uden override bryder de ud af kort + lister på mobil. */ .topmaerket-card iframe, .topmaerket-card embed, .topmaerket-card video, .topmaerket-card object { max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; margin: 12px 0; border-radius: 8px; } .topmaerket-card img { max-width: 100%; height: auto; } .topmaerket-news-body img { border-radius: 8px; } /* WP wrapper-klasser ved oEmbed (.wp-embed-aspect-16-9 / .wp-block-embed) */ .topmaerket-card .wp-embed-aspect-16-9 .wp-block-embed__wrapper, .topmaerket-card .wp-block-embed iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; } .topmaerket-card .wp-block-embed { margin: 12px 0; } /* Hvis oEmbed havner inde i en
  • , sørg for at indholdet flyder pænt */ .topmaerket-card li iframe, .topmaerket-card li img { margin: 8px 0; } /* [Claude] v0.17.5/.6: liste-indrykning KUN i brugerindhold (news-body / event-noter). Ikke på UI-lister som dashboard's nyhedsliste der bruger ul som container. */ .topmaerket-news-body ul, .topmaerket-news-body ol { padding-left: 1.2em; margin: 0.5em 0; } .topmaerket-news-body li { margin: 0.25em 0; } /* Phase 10: SejlerQUIZ */ .topmaerket-quiz-card { display: flex; flex-direction: column; gap: 6px; } .topmaerket-quiz-title { font-size: 1.05rem; line-height: 1.35; margin: 0; font-weight: 800; color: var(--bv-text); } .topmaerket-quiz-desc { color: var(--bv-text); margin: 0; font-size: 0.95rem; line-height: 1.4; } .topmaerket-quiz-question { font-size: 1.1rem; line-height: 1.4; margin: 8px 0 14px; color: var(--bv-text); font-weight: 700; } .topmaerket-quiz-answers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .topmaerket-quiz-answer { background: var(--bv-card); color: var(--bv-text); border: 2px solid #334155; border-radius: 10px; padding: 12px 14px; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 120ms, border-color 120ms; width: 100%; } .topmaerket-quiz-answer:hover:not(:disabled) { background: rgba(56, 189, 248, 0.08); border-color: var(--bv-accent, #38bdf8); } .topmaerket-quiz-answer:disabled { cursor: default; } .topmaerket-quiz-answer.is-correct { background: rgba(22, 163, 74, 0.18); border-color: #16a34a; } .topmaerket-quiz-answer.is-wrong { background: rgba(220, 38, 38, 0.18); border-color: #dc2626; } .topmaerket-quiz-answer.is-faded { opacity: 0.5; } .topmaerket-quiz-feedback { margin: 6px 0; font-size: 1.1rem; } .topmaerket-quiz-feedback.is-correct { color: #16a34a; } .topmaerket-quiz-feedback.is-wrong { color: #dc2626; } .topmaerket-quiz-explanation { background: rgba(56, 189, 248, 0.06); border-left: 3px solid var(--bv-accent, #38bdf8); padding: 10px 12px; border-radius: 4px; margin-top: 8px; color: var(--bv-text); font-size: 0.95rem; line-height: 1.5; } /* v0.15.2: Sejler Links */ .topmaerket-links-cat-title { font-size: 1rem; font-weight: 700; color: var(--bv-text); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .topmaerket-links-list { list-style: none; padding: 0; margin: 0; } .topmaerket-links-item { margin: 0; padding: 0; } .topmaerket-links-link { display: block; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--bv-text); transition: background 120ms; } .topmaerket-links-link:hover, .topmaerket-links-link:focus { background: rgba(56, 189, 248, 0.08); outline: none; } .topmaerket-links-title { display: block; font-weight: 700; color: var(--bv-text); } .topmaerket-links-desc { display: block; font-size: 0.9rem; color: var(--bv-muted, #94a3b8); margin-top: 2px; } /* v0.16.0: Video-bibliotek */ .topmaerket-videos-cat-title { font-size: 1rem; font-weight: 700; color: var(--bv-text); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .topmaerket-videos-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .topmaerket-videos-item { margin: 0; padding: 0; } .topmaerket-video-thumb { position: relative; display: block; width: 100%; padding: 0; margin: 0; background: #000; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; } .topmaerket-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 150ms; } .topmaerket-video-thumb:hover img, .topmaerket-video-thumb:focus img { opacity: 1; } .topmaerket-video-thumb:focus { outline: 2px solid var(--bv-accent, #38bdf8); outline-offset: 2px; } /* [Claude] v0.17.17: YouTube-style rød rektangulær play-knap matcher YouTube-spillerens default-look. Tidligere lille blå frosted-glass cirkel passede ikke til Brian's brand-forventning. */ .topmaerket-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: rgba(33, 33, 33, 0.8); border: 0; color: #fff; font-size: 24px; line-height: 48px; text-align: center; padding-left: 4px; /* optisk centrering af ▶ */ box-sizing: border-box; pointer-events: none; transition: background 150ms ease; } .topmaerket-video-thumb:hover .topmaerket-video-play, .topmaerket-video-thumb:focus .topmaerket-video-play { background: #ff0000; } .topmaerket-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; } .topmaerket-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .topmaerket-video-embed-missing { display: flex; align-items: center; justify-content: center; color: var(--bv-muted, #94a3b8); font-size: 0.9rem; } .topmaerket-videos-meta { margin-top: 8px; padding: 0 4px; } .topmaerket-videos-title { font-weight: 700; color: var(--bv-text); font-size: 1rem; line-height: 1.3; } .topmaerket-videos-desc { font-size: 0.9rem; color: var(--bv-muted, #94a3b8); margin-top: 4px; line-height: 1.4; } .topmaerket-time-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .topmaerket-time-range-row p { margin: 0; } .topmaerket-event-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .topmaerket-event-open { display: block; width: 100%; background: transparent; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; cursor: pointer; } .topmaerket-event-date { width: 56px; min-width: 56px; border-radius: 10px; padding: 6px 4px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.28); text-align: center; } .topmaerket-event-date-mon { display: block; font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 800; color: var(--bv-muted); } .topmaerket-event-date-day { display: block; font-size: 1.25rem; font-weight: 900; line-height: 1.1; } .topmaerket-event-title { font-weight: 800; font-size: 1.08rem; margin-bottom: 4px; } .topmaerket-event-body { flex: 1; min-width: 0; } .topmaerket-event-notes-input { min-height: 220px; resize: vertical; } .topmaerket-event-notes { margin-top: 10px; font-size: 0.98rem; line-height: 1.45; color: var(--bv-text); } .topmaerket-event-notes p { margin: 0 0 10px; } .topmaerket-event-notes p:last-child { margin-bottom: 0; } .topmaerket-event-notes h1, .topmaerket-event-notes h2, .topmaerket-event-notes h3, .topmaerket-event-notes h4 { margin: 0 0 10px; line-height: 1.3; font-weight: 800; } .topmaerket-event-notes h1 { font-size: 1.18rem; } .topmaerket-event-notes h2 { font-size: 1.12rem; } .topmaerket-event-notes h3 { font-size: 1.06rem; } .topmaerket-event-notes h4 { font-size: 1rem; } .topmaerket-profile-settings { margin: 14px 0; padding-top: 6px; } /* [Claude] v0.31.3: Indstillinger som eget card (Profil-oprydning). * Ekstra spacing mellem toggle-rækker så de ikke klistrer sammen i light mode. */ .topmaerket-profile-settings-card .topmaerket-switch-row { border-top: 1px solid rgba(148, 163, 184, 0.10); } .topmaerket-profile-settings-card .topmaerket-switch-row:first-of-type { border-top: 0; } .topmaerket-root[data-theme="light"] .topmaerket-profile-settings-card .topmaerket-switch-row { border-top-color: rgba(15, 23, 42, 0.08); } /* Inline-besked under push-toggle (når denied/unsupported) */ .topmaerket-push-inline-hint { margin: 0 0 8px; padding: 6px 10px; font-size: 0.82rem; color: var(--bv-muted); background: rgba(148, 163, 184, 0.08); border-radius: 8px; } .topmaerket-root[data-theme="light"] .topmaerket-push-inline-hint { background: rgba(15, 23, 42, 0.05); color: #475569; } .topmaerket-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; } .topmaerket-switch-label { font-size: 0.98rem; color: var(--bv-text); } .topmaerket-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .topmaerket-switch-ui { position: relative; width: 52px; height: 32px; border-radius: 999px; background: rgba(148, 163, 184, 0.25); border: 1px solid rgba(148, 163, 184, 0.4); flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease; } .topmaerket-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); transition: transform 0.2s ease; } .topmaerket-switch-input:checked + .topmaerket-switch-ui { background: rgba(56, 189, 248, 0.25); border-color: rgba(56, 189, 248, 0.8); } .topmaerket-switch-input:checked + .topmaerket-switch-ui::after { transform: translateX(20px); } .topmaerket-switch-input:focus-visible + .topmaerket-switch-ui { outline: 2px solid rgba(56, 189, 248, 0.8); outline-offset: 2px; } .topmaerket-event-notes strong, .topmaerket-event-notes b { font-weight: 800; } .topmaerket-crew-card { margin-bottom: 10px; } .topmaerket-crew-summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .topmaerket-crew-summary::-webkit-details-marker { display: none; } /* [Claude] v0.17.10: bump specificity til at vinde over `.topmaerket-card img` (linje 1396) som har højere specificity end `.topmaerket-crew-boat` alene og overrider height: 56px → height: auto. */ .topmaerket-card .topmaerket-crew-boat, .topmaerket-crew-boat { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; box-sizing: border-box; border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.1); flex-shrink: 0; } .topmaerket-crew-boat-fallback { padding: 10px; object-fit: contain; } .topmaerket-crew-boat-placeholder { position: relative; } .topmaerket-crew-boat-placeholder::after { content: "⛵"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0.75; } .topmaerket-crew-body { flex: 1; min-width: 0; } .topmaerket-crew-summary .topmaerket-rsvp-icon-btn { flex-shrink: 0; } .topmaerket-crew-members { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, 0.25); } .topmaerket-rsvp-row { display: flex; gap: 8px; margin-top: 10px; } .topmaerket-rsvp-row .topmaerket-btn-inline { margin-left: 0; } .topmaerket-rsvp-participants { margin-top: 8px; } .topmaerket-rsvp-participants-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bv-muted); margin-bottom: 4px; } .topmaerket-rsvp-participants-list { list-style: none; margin: 0; padding: 0; } .topmaerket-rsvp-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.15); } .topmaerket-rsvp-person:last-child { border-bottom: 0; } .topmaerket-rsvp-person-name { font-size: 0.82rem; line-height: 1.35; color: var(--bv-text); min-width: 0; flex: 1; } .topmaerket-rsvp-person-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .topmaerket-list .topmaerket-list-link { width: 100%; text-align: left; } .topmaerket-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .topmaerket-calendar-view-switch { display: inline-flex; gap: 8px; } .topmaerket-calendar-view-switch .topmaerket-btn-inline { margin-left: 0; min-width: 76px; text-align: center; font-weight: 650; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .topmaerket-calendar-view-switch .topmaerket-btn-inline.is-active { background: rgba(56, 189, 248, 0.18); border-color: var(--bv-accent); color: #ffffff; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22); } .topmaerket-root[data-theme="light"] .topmaerket-calendar-view-switch .topmaerket-btn-inline.is-active { background: #0f172a; border-color: #0f172a; color: #ffffff; box-shadow: none; } .topmaerket-calendar-subscribe-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topmaerket-calendar-subscribe, .topmaerket-calendar-download { color: var(--bv-accent); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .topmaerket-calendar-subscribe:hover, .topmaerket-calendar-subscribe:focus, .topmaerket-calendar-download:hover, .topmaerket-calendar-download:focus { text-decoration: underline; } .topmaerket-calendar-download { color: var(--bv-muted); font-size: 0.82rem; } /* [Claude] v0.33.1: expandable subscribe-valg (webcal virker ikke i Android/PWA, så bruger får platform-specifikke options). Native details/summary — ingen JS-state. */ .topmaerket-calendar-subscribe-details { display: inline-block; position: relative; } .topmaerket-calendar-subscribe-summary { cursor: pointer; color: var(--bv-accent); font-size: 0.9rem; font-weight: 700; list-style: none; user-select: none; padding: 4px 0; } .topmaerket-calendar-subscribe-summary::-webkit-details-marker { display: none; } .topmaerket-calendar-subscribe-summary::marker { display: none; } .topmaerket-calendar-subscribe-summary:hover, .topmaerket-calendar-subscribe-summary:focus { text-decoration: underline; } .topmaerket-calendar-subscribe-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 12px; background: rgba(15, 23, 42, 0.22); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; min-width: 220px; } .topmaerket-root[data-theme="light"] .topmaerket-calendar-subscribe-options { background: rgba(248, 250, 252, 0.86); border-color: rgba(15, 23, 42, 0.08); } .topmaerket-calendar-subscribe-opt { display: block; text-align: left; background: transparent; border: 0; padding: 6px 4px; color: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 4px; } .topmaerket-calendar-subscribe-opt:hover, .topmaerket-calendar-subscribe-opt:focus { background: rgba(148, 163, 184, 0.12); outline: none; } .topmaerket-calendar-subscribe-hint { margin: 4px 0 0; font-size: 0.72rem; line-height: 1.3; } .topmaerket-calendar-month-nav { display: inline-flex; align-items: center; gap: 8px; } .topmaerket-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; } .topmaerket-calendar-dow { font-size: 0.75rem; color: var(--bv-muted); text-align: center; } .topmaerket-calendar-day { min-height: 84px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 10px; padding: 6px; /* [Claude] v0.17.4: button-variant skal ligne div-cellen + være klikbar */ background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; display: block; width: 100%; box-sizing: border-box; } button.topmaerket-calendar-day { cursor: pointer; transition: background 120ms, border-color 120ms; } button.topmaerket-calendar-day:hover, button.topmaerket-calendar-day:focus { background: rgba(108, 92, 231, 0.08); border-color: rgba(108, 92, 231, 0.4); outline: none; } .topmaerket-calendar-day.is-empty { border: 0; background: transparent; } .topmaerket-calendar-daynum { font-size: 0.78rem; font-weight: 700; margin-bottom: 4px; } .topmaerket-calendar-event-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; border: 0; background: #6c5ce7; margin: 0 4px 4px 0; padding: 0; cursor: pointer; } .topmaerket-rsvp-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(148, 163, 184, 0.08); line-height: 0; text-decoration: none; padding: 0; } .topmaerket-rsvp-icon-link:hover { background: rgba(148, 163, 184, 0.16); } .topmaerket-rsvp-icon-link img { display: block; width: 18px; height: 18px; } .topmaerket-rsvp-icon-btn { cursor: pointer; font: inherit; } .topmaerket-rsvp-names-plain { font-size: 0.82rem; line-height: 1.4; } .topmaerket-root[data-theme="light"] .topmaerket-rsvp-icon-link { border-color: #cbd5e1; background: rgba(241, 245, 249, 0.9); } .topmaerket-root[data-theme="light"] .topmaerket-rsvp-icon-link:hover { background: #e2e8f0; } /* [Claude] v0.17.18: hvide SVG-ikoner (chat, telefon, mail) inde i rsvp-knapper var usynlige på lys card-baggrund. Slate-grå filter matcher nav-icon-mønsteret i light mode. */ .topmaerket-root[data-theme="light"] .topmaerket-rsvp-icon-link img { filter: brightness(0) saturate(100%) invert(43%) sepia(17%) saturate(425%) hue-rotate(177deg) brightness(95%) contrast(88%); } /* [Claude] v0.17.19: sailing-role suffix på medlems-rækker (mindre, dæmpet skrift) */ .topmaerket-list-link-meta { font-size: 0.78rem; font-weight: 400; opacity: 0.65; margin-left: 6px; } /* [Claude] v0.18.5: avatar-pattern (foto eller initialer i cirkel). Genbrugelig på medlems-lister, instruktør-cards osv. */ .topmaerket-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; object-fit: cover; background: rgba(245, 158, 11, 0.18); color: #f59e0b; font-weight: 600; border: 1px solid rgba(245, 158, 11, 0.35); box-sizing: border-box; vertical-align: middle; } .topmaerket-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; } .topmaerket-avatar-md { width: 56px; height: 56px; font-size: 1.1rem; } .topmaerket-avatar-initials { text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } /* [Claude] v0.18.5: medlems-rækker med avatar — kompakt liste-stil. */ .topmaerket-list-with-avatars { list-style: none; padding: 0; margin: 0; } .topmaerket-list-link-avatar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; } .topmaerket-list-link-avatar:hover .topmaerket-list-link-name, .topmaerket-list-link-avatar:focus .topmaerket-list-link-name { text-decoration: underline; } .topmaerket-list-link-name { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 500; } /* [Claude] v0.17.19: Instruktør-blok på /crew. Flade cards (ikke foldbare), foto + navn + sejlerrolle. Klik → /member/{id}. [Claude] v0.18.3: