/* * Colloquy of Mobiles — the standard sign-in stylesheet (/shared/colloquy-auth.css) * * Paired with shared/colloquy-auth-ui.js, which injects this file on first mount; * a surface may also it in to avoid a late-load repaint. * * Every selector is `cq-` prefixed and every property is set explicitly, because * this sheet has to survive being dropped into pages that disagree with each * other: display/ is forbidden from linking shared/app-theme.css at all, and * clip-editor/ defines `.modal` as the BACKDROP where app-theme.css defines it * as the CARD. Nothing here inherits from, or leaks into, a page's own rules. * * Tokens are read from app-theme.css when the page links it, and fall back to * the same values inline when it does not — so the dialog looks identical on * all nine surfaces either way. */ /* ── Dialog shell ────────────────────────────────────────────────────────── */ .cq-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 5, 9, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* The UA's [hidden] rule loses to display:flex — every hand-rolled copy of this dialog had to rediscover that. Ship it here so no surface can get it wrong. */ .cq-backdrop[hidden] { display: none; } .cq-modal { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; border-radius: 12px; border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); background: var(--panel-solid, #10151d); color: var(--text, #edf2f7); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); } /* ── Brand block (the logo, identical on every surface) ──────────────────── */ .cq-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .cq-brand-mark { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; } .cq-brand-text { min-width: 0; } .cq-wordmark { display: block; font-size: 14px; font-weight: 650; letter-spacing: 0.2px; line-height: 1.2; } .cq-appname { display: block; font-size: 12px; color: var(--muted, #9aa8ba); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cq-title { margin: 0; font-size: 15px; font-weight: 600; } .cq-sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted, #9aa8ba); } /* ── Fields ──────────────────────────────────────────────────────────────── */ .cq-modal label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #9aa8ba); } .cq-modal input { height: 32px; padding: 0 8px; border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); border-radius: var(--radius, 6px); background: var(--field, rgba(7, 10, 16, 0.72)); color: var(--text, #edf2f7); font: inherit; min-width: 0; } .cq-modal input:focus-visible, .cq-modal button:focus-visible { outline: 2px solid var(--blue, #5aa8ff); outline-offset: 1px; } .cq-pw { display: flex; gap: 6px; } .cq-pw input { flex: 1 1 auto; } .cq-pw-toggle { flex: 0 0 auto; width: 34px; height: 32px; padding: 0; border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); border-radius: var(--radius, 6px); background: var(--field, rgba(7, 10, 16, 0.72)); color: var(--text, #edf2f7); cursor: pointer; font: inherit; line-height: 1; } .cq-pw-toggle[aria-pressed="true"] .cq-pw-icon { opacity: 0.55; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .cq-modal button { border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); border-radius: var(--radius, 6px); background: var(--panel-solid, rgba(27, 34, 45, 0.94)); color: var(--text, #edf2f7); font: inherit; height: 30px; padding: 0 12px; cursor: pointer; } .cq-modal button:hover:not(:disabled) { border-color: rgba(90, 168, 255, 0.72); } .cq-modal button:disabled { opacity: 0.48; cursor: default; } .cq-oauth { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; padding: 10px 12px; font-weight: 600; } .cq-or { display: flex; align-items: center; gap: 8px; color: var(--muted, #9aa8ba); font-size: 11px; } .cq-or::before, .cq-or::after { content: ""; flex: 1; height: 1px; background: var(--line-faint, rgba(151, 163, 184, 0.18)); } .cq-links { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .cq-modal button.cq-link { background: none; border: 0; padding: 0; height: auto; color: var(--blue, #5aa8ff); font-size: 12px; text-decoration: underline; } .cq-modal button.cq-link:hover:not(:disabled) { border-color: transparent; } /* Reserved height so the card never resizes as the note appears and clears — panels that resize under the pointer are the bug this prevents. */ .cq-note { margin: 0; min-height: 16px; font-size: 12px; line-height: 1.35; color: var(--amber, #f5c451); } .cq-note.is-error { color: var(--red, #fb7185); } .cq-note.is-success { color: var(--green, #4ade80); } .cq-actions { display: flex; justify-content: flex-end; gap: 8px; } .cq-modal button.cq-primary { background: #16324f; border-color: rgba(90, 168, 255, 0.72); color: var(--text, #edf2f7); font-weight: 600; } /* ── Session badge ───────────────────────────────────────────────────────── */ .cq-session { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .cq-badge { display: inline-block; max-width: 260px; padding: 2px 9px; border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); border-radius: 999px; background: var(--field-deep, rgba(5, 7, 10, 0.42)); font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Four tiers, four colours — the word is always present, so colour is never the only signal. Previously "on" was binary green, painting an operator exactly like an admin. */ .cq-badge[data-tier="public"] { color: var(--muted, #9aa8ba); } .cq-badge[data-tier="none"] { color: var(--amber, #f5c451); border-color: rgba(245, 196, 81, 0.5); } .cq-badge[data-tier="operator"] { color: var(--blue, #5aa8ff); border-color: rgba(90, 168, 255, 0.5); } .cq-badge[data-tier="admin"] { color: var(--green, #4ade80); border-color: rgba(74, 222, 128, 0.5); } .cq-session-btn { height: 24px; padding: 0 10px; border: 1px solid var(--line, rgba(151, 163, 184, 0.26)); border-radius: var(--radius, 6px); background: var(--field-deep, rgba(5, 7, 10, 0.42)); color: var(--text, #edf2f7); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .cq-session-btn:hover { border-color: rgba(90, 168, 255, 0.72); } .cq-session-btn[hidden] { display: none; } /* ── Tier gating ───────────────────────────────────────────────────────────── The display client's mechanism, generalized: one attribute on , one rule per marker class, zero conditional rendering and zero stale element handles. Disclosure only — the server re-checks everything. */ html:not([data-cq-tier="admin"]) .cq-admin-only { display: none !important; } html[data-cq-tier="public"] .cq-operator-only, html[data-cq-tier="none"] .cq-operator-only { display: none !important; } html[data-cq-tier="operator"] .cq-anon-only, html[data-cq-tier="admin"] .cq-anon-only, html[data-cq-tier="none"] .cq-anon-only { display: none !important; } /* Exhibit control is a per-person grant, not a tier — admins hold it implicitly. */ html:not([data-cq-exhibit="yes"]) .cq-exhibit-only { display: none !important; } /* ── Light theme (opt-in via html[data-theme="light"], the family convention) ─ */ html[data-theme="light"] .cq-backdrop { background: rgba(20, 26, 38, 0.42); } html[data-theme="light"] .cq-modal { background: #ffffff; color: #141a26; border-color: rgba(20, 26, 38, 0.16); box-shadow: 0 18px 48px rgba(20, 26, 38, 0.18); } html[data-theme="light"] .cq-sub, html[data-theme="light"] .cq-appname, html[data-theme="light"] .cq-modal label, html[data-theme="light"] .cq-or { color: #5a6675; } html[data-theme="light"] .cq-modal input, html[data-theme="light"] .cq-pw-toggle, html[data-theme="light"] .cq-modal button { background: #ffffff; color: #141a26; border-color: rgba(20, 26, 38, 0.2); } html[data-theme="light"] .cq-modal button.cq-primary { background: #1a63e6; border-color: #1a63e6; color: #ffffff; } html[data-theme="light"] .cq-modal button.cq-link { color: #1a63e6; background: none; } html[data-theme="light"] .cq-badge, html[data-theme="light"] .cq-session-btn { background: #f4f6f9; color: #141a26; border-color: rgba(20, 26, 38, 0.18); } html[data-theme="light"] .cq-badge[data-tier="public"] { color: #5a6675; } html[data-theme="light"] .cq-badge[data-tier="none"] { color: #9a6b00; } html[data-theme="light"] .cq-badge[data-tier="operator"] { color: #1a63e6; } html[data-theme="light"] .cq-badge[data-tier="admin"] { color: #17794a; } @media (prefers-reduced-motion: reduce) { .cq-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (max-width: 420px) { .cq-links { flex-direction: column; gap: 6px; } }