/* Manual side panel, laid out as a conversation. Scoped under .mp-* so nothing here can reach the device pages, which live in their own document and keep their own stylesheet. Colours come from tokens on .mp-root so both hosts theme the same way: the extension puts that class on , the replica on the panel element. */ .mp-root { --mp-bg: #1b222c; --mp-edge: #2f3a48; --mp-bar: #161d25; --mp-text: #dbe3ea; --mp-muted: #8b9cab; --mp-faint: #6d7f8f; --mp-ask-bg: #33291a; --mp-ask-edge: #4a3a22; --mp-ask-text: #e6b878; --mp-reply-bg: #232c38; --mp-quiet-bg: #1f2732; --mp-accent: #e2a44e; --mp-control-bg: #151b23; } .mp-root[data-theme="light"] { --mp-bg: #f5f7f8; --mp-edge: #d6dde1; --mp-bar: #eceff1; --mp-text: #1d2b36; --mp-muted: #5d707d; --mp-faint: #7d8f9b; --mp-ask-bg: #fdf1dc; --mp-ask-edge: #e8cfa2; --mp-ask-text: #8a5a12; --mp-reply-bg: #ffffff; --mp-quiet-bg: #eef1f3; --mp-accent: #b4761b; --mp-control-bg: #ffffff; } .offline-frame-body.has-manual { display: flex; } .offline-frame-body.has-manual iframe { flex: 1 1 auto; width: auto; } #manualPanel { flex: 0 0 340px; display: flex; flex-direction: column; background: var(--mp-bg); border-left: 1px solid var(--mp-edge); color: var(--mp-text); overflow: hidden; } .offline-frame-body:not(.has-manual) #manualPanel { display: none; } .mp-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.75; } .mp-turn { display: flex; } .mp-turn-ask { justify-content: flex-end; } .mp-turn-reply { justify-content: flex-start; } .mp-bubble { max-width: 88%; padding: 9px 13px; border-radius: 14px; overflow-wrap: anywhere; } /* The question reads as the reader's own, so it hugs the right edge like a sent message and carries the accent. */ .mp-bubble-ask { background: var(--mp-ask-bg); color: var(--mp-ask-text); border: 1px solid var(--mp-ask-edge); border-bottom-right-radius: 4px; font-weight: bold; } .mp-bubble-reply { background: var(--mp-reply-bg); border: 1px solid var(--mp-edge); border-bottom-left-radius: 4px; color: var(--mp-text); } .mp-bubble-muted { color: var(--mp-muted); background: var(--mp-quiet-bg); } .mp-source { margin: -2px 0 0; padding-left: 4px; font-size: 10.5px; color: var(--mp-faint); line-height: 1.5; } /* ---- the bar above the conversation ------------------------------------- */ .mp-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--mp-bar); border-bottom: 1px solid var(--mp-edge); } .mp-seg { display: flex; border: 1px solid var(--mp-edge); border-radius: 5px; overflow: hidden; } .mp-seg button { border: 0; cursor: pointer; padding: 3px 9px; background: var(--mp-control-bg); color: var(--mp-muted); font: inherit; font-size: 11px; letter-spacing: .4px; } .mp-seg button[aria-pressed="true"] { background: var(--mp-accent); color: #1b222c; font-weight: bold; } .mp-spacer { flex: 1 1 auto; } .mp-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; cursor: pointer; background: var(--mp-control-bg); color: var(--mp-muted); border: 1px solid var(--mp-edge); border-radius: 5px; } .mp-icon:hover { color: var(--mp-accent); } .mp-icon svg { width: 14px; height: 14px; display: block; } /* A real switch, because it governs everything the extension does. */ .mp-switch { position: relative; width: 34px; height: 18px; flex: 0 0 auto; padding: 0; cursor: pointer; border: 1px solid var(--mp-edge); border-radius: 9px; background: var(--mp-control-bg); } .mp-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mp-muted); transition: left .15s ease, background .15s ease; } .mp-switch[aria-checked="true"] { background: var(--mp-accent); border-color: var(--mp-accent); } .mp-switch[aria-checked="true"]::after { left: 18px; background: #fff; } @media (prefers-reduced-motion: reduce) { .mp-switch::after { transition: none; } } .mp-bar button:focus-visible, .mp-seg button:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; } /* When the master switch is off the conversation is not shown at all - and neither is the question box, since answers point at a page the panel is no longer allowed to touch. */ .mp-root[data-enabled="false"] .mp-body, .mp-root[data-enabled="false"] .mp-composer { display: none; } /* ---- version and release notes ------------------------------------------- */ /* Sits in the bar, quiet until pointed at: it is a fact about the build, not a thing to be drawn to. */ .mp-version { border: 0; padding: 2px 4px; background: none; color: var(--mp-faint); font: inherit; font-size: 11px; cursor: pointer; border-radius: 4px; } .mp-version:hover { color: var(--mp-accent); } .mp-release-head { margin: 0 0 4px; font-weight: 600; color: var(--mp-accent); } .mp-release-list { margin: 0 0 10px; padding-left: 18px; } .mp-release-list li { margin: 3px 0; } .mp-release-contact { margin: 0; color: var(--mp-muted); } .mp-release-contact a { color: var(--mp-accent); } /* ---- the question box ---------------------------------------------------- */ .mp-composer { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--mp-edge); background: var(--mp-bar); } .mp-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--mp-edge); border-radius: 16px; background: var(--mp-control-bg); color: var(--mp-text); font: inherit; font-size: 12.5px; } .mp-input::placeholder { color: var(--mp-faint); } .mp-input:focus { outline: none; border-color: var(--mp-accent); } .mp-send { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--mp-accent); color: var(--mp-bar); font-size: 15px; line-height: 1; cursor: pointer; } .mp-send:hover { filter: brightness(1.08); } /* ---- search results ------------------------------------------------------ */ .mp-results { display: flex; flex-direction: column; gap: 8px; } .mp-result { border: 1px solid var(--mp-edge); border-radius: 10px; background: var(--mp-reply-bg); padding: 9px 11px; } .mp-result-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .mp-kind { flex: 0 0 auto; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--mp-quiet-bg); color: var(--mp-muted); } .mp-result-title { font-weight: 600; color: var(--mp-text); } /* One setting repeated per channel is one answer, with a count. */ .mp-also { font-size: 11px; color: var(--mp-faint); } .mp-result-body { margin: 5px 0 0; color: var(--mp-text); font-size: 12.5px; line-height: 1.65; } .mp-result-where { margin: 5px 0 0; color: var(--mp-faint); font-size: 11px; /* Page and tab, or the document it came from - the reader judges a result by where it is from, which is why search may be approximate at all. */ word-break: break-word; } .mp-goto { margin-top: 8px; padding: 3px 10px; border: 1px solid var(--mp-accent); border-radius: 999px; background: transparent; color: var(--mp-accent); font: inherit; font-size: 11.5px; cursor: pointer; } .mp-goto:hover { background: var(--mp-ask-bg); } .mp-goto:disabled { border-color: var(--mp-edge); color: var(--mp-faint); cursor: default; background: transparent; } /* Toolbar buttons in the replica shell. */ .offline-manual-toggle { display: flex; align-items: center; gap: 8px; color: #0d75a8; } .offline-manual-toggle button { height: 30px; padding: 0 12px; cursor: pointer; border: 1px solid #163c51; background: #141b21; color: #fff; font-size: 12px; } .offline-manual-toggle button[aria-pressed="true"] { border-color: #e2a44e; color: #e2a44e; } .offline-manual-toggle button + button { margin-left: 6px; } /* The version reads as a label rather than a third action, since that is what it is - the click is a way into the notes, not a setting to change. */ .offline-manual-toggle .offline-version { border: 0; background: none; color: #7d8f9b; font-size: 11px; padding: 0 4px; } .offline-manual-toggle .offline-version:hover { color: #e2a44e; } .offline-manual-toggle button:focus-visible { outline: 2px solid #e2a44e; outline-offset: 1px; }