{% extends "base.html" %} {% block title %}Design System - OpenAver{% endblock %} {% block extra_css %} {% endblock %} {% block content %}

OpenAver Design System

DaisyUI + Fluent Design 2 元件庫

Icons

Fix-1 ~ Fix-6 新增圖示

Fix-1 ～ Fix-6 期間新增的 Bootstrap Icons（依功能分類）

Toast 圖示

bi-check-circle-fill 成功 toast
bi-exclamation-circle-fill 錯誤 toast
bi-exclamation-triangle-fill 警告 toast
bi-info-circle-fill 資訊 toast

Showcase 排序與模式

bi-funnel 排序觸發
bi-hash 番號排序
bi-type 標題排序
bi-person 女優排序
bi-building 片商排序
bi-shuffle 隨機排序
bi-sort-up 排序升序
bi-sort-down 排序降序
bi-table 表格模式
bi-list-nested 每頁數量
bi-eye 資訊顯示切換
bi-clock 修改時間排序
bi-hourglass-split Loading 狀態

Search / Scanner 操作

bi-folder2-open 開啟資料夾
bi-images 補齊圖片
bi-pencil-fill 已編輯指示
bi-question-circle 說明/Help

Colors & Typography

Theme Colors

DaisyUI Base Palette

--color-base-100 Lightest background
--color-base-200 Card background
--color-base-300 Dropdown/Modal
--color-primary Primary actions

Surface Hierarchy (NEW in C.2)

--surface-0 Body background
--surface-1 Card, Sidebar
--surface-2 Dropdown, Modal

Semantic & Custom Colors

--color-warning Warning alerts, suffix badge bg
--color-warning-content Warning text on warning bg
--color-translate 翻譯功能圖示 / 按鈕色

Text Colors

Primary Text (--text-primary)

Secondary Text (--text-secondary)

Muted Text (--text-muted)

Typography Scale

Heading 1 - Space Grotesk 700

Heading 2 - Space Grotesk 600

Heading 3 - Plus Jakarta Sans 600

Heading 4 - Plus Jakarta Sans 500

Body Text - Plus Jakarta Sans 400, 1rem/1.5

Small Text - 0.875rem

§3 Overlay 角色色（4 階 + Phase 51 letterbox）

ui-conventions §3：遮罩用角色色 token，不寫 hardcoded rgba。

--overlay-gallery rgba(0,0,0,0.85) sample gallery 暗幕
--overlay-modal rgba(0,0,0,0.6) lightbox backdrop
--overlay-gradient rgba(0,0,0,0.55) card hover 漸層 bottom
--overlay-control rgba(0,0,0,0.45) 浮在媒體上的控制按鈕
--overlay-letterbox rgba(0,0,0,0.2) 媒體封面 letterbox 黑邊

Fluent Design Tokens

Border Radius

sm (2px)
md (4px)
lg (8px)
xl (12px)

Elevation Scale (Complete)

Fluent Design 2 雙層陰影系統，Light/Dark 模式自動調整深度

shadow-2 Small Button hover
shadow-4 Medium Card default
shadow-8 Large Card hover, Dropdown
shadow-16 XLarge Modal, Drawer
shadow-28 XXLarge Command Bar, FAB
shadow-64 Ambient Fullscreen Overlay

💡 Dark theme 陰影深度加倍（opacity: 0.24/0.28），自動跟隨主題切換

§4 Spacing 三層分明

ui-conventions §4：三層分類，嚴格對號入座。

Layout 8pt grid
允許值 8px · 16px · 24px · 32px · 48px · 64px
禁止 6px（改 8px 或加 optical 註釋）
用途 元件間距、section padding、card gap
Micro 2–4px
允許值 2px · 4px
例外 6px chip optical 例外須加 /* optical §4 micro chip */ 註釋
用途 icon gap、badge padding、chip 內距
Stroke 1–3px
允許值 1px · 2px · 3px
禁止 border: 2px solid red（不走 token）
用途 border / outline / separator 線條粗細

Spacing Scale

基於 8px 基礎單位的間距系統，適用於 padding/margin/gap

4px Hairline gap（微調）
8px Element padding（按鈕內距）
12px Small gap（表單欄位）
16px Standard gap（卡片區塊）
24px Section gap（章節間距）
32px Card padding（卡片內距）
48px Container gap（區塊間距）
64px Page margin（頁面邊距）

Acrylic (Blur)

