/** * Live-search dropdown inside the search popup (see ajax-search.js). * Standalone stylesheet because output.css is a prebuilt Tailwind bundle — * new arbitrary-value utility classes wouldn't exist in it. * Dark mode follows the theme convention: .dark on . */ .fs-as-box { position: absolute; top: calc(100% + 10px); right: 0; left: 0; z-index: 60; max-height: 342px; overflow-y: auto; background: #ffffff; border: 2px solid #E4E4E4; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); padding: 6px; } .dark .fs-as-box { background: #191919; border-color: #2F2F2F; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } .fs-as-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-decoration: none; transition: background-color 0.15s ease; } .fs-as-item:hover, .fs-as-item.fs-as-active { background: #F4F4F4; } .dark .fs-as-item:hover, .dark .fs-as-item.fs-as-active { background: #000000; } .fs-as-thumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: #EFEFEF; } .dark .fs-as-thumb { background: #2F2F2F; } .fs-as-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fs-as-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fs-as-title { font-size: 14px; font-weight: 700; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .fs-as-title { color: #ffffff; } .fs-as-en { font-size: 11px; font-weight: 500; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; } .fs-as-price { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #000000; } .dark .fs-as-price { color: #ffffff; } .fs-as-price del { font-size: 11px; font-weight: 500; color: #999999; } .fs-as-all { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid #EFEFEF; border-radius: 10px; font-size: 13px; font-weight: 700; color: #000000; text-decoration: none; transition: background-color 0.15s ease; } .fs-as-all:hover, .fs-as-all.fs-as-active { background: #E1FF00; color: #000000; } .dark .fs-as-all { color: #ffffff; border-top-color: #2F2F2F; } .dark .fs-as-all:hover, .dark .fs-as-all.fs-as-active { background: #E1FF00; color: #000000; } .fs-as-msg { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; font-size: 13px; font-weight: 600; color: #666666; } .dark .fs-as-msg { color: #999999; } .fs-as-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E1FF00; border-top-color: transparent; animation: fs-as-spin 0.7s linear infinite; } @keyframes fs-as-spin { to { transform: rotate(360deg); } } .fs-as-box::-webkit-scrollbar { width: 6px; } .fs-as-box::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 3px; } .dark .fs-as-box::-webkit-scrollbar-thumb { background: #2F2F2F; }