| :root { |
| --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; |
| --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace; |
| --header-h: 48px; |
| --surface: #1a1c1e; |
| --surface-variant: #282a2d; |
| --surface-container: #1e2022; |
| --on-surface: #e2e2e6; |
| --on-surface-variant: #c4c6cf; |
| --primary: #8ab4f8; |
| --on-primary: #003258; |
| --primary-container: #004a7c; |
| --on-primary-container: #d1e4ff; |
| --secondary: #bcc7db; |
| --on-secondary: #263141; |
| --secondary-container: #3c4758; |
| --on-secondary-container: #d8e3f8; |
| --outline: #8d9099; |
| --outline-variant: #43474e; |
| --reader-bg: var(--surface-container); |
| --reader-header: var(--surface-variant); |
| --reader-text: #c9cbd0; |
| --reader-title: var(--on-surface); |
| --reader-muted: #9da0a8; |
| --reader-divider: var(--outline-variant); |
| --reader-mark: #3b5877; |
| --reader-on-mark: #d7e8fb; |
| --reader-selection: #40566d; |
| --error: #f2b8b5; |
| --on-error: #601410; |
| --radius-sm: 6px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-full: 999px; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); |
| --shadow-md: 0 2px 8px rgba(0,0,0,0.4); |
| --shadow-lg: 0 4px 16px rgba(0,0,0,0.5); |
| --motion-standard-easing: cubic-bezier(0.2, 0, 0, 1); |
| --motion-emphasized-easing: cubic-bezier(0.05, 0.7, 0.1, 1); |
| --motion-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15); |
| --motion-spring-easing: cubic-bezier(0.18, 1.32, 0.32, 1); |
| --transition: 180ms var(--motion-standard-easing); |
| --motion-standard: 220ms var(--motion-standard-easing); |
| --motion-emphasized: 480ms var(--motion-emphasized-easing); |
| --motion-exit: 150ms var(--motion-exit-easing); |
| --sidebar-w: 280px; |
| --sidebar-expanded-w: min(50vw, 720px); |
| color-scheme: dark; |
| } |
|
|
| body.light { |
| --surface: #fdfbff; |
| --surface-variant: #f0eff4; |
| --surface-container: #f5f3f7; |
| --on-surface: #1a1c1e; |
| --on-surface-variant: #44474e; |
| --primary: #1a6db5; |
| --on-primary: #ffffff; |
| --primary-container: #d1e4ff; |
| --on-primary-container: #001d36; |
| --secondary: #525f70; |
| --on-secondary: #ffffff; |
| --secondary-container: #d8e3f8; |
| --on-secondary-container: #121c29; |
| --outline: #74777f; |
| --outline-variant: #c4c6cf; |
| --reader-bg: var(--surface-container); |
| --reader-header: var(--surface-variant); |
| --reader-text: #3f4248; |
| --reader-title: var(--on-surface); |
| --reader-muted: var(--on-surface-variant); |
| --reader-divider: var(--outline-variant); |
| --reader-mark: var(--primary-container); |
| --reader-on-mark: var(--on-primary-container); |
| --reader-selection: #c7dced; |
| --error: #ba1a1a; |
| --on-error: #ffffff; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); |
| --shadow-md: 0 2px 8px rgba(0,0,0,0.12); |
| --shadow-lg: 0 4px 16px rgba(0,0,0,0.16); |
| color-scheme: light; |
| } |
|
|
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html, body { |
| height: 100%; |
| overflow: hidden; |
| } |
|
|
| body { |
| font-family: var(--font-sans); |
| font-size: 14px; |
| line-height: 1.5; |
| color: var(--on-surface); |
| background: var(--surface); |
| display: flex; |
| flex-direction: column; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| :focus-visible { |
| outline: 2px solid var(--primary); |
| outline-offset: 2px; |
| } |
|
|
| .icon-btn:focus-visible, |
| .icon-btn-sm:focus-visible, |
| .text-btn:focus-visible, |
| .text-btn-sm:focus-visible, |
| .browser-item:focus-visible, |
| .repo-list-item:focus-visible, |
| .result-action-btn:focus-visible, |
| .random-book-btn:focus-visible, |
| .random-big-btn:focus-visible, |
| .filter-checkbox-item:focus-visible, |
| .back-to-global:focus-visible, |
| .sidebar-breadcrumb .crumb-item:focus-visible, |
| input:focus-visible, |
| select:focus-visible { |
| outline: none; |
| } |
|
|
| a { |
| color: var(--primary); |
| text-decoration: none; |
| } |
|
|
| a:hover, a:focus-visible { |
| text-decoration: underline; |
| } |
|
|
| button { |
| font-family: inherit; |
| font-size: inherit; |
| cursor: pointer; |
| border: none; |
| background: none; |
| color: inherit; |
| } |
|
|
| input, select { |
| font-family: inherit; |
| font-size: inherit; |
| color: var(--on-surface); |
| background: none; |
| border: none; |
| outline: none; |
| } |
|
|
| ul, li { |
| list-style: none; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--outline-variant); |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--outline); |
| } |
|
|
| #header { |
| height: var(--header-h); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 0 8px; |
| background: var(--surface-container); |
| border-bottom: 1px solid var(--outline-variant); |
| z-index: 100; |
| flex-shrink: 0; |
| } |
|
|
| .header-left { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| flex-shrink: 0; |
| } |
|
|
| .header-logo { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| color: var(--on-surface); |
| font-weight: 600; |
| font-size: 15px; |
| padding: 4px 8px; |
| border-radius: var(--radius-sm); |
| transition: background var(--transition); |
| text-decoration: none; |
| } |
|
|
| .header-logo:hover, .header-logo:focus-visible { |
| background: var(--surface-variant); |
| text-decoration: none; |
| } |
|
|
| .header-center { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| min-width: 0; |
| } |
|
|
| .search-box { |
| position: relative; |
| display: flex; |
| align-items: center; |
| width: 100%; |
| max-width: 680px; |
| height: 36px; |
| background: var(--surface); |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-full); |
| transition: all var(--transition); |
| } |
|
|
| .search-box:focus-within { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); |
| } |
|
|
| .search-icon { |
| flex-shrink: 0; |
| margin-left: 12px; |
| color: var(--on-surface-variant); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .search-input { |
| flex: 1; |
| height: 100%; |
| padding: 0 8px; |
| font-size: 14px; |
| background: transparent; |
| min-width: 0; |
| } |
|
|
| .search-input::placeholder { |
| color: var(--on-surface-variant); |
| opacity: 0.6; |
| } |
|
|
| .search-kbd { |
| flex-shrink: 0; |
| margin-right: 8px; |
| font-size: 10px; |
| padding: 2px 6px; |
| border-radius: 4px; |
| border: 1px solid var(--outline-variant); |
| color: var(--on-surface-variant); |
| opacity: 0.7; |
| font-family: var(--font-mono); |
| } |
|
|
| .search-history-dropdown { |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| margin-top: 4px; |
| background: var(--surface); |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-md); |
| box-shadow: 0 8px 24px rgba(0,0,0,0.3); |
| z-index: 100; |
| max-height: 320px; |
| overflow-y: auto; |
| padding: 4px 0; |
| transform-origin: top center; |
| animation: menu-enter 420ms var(--motion-emphasized-easing); |
| } |
|
|
| @keyframes menu-enter { |
| 0% { opacity: 0; transform: translateY(-14px) scale(0.92, 0.82); } |
| 68% { opacity: 1; transform: translateY(2px) scale(1.008, 1.035); } |
| 100% { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| .search-history-dropdown .history-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 12px; |
| cursor: pointer; |
| font-size: 13px; |
| color: var(--on-surface); |
| transition: background 0.1s; |
| } |
|
|
| .search-history-dropdown .history-item:hover { |
| background: var(--surface-variant); |
| } |
|
|
| .search-history-dropdown .history-icon { |
| flex-shrink: 0; |
| color: var(--on-surface-variant); |
| opacity: 0.5; |
| } |
|
|
| .search-history-dropdown .history-text { |
| flex: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .search-history-dropdown .history-del { |
| flex-shrink: 0; |
| width: 22px; |
| height: 22px; |
| border-radius: 999px; |
| color: var(--on-surface-variant); |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 14px; |
| opacity: 0.65; |
| } |
|
|
| .search-history-dropdown .history-del:hover, |
| .search-history-dropdown .history-del:focus-visible { |
| background: var(--surface-variant); |
| color: var(--primary); |
| opacity: 1; |
| } |
|
|
| .search-history-dropdown .history-footer { |
| padding: 6px 12px; |
| border-top: 1px solid var(--outline-variant); |
| display: flex; |
| justify-content: center; |
| } |
|
|
| .search-history-dropdown .history-clear-all { |
| font-size: 12px; |
| color: var(--primary); |
| padding: 4px 8px; |
| border-radius: 6px; |
| } |
|
|
| .search-history-dropdown .history-clear-all:hover, |
| .search-history-dropdown .history-clear-all:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .search-history-dropdown .history-del { |
| flex-shrink: 0; |
| background: none; |
| border: none; |
| color: var(--on-surface-variant); |
| font-size: 16px; |
| cursor: pointer; |
| padding: 0 6px; |
| opacity: 0.5; |
| } |
|
|
| .search-history-dropdown .history-del:hover { |
| opacity: 1; |
| color: var(--error); |
| } |
|
|
| .search-history-dropdown .history-footer { |
| padding: 4px 12px; |
| border-top: 1px solid var(--outline-variant); |
| text-align: center; |
| } |
|
|
| .search-history-dropdown .history-clear-all { |
| background: none; |
| border: none; |
| color: var(--on-surface-variant); |
| font-size: 12px; |
| cursor: pointer; |
| opacity: 0.6; |
| } |
|
|
| .search-history-dropdown .history-clear-all:hover { |
| opacity: 1; |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| flex-shrink: 0; |
| } |
|
|
| .icon-btn { |
| width: 36px; |
| height: 36px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-full); |
| color: var(--on-surface-variant); |
| transition: all var(--transition); |
| } |
|
|
| .icon-btn:hover, .icon-btn:focus-visible { |
| background: var(--surface-variant); |
| color: var(--on-surface); |
| } |
|
|
| .icon-btn .ui-icon, |
| .search-icon .ui-icon { |
| width: 18px; |
| height: 18px; |
| } |
|
|
| .icon-btn-sm { |
| width: 28px; |
| height: 28px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-full); |
| color: var(--on-surface-variant); |
| font-size: 18px; |
| transition: all var(--transition); |
| } |
|
|
| .icon-btn-sm:hover, .icon-btn-sm:focus-visible { |
| background: var(--surface-variant); |
| color: var(--on-surface); |
| } |
|
|
| .text-btn { |
| font-size: 12px; |
| color: var(--primary); |
| padding: 4px 10px; |
| border-radius: var(--radius-sm); |
| transition: background var(--transition); |
| } |
|
|
| .text-btn:hover, .text-btn:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .text-btn-sm { |
| font-size: 11px; |
| color: var(--primary); |
| padding: 2px 6px; |
| border-radius: 4px; |
| transition: background var(--transition); |
| } |
|
|
| .text-btn-sm:hover, .text-btn-sm:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .preview-panel { |
| margin: 12px 16px 20px; |
| background: var(--reader-bg); |
| border: 1px solid var(--reader-divider); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| } |
|
|
| .preview-panel.preview-enter { |
| animation: preview-enter 540ms var(--motion-emphasized-easing); |
| } |
|
|
| @keyframes preview-enter { |
| 0% { opacity: 0; transform: translateY(30px) scale(0.92); } |
| 66% { opacity: 1; transform: translateY(-3px) scale(1.01); } |
| 100% { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| .preview-panel.preview-enter .preview-header { |
| animation: preview-content-enter 420ms 70ms var(--motion-emphasized-easing) both; |
| } |
|
|
| .preview-panel.preview-enter .preview-body { |
| animation: preview-content-enter 460ms 130ms var(--motion-emphasized-easing) both; |
| } |
|
|
| @keyframes preview-content-enter { |
| from { opacity: 0; transform: translateY(16px) scale(0.985); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| body.preview-open { |
| user-select: none; |
| -webkit-user-select: none; |
| } |
|
|
| body.preview-open #preview-panel { |
| user-select: text; |
| -webkit-user-select: text; |
| } |
|
|
| body.preview-open #preview-panel .preview-header { |
| user-select: none; |
| -webkit-user-select: none; |
| } |
|
|
| .preview-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 12px 14px; |
| color: var(--reader-title); |
| background: var(--reader-header); |
| border-bottom: 1px solid var(--reader-divider); |
| } |
|
|
| .preview-heading { |
| min-width: 0; |
| flex: 1; |
| } |
|
|
| .preview-tools { |
| display: flex; |
| flex-shrink: 0; |
| gap: 4px; |
| } |
|
|
| .preview-tools .icon-btn-sm { |
| color: var(--reader-muted); |
| } |
|
|
| .preview-tools .icon-btn-sm:hover, |
| .preview-tools .icon-btn-sm:focus-visible { |
| color: var(--reader-title); |
| background: color-mix(in srgb, var(--reader-text) 9%, transparent); |
| } |
|
|
| .preview-theme-btn { |
| display: none; |
| } |
|
|
| .theme-icon-svg { |
| width: 20px; |
| height: 20px; |
| display: block; |
| } |
|
|
| body.theme-switching .theme-icon-svg { |
| animation: theme-icon-turn 520ms var(--motion-emphasized-easing); |
| } |
|
|
| @keyframes theme-icon-turn { |
| 0% { opacity: 0.15; transform: rotate(-160deg) scale(0.5); } |
| 64% { opacity: 1; transform: rotate(14deg) scale(1.16); } |
| 100% { opacity: 1; transform: rotate(0) scale(1); } |
| } |
|
|
| .preview-title { |
| font-size: 15px; |
| font-weight: 600; |
| } |
|
|
| .preview-path { |
| font-size: 12px; |
| color: var(--reader-muted); |
| margin-top: 4px; |
| word-break: break-all; |
| } |
|
|
| .preview-body { |
| box-sizing: border-box; |
| width: 100%; |
| margin: 0; |
| padding-block: 24px 36px; |
| padding-inline: max(20px, calc((100% - 72ch) / 2)); |
| max-height: 50vh; |
| overflow: auto; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", var(--font-sans); |
| font-size: 16px; |
| line-height: 1.9; |
| letter-spacing: 0.015em; |
| color: var(--reader-text); |
| background: var(--reader-bg); |
| text-wrap: pretty; |
| scrollbar-color: var(--reader-divider) transparent; |
| } |
|
|
| .preview-body mark { |
| background: var(--reader-mark); |
| color: var(--reader-on-mark); |
| border-radius: 3px; |
| padding: 0 2px; |
| } |
|
|
| .preview-body::selection, |
| .preview-body mark::selection { |
| color: var(--reader-title); |
| background: var(--reader-selection); |
| } |
|
|
| .result-snippet { |
| grid-area: snippet; |
| margin-top: 0; |
| font-size: 12px; |
| opacity: 0.85; |
| display: -webkit-box; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| line-height: 1.5; |
| min-height: 1.5em; |
| word-break: break-word; |
| } |
|
|
| .result-snippet:empty { |
| min-height: 1.5em; |
| } |
|
|
| .result-snippet mark { |
| background: var(--primary-container); |
| color: var(--on-primary-container); |
| border-radius: 2px; |
| padding: 0 1px; |
| } |
|
|
| .app-body { |
| display: flex; |
| flex: 1; |
| min-height: 0; |
| overflow: hidden; |
| } |
|
|
| .sidebar { |
| width: var(--sidebar-w); |
| flex-shrink: 0; |
| display: flex; |
| flex-direction: column; |
| border-right: 1px solid var(--outline-variant); |
| background: var(--surface-container); |
| transition: width 150ms ease, opacity 150ms ease; |
| overflow: hidden; |
| } |
|
|
| .sidebar.collapsed { |
| width: 0 !important; |
| border-right: none; |
| } |
|
|
| .right-sidebar { |
| border-right: none; |
| border-left: 1px solid var(--outline-variant); |
| } |
|
|
| .right-sidebar.collapsed { |
| border-left: none; |
| } |
|
|
| .sidebar-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10px 12px; |
| font-size: 12px; |
| height: 36px; |
| min-height: 36px; |
| font-weight: 600; |
| color: var(--on-surface-variant); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| border-bottom: 1px solid var(--outline-variant); |
| flex-shrink: 0; |
| } |
|
|
| .sidebar-content { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| padding: 0; |
| } |
|
|
| .sidebar-loading { |
| padding: 16px; |
| text-align: center; |
| font-size: 13px; |
| color: var(--on-surface-variant); |
| opacity: 0.7; |
| } |
|
|
| .sidebar.expanded-wide { |
| width: var(--sidebar-expanded-w) !important; |
| } |
|
|
| .sidebar.collapsed.expanded-wide { |
| width: 0 !important; |
| } |
|
|
| .sidebar-breadcrumb { |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| padding: 6px 8px; |
| border-bottom: 1px solid var(--outline-variant); |
| flex-wrap: wrap; |
| font-size: 12px; |
| flex-shrink: 0; |
| min-height: 32px; |
| } |
|
|
| .sidebar-breadcrumb .crumb-item { |
| color: var(--primary); |
| cursor: pointer; |
| padding: 2px 4px; |
| border-radius: 4px; |
| white-space: nowrap; |
| transition: background var(--transition); |
| } |
|
|
| .sidebar-breadcrumb .crumb-item:hover, |
| .sidebar-breadcrumb .crumb-item:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .sidebar-breadcrumb .crumb-item.current { |
| color: var(--on-surface-variant); |
| cursor: default; |
| font-weight: 500; |
| } |
|
|
| .sidebar-breadcrumb .crumb-item.current:hover, |
| .sidebar-breadcrumb .crumb-item.current:focus-visible { |
| background: none; |
| } |
|
|
| .sidebar-breadcrumb .crumb-sep { |
| color: var(--outline); |
| flex-shrink: 0; |
| } |
|
|
| .back-to-global { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 0 12px; |
| height: 40px; |
| font-size: 13px; |
| color: var(--primary); |
| cursor: pointer; |
| border-bottom: 1px solid var(--outline-variant); |
| transition: background var(--transition); |
| flex-shrink: 0; |
| box-sizing: border-box; |
| } |
|
|
| .back-to-global:hover, .back-to-global:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .browser-list { |
| flex: 1; |
| overflow-y: auto; |
| } |
|
|
| .browser-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 7px 12px; |
| cursor: pointer; |
| transition: background var(--transition); |
| font-size: 13px; |
| color: var(--on-surface); |
| } |
|
|
| .browser-item:hover, .browser-item:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .browser-item:nth-child(even) { |
| background: transparent; |
| } |
|
|
| .left-sidebar.expanded-wide .browser-item:nth-child(even) { |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) { |
| background: rgba(0, 0, 0, 0.04); |
| } |
|
|
| .left-sidebar.expanded-wide .browser-item:nth-child(even):hover, |
| .left-sidebar.expanded-wide .browser-item:nth-child(even):focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .browser-item .browser-icon { |
| width: 18px; |
| height: 18px; |
| flex-shrink: 0; |
| color: var(--on-surface-variant); |
| } |
|
|
| .browser-item .browser-name { |
| flex: 1; |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .browser-item .browser-count { |
| font-size: 10px; |
| color: var(--on-surface-variant); |
| flex-shrink: 0; |
| } |
|
|
| .browser-item .browser-size { |
| font-size: 10px; |
| color: var(--on-surface-variant); |
| flex-shrink: 0; |
| margin-right: 4px; |
| } |
|
|
| .browser-item .browser-action { |
| font-size: 10px; |
| padding: 2px 6px; |
| border-radius: 4px; |
| color: var(--primary); |
| border: 1px solid var(--primary); |
| flex-shrink: 0; |
| transition: all var(--transition); |
| white-space: nowrap; |
| } |
|
|
| .browser-item .browser-action:hover, |
| .browser-item .browser-action:focus-visible { |
| background: var(--primary-container); |
| color: var(--on-primary-container); |
| } |
|
|
| .main-content { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| min-width: 0; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .repo-list-item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 12px; |
| cursor: pointer; |
| transition: background var(--transition); |
| } |
|
|
| .repo-list-item:hover, .repo-list-item:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .repo-list-item.active { |
| background: var(--secondary-container); |
| } |
|
|
| .repo-list-item .repo-icon { |
| width: 18px; |
| height: 18px; |
| color: var(--on-surface-variant); |
| flex-shrink: 0; |
| } |
|
|
| .repo-list-item .repo-name { |
| flex: 1; |
| font-size: 13px; |
| font-weight: 500; |
| color: var(--on-surface); |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .repo-list-item .repo-count { |
| font-size: 11px; |
| color: var(--on-surface-variant); |
| flex-shrink: 0; |
| } |
|
|
| .ui-icon { |
| position: relative; |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| flex-shrink: 0; |
| color: var(--on-surface-variant); |
| } |
|
|
| .ui-icon-folder::before { |
| content: ""; |
| position: absolute; |
| left: 1px; |
| top: 4px; |
| width: 14px; |
| height: 10px; |
| border: 1.5px solid currentColor; |
| border-radius: 3px; |
| } |
|
|
| .ui-icon-folder::after { |
| content: ""; |
| position: absolute; |
| left: 3px; |
| top: 1px; |
| width: 6px; |
| height: 4px; |
| border: 1.5px solid currentColor; |
| border-bottom: none; |
| border-radius: 3px 3px 0 0; |
| } |
|
|
| .ui-icon-file::before { |
| content: ""; |
| position: absolute; |
| left: 3px; |
| top: 1px; |
| width: 10px; |
| height: 13px; |
| border: 1.5px solid currentColor; |
| border-radius: 3px; |
| } |
|
|
| .ui-icon-file::after { |
| content: ""; |
| position: absolute; |
| left: 6px; |
| top: 5px; |
| width: 4px; |
| height: 1.5px; |
| background: currentColor; |
| box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; |
| } |
|
|
| .ui-icon-stack::before, |
| .ui-icon-stack::after { |
| content: ""; |
| position: absolute; |
| width: 11px; |
| height: 7px; |
| border: 1.5px solid currentColor; |
| border-radius: 3px; |
| } |
|
|
| .ui-icon-stack::before { |
| left: 1px; |
| top: 6px; |
| } |
|
|
| .ui-icon-stack::after { |
| left: 4px; |
| top: 2px; |
| background: var(--surface-container); |
| } |
|
|
| .ui-icon-book::before, |
| .ui-icon-book::after { |
| content: ""; |
| position: absolute; |
| top: 2px; |
| width: 6px; |
| height: 11px; |
| border: 1.5px solid currentColor; |
| border-radius: 2px; |
| } |
|
|
| .ui-icon-book::before { |
| left: 1px; |
| border-right-width: 0.75px; |
| } |
|
|
| .ui-icon-book::after { |
| right: 1px; |
| border-left-width: 0.75px; |
| } |
|
|
| .ui-icon-menu::before { |
| content: ""; |
| position: absolute; |
| left: 2px; |
| top: 4px; |
| width: 12px; |
| height: 1.8px; |
| background: currentColor; |
| border-radius: 999px; |
| box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; |
| } |
|
|
| .ui-icon-search::before { |
| content: ""; |
| position: absolute; |
| left: 2px; |
| top: 2px; |
| width: 9px; |
| height: 9px; |
| border: 1.8px solid currentColor; |
| border-radius: 50%; |
| } |
|
|
| .ui-icon-search::after { |
| content: ""; |
| position: absolute; |
| right: 2px; |
| bottom: 2px; |
| width: 6px; |
| height: 1.8px; |
| background: currentColor; |
| border-radius: 999px; |
| transform: rotate(45deg); |
| } |
|
|
| .ui-icon-sliders::before, |
| .ui-icon-sliders::after { |
| content: ""; |
| position: absolute; |
| left: 2px; |
| width: 12px; |
| height: 1.8px; |
| background: currentColor; |
| border-radius: 999px; |
| } |
|
|
| .ui-icon-sliders::before { |
| top: 5px; |
| box-shadow: 0 6px 0 currentColor; |
| } |
|
|
| .ui-icon-sliders::after { |
| top: 5px; |
| left: 8px; |
| width: 4px; |
| height: 4px; |
| border: 1.8px solid currentColor; |
| border-radius: 50%; |
| background: var(--surface-container); |
| box-shadow: -6px 6px 0 -1px var(--surface-container), -6px 6px 0 0 currentColor; |
| } |
|
|
| .ui-icon-theme::before { |
| content: ""; |
| position: absolute; |
| inset: 2px; |
| border-radius: 50%; |
| border: 1.8px solid currentColor; |
| } |
|
|
| .ui-icon-theme::after { |
| content: ""; |
| position: absolute; |
| top: 2px; |
| right: 2px; |
| width: 7px; |
| height: 11px; |
| background: var(--surface-container); |
| border-radius: 999px; |
| } |
|
|
| .ui-icon-phone::before { |
| content: ""; |
| position: absolute; |
| left: 4px; |
| top: 1px; |
| width: 8px; |
| height: 14px; |
| border: 1.8px solid currentColor; |
| border-radius: 3px; |
| } |
|
|
| .ui-icon-phone::after { |
| content: ""; |
| position: absolute; |
| left: 7px; |
| bottom: 3px; |
| width: 2px; |
| height: 2px; |
| background: currentColor; |
| border-radius: 50%; |
| } |
|
|
| .ui-icon-desktop::before { |
| content: ""; |
| position: absolute; |
| left: 1px; |
| top: 2px; |
| width: 14px; |
| height: 9px; |
| border: 1.8px solid currentColor; |
| border-radius: 3px; |
| } |
|
|
| .ui-icon-desktop::after { |
| content: ""; |
| position: absolute; |
| left: 5px; |
| bottom: 1px; |
| width: 6px; |
| height: 1.8px; |
| background: currentColor; |
| border-radius: 999px; |
| box-shadow: 0 -3px 0 -0.3px var(--surface-container); |
| } |
|
|
| .ui-icon-devices::before { |
| content: ""; |
| position: absolute; |
| left: 1px; |
| top: 3px; |
| width: 9px; |
| height: 7px; |
| border: 1.8px solid currentColor; |
| border-radius: 2px; |
| } |
|
|
| .ui-icon-devices::after { |
| content: ""; |
| position: absolute; |
| right: 1px; |
| top: 1px; |
| width: 5px; |
| height: 10px; |
| border: 1.8px solid currentColor; |
| border-radius: 2px; |
| } |
|
|
| .status-bar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 6px 16px; |
| border-bottom: 1px solid var(--outline-variant); |
| flex-shrink: 0; |
| min-height: 36px; |
| height: 36px; |
| } |
|
|
| .status-left { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| } |
|
|
| .status-right { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| body.mobile .status-bar { |
| padding: 4px 8px; |
| gap: 4px; |
| } |
|
|
| body.mobile .status-left { gap: 4px; } |
|
|
| body.mobile .status-right { gap: 4px; } |
|
|
| body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; } |
|
|
| .sort-group { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| } |
|
|
| .sort-select { |
| font-size: 12px; |
| padding: 2px 6px; |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-sm); |
| background: var(--surface); |
| color: var(--on-surface); |
| cursor: pointer; |
| } |
|
|
| .results-container { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| position: relative; |
| } |
|
|
| .results-container.is-refreshing .results-list { |
| opacity: 0.56; |
| } |
|
|
| .results-list { |
| transition: opacity var(--motion-standard), transform var(--motion-standard); |
| } |
|
|
| .snippet-loading { |
| color: var(--on-surface-variant); |
| opacity: 0.7; |
| } |
|
|
| .result-item { |
| display: grid; |
| grid-template-columns: 24px minmax(0, 1fr) auto; |
| grid-template-areas: |
| "icon info actions" |
| ". snippet snippet"; |
| gap: 10px; |
| row-gap: 6px; |
| padding: 10px 16px; |
| border-bottom: 1px solid var(--outline-variant); |
| transition: background var(--transition); |
| } |
|
|
| .result-item.result-enter { |
| animation: result-enter 320ms cubic-bezier(0.2, 0, 0, 1) both; |
| animation-delay: var(--result-enter-delay, 0ms); |
| } |
|
|
| @keyframes result-enter { |
| from { opacity: 0; transform: translateY(8px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .result-item:nth-child(even) { |
| background: var(--surface-variant); |
| } |
|
|
| .result-item:nth-child(even):hover, |
| .result-item:nth-child(even):focus-visible { |
| background: var(--secondary-container); |
| } |
|
|
| .result-item:hover, .result-item:focus-visible { |
| background: var(--surface-variant); |
| } |
|
|
| .result-file-icon { |
| grid-area: icon; |
| width: 24px; |
| height: 24px; |
| flex-shrink: 0; |
| margin-top: 2px; |
| color: var(--on-surface-variant); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .result-file-icon svg { |
| width: 22px; |
| height: 22px; |
| } |
|
|
| .result-info { |
| grid-area: info; |
| min-width: 0; |
| } |
|
|
| .result-title { |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--on-surface); |
| word-break: break-all; |
| line-height: 1.4; |
| } |
|
|
| .result-title mark { |
| background: var(--primary-container); |
| color: var(--on-primary-container); |
| border-radius: 2px; |
| padding: 0 1px; |
| } |
|
|
| .result-path { |
| font-size: 11px; |
| color: var(--on-surface-variant); |
| margin-top: 3px; |
| font-family: var(--font-mono); |
| word-break: break-all; |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| flex-wrap: wrap; |
| line-height: 1.5; |
| } |
|
|
| .result-path .path-sep { |
| color: var(--outline); |
| margin: 0 2px; |
| user-select: none; |
| } |
|
|
| .result-path .path-folder { |
| cursor: pointer; |
| color: var(--secondary); |
| transition: color var(--transition); |
| } |
|
|
| .result-path .path-folder:hover, |
| .result-path .path-folder:focus-visible { |
| color: var(--primary); |
| text-decoration: underline; |
| } |
|
|
| .result-preview { |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| margin-top: 4px; |
| line-height: 1.5; |
| max-height: 3em; |
| overflow: hidden; |
| font-family: var(--font-mono); |
| } |
|
|
| .result-preview mark { |
| background: var(--primary-container); |
| color: var(--on-primary-container); |
| border-radius: 2px; |
| padding: 0 1px; |
| } |
|
|
| .result-meta { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-top: 4px; |
| flex-wrap: wrap; |
| } |
|
|
| .result-repo-tag { |
| font-size: 10px; |
| padding: 2px 8px; |
| border-radius: 10px; |
| background: var(--primary-container); |
| color: var(--on-primary-container); |
| cursor: pointer; |
| font-weight: 500; |
| transition: opacity var(--transition); |
| } |
|
|
| .result-repo-tag:hover, .result-repo-tag:focus-visible { |
| opacity: 0.8; |
| } |
|
|
| .result-size { |
| font-size: 11px; |
| color: var(--on-surface-variant); |
| } |
|
|
| .result-actions { |
| grid-area: actions; |
| display: flex; |
| gap: 4px; |
| flex-shrink: 0; |
| flex-wrap: wrap; |
| align-items: flex-start; |
| } |
|
|
| .result-action-btn { |
| font-size: 11px; |
| padding: 3px 8px; |
| border-radius: var(--radius-sm); |
| color: var(--on-surface-variant); |
| border: 1px solid var(--outline-variant); |
| white-space: nowrap; |
| transition: all var(--transition); |
| } |
|
|
| .result-action-btn:hover, .result-action-btn:focus-visible { |
| background: var(--surface-variant); |
| border-color: var(--outline); |
| } |
|
|
| .result-action-btn.primary { |
| color: var(--primary); |
| border-color: var(--primary); |
| } |
|
|
| .result-action-btn.primary:hover, |
| .result-action-btn.primary:focus-visible { |
| background: var(--primary-container); |
| border-color: var(--primary); |
| color: var(--on-primary-container); |
| } |
|
|
| .load-info { |
| text-align: center; |
| padding: 12px; |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| border-top: 1px solid var(--outline-variant); |
| flex-shrink: 0; |
| position: relative; |
| } |
|
|
| .mobile-selected-count { |
| display: none; |
| color: var(--on-surface-variant); |
| white-space: nowrap; |
| flex-shrink: 0; |
| } |
|
|
| body.mobile .load-info { |
| text-align: center; |
| } |
|
|
| body.mobile .mobile-selected-count { |
| position: absolute; |
| left: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
|
|
| .scroll-track { |
| position: absolute; |
| right: 2px; |
| top: 40px; |
| bottom: 50px; |
| width: 8px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| pointer-events: none; |
| } |
|
|
| .scroll-track.visible { |
| opacity: 1; |
| pointer-events: auto; |
| } |
|
|
| .scroll-thumb { |
| position: absolute; |
| width: 6px; |
| left: 1px; |
| border-radius: 3px; |
| background: var(--outline); |
| cursor: pointer; |
| min-height: 30px; |
| transition: background var(--transition); |
| } |
|
|
| .scroll-thumb:hover, .scroll-thumb:focus-visible { |
| background: var(--on-surface-variant); |
| } |
|
|
| .footer { |
| height: 44px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-top: 1px solid var(--outline-variant); |
| padding: 0 16px; |
| flex-shrink: 0; |
| position: relative; |
| background: var(--surface-container); |
| } |
|
|
| .hitokoto { |
| font-size: 11px; |
| color: var(--on-surface-variant); |
| opacity: 0.55; |
| text-align: center; |
| max-width: 70%; |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| min-height: 18px; |
| } |
|
|
| .random-book-btn { |
| position: absolute; |
| right: 16px; |
| top: 50%; |
| transform: translateY(-50%); |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 11px; |
| color: var(--on-surface-variant); |
| padding: 4px 10px; |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--outline-variant); |
| transition: all var(--transition); |
| } |
|
|
| .random-book-btn:hover, .random-book-btn:focus-visible { |
| background: var(--surface-variant); |
| border-color: var(--outline); |
| color: var(--primary); |
| } |
|
|
| .filter-section { |
| border-bottom: 1px solid var(--outline-variant); |
| padding: 10px 12px; |
| } |
|
|
| #fulltext-toggle-section, |
| #search-paths-toggle-section, |
| #history-toggle-section, |
| #exact-search-section { |
| padding: 0 12px; |
| height: 40px; |
| box-sizing: border-box; |
| } |
|
|
| #fulltext-toggle-section .toggle-row, |
| #search-paths-toggle-section .toggle-row, |
| #history-toggle-section .toggle-row, |
| #exact-search-section .toggle-row { |
| height: 100%; |
| } |
|
|
| .filter-section-title { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--on-surface-variant); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| margin-bottom: 8px; |
| } |
|
|
| .filter-actions { |
| display: flex; |
| gap: 4px; |
| } |
|
|
| .filter-checkbox-list { |
| max-height: 240px; |
| overflow-y: auto; |
| } |
|
|
| .filter-checkbox-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 4px 0; |
| font-size: 13px; |
| color: var(--on-surface); |
| cursor: pointer; |
| transition: color var(--transition); |
| } |
|
|
| .filter-checkbox-item:hover, .filter-checkbox-item:focus-visible { |
| color: var(--primary); |
| } |
|
|
| .filter-checkbox-item input[type="checkbox"] { |
| accent-color: var(--primary); |
| width: 16px; |
| height: 16px; |
| cursor: pointer; |
| } |
|
|
| .filter-checkbox-item .checkbox-count { |
| font-size: 10px; |
| color: var(--on-surface-variant); |
| margin-left: auto; |
| } |
|
|
| .filter-folder-tree { |
| max-height: 280px; |
| overflow-y: auto; |
| overflow-x: auto; |
| white-space: nowrap; |
| position: relative; |
| } |
|
|
| .filter-folder-item { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| padding: 3px 0 3px calc(var(--fdepth, 0) * 16px); |
| font-size: 13px; |
| color: var(--on-surface); |
| cursor: pointer; |
| white-space: nowrap; |
| flex-wrap: nowrap; |
| width: max-content; |
| min-width: 100%; |
| transform-origin: top left; |
| will-change: transform, opacity; |
| } |
|
|
| .filter-folder-item .tree-toggle { |
| width: 16px; |
| height: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| color: var(--on-surface-variant); |
| font-size: 10px; |
| border: 0; |
| background: transparent; |
| padding: 0; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: color 0.16s ease, background 0.16s ease; |
| position: relative; |
| } |
|
|
| .filter-folder-item .tree-toggle-glyph { |
| display: block; |
| width: 7px; |
| height: 7px; |
| border-right: 1.8px solid currentColor; |
| border-bottom: 1.8px solid currentColor; |
| box-sizing: border-box; |
| transform: rotate(-45deg); |
| transform-origin: 50% 50%; |
| transition: transform 320ms var(--motion-spring-easing); |
| } |
|
|
| .filter-folder-item .tree-toggle:hover, |
| .filter-folder-item .tree-toggle:focus-visible { |
| color: var(--primary); |
| background: color-mix(in srgb, var(--primary) 12%, transparent); |
| } |
|
|
| .filter-folder-item .tree-toggle.expanded .tree-toggle-glyph { |
| transform: rotate(45deg); |
| } |
|
|
| .filter-folder-item .tree-toggle-placeholder { |
| width: 16px; |
| height: 16px; |
| display: inline-block; |
| flex-shrink: 0; |
| } |
|
|
| .filter-folder-item input[type="checkbox"] { |
| accent-color: var(--primary); |
| width: 14px; |
| height: 14px; |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
|
|
| .filter-folder-item .folder-name { |
| flex: 0 0 auto; |
| } |
|
|
| .folder-self-toggle { |
| border: 1px solid var(--outline-variant); |
| background: transparent; |
| color: var(--on-surface-variant); |
| border-radius: 999px; |
| font-size: 11px; |
| line-height: 1; |
| padding: 4px 8px; |
| cursor: pointer; |
| transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; |
| flex-shrink: 0; |
| margin-left: 4px; |
| } |
|
|
| .filter-folder-item .folder-count { |
| font-size: 10px; |
| color: var(--on-surface-variant); |
| margin-left: auto; |
| flex-shrink: 0; |
| } |
|
|
| .folder-self-toggle:hover, |
| .folder-self-toggle:focus-visible { |
| border-color: var(--primary); |
| color: var(--primary); |
| } |
|
|
| .folder-self-toggle.active { |
| background: color-mix(in srgb, var(--primary) 18%, transparent); |
| border-color: var(--primary); |
| color: var(--primary); |
| } |
|
|
| .filter-size-row { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .size-input { |
| flex: 1; |
| font-size: 12px; |
| padding: 6px 8px; |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-sm); |
| background: var(--surface); |
| color: var(--on-surface); |
| min-width: 0; |
| } |
|
|
| .size-input:focus { |
| border-color: var(--primary); |
| } |
|
|
| .size-unit { |
| font-size: 12px; |
| padding: 6px 4px; |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-sm); |
| background: var(--surface); |
| color: var(--on-surface); |
| cursor: pointer; |
| } |
|
|
| .size-sep { |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| flex-shrink: 0; |
| } |
|
|
| .empty-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 64px 16px; |
| text-align: center; |
| gap: 12px; |
| } |
|
|
| .empty-icon { |
| width: 56px; |
| height: 56px; |
| color: var(--outline-variant); |
| opacity: 0.4; |
| } |
|
|
| .empty-title { |
| font-size: 18px; |
| font-weight: 600; |
| color: var(--on-surface-variant); |
| } |
|
|
| .empty-desc { |
| font-size: 13px; |
| color: var(--on-surface-variant); |
| opacity: 0.6; |
| } |
|
|
| .random-big-btn { |
| font-size: 14px; |
| padding: 10px 24px; |
| border-radius: 24px; |
| background: var(--primary); |
| color: var(--on-primary); |
| font-weight: 500; |
| cursor: pointer; |
| transition: opacity var(--transition); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .random-big-btn:hover, .random-big-btn:focus-visible { |
| opacity: 0.85; |
| } |
|
|
| .loading-spinner { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 24px; |
| } |
|
|
| .spinner { |
| width: 28px; |
| height: 28px; |
| border: 3px solid var(--outline-variant); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 0.6s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.5); |
| z-index: 90; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity var(--transition); |
| } |
|
|
| .overlay.open { |
| opacity: 1; |
| pointer-events: auto; |
| } |
|
|
| .toast { |
| position: fixed; |
| bottom: 60px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: var(--secondary-container); |
| color: var(--on-secondary-container); |
| padding: 8px 20px; |
| border-radius: var(--radius-full); |
| font-size: 13px; |
| z-index: 200; |
| box-shadow: var(--shadow-md); |
| animation: toast-in 460ms var(--motion-emphasized-easing); |
| } |
|
|
| .toast.is-leaving { |
| animation: toast-out var(--motion-exit) forwards; |
| } |
|
|
| @keyframes toast-in { |
| 0% { opacity: 0; transform: translateX(-50%) translateY(28px) scale(0.78); } |
| 64% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.06); } |
| 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } |
| } |
|
|
| @keyframes toast-out { |
| from { opacity: 1; transform: translateX(-50%) translateY(0); } |
| to { opacity: 0; transform: translateX(-50%) translateY(6px); } |
| } |
|
|
| body.mobile .sidebar { |
| position: fixed; |
| top: var(--header-h); |
| bottom: 0; |
| z-index: 95; |
| width: 85vw !important; |
| max-width: 320px; |
| transition: transform 520ms var(--motion-emphasized-easing), opacity var(--motion-standard); |
| will-change: transform; |
| } |
|
|
| body.mobile .left-sidebar { |
| left: 0; |
| transform: translateX(-100%) scaleX(0.92); |
| transform-origin: left center; |
| border-right: 1px solid var(--outline-variant); |
| border-left: none; |
| } |
|
|
| body.mobile .right-sidebar { |
| right: 0; |
| transform: translateX(100%) scaleX(0.92); |
| transform-origin: right center; |
| border-left: 1px solid var(--outline-variant); |
| border-right: none; |
| } |
|
|
| body.mobile .sidebar.open { |
| transform: translateX(0) scaleX(1); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| body.mobile .sidebar.expanded-wide { |
| width: 85vw !important; |
| max-width: 320px; |
| } |
|
|
| body.mobile .footer { |
| display: none; |
| } |
|
|
| body.mobile .header-logo { |
| display: none; |
| } |
|
|
| body.mobile .random-book-btn { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 50; |
| transform: none; |
| background: var(--surface-container); |
| box-shadow: var(--shadow-md); |
| border-radius: var(--radius-full); |
| } |
|
|
| body.mobile .hitokoto { |
| display: none; |
| } |
|
|
| body.mobile .search-kbd { |
| display: none; |
| } |
|
|
| body.mobile .status-bar { |
| padding: 4px 8px; |
| } |
|
|
| body.mobile .result-actions { |
| flex-direction: column; |
| align-items: flex-end; |
| } |
|
|
| body.mobile .preview-panel { |
| --reader-bg: #1d1e1b; |
| --reader-header: #22231f; |
| --reader-text: #d4d0c6; |
| --reader-title: #e3dfd5; |
| --reader-muted: #9f9d95; |
| --reader-divider: #393a35; |
| --reader-mark: #59491f; |
| --reader-on-mark: #f2d98f; |
| --reader-selection: #3f5263; |
| position: fixed; |
| inset: 0; |
| z-index: 150; |
| width: 100%; |
| height: 100vh; |
| height: 100dvh; |
| margin: 0; |
| border: 0; |
| border-radius: 0; |
| flex-direction: column; |
| background: var(--reader-bg); |
| } |
|
|
| body.mobile .preview-panel.preview-enter { |
| animation-name: preview-enter-mobile; |
| } |
|
|
| @keyframes preview-enter-mobile { |
| 0% { opacity: 0.35; transform: translateX(56px) scale(0.94); } |
| 68% { opacity: 1; transform: translateX(-4px) scale(1.008); } |
| 100% { opacity: 1; transform: translateX(0) scale(1); } |
| } |
|
|
| body.light.mobile .preview-panel { |
| --reader-bg: #f7f3e8; |
| --reader-header: #f0ecdf; |
| --reader-text: #2d2b27; |
| --reader-title: #1e1d1a; |
| --reader-muted: #6b6860; |
| --reader-divider: #d7d0c2; |
| --reader-mark: #f1d58a; |
| --reader-on-mark: #3a2d0d; |
| --reader-selection: #c7dced; |
| } |
|
|
| body.mobile .preview-header { |
| flex-shrink: 0; |
| padding-top: max(12px, env(safe-area-inset-top)); |
| } |
|
|
| body.mobile .preview-tools { |
| flex-direction: column; |
| } |
|
|
| body.mobile .preview-theme-btn { |
| display: flex; |
| } |
|
|
| body.mobile .preview-body { |
| flex: 1; |
| min-height: 0; |
| max-height: none; |
| padding: 22px 18px max(36px, env(safe-area-inset-bottom)); |
| font-size: 17px; |
| line-height: 1.95; |
| letter-spacing: 0.02em; |
| } |
|
|
| body.mobile .preview-path { |
| overflow-x: auto; |
| overflow-y: hidden; |
| white-space: nowrap; |
| word-break: normal; |
| scrollbar-width: thin; |
| overscroll-behavior-x: contain; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| @media (max-width: 768px) { |
| body:not(.force-desktop) .sidebar { |
| position: fixed; |
| top: var(--header-h); |
| bottom: 0; |
| z-index: 95; |
| width: 85vw !important; |
| max-width: 320px; |
| transition: transform 520ms var(--motion-emphasized-easing), opacity var(--motion-standard); |
| will-change: transform; |
| } |
|
|
| body:not(.force-desktop) .left-sidebar { |
| left: 0; |
| transform: translateX(-100%) scaleX(0.92); |
| transform-origin: left center; |
| border-right: 1px solid var(--outline-variant); |
| border-left: none; |
| } |
|
|
| body:not(.force-desktop) .right-sidebar { |
| right: 0; |
| transform: translateX(100%) scaleX(0.92); |
| transform-origin: right center; |
| border-left: 1px solid var(--outline-variant); |
| border-right: none; |
| } |
|
|
| body:not(.force-desktop) .sidebar.open { |
| transform: translateX(0) scaleX(1); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| body:not(.force-desktop) .sidebar.expanded-wide { |
| width: 85vw !important; |
| max-width: 320px; |
| } |
|
|
| body:not(.force-desktop) .footer { |
| display: none; |
| } |
|
|
| body:not(.force-desktop) .random-book-btn { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 50; |
| transform: none; |
| background: var(--surface-container); |
| box-shadow: var(--shadow-md); |
| border-radius: var(--radius-full); |
| } |
|
|
| body:not(.force-desktop) .hitokoto { |
| display: none; |
| } |
|
|
| body:not(.force-desktop) .search-kbd { |
| display: none; |
| } |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .truncate { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .toggle-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| cursor: pointer; |
| } |
|
|
| .toggle-label { |
| font-size: 13px; |
| color: var(--on-surface); |
| } |
|
|
| .toggle-row input[type="checkbox"] { |
| display: none; |
| } |
|
|
| .toggle-switch { |
| position: relative; |
| width: 40px; |
| height: 22px; |
| background: var(--outline-variant); |
| border-radius: 11px; |
| transition: background var(--motion-standard); |
| flex-shrink: 0; |
| } |
|
|
| .toggle-switch::after { |
| content: ""; |
| position: absolute; |
| top: 2px; |
| left: 2px; |
| width: 18px; |
| height: 18px; |
| background: var(--surface); |
| border-radius: 50%; |
| transition: transform 440ms var(--motion-spring-easing); |
| } |
|
|
| .toggle-row input:checked + .toggle-switch { |
| background: var(--primary); |
| } |
|
|
| .toggle-row input:checked + .toggle-switch::after { |
| transform: translateX(18px); |
| } |
|
|
| input[type="checkbox"]:indeterminate { |
| accent-color: var(--primary); |
| } |
|
|
| body.theme-transitioning, |
| body.theme-transitioning *, |
| body.theme-transitioning *::before, |
| body.theme-transitioning *::after { |
| transition: background-color 240ms var(--motion-standard-easing), color 240ms var(--motion-standard-easing), border-color 240ms var(--motion-standard-easing), box-shadow 240ms var(--motion-standard-easing) !important; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
| .multi-toggle { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| cursor: pointer; |
| margin-left: 0; |
| padding: 2px 6px; |
| border-radius: var(--radius-sm); |
| border: 1px solid transparent; |
| } |
|
|
| .multi-toggle:hover { border-color: var(--outline-variant); } |
|
|
| .multi-toggle input { margin: 0; } |
|
|
| .multi-action-bar { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 0 12px; |
| height: 40px; |
| background: var(--surface-variant); |
| border-bottom: 1px solid var(--outline-variant); |
| box-sizing: border-box; |
| flex-wrap: nowrap; |
| } |
|
|
| .multi-action-btn { |
| padding: 4px 12px; |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-sm); |
| background: var(--surface); |
| color: var(--on-surface); |
| font-size: 12px; |
| cursor: pointer; |
| } |
|
|
| .multi-action-btn.primary { |
| background: var(--primary); |
| color: var(--on-primary); |
| border-color: var(--primary); |
| } |
|
|
| .multi-action-btn:hover { opacity: 0.85; } |
|
|
| .multi-selected-count { |
| margin-left: auto; |
| font-size: 12px; |
| color: var(--on-surface-variant); |
| white-space: nowrap; |
| flex-shrink: 0; |
| } |
|
|
| body.mobile .multi-action-btn { |
| flex-shrink: 0; |
| } |
|
|
| .result-checkbox { |
| grid-area: icon; |
| display: none; |
| flex-shrink: 0; |
| width: 18px; |
| height: 18px; |
| margin-right: 6px; |
| align-self: start; |
| accent-color: var(--primary); |
| opacity: 0.85; |
| } |
|
|
| body.multiselect .result-checkbox { display: block; } |
|
|
| body.multiselect .result-file-icon { display: none; } |
|
|
| .result-item.selected { |
| background: color-mix(in srgb, var(--primary) 15%, transparent) !important; |
| } |
|
|