背景
.fluent-acrylic blur: 30px, saturate: 140%

Materials Layer System

Fluent Design 2 材質三層架構：Canvas（整頁氛圍）→ Shell（毛玻璃工具列）→ Surface（卡片邊界感）。 Light / Dim 模式皆自動適配。

Canvas Layer body.fluent-canvas Mica 氛圍背景 — 全頁底層漸層 + noise overlay
--fluent-blur-heavy (60px) radial-gradient + noise 0.025 opacity
.fluent-toolbar
Toolbar (Shell) .fluent-toolbar 工具列標準 Acrylic — Overlay 階毛玻璃，背景透出氛圍層
--fluent-blur (30px) saturate: 130% · bg: var(--bg-header)
Surface Card
Surface Elevation inset highlight + shadow 卡片材質邊界感 — 頂部 1px 高光線 + Fluent 陰影，無 blur（floating-control 用 --fluent-blur-light (12px)）
inset 0 1px 0 oklch(base-content 8%) + var(--fluent-shadow-4)
Layer Class / Selector Effect 用途
Canvas body.fluent-canvas radial-gradient + noise 全頁 Mica 氛圍（Search / Settings / Scanner / Help）
Shell .fluent-acrylic blur(30px) saturate(140%) Offcanvas / Mobile Navbar
Shell .sidebar（自訂） blur(30px) saturate(140%) + color-mix 75% Desktop Sidebar
Shell .search-bar / .settings-header / .avlist-header（直寫，非 class hook） blur(12–16px) saturate(120–130%) 頁面工具列 header（search-bar 16px / settings-header·avlist-header 12px）；.fluent-toolbar 為備用 utility，尚未套用
Surface inset 0 1px 0 + shadow 頂部高光 + 陰影（無 blur） 卡片、terminal、state-page

Canvas 層使用 body.fluent-canvas:not(.ds-page)，排除 Design System 頁自身（DS 頁有獨立背景定義）。

Motion Duration

ultra-fast 50ms
faster 83ms
fast 167ms
normal 250ms
slow 300ms
slower 400ms

Buttons

DaisyUI Buttons

Custom Buttons

§1 Pill 999px 白名單（7 類）

ui-conventions §1：border-radius: 999px（--radius-pill）限這 7 類使用，其他元件用 var(--fluent-radius-*) token。

搜尋演員...
類 1 · .spotlight-search

頁面頂部 Spotlight 搜尋框

--radius-pill: 999px
類 2 · .btn-hero

Hero CTA 行動呼籲大按鈕

--radius-pill: 999px
動作 喜劇 自訂標籤
類 3 · .lb-tag / .lb-user-tag

Lightbox 元資料 tag chips

--radius-pill: 999px
NEW HD 4K
類 4 · .badge 類

數量徽章、狀態 badge

--radius-pill: 999px
類 5 · .sg-open-btn / .fetch-samples-btn / .mode-toggle

Lightbox / control action pill

--radius-pill: 999px
JavBus
AVSOX
類 6 · .source-pill

掃描來源開關膠囊（完整狀態見 §13）

--radius-pill: 999px
全開 無碼模式
類 7 · .settings-sources-segmented

搜尋來源 segmented 容器（完整狀態見 §15）

--radius-pill: 999px

Form Controls

Input Fields

form-control、form-select、form-check、form-check-input 為 Bootstrap classes，已由 DaisyUI override 統一視覺。

Spotlight Search (C.6 Acrylic)

膠囊形搜尋框 + Acrylic 毛玻璃效果 + 內層高光線。
Focus 狀態：scale(1.02) + 主題色發光

Checkbox & Toggle

State Matrix

核心元件的視覺狀態展示（非互動，純 CSS 強制顯示）

Button States

Default
Hover
Active
Disabled

Input States

Default
Focus
Error
Disabled

Card States

Default
預設狀態
DEFAULT
Hover
懸停狀態
HOVER
Selected
選中狀態
SELECTED

§6 5 檢查點 pass/fail 對照

ui-conventions §6：每次 PR 前確認這 5 點。左欄為違規示範（紅虛線），右欄為正確寫法（綠實線）。

