/** * IM Styles - legacy structural component classes. * * Design tokens live in tokens.css (source of truth). This file retains * the structural classes still used by ~6 deck/card views that were not * migrated to the new component layer: deck-header-container, deck-title-row, * deck-header-actions, deck-toolbar, switch-view-group, grouped-links, * action-btn, etc. It loads after the foundation files; do not add new * styles here - use components.css / pages.css instead. */ /* Legacy alias: --accent-soft-dark is referenced in this file and pages.css. Canonical token is --accent-border (see tokens.css). */ :root { --accent-soft-dark: var(--accent-border); } /* ========== 強調色變體 · light（預設 cyan 由 :root 提供）========== 透過 切換；--accent-soft / --accent-border 以 color-mix 自動適配 light/dark，無需每色寫兩套。 */ :root[data-accent="blue"] { --accent: #2563eb; --accent-hover: #1d4ed8; } :root[data-accent="emerald"] { --accent: #059669; --accent-hover: #047857; } :root[data-accent="rose"] { --accent: #e11d48; --accent-hover: #be123c; } :root[data-accent="amber"] { --accent: #d97706; --accent-hover: #b45309; } :root[data-accent="violet"] { --accent: #7c3aed; --accent-hover: #6d28d9; } :root[data-accent="slate"] { --accent: #475569; --accent-hover: #334155; } /* ========== 整體布局 ========== */ body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); overflow: hidden; } #app-container { border: none; background: var(--surface); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; height: 100dvh; } #app-container > header { flex: 0 0 auto; } #desktop-container { flex: 1 1 auto; display: flex; overflow: hidden; } #desktop-container main { flex: 1; overflow-y: auto; overflow-x: hidden; } #app-container > footer { flex: 0 0 auto; } .footer-links-right { text-align: right; padding: 4px 0; } #app-container > footer:has(.ios-float-nav) { flex: 0 0 0; height: 0; overflow: visible; } .ios-float-nav { position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1200; width: min(420px, calc(100vw - 35vw)); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 4px; padding: 5px; border-radius: 999px; overflow: hidden; background: rgba(249, 250, 251, 0.78); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: saturate(165%) blur(20px); backdrop-filter: saturate(165%) blur(20px); } .ios-float-nav-item { height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .ios-float-nav-item:hover { color: var(--accent-hover); background: var(--accent-soft); border-radius: 999px; } .ios-float-nav-item:active { transform: scale(0.97); } .ios-float-nav-item.is-active { color: var(--accent-contrast); background: var(--accent); box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35); } .ios-float-nav-icon { font-size: 1.28rem; line-height: 1; font-weight: 500; transform: translateY(-1px); } #app-container:has(.ios-float-nav) #desktop-container main { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } /* ========== 頭部導航 ========== */ #app-container > header { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 0.7em 1em; font-size: 0.95em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1em 0.15em; } #app-container > header a { color: var(--text-muted); padding: 0.3em 0.55em; border-radius: var(--radius-md); transition: background-color 0.15s ease, color 0.15s ease; } #app-container > header a.header-app-icon-link { align-items: center; line-height: 1; } #app-container > header img.header-app-icon { display: block; width: 1.5em; height: 1.5em; } #app-container > header a:hover { background: var(--surface-3); color: var(--text); } #app-container > header strong { color: var(--text); font-weight: 600; } /* ========== 側邊欄 (聯絡人列表風格) ========== */ #desktop-container aside { background: var(--surface-2); border-right: 1px solid var(--border); flex: 0 0 280px !important; overflow-y: auto; overflow-x: hidden; } /* Deck 列表樣式 */ .deck-list-filter { display: grid; gap: 8px; padding: 10px 12px 0 12px; } .deck-list-filter-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; font-size: 0.9em; background: var(--surface); } ul.deck-list { margin: 0; padding: 0; list-style: none; } ul.deck-list li { border-bottom: 1px solid var(--border); margin: 0; transition: background 0.15s ease; } ul.deck-list li > a { padding: 12px 15px; display: block; text-decoration: none; color: var(--text); } ul.deck-list li:hover { background: var(--surface-3); } ul.deck-list li:active, ul.deck-list li.active { background: var(--surface-3); } .deck-profile-pic { width: 40px; height: 40px; border-radius: 4px; background: var(--accent-soft-dark); color: var(--text); font-size: 1.1em; margin-right: 10px; min-width: 40px; display: flex; align-items: center; justify-content: center; } /* ========== 主內容區域 ========== */ #desktop-container main { background: var(--bg); display: flex; flex-direction: column; } /* ========== 聊天氣泡卡片 ========== */ .card { border: none; border-radius: 4px; padding: 0; margin: 0; background: transparent; box-shadow: none; overflow: visible; } /* 卡片主要內容區 - 類似對話氣泡 */ .card > .card-bubble { background: var(--surface); border-radius: 4px; padding: 12px 15px; margin: 10px 15px; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* 綠色氣泡 (AI 回應或特殊標記) */ .card.gold .card-bubble, .card.ai-response .card-bubble { background: var(--accent-soft); } /* 卡片標題 */ .card-title { text-align: left; margin: 0 0 8px 0; font-size: 1em; font-weight: 600; color: var(--text); } /* 卡片元信息 */ .card-meta-label { background: transparent; position: static; margin: 0; padding: 0; font-size: 0.75em; color: var(--text-subtle); display: flex; align-items: center; gap: 8px; } .card-meta-label a { color: var(--text-muted) !important; } .card-happened-at { color: var(--text-subtle); font-size: 0.9em; } /* 置頂標記 */ .card.gold { border: none; } .card.gold .card-bubble { background: #fefce8; border-left: 3px solid #fde047; } /* 歸檔標記 */ .archived { background: #e0e0e0; color: #666; padding: 2px 6px; border-radius: 3px; font-size: 0.75em; } /* ========== 評論區域 (對話串風格) ========== */ .comment-show { margin: 8px 15px; position: relative; display: flex; justify-content: flex-end; } /* 評論氣泡容器 */ .comment-bubble { background: var(--surface); border-radius: 4px; padding: 10px 12px; display: inline-block; max-width: 85%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); position: relative; } /* AI 的評論 (左側) */ .comment-show.ai-comment { justify-content: flex-start; } /* 自己的評論 (右側綠色) */ .comment-show.own-comment .comment-bubble { background: var(--accent-soft); float: right; } /* 評論時間 */ .comment-time { font-size: 0.7em; color: var(--text-subtle); margin-bottom: 4px; } .comment-time a { color: var(--text-subtle); text-decoration: none; } /* 評論操作按鈕 */ .comment-actions { display: inline-flex; gap: 5px; opacity: 0; transition: opacity 0.2s; } .comment-show:hover .comment-actions { opacity: 1; } .comment-actions button, .comment-actions form button { font-size: 0.7em; padding: 2px 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 3px; cursor: pointer; color: var(--text-muted); } .comment-actions button:hover { background: var(--bg); } /* 清除浮動 */ .comment-show::after { content: ""; display: table; clear: both; } /* ========== 底部輸入區域 ========== */ .send-message-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 12px 15px; } .send-message-footer textarea, .send-message-footer input[type="text"] { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; font-size: 1em; resize: none; min-height: 44px; max-height: 120px; background: var(--surface); transition: border-color 0.2s; } .send-message-footer textarea:focus { outline: none; border-color: var(--accent-soft); } .send-message-footer input[type="submit"] { background: var(--accent-soft); border: none; border-radius: 4px; padding: 10px 20px; color: var(--text); font-size: 1em; cursor: pointer; min-width: 60px; transition: opacity 0.2s; } .send-message-footer input[type="submit"]:hover { opacity: 0.9; } .send-message-footer input[type="submit"]:active { opacity: 0.8; } .send-message-footer .quick-attach-rich-text { margin-right: 6px; } .send-message-footer .quick-attach-rich-text trix-toolbar { border: 1px solid var(--border); border-radius: 4px; background: var(--surface); padding: 0; } .send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-row { display: flex; } .send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-group { margin: 0; border: 0; } .send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-group:not(.trix-button-group--file-tools), .send-message-footer .quick-attach-rich-text trix-toolbar .trix-dialogs { display: none; } .send-message-footer .quick-attach-rich-text trix-toolbar .trix-button--icon-attach { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; } .send-message-footer .quick-attach-rich-text trix-toolbar .trix-button--icon-attach::before { transform: scale(0.72); transform-origin: center; } .send-message-footer .quick-attach-rich-text .quick-attach-editor { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } /* Camera button in the Trix toolbar (left of the attach button). Opens the device's native camera on mobile; a normal image picker on desktop. See initTrixCameraButton in application.js. */ trix-toolbar .trix-button--icon-camera::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23%2019a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4l2-3h6l2%203h4a2%202%200%200%201%202%202z%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%224%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* Trix toolbar icons are black (#000 at 0.6 opacity), invisible on the dark toolbar surface. Invert them in dark theme so they (and the camera button) stay visible. */ html[data-theme="dark"] trix-toolbar .trix-button--icon::before { filter: invert(1); } /* ========== 卡片預覽 (網格視圖) ========== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; padding: 10px; } .card-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin: 0; height: auto; min-height: 120px; max-height: 360px; overflow: hidden; transition: background 0.2s, box-shadow 0.2s; } :has(#table-view:checked) .card-preview { border: none; border-bottom: 1px solid var(--border); border-radius: 0; min-height: initial; } .card-preview:hover { background: #fafafa; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .card-preview .card-meta-label { margin-bottom: 8px; } .card-preview-content { color: #666; font-size: 0.9em; line-height: 1.5; } /* ========== AI Responses 列表 ========== */ .ai-responses-list { display: flex; flex-direction: column; gap: 12px; padding: 15px; } .ai-response-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-decoration: none; color: inherit; transition: background 0.2s, box-shadow 0.2s; } .ai-response-card:hover { background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .ai-response-card .card-meta-label { margin-bottom: 10px; font-size: 0.85em; } .ai-response-title { font-size: 1.1em; font-weight: 600; color: var(--text); margin-bottom: 12px; } .ai-response-content { color: #555; font-size: 0.95em; line-height: 1.6; } .ai-response-content p { margin: 0; } .empty-state { text-align: center; color: var(--text-subtle); padding: 40px; font-size: 1.1em; } /* ========== 按鈕組 ========== */ .group-label { font-size: 0.85em; color: var(--text-subtle); margin-right: 5px; } /* 卡片操作按鈕組 */ .action-btn-ai { background: var(--accent-soft) !important; border-color: var(--accent-soft-dark) !important; } /* Column 切換組 */ /* Mark 操作組 */ .trash-card-item { display: flex; flex-direction: column; gap: 8px; } .trash-card-actions { display: flex; gap: 8px; margin: 0 15px 12px; } /* ========== 分組鏈接 ========== */ .grouped-links { display: flex; gap: 0; flex-wrap: wrap; margin: 10px 15px; } .grouped-links > a { text-decoration: none; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface); margin-left: -1px; color: var(--text); font-size: 0.9em; transition: background 0.2s; } .grouped-links > a:hover { background: var(--bg); } .grouped-links > a:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-left: 0; } .grouped-links > a:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* ========== 通知消息 ========== */ .notice { background: var(--accent-soft); color: var(--text); border: none; border-radius: 4px; padding: 10px 15px; position: fixed; top: 20px; right: 20px; bottom: auto; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ========== 日曆視圖 ========== */ .simple-calendar { background: var(--surface); border-radius: 4px; margin: 10px 15px; padding: 15px; } .simple-calendar .day { background: var(--bg); border: 1px solid var(--border); padding: 8px; overflow: hidden; } .simple-calendar .today { background: var(--accent-soft-dark); } /* Calendar card preview overflow fix */ .card-in-calendar { overflow: hidden !important; word-break: break-word; max-width: 100%; } .card-in-calendar .card-preview-content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .card-in-calendar img { max-width: 100%; height: auto; } .calendar-nav { display: flex; justify-content: space-between; margin: 10px 15px; padding: 10px; background: var(--surface); border-radius: 4px; } .calendar-nav a { color: var(--text-muted); } /* ========== 分頁 ========== */ .pagy { margin: 15px; display: flex; justify-content: center; gap: 5px; } .pagy a { padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-decoration: none; transition: all 0.2s; } .pagy a:hover { background: var(--bg); } .pagy a.current { background: var(--accent-soft-dark); border-color: var(--border); } /* ========== 響應式調整 ========== */ @media screen and (max-width: 1000px) { #desktop-container aside { display: none; } .comment-bubble { max-width: 90%; } .cards-grid { grid-template-columns: 1fr; padding: 4px; gap: 4px; } /* 手機：減少左右空位 */ #app-container { height: 100dvh; } #app-container > header { padding: 0.4em 0.4em; font-size: 0.8em; } #app-container > header a { padding: 0.15em 0.3em; } #desktop-container main { padding: 0; } .card > .card-bubble { margin: 4px; padding: 8px 10px; border-radius: 3px; } .comment-show { margin: 4px; } .grouped-links { margin: 4px; } .send-message-footer { padding: 6px; } .send-message-footer textarea { padding: 8px; } .pagy { margin: 4px; } table { margin: 4px; width: calc(100% - 8px); } .simple-calendar, .calendar-nav, .switch-view-group, .deck-header { margin: 4px !important; padding: 8px !important; } /* Deck list 更少空位 */ ul.deck-list li > a { padding: 10px 8px; } .deck-profile-pic { width: 36px; height: 36px; min-width: 36px; font-size: 1em; } .ios-float-nav { width: min(420px, calc(100vw - 35vw)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 3px; padding: 4px; } .ios-float-nav-item { height: 40px; } .ios-float-nav-icon { font-size: 1.16rem; } #app-container:has(.ios-float-nav) #desktop-container main { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } /* Page header & toolbar 更緊湊 */ .page-header { margin: 4px; } .page-header h1 { font-size: 1.1em; } .page-toolbar { margin: 4px; gap: 4px; } .page-toolbar .btn-primary, .page-toolbar .btn-secondary { padding: 4px 8px; font-size: 0.85em; } /* Deck header container 手機樣式 */ .deck-header-container { margin: 4px; padding: 10px; } .deck-title-row { flex-wrap: wrap; gap: 8px; } .deck-title-row h1 { font-size: 1.1em; flex: 1 1 auto; min-width: 0; } .deck-header-actions { gap: 8px; flex-wrap: nowrap; } .btn-icon { padding: 4px 6px; font-size: 0.9em; } .switch-view-group.compact { padding: 2px 6px; gap: 6px; } .switch-view-group.compact label { font-size: 0.8em; } .switch-view-group.compact input[type="radio"] { width: 14px; height: 14px; } .deck-description { font-size: 0.85em; } /* Column filter 更緊湊 */ .column-filter { margin: 4px; } .column-filter > a { padding: 4px 8px; font-size: 0.8em; } /* Calendar link */ .calendar-link { margin: 4px; } /* Pagination */ .pagination-top, .pagination-bottom { margin: 4px; } /* 卡片元信息更緊湊 */ .card-meta-label { font-size: 0.7em; gap: 4px; } .card-title { font-size: 0.95em; margin-bottom: 6px; } /* AI 回應區域更緊湊 */ .ai-response-section { margin-top: 10px; padding-top: 10px; } .ai-content { padding: 8px; } /* Button groups 更緊湊 */ } /* ========== 鏈接樣式統一 ========== */ a:link, a:visited { color: var(--text-muted); text-decoration: none; } a:hover { background: transparent; /* text-decoration: underline; */ } /* 頂部導航特殊處理 */ #app-container > header a:hover { text-decoration: none; } /* ========== 輸入框樣式 ========== */ input[type="text"], input[type="email"], input[type="password"], textarea { border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-size: 1em; background: var(--surface); transition: border-color 0.2s; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { outline: none; border-color: var(--accent-soft); } /* ========== 表格樣式 ========== */ table { background: var(--surface); border: 1px solid var(--border); margin: 10px 15px; width: calc(100% - 30px); } table th { background: var(--surface-2); font-weight: 600; } table th, table td { border: 1px solid var(--border); padding: 10px; } table tr:nth-child(even) { background: var(--bg); } table tr:hover { background: #ebebeb; } /* ========== 頂部操作區 ========== */ /* ========== 加載動畫 ========== */ .loading-spinner { text-align: center; padding: 40px; color: var(--text-subtle); } /* ========== 切換視圖按鈕 ========== */ .switch-view-group { margin: 10px 15px; padding: 10px; background: var(--surface); border-radius: 4px; display: flex; gap: 15px; } .switch-view-group label { cursor: pointer; display: flex; align-items: center; gap: 5px; } .switch-view-group input[type="radio"] { width: auto; } /* ========== AI 回應區域 ========== */ .ai-response-section { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border); } .ai-label { font-size: 0.8em; color: var(--text-subtle); margin-bottom: 8px; } .ai-content { background: var(--accent-soft); border-radius: 4px; padding: 12px; margin-bottom: 10px; } .ai-content h1 { font-size: 1.3em; } .ai-content h2 { font-size: 1.2em; } .ai-content h3 { font-size: 1.1em; } .ai-response-section button { font-size: 0.75em; padding: 4px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 3px; cursor: pointer; } /* ========== 卡片內容 ========== */ .card-content { line-height: 1.6; color: var(--text); } .card-content p { margin: 0 0 10px 0; } .card-content p:last-child { margin-bottom: 0; } /* ========== 評論區塊 ========== */ .comments-section { padding: 10px 0; } .comment-form-footer { margin-top: 10px; } /* ========== Reference Thread ========== */ .reference-thread-title { margin: 15px; color: var(--text-subtle); font-size: 0.9em; font-weight: normal; } @media screen and (max-width: 1000px) { .reference-thread-title { margin: 10px 4px; } } /* ========== Deck 列表激活狀態 ========== */ ul.deck-list li.active-deck { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } /* ========== Page Header & Toolbar ========== */ .page-header { margin: 10px 15px; } .page-header h1 { margin: 0; font-size: 1.3em; } .page-toolbar { margin: 10px 15px; display: flex; gap: 8px; flex-wrap: wrap; } /* ========== Deck Header Container (Flex Layout) ========== */ .deck-header-container { margin: 10px 15px; background: var(--surface); border-radius: 4px; padding: 12px 15px; } .deck-title-section { display: flex; flex-direction: column; gap: 8px; } .deck-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .deck-title-row h1 { margin: 0; font-size: 1.3em; flex: 1; } .deck-title-row h1 a { color: var(--text); text-decoration: none; } .deck-title-row h1 a:hover { text-decoration: none; opacity: 0.8; } .deck-header-actions { display: flex; align-items: center; gap: 12px; } .deck-toolbar { display: flex; gap: 4px; align-items: center; } .deck-toolbar.compact { gap: 2px; } .btn-icon { padding: 0; border-radius: var(--radius-md); text-decoration: none; font-size: 1em; line-height: 1; color: var(--text-muted); transition: background-color 0.15s ease, color 0.15s ease; background: transparent; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .deck-description { margin: 0; color: var(--text-subtle); font-size: 0.9em; line-height: 1.4; } /* Switch view group compact version */ .switch-view-group.compact { margin: 0; padding: 4px 8px; gap: 10px; } .switch-view-group.compact label { font-size: 0.85em; } .btn-primary, .btn-secondary { padding: 6px 12px; border-radius: var(--radius-md); text-decoration: none; font-size: 0.9em; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; display: inline-block; } .btn-primary { background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; } .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; } .is-long-action-submitting { cursor: progress; opacity: 0.75; } /* Column filter */ .column-filter a.active { background: var(--accent-soft); border-color: var(--accent-soft-dark); } /* Calendar link */ .calendar-link { margin: 10px 15px; } /* Pagination */ .pagination-top, .pagination-bottom { margin: 10px 15px; } /* ========== 滾動條樣式 ========== */ #desktop-container aside::-webkit-scrollbar, #desktop-container main::-webkit-scrollbar { width: 6px; } #desktop-container aside::-webkit-scrollbar-track, #desktop-container main::-webkit-scrollbar-track { background: transparent; } #desktop-container aside::-webkit-scrollbar-thumb, #desktop-container main::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } #desktop-container aside::-webkit-scrollbar-thumb:hover, #desktop-container main::-webkit-scrollbar-thumb:hover { background: #aaa; } /* ========== 空狀態 ========== */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-subtle); } .empty-state-icon { font-size: 3em; margin-bottom: 15px; } /* ========== 卡片預覽圖片 ========== */ .card-preview img, .card-bubble img { max-width: 100%; border-radius: 4px; margin: 10px 0; } /* ========== 代碼塊樣式 ========== */ .card-content pre, .ai-content pre, .comment-content pre { background: #f8f8f8; border: 1px solid var(--border); border-radius: 4px; padding: 12px; overflow-x: auto; font-size: 0.9em; } .card-content code, .ai-content code, .comment-content code { background: #f0f0f0; padding: 2px 5px; border-radius: 3px; font-size: 0.9em; } /* ========== 引用樣式 ========== */ .card-content blockquote, .ai-content blockquote, .comment-content blockquote { border-left: 3px solid var(--accent-soft); margin: 10px 0; padding-left: 12px; color: #666; } /* ========== 列表樣式 ========== */ .card-content ul, .card-content ol, .comment-content ul, .comment-content ol { margin: 10px 0; padding-left: 25px; } .card-content li, .comment-content li { margin: 5px 0; } /* ========== Dashboard Settings ========== */ .dashboard-settings-page { margin: 12px 15px; display: grid; gap: 14px; } .dashboard-settings-hero { background: linear-gradient(160deg, #f2f8ff 0%, #ecf4ff 52%, #f6fbff 100%); border: 1px solid #d7e6f8; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .dashboard-settings-title-group h1 { margin: 0; font-size: 1.35em; } .dashboard-settings-title-group p { margin: 6px 0 0; color: #5f6d83; font-size: 0.95em; } .dashboard-space-chip { min-width: 170px; background: rgba(255, 255, 255, 0.82); border: 1px solid #d7e6f8; border-radius: 8px; padding: 9px 10px; display: grid; gap: 2px; } .dashboard-space-chip-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; color: #70839c; } .dashboard-space-chip strong { color: #2f435f; line-height: 1.3; } .dashboard-kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .dashboard-kpi-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; gap: 4px; } .dashboard-kpi-card.is-alert { border-color: #f3a8a8; background: linear-gradient(180deg, #fff8f8 0%, #fff 100%); } .dashboard-kpi-label { color: #8190a8; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; } .dashboard-kpi-value { color: #25344d; font-size: 1.3em; line-height: 1.2; } .dashboard-kpi-note { color: #8695ab; font-size: 0.8em; } .dashboard-settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dashboard-panel { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: grid; gap: 12px; } .dashboard-panel h2 { margin: 0; font-size: 1.03em; color: #31415a; } .dashboard-panel-copy { margin: 0; color: #68788f; font-size: 0.92em; line-height: 1.5; } .dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .dashboard-feed-panel { border-color: #d6e2f6; background: linear-gradient(180deg, #f9fbff 0%, #fff 100%); } .dashboard-status-row { display: flex; flex-wrap: wrap; gap: 8px; } .dashboard-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.82em; border: 1px solid #d8e0ed; background: #f3f6fa; color: #485a77; } .dashboard-status-pill.is-good { background: #ecfdf3; border-color: #b8ebc9; color: #166e46; } .dashboard-status-pill.is-warning { background: #fff7e8; border-color: #f2d4a1; color: #9b5c00; } .dashboard-status-pill.pending { background: #fff7e8; border-color: #f1d59f; color: #925d11; } .dashboard-status-pill.completed { background: #ecfdf3; border-color: #b8ebc9; color: #166e46; } .dashboard-status-pill.rejected { background: #f3f6fa; border-color: #d7dfe9; color: #51637f; } .dashboard-metric-list { margin: 0; display: grid; gap: 8px; } .dashboard-metric-item { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px; align-items: start; } .dashboard-metric-item dt { color: #8190a8; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; } .dashboard-metric-item dd { margin: 0; color: #2f435f; font-weight: 500; } .dashboard-inline-note { color: #7a899f; font-size: 0.84em; font-weight: 400; } .dashboard-theme-form { display: grid; gap: 8px; } .dashboard-theme-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; } .dashboard-theme-legend { width: 100%; margin-bottom: 2px; color: #7a899f; font-size: 0.76em; letter-spacing: 0.04em; text-transform: uppercase; } .dashboard-theme-option { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d6deea; border-radius: 999px; background: #f7faff; color: #334962; font-size: 0.86em; line-height: 1.2; padding: 6px 10px; cursor: pointer; user-select: none; } .dashboard-theme-option input[type="radio"] { width: auto; margin: 0; accent-color: #2b7fc3; } .dashboard-theme-option:has(input[type="radio"]:checked) { background: #e7f0ff; border-color: #bdd3f2; color: #24456f; font-weight: 600; } /* 強調色色票選擇器（dashboard Appearance） */ .accent-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; } .accent-swatch { position: relative; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--swatch, var(--accent)); border: 2px solid var(--border); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .accent-swatch input[type="radio"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .accent-swatch:hover { transform: scale(1.12); } .accent-swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .accent-swatch:has(input[type="radio"]:checked) { border-color: transparent; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch, var(--accent)); } .dashboard-warning { color: #b35a00; font-size: 0.9em; } .dashboard-link-row { display: flex; flex-wrap: wrap; gap: 8px; } .dashboard-action-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #d6deea; background: #f7faff; color: #31435f !important; padding: 6px 10px; font-size: 0.88em; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .dashboard-action-link:hover { background: #edf4ff; border-color: #c3d5ed; } .dashboard-action-link.is-primary { background: #e7f0ff; border-color: #bdd3f2; color: #24456f !important; } .dashboard-action-link.is-warning { background: #fff4f4; border-color: #edbaba; color: #8e3232 !important; } .dashboard-danger-row .button_to { margin: 0; } .dashboard-danger-btn { background: #fff1f1; color: #8f2121; border: 1px solid #e9b7b7; border-radius: 8px; font-size: 0.88em; padding: 7px 12px; cursor: pointer; } .dashboard-danger-btn:hover { background: #ffe4e4; } @media (max-width: 720px) { .dashboard-settings-page { margin: 10px; gap: 10px; } .dashboard-settings-hero { padding: 12px; flex-direction: column; } .dashboard-space-chip { width: 100%; } .dashboard-settings-grid { grid-template-columns: 1fr; } .dashboard-metric-item { grid-template-columns: 1fr; gap: 2px; } } /* ========== Space Switcher ========== */ .space-switch-page { margin: 14px 15px; display: grid; gap: 12px; } .space-switch-header { border: 1px solid #d9e3f2; border-radius: 12px; background: #f8fbff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .space-switch-header h1 { margin: 0; color: #263e5b; font-size: 1.3em; } .space-switch-header p { margin: 6px 0 0; color: #60758f; font-size: 0.9em; } .space-switch-manage-link { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 9px; border: 1px solid #c8d8ec; background: #edf4ff; color: #2a476c !important; font-size: 0.88em; font-weight: 500; text-decoration: none; padding: 7px 11px; } .space-switch-manage-link:hover { background: #e4efff; border-color: #b8cde7; } .space-switch-list { display: grid; gap: 10px; } .space-switch-item { border: 1px solid #dbe5f3; border-radius: 10px; background: #fff; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .space-switch-item.is-current { border-color: #bcd2ef; background: #f5f9ff; } .space-switch-item-main { min-width: 0; display: grid; gap: 4px; } .space-switch-item-main h2 { margin: 0; color: #273f5d; font-size: 1em; } .space-switch-item-main p { margin: 0; color: #657a93; font-size: 0.86em; line-height: 1.35; } .space-switch-current-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 999px; border: 1px solid #bdd3f2; background: #e7f1ff; color: #2a476d; font-size: 0.83em; font-weight: 600; padding: 0 10px; white-space: nowrap; } .space-switch-item .button_to { margin: 0; } .space-switch-item-button { min-height: 34px; border-radius: 8px; border: 1px solid #b9cee9; background: #e8f2ff; color: #24456f; font-size: 0.86em; font-weight: 600; cursor: pointer; padding: 7px 12px; } .space-switch-item-button:hover { background: #dfecff; border-color: #aac3e4; } .space-switch-empty { border: 1px dashed #ccd9ec; border-radius: 10px; background: #fff; padding: 14px; display: grid; gap: 10px; color: #5f738f; } .space-switch-empty p { margin: 0; } /* ========== Spaces Hub ========== */ .spaces-hub-page { margin: 14px 15px; display: grid; gap: 12px; } .spaces-hub-hero { border: 1px solid #d6e4f5; border-radius: 12px; background: linear-gradient(148deg, #f1f7ff 0%, #edf5ff 50%, #f9fcff 100%); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .spaces-hub-title-group h1 { margin: 0; color: #273e5a; font-size: 1.35em; } .spaces-hub-title-group p { margin: 6px 0 0; color: #667a96; font-size: 0.92em; line-height: 1.45; } .spaces-hub-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .spaces-hub-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #c9d9ee; border-radius: 9px; background: #f4f9ff; color: #2d4a6d !important; font-size: 0.9em; font-weight: 500; text-decoration: none; padding: 8px 12px; transition: background 0.2s, border-color 0.2s; } .spaces-hub-action:hover { background: #e9f2ff; border-color: #b8cce6; } .spaces-hub-action.is-primary { background: #e6f0ff; border-color: #b4caea; color: #24456f !important; } .spaces-current-panel { border: 1px solid #dbe5f3; border-radius: 10px; background: #fff; padding: 12px 14px; display: grid; gap: 8px; } .spaces-current-label { color: #7b8ea9; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; } .spaces-current-panel strong { color: #273e5a; font-size: 1.12em; line-height: 1.3; } .spaces-current-metrics { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .spaces-current-pill { border: 1px solid #d8e2ef; border-radius: 999px; background: #f5f8fc; color: #50637f; font-size: 0.82em; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; } .spaces-current-pill strong { color: #2e425f; font-size: 1em; } .spaces-index-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .spaces-empty-state { border: 1px dashed #ccd9ec; border-radius: 10px; background: #fff; padding: 16px; display: grid; gap: 10px; color: #5f738f; } .spaces-empty-state p { margin: 0; } .space-overview-card { border: 1px solid #dce6f4; border-radius: 12px; background: #fff; padding: 14px; display: grid; gap: 10px; } .space-overview-card.is-current { border-color: #bdd3f2; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); box-shadow: inset 0 0 0 1px rgba(189, 211, 242, 0.2); } .space-overview-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .space-overview-header h2 { margin: 0; font-size: 1.05em; } .space-overview-title-link { color: #2a425f !important; text-decoration: none; } .space-overview-title-link:hover { color: #1b365b !important; background: transparent; } .space-overview-badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #bad3f4; background: #eaf2ff; color: #27466f; padding: 3px 8px; font-size: 0.78em; white-space: nowrap; } .space-overview-description { margin: 0; color: #5b6f8b; font-size: 0.9em; line-height: 1.45; } .space-overview-stats { margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .space-overview-stats div { border: 1px solid #e1e8f4; border-radius: 8px; background: #f8fbff; padding: 8px; display: grid; gap: 2px; } .space-overview-stats dt { font-size: 0.75em; color: #7a8ca5; text-transform: uppercase; letter-spacing: 0.04em; } .space-overview-stats dd { margin: 0; font-size: 1.12em; color: #2f435f; line-height: 1.2; } .space-overview-updated-at { margin: 0; color: #7a8aa0; font-size: 0.82em; } .space-overview-actions { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .space-overview-actions .button_to { margin: 0; grid-column: 1 / -1; } .space-switch-button, .space-overview-link { width: 100%; min-height: 38px; border-radius: 8px; border: 1px solid #ccd8eb; background: #f8fbff; color: #30435f !important; font-size: 0.87em; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 8px 10px; transition: background 0.2s, border-color 0.2s; } .space-switch-button { background: #e7f1ff; border-color: #b8ceee; color: #24456f; cursor: pointer; } .space-switch-button:hover, .space-overview-link:hover { background: #ecf4ff; border-color: #bfd0e7; } .space-overview-current-pill { grid-column: 1 / -1; border-radius: 999px; border: 1px solid #c2d7f4; background: #ebf3ff; color: #2c4a73; font-size: 0.82em; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 1000px) { .space-switch-page { margin: 10px; gap: 10px; } .space-switch-header { padding: 12px; } .spaces-hub-page { margin: 10px; gap: 10px; } .spaces-hub-hero { padding: 12px; flex-direction: column; align-items: flex-start; } .spaces-index-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (max-width: 640px) { .space-switch-header { flex-direction: column; align-items: flex-start; } .space-switch-item { flex-direction: column; align-items: flex-start; } .space-switch-current-badge, .space-switch-item .button_to, .space-switch-item-button { width: 100%; } .spaces-index-grid { grid-template-columns: 1fr; } .spaces-current-metrics, .space-overview-stats, .space-overview-actions { grid-template-columns: 1fr; } .space-overview-actions .button_to { grid-column: auto; } } @media (horizontal-viewport-segments: 2) { .spaces-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.is-folded .spaces-hub-page { margin: 10px; gap: 10px; } body.is-folded .space-switch-page { margin: 10px; gap: 10px; } body.is-folded .space-switch-header, body.is-folded .space-switch-item { padding: 10px; } body.is-folded .spaces-hub-hero, body.is-folded .spaces-current-panel, body.is-folded .space-overview-card { padding: 12px; } body.is-folded .spaces-index-grid, body.is-folded .spaces-current-metrics, body.is-folded .space-overview-stats, body.is-folded .space-overview-actions { grid-template-columns: 1fr; } body.is-folded .space-overview-actions .button_to { grid-column: auto; } /* ========== Search Hub ========== */ .search-hub-page { margin: 16px; display: grid; gap: 14px; } .search-hub-hero { border: 1px solid #d4deed; background: linear-gradient(125deg, #eff5ff 0%, #f8fbff 55%, #ffffff 100%); border-radius: 12px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .search-hub-hero h1 { margin: 0; color: #203451; font-size: 1.35em; } .search-hub-hero p { margin: 6px 0 0; color: #63748d; font-size: 0.92em; line-height: 1.45; } .search-hub-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid #cbdaf0; background: #ffffff; color: #42556f; font-size: 0.83em; padding: 6px 10px; } .search-hub-pill strong { color: #1f3653; } .search-hub-panel { border: 1px solid #dce4ef; border-radius: 10px; background: #ffffff; padding: 14px; display: grid; gap: 12px; } .search-hub-search-panel { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .search-hub-form { display: grid; gap: 8px; } .search-hub-label { font-size: 0.82em; letter-spacing: 0.03em; text-transform: uppercase; color: #74839a; font-weight: 600; } .search-hub-form-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .search-hub-form-row input[type="text"] { border: 1px solid #cdd8e9; border-radius: 10px; background: #ffffff; padding: 11px 13px; font-size: 1rem; box-shadow: inset 0 1px 2px rgba(25, 34, 52, 0.04); } .search-hub-form-row input[type="text"]:focus { border-color: #8eaedb; box-shadow: 0 0 0 3px rgba(110, 148, 209, 0.2); outline: none; } .search-hub-submit { border: 1px solid #aac2e7; border-radius: 10px; background: #e8f1ff; color: #1e3d66; font-weight: 600; font-size: 0.94em; padding: 0 16px; cursor: pointer; } .search-hub-submit:hover { background: #dceaff; } .search-hub-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; } .search-hub-meta-card { border: 1px solid #e2e8f2; border-radius: 10px; background: #ffffff; padding: 12px; display: grid; gap: 8px; } .search-hub-meta-card h2 { margin: 0; color: #2a3e5b; font-size: 1em; } .search-hub-meta-card ul { margin: 0; padding-left: 18px; color: #5e6f87; font-size: 0.9em; line-height: 1.45; } .search-hub-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; } .search-hub-shortcut { border: 1px solid #d7e0ec; border-radius: 8px; background: #f7faff; color: #304561 !important; text-decoration: none; text-align: center; padding: 8px 10px; font-size: 0.88em; } .search-hub-shortcut:hover { background: #edf3fe; border-color: #c5d5ec; } .search-hub-section-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; } .search-hub-section-header h2 { margin: 0; color: #2c3e59; font-size: 1.08em; } .search-hub-section-header p { margin: 0; color: #718097; font-size: 0.85em; } .search-hub-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .search-hub-chip { border: 1px solid #cfd8e5; background: #f6f9ff; border-radius: 999px; color: #334c6e !important; font-size: 0.84em; line-height: 1.35; padding: 6px 11px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-hub-chip:hover { border-color: #b8c9e2; background: #e9f1ff; } .search-hub-actions { display: flex; gap: 8px; } .search-hub-action-btn { border: 1px solid #d5dfeb; background: #f8fbff; color: #30425d !important; border-radius: 8px; text-decoration: none; font-size: 0.85em; padding: 6px 10px; } .search-hub-action-btn:hover { background: #edf4ff; border-color: #c4d4ea; } .search-hub-saved-list { display: grid; gap: 8px; } .search-hub-saved-item { border: 1px solid #e2e8f2; border-radius: 10px; background: #fcfdff; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .search-hub-saved-content { min-width: 0; } .search-hub-saved-query { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #224066 !important; font-weight: 600; text-decoration: none; } .search-hub-saved-meta { margin: 3px 0 0; color: #7c8ca2; font-size: 0.8em; } .search-hub-saved-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .search-hub-inline-link { color: #466891 !important; font-size: 0.84em; text-decoration: none; } .search-hub-empty-state { border: 1px dashed #d5deea; border-radius: 10px; background: #f9fbff; padding: 16px; text-align: center; display: grid; gap: 10px; justify-items: center; } .search-hub-empty-state p { margin: 0; color: #74849b; } @media (max-width: 1000px) { .search-hub-page { margin: 10px; gap: 10px; } .search-hub-panel, .search-hub-hero { padding: 12px; } .search-hub-meta-grid { grid-template-columns: 1fr; } .search-hub-form-row { grid-template-columns: 1fr; } .search-hub-submit { width: 100%; min-height: 42px; } .search-hub-actions { width: 100%; } .search-hub-action-btn { flex: 1; text-align: center; } .search-hub-saved-item { align-items: flex-start; flex-direction: column; } .search-hub-saved-actions { width: 100%; justify-content: flex-end; } } /* Folded outer displays can report wider CSS widths than expected. */ body.is-folded .search-hub-page { margin: 10px; gap: 10px; } body.is-folded .search-hub-panel, body.is-folded .search-hub-hero { padding: 12px; } body.is-folded .search-hub-meta-grid, body.is-folded .search-hub-form-row { grid-template-columns: 1fr; } body.is-folded .search-hub-submit { width: 100%; min-height: 42px; } body.is-folded .search-hub-actions { width: 100%; } body.is-folded .search-hub-action-btn { flex: 1; text-align: center; } body.is-folded .search-hub-saved-item { align-items: flex-start; flex-direction: column; } body.is-folded .search-hub-saved-actions { width: 100%; justify-content: flex-end; } /* ========== Theme: Dark ========== */ :root[data-theme="dark"] { /* 語意配色 - dark */ --bg: #0f1115; --surface: #171a21; --surface-2: #13151a; --surface-3: #1f232b; --border: #272a31; --border-strong: #3a3f49; --text: #e5e7eb; --text-muted: #9ca3af; --text-subtle: #8b95a5; --accent: #00b5ef; /* atomy cyan（dark 下同色，對比佳） */ --accent-hover: #4edcff; /* 較亮 cyan（dark hover） */ --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); --accent-border: color-mix(in srgb, var(--accent) 42%, var(--surface)); --accent-contrast: #ffffff; /* dark 陰影加深 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40); color-scheme: dark; } /* 強調色變體 · dark（預設 cyan 由 dark :root 提供；amber 因偏亮改用深色文字） */ :root[data-theme="dark"][data-accent="blue"] { --accent: #3b82f6; --accent-hover: #60a5fa; } :root[data-theme="dark"][data-accent="emerald"] { --accent: #10b981; --accent-hover: #34d399; } :root[data-theme="dark"][data-accent="rose"] { --accent: #f43f5e; --accent-hover: #fb7185; } :root[data-theme="dark"][data-accent="amber"] { --accent: #f59e0b; --accent-hover: #fbbf24; --accent-contrast: #1c1917; } :root[data-theme="dark"][data-accent="violet"] { --accent: #8b5cf6; --accent-hover: #a78bfa; } :root[data-theme="dark"][data-accent="slate"] { --accent: #94a3b8; --accent-hover: #cbd5e1; } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } html[data-theme="dark"] #app-container { background: var(--surface); box-shadow: 0 0 24px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] #app-container > header { background: var(--surface-2); border-bottom-color: var(--border); } html[data-theme="dark"] #desktop-container aside { background: var(--surface-2); border-right-color: var(--border); } html[data-theme="dark"] #app-container > header a, html[data-theme="dark"] ul.deck-list li > a { color: var(--text); } html[data-theme="dark"] #app-container > header a:hover { background: var(--surface-3); } html[data-theme="dark"] .deck-list-filter-input, html[data-theme="dark"] input:not([type]), html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="week"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--surface); color: var(--text); border: 1px solid var(--border); } html[data-theme="dark"] ul.deck-list li:hover { background: var(--surface-3); } html[data-theme="dark"] ul.deck-list li:active, html[data-theme="dark"] ul.deck-list li.active { background: var(--surface-3); } html[data-theme="dark"] .ios-float-nav { background: rgba(15, 17, 21, 0.82); border-color: var(--accent-border); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .ios-float-nav-item { color: rgba(209, 223, 241, 0.92); } html[data-theme="dark"] .ios-float-nav-item:hover { color: var(--accent-hover); background: var(--accent-soft); } html[data-theme="dark"] a:link, html[data-theme="dark"] a:visited { color: var(--accent); } html[data-theme="dark"] a:hover { background: var(--accent-soft); } html[data-theme="dark"] table, html[data-theme="dark"] table th, html[data-theme="dark"] table td { border-color: var(--border); } html[data-theme="dark"] table { background: var(--surface); } html[data-theme="dark"] table th { background: var(--surface-3); color: var(--text); } html[data-theme="dark"] table tr:nth-child(even) { background: var(--surface-2); } html[data-theme="dark"] table tr:hover { background: var(--surface-3); } html[data-theme="dark"] trix-toolbar { background: var(--surface); } html[data-theme="dark"] .notice { color: #9bf0be; background: rgba(16, 40, 29, 0.6); border-color: #2e5d44; } html[data-theme="dark"] .dashboard-settings-hero { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 52%, var(--surface-3) 100%); border-color: var(--border); } html[data-theme="dark"] .dashboard-settings-title-group p, html[data-theme="dark"] .dashboard-space-chip-label, html[data-theme="dark"] .dashboard-kpi-label, html[data-theme="dark"] .dashboard-kpi-note, html[data-theme="dark"] .dashboard-metric-item dt, html[data-theme="dark"] .dashboard-inline-note { color: var(--text-muted); } html[data-theme="dark"] .dashboard-space-chip { background: var(--surface-2); border-color: var(--border); } html[data-theme="dark"] .dashboard-space-chip strong, html[data-theme="dark"] .dashboard-kpi-value, html[data-theme="dark"] .dashboard-panel h2, html[data-theme="dark"] .dashboard-metric-item dd { color: var(--text); } html[data-theme="dark"] .dashboard-kpi-card, html[data-theme="dark"] .dashboard-panel { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .dashboard-kpi-card.is-alert { border-color: #8c4e4e; background: linear-gradient(180deg, #2a1b1b 0%, var(--surface) 100%); } html[data-theme="dark"] .dashboard-panel-copy { color: var(--text-muted); } html[data-theme="dark"] .dashboard-feed-panel { border-color: var(--border); background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } html[data-theme="dark"] .dashboard-status-pill { border-color: var(--border); background: var(--surface-3); color: var(--text-muted); } html[data-theme="dark"] .dashboard-status-pill.is-good, html[data-theme="dark"] .dashboard-status-pill.completed { background: #1e3b30; border-color: #3f7c62; color: #9be2bf; } html[data-theme="dark"] .dashboard-status-pill.is-warning, html[data-theme="dark"] .dashboard-status-pill.pending { background: #3a2e1a; border-color: #7a5f31; color: #f0d397; } html[data-theme="dark"] .dashboard-status-pill.rejected { background: #202e3d; border-color: #41556a; color: #aec0d5; } html[data-theme="dark"] .dashboard-theme-legend { color: var(--text-muted); } html[data-theme="dark"] .dashboard-theme-option { background: var(--surface-2); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .dashboard-theme-option:has(input[type="radio"]:checked) { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); } html[data-theme="dark"] .dashboard-warning { color: #ffbf78; } html[data-theme="dark"] .dashboard-action-link { border-color: var(--border); background: var(--surface-2); color: var(--text) !important; } html[data-theme="dark"] .dashboard-action-link:hover { background: var(--surface-3); border-color: var(--border-strong); } html[data-theme="dark"] .dashboard-action-link.is-primary { background: var(--accent); border-color: var(--accent-hover); color: var(--accent-contrast) !important; } html[data-theme="dark"] .dashboard-action-link.is-warning { background: #3a2525; border-color: #8f4e4e; color: #ffc7c7 !important; } html[data-theme="dark"] .dashboard-danger-btn { background: #3a2323; border-color: #8f4e4e; color: #ffc3c3; } html[data-theme="dark"] .dashboard-danger-btn:hover { background: #4a2a2a; }