/** * search-live-ripro.css * * RiPro-V5 主题搜索下拉适配样式 * * 重要：下拉结果容器 (.search-live-results-content) 会在页面加载后 * 被 JS 物理移到层级（脱离 jarallax transform 包含块）， * 因此 CSS 选择器使用 body 级 .ripro-detached 类。 * * @package search-live * @since 2.0.0-ripro */ /* ============================================================ 外层容器（仍在原 DOM 位置） ============================================================ */ .search-live.floating { position: relative; z-index: 100000; } /* 原位置的空壳 results 容器 — 零高度，不占空间 */ .search-live.floating .search-live-results { height: 0; overflow: visible; } /* ============================================================ body 级下拉结果层（.ripro-detached — 由 JS 移到 body 后添加） position:fixed 现在真正相对于视口定位 ============================================================ */ .search-live-results-content.ripro-detached { position: fixed; z-index: 100001; max-height: 400px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 16px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); display: none; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #d0d0d0 transparent; } .search-live-results-content.ripro-detached::-webkit-scrollbar { width: 5px; } .search-live-results-content.ripro-detached::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 5px; } /* 空内容时无边框无阴影 */ .search-live-results-content.ripro-detached:empty { border: none; box-shadow: none; } /* （已注释：半透明遮罩会导致打字时整个页面背景变暗，暂时关闭） .search-live-results-content.ripro-detached::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.12); z-index: -1; pointer-events: none; } */ /* ============================================================ 搜索结果表格：缩略图 + 标题 ============================================================ */ .search-live-results-content.ripro-detached table.search-results { width: 100%; margin: 0; border-collapse: collapse; table-layout: auto; } .search-live-results-content.ripro-detached table.search-results tr { transition: background-color 0.15s ease; } .search-live-results-content.ripro-detached table.search-results tr td { padding: 10px 16px; vertical-align: middle; text-align: left; border-bottom: 1px solid #f0f0f0; } .search-live-results-content.ripro-detached table.search-results tr:last-child td { border-bottom: none; } /* 缩略图列 */ .search-live-results-content.ripro-detached table.search-results tr td.result-image { width: 56px; min-width: 56px; padding: 10px 0 10px 12px; vertical-align: middle; } .search-live-results-content.ripro-detached .entry img.thumbnail { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; background: #f5f5f5; } /* 信息列 */ .search-live-results-content.ripro-detached table.search-results tr td.result-info { width: auto; padding: 10px 14px 10px 8px; } /* 行 hover / active */ .search-live-results-content.ripro-detached .entry:hover, .search-live-results-content.ripro-detached .entry.active { background-color: #f5f7fa; cursor: pointer; } /* 标题 */ .search-live-results-content.ripro-detached .entry a { text-decoration: none; color: #333; display: flex; align-items: center; } .search-live-results-content.ripro-detached .entry a span.title { display: block; font-size: 0.9rem; font-weight: 500; color: #191a1f; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-live-results-content.ripro-detached .entry a:hover span.title { color: var(--ri-primary, #2163e8); } /* 描述 */ .search-live-results-content.ripro-detached .entry a span.description { display: block; font-size: 0.75rem; color: #a1a1a8; margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 无结果 */ .search-live-results-content.ripro-detached .no-results { padding: 24px 16px; text-align: center; color: #a1a1a8; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; gap: 8px; } .search-live-results-content.ripro-detached .no-results::before { content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1rem; opacity: 0.4; } /* blinker */ .search-live .search-live-field.blinker { background-image: url(../images/blinker.gif) !important; background-position: right 50px center !important; background-repeat: no-repeat !important; } /* ============================================================ 保持主题 flex 布局不被破坏 ============================================================ */ .search-form .search-live { flex: 1 1 auto; min-width: 0; } .search-live .search-live-form { width: 100%; } .search-live .search-live-field { box-sizing: border-box; } .search-live.floating .search-form, .search-live.floating .search-form form { margin-bottom: 0; } /* ============================================================ 响应式 ============================================================ */ @media (max-width: 767.98px) { .search-live-results-content.ripro-detached { max-height: 320px; border-radius: 0 0 12px 12px; } .search-live-results-content.ripro-detached table.search-results tr td { padding: 8px 12px; } .search-live-results-content.ripro-detached table.search-results tr td.result-image { width: 48px; min-width: 48px; padding: 8px 0 8px 10px; } .search-live-results-content.ripro-detached .entry img.thumbnail { width: 36px; height: 36px; border-radius: 6px; } .search-live-results-content.ripro-detached table.search-results tr td.result-info { padding: 8px 10px 8px 6px; } .search-live-results-content.ripro-detached .entry a span.title { font-size: 0.85rem; } .search-live-results-content.ripro-detached .entry a span.description { font-size: 0.7rem; } } @media (max-width: 480px) { .search-live-results-content.ripro-detached { max-height: 260px; border-radius: 0 0 10px 10px; } .search-live-results-content.ripro-detached table.search-results tr td.result-image { width: 42px; min-width: 42px; padding: 7px 0 7px 8px; } .search-live-results-content.ripro-detached .entry img.thumbnail { width: 32px; height: 32px; border-radius: 5px; } .search-live-results-content.ripro-detached table.search-results tr td.result-info { padding: 7px 8px 7px 6px; } .search-live-results-content.ripro-detached .entry a span.title { font-size: 0.8rem; } }