1. Radius — 用 token，不硬編碼 px
✗ 違規
border-radius: 3px
border-radius: 3px
✓ 正確
fluent-radius-md
border-radius: var(--fluent-radius-md)
2. Surface — 用 surface token，不寫 hardcoded rgba
✗ 違規
rgba(255,255,255,0.5)
background: rgba(255,255,255,0.5)
✓ 正確
var(--surface-1)
background: var(--surface-1)
3. Stroke — 1px + stroke token，不任意加粗或用色彩硬編碼
✗ 違規
2px solid red
border: 2px solid red
✓ 正確
1px stroke-default
border: 1px solid var(--stroke-default)
4. Shadow — 用 Fluent token，不寫裸 rgba
✗ 違規
0 4px 8px rgba(0,0,0,0.5)
box-shadow: 0 4px 8px rgba(0,0,0,0.5)
✓ 正確
fluent-shadow-8
box-shadow: var(--fluent-shadow-8)
5. Hover / Focus — 必須有 focus-ring，不可缺少可訪問性樣式
✗ 違規
outline: none（無任何補充）
✓ 正確
outline: 2px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 4px var(--glow-primary)

Cards

Fluent Card (C.5 Enhanced)

Fluent Card

12px 圓角 + 頂部高光線 + shadow-4

Hover: 高光線加強 + shadow-8 + 主題色發光

Gallery Card

封面
作品標題範例
MIDE-974 2024-01-01

File Components

檔案操作相關元件，用於 Search 和 Gallery 頁面

File List — 動態狀態控制

每個 file-item row 結構固定：remove 按鈕、檔案圖示、檔名、狀態圖示、action slot。 action slot 內的 button/spinner 透過 Alpine x-show 互斥顯示（scrape-ready → searching → done / failed）； row 本身只切 .active class 表示當前選中。

檔案列表 5 個檔案
SONE-103.mp4 ✓
MIDE-974_HD.mp4 ✓
CAWD-441.mp4 ✓
FC2-PPV-1723984.mp4 ✗
unknown_720p.mp4 ?
狀態切換邏輯：
  • x-show="canScrapeFile(file) && !file.isScraping && file.scrapeStatus !== 'done'" → 顯示 NFO 按鈕
  • x-show="file.isScraping" → 顯示 spinner
  • x-show="file.scrapeStatus === 'done'" → 顯示完成按鈕（disabled）
  • x-show="file.scrapeStatus === 'failed'" → 顯示失敗按鈕（可重試）
  • x-show="needsNumberInput(file)" → !file.number，顯示手動輸入按鈕
/* File Item 核心樣式（search.css） */
.file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--fluent-radius-sm);
  font-size: 0.8rem; cursor: pointer;
  transition: background var(--fluent-duration-fast) var(--fluent-ease-standard);
}
.file-item.active {
  background: var(--border-light);
  color: var(--accent);
  font-weight: 600;
}
.file-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .file-status { font-size: 0.75rem; color: var(--color-success); flex-shrink: 0; }
.file-item .btn-scrape-single { flex-shrink: 0; padding: 0 6px; font-size: 0.7rem; }

Tag Badge 三層系統

標籤使用三種 badge 變體：系統標籤（灰）、中文字幕（綠）、版本標記（黃）

HD 獨家 中文字幕 -4K -CD1 -UC
三層語意：
  • .tag-badge — 預設灰（系統/來源標籤）
  • .tag-badge.subtitle — 綠色（中文字幕偵測）
  • .tag-badge.suffix-badge — 黃色（Fix-1 版本標記：-4K / -CD1 / -CD2 / -UC）
<span class="badge tag-badge">HD</span>
<span class="badge tag-badge subtitle">中文字幕</span>
<span class="badge tag-badge suffix-badge">-4K</span>

Drag Overlay (Search 彈窗)

拖曳檔案時的全螢幕覆蓋層，毛玻璃效果 + 大圖示提示，支援主題跟隨

background

拖入檔案或資料夾

主題適配： 背景色 oklch(var(--b1) / 0.6)、文字色 oklch(var(--bc)) 自動跟隨 DaisyUI 主題 

<div class="drag-overlay active">
  <div class="drag-overlay-content">
    <i class="bi bi-file-earmark-arrow-up"></i>
    <p>拖入檔案或資料夾</p>
  </div>
</div>

Folder Item

Gallery 頁的資料夾列表項目，顯示路徑和移除按鈕

/Users/username/Videos/AV
D:\Downloads\JAV\Uncensored 
.folder-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}
.folder-item:hover {
  background: var(--bg-body);
}
.folder-item:hover .btn-remove {
  opacity: 1;
}

Page States

搜尋頁面的各種狀態展示，用於引導用戶操作或顯示進度/錯誤

