gap: 8px; min-height: 88px; border-radius: 18px; background: var(--surface-2); color: var(--color-ink-3); text-decoration: none; } .tabbar-add-panel__item i { font-size: 22px; color: var(--color-accent); } .tabbar-add-panel__item span { font-size: 13px; font-weight: 600; } .tabbar-search-overlay { position: fixed; inset: 0; z-index: 953; background: rgba(15, 23, 42, 0.58); display: flex; align-items: stretch; justify-content: center; } .tabbar-search-overlay__dialog { width: 100%; min-height: 100%; background: var(--surface-1); padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .tabbar-search-overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tabbar-search-overlay__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--color-ink-3); } .tabbar-search-overlay__form { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 14px 14px 14px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: var(--shadow-sm); background: var(--surface-4); } .tabbar-search-overlay__icon { color: var(--color-ink-4); } .tabbar-search-overlay__form input { min-width: 0; border: 0; background: transparent; color: var(--color-ink); font-size: 15px; outline: none; } .tabbar-search-overlay__submit { border: 0; border-radius: 12px; padding: 10px 14px; background: var(--color-accent); color: #fff; font-weight: 700; } .tabbar-search-overlay__types { display: flex; gap: 8px; margin-top: 14px; } .tabbar-search-overlay__type { border: 0; border-radius: 999px; padding: 9px 14px; background: var(--surface-2); color: var(--color-ink-3); font-size: 13px; font-weight: 600; } .tabbar-search-overlay__type.is-active { background: var(--color-accent-soft); color: var(--color-accent); } .tabbar-search-overlay__section { margin-top: 20px; } .tabbar-search-overlay__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tabbar-search-overlay__label { color: var(--color-ink-3); font-size: 13px; font-weight: 700; } .tabbar-search-overlay__clear { border: 0; background: transparent; color: var(--color-accent); font-size: 12px; font-weight: 700; } .tabbar-search-overlay__history, .tabbar-search-overlay__suggestions { display: flex; flex-direction: column; gap: 10px; } .tabbar-search-overlay__history-item, .tabbar-search-overlay__suggestion-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; padding: 12px 14px; background: var(--surface-4); box-shadow: var(--shadow-sm); color: var(--color-ink-3); text-decoration: none; text-align: left; } .tabbar-search-overlay__history-item i { color: var(--color-accent); } .tabbar-search-overlay__history-item span, .tabbar-search-overlay__suggestion-item span { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; } .tabbar-search-overlay__suggestion-item small { color: var(--color-ink-4); font-size: 12px; } .tabbar-search-overlay__empty { padding: 14px; border-radius: 16px; background: var(--surface-2); color: var(--color-ink-4); font-size: 13px; text-align: center; } .tabbar-search-overlay__tags { display: flex; flex-wrap: wrap; gap: 10px; } .tabbar-search-overlay__tag { padding: 10px 14px; border-radius: 999px; background: var(--surface-2); color: var(--color-ink-3); text-decoration: none; font-size: 13px; } body.tabbar-search-open, body.tabbar-add-open { overflow: hidden; } /* 滚动时隐藏 tabbar(可选,通过 JS 添加 class) */ .footer-tabbar.scrolling-hide { transform: translateY(100%); transition: transform 0.3s ease; } /* 向下滚动隐藏,向上滚动显示 */ .footer-tabbar.scroll-down-hide { transition: transform 0.3s ease; } .footer-tabbar.scroll-down-hide.is-hidden { transform: translateY(120%); } /* 返回顶部包裹项(首页按钮 + 返回顶部切换) */ .tabbar-ontop-wrap { position: relative; } .tabbar-ontop-wrap .tabbar-ontop-btn { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 12px; color: var(--color-primary); font-size: 13px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tabbar-ontop-wrap .tabbar-ontop-btn i { font-size: 18px; line-height: 1; } .tabbar-ontop-wrap .tabbar-ontop-btn span { font-weight: 500; line-height: 1; transform: scale(0.8); transform-origin: center top; } .tabbar-ontop-wrap.is-scrolled .tabbar-ontop-btn { display: flex; } .tabbar-ontop-wrap.is-scrolled > .tabbar-item:not(.tabbar-ontop-btn) { opacity: 0; pointer-events: none; } /* ============================================================ * 暗色模式适配 * ============================================================ */ .theme-dark .site-footer, html.dark .site-footer { background: var(--surface-1); } .theme-dark .float-btn, html.dark .float-btn { background: var(--float-btn-bg); box-shadow: var(--shadow-sm); } .theme-dark .footer-tabbar, html.dark .footer-tabbar { background: var(--blur-bg); box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20); } /* ============================================================ * 旧版 back-to-top 按钮兼容(隐藏,用浮动按钮代替) * ============================================================ */ .back-to-top { display: none !important; } /* ============================================================ * 页脚布局模板变体 * ============================================================ */ /* 紧凑模板:单行版权 + 链接 */ .site-footer--compact .site-footer__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .site-footer--compact .site-footer__brand { flex: 1 1 100%; }