/* ======================================== Material You 色板（M3） ======================================== */ :root { --primary: #6750A4; --on-primary: #FFFFFF; --primary-container: #EADDFF; --on-primary-container: #21005D; --secondary: #625B71; --secondary-container: #E8DEF8; --tertiary: #7D5260; --tertiary-container: #FFD8E4; --surface: #FEF7FF; --surface-container-lowest: #FFFFFF; --surface-container-low: #F7F2FA; --surface-container: #F3EDF7; --surface-container-high: #ECE6F0; --surface-container-highest: #E6E0E9; --on-surface: #1C1B1F; --on-surface-variant: #49454F; --outline: #79747E; --outline-variant: #CAC4D0; --error: #B3261E; --on-error: #FFFFFF; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.10); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 28px; --radius-full: 999px; --transition: 200ms cubic-bezier(0.2, 0, 0, 1); } /* 暗色由 theme.js 把偏好(auto/light/dark)解析成 ， 故这里只需定义 dark 覆盖；auto 跟随系统的逻辑在 JS 里 matchMedia 处理。 */ :root[data-theme="dark"] { --primary: #D0BCFF; --on-primary: #381E72; --primary-container: #4F378B; --on-primary-container: #EADDFF; --secondary-container: #4A4458; --tertiary-container: #633B48; --surface: #141218; --surface-container-lowest: #0F0D13; --surface-container-low: #1D1B20; --surface-container: #211F26; --surface-container-high: #2B2930; --surface-container-highest: #36343B; --on-surface: #E6E1E5; --on-surface-variant: #CAC4D0; --outline: #938F99; --outline-variant: #49454F; --error: #F2B8B5; --on-error: #601410; --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 2px 4px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 4px 8px rgba(0,0,0,0.3), 0 12px 24px rgba(0,0,0,0.4); } /* ======================================== 基础 ======================================== */ * { box-sizing: border-box; } /* hidden 属性优先于任何 display 规则（修复书签面板/PDF 按钮的隐藏） */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; } .icon-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--on-surface); border-radius: var(--radius-full); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--transition); } .icon-btn:hover { background: var(--surface-container-high); } /* 统一线性图标（Phosphor 内联 SVG，fill:currentColor，尺寸由 data-icon-size / size 决定） */ .nbi { display: block; flex: none; } .ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } /* ======================================== 首页（NotebookLM 风格） ======================================== */ body.home { min-height: 100vh; background: var(--surface-container-low); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 40px; max-width: 1360px; margin: 0 auto; } .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; } .brand-logo { height: 28px; width: auto; display: block; } /* 深色模式：单色藏青字标统一反白 */ [data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); } .topbar-right { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; } .search-wrap { position: relative; width: 100%; max-width: 420px; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); line-height: 0; pointer-events: none; } #search { width: 100%; padding: 11px 18px 11px 42px; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); color: var(--on-surface); font-size: 14px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } #search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .ghost-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: transparent; color: var(--on-surface); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } .ghost-btn:hover { background: var(--surface-container-high); } /* 主题切换按钮（首页 topbar：圆形图标按钮） */ .theme-toggle { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: transparent; color: var(--on-surface); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--transition), border-color var(--transition); } .theme-toggle:hover { background: var(--surface-container-high); } /* 顶栏胶囊按钮（AI / Create） */ .pill-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: transparent; color: var(--on-surface); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--transition), border-color var(--transition), filter var(--transition); } .pill-btn:hover { background: var(--surface-container-high); } .pill-btn .pill-label { line-height: 1; } .pill-btn .pill-caret { margin-left: -2px; opacity: .65; } .pill-primary { background: var(--primary); color: var(--on-primary); border-color: transparent; } .pill-primary:hover { background: var(--primary); filter: brightness(1.06); } /* Create 下拉菜单 */ .create-wrap { position: relative; flex-shrink: 0; } .create-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; padding: 8px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 60; animation: settings-pop 140ms ease-out; transform-origin: top right; } .cm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--on-surface); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--transition); } .cm-item:hover { background: var(--surface-container-highest); } .cm-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary-container); color: var(--on-primary-container); } .cm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cm-text b { font-size: 14px; font-weight: 600; } .cm-text em { font-size: 12px; font-style: normal; color: var(--on-surface-variant); } /* 分类 Tab（All / Learn / Explore / Play） */ .home-tabs { display: flex; gap: 6px; margin: 10px 4px 20px; flex-wrap: wrap; } .tab { padding: 7px 16px; border: none; border-radius: var(--radius-full); background: transparent; color: var(--on-surface-variant); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--transition), color var(--transition); } .tab:hover { background: var(--surface-container-high); color: var(--on-surface); } .tab.active { background: var(--on-surface); color: var(--surface); } /* 拖动课程卡时：Tab 显出可放置边框；悬停的目标 Tab 高亮成「投放区」 */ body.sorting .home-tabs .tab { box-shadow: inset 0 0 0 1.5px var(--outline-variant); transition: none; } .home-tabs .tab.drop-target { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); transform: scale(1.06); } main { max-width: 1360px; margin: 0 auto; padding: 8px 40px 72px; } .section-title { font-size: 22px; font-weight: 600; color: var(--on-surface); letter-spacing: -0.01em; margin: 28px 4px 18px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } /* NotebookLM 卡片 */ .nb-card { position: relative; display: flex; flex-direction: column; min-height: 188px; padding: 20px; border-radius: 20px; background: var(--surface-container); background: color-mix(in srgb, var(--accent, var(--primary)) 14%, var(--surface-container-lowest)); border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 22%, transparent); color: var(--on-surface); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .nb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .nb-card-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; font-size: 34px; line-height: 1; margin-bottom: auto; } .nb-card-body { margin-top: 16px; } .nb-card-subject { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--accent, var(--primary)) 78%, var(--on-surface)); margin-bottom: 6px; } .nb-card-title { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nb-card-meta { font-size: 13px; color: var(--on-surface-variant); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nb-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--on-surface-variant); } .nb-progress-bar { flex: 1; height: 4px; background: color-mix(in srgb, var(--on-surface) 14%, transparent); border-radius: var(--radius-full); overflow: hidden; } .nb-progress-bar > i { display: block; height: 100%; background: var(--accent, var(--primary)); border-radius: var(--radius-full); } .empty-state { padding: 48px 0; text-align: center; color: var(--on-surface-variant); font-size: 14px; } /* 区段标题行（标题 + 创建按钮） */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 4px 18px; } .section-head .section-title { margin: 0; } .create-btn { flex-shrink: 0; padding: 9px 18px; border: none; border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container); font-size: 14px; font-weight: 600; transition: filter var(--transition), box-shadow var(--transition); } .create-btn:hover { filter: brightness(0.97); box-shadow: var(--shadow-sm); } /* 卡片上的删除按钮（仅动态课程，hover 显示） */ .nb-del { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-surface) 9%, transparent); color: var(--on-surface-variant); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; z-index: 2; transition: opacity var(--transition), background-color var(--transition), color var(--transition); } .nb-card:hover .nb-del { opacity: 1; } .nb-del:hover { background: var(--error); color: var(--on-error); } /* 有拖拽手柄时，删除键给手柄让位（手柄占最右上角） */ .nb-card:has(.nb-drag) .nb-del { right: 46px; } /* 卡片上的编辑按钮（仅站内可编辑的 Markdown 课程，hover 显示） */ .nb-edit { position: absolute; top: 10px; right: 46px; width: 28px; height: 28px; border: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-surface) 9%, transparent); color: var(--on-surface-variant); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; z-index: 2; transition: opacity var(--transition), background-color var(--transition), color var(--transition); } .nb-card:hover .nb-edit { opacity: 1; } .nb-edit:hover { background: var(--primary); color: var(--on-primary); } /* 有拖拽手柄时：手柄占最右，删除让位 46px，编辑再让 36px */ .nb-card:has(.nb-drag) .nb-edit { right: 82px; } /* 拖拽排序手柄（主网格卡片右上角） */ .nb-drag { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-surface) 9%, transparent); color: var(--on-surface-variant); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: grab; opacity: 0; z-index: 2; touch-action: none; /* 触屏：手柄上不滚动页面，交给拖拽 */ transition: opacity var(--transition), background-color var(--transition); } .nb-card:hover .nb-drag { opacity: 1; } .nb-drag:hover { background: var(--surface-container-highest); color: var(--on-surface); } .nb-drag:active { cursor: grabbing; } /* 拖拽中：被拖卡片留下的占位 + 跟随指针的浮层 */ .nb-card-placeholder { opacity: .28; filter: grayscale(.3); } .nb-card-ghost { box-shadow: var(--shadow-lg); transform: scale(1.04) rotate(1.5deg); opacity: .96; cursor: grabbing; } .nb-card-ghost .nb-drag, .nb-card-ghost .nb-del { display: none; } body.sorting { user-select: none; cursor: grabbing; } body.sorting .nb-card { transition: none; } body.sorting .nb-card:hover { transform: none; box-shadow: none; } /* 创建课程弹窗 */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; animation: fadeIn 150ms ease-out; } .modal { background: var(--surface-container-high); border-radius: var(--radius-lg); padding: 24px; width: 440px; max-width: 100%; box-shadow: var(--shadow-lg); } .modal h3 { font-size: 18px; margin-bottom: 18px; } .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 12px; font-weight: 500; color: var(--on-surface-variant); margin-bottom: 6px; } .field > span em { color: var(--error); font-style: normal; } .field input[type="text"] { width: 100%; padding: 11px 14px; border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); font-size: 14px; outline: none; transition: border-color var(--transition); } .field input[type="text"]:focus { border-color: var(--primary); } .field input[type="file"] { width: 100%; font-size: 13px; color: var(--on-surface-variant); } .field input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: var(--surface-container); color: var(--on-surface); font-size: 13px; cursor: pointer; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } /* 上传弹窗：AI 智能填充按钮 + 标签 chips + 图标点选网格 */ .ai-fill-row { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; } .ai-fill-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .ai-fill-btn:hover:not(:disabled) { background: var(--primary); color: var(--on-primary); } .ai-fill-btn:disabled { opacity: .55; cursor: progress; } .ai-fill-status { font-size: 12px; color: var(--on-surface-variant); } .ai-fill-status.err { color: var(--error); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; } .tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-container-highest); color: var(--on-surface); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; } .tag-chip button { border: 0; background: none; color: var(--on-surface-variant); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; } .tag-chip button:hover { color: var(--error); } .tag-empty { font-size: 12px; color: var(--on-surface-variant); } .icon-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 124px; overflow-y: auto; padding: 8px; border: 1px solid var(--outline, rgba(0,0,0,.12)); border-radius: 12px; background: var(--surface-container, rgba(0,0,0,.02)); } .icon-opt { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; /* 显式走彩色 emoji 字体：部分系统下 button 不会自动回退到 emoji 字体，会显示空白方块 */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; font-size: 19px; line-height: 1; border: 1.5px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; transition: background .12s, border-color .12s; } .icon-opt:hover { background: var(--surface-container-highest); } .icon-opt.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); } .modal-hint { font-size: 12px; color: var(--on-surface-variant); margin: 4px 0 18px; } .modal-hint.err { color: var(--error); } .modal .btn-row { display: flex; gap: 8px; justify-content: flex-end; } .modal .btn-row button { padding: 9px 22px; border: none; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; transition: background-color var(--transition), filter var(--transition); } .modal .btn-cancel { background: transparent; color: var(--on-surface); } .modal .btn-cancel:hover { background: var(--surface-container-highest); } .modal .btn-confirm { background: var(--primary); color: var(--on-primary); } .modal .btn-confirm:hover:not(:disabled) { filter: brightness(1.05); } .modal .btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; } /* ======================================== 阅读器（全屏 + 悬浮工具栏） ======================================== */ body.reader { height: 100vh; overflow: hidden; background: var(--surface); } #content { position: fixed; inset: 0; width: 100%; height: 100%; border: none; background: var(--surface); } /* 顶部感应区：鼠标移上去唤出工具栏 */ .reader-hotzone { position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 9; } .reader-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 7px 10px 7px 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface-container) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--outline-variant); box-shadow: var(--shadow-md); z-index: 11; transition: transform 250ms cubic-bezier(0.2,0,0,1), opacity 250ms ease; } .reader-bar.hidden { transform: translateX(-50%) translateY(-150%); opacity: 0; pointer-events: none; } .rb-btn { width: 38px; height: 38px; flex-shrink: 0; border: none; background: transparent; color: var(--on-surface); border-radius: var(--radius-full); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--transition); } .rb-btn:hover { background: var(--surface-container-highest); } .rb-back { font-size: 20px; } /* 工具栏设为「隐藏」时的最小化返回键：始终悬浮在左上角、半透明不挡正文， 保证没有浏览器返回手势/按钮的人也能退出课程。hover 变实。 */ .reader-mini-back { position: fixed; top: 12px; left: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-surface); border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface-container) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--outline-variant); box-shadow: var(--shadow-md); text-decoration: none; opacity: 0.55; transition: opacity 200ms ease, background 200ms ease; z-index: 11; } .reader-mini-back:hover { opacity: 1; background: var(--surface-container-highest); } .reader-mini-back[hidden] { display: none; } .rb-info { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; } .rb-subject { flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container); font-size: 11px; font-weight: 600; } .rb-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; } .rb-progress { flex-shrink: 0; padding: 0 8px; font-size: 12px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } /* 阅读工具栏：Aa 按钮（文字款） */ .rb-aa { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } /* 只读分享徽标（仅分享模式显示） */ .rb-ro { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container); } /* 分享模式：隐藏一切「回主页 / 写入账号」的入口，只保留纯阅读功能 */ body.share-mode .rb-back, body.share-mode #chat-toggle, body.share-mode #bookmark-btn, body.share-mode #bookmarks-toggle, body.share-mode #share-btn { display: none; } /* 分享对话框 */ .share-exp { flex-wrap: wrap; } .share-exp .seg-btn { flex: 1 0 auto; min-width: 54px; } .share-result { margin: 4px 0 14px; } .share-link-row { display: flex; gap: 8px; align-items: stretch; } .share-link-row input { flex: 1; min-width: 0; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-container-lowest); color: var(--on-surface); font-size: 12.5px; padding: 9px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .share-link-row .btn-confirm { flex: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 10px; } /* 更多菜单（工具栏右端 ⋯ 下拉） */ .more-menu { position: fixed; top: 64px; right: 16px; width: 230px; padding: 8px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 14; animation: settings-pop 140ms ease-out; transform-origin: top right; } .mm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--on-surface); font-size: 13.5px; text-align: left; cursor: pointer; transition: background-color var(--transition); } .mm-item:hover { background: var(--surface-container-highest); } .mm-item .mm-ic { width: 20px; text-align: center; font-size: 15px; flex: none; } .mm-item .mm-state { margin-left: auto; color: var(--primary); font-weight: 700; } .mm-divider { height: 1px; background: var(--outline-variant); margin: 6px 4px; } /* 阅读设置面板 */ #prefs-panel { position: fixed; top: 64px; right: 16px; width: 320px; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 13; overflow: hidden; } .prefs-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; } .pref-row { display: flex; align-items: center; gap: 12px; } .pref-label { flex: none; width: 58px; font-size: 12.5px; font-weight: 600; color: var(--on-surface-variant); } .pref-row .seg { flex: 1; } .pref-val { flex: none; width: 44px; text-align: right; font-size: 12px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } #pref-scale { flex: 1; accent-color: var(--primary); } .pref-reset { align-self: flex-start; padding: 7px 16px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: transparent; color: var(--on-surface); font-size: 12.5px; transition: background-color var(--transition); } .pref-reset:hover { background: var(--surface-container-highest); } #prefs-panel .sm-tip { margin: 0; } /* 分屏对话：正文让出右侧，对话面板贴边成柱 */ body.reader.split-chat #content { width: calc(100% - min(420px, 44vw)); } body.reader.split-chat #chat-panel { top: 0; right: 0; bottom: 0; width: min(420px, 44vw); max-width: none; max-height: none; height: 100vh; border-radius: 0; border: none; border-left: 1px solid var(--outline-variant); box-shadow: none; } /* 轻提示 toast */ #nb-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px); padding: 10px 20px; background: var(--surface-container-highest); color: var(--on-surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); font-size: 13px; opacity: 0; pointer-events: none; z-index: 300; transition: opacity 200ms ease, transform 200ms ease; } #nb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 书签面板 */ #bookmarks-panel { position: fixed; top: 64px; right: 16px; width: 320px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 12; overflow: hidden; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); } .panel-header h3 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } .panel-header h3 .chat-status { font-weight: 400; } .ph-actions { display: flex; align-items: center; gap: 2px; } /* AI 模型切换条：独占一行，custom 样式的下拉 + 圆角胶囊 */ .chat-model-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); } .chat-model-bar .cmb-icon { display: inline-flex; color: var(--on-surface-variant); } .chat-model-bar .cmb-label { font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; } .cmb-select { position: relative; flex: 1; min-width: 0; } .cmb-select select { width: 100%; appearance: none; -webkit-appearance: none; font-size: 12.5px; line-height: 1.4; padding: 6px 30px 6px 12px; background: var(--surface-container-high); color: var(--on-surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); cursor: pointer; text-overflow: ellipsis; transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); } .cmb-select select:hover { background: var(--surface-container-highest); } .cmb-select select:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .cmb-select .cmb-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 0; color: var(--on-surface-variant); } #bookmarks-list { list-style: none; padding: 8px; margin: 0; overflow-y: auto; flex: 1; } #bookmarks-list li { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); transition: background-color var(--transition); } #bookmarks-list li:hover { background: var(--surface-container-high); } #bookmarks-list .bm-jump { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 12px; border: none; background: transparent; color: var(--on-surface); font-size: 13px; border-radius: var(--radius-sm); } #bookmarks-list .bm-jump .bm-pct { font-size: 11px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } #bookmarks-list .bm-del { width: 32px; height: 32px; margin-right: 4px; border: none; background: transparent; color: var(--on-surface-variant); border-radius: var(--radius-full); font-size: 14px; opacity: 0; transition: opacity var(--transition), background-color var(--transition); } #bookmarks-list li:hover .bm-del { opacity: 1; } #bookmarks-list .bm-del:hover { background: var(--surface-container-highest); color: var(--error); } .empty-hint { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--on-surface-variant); margin: 0; } /* ======================================== 目录 TOC 面板（左侧，镜像书签面板） ======================================== */ #toc-panel { position: fixed; top: 64px; left: 16px; width: 300px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 12; overflow: hidden; } #toc-list { list-style: none; padding: 8px; margin: 0; overflow-y: auto; flex: 1; } #toc-list li { margin: 0; } .toc-item { display: block; width: 100%; text-align: left; padding: 7px 12px; border: none; background: transparent; color: var(--on-surface); font-size: 13px; line-height: 1.4; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--transition); } .toc-item:hover { background: var(--surface-container-high); } .toc-item:disabled { opacity: .5; cursor: default; } .toc-item.lvl-0 { font-weight: 600; } .toc-item.lvl-1 { padding-left: 26px; } .toc-item.lvl-2 { padding-left: 40px; color: var(--on-surface-variant); } /* ======================================== AI 对话面板（RAG） ======================================== */ #chat-panel { position: fixed; top: 64px; right: 16px; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 13; overflow: hidden; } .chat-status { font-size: 11px; font-weight: 400; color: var(--on-surface-variant); margin-left: 6px; } .chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; } .chat-hint { font-size: 12.5px; line-height: 1.6; color: var(--on-surface-variant); margin: 4px 2px; } .chat-msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; } .chat-msg.user { align-items: flex-end; } .chat-msg.ai { align-items: flex-start; } .chat-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; max-width: 90%; } .chat-msg.user .chat-bubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; } .chat-msg.ai .chat-bubble { background: var(--surface-container-high); color: var(--on-surface); border-bottom-left-radius: 4px; } .chat-msg.thinking .chat-bubble { color: var(--on-surface-variant); animation: chat-pulse 1.1s ease-in-out infinite; } @keyframes chat-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } } /* AI 回答的 Markdown 渲染 */ .chat-bubble.md { white-space: normal; } .chat-bubble.md > :first-child { margin-top: 0; } .chat-bubble.md > :last-child { margin-bottom: 0; } .chat-bubble.md p { margin: 0 0 8px; } .chat-bubble.md ul, .chat-bubble.md ol { margin: 4px 0 8px; padding-left: 20px; } .chat-bubble.md li { margin: 2px 0; } .chat-bubble.md h4 { font-size: 15px; font-weight: 600; margin: 10px 0 6px; } .chat-bubble.md h5 { font-size: 13.5px; font-weight: 600; margin: 8px 0 4px; } .chat-bubble.md code { background: color-mix(in srgb, var(--on-surface) 12%, transparent); padding: 1px 5px; border-radius: 5px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .chat-bubble.md pre { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; } .chat-bubble.md pre code { background: none; padding: 0; } .chat-bubble.md a { color: var(--primary); text-decoration: underline; } .chat-bubble.md blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--outline-variant); color: var(--on-surface-variant); } .chat-bubble.md hr { border: none; border-top: 1px solid var(--outline-variant); margin: 8px 0; } .chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 2px; } .cs-label { font-size: 11px; color: var(--on-surface-variant); } .cs-chip { border: 1px solid var(--outline-variant); background: var(--surface-container-high); color: var(--primary); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--transition); } .cs-chip:hover { background: var(--surface-container-highest); } .chat-quote { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 7px 10px; background: var(--surface-container-high); border-left: 3px solid var(--primary); border-radius: 8px; font-size: 12px; } .cq-label { color: var(--primary); font-weight: 600; flex: none; } .cq-text { color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .cq-clear { border: none; background: none; color: var(--on-surface-variant); cursor: pointer; font-size: 13px; flex: none; } .cq-clear:hover { color: var(--error); } .chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--outline-variant); } #chat-input, #omni-input { flex: 1; resize: none; border: 1px solid var(--outline-variant); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 13.5px; line-height: 1.5; background: var(--surface-container-lowest, var(--surface-container)); color: var(--on-surface); max-height: 120px; } #chat-input:focus, #omni-input:focus { outline: none; border-color: var(--primary); } #chat-send, #omni-send { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: filter var(--transition); } #chat-send:hover, #omni-send:hover { filter: brightness(1.06); } @media (max-width: 640px) { #chat-panel { right: 8px; left: 8px; width: auto; } } /* 首页「全能问答」面板：复用课程内对话的 .chat-* 内部样式，仅定位不同 */ #omni-panel { position: fixed; top: 84px; right: 24px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 104px); display: flex; flex-direction: column; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 90; overflow: hidden; animation: settings-pop 160ms ease-out; transform-origin: top right; } .sh-actions { display: flex; align-items: center; gap: 10px; } .omni-btn { padding: 9px 16px; } @media (max-width: 640px) { #omni-panel { right: 8px; left: 8px; width: auto; top: 72px; } } /* 划词浮条里的「问 AI」按钮 */ .nb-hl-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: rgba(255,255,255,.25); } .nb-hl-ask { border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } /* ======================================== 高亮：选区浮条 + 批注弹层（建在父页） ======================================== */ .nb-hl-toolbar { position: fixed; z-index: 50; transform: translate(-50%, -100%); display: none; gap: 6px; padding: 6px 8px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); } .nb-hl-toolbar[data-below="1"] { transform: translate(-50%, 0); } .nb-hl-toolbar.show { display: flex; } .nb-hl-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; transition: transform var(--transition); } .nb-hl-swatch:hover { transform: scale(1.14); } .nb-hl-popover { position: fixed; z-index: 50; width: 240px; transform: translateY(-100%); display: none; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .nb-hl-popover[data-below="1"] { transform: translateY(0); } .nb-hl-popover.show { display: flex; } .nb-hl-colors { display: flex; gap: 8px; } .nb-hl-note { width: 100%; resize: vertical; border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); font: inherit; font-size: 13px; padding: 8px; outline: none; } .nb-hl-note:focus { border-color: var(--primary); } .nb-hl-actions { display: flex; justify-content: space-between; } .nb-hl-actions button { padding: 6px 14px; border: none; border-radius: var(--radius-full); font-size: 13px; cursor: pointer; } .nb-hl-del { background: transparent; color: var(--error); } .nb-hl-del:hover { background: color-mix(in srgb, var(--error) 16%, transparent); } .nb-hl-done { background: var(--primary); color: var(--on-primary); } /* 加书签弹框 */ .bm-prompt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; animation: fadeIn 150ms ease-out; } .bm-prompt { background: var(--surface-container-high); border-radius: var(--radius-lg); padding: 24px; width: 360px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); } .bm-prompt h3 { font-size: 16px; margin-bottom: 16px; } .bm-prompt input { width: 100%; padding: 12px 16px; border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); font-size: 14px; outline: none; margin-bottom: 16px; } .bm-prompt input:focus { border-color: var(--primary); } .bm-prompt .btn-row { display: flex; gap: 8px; justify-content: flex-end; } .bm-prompt button { padding: 8px 20px; border: none; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; transition: background-color var(--transition); } .bm-prompt .btn-cancel { background: transparent; color: var(--on-surface); } .bm-prompt .btn-cancel:hover { background: var(--surface-container-highest); } .bm-prompt .btn-confirm { background: var(--primary); color: var(--on-primary); } .bm-prompt .btn-confirm:hover { filter: brightness(0.95); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ======================================== 深入搜索弹窗（首页搜索框按 Enter 打开） ======================================== */ .search-modal { width: 640px; max-width: calc(100vw - 32px); max-height: min(640px, calc(100vh - 64px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; } .srch-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--outline-variant); } .srch-head h3 { font-size: 16px; margin: 0; flex: none; } .srch-q { flex: 1; min-width: 0; font-size: 13px; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srch-body { overflow-y: auto; padding: 12px 14px 18px; } .srch-section-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--on-surface-variant); margin: 12px 6px 8px; } .srch-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--on-surface); cursor: pointer; transition: background-color var(--transition); } .srch-item:hover { background: var(--surface-container-high); } .srch-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .srch-item-course { font-size: 13.5px; font-weight: 600; } .srch-item-heading { font-size: 11px; padding: 2px 9px; border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srch-item-count { margin-left: auto; font-size: 11px; color: var(--on-surface-variant); flex: none; } .srch-item-text { font-size: 12.5px; line-height: 1.6; color: var(--on-surface-variant); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .srch-item-text mark { background: color-mix(in srgb, var(--primary) 26%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } .srch-empty, .srch-loading { padding: 36px 16px; text-align: center; font-size: 13px; color: var(--on-surface-variant); } .srch-foot-tip { margin: 14px 6px 0; font-size: 11.5px; line-height: 1.6; color: var(--on-surface-variant); } /* ======================================== 登录页 ======================================== */ body.login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(at 20% 30%, var(--primary-container) 0%, transparent 50%), radial-gradient(at 80% 70%, var(--tertiary-container) 0%, transparent 50%), var(--surface); padding: 24px; } .login-card { background: var(--surface-container); border-radius: var(--radius-xl); padding: 48px 40px; width: 100%; max-width: 400px; box-shadow: var(--shadow-md); } .login-logo { width: 210px; max-width: 72%; height: auto; display: block; margin: 4px auto 22px; } [data-theme="dark"] .login-logo { filter: brightness(0) invert(1); } body.login .eyebrow { display: block; text-align: center; margin: 0 0 26px; } .login-card label { display: block; font-size: 12px; font-weight: 500; color: var(--on-surface-variant); margin-bottom: 8px; } #password { width: 100%; padding: 16px 20px; border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); font-size: 16px; outline: none; margin-bottom: 24px; transition: border-color var(--transition); } #password:focus { border-color: var(--primary); border-width: 2px; padding: 15px 19px; } #submit-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 500; transition: filter var(--transition); } #submit-btn:hover:not(:disabled) { filter: brightness(1.05); } #submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .error-msg { margin-top: 16px; padding: 12px 16px; background: var(--error); color: var(--on-error); border-radius: var(--radius-sm); font-size: 13px; text-align: center; } /* ======================================== 响应式 ======================================== */ @media (max-width: 640px) { .topbar { padding: 16px 20px; flex-wrap: wrap; gap: 14px; } .topbar-right { width: 100%; } .search-wrap { max-width: none; flex: 1; } /* 窄屏胶囊收成纯图标，省横向空间 */ .pill-btn .pill-label, .pill-btn .pill-caret { display: none; } .pill-btn { padding: 9px 11px; } .create-menu { width: min(300px, calc(100vw - 40px)); } main { padding: 8px 20px 56px; } .card-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .nb-card { min-height: 160px; padding: 16px; } .rb-title { max-width: 44vw; } #bookmarks-panel { right: 8px; left: 8px; width: auto; } #toc-panel { left: 8px; right: 8px; width: auto; } #prefs-panel { right: 8px; left: 8px; width: auto; } /* 窄屏分屏没有意义，退回浮层布局 */ body.reader.split-chat #content { width: 100%; } body.reader.split-chat #chat-panel { top: 64px; right: 8px; left: 8px; bottom: auto; width: auto; height: auto; max-height: calc(100vh - 80px); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } } @media (max-width: 400px) { .card-grid { grid-template-columns: 1fr; } } /* ======================================== 设置下拉（⚙️ 外观 / 关于 / 退出） ======================================== */ .settings-wrap { position: relative; flex-shrink: 0; } .settings-btn { width: 40px; height: 40px; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: transparent; color: var(--on-surface); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), transform var(--transition); } .settings-btn:hover { background: var(--surface-container-high); } .settings-btn[aria-expanded="true"] { background: var(--surface-container-high); transform: rotate(45deg); } .settings-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 248px; padding: 10px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 60; animation: settings-pop 140ms ease-out; transform-origin: top right; } @keyframes settings-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .sm-section { padding: 6px 6px 10px; } .sm-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 8px; } .seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-container-lowest); border-radius: var(--radius-full); } .seg-btn { flex: 1; padding: 7px 4px; border: none; border-radius: var(--radius-full); background: transparent; color: var(--on-surface-variant); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--transition), color var(--transition); } .seg-btn:hover { color: var(--on-surface); } .seg-btn.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.2)); } [data-theme="dark"] .seg-btn.active { color: #1c1b1f; } .sm-tip { margin: 8px 2px 0; font-size: 11px; line-height: 1.5; color: var(--on-surface-variant); } .sm-divider { height: 1px; background: var(--outline-variant); margin: 6px 4px; } .sm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--on-surface); font-size: 14px; text-align: left; cursor: pointer; transition: background-color var(--transition); } .sm-item:hover { background: var(--surface-container-highest); } .sm-item .sm-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; } .sm-danger { color: var(--error); } .sm-danger:hover { background: color-mix(in srgb, var(--error) 12%, transparent); } /* ======================================== 关于 / 学习画像弹窗（炫酷版） ======================================== */ .about-card { position: relative; width: 460px; max-width: 100%; max-height: calc(100vh - 40px); overflow: hidden auto; background: var(--surface-container-high); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: settings-pop 200ms cubic-bezier(.2,.8,.2,1); } .about-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: rgba(255,255,255,.18); color: #fff; cursor: pointer; z-index: 2; backdrop-filter: blur(4px); transition: background-color var(--transition); } .about-close:hover { background: rgba(255,255,255,.32); } .about-hero { position: relative; padding: 36px 28px 28px; text-align: center; color: #fff; overflow: hidden; background: linear-gradient(140deg, #6750A4 0%, #8E5BC8 52%, #5A7FE0 100%); } /* 柔和单色高光，取代原先的彩色极光，与全站简洁观感统一 */ .about-aurora { position: absolute; inset: 0; background: radial-gradient(60% 90% at 25% 0%, rgba(255,255,255,.22), transparent 65%), radial-gradient(55% 80% at 90% 110%, rgba(255,255,255,.14), transparent 70%); pointer-events: none; } .about-hero-inner { position: relative; z-index: 1; } .about-badge { width: 56px; height: 56px; border-radius: var(--radius-full); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .about-title { font-size: 22px; font-weight: 700; margin: 14px 0 6px; } .about-sub { font-size: 13.5px; opacity: .92; line-height: 1.5; max-width: 320px; margin: 0 auto; } .about-body { padding: 22px 24px 6px; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; } .about-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; background: var(--surface-container-lowest); border-radius: var(--radius-md, 12px); border: 1px solid var(--outline-variant); } .about-stat .as-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: 2px; } .about-stat .as-n { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--primary); font-variant-numeric: tabular-nums; } .about-stat .as-label { font-size: 11px; color: var(--on-surface-variant); } .about-block { margin-bottom: 18px; } .about-block-label { display: block; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 10px; } .about-chips { display: flex; flex-wrap: wrap; gap: 8px; } .about-chip { padding: 6px 13px; font-size: 12.5px; font-weight: 500; border-radius: var(--radius-full); color: var(--on-surface); background: color-mix(in srgb, var(--primary) 14%, var(--surface-container-lowest)); border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent); } .about-note { font-size: 13.5px; line-height: 1.7; color: var(--on-surface); background: var(--surface-container-lowest); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 6px; } .about-foot { display: flex; flex-direction: column; gap: 3px; padding: 16px 24px 22px; text-align: center; } .about-foot-brand { font-size: 13px; font-weight: 600; color: var(--on-surface); } .about-foot-dim { font-size: 11px; color: var(--on-surface-variant); } @media (max-width: 480px) { .about-stats { grid-template-columns: repeat(2, 1fr); } } /* ======================================== 内容审核（管理员） ======================================== */ .sm-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: var(--error); border-radius: var(--radius-full); } .review-modal-box { width: 600px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .rv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .rv-head h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 0; } .rv-tip { font-size: 12.5px; color: var(--on-surface-variant); margin-bottom: 14px; line-height: 1.6; } .rv-body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .rv-loading, .rv-empty { text-align: center; color: var(--on-surface-variant); font-size: 13.5px; padding: 28px 0; } .rv-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); } .rv-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } .rv-info { flex: 1; min-width: 0; } .rv-info h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 3px; word-break: break-word; } .rv-meta { font-size: 12px; color: var(--on-surface-variant); margin: 0 0 4px; } .rv-desc { font-size: 12.5px; color: var(--on-surface); margin: 0; line-height: 1.5; word-break: break-word; } .rv-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .rv-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface); cursor: pointer; text-decoration: none; text-align: center; } .rv-btn:hover { background: var(--surface-container-highest); } .rv-approve { background: color-mix(in srgb, var(--primary) 16%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); } .rv-approve:hover { background: var(--primary); color: #fff; } .rv-reject:hover { background: var(--error); color: #fff; border-color: var(--error); } @media (max-width: 560px) { .rv-card { flex-wrap: wrap; } .rv-actions { flex-direction: row; width: 100%; } .rv-btn { flex: 1; } } /* ======================================== 云盘 ======================================== */ .drive-back { display: inline-flex; align-items: center; gap: 8px; } .drive-back .ic { color: var(--on-surface-variant); } .drive-title { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--on-surface); } .drive-role-badge { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); color: var(--on-surface-variant); background: var(--surface-container-high); border: 1px solid var(--outline-variant); } .drive-role-badge.admin { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--primary) 28%, transparent); } .drive-main { max-width: 960px; margin: 0 auto; padding: 18px 24px 60px; } .drive-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .drive-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; } .crumb { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; color: var(--primary); font-size: 14px; font-weight: 500; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; } .crumb:hover { background: var(--surface-container-high); } .crumb.current { color: var(--on-surface); font-weight: 600; cursor: default; } .crumb-sep { color: var(--on-surface-variant); font-size: 13px; } .drive-actions { display: flex; gap: 8px; flex-shrink: 0; } .drive-dropzone { position: relative; border-radius: var(--radius-lg); min-height: 200px; } .drive-dropzone.dragover { outline: 2px dashed var(--primary); outline-offset: 4px; background: color-mix(in srgb, var(--primary) 7%, transparent); } .drive-drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--primary); pointer-events: none; } .drive-dropzone.dragover .drive-drop-hint { display: flex; } .drive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .drive-loading, .drive-empty { color: var(--on-surface-variant); font-size: 13.5px; text-align: center; padding: 40px 0; list-style: none; } .drive-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--radius-md); transition: background 120ms; } .drive-item:hover { background: var(--surface-container-low); } .di-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; } .drive-item.is-dir .di-icon { color: var(--primary); } .drive-item.is-file .di-icon { color: var(--on-surface-variant); } .di-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .di-name { font-size: 14.5px; font-weight: 500; color: var(--on-surface); text-align: left; border: none; background: transparent; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .di-name:hover { color: var(--primary); text-decoration: underline; } .di-meta { font-size: 12px; color: var(--on-surface-variant); } .di-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 120ms; } .drive-item:hover .di-actions, .drive-item:focus-within .di-actions { opacity: 1; } .di-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--on-surface-variant); border-radius: var(--radius-full); cursor: pointer; text-decoration: none; } .di-btn:hover { background: var(--surface-container-highest); color: var(--on-surface); } .di-del:hover { background: var(--error); color: #fff; } @media (hover: none) { .di-actions { opacity: 1; } } .drive-uploads { position: fixed; right: 20px; bottom: 20px; width: 320px; max-width: calc(100vw - 40px); background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 80; } .up-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; } .up-name { font-size: 12.5px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-pct { font-size: 12px; color: var(--on-surface-variant); grid-row: 1; grid-column: 2; } .up-bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-full); background: var(--surface-container-highest); overflow: hidden; } .up-bar i { display: block; height: 100%; background: var(--primary); transition: width 120ms; } .up-row.done .up-pct { color: var(--primary); } .up-row.done.pending .up-pct { color: #c77800; font-size: 11px; font-weight: 600; } .up-row.done.pending .up-bar i { background: #e0902a; } .up-row.err .up-pct, .up-row.err .up-name { color: var(--error); } @media (max-width: 520px) { .drive-main { padding: 14px 14px 60px; } .drive-bar { flex-direction: column; align-items: stretch; } .drive-tools { flex-wrap: wrap; } .drive-actions { justify-content: flex-end; } .drive-actions .pill-label { display: none; } } /* ---- 云盘工具栏：搜索 / 排序 / 容量 ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .drive-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .drive-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); color: var(--on-surface-variant); } .drive-search input { border: none; background: transparent; color: var(--on-surface); font-size: 13px; width: 130px; outline: none; } .drive-sort { display: flex; align-items: center; gap: 4px; } .drive-sort select { padding: 6px 8px; font-size: 13px; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); color: var(--on-surface); cursor: pointer; } #drive-sort-dir .nbi { transition: transform 150ms; } #drive-sort-dir.desc .nbi { transform: rotate(180deg); } .drive-foot { margin-top: 18px; font-size: 12px; color: var(--on-surface-variant); } .quota-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .quota-bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-container-highest); overflow: hidden; } .quota-bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-full); transition: width 200ms; } /* 对外可见开关 + 仅管理员可见的暗显 */ .drive-item .di-actions { opacity: 1; } .di-vis { font-size: 11px; font-weight: 600; padding: 3px 9px; flex-shrink: 0; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface-container-high); color: var(--on-surface-variant); cursor: pointer; } .di-vis.on { background: color-mix(in srgb, var(--primary) 16%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); } /* 拖拽移动：高亮目标文件夹 / 面包屑 */ .drive-item.drag-target { outline: 2px solid var(--primary); outline-offset: -2px; background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: var(--radius-md); } .crumb.drag-target { background: color-mix(in srgb, var(--primary) 22%, transparent); } .drive-item[draggable="true"] { cursor: grab; } /* ---- 分享：创建弹窗 ---- */ .share-form { display: flex; flex-direction: column; gap: 2px; } .share-form select, .share-form input { width: 100%; padding: 9px 11px; font-size: 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); } .share-result { margin: 14px 0 4px; font-size: 13px; color: var(--on-surface-variant); } .share-link-row { display: flex; gap: 8px; margin-top: 8px; } .share-link-row input { flex: 1; padding: 9px 11px; font-size: 13px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); } /* ---- 分享：管理列表标签 ---- */ .sh-tag { display: inline-block; font-size: 11.5px; padding: 2px 8px; margin-right: 4px; border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface-variant); } .sh-tag.err { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); } /* ---- 文件预览弹窗 ---- */ .preview-box { width: min(960px, 96vw); height: min(86vh, 900px); background: var(--surface-container-high); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); } .preview-name { font-size: 14.5px; font-weight: 600; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-actions { display: flex; gap: 4px; flex-shrink: 0; } .preview-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-container-lowest); overflow: auto; } .preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .preview-body video { max-width: 100%; max-height: 100%; } .preview-body iframe { width: 100%; height: 100%; border: 0; background: #fff; } #review-btn .sm-badge { margin-left: 4px; } .preview-audio { padding: 0 16px; } .preview-audio audio { width: min(520px, 86vw); } .preview-none { color: var(--on-surface-variant); font-size: 14px; line-height: 1.7; text-align: center; padding: 40px; } .preview-none a.btn-confirm { display: inline-block; text-decoration: none; margin-top: 6px; } /* ---- 公开分享访问页 ---- */ .ds-gate { display: flex; justify-content: center; padding: 60px 16px; } .ds-gate-card { width: 340px; max-width: 100%; text-align: center; background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-md); } .ds-gate-ic { color: var(--primary); display: inline-flex; margin-bottom: 10px; } .ds-gate-card h3 { font-size: 16px; margin-bottom: 16px; } .ds-gate-card input { width: 100%; padding: 10px 12px; font-size: 14px; margin-bottom: 10px; border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); } .ds-gate-card .btn-confirm { width: 100%; } .ds-gate-err { color: var(--error); font-size: 12.5px; margin-bottom: 10px; } .ds-file { margin-top: 12px; } .ds-file-head { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface-container-low); border-radius: var(--radius-md); } .ds-file-head .di-icon { color: var(--on-surface-variant); } .ds-file-name { font-size: 15px; font-weight: 600; color: var(--on-surface); } .ds-prev-wrap { margin-top: 14px; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-container-lowest); } .ds-prev { display: block; width: 100%; } img.ds-prev { max-height: 70vh; object-fit: contain; } iframe.ds-prev { height: 75vh; border: 0; background: #fff; } video.ds-prev { max-height: 70vh; background: #000; } /* ======================================== 群聊页（body.room） ======================================== */ body.room { height: 100vh; display: flex; flex-direction: column; background: var(--surface-container-low); overflow: hidden; } .room-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container); flex: none; } .room-back { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 19px; color: var(--on-surface); transition: background-color var(--transition); } .room-back:hover { background: var(--surface-container-high); } .room-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .room-title { font-size: 16px; font-weight: 600; } .room-sub { font-size: 12px; color: var(--on-surface-variant); } .room-main { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; } .room-main > #room-msgs { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .room-empty { margin: auto; color: var(--on-surface-variant); font-size: 14px; } .room-msg { display: flex; align-items: flex-start; gap: 10px; max-width: min(760px, 92%); } .room-msg.mine { align-self: flex-end; flex-direction: row-reverse; } .room-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 600; margin-top: 16px; } .room-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .room-meta { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; } .room-msg.mine .room-meta { flex-direction: row-reverse; } .room-name { font-size: 12px; font-weight: 600; } .room-time { font-size: 11px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } .room-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: var(--surface-container-highest); color: var(--on-surface); border-top-left-radius: 4px; } .room-msg.mine .room-bubble { background: var(--primary); color: var(--on-primary); border-top-left-radius: 14px; border-top-right-radius: 4px; } .room-form { flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--outline-variant); background: var(--surface-container); } #room-input { flex: 1; resize: none; border: 1px solid var(--outline-variant); border-radius: 14px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.5; background: var(--surface-container-lowest); color: var(--on-surface); max-height: 140px; outline: none; } #room-input:focus { border-color: var(--primary); } #room-send { flex: none; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 18px; cursor: pointer; transition: filter var(--transition); } #room-send:hover { filter: brightness(1.06); } @media (max-width: 640px) { .room-bar { padding: 10px 14px; } } /* ======================================== 主页动态背景（设置 → 动态背景） ======================================== */ :root[data-bg]:not([data-bg="none"]) body.home { background-color: transparent; } /* 顶栏必须高于课程区：经典模式的设置/创建菜单仍挂在顶栏内。 */ body.home > .topbar { position: relative; z-index: 70; } body.home > main { position: relative; z-index: 1; } .nb-background-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: .54; filter: saturate(1.05); transition: opacity 240ms ease; } [data-theme="dark"] .nb-background-canvas { opacity: .82; filter: saturate(1.14) brightness(.92); } :root[data-ui="premium"][data-bg]:not([data-bg="none"]) body.home::before { opacity: .22; } /* WebGL 不可用时仍保留对应的静态氛围，不退回一片空白。 */ :root.nb-bg-fallback[data-bg="aurora"] body.home { background-image: radial-gradient(70vw 38vh at 22% 18%, #7cff6766, transparent 70%), radial-gradient(62vw 42vh at 72% 28%, #5227ff70, transparent 72%); } :root.nb-bg-fallback[data-bg="balatro"] body.home { background-image: conic-gradient(from 210deg at 54% 34%, #11131c, #7d29ff55, #0b91ff66, #11131c); } .settings-menu { width: 286px; max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; } .bg-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .bg-choice { position: relative; display: grid; gap: 5px; min-width: 0; padding: 5px 5px 7px; border: 1px solid var(--outline-variant); border-radius: 11px; background: color-mix(in srgb, var(--surface-container-lowest) 76%, transparent); color: var(--on-surface-variant); font: 600 10px/1.1 inherit; cursor: pointer; transition: border-color var(--transition), color var(--transition), transform var(--transition), background-color var(--transition); } .bg-choice:hover { color: var(--on-surface); border-color: color-mix(in srgb, var(--primary) 48%, var(--outline-variant)); transform: translateY(-1px); } .bg-choice.active { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-lowest)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent); } .bg-choice.active::after { content: '✓'; position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--primary); font-size: 9px; } .bg-thumb { display: block; width: 100%; height: 31px; overflow: hidden; border-radius: 7px; background-color: #0b0c17; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } .bg-thumb-none { background: linear-gradient(135deg, var(--surface-container-lowest) 0 50%, var(--surface-container-high) 50%); } .bg-thumb-aurora { background: radial-gradient(70% 90% at 16% 34%, #7cff67cc, transparent 72%), radial-gradient(90% 90% at 76% 50%, #5227ff, #0b0c17 72%); } .bg-thumb-balatro { background: repeating-radial-gradient(ellipse at 58% 50%, #7028ff 0 9%, #078eff 12%, #121322 20%); } @media (max-width: 520px) { .settings-menu { width: min(286px, calc(100vw - 24px)); max-height: calc(100dvh - 86px); } .nb-background-canvas { opacity: .45; } [data-theme="dark"] .nb-background-canvas { opacity: .72; } }