{% include 'design_system/page-states.html' %}

Settings Components

Settings 頁面的基礎表單元件，包含 Toggle、Select、Number input 和 Text input

{% include 'design_system/settings-components.html' %}

Page Compositions

頁面級排版 Mockup，展示遷移後的完整視覺節奏 (純靜態展示，非互動)

{% include 'design_system/page-compositions.html' %}

Modals

Fluent Design 2 風格的確認對話框，使用 DaisyUI modal + Alpine.js

Confirmation Dialog

刪除/確認操作的標準對話框，Smoke backdrop + Fluent 卡片樣式

確認刪除

確定要刪除此項目嗎？此操作無法復原。

技術細節：
  • 使用原生 <dialog> 元素 + Alpine.js $refs
  • Production 透過 Alpine class toggle（:class="{ 'modal-open': dirtyCheckModalOpen }"）控制 modal 顯示（參見 settings.html、scanner.html）；此頁 demo 使用原生 $refs.showModal() 僅為展示用途
  • Backdrop 點擊和 ESC 鍵關閉為原生功能（無需額外處理）
  • Smoke backdrop 使用 --fluent-smoke token（Light: 0.4, Dark: 0.6）
  • 卡片陰影使用 --fluent-shadow-28（XXLarge elevation）
  • 圓角使用 --fluent-radius-xl (12px)
  • Open 動畫：Scale (0.95 → 1) + Fade，250ms duration
<!-- Alpine.js 控制 -->
<div x-data>
  <button @click="$refs.dialog.showModal()">Open</button>

  <dialog x-ref="dialog" class="modal fluent-modal">
    <div class="modal-box fluent-modal-box">
      <h3 class="fluent-modal-title">Title</h3>
      <p class="fluent-modal-body">Content</p>
      <div class="modal-action fluent-modal-actions">
        <button @click="$refs.dialog.close()">Close</button>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button>close</button>
    </form>
  </dialog>
</div>

Override Warning Modal（覆蓋警告）

Fix-1 新增：當目標檔案已存在時（如 CD1/CD2 同番號）顯示覆蓋警告

檔案重複

目標檔案已存在，繼續會覆蓋原有檔案：

[SONE-205][S1] SONE-205.mp4

這通常發生在同一部影片有多個版本（CD1/CD2、4K、UC）時。

請到 設定 → 進階刮削設定 → 版本標記，新增關鍵字並確認檔案命名格式包含 {suffix} 變數。

技術差異： 此 Modal 使用 Alpine duplicateModalOpen class toggle（:class="{ 'modal-open': duplicateModalOpen }"）， 而非 Confirmation Dialog 的 $refs.dialog.showModal() 方式。兩種模式均可：
  • Class-driven：適合需要自訂背景行為（如 @click.self 關閉）
  • <dialog> native：適合標準 Escape 關閉 + focus trap
<dialog class="modal fluent-modal"
        :class="{ 'modal-open': duplicateModalOpen }"
        @click.self="closeDuplicateModal()">
  <div class="modal-box fluent-modal-box">
    <h3 class="fluent-modal-title">
      <i class="bi bi-exclamation-triangle"></i> 檔案重複
    </h3>
    <p>...</p>
    <p>包含 <code class="badge badge-sm">{suffix}</code> 變數。</p>
    <div class="modal-action">
      <button class="btn btn-sm" @click="closeDuplicateModal()">了解</button>
      <a href="/settings" class="btn btn-sm btn-primary">前往設定</a>
    </div>
  </div>
</dialog>

Toasts

Non-blocking 輕量回饋通知，底部居中自動消失，使用 DaisyUI alert + Alpine.js

Toast Variants

成功/錯誤/資訊/警告四種變體，2-3 秒後自動消失

技術細節：
  • 使用 DaisyUI toast 容器 + alert 元件
  • Alpine.js showToast() 統一管理訊息、類型、持續時間
  • 顏色變體：alert-success（綠）/ alert-error（紅）/ alert-info（藍）/ alert-warning（黃）
  • 動畫：Slide up (20px → 0) + Fade in，使用 x-transition
  • Production 無 Hover 暫停（自動消失）
  • 陰影使用 --fluent-shadow-16（XLarge elevation）
  • 圓角使用 --fluent-radius-lg (8px)
  • 持續時間：成功/錯誤 2.5 秒，資訊 3 秒
