/* * EmulatorJS 前端搜索 —— 样式 * * 位置策略：搜索条是的直接子节点，不放进 #menu。 * 原因见 search.js 顶部注释（Hammer.js 的 touch-action 会沿祖先链求交， * 放进 #menu 会导致输入框内无法拖动选字，且滚轮会被菜单劫持）。 * * 左侧留白：桌面端 window.orientation 为 undefined，走 `portrait !== 0` 分支， * 菜单只占右侧 40vw，左边 60vw 是空的，正好放搜索条。 * 手机竖屏 orientation === 0 会走 else 分支让菜单占满 100vw， * 此时搜索条会浮在菜单上方 —— 用半透明深色底 + 模糊保证可读性。 */ #ejs-searchbar { position: fixed; top: 1vh; left: 7vw; /* .file-button 在 left:1vw、.full-main 在 left:4vw，各宽约 1.7vw */ width: min(42vw, 420px); z-index: 1000000; /* 高于 .file-button/.full-main 的 999999 */ display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.2; color: #fff; } #ejs-search-icon { flex: 0 0 auto; width: 16px; height: 16px; opacity: 0.75; /* 内联 SVG，避免额外的图片请求 */ background-repeat: no-repeat; background-position: center; background-size: contain; } #ejs-search-input { flex: 1 1 auto; min-width: 0; /* 允许在 flex 容器里收缩，否则会撑破 */ border: 0; outline: 0; padding: 2px 0; background: transparent; color: #fff; font: inherit; } #ejs-search-input::placeholder { color: rgba(255, 255, 255, 0.5); } #ejs-search-clear { flex: 0 0 auto; display: none; /* 有内容时才显示 */ cursor: pointer; padding: 0 2px; color: rgba(255, 255, 255, 0.7); font-size: 17px; line-height: 1; user-select: none; -webkit-user-select: none; } #ejs-search-clear:hover { color: #fff; } #ejs-searchbar.has-query #ejs-search-clear { display: block; } /* 位置计数 / 结果数 —— 同一行的右侧 */ #ejs-search-count { flex: 0 0 auto; font-size: 12px; white-space: nowrap; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; } /* 无结果提示 */ #ejs-search-empty { position: fixed; top: 14vh; left: 7vw; z-index: 1000000; display: none; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); font-family: Arial, Helvetica, sans-serif; font-size: 14px; max-width: min(42vw, 420px); } #ejs-search-empty.visible { display: block; } /* 顶部结果被搜索条遮住时的补偿：给可见列加上内边距不方便，改为让搜索条自带半透明底 —— 已在上面的 background 处理。 */ /* 窄屏（手机）收紧一点，避免占满整行 */ @media (max-width: 640px) { #ejs-searchbar { left: 6vw; width: 88vw; font-size: 14px; } #ejs-search-empty { left: 6vw; max-width: 88vw; } }