/* ========================================================================== Q&A board styles (self-contained) with light / dark / auto theming. Theme resolution: - default -> light - OS dark + no choice -> dark (.qa:not([data-theme="light"]) in dark media) - data-theme="dark" -> dark (forced) - data-theme="light" -> light (forced, ignores OS) The choice is set by qa.js and remembered in localStorage. ========================================================================== */ /* Verb — self-hosted (woff2). Browsers fetch only the weights actually used. */ @font-face{font-family:'Verb';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/VerbLight.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/VerbRegular.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/VerbMedium.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/VerbSemibold.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/VerbRegular-Bold.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/VerbExtrabold.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/VerbBlack.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/VerbRegular-Italic.woff2') format('woff2');} @font-face{font-family:'Verb';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/VerbRegular-BoldItalic.woff2') format('woff2');} :root { --qa-font: 'Verb', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .qa { /* ---- light palette (default) ---- */ --qa-bg: #ffffff; --qa-fg: #1c2024; --qa-muted: #6b7280; --qa-line: #e6e8eb; --qa-soft: #f5f6f8; --qa-input-bg: #ffffff; --qa-accent: #2f6df6; --qa-accent-fg: #ffffff; --qa-ok: #1c8c4b; --qa-wait: #b97309; --qa-danger: #d23b3b; --qa-live: #c2255c; --qa-voted-bg: #eef3ff; --qa-pending-bg: #fffaf0; --qa-pending-line: #f0e0c0; --qa-blocked-bg: #faf0f0; --qa-blocked-line: #f0d0d0; --qa-ok-bg: #e8f6ee; --qa-wait-bg: #fdf2e0; --qa-blk-bg: #fdeaea; --qa-notice-ok-bg: #e8f6ee; --qa-notice-ok-line: #bce4cc; --qa-notice-err-bg:#fdeaea; --qa-notice-err-line:#f3c4c4; --qa-danger-line: #f3c4c4; --qa-radius: 12px; max-width: 760px; margin: 2rem auto; padding: 0 1rem; color: var(--qa-fg); font: 16px/1.55 var(--qa-font); } .qa *, .qa *::before, .qa *::after { box-sizing: border-box; } /* ---- dark palette -------------------------------------------------------- Driven by (set by qa.js + an inline no-flash script). Because qa.css only loads on Q&A pages, darkening here does not affect the rest of the site. */ /* forced dark */ html[data-qa-theme="dark"] .qa { --qa-bg:#15181d; --qa-fg:#e7eaee; --qa-muted:#9aa3af; --qa-line:#2b313a; --qa-soft:#1b1f25; --qa-input-bg:#1b1f25; --qa-accent:#5b8cff; --qa-accent-fg:#0b0d10; --qa-ok:#4cc684; --qa-wait:#d9a441; --qa-danger:#ef6b6b; --qa-live:#f06a98; --qa-voted-bg:#1e2942; --qa-pending-bg:#241f12; --qa-pending-line:#4a3f1f; --qa-blocked-bg:#291a1a; --qa-blocked-line:#4a2c2c; --qa-ok-bg:#15301f; --qa-wait-bg:#2e2410; --qa-blk-bg:#311818; --qa-notice-ok-bg:#15301f; --qa-notice-ok-line:#1f5436; --qa-notice-err-bg:#311818; --qa-notice-err-line:#5a2a2a; --qa-danger-line:#5a2a2a; color-scheme: dark; } /* auto + OS dark (also before the inline script sets the attribute) */ @media (prefers-color-scheme: dark) { html[data-qa-theme="auto"] .qa, html:not([data-qa-theme]) .qa { --qa-bg:#15181d; --qa-fg:#e7eaee; --qa-muted:#9aa3af; --qa-line:#2b313a; --qa-soft:#1b1f25; --qa-input-bg:#1b1f25; --qa-accent:#5b8cff; --qa-accent-fg:#0b0d10; --qa-ok:#4cc684; --qa-wait:#d9a441; --qa-danger:#ef6b6b; --qa-live:#f06a98; --qa-voted-bg:#1e2942; --qa-pending-bg:#241f12; --qa-pending-line:#4a3f1f; --qa-blocked-bg:#291a1a; --qa-blocked-line:#4a2c2c; --qa-ok-bg:#15301f; --qa-wait-bg:#2e2410; --qa-blk-bg:#311818; --qa-notice-ok-bg:#15301f; --qa-notice-ok-line:#1f5436; --qa-notice-err-bg:#311818; --qa-notice-err-line:#5a2a2a; --qa-danger-line:#5a2a2a; color-scheme: dark; } } /* Page background follows the dark theme (light/auto-light leave your theme alone). !important so it wins over the theme's own body background; scoped to Q&A pages because qa.css is only loaded there. */ html[data-qa-theme="dark"], html[data-qa-theme="dark"] body { background: #0f1216 !important; } html[data-qa-theme="dark"] body { color: #e7eaee; } @media (prefers-color-scheme: dark) { html[data-qa-theme="auto"], html[data-qa-theme="auto"] body, html:not([data-qa-theme]), html:not([data-qa-theme]) body { background: #0f1216 !important; } html[data-qa-theme="auto"] body, html:not([data-qa-theme]) body { color: #e7eaee; } } /* ---- Header -------------------------------------------------------------- */ .qa__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .qa__title { font-size: 1.6rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; } /* Brand logo replaces the page title; inherits the theme colour */ .qa__logo { display: inline-flex; align-items: center; color: var(--qa-fg); text-decoration: none; } .qa-logo__svg { display: block; height: 3.8rem; width: auto; } .qa__prompt { margin: -.25rem 0 1.1rem; padding: .8rem 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--qa-fg); } .qa__prompt[hidden] { display: none !important; } .qa__tools { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---- Buttons ------------------------------------------------------------- */ .qa__btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--qa-line); border-radius: 999px; background: var(--qa-bg); color: var(--qa-fg); font: inherit; font-size: .85rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; } .qa__btn:hover { background: var(--qa-soft); } .qa__btn--primary { background: var(--qa-accent); border-color: var(--qa-accent); color: var(--qa-accent-fg); border-radius: 10px; padding: .6rem 1.15rem; font-size: .95rem; font-weight: 800; } .qa__btn--primary:hover { filter: brightness(1.05); background: var(--qa-accent); } .qa__btn--admin { border-color: var(--qa-accent); color: var(--qa-accent); } .qa__inline { display: inline; margin: 0; } /* ---- Flash / notice ------------------------------------------------------ */ .qa__flash, .qa__notice { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--qa-radius); font-size: .9rem; } .qa__form .qa__notice { margin: .25rem 0 .75rem; } .qa__flash { background: var(--qa-soft); border: 1px solid var(--qa-line); } .qa__notice.is-ok { background: var(--qa-notice-ok-bg); border: 1px solid var(--qa-notice-ok-line); color: var(--qa-ok); } .qa__notice.is-err { background: var(--qa-notice-err-bg); border: 1px solid var(--qa-notice-err-line); color: var(--qa-danger); } /* ---- Admin bar ----------------------------------------------------------- */ .qa__adminbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; margin-bottom: 1rem; background: var(--qa-soft); border: 1px solid var(--qa-line); border-radius: var(--qa-radius); font-size: .9rem; flex-wrap: wrap; } .qa__adminbar-group { display: flex; align-items: center; gap: .6rem; } .qa__adminbar-group--wide { flex-basis: 100%; } .qa__adminbar-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .qa__sessionform { display: flex; flex: 1 1 auto; gap: .5rem; align-items: center; } .qa__sessioninput { flex: 1 1 auto; } /* slide-theme dropdown */ .qa__select { appearance: none; -webkit-appearance: none; padding: .4rem 1.8rem .4rem .6rem; border: 1px solid var(--qa-line); border-radius: 8px; background: var(--qa-bg); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 0.85rem center, right 0.6rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .qa__select:focus { outline: 2px solid var(--qa-accent); outline-offset: 1px; border-color: var(--qa-accent); } /* sliding toggle: a track with a knob that travels across it */ .qa__switch { position: relative; display: inline-block; width: 46px; height: 26px; padding: 0; border: 1px solid var(--qa-line); border-radius: 999px; background: var(--qa-soft); cursor: pointer; vertical-align: middle; flex: none; transition: background .15s, border-color .15s; } .qa__switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--qa-muted); transition: transform .18s ease, background .15s; } .qa__switch.is-on { background: var(--qa-ok-bg); border-color: var(--qa-ok); } .qa__switch.is-on .qa__switch-knob { transform: translateX(20px); background: var(--qa-ok); } /* keep the ON/OFF text for screen readers only (the slider shows the state) */ .qa__switch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- List ---------------------------------------------------------------- */ .qa__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .qa__empty { color: var(--qa-muted); padding: 1.5rem; text-align: center; border: 1px dashed var(--qa-line); border-radius: var(--qa-radius); } .qa__item { display: flex; gap: .85rem; padding: 1rem; border: 1px solid var(--qa-line); border-radius: var(--qa-radius); background: var(--qa-bg); align-items: flex-start; } .qa__item.is-pending { background: var(--qa-pending-bg); border-color: var(--qa-pending-line); } .qa__item.is-blocked { opacity: .6; background: var(--qa-blocked-bg); border-color: var(--qa-blocked-line); } .qa__item.is-current { border-color: var(--qa-live); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qa-live) 22%, transparent); } /* present / LIVE control (admin) — sits on the RIGHT of the item */ .qa__presentform { margin-left: auto; align-self: center; } .qa__present { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; padding: .5rem .4rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); cursor: pointer; color: var(--qa-muted); font: inherit; font-weight: 700; font-size: .8rem; transition: border-color .15s, color .15s, background .15s; } .qa__present:hover { border-color: var(--qa-live); color: var(--qa-live); } .qa__present-live { display: none; font-size: .62rem; letter-spacing: .05em; } .qa__item.is-current .qa__present { background: var(--qa-live); border-color: var(--qa-live); color: #fff; } .qa__item.is-current .qa__present-icon { display: none; } .qa__item.is-current .qa__present-live { display: inline; } /* upvote */ .qa__voteform { margin: 0; } .qa__upvote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: .45rem .3rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); cursor: pointer; color: var(--qa-muted); line-height: 1; font: inherit; transition: border-color .15s, color .15s, background .15s; } .qa__upvote:hover:not(:disabled) { border-color: var(--qa-accent); color: var(--qa-accent); } .qa__upvote.is-voted, .qa__upvote:disabled { color: var(--qa-accent); border-color: var(--qa-accent); background: var(--qa-voted-bg); cursor: default; } .qa__caret { font-size: .85rem; } .qa__count { font-size: 1.05rem; font-weight: 700; color: var(--qa-fg); } /* body */ .qa__body { flex: 1 1 auto; min-width: 0; padding-left: 10px; } .qa__question { margin: 0 0 .5rem; font-size: 1.02rem; word-wrap: break-word; } .qa__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .qa__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--qa-soft); object-fit: cover; } .qa__name { font-size: .85rem; font-weight: 600; color: var(--qa-muted); } .qa__badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .45rem; border-radius: 999px; } .qa__badge--ok { background: var(--qa-ok-bg); color: var(--qa-ok); } .qa__badge--wait { background: var(--qa-wait-bg); color: var(--qa-wait); } .qa__badge--blk { background: var(--qa-blk-bg); color: var(--qa-danger); } .qa__badge--done { background: var(--qa-ok-bg); color: var(--qa-ok); } /* answered/complete cue (public + admin): grey-out + fade the upvote and avatar */ .qa__item.is-answered .qa__upvote, .qa__item.is-answered .qa__avatar { filter: grayscale(1); opacity: .4; } .qa__item.is-answered .qa__question { opacity: .4; } /* "Answered" tag, top-right corner of the question */ .qa__answered-tag { float: right; margin: 0 0 .35rem .6rem; padding: .15rem .5rem; border-radius: 999px; background: var(--qa-ok-bg); color: var(--qa-ok); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } /* countdown (centered) */ .qa__countdown { display: flex; align-items: baseline; gap: .5rem; width: fit-content; margin: 0 auto 1.4rem; padding: .5rem .95rem; border: 1px solid var(--qa-line); border-radius: 999px; background: var(--qa-soft); } .qa__countdown[hidden] { display: none !important; } .qa__countdown.is-off { display: none !important; } .qa__countdown-label { font-size: .8rem; font-weight: 600; color: var(--qa-muted); text-transform: uppercase; letter-spacing: .04em; } .qa__countdown-value { font-size: 1.1rem; font-weight: 700; color: var(--qa-fg); font-variant-numeric: tabular-nums; } .qa__countdown.is-done .qa__countdown-label { display: none; } /* admin actions */ .qa__actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } .qa__act { padding: .3rem .6rem; border: 1px solid var(--qa-line); border-radius: 8px; background: var(--qa-bg); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--qa-fg); text-decoration: none; } .qa__act:hover { background: var(--qa-soft); } .qa__act--danger { color: var(--qa-danger); border-color: var(--qa-danger-line); } .qa__act--danger:hover { background: var(--qa-blk-bg); } /* ---- Ask box (bottom) ---------------------------------------------------- */ .qa__form { border: 1px solid var(--qa-line); border-radius: var(--qa-radius); padding: 1rem; background: var(--qa-bg); } .qa__form-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; } .qa__form-row { display: flex; gap: .6rem; margin-bottom: .6rem; } .qa__form-row[hidden] { display: none !important; } .qa__form-row .qa__input { flex: 1 1 0; } .qa__input { width: 100%; padding: .6rem .75rem; border: 1px solid var(--qa-line); border-radius: 10px; font: inherit; color: var(--qa-fg); background: var(--qa-input-bg); } .qa__input::placeholder { color: var(--qa-muted); } .qa__input:focus { outline: 2px solid var(--qa-accent); outline-offset: 1px; border-color: var(--qa-accent); } .qa__textarea { resize: vertical; min-height: 72px; } .qa__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; } .qa__hint { color: var(--qa-muted); font-size: .8rem; } .qa__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Small screens ------------------------------------------------------- */ @media (max-width: 540px) { .qa__form-row { flex-direction: column; } .qa__head { align-items: flex-start; } } /* -------- Footer: centered menu + logo, linked to the Panel --------------- */ .qa-foot { margin-top: 4rem; padding: 2.75rem 0 3rem; border-top: 1px solid var(--qa-line); display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; /* match the board's typeface (don't inherit the theme's body font) */ font-family: var(--qa-font); } .qa-foot__menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; } .qa-foot__link { color: var(--qa-muted); text-decoration: none; font-size: .92rem; } .qa-foot__link:hover { color: var(--qa-fg); text-decoration: underline; } .qa-foot__sep { color: var(--qa-line); } .qa-foot__logo { display: inline-flex; color: var(--qa-muted); transition: color .15s ease; } .qa-foot__logo:hover { color: var(--qa-fg); } .qa-foot__logo .qa-logo__svg { height: 3rem; width: auto; } /* -------- Home page ------------------------------------------------------- */ .qa-home { min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; padding-top: 1.25rem; padding-bottom: 1.25rem; } .qa-home__hero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 0; } .qa-home__title { margin: 0; color: var(--qa-fg); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; } .qa-home__sub { margin: .85rem 0 1.5rem; max-width: 42ch; color: var(--qa-muted); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.45; } .qa-home .qa-foot { margin-top: 0; } /* -------- Sign-in page ---------------------------------------------------- */ .qa-auth__card { width: 100%; max-width: 400px; margin: 0 auto; background: var(--qa-soft); border: 1px solid var(--qa-line); border-radius: 16px; padding: 1.6rem 1.5rem 1.7rem; text-align: left; } .qa-auth__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--qa-fg); text-align: center; } .qa-auth__msg { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px; font-size: .92rem; } .qa-auth__msg.is-error { background: var(--qa-notice-err-bg); border: 1px solid var(--qa-notice-err-line); color: var(--qa-danger); } .qa-auth__msg.is-ok { background: var(--qa-notice-ok-bg); border: 1px solid var(--qa-notice-ok-line); color: var(--qa-ok); } /* tabs (pure CSS via hidden radios) */ .qa-auth__radio { position: absolute; opacity: 0; pointer-events: none; } .qa-auth__tablist { display: flex; gap: .35rem; background: var(--qa-bg); border: 1px solid var(--qa-line); border-radius: 11px; padding: .25rem; margin-bottom: 1.1rem; } .qa-auth__tab { flex: 1; text-align: center; padding: .5rem .6rem; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--qa-muted); cursor: pointer; user-select: none; } #qa-auth-otp:checked ~ .qa-auth__tablist label[for="qa-auth-otp"], #qa-auth-pw:checked ~ .qa-auth__tablist label[for="qa-auth-pw"] { background: var(--qa-soft); color: var(--qa-fg); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .qa-auth__panel { display: none; } #qa-auth-otp:checked ~ .qa-auth__panel--otp, #qa-auth-pw:checked ~ .qa-auth__panel--pw { display: block; } .qa-auth__form { display: flex; flex-direction: column; gap: .55rem; } .qa-auth__label { font-size: .82rem; font-weight: 600; color: var(--qa-muted); } .qa-auth__input { width: 100%; padding: .7rem .85rem; border: 1px solid var(--qa-line); border-radius: 10px; font: inherit; background: var(--qa-input-bg); color: var(--qa-fg); } .qa-auth__input:focus { outline: 2px solid var(--qa-accent); outline-offset: 1px; border-color: var(--qa-accent); } .qa-auth__input--code { text-align: center; letter-spacing: .35em; font-size: 1.4rem; font-weight: 700; padding-left: 1rem; } .qa-auth__btn { align-self: flex-start; margin-top: .35rem; padding: .72rem 1.4rem; border: 0; border-radius: 10px; background: var(--qa-accent); color: var(--qa-accent-fg); font: inherit; font-weight: 800; cursor: pointer; } .qa-auth__btn:hover { filter: brightness(1.05); } .qa-auth__hint { margin: .5rem 0 0; font-size: .82rem; color: var(--qa-muted); } .qa-auth__lead { margin: 0 0 1rem; color: var(--qa-fg); } .qa-auth__alt { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .qa-auth__altform { display: inline; } .qa-auth__link { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--qa-accent); cursor: pointer; text-decoration: none; } .qa-auth__link:hover { text-decoration: underline; } /* -------- Poll (pinned to the top of the board) -------------------------- */ .qa-poll { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--qa-line); border-radius: var(--qa-radius); background: var(--qa-soft); } .qa-poll[hidden] { display: none; } .qa-poll__q { font-size: 1.15rem; font-weight: 800; line-height: 1.25; margin: 0 0 .85rem; color: var(--qa-fg); } .qa-poll__opts { display: flex; flex-direction: column; gap: .5rem; } .qa-poll__opt { text-align: left; padding: .7rem .9rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); color: var(--qa-fg); font: inherit; font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s; } .qa-poll__opt:hover { border-color: var(--qa-accent); background: var(--qa-voted-bg); } .qa-poll__opt--static { cursor: default; } .qa-poll__opt--static:hover { border-color: var(--qa-line); background: var(--qa-bg); } .qa-poll__opt--static.is-mine { border-color: var(--qa-accent); background: var(--qa-voted-bg); } .qa-poll__bars { display: flex; flex-direction: column; gap: .5rem; } .qa-poll__bar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .85rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); } .qa-poll__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--qa-voted-bg); transition: width .45s ease; z-index: 0; } .qa-poll__bar.is-mine { border-color: var(--qa-accent); } .qa-poll__bar-label, .qa-poll__bar-val { position: relative; z-index: 1; } .qa-poll__bar-label { font-weight: 800; color: var(--qa-fg); } .qa-poll__bar-val { font-variant-numeric: tabular-nums; color: var(--qa-muted); font-weight: 800; } .qa-poll__total { margin-top: .7rem; font-size: .85rem; color: var(--qa-muted); } /* poll manager (admin bar) */ .qa__pollmgr { flex-wrap: wrap; } .qa__pollmgr-list { flex: 1 1 100%; display: flex; flex-direction: column; gap: .4rem; } .qa__pollmgr-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .qa__pollmgr-q { color: var(--qa-muted); } .qa__pollmgr-row.is-active .qa__pollmgr-q { color: var(--qa-fg); font-weight: 800; } .qa__pollmgr-tag { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--qa-wait); border: 1px solid var(--qa-line); border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem; } .qa__pollmgr-empty { flex: 1 1 100%; margin: 0; color: var(--qa-muted); font-size: .85rem; line-height: 1.5; } .qa__pollmgr-empty code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; background: var(--qa-bg); border: 1px solid var(--qa-line); border-radius: 5px; padding: .05rem .3rem; } /* -------- Polls block (own block, below controls, above questions) ------- */ .qa-polls { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1.25rem; } .qa-polls[hidden] { display: none; } .qa-polls__title { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--qa-muted); margin: .25rem 0 0; } .qa-pollcard { position: relative; padding: 1rem 1.1rem; border: 1px solid var(--qa-line); border-radius: var(--qa-radius); background: var(--qa-bg); } .qa-pollcard--admin { display: flex; gap: .85rem; align-items: flex-start; } .qa-pollcard__main { flex: 1 1 auto; min-width: 0; position: relative; } .qa-pollcard.is-live { border-color: var(--qa-live); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qa-live) 22%, transparent); } .qa-pollcard.is-done { opacity: .55; } .qa-pollcard.is-done .qa-pollcard__bars { filter: grayscale(1); } .qa-pollcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; } .qa-pollcard__q { flex: 1 1 100%; order: 2; font-size: 1.1rem; font-weight: 800; line-height: 1.25; margin: 0; color: var(--qa-fg); } .qa-pollcard__tag { order: 1; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--qa-line); color: var(--qa-muted); } .qa-pollcard__tag--live { color: #fff; background: var(--qa-live); border-color: var(--qa-live); } .qa-pollcard__opts { display: flex; flex-direction: column; gap: .5rem; } .qa-pollcard__opt { text-align: left; padding: .7rem .9rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); color: var(--qa-fg); font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: border-color .15s, background .15s; } .qa-pollcard__opt:hover { border-color: var(--qa-accent); background: var(--qa-voted-bg); } .qa-pollcard__opt--static { cursor: default; } .qa-pollcard__opt--static:hover { border-color: var(--qa-line); background: var(--qa-bg); } .qa-pollcard__opt--static.is-mine { border-color: var(--qa-accent); background: var(--qa-voted-bg); } .qa-pollcard__bars { display: flex; flex-direction: column; gap: .5rem; } .qa-pollcard__bar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .85rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); } .qa-pollcard__bar.is-clickable { cursor: pointer; } .qa-pollcard__bar.is-clickable:hover { border-color: var(--qa-accent); } .qa-pollcard__bar.is-mine { border-color: var(--qa-accent); } .qa-pollcard__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--qa-voted-bg); transition: width .45s ease; z-index: 0; } .qa-pollcard__label, .qa-pollcard__val { position: relative; z-index: 1; } .qa-pollcard__label { font-weight: 800; color: var(--qa-fg); } .qa-pollcard__val { font-variant-numeric: tabular-nums; color: var(--qa-muted); font-weight: 800; } .qa-pollcard__total { margin-top: .7rem; font-size: .85rem; color: var(--qa-muted); } .qa-pollcard__you { display: inline-block; margin-left: .45rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--qa-accent); border-radius: 999px; padding: .08rem .5rem; vertical-align: middle; } .qa-pollcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; } /* poll present button: identical to the question LIVE button (icon → LIVE) */ .qa__present.is-live { background: var(--qa-live); border-color: var(--qa-live); color: #fff; } .qa__present.is-live .qa__present-icon { display: none; } .qa__present.is-live .qa__present-live { display: inline; } .qa__act--go { border-color: var(--qa-accent); color: var(--qa-accent); } /* uppercase button text */ .qa__btn, .qa__act, .qa__present-live { text-transform: uppercase; letter-spacing: .02em; } /* -------- Poll identity: inputs + voter avatars/names -------------------- */ .qa-pollcard__idfields { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; } .qa-pollcard__idinput { padding: .6rem .8rem; border: 1px solid var(--qa-line); border-radius: 10px; background: var(--qa-bg); color: var(--qa-fg); font: inherit; } .qa-pollcard__idinput:focus { outline: none; border-color: var(--qa-accent); } .qa-pollcard__iderr { margin: 0; color: var(--qa-danger); font-size: .82rem; } .qa-pollcard__iderr[hidden] { display: none; } .qa-pollcard__voters { display: flex; flex-wrap: wrap; gap: .35rem; margin: .15rem 0 .1rem; } .qa-pollcard__voter { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; } .qa-pollcard__voter.is-name { background: var(--qa-soft); border: 1px solid var(--qa-line); border-radius: 999px; padding: .1rem .55rem; } .qa-pollcard__av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; background: var(--qa-soft); } .qa-pollcard__vname { font-size: .78rem; color: var(--qa-muted); } /* -------- Poll bubble / cluster view (board) ---------------------------- */ .qa-bubbles { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; padding: .3rem 0; } .qa-bubbles__cluster { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .qa-bubbles__cluster.is-clickable { cursor: pointer; } .qa-bubbles__disc { position: relative; border-radius: 50%; background: var(--qa-soft); border: 1px solid var(--qa-line); overflow: hidden; min-width: 56px; min-height: 56px; } .qa-bubbles__cluster.is-mine .qa-bubbles__disc { border-color: var(--qa-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qa-accent) 22%, transparent); } .qa-bubbles__cluster.is-clickable:hover .qa-bubbles__disc { border-color: var(--qa-accent); } .qa-bubbles__dot { position: absolute; border-radius: 50%; overflow: hidden; background: var(--qa-accent); } .qa-bubbles__dot.is-plain { opacity: .85; } .qa-bubbles__dot img { width: 100%; height: 100%; object-fit: cover; display: block; } .qa-bubbles__label { font-weight: 800; text-align: center; max-width: 13rem; line-height: 1.2; } .qa-bubbles__count { color: var(--qa-muted); font-variant-numeric: tabular-nums; } /* -------- Poll "Closed" tag (top-right of the card) --------------------- */ .qa-pollcard__closed { position: absolute; top: .1rem; right: .1rem; z-index: 2; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5a4500; background: #ffd454; border: 1px solid #e9bd2e; border-radius: 999px; padding: .12rem .55rem; } .qa-pollcard.is-closed .qa-pollcard__q { padding-right: 4.5rem; } /* initials dot (name-only voters, no avatar) */ .qa-bubbles__dot.is-ini { display: flex; align-items: center; justify-content: center; background: var(--qa-accent); color: var(--qa-accent-fg); font-weight: 800; font-size: 9px; line-height: 1; overflow: hidden; } /* LIVE control sits at the BOTTOM-right of a poll card */ .qa__presentform--poll { align-self: flex-end; } /* poll card status tags */ .qa-pollcard__tag--view { background: var(--qa-soft); color: var(--qa-fg); border-color: var(--qa-line); } .qa-pollcard__tag--public { color: #fff; background: #1f9d57; border-color: #1f9d57; } .qa-pollcard__tag--done { color: var(--qa-muted); }