<!-- Alpine.js 控制 -->
<div x-data="{
  toastVisible: false,
  toastMessage: '',
  toastType: 'success',
  showToast(message, type = 'success', duration = 2500) {
    this.toastMessage = message;
    this.toastType = type;
    this.toastVisible = true;
    setTimeout(() => { this.toastVisible = false; }, duration);
  }
}">
  <button @click="showToast('已複製', 'success')">複製</button>

  <div class="toast toast-bottom toast-center" x-show="toastVisible">
    <div class="alert fluent-toast" :class="`alert-${toastType}`">
      <span x-text="toastMessage"></span>
    </div>
  </div>
</div>

Toast Pattern 對照

3 種 toast pattern 分別用於不同頁面，差異主要在位置、生命週期與交互行為

fluent-toast（底部居中）
search-toast（右下角 fixed）
⟳ 正在翻譯...
settings-toast（右上角 fixed）
設定已儲存
特性 fluent-toast search-toast settings-toast
位置 底部居中
toast-bottom toast-center		 右下角 fixed
bottom: 1.5rem; right: 1.5rem		 右上角 fixed
toast-end toast-top
z-index DaisyUI 預設 9999（高於 lightbox z-1000） 9999（z-[9999]）
陰影 --fluent-shadow-16
（.fluent-toast class）		 --fluent-shadow-16
（.search-toast-container .alert）		 DaisyUI 預設
動畫 Slide-up + Fade
（x-transition 自定義 class）		 Slide-up + Fade
（Tailwind translate-y-4）		 DaisyUI 預設
（x-transition）
Hover 暫停 無 無 無
關閉方式 自動消失（2–3 秒） 自動消失（auto-hide） 手動關閉按鈕 + 自動消失
pointer-events 未特別限制 container: none
alert: auto（防穿透）		 未特別限制
用途 Design System demo
通用範例		 Search 頁操作回饋
（複製路徑、NFO 產出等）		 Settings 頁操作回饋
（儲存設定等）

Help Elements

Help 頁面使用的鍵盤快捷鍵展示元件（DaisyUI kbd + table）

Keyboard Shortcuts

使用說明頁面的鍵盤快捷鍵對照表，展示主應用程式的核心快捷鍵

按鍵組合 功能
Ctrl / Cmd + K 聚焦搜尋框
← → 切換上一個/下一個結果
Esc 清空搜尋框
Enter 執行搜尋
技術細節：
  • 使用 DaisyUI <kbd> 元件（.kbd.kbd-sm）
  • 表格使用 DaisyUI <table> + .table-sm（減少內距）
  • 按鍵組合使用 + 符號清晰標示（如 Ctrl + K）
  • 欄位寬度比例：按鍵 40% / 功能 60%
  • 自動跟隨 Light/Dark 主題切換（DaisyUI 內建）

Kbd 尺寸變體

Ctrl kbd-xs
Ctrl kbd-sm
Ctrl kbd (預設)
Ctrl kbd-lg 
<!-- 快捷鍵表格 -->
<table class="table table-sm">
  <tbody>
    <tr>
      <td>
        <kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">K</kbd>
      </td>
      <td>聚焦搜尋框</td>
    </tr>
  </tbody>
</table>

Help Popover

inline question-circle + 浮動說明框，用於表單欄位的輔助說明

下載劇照
基本說明文字範例：下載劇照時會同時抓取高解析度樣本圖。
路徑長度限制
Windows 預設路徑長度限制為 260 字元，可執行以下指令解除限制： 
Set-ItemProperty -Path 'HKLM:\...' -Name 'LongPathsEnabled' -Value 1
執行後需重新啟動 Windows 才能生效。
Jellyfin 封面補齊
Jellyfin 模式下，掃描時會自動補齊缺失的封面圖片。
更新前請確認 Jellyfin 伺服器已啟動並可連線。
技術細節：
  • 使用 .help-popover-btn（觸發按鈕）+ .help-popover（浮動框）
  • 說明文字容器：.help-popover__body；code block：.help-popover__code
  • 背景色 --color-base-200 為 DaisyUI 變數，自動跟隨 Light/Dark 主題切換
  • 陰影 --fluent-shadow-4（Light 模式較淺，Dark 模式自動加深）
  • 父層容器需有 position: relative（inline 元素可用 wrapper div 提供）
  • Alpine x-transition 提供淡入淡出效果；@click.outside 點外部自動關閉
