Files
wordpress-theme-aksrt/assets/css/frontend/footer/part-3.css
T
kate522 0b5b153265 视觉系统主干落地:对齐 design tokens 与核心组件样式向 Zibll 收敛
- tokens:收紧 surface 层级/边框/圆角/阴影/间距与暗黑基线
- 组件:按钮、卡片原语、导航、侧栏、分页、模态、浮动按钮
- 首页:hero 外壳、fixed 列表/宫格、tab、skeleton/error 及各运营模块卡片化
- 内容页:单篇封面/标题/正文/blockquote/相关/TOC/上一篇下一篇、评论区
- 社区:forum board/topic/compose 子控件与卡片体系
- 交易/认证:cart/orders/revenue/product/auth 表面块与模态浮层统一
- footer:页脚主体、社交/联系、移动端 tabbar/搜索覆盖
2026-07-06 15:19:25 +08:00

304 lines
6.4 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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%;
}