Spaces:
Paused
Paused
| /* Annotator search-and-claim sidebar. | |
| Left-edge toggle (memos owns the right edge). | |
| Consistency: this consumes the memos design system tokens directly | |
| (loaded first in base_template_v2.html) so the two sidebars can never | |
| drift. Literal fallbacks keep this file self-contained if load order | |
| ever changes. Vanilla CSS, no deps, no build step. */ | |
| :root { | |
| --se-space-1: var(--memo-space-1, 4px); | |
| --se-space-2: var(--memo-space-2, 8px); | |
| --se-space-3: var(--memo-space-3, 12px); | |
| --se-space-4: var(--memo-space-4, 16px); | |
| --se-space-5: var(--memo-space-5, 24px); | |
| --se-radius: var(--memo-radius, 8px); | |
| --se-ink: var(--memo-ink, #1f2330); | |
| --se-ink-soft: var(--memo-ink-soft, #5b6072); | |
| --se-line: var(--memo-line, #e4e5ec); | |
| --se-surface: var(--memo-surface, #ffffff); | |
| --se-surface-2: var(--memo-surface-2, #f7f8fb); | |
| --se-accent: var(--memo-accent, #4063b8); | |
| --se-accent-ink: var(--memo-accent-ink, #ffffff); | |
| --se-focus: var(--memo-focus, #6c8cff); | |
| /* Tertiary surface, pressed accent, stronger hairline, disabled ink, | |
| placeholder, badge neutrals and tokenised shadow ink — so hover/ | |
| active/badge states stop hard-coding the same literals the rest of | |
| the sidebar system already tokenises (parity with codebook.css). */ | |
| --se-surface-3: var(--memo-surface-3, #eef0f6); | |
| --se-line-strong: var(--memo-line-strong, #cdd2e4); | |
| --se-accent-press: var(--memo-accent-press, #36559e); | |
| --se-disabled: var(--memo-disabled, #aab2cc); | |
| --se-placeholder: var(--memo-placeholder, #9aa0b4); | |
| --se-shadow-ink: var(--memo-shadow-ink, 31, 35, 48); | |
| --se-badge-surface: var(--memo-badge-surface, #eceef4); | |
| --se-badge-ink: var(--memo-badge-ink, #494f63); | |
| --se-badge-line: var(--memo-badge-line, #dcdfe9); | |
| /* Match highlight: a calm tinted-amber wash (the same one intentional | |
| non-neutral the codebook's stale notice uses), never the action | |
| blue — emphasis, not a call to action. */ | |
| --se-hit-surface: var(--memo-hit-surface, #fbe7c2); | |
| --se-hit-ink: var(--memo-hit-ink, #5c4300); | |
| } | |
| .search-panel-toggle { | |
| position: fixed; | |
| left: 0; | |
| top: 42%; | |
| transform: translateY(-50%); | |
| z-index: 1040; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--se-space-2); | |
| min-height: 44px; | |
| border: 1px solid var(--se-line); | |
| border-left: none; | |
| background: var(--se-surface); | |
| color: var(--se-ink); | |
| padding: 10px 14px; | |
| border-radius: 0 var(--se-radius) var(--se-radius) 0; | |
| box-shadow: 1px 1px 6px rgba(var(--se-shadow-ink), 0.08); | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| transition: background-color 160ms ease-out, transform 160ms ease-out; | |
| } | |
| .search-panel-toggle:hover { | |
| background: var(--se-surface-2); | |
| transform: translateY(-50%) translateX(2px); | |
| } | |
| .search-panel-toggle:active { background: var(--se-surface-3); } | |
| .search-panel { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| height: 100vh; | |
| width: 360px; | |
| max-width: 92vw; | |
| background: var(--se-surface); | |
| border-right: 1px solid var(--se-line); | |
| box-shadow: 4px 0 24px rgba(var(--se-shadow-ink), 0.10); | |
| z-index: 1050; | |
| display: flex; | |
| flex-direction: column; | |
| color: var(--se-ink); | |
| } | |
| .search-panel:not([hidden]) { animation: search-panel-in 200ms ease-out; } | |
| @keyframes search-panel-in { | |
| from { opacity: 0; transform: translateX(-12px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .search-panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--se-space-4); | |
| border-bottom: 1px solid var(--se-line); | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| } | |
| .search-panel-header button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| border-radius: 6px; | |
| background: none; | |
| font-size: 1.25rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| color: var(--se-ink-soft); | |
| transition: background-color 140ms ease-out, color 140ms ease-out; | |
| } | |
| .search-panel-header button:hover { | |
| background: var(--se-surface-2); | |
| color: var(--se-ink); | |
| } | |
| .search-form { | |
| display: flex; | |
| gap: var(--se-space-2); | |
| padding: var(--se-space-4); | |
| border-bottom: 1px solid var(--se-line); | |
| } | |
| .search-form input { | |
| flex: 1; | |
| min-width: 0; | |
| border: 1px solid var(--se-line); | |
| border-radius: 6px; | |
| padding: var(--se-space-2) var(--se-space-3); | |
| font: inherit; | |
| font-size: 0.9rem; | |
| color: var(--se-ink); | |
| transition: border-color 140ms ease-out, box-shadow 140ms ease-out; | |
| } | |
| .search-form input::placeholder { color: var(--se-placeholder); } | |
| .search-form input:focus { | |
| outline: none; | |
| border-color: var(--se-focus); | |
| box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.18); | |
| } | |
| .search-primary { | |
| border: 1px solid var(--se-accent); | |
| background: var(--se-accent); | |
| color: var(--se-accent-ink); | |
| min-height: 36px; | |
| padding: 7px 16px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| transition: background-color 150ms ease-out, transform 120ms ease-out; | |
| } | |
| .search-primary:hover { background: var(--se-accent-press); } | |
| .search-primary:active { transform: translateY(1px); } | |
| .search-primary:disabled { | |
| background: var(--se-disabled); | |
| border-color: var(--se-disabled); | |
| cursor: progress; | |
| transform: none; | |
| } | |
| .search-results { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--se-space-4); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--se-space-3); | |
| } | |
| .search-empty, | |
| .search-loading { | |
| color: var(--se-ink-soft); | |
| font-size: 0.85rem; | |
| text-align: center; | |
| margin-top: var(--se-space-5); | |
| line-height: 1.5; | |
| } | |
| .search-item { | |
| border: 1px solid var(--se-line); | |
| border-radius: var(--se-radius); | |
| padding: var(--se-space-3) var(--se-space-4); | |
| background: var(--se-surface-2); | |
| transition: border-color 140ms ease-out; | |
| } | |
| .search-item:hover { border-color: var(--se-line-strong); } | |
| .search-item .search-snippet { | |
| font-size: 0.88rem; | |
| line-height: 1.5; | |
| color: var(--se-ink); | |
| word-break: break-word; | |
| } | |
| /* The matched term, wrapped in <mark> by search.js. A calm tinted wash | |
| with a slight weight bump — emphasis, not the action accent. Reset the | |
| UA default so it carries the design-system colours. */ | |
| .search-item .search-snippet mark.search-hit { | |
| background: var(--se-hit-surface); | |
| color: var(--se-hit-ink); | |
| font-weight: 600; | |
| border-radius: 3px; | |
| padding: 0 2px; | |
| } | |
| .search-item .search-row { | |
| margin-top: var(--se-space-3); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--se-space-2); | |
| font-size: 0.72rem; | |
| color: var(--se-ink-soft); | |
| } | |
| /* Echoes .memo-badge.private — the instance id reads as a neutral badge. */ | |
| .search-id { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| background: var(--se-badge-surface); | |
| color: var(--se-badge-ink); | |
| border: 1px solid var(--se-badge-line); | |
| border-radius: 999px; | |
| padding: 1px 8px; | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| } | |
| .search-claim { | |
| margin-left: auto; | |
| border: 1px solid var(--se-accent); | |
| background: none; | |
| color: var(--se-accent); | |
| cursor: pointer; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 5px; | |
| transition: background-color 140ms ease-out, color 140ms ease-out; | |
| } | |
| .search-claim:hover { background: var(--se-accent); color: var(--se-accent-ink); } | |
| .search-claim:active { background: var(--se-accent-press); border-color: var(--se-accent-press); } | |
| .search-claim:disabled { opacity: 0.55; cursor: progress; } | |
| /* Echoes .memo-badge.shared — a positive, in-queue state. */ | |
| .search-claimed { | |
| margin-left: auto; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--se-space-1); | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| color: #246b3c; | |
| background: #e2f1e7; | |
| border: 1px solid #bcdec8; | |
| border-radius: 999px; | |
| padding: 2px 10px; | |
| } | |
| .search-claim-error { | |
| margin-left: auto; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: #b23b3b; | |
| background: #fbeeee; | |
| border: 1px solid #f0d2d2; | |
| border-radius: 5px; | |
| padding: 4px 10px; | |
| } | |
| .search-panel-toggle:focus-visible, | |
| .search-panel button:focus-visible, | |
| .search-panel input:focus-visible { | |
| outline: 2px solid var(--se-focus); | |
| outline-offset: 2px; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .search-panel:not([hidden]) { animation: none; } | |
| .search-panel-toggle, | |
| .search-primary, | |
| .search-claim, | |
| .search-item, | |
| .search-panel-header button { transition: none; } | |
| } | |