<!-- 父層容器需 position: relative -->
<div style="position: relative;">
  <!-- 觸發按鈕 -->
  <button type="button" class="help-popover-btn"
          @click="showHelp = !showHelp"
          :aria-expanded="showHelp">
    <i class="bi bi-question-circle"></i>
  </button>

  <!-- 浮動說明框 -->
  <div x-show="showHelp" x-cloak x-transition
       @click.outside="showHelp = false"
       class="help-popover">
    <small class="help-popover__body">說明文字</small>
    <!-- 可選 code block -->
    <pre class="help-popover__code"><code>指令範例</code></pre>
  </div>
</div>

Hero Terminal

來源：help.html Hero Card 右欄的 AI 整合入口指令框。 背景使用 var(--surface-2) 跟隨主題；[data-theme="dim"] override 固定深色（oklch(20% 0.01 250)）確保 dim 模式終端外觀一致。 右上角有複製按鈕，點擊後圖示切換為 ✓，1.5 秒後自動復原。

$ curl http://localhost:7080/api/capabilities
↑ Light 模式下跟隨 var(--surface-2)；Dim 模式 override 固定深色終端外觀 
<div class="hero-terminal relative" x-data="{ curlCopied: false }">
  <span class="terminal-prompt">$</span>
  curl http://localhost:7080/api/capabilities
  <button class="terminal-copy-btn"
          @click="curlCopied = true; setTimeout(() => curlCopied = false, 1500)">
    <span x-show="!curlCopied">📋</span>
    <span x-show="curlCopied">✓</span>
  </button>
</div>
技術細節：
  • .hero-terminal：背景 var(--surface-2)，[data-theme="dim"] .hero-terminal override 為固定深色 oklch(20% 0.01 250)（design-intent）
  • .terminal-prompt：青綠 var(--color-success)（iOS Green，與 .workflow-arrow/.workflow-step-num 統一動作指引色），user-select: none
  • .terminal-copy-btn：絕對定位右上角，:hover 有背景高亮
  • 此頁 CSS 由局部 <style> 提供；production 版定義見 help.css 行 17–52

Progress & Feedback

進度顯示和即時回饋元件

Progress Indicator

Search 頁的搜尋進度顯示，跟隨主題顯示（light: 淺底深字 / dim: 深底淺字）
⚠️ Demo 樣式（design-system.css scoped），production 版定義見 search.css

搜尋中
正在搜尋 SONE-103...
65 / 100 
.search-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-log::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 2px solid color-mix(in oklch, var(--color-primary) 30%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Mini Terminal

Gallery 頁的產生進度日誌視窗，Terminal 風格輸出

產生進度
[INFO] 正在產生網頁列表...
[INFO] 已處理 50 個影片
[WARN] 部分檔案缺少封面
[INFO] 產生完成
子元件說明：
  • .log-filter-group — pill tab 容器，.log-filter-btn.active 使用 primary 色
  • .log-action-btn — 透明背景小按鈕，hover 時顯色。clipboard / eraser / trash
.mini-terminal {
  background: color-mix(in oklch, var(--color-base-100) 95%, black);
  border-radius: 12px;
  overflow: hidden;
}
.mini-terminal-body {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
}

Batch Progress Bar

批次處理進度條，與 detail-progress 風格統一（藍色漸層）

處理中 4/10
處理中 15/20 
.batch-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--progress-gradient-start),
    var(--progress-gradient-end));
  transition: var(--progress-transition);
}

Collapse Toggle

展開/收起連結，使用 Alpine.js，Chevron icon 旋轉動畫

進階選項

這裡是展開後的內容區域

<div x-data="{ expanded: false }">
  <a class="collapse-toggle"
     @click="expanded = !expanded">
    <i class="bi bi-chevron-down"
       :class="{ 'rotate-180': expanded }"></i>
    進階選項
  </a>
  <div x-show="expanded" x-collapse>
    內容...
  </div>
</div>

Navigation

Sidebar (Mini Demo)

Navigation Rail (Collapsed State)

Icon-only 導航條，用於收合側邊欄時的精簡模式。展示 Fluent Design 2 規範的 48x48px 正方形項目 + pill 形 active 狀態

STATE MATRIX

Default
Hover
Active

TECHNICAL SPECS

