diff --git a/plugins/voyage/playground/voyage-playground.html b/plugins/voyage/playground/voyage-playground.html index b8f7101..aa8bccc 100644 --- a/plugins/voyage/playground/voyage-playground.html +++ b/plugins/voyage/playground/voyage-playground.html @@ -555,6 +555,78 @@ } .voyage-fab__badge[hidden] { display: none; } + /* v4.3 Step 19 — annotation-list (sidebar): filter buttons + ordered list + jumplist count */ + .voyage-annotation-list { + display: flex; + flex-direction: column; + padding: var(--space-3); + border-bottom: 1px solid var(--color-border-subtle); + } + .voyage-annotation-list__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + margin-bottom: var(--space-2); + } + .voyage-annotation-list__filter { + display: inline-flex; + gap: var(--space-1); + } + .voyage-filter-btn { + padding: 0.15rem 0.5rem; + border: 1px solid var(--color-border-subtle); + background: var(--color-surface); + border-radius: var(--radius-sm); + cursor: pointer; + font-size: var(--font-size-xs); + } + .voyage-filter-btn[aria-pressed="true"] { + background: var(--color-scope-voyage); + color: #fff; + border-color: var(--color-scope-voyage); + } + .voyage-annotation-list__count { + font-size: var(--font-size-xs); + color: var(--color-text-tertiary, var(--color-text-secondary)); + white-space: nowrap; + } + .voyage-annotation-list__items { + list-style: none; + padding: 0; + margin: 0; + max-height: 30vh; + overflow-y: auto; + } + .voyage-annotation-list__items li { + padding: var(--space-2); + border-radius: var(--radius-sm); + cursor: pointer; + font-size: var(--font-size-sm); + display: flex; + align-items: center; + gap: var(--space-2); + } + .voyage-annotation-list__items li:hover { + background: var(--color-bg-soft); + } + .voyage-annotation-list__items li[data-active="true"] { + background: rgba(255, 235, 59, 0.18); + } + .voyage-annotation-list__items .voyage-jumplist-num { + flex: 0 0 auto; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + background: var(--color-scope-voyage); + color: #fff; + font-size: 0.7rem; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + } + /* Tabs */ [role="tablist"].voyage-tabs { display: flex; @@ -816,20 +888,23 @@ - +