Files
wordpress-theme-aksrt/assets/css/frontend/footer/part-1.css
T
kate522 fabff49d11 fix(footer): stop day/night brand logos both showing
Size rules were forcing display:inline-block on both footer logos with
higher specificity than the night-hide rule. Decouple display toggle,
raise selector weight, align dark hooks with header/theme.js, and drop
unused part-1 light/dark logo-img rules.
2026-07-13 07:29:40 +08:00

298 lines
6.1 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.
/* ============================================================
* AKSRT Footer — v4.0 Zibll-Inspired
*
* 包含:
* - 页脚主体(Bootstrap Grid)
* - 浮动右侧按钮组
* - 移动端底部 Tab 栏
* ============================================================ */
/* ============================================================
* 页脚主体
* ============================================================ */
:root {
--aksrt-footer-tabbar-height: 49px;
}
.site-footer {
margin-top: auto;
background: var(--footer-bg, var(--surface-1));
border-top: 1px solid rgba(255, 255, 255, 0.55);
padding: 34px 30px 30px;
}
.site-footer__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px) {
.site-footer__inner {
padding: 0 24px;
}
}
.site-footer__grid {
padding-bottom: 32px;
}
.site-footer__brand {
margin-bottom: 24px;
}
.site-footer__title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 12px;
color: var(--color-ink);
}
.site-footer__desc {
font-size: 14px;
color: var(--color-ink-4);
line-height: 1.6;
margin: 0 0 16px;
max-width: 360px;
}
.site-footer__col {
margin-bottom: 24px;
}
.site-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__col li {
margin-bottom: 8px;
}
.site-footer__col a {
font-size: 14px;
color: var(--footer-color, var(--color-ink-3));
transition: color 0.15s ease;
}
.site-footer__col a:hover {
color: var(--focus-color, var(--color-primary));
}
/* 社交链接行 */
.social-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.social-row a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-4);
border: none;
box-shadow: var(--shadow-sm);
color: var(--color-ink-3);
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.social-row a:hover {
background: var(--color-primary);
color: #fff;
transform: translateY(-2px);
}
.social-row .social-icon-link {
background: var(--surface-3);
color: var(--color-ink-3);
}
.social-row .social-icon-link:hover {
background: var(--color-primary);
color: #fff;
}
/* 友情链接 */
.site-footer__friends {
margin-top: 16px;
}
.site-footer__friends-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-ink-4);
margin: 0 0 8px;
}
.site-footer__friends-list {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
}
.site-footer__friends-list a {
font-size: 0.8125rem;
color: var(--color-ink-4);
}
.site-footer__friends-list a:hover {
color: var(--color-primary);
}
/* 底部栏 */
.site-footer__bottom {
border-top: 1px solid var(--color-line);
padding: 20px 0;
text-align: center;
}
.site-footer__filings {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.site-footer__filings a {
font-size: 0.75rem;
color: var(--color-ink-4);
}
.site-footer__filings a:hover {
color: var(--color-primary);
}
.site-footer__copyright {
font-size: 12px;
color: var(--color-ink-4);
margin: 0;
}
/* §2.3 三列结构化字段 */
/* 品牌 Logo — day/night visibility lives in zibll-shell.css */
.site-footer__logo {
margin-bottom: 16px;
}
.site-footer__logo-img {
max-height: 48px;
width: auto;
}
/* 标准联系项 */
.site-footer__contact-std {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 12px 0;
}
.site-footer__contact-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-4, rgba(0,0,0,.05));
border: none;
box-shadow: var(--shadow-sm);
color: var(--color-ink-3, #888);
font-size: 16px;
position: relative;
cursor: pointer;
text-decoration: none;
transition: background .2s, color .2s, box-shadow .2s;
}
.site-footer__contact-item:hover,
.site-footer__contact-item:focus {
background: var(--color-primary);
color: #fff;
}
.site-footer__contact-hover {
display: none;
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
padding: 8px;
background: var(--surface-1, #fff);
border: none;
border-radius: 12px;
box-shadow: var(--shadow-lg);
z-index: 10;
white-space: nowrap;
}
.site-footer__contact-hover img {
width: 120px;
height: 120px;
object-fit: contain;
border-radius: 4px;
}
.site-footer__contact-item:hover .site-footer__contact-hover,
.site-footer__contact-item:focus .site-footer__contact-hover {
display: block;
}
/* 自定义代码区域 */
.site-footer__custom-code,
.site-footer__customize-code {
margin-top: 8px;
font-size: 0.85rem;
color: var(--color-ink-4, #999);
}
/* 二维码图片组 */
.site-footer__mini-qr {
display: flex;
justify-content: center;
gap: 24px;
padding: 20px 0;
border-top: 1px solid var(--color-line, #eee);
}
.site-footer__mini-qr-item {
text-align: center;
}
.site-footer__mini-qr-item img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 6px;
border: 1px solid var(--color-line, #eee);
}
.site-footer__mini-qr-item span {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--color-ink-4, #999);
}
/* 设备可见性工具类 */
@media (max-width: 767px) {
.hide-on-mobile { display: none !important; }
}
@media (min-width: 768px) {
.hide-on-desktop { display: none !important; }
}
/* ============================================================
* 浮动右侧按钮组(模仿 zibll float-right)
* ============================================================ */
/* 对齐 zibll: bottom 60px, z-index 1030 */
.float-right-btns {
position: fixed;
right: 20px;
bottom: 60px;
z-index: 1030;
display: flex;
flex-direction: column;
gap: 8px;
transition: opacity 0.3s ease;