容器寬度 60px
項目尺寸 48px × 48px 正方形
Icon 尺寸 24px
間距 0.5rem (8px) 垂直間距
Default 圓角 var(--fluent-radius-md) (4px)
Active 圓角 var(--radius-pill) (膠囊形)
Active 背景 color-mix(in oklch, var(--accent) 15%, transparent)
Active 邊框 2px solid var(--accent)
Active 發光 0 0 16px var(--glow-primary)
Hover 背景 color-mix(in oklch, var(--color-base-content) 8%, transparent) 
.ds-nav-rail {
  width: 60px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 6px;
}

.ds-nav-rail-link {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fluent-radius-md);
}

.ds-nav-rail-link.active {
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  color: var(--color-primary-content);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 16px var(--glow-primary);
}

Rotating Border Effect

單光點旋轉外框特效，用於指示「有本地匹配」或「有內容」狀態

Basic Usage

為元素添加 .rotating-border-spotlight class，並用 .active 啟用旋轉

Inactive State

沒有旋轉效果

Active State

正在旋轉

<div class="rotating-border-spotlight active">
  <!-- 內容 -->
</div>

Use Cases

實際應用場景展示

1. Card with Local Match

cover
SONE-103
2024-01-15 · 本地匹配（以外框提示）

2. Sidebar Navigation Link

3. Search Result Info Section

本地資料庫匹配

檔案： /Users/username/Videos/SONE-103.mp4
大小： 2.4 GB

Technical Specs

旋轉速度 2.5 秒/圈
光點角度 30° 核心 + 30° 拖尾 = 60° 總長
Light Mode 透明度 0.6 (核心) / 0.3 (拖尾)
Dark Mode 透明度 0.7 (核心) / 0.4 (拖尾)
顏色來源 延續 --accent 藍色系
瀏覽器支援 Chrome 85+, Edge 85+, Safari 15.4+, Firefox 128+

Speed Variants (Optional)

可選的速度變體，用於不同強調程度

Slow (4s)
Normal (2.5s)
Fast (1.5s) 
<!-- 慢速旋轉 -->
<div class="rotating-border-spotlight speed-slow active">...</div>

<!-- 快速旋轉 -->
<div class="rotating-border-spotlight speed-fast active">...</div>

Once Variants

單次旋轉 modifier，動畫播放完後自動停止，適用於提示類場景

.once（5 圈停止）
.pulse-once（1 圈停止） 
<!-- 本地匹配提示：旋轉 5 圈後停止 -->
<div class="rotating-border-spotlight active once">...</div>

<!-- Sidebar 事件觸發：旋轉 1 圈後停止 -->
<div class="rotating-border-spotlight active pulse-once">...</div>

Accessibility & Fallback

Feedback

Alert / Badge

Badge 錯誤 成功

Toast

toast-msg 和 source-toast-inline 為舊版實作，已棄用。 標準 Toast 實作為 fluent-toast，請參見 Toasts section。

Progress Bar

detail-progress 和 batch-progress 的完整展示（含 code snippet） 請參見 Progress & Feedback section。

Spinner

Showcase Elements

Showcase 頁面專屬元件：Toolbar Dropdown、Status Bar + Pagination、Table Mode、List Mode

Toolbar Dropdown

工具列下拉選單，包含三種變體：排序（Sort）、顯示模式（Mode）、每頁數量（Per-page）。使用 .toolbar-dropdown-wrap + .toolbar-dropdown 搭配 Alpine.js x-show 控制開關。

Status Bar + Pagination (legacy reference — showcase 已改用底部 footer)

Showcase 頁面固定於內容區頂端的狀態列，左側顯示統計資訊，右側顯示分頁控制。使用 .showcase-status-bar、.status-total、.status-pagination、.page-btn、.page-select。
⚠️ 注意：此元件自 v0.7.8 (49a-T4) 起已從 showcase 主頁移除，改由底部 .showcase-footer 三段式統合，此處保留作為元件 reference。

共 128 部影片

.page-btn 加上 disabled attribute 呈現禁用狀態（如上方「上一頁」按鈕）；.page-select 為頁碼選擇器。

Table Mode

表格模式使用 .showcase-table-wrapper + .table-scroll-container 實現水平捲動。每列使用 .table-row-clickable 提供 hover 互動效果。標籤欄使用 .table-tags-wrapper + .table-tag + .table-tag-more 呈現 tag 群組。

