| |
| |
| |
|
|
| |
| :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; |
|
|
| --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); |
|
|
| --transition: 150ms ease; |
| |
| --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; |
|
|
| --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; |
| } |
| .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(--surface-container); |
| border: 1px solid var(--outline-variant); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| } |
|
|
| .preview-header { |
| padding: 12px 14px; |
| border-bottom: 1px solid var(--outline-variant); |
| } |
|
|
| .preview-title { |
| font-size: 15px; |
| font-weight: 600; |
| } |
|
|
| .preview-path { |
| font-size: 12px; |
| opacity: 0.7; |
| margin-top: 4px; |
| word-break: break-all; |
| } |
|
|
| .preview-body { |
| margin: 0; |
| padding: 14px; |
| max-height: 50vh; |
| overflow: auto; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-family: var(--font-sans); |
| line-height: 1.75; |
| } |
|
|
| .result-snippet { |
| margin-top: 6px; |
| font-size: 12px; |
| opacity: 0.85; |
| display: -webkit-box; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| |
| |
| |
|
|
| .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 var(--transition), opacity var(--transition); |
| 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-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; |
| } |
|
|
| .did-you-mean { |
| font-size: 12px; |
| color: var(--primary); |
| cursor: pointer; |
| } |
| .did-you-mean:hover, .did-you-mean:focus-visible { |
| text-decoration: underline; |
| } |
|
|
| |
| |
| |
|
|
| .results-container { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| } |
|
|
| |
| .result-item { |
| display: flex; |
| gap: 10px; |
| padding: 10px 16px; |
| border-bottom: 1px solid var(--outline-variant); |
| transition: background var(--transition); |
| content-visibility: auto; |
| contain-intrinsic-size: auto 60px; |
| } |
| .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 { |
| 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 { |
| flex: 1; |
| 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 { |
| 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 220ms ease; |
| } |
|
|
| .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; |
| } |
|
|
| |
| |
| |
|
|
| .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 0.2s ease; |
| } |
|
|
| @keyframes toast-in { |
| from { |
| opacity: 0; |
| transform: translateX(-50%) translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(-50%) translateY(0); |
| } |
| } |
|
|
| |
| |
| |
|
|
| body.mobile .sidebar:not(.open) { |
| width: 0; |
| border-right: none; |
| border-left: none; |
| } |
|
|
| body.mobile .left-sidebar.open { |
| position: fixed; |
| top: var(--header-h); |
| left: 0; |
| bottom: 0; |
| z-index: 95; |
| width: 85vw; |
| max-width: 320px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| body.mobile .right-sidebar.open { |
| position: fixed; |
| top: var(--header-h); |
| right: 0; |
| bottom: 0; |
| z-index: 95; |
| width: 85vw; |
| max-width: 320px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| 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; |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 768px) { |
| body:not(.force-desktop) .sidebar:not(.open) { |
| width: 0; |
| border-right: none; |
| border-left: none; |
| } |
|
|
| body:not(.force-desktop) .left-sidebar.open { |
| position: fixed; |
| top: var(--header-h); |
| left: 0; |
| bottom: 0; |
| z-index: 95; |
| width: 85vw; |
| max-width: 320px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| body:not(.force-desktop) .right-sidebar.open { |
| position: fixed; |
| top: var(--header-h); |
| right: 0; |
| bottom: 0; |
| z-index: 95; |
| width: 85vw; |
| max-width: 320px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| 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(--transition); |
| 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 var(--transition); |
| } |
|
|
| .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 *::before, |
| body.theme-transitioning *::after { |
| transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; |
| } |
|
|
| .theme-ripple { |
| position: fixed; |
| border-radius: 50%; |
| pointer-events: none; |
| z-index: 9999; |
| width: 0; |
| height: 0; |
| animation: theme-ripple-expand 0.6s ease-out forwards; |
| } |
|
|
| @keyframes theme-ripple-expand { |
| 0% { width: 0; height: 0; opacity: 0.6; } |
| 100% { width: 300vmax; height: 300vmax; opacity: 0; transform: translate(-150vmax, -150vmax); } |
| } |
|
|
| @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 { |
| display: none; |
| flex-shrink: 0; |
| width: 18px; |
| height: 18px; |
| margin-right: 6px; |
| align-self: center; |
| 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; |
| } |
|
|