# 品番 標題 演員 廠商 導演 時長 日期 標籤 大小
1 ABC-001 示範影片標題 A 示範演員 示範廠商 示範導演 120 分 2024-01-15
劇情 高清 中文字幕 +2
4.2 GB
2 DEF-002 示範影片標題 B 示範演員 A, 示範演員 B 示範廠商 - 95 分 2024-02-20
動作 4K
8.7 GB
3 GHI-003 示範影片標題 C 示範演員 A 另一廠商 示範導演 B - 2024-03-10 - 2.1 GB

List Mode

清單模式使用 .showcase-list-wrapper + .showcase-list（<ul>）呈現精簡文字列表。每筆包含 .list-number（品番）、.list-title（標題）、.list-actor（演員），.list-item 具備 hover 互動效果。

  • ABC-001 示範影片標題 A (示範演員)
  • DEF-002 示範影片標題 B (示範演員 A, 示範演員 B)
  • GHI-003 示範影片標題 C (示範演員 A)

Search Elements

Search 頁面專屬元件：Sample Gallery、Shimmer Loading、Cover Actions、Sample Strip

Sample Gallery Overlay

全螢幕 sample 圖瀏覽 overlay（.sample-gallery）。原本是 position: fixed; inset: 0，demo 中以相對定位容器模擬。 支援主圖顯示、左右導航、計數器、縮圖列。.show class 控制可見性。

Sample Image

Classes：.sample-gallery .show .sg-close .sg-counter .sg-main-wrap .sg-main-img .sg-nav .sg-prev .sg-next .sg-thumbs .sg-thumb-btn .sg-thumb-active .sg-thumb-img

Shimmer / Skeleton Loading

載入中佔位動畫。兩種使用情境： (1) .cover-loading-placeholder > .shimmer（詳情封面佔位，position: absolute; inset: 0）； (2) .skeleton-cover.shimmer（grid card 封面佔位，aspect-ratio: 3/2）。 動畫由 search.css 的 @keyframes shimmer 提供，此處不重複定義。

情境 1：.cover-loading-placeholder > .shimmer（詳情封面）

情境 2：.skeleton-cover.shimmer（grid card 封面）

Classes：.cover-loading-placeholder .shimmer .skeleton-cover

Lightbox Cover-Actions

封面圖上的 glass-circle 按鈕群組（.cover-actions）。 CSS 選擇器為 .lightbox-cover .cover-actions，必須保留 .lightbox-cover 父容器。 預設 opacity: 0，hover .lightbox-cover 時 fade in。 Tooltip 由 CSS ::after 從 data-tooltip 屬性讀取，不需 JS。

Hover me

Classes：.lightbox-cover（父容器）.cover-actions .lb-action-btn 屬性：data-tooltip

Sample Strip

水平可捲動縮圖列（.sample-strip）。每張縮圖為 .sample-thumb-btn，active 狀態加 .sample-thumb-active（outline 高亮）。 縮圖高度由 clamp(48px, calc(var(--cover-height, 400px) * 0.18), 120px) 計算；demo 容器設 --cover-height: 400px 讓計算正確。

Classes：.sample-strip .sample-thumb-btn .sample-thumb-active .sample-thumb-img CSS var：--cover-height

Notification Center

53b-T1 靜態 demo — 鈴鐺 4 狀態 + 抽屜 4 嚴重度通知樣本。實際 poll / 已讀邏輯 / anchor 定位 / focus trap 已於 53b-T2~T5 接入 base.html（本頁為靜態樣本登記）。

Bell States

鈴鐺 4 狀態（idle / info / warn / error），DaisyUI semantic color 自動跟主題（CD-53B-9）。

idle
INFO
WARN
ERROR

Drawer (Expanded Sample)

抽屜展開狀態，4 個嚴重度通知樣本。實際 anchor 定位 / 開關動畫 / focus trap 在 T4 接入。

Demo Controls

切換假資料 / 全部清空（demo 階段為 no-op：直接清空 demoItems，T5 才接 confirm）。

技術細節： 嚴重度顏色用 DaisyUI semantic（bg-info / bg-success / bg-warning / bg-error），跟主題自動切換（CD-53B-9）。 抽屜 panel 用 bg-base-100 + shadow-lg + rounded-xl，T4 整合 base.html 時再對齊 §2 玻璃階。 T1 demo 不引入 @alpinejs/anchor、@alpinejs/focus、x-collapse，皆留 T4 / T5 處理。
Demo Controls 文案 i18n 例外：「切換假資料 / 有通知 / 空抽屜 / 清空 (demo no-op)」為 design-system 內部開發者用文案，沿 ds-desc 中文慣例不抽 i18n。
{% endblock %}