ceshi
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
lass="fixed-body" data-toggle-class="mobile-navbar-show" data-target="body"></div></div><div class="header-slider-container relative mb20 card-4 filter-blur"><div class="relative zib-slider"><div class="new-swiper slide-index slide-header" data-direction="horizontal" data-effect="slide" data-loop="true" data-autoplay="1" data-interval="6000" data-spaceBetween="0" style="--m-height :280px;--pc-height :550px;"><div class="swiper-wrapper"><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/slider-bg.jpg" alt="幻灯片 - Demo本地"></a></div><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/user_t.jpg" alt="幻灯片 - Demo本地"></a></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination kaoyou"></div></div></div><div class="header-slider-search abs-center"><div class="header-slider-search-more text-center before">更优雅的WordPress主题这是导航栏幻灯片多功能组件，可在后台进行配置</div><div class="search-input"><form method="get" class="padding-10 search-form" action="https://localhost/"><div class="line-form"><div class="search-input-text"><input type="text" name="s" class="line-form-input" tabindex="1" value=""><i class="line-form-line"></i><div class="scale-placeholder" default="开启精彩搜索">开启精彩搜索</div><div class="abs-right muted-color"><button type="submit" tabindex="2" class="null" aria-label="搜索"><i class="fa fas fa-search" aria-hidden="true"></i></button></div></div><input type="hidden" name="type" value="post"></div></form></div></div><div class="header-slider-card container"><div class="flex jse flex-row gutters-5 flex-col-sm-2"><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-yellow" style="font-size: 25px;"><i class="fa fas fa-home em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 图标卡片</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-blue-2" style="font-size: 25px;"><i class="fa fas fa-cog em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 原创作品</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-pink" style="font-size: 25px;"><i class="fa fas fa-wrench em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 灵感来源NEW</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-cyan" style="font-size: 25px;"><i class="fa fas fa-shield-alt em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 系统工具 GO</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div></div></div></div>
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
aksrt-gutenberg-blocks-front
|
||||
aksrt-style
|
||||
aksrt-tokens
|
||||
aksrt-core-reset
|
||||
aksrt-core-typography
|
||||
aksrt-core-buttons
|
||||
aksrt-core-forms
|
||||
aksrt-core-alerts
|
||||
aksrt-ext-animations
|
||||
aksrt-ext-components-ext
|
||||
aksrt-ext-color-utilities
|
||||
aksrt-base
|
||||
aksrt-card-primitives
|
||||
aksrt-overlay-primitives
|
||||
aksrt-layout
|
||||
aksrt-footer
|
||||
aksrt-floating-buttons
|
||||
aksrt-enhancements
|
||||
aksrt-skeleton
|
||||
aksrt-empty-state
|
||||
aksrt-pagination
|
||||
aksrt-ajax-spinner
|
||||
aksrt-modal-runtime
|
||||
aksrt-vip-modal
|
||||
aksrt-post-card
|
||||
aksrt-sidebar
|
||||
aksrt-breadcrumb
|
||||
aksrt-pages
|
||||
aksrt-single-post
|
||||
aksrt-comments
|
||||
aksrt-route-profile-layout
|
||||
aksrt-route-profile-lists
|
||||
aksrt-route-profile
|
||||
aksrt-route-user-home
|
||||
aksrt-homepage-fixed-base-1
|
||||
aksrt-homepage-fixed-base-2
|
||||
aksrt-homepage-fixed-base-3
|
||||
aksrt-homepage-fixed-ajax-tab-skeleton-placeholder
|
||||
aksrt-homepage-fixed
|
||||
aksrt-medal
|
||||
aksrt-notyf
|
||||
aksrt-site-notice
|
||||
aksrt-widget-system
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
header-slider-container relative mb20 card-4 filter-blur"><div class="relative zib-slider"><div class="new-swiper slide-index slide-header" data-direction="horizontal" data-effect="slide" data-loop="true" data-autoplay="1" data-interval="6000" data-spaceBetween="0" style="--m-height :280px;--pc-height :550px;"><div class="swiper-wrapper"><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/slider-bg.jpg" alt="幻灯片 - Demo本地"></a></div><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/user_t.jpg" alt="幻灯片 - Demo本地"></a></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination kaoyou"></div></div></div><div class="header-slider-search abs-center"><div class="header-slider-search-more text-center before">更优雅的WordPress主题这是导航栏幻灯片多功能组件，可在后台进行配置</div><div class="search-input"><form method="get" class="padding-10 search-form" action="https://localhost/"><div class="line-form"><div class="search-input-text"><input type="text" name="s" class="line-form-input" tabindex="1" value=""><i class="line-form-line"></i><div class="scale-placeholder" default="开启精彩搜索">开启精彩搜索</div><div class="abs-right muted-color"><button type="submit" tabindex="2" class="null" aria-label="搜索"><i class="fa fas fa-search" aria-hidden="true"></i></button></div></div><input type="hidden" name="type" value="post"></div></form></div></div><div class="header-slider-card container"><div class="flex jse flex-row gutters-5 flex-col-sm-2"><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-yellow" style="font-size: 25px;"><i class="fa fas fa-home em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 图标卡片</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-blue-2" style="font-size: 25px;"><i class="fa fas fa-cog em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 原创作品</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-pink" style="font-size: 25px;"><i class="fa fas fa-wrench em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 灵感来源NEW</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-cyan" style="font-size: 25px;"><i class="fa fas fa-shield-alt em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 系统工具 GO</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div></div></div></div>
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
header-slider-container relative mb20 card-4 filter-blur"><div class="relative zib-slider"><div class="new-swiper slide-index slide-header" data-direction="horizontal" data-effect="slide" data-loop="true" data-autoplay="1" data-interval="6000" data-spaceBetween="0" style="--m-height :280px;--pc-height :550px;"><div class="swiper-wrapper"><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/slider-bg.jpg" alt="幻灯片 - Demo本地"></a></div><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/user_t.jpg" alt="幻灯片 - Demo本地"></a></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination kaoyou"></div></div></div><div class="header-slider-search abs-center"><div class="header-slider-search-more text-center before">更优雅的WordPress主题这是导航栏幻灯片多功能组件，可在后台进行配置</div><div class="search-input"><form method="get" class="padding-10 search-form" action="https://localhost/"><div class="line-form"><div class="search-input-text"><input type="text" name="s" class="line-form-input" tabindex="1" value=""><i class="line-form-line"></i><div class="scale-placeholder" default="开启精彩搜索">开启精彩搜索</div><div class="abs-right muted-color"><button type="submit" tabindex="2" class="null" aria-label="搜索"><i class="fa fas fa-search" aria-hidden="true"></i></button></div></div><input type="hidden" name="type" value="post"></div></form></div></div><div class="header-slider-card container"><div class="flex jse flex-row gutters-5 flex-col-sm-2"><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-yellow" style="font-size: 25px;"><i class="fa fas fa-home em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 图标卡片</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-blue-2" style="font-size: 25px;"><i class="fa fas fa-cog em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 原创作品</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-pink" style="font-size: 25px;"><i class="fa fas fa-wrench em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 灵感来源NEW</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-cyan" style="font-size: 25px;"><i class="fa fas fa-shield-alt em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 系统工具 GO</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div></div></div></div>
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ========== AJAX 加载指示器 — 对齐 zibll loading spinner ========== */
|
||||
.aksrt-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 13px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-loading__spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aksrt-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 全屏加载遮罩 */
|
||||
.aksrt-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.aksrt-loading-overlay__text {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3, #777);
|
||||
}
|
||||
|
||||
/* 行内加载（替换内容时） */
|
||||
.aksrt-loading-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes aksrt-dot-pulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 页面加载进度条 */
|
||||
.aksrt-progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary, #f04494);
|
||||
z-index: 10000;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-loading__spinner,
|
||||
.aksrt-loading-overlay__spinner {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
.aksrt-loading-inline__dot {
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
/* AJAX tab error state */
|
||||
.aksrt-homepage__tab-error {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 14px;
|
||||
background: var(--surface-1);
|
||||
border: none;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-retry {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-btn, 4px);
|
||||
background: var(--surface-4, #fff);
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-retry:hover {
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
border-color: var(--color-primary, var(--color-primary));
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
14. RESPONSIVE — TABLET (max-width: 991px)
|
||||
================================================================ */
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.aksrt-homepage__shell.content-shell,
|
||||
.aksrt-homepage__fluid-zone.content-shell {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
15. RESPONSIVE — MOBILE (max-width: 767px)
|
||||
================================================================ */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-homepage__shell.content-shell {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Tab skeleton: smaller thumb */
|
||||
.aksrt-homepage__tab-skeleton-thumb {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
height: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
16. RESPONSIVE — SMALL MOBILE (max-width: 640px)
|
||||
================================================================ */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-homepage__stream-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs,
|
||||
.aksrt-homepage__titlebox {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__admin-link {
|
||||
margin-left: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-stuck,
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-affixed {
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar {
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Tab skeleton: adapt */
|
||||
.aksrt-homepage__tab-skeleton-thumb {
|
||||
width: 96px;
|
||||
min-width: 96px;
|
||||
height: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
/* AJAX tab skeleton placeholder */
|
||||
.aksrt-homepage__tab-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: none;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: aksrt-skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-thumb {
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
height: 133px;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-line {
|
||||
height: 14px;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-line:first-child {
|
||||
width: 70%;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-line:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-skeleton-line:nth-child(3) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* AKSRT Alerts
|
||||
* 统一提示组件：error / warning / info / success
|
||||
* 用于替代各页面 inline 的 .login-error / .bind-error 等
|
||||
*/
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-snug);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.alert > svg {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.alert--error {
|
||||
color: #B91C1C;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
color: #B45309;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border-color: rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
color: #047857;
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.alert--info {
|
||||
color: #1D4ED8;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
html.dark .alert--error { color: #FCA5A5; }
|
||||
html.dark .alert--warning { color: #FCD34D; }
|
||||
html.dark .alert--success { color: #6EE7B7; }
|
||||
html.dark .alert--info { color: #93C5FD; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* AKSRT Animations — animate.css 等价（独立重写）
|
||||
* ------------------------------------------------------------
|
||||
* 关键帧 + 工具类 + IntersectionObserver 触发配合
|
||||
* 触发 JS 已在 enhancements2.js（[data-aksrt-animate] 属性）
|
||||
* 本文件仅定义 @keyframes 和 .aksrt-anim-* 工具类
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* Keyframes
|
||||
* ============================================================ */
|
||||
|
||||
/* Fade 系列 */
|
||||
@keyframes aksrtFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes aksrtFadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtFadeInDown {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtFadeInLeft {
|
||||
from { opacity: 0; transform: translateX(-20px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtFadeInRight {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* Zoom 系列 */
|
||||
@keyframes aksrtZoomIn {
|
||||
from { opacity: 0; transform: scale(.85); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtZoomInUp {
|
||||
from { opacity: 0; transform: scale(.85) translateY(20px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* Bounce 系列 */
|
||||
@keyframes aksrtBounceIn {
|
||||
0% { opacity: 0; transform: scale(.3); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
70% { transform: scale(.95); }
|
||||
100% { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtBounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-12px); }
|
||||
60% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
/* Pulse */
|
||||
@keyframes aksrtPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.06); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Flash */
|
||||
@keyframes aksrtFlash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* RubberBand */
|
||||
@keyframes aksrtRubberBand {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scaleX(1.25) scaleY(0.75); }
|
||||
40% { transform: scaleX(0.75) scaleY(1.25); }
|
||||
50% { transform: scaleX(1.15) scaleY(0.85); }
|
||||
65% { transform: scaleX(0.95) scaleY(1.05); }
|
||||
75% { transform: scaleX(1.05) scaleY(0.95); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Shake */
|
||||
@keyframes aksrtShake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
||||
}
|
||||
|
||||
/* Swing */
|
||||
@keyframes aksrtSwing {
|
||||
20% { transform: rotate(15deg); }
|
||||
40% { transform: rotate(-10deg); }
|
||||
60% { transform: rotate(5deg); }
|
||||
80% { transform: rotate(-5deg); }
|
||||
100% { transform: none; }
|
||||
}
|
||||
|
||||
/* Tada */
|
||||
@keyframes aksrtTada {
|
||||
0% { transform: scale(1); }
|
||||
10%, 20% { transform: scale(0.9) rotate(-3deg); }
|
||||
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
|
||||
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
|
||||
100% { transform: scale(1) rotate(0); }
|
||||
}
|
||||
|
||||
/* Wobble */
|
||||
@keyframes aksrtWobble {
|
||||
0% { transform: none; }
|
||||
15% { transform: translateX(-25%) rotate(-5deg); }
|
||||
30% { transform: translateX(20%) rotate(3deg); }
|
||||
45% { transform: translateX(-15%) rotate(-3deg); }
|
||||
60% { transform: translateX(10%) rotate(2deg); }
|
||||
75% { transform: translateX(-5%) rotate(-1deg); }
|
||||
100% { transform: none; }
|
||||
}
|
||||
|
||||
/* Slide 系列 */
|
||||
@keyframes aksrtSlideInUp {
|
||||
from { opacity: 0; transform: translateY(100%); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtSlideInDown {
|
||||
from { opacity: 0; transform: translateY(-100%); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtSlideInLeft {
|
||||
from { opacity: 0; transform: translateX(-100%); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtSlideInRight {
|
||||
from { opacity: 0; transform: translateX(100%); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* HeartBeat */
|
||||
@keyframes aksrtHeartBeat {
|
||||
0% { transform: scale(1); }
|
||||
14% { transform: scale(1.3); }
|
||||
28% { transform: scale(1); }
|
||||
42% { transform: scale(1.3); }
|
||||
70% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Jello */
|
||||
@keyframes aksrtJello {
|
||||
0%, 100% { transform: none; }
|
||||
11% { transform: skewX(-12.5deg) skewY(-12.5deg); }
|
||||
22% { transform: skewX(6.25deg) skewY(6.25deg); }
|
||||
33% { transform: skewX(-6.25deg) skewY(-6.25deg); }
|
||||
44% { transform: skewX(3.125deg) skewY(3.125deg); }
|
||||
55% { transform: skewX(-3.125deg) skewY(-3.125deg); }
|
||||
66% { transform: skewX(1.5625deg) skewY(1.5625deg); }
|
||||
77% { transform: skewX(-1.5625deg) skewY(-1.5625deg); }
|
||||
88% { transform: skewX(0.78125deg) skewY(0.78125deg); }
|
||||
}
|
||||
|
||||
/* HeadShake */
|
||||
@keyframes aksrtHeadShake {
|
||||
0% { transform: translateX(0); }
|
||||
6.5% { transform: translateX(-6px) rotateY(-9deg); }
|
||||
18.5% { transform: translateX(5px) rotateY(7deg); }
|
||||
31.5% { transform: translateX(-3px) rotateY(-5deg); }
|
||||
43.5% { transform: translateX(2px) rotateY(3deg); }
|
||||
50% { transform: translateX(0); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* BounceOut — 退出动画 */
|
||||
@keyframes aksrtBounceOut {
|
||||
0% { transform: scale(1); }
|
||||
25% { transform: scale(0.95); }
|
||||
50% { transform: scale(1.1); }
|
||||
75% { transform: scale(0.97); }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ZoomOut — 退出动画 */
|
||||
@keyframes aksrtZoomOut {
|
||||
0% { opacity: 1; transform: none; }
|
||||
100% { opacity: 0; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
/* BackIn/BackOut */
|
||||
@keyframes aksrtBackInUp {
|
||||
0% { opacity: 0; transform: translateY(30px) scale(0.7); }
|
||||
80% { opacity: 0.8; transform: translateY(-5px) scale(1.02); }
|
||||
100% { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@keyframes aksrtBackInDown {
|
||||
0% { opacity: 0; transform: translateY(-30px) scale(0.7); }
|
||||
80% { opacity: 0.8; transform: translateY(5px) scale(1.02); }
|
||||
100% { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* Flip */
|
||||
@keyframes aksrtFlip {
|
||||
0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
|
||||
40% { transform: perspective(400px) rotateY(-10deg); }
|
||||
70% { transform: perspective(400px) rotateY(10deg); }
|
||||
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes aksrtFlipInX {
|
||||
0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
|
||||
40% { transform: perspective(400px) rotateX(-10deg); }
|
||||
70% { transform: perspective(400px) rotateX(10deg); }
|
||||
100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Animation utility classes
|
||||
* ============================================================ */
|
||||
.aksrt-anim-fade-in { animation: aksrtFadeIn var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
.aksrt-anim-fade-up { animation: aksrtFadeInUp var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
.aksrt-anim-fade-down { animation: aksrtFadeInDown var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
.aksrt-anim-fade-left { animation: aksrtFadeInLeft var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
.aksrt-anim-fade-right { animation: aksrtFadeInRight var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
|
||||
.aksrt-anim-zoom-in { animation: aksrtZoomIn var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
.aksrt-anim-zoom-in-up { animation: aksrtZoomInUp var(--dur-base, .4s) var(--ease-out, ease) both; }
|
||||
|
||||
.aksrt-anim-bounce-in { animation: aksrtBounceIn .6s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-bounce { animation: aksrtBounce 1s ease both; }
|
||||
|
||||
.aksrt-anim-pulse { animation: aksrtPulse 1s ease infinite; }
|
||||
.aksrt-anim-flash { animation: aksrtFlash 1s ease both; }
|
||||
.aksrt-anim-rubber-band { animation: aksrtRubberBand .8s ease both; }
|
||||
.aksrt-anim-shake { animation: aksrtShake .5s ease both; }
|
||||
.aksrt-anim-swing { animation: aksrtSwing .6s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-tada { animation: aksrtTada 1s ease both; }
|
||||
.aksrt-anim-wobble { animation: aksrtWobble .8s ease both; }
|
||||
.aksrt-anim-heart-beat { animation: aksrtHeartBeat 1.3s ease both; }
|
||||
.aksrt-anim-jello { animation: aksrtJello .8s ease both; }
|
||||
.aksrt-anim-head-shake { animation: aksrtHeadShake .8s ease both; }
|
||||
|
||||
/* 退出动画 */
|
||||
.aksrt-anim-bounce-out { animation: aksrtBounceOut .5s ease both; }
|
||||
.aksrt-anim-zoom-out { animation: aksrtZoomOut .3s ease both; }
|
||||
|
||||
/* BackIn 动画 */
|
||||
.aksrt-anim-back-in-up { animation: aksrtBackInUp .5s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-back-in-down { animation: aksrtBackInDown .5s var(--ease-out, ease) both; }
|
||||
|
||||
.aksrt-anim-slide-up { animation: aksrtSlideInUp .5s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-slide-down { animation: aksrtSlideInDown .5s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-slide-left { animation: aksrtSlideInLeft .5s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-slide-right { animation: aksrtSlideInRight .5s var(--ease-out, ease) both; }
|
||||
|
||||
.aksrt-anim-flip { animation: aksrtFlip .6s var(--ease-out, ease) both; }
|
||||
.aksrt-anim-flip-x { animation: aksrtFlipInX .6s var(--ease-out, ease) both; }
|
||||
|
||||
/* ============================================================
|
||||
* Duration modifiers
|
||||
* ============================================================ */
|
||||
.aksrt-anim-fast { --dur-base: .2s; }
|
||||
.aksrt-anim-slow { --dur-base: .6s; }
|
||||
|
||||
/* ============================================================
|
||||
* Delay modifiers (配合 data-aksrt-delay 使用时为 inline，
|
||||
* 也可用 class 方式独立设置)
|
||||
* ============================================================ */
|
||||
.aksrt-anim-delay-1 { animation-delay: .1s; }
|
||||
.aksrt-anim-delay-2 { animation-delay: .2s; }
|
||||
.aksrt-anim-delay-3 { animation-delay: .3s; }
|
||||
.aksrt-anim-delay-4 { animation-delay: .4s; }
|
||||
.aksrt-anim-delay-5 { animation-delay: .5s; }
|
||||
.aksrt-anim-delay-6 { animation-delay: .6s; }
|
||||
.aksrt-anim-delay-7 { animation-delay: .7s; }
|
||||
.aksrt-anim-delay-8 { animation-delay: .8s; }
|
||||
|
||||
/* ============================================================
|
||||
* Infinite modifier
|
||||
* ============================================================ */
|
||||
.aksrt-anim-infinite { animation-iteration-count: infinite; }
|
||||
|
||||
/* ============================================================
|
||||
* Reduced-motion — 尊重用户偏好
|
||||
* ============================================================ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-anim-fade-in,
|
||||
.aksrt-anim-fade-up,
|
||||
.aksrt-anim-fade-down,
|
||||
.aksrt-anim-fade-left,
|
||||
.aksrt-anim-fade-right,
|
||||
.aksrt-anim-zoom-in,
|
||||
.aksrt-anim-zoom-in-up,
|
||||
.aksrt-anim-bounce-in,
|
||||
.aksrt-anim-bounce,
|
||||
.aksrt-anim-pulse,
|
||||
.aksrt-anim-flash,
|
||||
.aksrt-anim-rubber-band,
|
||||
.aksrt-anim-shake,
|
||||
.aksrt-anim-swing,
|
||||
.aksrt-anim-tada,
|
||||
.aksrt-anim-wobble,
|
||||
.aksrt-anim-heart-beat,
|
||||
.aksrt-anim-jello,
|
||||
.aksrt-anim-head-shake,
|
||||
.aksrt-anim-bounce-out,
|
||||
.aksrt-anim-zoom-out,
|
||||
.aksrt-anim-back-in-up,
|
||||
.aksrt-anim-back-in-down,
|
||||
.aksrt-anim-slide-up,
|
||||
.aksrt-anim-slide-down,
|
||||
.aksrt-anim-slide-left,
|
||||
.aksrt-anim-slide-right,
|
||||
.aksrt-anim-flip,
|
||||
.aksrt-anim-flip-x {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,425 @@
|
||||
/**
|
||||
* Homepage Fixed Layout — Zibll Visual Parity
|
||||
*
|
||||
* Implements Zibll's homepage visual language:
|
||||
* - System font stack with Chinese fallbacks
|
||||
* - 1200px container, 311px sidebar
|
||||
* - Post cards: list mode (190px thumb) + card mode (3-col grid)
|
||||
* - Zibll shadow/radius/spacing values
|
||||
* - scale(1.02) thumbnail hover
|
||||
* - Lazy-load animations (blur/fade/scale)
|
||||
* - Full responsive: 1200/991/767/640px breakpoints
|
||||
*/
|
||||
|
||||
/* ================================================================
|
||||
0. ANIMATIONS
|
||||
================================================================ */
|
||||
|
||||
@keyframes aksrt-skeleton-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
1. HOMEPAGE CONTAINER & TYPOGRAPHY
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.42857143;
|
||||
color: var(--main-color, #4e5358);
|
||||
background: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Slightly looser than stock zibll short pages: air between stream and footer */
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
.aksrt-homepage a[href] {
|
||||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.aksrt-homepage .aksrt-skeleton {
|
||||
animation: aksrt-skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
2. LAYOUT SHELL
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__fluid-zone.content-shell,
|
||||
.aksrt-homepage__shell.content-shell {
|
||||
max-width: min(100%, var(--container, 1200px));
|
||||
}
|
||||
|
||||
.aksrt-homepage__fluid-zone.content-shell {
|
||||
padding-top: 18px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__hero {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
margin: 0 calc(-50vw + 50%) 24px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__hero .header-components-container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__shell.content-shell {
|
||||
padding-top: 0;
|
||||
/* 36px + a bit more breathing room before footer */
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
/* Bottom fluid zone (if any) keeps a little gap above footer */
|
||||
.aksrt-homepage__fluid-zone--bottom {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-homepage {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__shell.content-shell {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dual-column geometry is owned by body.site-layout-* float rules in layout.css. */
|
||||
.aksrt-homepage__content-layout {
|
||||
display: block;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.aksrt-homepage__fluid-zone.content-shell,
|
||||
.aksrt-homepage__shell.content-shell {
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone,
|
||||
.aksrt-homepage__fluid-zone,
|
||||
.aksrt-homepage__aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-homepage__system-modules {
|
||||
gap: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone.aksrt-homepage__system-modules {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone--featured {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone--operated,
|
||||
.aksrt-homepage__content-zone--mid,
|
||||
.aksrt-homepage__content-zone--supplement {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone--supplement {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone .widget-card:last-child,
|
||||
.aksrt-homepage__aside .widget:last-child,
|
||||
.aksrt-homepage__fluid-zone .widget-fluid:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
3. FLUID WIDGETS
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__fluid-zone .widget-fluid {
|
||||
margin-bottom: 20px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.aksrt-homepage .widget-fluid.widget_aksrt_tab_posts,
|
||||
.aksrt-homepage .widget-fluid.widget_aksrt_category_block,
|
||||
.aksrt-homepage .widget-fluid.widget_aksrt_category_tabs,
|
||||
.aksrt-homepage .widget-fluid.widget_aksrt_category_recommend {
|
||||
padding: 15px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: none;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.aksrt-homepage__content-zone .widget-card,
|
||||
.aksrt-homepage__aside .widget {
|
||||
background: var(--surface-1, #fff);
|
||||
padding: 15px;
|
||||
border: none;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
4. STREAM CONTAINER
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__stream-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream-intro {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream-title {
|
||||
margin: 0;
|
||||
color: var(--color-ink);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream-subtitle {
|
||||
margin: 0;
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream,
|
||||
.aksrt-homepage__stream.widget-card {
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
5. TABS
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__tabs,
|
||||
.aksrt-homepage__titlebox {
|
||||
margin-bottom: 6px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.box-body,
|
||||
.aksrt-homepage__titlebox.box-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs-sentinel {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.home-tab-nav-box {
|
||||
position: static;
|
||||
z-index: auto;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"] {
|
||||
position: sticky;
|
||||
top: var(--nav-height, 60px);
|
||||
z-index: 995;
|
||||
background: transparent;
|
||||
transition: background-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-radius 0.2s ease,
|
||||
padding 0.2s ease,
|
||||
margin 0.2s ease,
|
||||
backdrop-filter 0.2s ease,
|
||||
-webkit-backdrop-filter 0.2s ease;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-stuck,
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-affixed {
|
||||
margin-bottom: 14px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: none;
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: saturate(1.6) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(1.6) blur(20px);
|
||||
}
|
||||
|
||||
.aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-affixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
html.dark .aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-stuck,
|
||||
html.dark .aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-affixed,
|
||||
html.dark .aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-stuck,
|
||||
html.dark .aksrt-homepage__tabs.home-tab-nav-box[data-sticky-tabs="true"].is-affixed {
|
||||
background: rgba(24, 24, 24, 0.82);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__admin-link {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.scroll-x {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-item {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-button {
|
||||
padding: 6px 14px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-ink);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: inherit;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
border-radius: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-button:hover {
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-item.is-active {
|
||||
background: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
.aksrt-homepage__tab-item.is-active .aksrt-homepage__tab-button,
|
||||
.aksrt-homepage__tab-button[aria-selected="true"] {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
6. SORTBAR + VIEW TOGGLE
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__sortbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
color: var(--color-ink-3, #777);
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar-link:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar-link + .aksrt-homepage__sortbar-link::before {
|
||||
content: "\00b7";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
color: var(--color-ink-4, #b1b1b1);
|
||||
}
|
||||
|
||||
.aksrt-homepage__sortbar-link:hover,
|
||||
.aksrt-homepage__sortbar-link.is-active {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.aksrt-homepage__view-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.aksrt-homepage__view-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-ink-4, #999);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-homepage__view-btn:hover {
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-2, #eee);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
.aksrt-homepage__view-btn.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-homepage__view-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.title-theme {
|
||||
position: relative;
|
||||
padding-left: 1.2em;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.title-theme::before {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 2px;
|
||||
width: 4px;
|
||||
content: "";
|
||||
background: var(--color-primary);
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px -1px var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-homepage__page-indicator {
|
||||
margin-left: 10px;
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.aksrt-homepage__panel[hidden],
|
||||
.index-tab-main .tab-pane[hidden],
|
||||
.home-tab-content .tab-pane[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.aksrt-homepage__panels,
|
||||
.home-tab-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-homepage__panel {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.aksrt-homepage__panel.is-active,
|
||||
.aksrt-homepage__panel.active,
|
||||
.aksrt-homepage__panel.fade.in,
|
||||
.aksrt-homepage__panel.tab-pane.active,
|
||||
#index-tab-main.aksrt-homepage__panel,
|
||||
.home-tab-content .tab-pane.is-active,
|
||||
.home-tab-content .tab-pane.show,
|
||||
.home-tab-content .tab-pane.active,
|
||||
.aksrt-homepage__panel.show {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.home-tab-content .tab-pane.fade.is-active,
|
||||
.home-tab-content .tab-pane.fade.show,
|
||||
.home-tab-content .tab-pane.fade.active,
|
||||
#index-tab-main.fade {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.aksrt-homepage__panel-contract {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.flex.xx,
|
||||
.xx {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex1,
|
||||
.flex-1 {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.jsb,
|
||||
.jb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ac {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
/* ================================================================
|
||||
11. PAGINATION
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__panel-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__more,
|
||||
.aksrt-homepage .aksrt-load-more-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
border-radius: var(--radius, 8px);
|
||||
background: var(--surface-1, #fff);
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.aksrt-homepage__more:hover,
|
||||
.aksrt-homepage .aksrt-load-more-btn:hover {
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
border-color: var(--color-primary, var(--color-primary));
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.aksrt-homepage .ajax-pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.aksrt-homepage .navigation.pagination .nav-links,
|
||||
.aksrt-homepage .pagination {
|
||||
gap: 0;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.aksrt-homepage .navigation.pagination .page-numbers,
|
||||
.aksrt-homepage .pagination .page-numbers {
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
margin: 3px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xs, 3px);
|
||||
background: var(--surface-4, #eee);
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.aksrt-homepage .navigation.pagination .page-numbers:hover,
|
||||
.aksrt-homepage .pagination .page-numbers:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-homepage .navigation.pagination .current,
|
||||
.aksrt-homepage .pagination .current {
|
||||
background: var(--color-primary, var(--color-primary)) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
12. SIDEBAR
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage__aside > .zib-widget,
|
||||
.aksrt-homepage__aside > .widget {
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 0;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside > .zib-widget:last-child,
|
||||
.aksrt-homepage__aside > .widget:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget-list li,
|
||||
.aksrt-homepage__aside .widget_recent_entries li,
|
||||
.aksrt-homepage__aside .recent-posts-row {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget-title,
|
||||
.aksrt-homepage__content-zone .widget-title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget-title {
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
padding-left: 1.2em;
|
||||
padding-bottom: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 2px;
|
||||
width: 4px;
|
||||
height: auto;
|
||||
background: var(--color-primary, var(--color-primary));
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px -1px var(--color-primary, var(--color-primary));
|
||||
transition: transform 0.4s ease;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget_recent_entries li a,
|
||||
.aksrt-homepage__aside .widget-list li a {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget_recent_entries li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget_search .search-field {
|
||||
height: 40px;
|
||||
border-radius: 30px;
|
||||
background: var(--surface-2, #eee);
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .widget_search .search-submit {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .tag-cloud {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .tag-cloud a {
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
border: 0;
|
||||
background: var(--surface-2, #eee);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.aksrt-homepage__aside .tag-cloud a:hover {
|
||||
background: var(--color-primary, var(--color-primary));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-homepage .widget.notop,
|
||||
.aksrt-homepage .box-body.notop {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage .widget.nobottom,
|
||||
.aksrt-homepage .box-body.nobottom {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.aksrt-homepage .widget.widget_custom_html {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
13. LOADING & EMPTY STATES
|
||||
================================================================ */
|
||||
|
||||
.aksrt-homepage .aksrt-loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.aksrt-homepage__stream .no-results {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: var(--color-ink-4, #999);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* AKSRT Main v5 — 博客/个人站完整前端
|
||||
*/
|
||||
|
||||
/* 防止 hero 等使用 100vw / full-bleed 时产生横向滚动条 */
|
||||
html,
|
||||
body {
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
@supports not (overflow-x: clip) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 阅读进度条（单篇文章顶 fixed）========== */
|
||||
.reading-progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
width: 0%;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||||
transition: width 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* 折叠 body 内注入的 BOM / 空白文本节点，防止产生多余行高间距 */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
color: var(--color-ink-2);
|
||||
background-color: var(--surface-page);
|
||||
}
|
||||
|
||||
/* zibll compat: global link composite transition */
|
||||
a[href] {
|
||||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 12px;
|
||||
z-index: 1100;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
transform: translateY(-140%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ========== 站点外壳 ========== */
|
||||
.site-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Zibll dual-column float math expects a padding-free main.container.
|
||||
* Bootstrap 5 also defines .container (max-width ladder + padding-x).
|
||||
* Force Zibll geometry after Bootstrap so negative-margin sidebars land correctly. */
|
||||
.container,
|
||||
main.container,
|
||||
.site-main.container {
|
||||
width: 100%;
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
/* Kill Bootstrap 5 --bs-gutter-x padding model on site shells */
|
||||
--bs-gutter-x: 0;
|
||||
--bs-gutter-y: 0;
|
||||
}
|
||||
|
||||
/* Header multifunc icon cards need horizontal gutter (zibll content rows).
|
||||
* Global .container padding is 0 for dual-column float math. */
|
||||
.header-slider-card.container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container,
|
||||
main.container {
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container,
|
||||
main.container {
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container,
|
||||
main.container {
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container,
|
||||
main.container {
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.container,
|
||||
main.container,
|
||||
.fluid-widget-wrap .widget-container {
|
||||
width: auto;
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.container,
|
||||
main.container {
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Soft pad only when the float dual-column is collapsed.
|
||||
* Match Zibll bootstrap container pad (15px) rather than 10px. */
|
||||
@media (max-width: 991.98px) {
|
||||
.container,
|
||||
main.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container,
|
||||
main.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== User identity inline icons ==========
|
||||
* All compact identity marks share one line-height baseline: VIP, level,
|
||||
* certification, and worn medals remain visually aligned in every surface.
|
||||
*/
|
||||
.aksrt-vip-badge,
|
||||
.aksrt-user-level-badge,
|
||||
.aksrt-user-level-icon,
|
||||
.aksrt-identity-medal,
|
||||
.aksrt-identity-certification-icon,
|
||||
.aksrt-header-user-medal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: -.15em;
|
||||
flex: 0 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aksrt-vip-badge__icon {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
}
|
||||
.aksrt-vip-badge > i {
|
||||
font-size: .9em;
|
||||
line-height: 1;
|
||||
}
|
||||
.aksrt-user-level-badge {
|
||||
padding: 0 .35em;
|
||||
font-size: .78em;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Comment context: keep all identity marks inside the compact author line. */
|
||||
.aksrt-identity-medal--comment,
|
||||
.aksrt-user-level-icon--comment,
|
||||
.aksrt-header-user-medal--comment {
|
||||
height: 1em;
|
||||
vertical-align: -.12em;
|
||||
}
|
||||
.aksrt-vip-badge--sm {
|
||||
height: 1.1em;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* No-wrap inline name rows — keep the level icon on the same line as the name.
|
||||
* The non-standard <name> element (zibll compat) plus .user-name / author-hero /
|
||||
* uc-header name rows must not flex-wrap, or the badge drops to a new line.
|
||||
* The comment header may still wrap (avatar + name + like can overflow on
|
||||
* narrow viewports), so it keeps flex-wrap but the inner <name> never does. */
|
||||
.article-avatar name,
|
||||
.article-avatar .name,
|
||||
.user-name,
|
||||
.aksrt-author-hero__name,
|
||||
.uc-header__name,
|
||||
.aksrt-header-badges {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.aksrt-author-hero__name,
|
||||
.uc-header__name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__name-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.aksrt-ip-geo-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
margin: 2px 0;
|
||||
padding: .3em .6em;
|
||||
border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
|
||||
border-radius: var(--mini-radius, 4px);
|
||||
background: var(--surface-2, rgba(136, 136, 136, .1));
|
||||
box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08));
|
||||
color: var(--color-ink-3, #666);
|
||||
font-size: .92em;
|
||||
line-height: 1.44;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.no-results {
|
||||
padding: 48px 20px;
|
||||
text-align: center;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,120 @@
|
||||
/* ========== 面包屑导航 — 对齐 zibll .breadcrumb (main.css) ========== */
|
||||
/* Single source for breadcrumb chrome. Do not re-define in layout.css. */
|
||||
|
||||
.breadcrumb,
|
||||
ul.breadcrumb,
|
||||
.breadcrumb-nav,
|
||||
.breadcrumbs-wrap {
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
padding: 0 8px;
|
||||
margin: 0 0 12px;
|
||||
opacity: 0.6;
|
||||
line-height: 1.8;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb-nav ol,
|
||||
.breadcrumb-nav ul,
|
||||
ul.breadcrumb,
|
||||
.breadcrumbs.breadcrumb {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Zibll uses flat li + li:before separators (not flex-gap nodes) */
|
||||
.breadcrumb > li,
|
||||
ul.breadcrumb > li,
|
||||
.breadcrumb-nav li,
|
||||
.breadcrumbs.breadcrumb > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.breadcrumb > li + li:before,
|
||||
ul.breadcrumb > li + li:before,
|
||||
.breadcrumb-nav li + li:before {
|
||||
content: "/";
|
||||
padding: 0 0 0 6px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Archive/nav variant may still stamp sep nodes — keep neutral */
|
||||
.breadcrumbs.breadcrumb .breadcrumbs__sep {
|
||||
padding: 0 6px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.breadcrumb a,
|
||||
ul.breadcrumb a,
|
||||
.breadcrumb-nav a,
|
||||
.breadcrumbs a {
|
||||
color: var(--muted-2-color, var(--color-ink-4, #999));
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover,
|
||||
ul.breadcrumb a:hover,
|
||||
.breadcrumb-nav a:hover,
|
||||
.breadcrumbs a:hover {
|
||||
color: var(--focus-color, var(--color-primary, #f04494));
|
||||
}
|
||||
|
||||
.breadcrumb > li:last-child,
|
||||
ul.breadcrumb > li:last-child,
|
||||
.breadcrumb-nav .current,
|
||||
.breadcrumbs__item.is-current {
|
||||
color: var(--main-color, var(--color-ink-2, #4e5358));
|
||||
}
|
||||
|
||||
/* Cover / video footer breadcrumb — Zibll single-cover-con / single-video */
|
||||
.single-cover-con .breadcrumb,
|
||||
.single-cover-con ul.breadcrumb,
|
||||
.single-cover-con .breadcrumb-nav,
|
||||
.post-breadcrumbs .breadcrumb,
|
||||
.single-video .breadcrumb {
|
||||
font-size: 13px;
|
||||
margin: 5px 0 0 -6px;
|
||||
opacity: unset;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.single-video .breadcrumb {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.single-cover-con .breadcrumb,
|
||||
.single-cover-con ul.breadcrumb,
|
||||
.single-cover-con .breadcrumb-nav {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.single-cover-con .breadcrumb a,
|
||||
.single-cover-con ul.breadcrumb a,
|
||||
.single-cover-con .breadcrumb-nav a {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.single-cover-con .breadcrumb a:hover,
|
||||
.single-cover-con ul.breadcrumb a:hover,
|
||||
.single-cover-con .breadcrumb-nav a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.single-cover-con .breadcrumb > li:last-child,
|
||||
.single-cover-con ul.breadcrumb > li:last-child {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.breadcrumb,
|
||||
ul.breadcrumb,
|
||||
.breadcrumb-nav,
|
||||
.breadcrumbs-wrap {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* AKSRT Buttons — 1:1 Zibll Alignment
|
||||
*
|
||||
* 对齐 zibll .but 系统：
|
||||
* - 正常字重 (normal)
|
||||
* - 4px 圆角
|
||||
* - 灰色默认背景
|
||||
* - opacity hover
|
||||
*/
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-danger {
|
||||
--btn-h: 34px;
|
||||
--btn-px: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
height: var(--btn-h);
|
||||
padding: 0 var(--btn-px);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: normal; /* zibll .but: normal — was 500 */
|
||||
line-height: 1.44;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
transition: opacity 0.15s ease,
|
||||
background 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
.btn-sm { --btn-h: 28px; --btn-px: 8px; font-size: var(--text-xs); }
|
||||
.btn-lg { --btn-h: 44px; --btn-px: 18px; font-size: var(--text-base); }
|
||||
|
||||
/* === Default (gray background, like zibll .but default) === */
|
||||
.btn {
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
color: #888;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* === Primary — solid theme, opacity hover (no translateY / heavy glow) === */
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.8;
|
||||
color: var(--color-on-primary);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
opacity: 1;
|
||||
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* === Outline === */
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-ink-2);
|
||||
border-color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
opacity: 0.8;
|
||||
background: transparent;
|
||||
border-color: var(--color-ink-2);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
/* === Ghost === */
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-ink-2);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* === Danger === */
|
||||
.btn-danger {
|
||||
background: var(--color-error);
|
||||
color: #fff;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* === Disabled === */
|
||||
.btn:disabled,
|
||||
.btn-primary:disabled,
|
||||
.btn-outline:disabled,
|
||||
.btn-ghost:disabled,
|
||||
.btn-danger:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === Icon button === */
|
||||
.btn-icon {
|
||||
width: var(--btn-h);
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon.btn-sm { width: 28px; }
|
||||
.btn-icon.btn-lg { width: 44px; }
|
||||
|
||||
/* === Full width === */
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Zibll .but / .badg compat layer — 1:1 zibll main.css (.but system)
|
||||
* ------------------------------------------------------------
|
||||
* Additive: does NOT alter the AKSRT .btn system above. Lets reused
|
||||
* zibll-style markup (.but / .badg / .b-* / .jb-* / .c-* / .but-group /
|
||||
* .but-average / .toggle-radius) render via the --this-* context-coloring vars.
|
||||
* The --this-* DEFAULTS are set on the base rule here (BEFORE the .b-*/.jb-*
|
||||
* modifiers) so the cascade resolves colored variants correctly; scoped to
|
||||
* .but/.badg (never :root) so .float-btn's own var(--this-*, fallback) stays intact.
|
||||
* Consumes --focus-color-opacity* from zibll-compat-vars.css.
|
||||
* ============================================================ */
|
||||
|
||||
/* Base (zibll .but / .badg) */
|
||||
.but,
|
||||
.badg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0.3em 0.6em;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
line-height: 1.44;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--this-border);
|
||||
box-shadow: var(--this-shadow);
|
||||
background: var(--this-bg);
|
||||
color: var(--this-color);
|
||||
--main-color: var(--this-color);
|
||||
--this-bg: rgba(136, 136, 136, 0.1);
|
||||
--this-border: transparent;
|
||||
--this-shadow: none;
|
||||
--this-color: #888;
|
||||
text-shadow: 0 0 0;
|
||||
transition: 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.but a { color: inherit; }
|
||||
|
||||
.but .icon,
|
||||
.but > .fa:not(.fa-angle-right),
|
||||
.but > i[class*="fa-"]:not(.fa-angle-right) { margin-right: 0.25em; }
|
||||
|
||||
/* hover / active */
|
||||
.but:focus,
|
||||
.but:hover { opacity: 0.8; color: var(--this-color); }
|
||||
.but:active { --this-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08); }
|
||||
|
||||
/* radius variants */
|
||||
.but.radius,
|
||||
.badg.radius,
|
||||
.radius > .but { border-radius: 50px; padding: 0.3em 1em; }
|
||||
.but.main-radius,
|
||||
.badg.main-radius { border-radius: var(--main-radius); }
|
||||
.but.mini-radius,
|
||||
.badg.mini-radius { border-radius: var(--mini-radius); }
|
||||
|
||||
/* hollow (outline) */
|
||||
.but.hollow,
|
||||
.badg.hollow { background: transparent; --this-border: var(--this-color); }
|
||||
.but.hollow:hover { background: var(--this-bg); }
|
||||
.badg.hollow[class*='b-'],
|
||||
.but.hollow[class*='b-'] { background: 0 0; --this-border: var(--this-bg); --this-color: var(--this-bg); }
|
||||
.but.hollow[class*='b-']:hover { color: #fff; }
|
||||
.but.hollow.c-white:hover { background: 0 0; --this-color: var(--focus-color); color: var(--focus-color); }
|
||||
|
||||
/* circular icon button */
|
||||
.circular,
|
||||
.badg.cir,
|
||||
.but.cir {
|
||||
padding: 0;
|
||||
border-radius: 5em;
|
||||
--this-size: 1.8em;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: var(--this-size);
|
||||
min-width: var(--this-size);
|
||||
}
|
||||
.circular.radius4,
|
||||
.badg.cir.radius4,
|
||||
.but.cir.radius4 { border-radius: 4px; }
|
||||
.but.cir svg.icon,
|
||||
.but.cir > .fa { margin: 0; }
|
||||
|
||||
/* button group (joined) */
|
||||
.but-group { display: inline-flex; }
|
||||
.but-group > .but { border-radius: 0; margin: 0; }
|
||||
.but-group > .but:first-of-type { border-radius: 4px 0 0 4px; }
|
||||
.but-group > .but:last-of-type { border-radius: 0 4px 4px 0; }
|
||||
|
||||
/* segmented control (equal-width) */
|
||||
.but-average { display: flex; border-radius: 4px; overflow: hidden; }
|
||||
.but-average.inline { display: inline-flex; }
|
||||
.but-average.radius { border-radius: 100px; }
|
||||
.but-average.main-radius { border-radius: var(--main-radius); }
|
||||
.but-average.mini-radius { border-radius: var(--mini-radius); }
|
||||
.but-average > .but { margin: 0 !important; border-radius: 0; flex: auto; }
|
||||
.but-average > .but.active { --this-bg: var(--focus-color-opacity1); --this-color: var(--focus-color); }
|
||||
|
||||
/* size variants */
|
||||
.but.but-sm { font-size: 0.9em; padding: 0.1em 0.4em; vertical-align: 0.05em; }
|
||||
.but.badg-sm,
|
||||
.badg.badg-sm { font-size: 0.8em; padding: 0 0.2em; vertical-align: 0.1em; min-width: 1.6em; }
|
||||
.badg.badg-sm.cir { --this-size: 1.6em; }
|
||||
.padding-lg,
|
||||
.badg.badg-lg,
|
||||
.but.padding-lg { padding: 0.5em 2em; }
|
||||
|
||||
/* active badge state */
|
||||
.active.badg,
|
||||
.active > .badg:not(.vip-tag) { --this-bg: var(--focus-color); --this-color: #fff; }
|
||||
.active.badg.hollow,
|
||||
.active > .hollow:not(.vip-tag) { --this-color: var(--focus-color); }
|
||||
|
||||
/* toggle-radius (round 29px toggle) — zibll 1:1 */
|
||||
.toggle-radius {
|
||||
background: var(--this-bg);
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
--this-bg: var(--main-border-color);
|
||||
}
|
||||
/* zibll groups these with abs-* : absolute + vertical center; then pin left/right 0 */
|
||||
.toggle-radius .fa,
|
||||
.toggle-radius .icon,
|
||||
.toggle-radius > i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: auto;
|
||||
transform: translateY(-50%);
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* solid color modifiers — set --this-bg; default --this-color white */
|
||||
.b-gray, .b-theme, .b-red, .b-yellow, .b-blue, .b-blue-2, .b-black,
|
||||
.b-cyan, .b-green, .b-purple,
|
||||
.jb-red, .jb-pink, .jb-yellow, .jb-blue, .jb-green, .jb-purple,
|
||||
.jb-vip1, .jb-vip2 {
|
||||
color: var(--this-color);
|
||||
background: var(--this-bg);
|
||||
--this-color: #fff;
|
||||
}
|
||||
.jb-red, .jb-pink, .jb-yellow, .jb-blue, .jb-green, .jb-purple,
|
||||
.jb-vip1, .jb-vip2 { border: none; }
|
||||
|
||||
.b-theme { --this-bg: var(--focus-color); }
|
||||
.b-gray { --this-bg: #818b95; }
|
||||
.b-red { --this-bg: #ff5473; }
|
||||
.b-yellow { --this-bg: #ff6f06; }
|
||||
.b-cyan { --this-bg: #08c4c1; }
|
||||
.b-blue { --this-bg: #2997f7; }
|
||||
.b-blue-2 { --this-bg: #5c7cff; }
|
||||
.b-green { --this-bg: #12b928; }
|
||||
.b-purple { --this-bg: #d448f5; }
|
||||
.b-black { --this-bg: #121517; }
|
||||
|
||||
/* gradient modifiers (zibll .jb-*) */
|
||||
.jb-red { --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); }
|
||||
.jb-yellow { --this-bg: linear-gradient(135deg, #f99d4d 10%, #f7631d 100%); }
|
||||
.jb-blue { --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); }
|
||||
.jb-green { --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); }
|
||||
.jb-purple { --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%); }
|
||||
.jb-pink { --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%); }
|
||||
.jb-vip1 { --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); --this-color: #866127; }
|
||||
.jb-vip2 { --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%); --this-color: #ddd; }
|
||||
|
||||
/* text-color modifiers (zibll .c-*) — set --this-color + light --this-bg */
|
||||
.c-theme, .c-gray, .c-white, .c-red, .c-red-2, .c-yellow, .c-blue, .c-blue-2,
|
||||
.c-green, .c-cyan, .c-purple { color: var(--this-color); }
|
||||
.c-theme { --this-color: var(--focus-color); --this-bg: var(--focus-color-opacity1); }
|
||||
.c-gray { --this-color: #888; --this-bg: rgba(136, 136, 136, 0.1); }
|
||||
.c-white { --this-color: #fff; --this-bg: rgba(255, 255, 255, 0.1); }
|
||||
.c-red { --this-color: #ff5473; --this-bg: rgba(255, 84, 115, 0.1); }
|
||||
.c-red-2 { --this-color: #d6064c; --this-bg: rgba(194, 41, 46, 0.1); }
|
||||
.c-yellow { --this-color: #ff6f06; --this-bg: rgba(255, 111, 6, 0.1); }
|
||||
.c-blue { --this-color: #2997f7; --this-bg: rgba(41, 151, 247, 0.1); }
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* AKSRT Card Primitives — 1:1 Zibll Alignment
|
||||
*
|
||||
* 对齐 zibll 的 .theme-box / .box-bg / .box-body / .box-header：
|
||||
* 阴影优先，无边框，8px 圆角，15px 内边距。
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-theme-box — 完整卡片原语（阴影 + 圆角 + 表面）
|
||||
* 对齐 zibll .theme-box + .box-bg
|
||||
* ============================================================ */
|
||||
.aksrt-theme-box {
|
||||
border: none;
|
||||
border-radius: var(--radius, 8px);
|
||||
background: var(--surface-1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.aksrt-theme-box:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-box-bg — 表面原语（仅背景 + 阴影）
|
||||
* ============================================================ */
|
||||
.aksrt-box-bg {
|
||||
background-color: var(--surface-1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-box-body / .aksrt-box-header — 内边距区段
|
||||
* 对齐 zibll .box-body / .box-header { padding: 15px }
|
||||
* ============================================================ */
|
||||
.aksrt-box-body,
|
||||
.aksrt-box-header {
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
|
||||
.aksrt-box-header {
|
||||
border-bottom: 1px solid var(--color-line-soft);
|
||||
}
|
||||
|
||||
.aksrt-box-header + .aksrt-box-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.aksrt-box-body.notop,
|
||||
.aksrt-box-header.notop { padding-top: 0; }
|
||||
.aksrt-box-body.nobottom,
|
||||
.aksrt-box-header.nobottom { padding-bottom: 0; }
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-muted-box — 柔和背景嵌套
|
||||
* 对齐 zibll .muted-box
|
||||
* ============================================================ */
|
||||
.aksrt-muted-box {
|
||||
background-color: var(--surface-2);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-noshadow — 去除阴影
|
||||
* ============================================================ */
|
||||
.aksrt-noshadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Zibll 兼容别名
|
||||
* ============================================================ */
|
||||
/* Zibll .theme-box is ONLY a spacing utility (margin-bottom: 20px).
|
||||
* Background/shadow live on .main-bg / .main-shadow / .box-bg / .zib-widget.
|
||||
* Do NOT turn every theme-box into a card — article-header also uses it. */
|
||||
.theme-box,
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.box-bg {
|
||||
background-color: var(--main-bg-color, var(--surface-1));
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
}
|
||||
|
||||
.box-body {
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
|
||||
.box-header {
|
||||
padding: var(--card-padding);
|
||||
border-bottom: 1px solid var(--color-line-soft);
|
||||
}
|
||||
|
||||
.box-header + .box-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.radius8 {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.main-shadow {
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
}
|
||||
|
||||
.main-bg {
|
||||
background: var(--main-bg-color, var(--surface-1));
|
||||
}
|
||||
|
||||
.muted-box {
|
||||
background-color: var(--surface-2);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 暗色模式
|
||||
* ============================================================ */
|
||||
html.dark .aksrt-theme-box,
|
||||
body.dark-theme .aksrt-theme-box,
|
||||
html.dark .box-bg,
|
||||
body.dark-theme .box-bg {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
html.dark .aksrt-theme-box:hover,
|
||||
body.dark-theme .aksrt-theme-box:hover {
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.28));
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 卡片 hover 动效
|
||||
* ============================================================ */
|
||||
.aksrt-theme-box {
|
||||
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.aksrt-card-hover:hover,
|
||||
.aksrt-card-hover:focus-within {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.aksrt-card-hover-lg:hover,
|
||||
.aksrt-card-hover-lg:focus-within {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.aksrt-noshadow:hover {
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* .zib-widget — zibll sidebar/widget surface
|
||||
* ============================================================ */
|
||||
.zib-widget {
|
||||
clear: both;
|
||||
background-color: var(--surface-1);
|
||||
padding: var(--card-padding);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: var(--radius, 8px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
/**
|
||||
* AKSRT Color Utilities — 多色按钮 / 渐变按钮 / 文字渐变 / Badge
|
||||
* ------------------------------------------------------------
|
||||
* 所有颜色走 CSS 变量（定义在 tokens.css），不硬编码十六进制。
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* 1. 多色按钮 — .aksrt-btn--{color}
|
||||
* ============================================================ */
|
||||
.aksrt-btn--rose { background: var(--aksrt-rose); color: #fff; }
|
||||
.aksrt-btn--rose:hover,
|
||||
.aksrt-btn--rose:focus-visible { background: #e11d48; }
|
||||
|
||||
.aksrt-btn--blue { background: var(--aksrt-blue); color: #fff; }
|
||||
.aksrt-btn--blue:hover,
|
||||
.aksrt-btn--blue:focus-visible { background: #2563eb; }
|
||||
|
||||
.aksrt-btn--green { background: var(--aksrt-green); color: #fff; }
|
||||
.aksrt-btn--green:hover,
|
||||
.aksrt-btn--green:focus-visible { background: #059669; }
|
||||
|
||||
.aksrt-btn--orange { background: var(--aksrt-orange); color: #fff; }
|
||||
.aksrt-btn--orange:hover,
|
||||
.aksrt-btn--orange:focus-visible { background: #ea580c; }
|
||||
|
||||
.aksrt-btn--purple { background: var(--aksrt-purple); color: #fff; }
|
||||
.aksrt-btn--purple:hover,
|
||||
.aksrt-btn--purple:focus-visible { background: #7c3aed; }
|
||||
|
||||
.aksrt-btn--cyan { background: var(--aksrt-cyan); color: #fff; }
|
||||
.aksrt-btn--cyan:hover,
|
||||
.aksrt-btn--cyan:focus-visible { background: #0891b2; }
|
||||
|
||||
.aksrt-btn--yellow { background: var(--aksrt-yellow); color: #422006; }
|
||||
.aksrt-btn--yellow:hover,
|
||||
.aksrt-btn--yellow:focus-visible { background: #ca8a04; color: #fff; }
|
||||
|
||||
.aksrt-btn--red { background: var(--aksrt-red); color: #fff; }
|
||||
.aksrt-btn--red:hover,
|
||||
.aksrt-btn--red:focus-visible { background: #dc2626; }
|
||||
|
||||
.aksrt-btn--teal { background: var(--aksrt-teal); color: #fff; }
|
||||
.aksrt-btn--teal:hover,
|
||||
.aksrt-btn--teal:focus-visible { background: #0d9488; }
|
||||
|
||||
.aksrt-btn--indigo { background: var(--aksrt-indigo); color: #fff; }
|
||||
.aksrt-btn--indigo:hover,
|
||||
.aksrt-btn--indigo:focus-visible { background: #4f46e5; }
|
||||
|
||||
.aksrt-btn--pink { background: var(--aksrt-pink); color: #fff; }
|
||||
.aksrt-btn--pink:hover,
|
||||
.aksrt-btn--pink:focus-visible { background: #db2777; }
|
||||
|
||||
/* Soft variant — 浅色背景 + 深色文字 */
|
||||
.aksrt-btn--rose-soft { background: var(--aksrt-rose-soft); color: var(--aksrt-rose); }
|
||||
.aksrt-btn--blue-soft { background: var(--aksrt-blue-soft); color: var(--aksrt-blue); }
|
||||
.aksrt-btn--green-soft { background: var(--aksrt-green-soft); color: var(--aksrt-green); }
|
||||
.aksrt-btn--orange-soft { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
|
||||
.aksrt-btn--purple-soft { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
|
||||
.aksrt-btn--cyan-soft { background: var(--aksrt-cyan-soft); color: var(--aksrt-cyan); }
|
||||
.aksrt-btn--yellow-soft { background: var(--aksrt-yellow-soft); color: #92400e; }
|
||||
.aksrt-btn--red-soft { background: var(--aksrt-red-soft); color: var(--aksrt-red); }
|
||||
.aksrt-btn--teal-soft { background: var(--aksrt-teal-soft); color: var(--aksrt-teal); }
|
||||
.aksrt-btn--indigo-soft { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
|
||||
.aksrt-btn--pink-soft { background: var(--aksrt-pink-soft); color: var(--aksrt-pink); }
|
||||
|
||||
/* ============================================================
|
||||
* 2. 渐变按钮 — .aksrt-btn--grad-{name}
|
||||
* ============================================================ */
|
||||
.aksrt-btn--grad-vip {
|
||||
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
||||
color: #5a3d00;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-sunset {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-ocean {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-forest {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
|
||||
color: #064e3b;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-night {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
|
||||
color: #4c1d95;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-fire {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-btn--grad-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
||||
color: var(--color-on-primary);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 渐变按钮 hover — 亮度微调 */
|
||||
.aksrt-btn--grad-vip:hover,
|
||||
.aksrt-btn--grad-sunset:hover,
|
||||
.aksrt-btn--grad-ocean:hover,
|
||||
.aksrt-btn--grad-forest:hover,
|
||||
.aksrt-btn--grad-night:hover,
|
||||
.aksrt-btn--grad-fire:hover,
|
||||
.aksrt-btn--grad-primary:hover {
|
||||
filter: brightness(1.08);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 3. 文字渐变 — .aksrt-text-grad-{name}
|
||||
* ============================================================ */
|
||||
.aksrt-text-grad-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-vip {
|
||||
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-sunset {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-ocean {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-forest {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-night {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.aksrt-text-grad-fire {
|
||||
background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 4. Badge 系统 — .aksrt-badge / .aksrt-badge--{color}
|
||||
* ============================================================ */
|
||||
.aksrt-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--aksrt-badge-h, 22px);
|
||||
padding: 0 8px;
|
||||
border-radius: var(--radius-pill, 100px);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.aksrt-badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.aksrt-badge--success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
|
||||
.aksrt-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
|
||||
.aksrt-badge--error { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }
|
||||
.aksrt-badge--info { background: rgba(59, 130, 246, 0.12); color: var(--color-info); }
|
||||
|
||||
.aksrt-badge--rose { background: var(--aksrt-rose-soft); color: var(--aksrt-rose); }
|
||||
.aksrt-badge--blue { background: var(--aksrt-blue-soft); color: var(--aksrt-blue); }
|
||||
.aksrt-badge--green { background: var(--aksrt-green-soft); color: var(--aksrt-green); }
|
||||
.aksrt-badge--orange { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
|
||||
.aksrt-badge--purple { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
|
||||
.aksrt-badge--cyan { background: var(--aksrt-cyan-soft); color: var(--aksrt-cyan); }
|
||||
.aksrt-badge--yellow { background: var(--aksrt-yellow-soft); color: #92400e; }
|
||||
.aksrt-badge--red { background: var(--aksrt-red-soft); color: var(--aksrt-red); }
|
||||
.aksrt-badge--teal { background: var(--aksrt-teal-soft); color: var(--aksrt-teal); }
|
||||
.aksrt-badge--indigo { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
|
||||
.aksrt-badge--pink { background: var(--aksrt-pink-soft); color: var(--aksrt-pink); }
|
||||
|
||||
/* 渐变 Badge */
|
||||
.aksrt-badge--grad-vip {
|
||||
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
||||
color: #5a3d00;
|
||||
}
|
||||
|
||||
.aksrt-badge--grad-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
/* Solid badge variant — 纯色背景 + 白色文字 */
|
||||
.aksrt-badge--solid-primary { background: var(--color-primary); color: #fff; }
|
||||
.aksrt-badge--solid-success { background: var(--color-success); color: #fff; }
|
||||
.aksrt-badge--solid-warning { background: var(--color-warning); color: #fff; }
|
||||
.aksrt-badge--solid-error { background: var(--color-error); color: #fff; }
|
||||
.aksrt-badge--solid-info { background: var(--color-info); color: #fff; }
|
||||
.aksrt-badge--solid-rose { background: var(--aksrt-rose); color: #fff; }
|
||||
.aksrt-badge--solid-blue { background: var(--aksrt-blue); color: #fff; }
|
||||
.aksrt-badge--solid-green { background: var(--aksrt-green); color: #fff; }
|
||||
.aksrt-badge--solid-orange { background: var(--aksrt-orange); color: #fff; }
|
||||
.aksrt-badge--solid-purple { background: var(--aksrt-purple); color: #fff; }
|
||||
.aksrt-badge--solid-cyan { background: var(--aksrt-cyan); color: #fff; }
|
||||
.aksrt-badge--solid-yellow { background: var(--aksrt-yellow); color: #422006; }
|
||||
.aksrt-badge--solid-red { background: var(--aksrt-red); color: #fff; }
|
||||
.aksrt-badge--solid-teal { background: var(--aksrt-teal); color: #fff; }
|
||||
.aksrt-badge--solid-indigo { background: var(--aksrt-indigo); color: #fff; }
|
||||
.aksrt-badge--solid-pink { background: var(--aksrt-pink); color: #fff; }
|
||||
|
||||
/* Badge sizes */
|
||||
.aksrt-badge--sm { height: 18px; padding: 0 6px; font-size: 11px; }
|
||||
.aksrt-badge--lg { height: 28px; padding: 0 12px; font-size: 13px; }
|
||||
|
||||
/* ============================================================
|
||||
* 5. 背景色工具类 — .aksrt-bg-{color}
|
||||
* ============================================================ */
|
||||
.aksrt-bg-rose { background-color: var(--aksrt-rose-soft); }
|
||||
.aksrt-bg-blue { background-color: var(--aksrt-blue-soft); }
|
||||
.aksrt-bg-green { background-color: var(--aksrt-green-soft); }
|
||||
.aksrt-bg-orange { background-color: var(--aksrt-orange-soft); }
|
||||
.aksrt-bg-purple { background-color: var(--aksrt-purple-soft); }
|
||||
.aksrt-bg-cyan { background-color: var(--aksrt-cyan-soft); }
|
||||
.aksrt-bg-yellow { background-color: var(--aksrt-yellow-soft); }
|
||||
.aksrt-bg-red { background-color: var(--aksrt-red-soft); }
|
||||
.aksrt-bg-teal { background-color: var(--aksrt-teal-soft); }
|
||||
.aksrt-bg-indigo { background-color: var(--aksrt-indigo-soft); }
|
||||
.aksrt-bg-pink { background-color: var(--aksrt-pink-soft); }
|
||||
|
||||
/* ============================================================
|
||||
* 6. 文字色工具类 — .aksrt-text-{color}
|
||||
* ============================================================ */
|
||||
.aksrt-text-rose { color: var(--aksrt-rose); }
|
||||
.aksrt-text-blue { color: var(--aksrt-blue); }
|
||||
.aksrt-text-green { color: var(--aksrt-green); }
|
||||
.aksrt-text-orange { color: var(--aksrt-orange); }
|
||||
.aksrt-text-purple { color: var(--aksrt-purple); }
|
||||
.aksrt-text-cyan { color: var(--aksrt-cyan); }
|
||||
.aksrt-text-yellow { color: var(--aksrt-yellow); }
|
||||
.aksrt-text-red { color: var(--aksrt-red); }
|
||||
.aksrt-text-teal { color: var(--aksrt-teal); }
|
||||
.aksrt-text-indigo { color: var(--aksrt-indigo); }
|
||||
.aksrt-text-pink { color: var(--aksrt-pink); }
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
/* AKSRT comments aggregator */
|
||||
@import url("./comments/shell.css");
|
||||
@import url("./comments/mobile-item.css");
|
||||
@import url("./comment-tools.css");
|
||||
|
||||
@@ -0,0 +1,487 @@
|
||||
/**
|
||||
* AKSRT Extended Components — 时间轴 / 步骤向导 / 九宫格 / 定价卡片 /
|
||||
* Toggle 开关 / 自定义复选框 / 数字步进器
|
||||
* ------------------------------------------------------------
|
||||
* 全部使用 aksrt- 前缀，保持原生语义可访问性。
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* 1. 时间轴 — .aksrt-timeline
|
||||
* ============================================================ */
|
||||
.aksrt-timeline {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 竖线 */
|
||||
.aksrt-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--color-line, rgba(50, 50, 50, 0.1));
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.aksrt-timeline__item {
|
||||
position: relative;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.aksrt-timeline__item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* 圆点 */
|
||||
.aksrt-timeline__dot {
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
top: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--surface-1, #fff);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-soft, rgba(240, 68, 148, 0.12));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 空心圆点变体 */
|
||||
.aksrt-timeline__dot--outline {
|
||||
background: var(--surface-1, #fff);
|
||||
border: 2px solid var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 灰色圆点 — 已完成/已过去 */
|
||||
.aksrt-timeline__dot--muted {
|
||||
background: var(--color-ink-4, #999);
|
||||
box-shadow: 0 0 0 2px var(--surface-2, #eee);
|
||||
}
|
||||
|
||||
.aksrt-timeline__time {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4, #999);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.aksrt-timeline__title {
|
||||
font-weight: 600;
|
||||
color: var(--color-ink, #333);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.aksrt-timeline__content {
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-3, #777);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 2. 步骤向导 — .aksrt-steps
|
||||
* ============================================================ */
|
||||
.aksrt-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
counter-reset: aksrt-step;
|
||||
}
|
||||
|
||||
.aksrt-steps__item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
counter-increment: aksrt-step;
|
||||
}
|
||||
|
||||
/* 连接线 */
|
||||
.aksrt-steps__item:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: calc(50% + 20px);
|
||||
right: calc(-50% + 20px);
|
||||
height: 2px;
|
||||
background: var(--color-line, rgba(50, 50, 50, 0.1));
|
||||
}
|
||||
|
||||
.aksrt-steps__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-2, #eee);
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 0 auto 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aksrt-steps__item--active .aksrt-steps__icon {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary, #fff);
|
||||
}
|
||||
|
||||
.aksrt-steps__item--done .aksrt-steps__icon {
|
||||
background: var(--color-success);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-steps__item--done:not(:last-child)::after {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.aksrt-steps__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink-3, #777);
|
||||
}
|
||||
|
||||
.aksrt-steps__item--active .aksrt-steps__label {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-steps__item--done .aksrt-steps__label {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
/* 垂直模式 */
|
||||
.aksrt-steps--vertical {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.aksrt-steps--vertical .aksrt-steps__item {
|
||||
text-align: left;
|
||||
padding-left: 28px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-steps--vertical .aksrt-steps__item:not(:last-child)::after {
|
||||
top: 34px;
|
||||
left: 36px;
|
||||
right: auto;
|
||||
width: 2px;
|
||||
height: calc(100% - 34px);
|
||||
}
|
||||
|
||||
.aksrt-steps--vertical .aksrt-steps__icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 3. 九宫格 — .aksrt-img-grid
|
||||
* ============================================================ */
|
||||
.aksrt-img-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
border-radius: var(--radius, 8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aksrt-img-grid img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.aksrt-img-grid img:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* 自适应列数 */
|
||||
.aksrt-img-grid--2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.aksrt-img-grid--4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.aksrt-img-grid--4 { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 5. Toggle 开关 — .aksrt-toggle (纯 CSS + :checked)
|
||||
* 保持原生 <input> 可访问性
|
||||
* ============================================================ */
|
||||
.aksrt-toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-toggle__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-toggle__track {
|
||||
position: relative;
|
||||
width: var(--aksrt-toggle-w, 44px);
|
||||
height: var(--aksrt-toggle-h, 24px);
|
||||
background: var(--surface-3, #e8e8e8);
|
||||
border-radius: var(--aksrt-toggle-h, 24px);
|
||||
transition: background .2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aksrt-toggle__track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: calc(var(--aksrt-toggle-h, 24px) - 4px);
|
||||
height: calc(var(--aksrt-toggle-h, 24px) - 4px);
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.aksrt-toggle__input:checked + .aksrt-toggle__track {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-toggle__input:checked + .aksrt-toggle__track::after {
|
||||
transform: translateX(calc(var(--aksrt-toggle-w, 44px) - var(--aksrt-toggle-h, 24px)));
|
||||
}
|
||||
|
||||
/* Focus-visible */
|
||||
.aksrt-toggle__input:focus-visible + .aksrt-toggle__track {
|
||||
box-shadow: var(--focus-ring, 0 0 2px 3px rgba(253, 83, 161, 0.4));
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.aksrt-toggle__input:disabled + .aksrt-toggle__track {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aksrt-toggle__label {
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 6. 自定义复选框 — .aksrt-checkbox (纯 CSS + :checked)
|
||||
* 保持原生 <input type="checkbox"> 可访问性
|
||||
* ============================================================ */
|
||||
.aksrt-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.aksrt-checkbox__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-checkbox__box {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--color-line, rgba(50, 50, 50, 0.15));
|
||||
border-radius: 4px;
|
||||
background: var(--surface-1, #fff);
|
||||
transition: background .15s ease, border-color .15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 打勾 SVG */
|
||||
.aksrt-checkbox__box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
transform: rotate(45deg) scale(0);
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
|
||||
.aksrt-checkbox__input:checked + .aksrt-checkbox__box {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-checkbox__input:checked + .aksrt-checkbox__box::after {
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
|
||||
.aksrt-checkbox__input:focus-visible + .aksrt-checkbox__box {
|
||||
box-shadow: var(--focus-ring, 0 0 2px 3px rgba(253, 83, 161, 0.4));
|
||||
}
|
||||
|
||||
.aksrt-checkbox__input:disabled + .aksrt-checkbox__box {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aksrt-checkbox__label {
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 7. 数字步进器 — .aksrt-stepper
|
||||
* ============================================================ */
|
||||
.aksrt-stepper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.1));
|
||||
border-radius: var(--radius, 8px);
|
||||
overflow: hidden;
|
||||
height: var(--aksrt-stepper-h, 36px);
|
||||
}
|
||||
|
||||
.aksrt-stepper__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--aksrt-stepper-h, 36px);
|
||||
height: 100%;
|
||||
background: var(--surface-2, #eee);
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: background .15s ease, color .15s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.aksrt-stepper__btn:hover {
|
||||
background: var(--surface-3, #e8e8e8);
|
||||
color: var(--color-ink, #333);
|
||||
}
|
||||
|
||||
.aksrt-stepper__btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aksrt-stepper__input {
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink, #333);
|
||||
background: var(--surface-1, #fff);
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.aksrt-stepper__input::-webkit-outer-spin-button,
|
||||
.aksrt-stepper__input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aksrt-stepper__input:focus {
|
||||
outline: none;
|
||||
background: var(--color-primary-softer, rgba(240, 68, 148, 0.05));
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 8. 头像尺寸变量系统 — .aksrt-avatar--{size}
|
||||
* ============================================================ */
|
||||
.aksrt-avatar--xs { width: var(--aksrt-avatar-size-xs); height: var(--aksrt-avatar-size-xs); }
|
||||
.aksrt-avatar--sm { width: var(--aksrt-avatar-size-sm); height: var(--aksrt-avatar-size-sm); }
|
||||
.aksrt-avatar { width: var(--aksrt-avatar-size); height: var(--aksrt-avatar-size); }
|
||||
.aksrt-avatar--lg { width: var(--aksrt-avatar-size-lg); height: var(--aksrt-avatar-size-lg); }
|
||||
.aksrt-avatar--xl { width: var(--aksrt-avatar-size-xl); height: var(--aksrt-avatar-size-xl); }
|
||||
|
||||
/* ============================================================
|
||||
* 9. 涟漪点击效果 — .aksrt-ripple
|
||||
* 容器加此类，点击时 JS 注入 span.aksrt-ripple__wave
|
||||
* ============================================================ */
|
||||
.aksrt-ripple {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aksrt-ripple__wave {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
transform: scale(0);
|
||||
animation: aksrtRippleWave .6s ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes aksrtRippleWave {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Runtime broad ripple (.aksrt-wave injected into .but/.btn).
|
||||
* MUST stay out of flow — missing absolute made header CTA grow on click. */
|
||||
.aksrt-wave {
|
||||
position: absolute !important;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
pointer-events: none !important;
|
||||
z-index: 1;
|
||||
transform: scale(0);
|
||||
animation: aksrtWaveRipple 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes aksrtWaveRipple {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nowave {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 10. 模态框堆叠动画 — 父模态缩小
|
||||
* ============================================================ */
|
||||
.modal-stacked .modal-dialog {
|
||||
transition: transform .25s var(--ease, ease), filter .25s ease;
|
||||
}
|
||||
|
||||
.modal-stacked .modal-dialog.modal-behind {
|
||||
transform: scale(0.92);
|
||||
filter: brightness(0.85);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
/* ========== 空状态 — 对齐 zibll empty state ========== */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--color-ink-3, #777);
|
||||
}
|
||||
|
||||
.empty-state__icon {
|
||||
font-size: 56px;
|
||||
color: var(--surface-3, #e8e8e8);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.empty-state__icon i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.empty-state__title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state__desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-4, #999);
|
||||
margin-bottom: 20px;
|
||||
max-width: 320px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-state__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 空状态变体 */
|
||||
.empty-state--sm {
|
||||
padding: 30px 16px;
|
||||
}
|
||||
|
||||
.empty-state--sm .empty-state__icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.empty-state--sm .empty-state__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state--sm .empty-state__desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 评论空状态 */
|
||||
.comments-empty {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.comments-empty__icon {
|
||||
font-size: 48px;
|
||||
color: var(--surface-3, #e8e8e8);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.comments-empty__text {
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-3, #777);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.comments-empty__hint {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4, #999);
|
||||
}
|
||||
|
||||
/* 搜索空状态 */
|
||||
.search-empty {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.search-empty__icon {
|
||||
font-size: 64px;
|
||||
color: var(--surface-3, #e8e8e8);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-empty__title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-empty__suggestions {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-4, #999);
|
||||
}
|
||||
|
||||
.search-empty__suggestions a {
|
||||
color: var(--color-primary, #f04494);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search-empty__suggestions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 767px) {
|
||||
.empty-state {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.empty-state__icon {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
@import url("enhancements/core-ui.css");
|
||||
@import url("enhancements/components.css");
|
||||
@import url("enhancements/modal-motion.css");
|
||||
|
||||
@@ -0,0 +1,405 @@
|
||||
/* ============================================================
|
||||
* Floating Buttons
|
||||
* ============================================================ */
|
||||
|
||||
.float-right {
|
||||
--float-btn-size: 42px;
|
||||
--float-btn-spacing: 8px;
|
||||
--float-btn-opacity: 1;
|
||||
--float-btn-color: var(--color-ink-3);
|
||||
--float-btn-bg: transparent;
|
||||
--float-btn-active-color: var(--color-primary);
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 96px;
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--float-btn-spacing, 8px);
|
||||
opacity: var(--float-btn-opacity, 1);
|
||||
transition: transform var(--dur, 0.25s) var(--ease, ease), opacity var(--dur, 0.25s) var(--ease, ease);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
.float-right.no-shadow .float-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.float-right.no-animation .float-btn {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.float-right.no-animation .float-btn:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.float-right.position-center {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.float-right.square {
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg, 8px);
|
||||
box-shadow: var(--shadow-md, 0 10px 30px rgba(17, 24, 39, 0.12));
|
||||
}
|
||||
|
||||
.float-right .float-btn {
|
||||
width: var(--float-btn-size);
|
||||
min-height: var(--float-btn-size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
color: var(--this-color, var(--float-btn-color));
|
||||
background: var(--this-bg, var(--float-btn-bg));
|
||||
border: 1px solid var(--color-line-soft, #f0f1f3);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--shadow, 0 8px 24px rgba(17, 24, 39, 0.08));
|
||||
transition: transform var(--dur-fast, 0.15s) var(--ease, ease), box-shadow var(--dur-fast, 0.15s) var(--ease, ease), color var(--dur-fast, 0.15s) var(--ease, ease), background var(--dur-fast, 0.15s) var(--ease, ease);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.float-right.round .float-btn {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.float-right.square .float-btn {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.float-right.square .float-btn:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.float-right .float-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
color: var(--float-btn-active-color, var(--color-primary));
|
||||
text-decoration: none;
|
||||
box-shadow: var(--shadow-md, 0 10px 30px rgba(17, 24, 39, 0.12));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.float-right .float-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.float-right .float-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.float-right .float-btn.is-rippling::after {
|
||||
animation: float-btn-ripple 0.55s ease-out;
|
||||
}
|
||||
|
||||
.float-right .float-btn i {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.float-right .float-btn.ontop {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.float-right .float-btn.ontop.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.float-right.has-blur-pc .float-btn {
|
||||
backdrop-filter: saturate(1.5) blur(10px);
|
||||
-webkit-backdrop-filter: saturate(1.5) blur(10px);
|
||||
}
|
||||
|
||||
.float-right .hover-show-con {
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: calc(100% + 12px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
min-width: 180px;
|
||||
max-width: 280px;
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-lg, 8px);
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line);
|
||||
box-shadow: var(--shadow-lg, 0 18px 40px rgba(17, 24, 39, 0.18));
|
||||
color: var(--color-ink-2);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--dur-fast, 0.15s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease, ease), visibility var(--dur-fast, 0.15s) var(--ease, ease);
|
||||
}
|
||||
|
||||
.float-right .hover-show-con::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
border-top: 1px solid var(--color-line);
|
||||
border-right: 1px solid var(--color-line);
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.float-right .hover-show-con img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
height: auto;
|
||||
margin: 0 auto 10px;
|
||||
border-radius: var(--radius, 10px);
|
||||
}
|
||||
|
||||
.float-right .hover-show-con p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-ink-3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.float-btn-qrcode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
margin: 0 auto 10px;
|
||||
background: #fff;
|
||||
border-radius: var(--radius, 10px);
|
||||
}
|
||||
|
||||
.float-right .service-wechat .hover-show-con,
|
||||
.float-right .service-qq .hover-show-con,
|
||||
.float-right .qrcode-btn .hover-show-con {
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Page QR hover card: keep title/caption centered under the code */
|
||||
.float-right .qrcode-btn .hover-show-con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.float-right .qrcode-btn .hover-show-con p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.float-right .qrcode-btn .hover-show-con .float-btn-qrcode__title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
|
||||
.float-right .service-wechat .hover-show-con img,
|
||||
.float-right .service-qq .hover-show-con img {
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
|
||||
}
|
||||
|
||||
.float-right .service-wechat .hover-show-con p,
|
||||
.float-right .service-qq .hover-show-con p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.float-right .newadd-btns .hover-show-con {
|
||||
min-width: 196px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.float-add-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.float-add-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--color-ink-2);
|
||||
text-decoration: none;
|
||||
transition: background var(--dur-fast, 0.15s) var(--ease, ease), color var(--dur-fast, 0.15s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease, ease);
|
||||
}
|
||||
|
||||
.float-add-menu__item i {
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
.float-add-menu__item:hover {
|
||||
background: var(--color-primary-soft, rgba(240, 68, 148, 0.1));
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.float-btn-qrcode :deep(canvas),
|
||||
.float-btn-qrcode :deep(img),
|
||||
.float-btn-qrcode svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.float-right .float-btn:hover .hover-show-con,
|
||||
.float-right .float-btn:focus-visible .hover-show-con {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateY(-50%) translateX(-4px);
|
||||
}
|
||||
|
||||
.float-right.scrolling-hide.is-hidden,
|
||||
.float-right.scroll-down-hide.is-hidden {
|
||||
transform: translateX(calc(100% + 24px));
|
||||
}
|
||||
|
||||
.float-right.position-center.scrolling-hide.is-hidden,
|
||||
.float-right.position-center.scroll-down-hide.is-hidden {
|
||||
transform: translateX(calc(100% + 24px)) translateY(-50%);
|
||||
}
|
||||
|
||||
.float-right__html {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.float-right__html a {
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
.float-right__html a:hover {
|
||||
color: var(--color-primary-hover, #7099CC);
|
||||
}
|
||||
|
||||
@keyframes float-btn-ripple {
|
||||
0% {
|
||||
opacity: 0.22;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(14);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Theme float glyph: light → moon, dark → sun.
|
||||
* Match nav toggle + theme.js contract. Class-driven only.
|
||||
*/
|
||||
.float-right .float-btn__icon-sun {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.float-right .float-btn__icon-moon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
html.dark .float-right .float-btn__icon-moon,
|
||||
body.theme-dark .float-right .float-btn__icon-moon,
|
||||
body.dark-theme .float-right .float-btn__icon-moon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.dark .float-right .float-btn__icon-sun,
|
||||
body.theme-dark .float-right .float-btn__icon-sun,
|
||||
body.dark-theme .float-right .float-btn__icon-sun {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* VIP float rail entry */
|
||||
.float-right .float-btn.pay-vip {
|
||||
color: var(--this-color, #f5a623);
|
||||
}
|
||||
|
||||
.float-right .float-btn.pay-vip:hover {
|
||||
color: var(--this-color, #f5a623);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.float-right .float-btn.signin-loader {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Dark: solid surface + brighter icon so transparent btn doesn't vanish */
|
||||
html.dark .float-right,
|
||||
body.theme-dark .float-right,
|
||||
body.dark-theme .float-right {
|
||||
--float-btn-color: var(--color-ink-2, #e5eef7);
|
||||
--float-btn-bg: var(--surface-1, #323335);
|
||||
}
|
||||
|
||||
html.dark .float-right .float-btn,
|
||||
body.theme-dark .float-right .float-btn,
|
||||
body.dark-theme .float-right .float-btn {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
color: var(--this-color, var(--float-btn-color));
|
||||
background: var(--this-bg, var(--float-btn-bg));
|
||||
}
|
||||
|
||||
html.dark .float-right .hover-show-con,
|
||||
body.theme-dark .float-right .hover-show-con,
|
||||
body.dark-theme .float-right .hover-show-con {
|
||||
background: var(--surface-2, #1f2430);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.float-right {
|
||||
right: 12px;
|
||||
bottom: 84px;
|
||||
--float-btn-size: 40px;
|
||||
}
|
||||
|
||||
.float-right.has-blur-mobile .float-btn {
|
||||
backdrop-filter: saturate(1.5) blur(10px);
|
||||
-webkit-backdrop-filter: saturate(1.5) blur(10px);
|
||||
}
|
||||
|
||||
.float-right .hover-show-con {
|
||||
max-width: min(240px, calc(100vw - 84px));
|
||||
}
|
||||
|
||||
.float-right .float-btn.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.float-right .float-btn.hide-on-pc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
@import url("footer/part-1.css");
|
||||
@import url("footer/part-2.css");
|
||||
@import url("footer/part-3.css");
|
||||
@import url("footer/part-4.css");
|
||||
@import url("footer/zibll-shell.css");
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* AKSRT Forms — 1:1 Zibll Alignment
|
||||
*
|
||||
* 对齐 zibll .form-control：
|
||||
* - 灰色背景 (#f5f6f7)
|
||||
* - 透明边框
|
||||
* - 34px 高度
|
||||
* - 8px 圆角
|
||||
* - focus 时粉色边框 + 光晕
|
||||
*/
|
||||
|
||||
/* ===== Field Wrapper ===== */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* ===== Input / Textarea / Select — 对齐 zibll .form-control ===== */
|
||||
.input,
|
||||
.textarea,
|
||||
.select,
|
||||
input[type="text"].form-input,
|
||||
input[type="email"].form-input,
|
||||
input[type="password"].form-input,
|
||||
input[type="search"].form-input,
|
||||
input[type="url"].form-input,
|
||||
input[type="tel"].form-input,
|
||||
textarea.form-textarea,
|
||||
select.form-select {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-page);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
transition: border-color var(--dur-fast) var(--ease),
|
||||
box-shadow var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
.textarea,
|
||||
textarea.form-textarea {
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
padding: 12px;
|
||||
line-height: var(--leading-snug);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input:hover,
|
||||
.textarea:hover,
|
||||
.select:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.textarea:focus,
|
||||
.select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||||
}
|
||||
|
||||
.input::placeholder,
|
||||
.textarea::placeholder {
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
/* ===== Select ===== */
|
||||
.select,
|
||||
select.form-select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
/* ===== Checkbox / Radio ===== */
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
.checkbox input,
|
||||
.radio input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===== Input Group ===== */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.input-group .input {
|
||||
border-radius: var(--radius) 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.input-group .btn {
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
/* ===== Form Layout ===== */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
.aksrt-widget {
|
||||
--aksrt-widget-bg-light: transparent;
|
||||
--aksrt-widget-bg-dark: transparent;
|
||||
--aksrt-widget-radius: var(--main-radius, 8px);
|
||||
margin: var(--aksrt-widget-space-top, 0) var(--aksrt-widget-space-right, 0) var(--aksrt-widget-space-bottom, 20px) var(--aksrt-widget-space-left, 0);
|
||||
background-color: var(--aksrt-widget-bg-light);
|
||||
background-image: var(--aksrt-widget-bg-image-light, none);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--theme-color, #2d2d35);
|
||||
}
|
||||
.aksrt-widget.zib-widget {
|
||||
clear: both;
|
||||
padding: 15px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
background-color: var(--main-bg-color, #fff);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, .08));
|
||||
}
|
||||
.aksrt-widget__inner.container { position: relative; }
|
||||
.dark-theme .aksrt-widget,
|
||||
[data-theme="dark"] .aksrt-widget { background-color: var(--aksrt-widget-bg-dark); background-image: var(--aksrt-widget-bg-image-dark, none); color: #e7e7ea; }
|
||||
.aksrt-widget *, .aksrt-widget *::before, .aksrt-widget *::after { box-sizing: border-box; }
|
||||
.aksrt-widget img, .aksrt-widget video { max-width: 100%; }
|
||||
.aksrt-widget a { text-decoration: none; }
|
||||
.aksrt-widget button, .aksrt-widget input { font: inherit; }
|
||||
.aksrt-widget :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus-color, #ff5473) !important; outline-offset: 3px; }
|
||||
.dark-theme .aksrt-widget :where(a, button, input, select, textarea, [tabindex]):focus-visible,
|
||||
[data-theme="dark"] .aksrt-widget :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: #ffd166 !important; }
|
||||
.aksrt-widget__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
|
||||
.aksrt-widget__header--big { display: block; text-align: center; margin-bottom: 30px; }
|
||||
.aksrt-widget__title { position: relative; margin: 0; padding-bottom: 8px; font-size: 15px; line-height: 1.35; font-weight: 700; }
|
||||
.aksrt-widget__title::before { position:absolute; bottom:3px; left:0; width:40px; height:3px; border-radius:5px; background:var(--theme-color,var(--focus-color,#ff5473)); box-shadow:1px 1px 3px -1px var(--theme-color,var(--focus-color,#ff5473)); content:""; }
|
||||
.aksrt-widget__header--big .aksrt-widget__title { padding:0; font-size: clamp(28px, 4vw, 42px); }
|
||||
.aksrt-widget__header--big .aksrt-widget__title::before { content:none; }
|
||||
.aksrt-widget__title mark { padding: 0; background: transparent; color: var(--focus-color, #ff5473); }
|
||||
.aksrt-widget__subtitle { margin: 7px 0 0; color: var(--muted-color, #8a8c98); }
|
||||
.aksrt-widget__title-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
||||
.aksrt-widget__title-links a { padding: 5px 11px; border-radius: 4px; background: var(--muted-border-color, #f2f3f5); color:var(--muted-color,#777); font-size: 13px; }
|
||||
.dark-theme .aksrt-widget__title-links a, [data-theme="dark"] .aksrt-widget__title-links a { background: #292a30; }
|
||||
.aksrt-widget-grid { display: grid; grid-template-columns: repeat(var(--aksrt-cols, 3), minmax(0, 1fr)); gap: 15px; }
|
||||
.aksrt-widget__empty, .aksrt-widget-request-error { padding: 28px 18px; border: 1px dashed rgba(127,127,127,.25); border-radius: var(--aksrt-widget-radius); color: var(--muted-color, #8a8c98); text-align: center; }
|
||||
.aksrt-widget-request-error button { margin-left: 10px; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; }
|
||||
.aksrt-widget--affix { position: sticky; top: 76px; }
|
||||
.aksrt-widget--only-mobile { display: none; }
|
||||
|
||||
.aksrt-widget-search { display: flex; min-height: 42px; padding: 4px; border: 1px solid var(--main-border-color,rgba(127,127,127,.18)); border-radius: var(--main-radius,8px); background: var(--main-bg-color, #fff); }
|
||||
.aksrt-widget-search label { flex: 1; display: flex; }
|
||||
.aksrt-widget-search input { width: 100%; padding: 8px 12px; border: 0; outline: 0; background: transparent; color: inherit; }
|
||||
.aksrt-widget-search button { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: var(--mini-radius,4px); background: var(--focus-color, #ff5473); color: #fff; cursor: pointer; }
|
||||
.aksrt-widget-search--compact button span { display: none; }
|
||||
.aksrt-widget-search--large { min-height: 58px; border-radius: 14px; }
|
||||
|
||||
.aksrt-widget-toc { padding: 0; background: transparent; }
|
||||
.aksrt-widget-toc__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
|
||||
.aksrt-widget-toc__list { margin: 14px 0 0; padding-left: 20px; max-height: 55vh; overflow: auto; }
|
||||
.aksrt-widget-toc__list li { margin: 7px 0; color: var(--muted-color, #737582); }
|
||||
.aksrt-widget-toc__list .level-h3 { padding-left: 12px; font-size: 14px; }
|
||||
.aksrt-widget-toc__list .level-h4 { padding-left: 24px; font-size: 13px; }
|
||||
.aksrt-widget-toc.is-collapsed .aksrt-widget-toc__list { display: none; }
|
||||
|
||||
.aksrt-widget-quote { position: relative; min-height: 130px; margin: 0; padding: 24px 48px 24px 25px; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: linear-gradient(135deg, #6772e5, #8b5cf6); color: #fff; }
|
||||
.aksrt-widget-quote > i { opacity: .35; font-size: 26px; }
|
||||
.aksrt-widget-quote blockquote { margin: 12px 0 0; font-size: 16px; line-height: 1.8; }
|
||||
.aksrt-widget-quote button { position: absolute; right: 13px; bottom: 13px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; }
|
||||
|
||||
.aksrt-widget-icon-card { min-height: 130px; max-width:280px; margin-right:auto; margin-left:auto; padding: 20px; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color, #fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); transition: box-shadow .2s; }
|
||||
.aksrt-widget-icon-card:hover { box-shadow: 0 0 10px rgba(116,116,116,.14); }
|
||||
.aksrt-widget-icon-card { display: flex; flex-direction: column; gap: 12px; text-align: center; }
|
||||
.aksrt-widget-icon-cards--cover .aksrt-widget-icon-card { flex-direction: row; align-items: center; text-align: left; }
|
||||
.aksrt-widget-icon-card > i { font-size: 34px; color: var(--focus-color, #ff5473); transition:transform .3s; }
|
||||
.aksrt-widget-icon-card:hover > i { transform:scale(1.05); }
|
||||
.aksrt-widget-icon-card span { display: flex; flex-direction: column; gap: 5px; }
|
||||
.aksrt-widget-icon-card small { color: var(--muted-color, #8a8c98); }
|
||||
|
||||
.aksrt-widget-video { position: relative; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #000; aspect-ratio: 16 / 9; }
|
||||
.aksrt-widget-video--4-3 { aspect-ratio: 4 / 3; }.aksrt-widget-video--1-1 { aspect-ratio: 1; }.aksrt-widget-video--auto { aspect-ratio: auto; }
|
||||
.aksrt-widget-video video, .aksrt-widget-video__player, .aksrt-widget-video .dplayer { width: 100%; height: 100%; }
|
||||
.aksrt-widget-media-error { position: absolute; inset: auto 15px 15px; color: #fff; }
|
||||
.aksrt-widget-embed { position: relative; height: 0; padding-bottom: var(--aksrt-embed-ratio, 56.25%); overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #111; }
|
||||
.aksrt-widget-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
|
||||
|
||||
.aksrt-media-card { position: relative; display: block; overflow: hidden; min-height: 180px; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color, #fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }
|
||||
.aksrt-media-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eceef2; }
|
||||
.aksrt-media-card__media img, .aksrt-media-card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
|
||||
.aksrt-media-card:hover .aksrt-media-card__media img { transform: scale(1.04); }
|
||||
.aksrt-media-card__image--dark { display: none; }
|
||||
.dark-theme .aksrt-media-card__image--dark, [data-theme="dark"] .aksrt-media-card__image--dark { display: block; }
|
||||
.dark-theme .aksrt-media-card__image--dark ~ .aksrt-media-card__image, [data-theme="dark"] .aksrt-media-card__image--dark ~ .aksrt-media-card__image { display: none; }
|
||||
.aksrt-media-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
|
||||
.aksrt-media-card__body small { color: var(--muted-color, #8a8c98); }
|
||||
.aksrt-widget-partners { overflow: hidden; padding: 5px 0; }
|
||||
.aksrt-widget-partners__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--aksrt-partner-rows), 76px); grid-auto-columns: 210px; gap: 12px; width: max-content; animation: aksrt-partners var(--aksrt-partner-speed) linear infinite; }
|
||||
.aksrt-widget-partners:hover .aksrt-widget-partners__track { animation-play-state: paused; }
|
||||
.aksrt-widget-partners .aksrt-media-card { display: flex; min-height: 76px; align-items: center; }
|
||||
.aksrt-widget-partners .aksrt-media-card__media { width: 64px; aspect-ratio: 1; margin-left: 8px; border-radius: 9px; }
|
||||
.aksrt-widget-partners .aksrt-media-card__body { padding: 10px; }
|
||||
@keyframes aksrt-partners { to { transform: translateX(-50%); } }
|
||||
.aksrt-combo-card { overflow: hidden; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }
|
||||
.aksrt-combo-card .aksrt-media-card { box-shadow: none; }
|
||||
.aksrt-combo-card__tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 16px; }
|
||||
.aksrt-combo-card__tags span { padding: 3px 8px; border-radius: 999px; background: rgba(127,127,127,.1); font-size: 12px; }
|
||||
|
||||
.aksrt-widget-text-title { padding: 18px 0; }.aksrt-widget-text-title.is-center { text-align: center; }.aksrt-widget-text-title.is-right { text-align: right; }
|
||||
.aksrt-widget-text-title h2 { margin: 0; font-size: clamp(26px,4vw,44px); line-height: 1.25; }.aksrt-widget-text-title p { margin: 12px 0 0; color: var(--muted-color,#8a8c98); line-height: 1.8; }
|
||||
.aksrt-widget-buttons { display: flex; flex-wrap: wrap; gap: var(--aksrt-button-gap,10px); }.aksrt-widget-buttons.is-center { justify-content: center; }.aksrt-widget-buttons.is-right { justify-content: flex-end; }
|
||||
.aksrt-widget-button { display: inline-flex; min-height: 40px; padding: 9px 18px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; background: var(--focus-color,#ff5473); color: #fff !important; font-weight: 600; cursor: pointer; transition: filter .2s, transform .2s; }
|
||||
.aksrt-widget-button:hover { filter: brightness(1.07); transform: translateY(-1px); }.aksrt-widget-button.is-ghost { background: rgba(127,127,127,.12); color: inherit !important; }
|
||||
.aksrt-widget-gap { height: var(--aksrt-gap); }
|
||||
.aksrt-widget-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }.aksrt-widget-tag-cloud a { padding: 6px 11px; border-radius: 6px; background: rgba(127,127,127,.1); font-size: 13px; transition: background .2s,color .2s; }.aksrt-widget-tag-cloud a:hover { background: var(--focus-color,#ff5473); color: #fff; }.aksrt-widget-tag-cloud small { margin-left: 5px; opacity: .65; }
|
||||
.aksrt-widget-comments { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }.aksrt-widget-comments li { display: flex; gap: 11px; }.aksrt-widget-comments__avatar img { width: 42px; height: 42px; border-radius: 50%; }.aksrt-widget-comments p { margin: 3px 0; color: var(--muted-color,#8a8c98); font-size: 13px; line-height: 1.55; }.aksrt-widget-comments__source { font-size: 12px; opacity: .65; }
|
||||
.aksrt-widget-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.aksrt-widget-links a { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: var(--main-radius,8px); background: var(--muted-border-color,#f2f3f5); color:var(--key-color,#333); }.aksrt-widget-links small { color: var(--muted-color,#8a8c98); }.aksrt-widget-links--simple { display: flex; flex-wrap: wrap; }.aksrt-widget-links--simple a { padding: 5px 9px; box-shadow: none; background: transparent; }
|
||||
.aksrt-widget-notice { display: flex; height: 48px; align-items: center; gap: 12px; padding: 0 15px; overflow: hidden; border-radius: var(--main-radius,8px); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-widget-notice .swiper { height: 48px; flex: 1; }.aksrt-widget-notice .swiper-slide, .aksrt-widget-notice .swiper-slide a { display: flex; height: 48px; align-items: center; gap: 10px; }.aksrt-widget-notice .swiper-slide span { overflow: hidden; color: var(--muted-color,#8a8c98); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.aksrt-widget-swiper { position: relative; }.aksrt-widget-swiper__pause { position: absolute; z-index: 6; top: 10px; right: 10px; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(20,21,27,.72); color: #fff; cursor: pointer; }.aksrt-widget-notice .aksrt-widget-swiper__pause { top: 7px; right: 4px; width: 30px; height: 30px; }
|
||||
|
||||
.aksrt-term-card { display: block; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-term-card__media { display: block; aspect-ratio: 16/9; background: var(--muted-border-color,#eee); }.aksrt-term-card__media img { width: 100%; height: 100%; object-fit: cover; }.aksrt-term-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px; }.aksrt-term-card__body small { min-height: 38px; color: var(--muted-color,#8a8c98); }.aksrt-term-card__body em { font-size: 12px; color: var(--focus-color,#ff5473); font-style: normal; }
|
||||
.aksrt-term-aggregation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.aksrt-term-aggregation__card { padding: 15px; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-term-aggregation header a { display: flex; justify-content: space-between; }.aksrt-term-aggregation header span { color: var(--muted-color,#8a8c98); font-size: 13px; }.aksrt-term-aggregation ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }.aksrt-term-aggregation li a { display: flex; align-items: center; gap: 10px; }.aksrt-term-aggregation li img { width: 55px; height: 42px; border-radius: 6px; object-fit: cover; }
|
||||
.aksrt-widget-items { position: relative; min-height: 40px; }.aksrt-widget-items.is-loading { opacity: .72; pointer-events: none; }.aksrt-widget-skeleton { height: 180px; border-radius: 10px; background: linear-gradient(90deg,rgba(127,127,127,.08),rgba(127,127,127,.17),rgba(127,127,127,.08)); background-size: 200% 100%; animation: aksrt-shimmer 1.2s infinite; }.aksrt-widget-load-more { display: block; min-width: 120px; margin: 18px auto 0; padding: 9px 18px; border: 0; border-radius: 999px; background: rgba(127,127,127,.12); color: inherit; cursor: pointer; }.aksrt-widget-pagination { display:flex;justify-content:center;gap:6px;margin-top:18px; }.aksrt-widget-pagination button { min-width:34px;height:34px;border:0;border-radius:8px;background:rgba(127,127,127,.1);color:inherit;cursor:pointer; }.aksrt-widget-pagination button[aria-current="page"] { background:var(--focus-color,#ff5473);color:#fff; }@keyframes aksrt-shimmer { to { background-position: -200% 0; } }
|
||||
.aksrt-widget-oneline .swiper-slide { width: min(300px,78vw); }.aksrt-widget-tabs__nav { display: flex; gap: 8px; margin-bottom: 15px; overflow-x: auto; }.aksrt-widget-tabs__nav button { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(127,127,127,.1); color: inherit; cursor: pointer; }.aksrt-widget-tabs__nav button[aria-selected="true"] { background: var(--focus-color,#ff5473); color: #fff; }
|
||||
.aksrt-post-pay { padding: 20px; border-radius: var(--aksrt-widget-radius); text-align: center; }.aksrt-post-pay.is-authorized { background: rgba(34,197,94,.1); }.aksrt-post-pay > i { display: block; margin-bottom: 9px; color: #22c55e; font-size: 30px; }.aksrt-post-pay p { color: var(--muted-color,#8a8c98); }
|
||||
|
||||
.aksrt-pricing-card { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--main-border-color,rgba(127,127,127,.13)); border-radius: var(--main-radius,8px); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-pricing-card.is-featured { border-color: var(--focus-color,#ff5473); }.aksrt-pricing-card__badge { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; background: var(--focus-color,#ff5473); color: #fff; font-size: 12px; }.aksrt-pricing-card h3 { margin: 0 0 12px; }.aksrt-pricing-card__price { font-size: 34px; font-weight: 800; }.aksrt-pricing-card p { color: var(--muted-color,#8a8c98); }.aksrt-pricing-card ul { flex: 1; display: grid; gap: 9px; margin: 15px 0 22px; padding: 0; list-style: none; }.aksrt-pricing-card li i { margin-right: 8px; color: #22c55e; }
|
||||
.aksrt-reviews .swiper-slide { width: min(390px,86vw); height: auto; }.aksrt-review-card { height: 100%; padding: 20px; border-radius: var(--main-radius,8px); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-review-card__rating { color: #f6b73c; }.aksrt-review-card blockquote { min-height: 80px; margin: 15px 0; line-height: 1.75; }.aksrt-review-card footer { display: flex; align-items: center; gap: 11px; }.aksrt-review-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }.aksrt-review-card footer span { display: flex; flex-direction: column; }.aksrt-review-card footer small { color: var(--muted-color,#8a8c98); }
|
||||
.aksrt-faq { max-width: 880px; margin: auto; }.aksrt-faq__search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid rgba(127,127,127,.16); border-radius: 10px; }.aksrt-faq__search input { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; }.aksrt-faq__items { display: grid; gap: 10px; }.aksrt-faq__item { overflow: hidden; border: 1px solid rgba(127,127,127,.13); border-radius: 10px; background: var(--main-bg,#fff); }.aksrt-faq__item > button { display: flex; width: 100%; justify-content: space-between; padding: 15px 17px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }.aksrt-faq__item > div { padding: 0 17px 17px; color: var(--muted-color,#8a8c98); line-height: 1.75; }
|
||||
.aksrt-stat { padding: 22px; text-align: center; }.aksrt-stat > strong { display: block; color: var(--focus-color,#ff5473); font-size: clamp(32px,5vw,52px); }.aksrt-stat h3 { margin: 5px 0; }.aksrt-stat p { margin: 0; color: var(--muted-color,#8a8c98); }.aksrt-highlight--large { grid-column: span 2; }.aksrt-tilt-case { transform-style: preserve-3d; }.aksrt-tilt-case .aksrt-media-card__body { transform: translateZ(20px); }
|
||||
.aksrt-feature-intro__tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }.aksrt-feature-intro__tabs button { padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(127,127,127,.1); color: inherit; cursor: pointer; }.aksrt-feature-intro__tabs button[aria-selected="true"] { background: var(--focus-color,#ff5473); color: #fff; }.aksrt-feature-intro__panels article { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 34px; }.aksrt-feature-intro__copy p, .aksrt-feature-intro__copy li { color: var(--muted-color,#8a8c98); line-height: 1.7; }
|
||||
|
||||
.aksrt-slider { height: var(--aksrt-slider-height); overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #111; }.aksrt-slider .swiper-slide, .aksrt-slider .swiper-slide > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }.aksrt-slider .swiper-slide > img, .aksrt-slider .swiper-slide > video, .aksrt-slider .swiper-slide > a > img, .aksrt-slider .swiper-slide > a > video { width: 100%; height: 100%; object-fit: cover; }.aksrt-slide-copy { position: absolute; z-index: 2; right: 8%; bottom: 12%; left: 8%; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }.aksrt-slide-copy.is-center { top: 50%; bottom: auto; text-align: center; transform: translateY(-50%); }.aksrt-slide-copy.is-right-bottom { text-align: right; }.aksrt-slide-copy h3 { margin: 0; font-size: clamp(25px,4vw,44px); }.aksrt-slide-copy p { margin: 8px 0 0; }.aksrt-slide-layer { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }.aksrt-slider-combo { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 15px; }.aksrt-slider-combo__side { display: grid; gap: 15px; }.aksrt-slider-combo__side .aksrt-media-card { min-height: 0; }.aksrt-slider-combo__side .aksrt-media-card__media { aspect-ratio: 2/1; }
|
||||
|
||||
.aksrt-user-card { position: relative; overflow: hidden; border-radius: var(--main-radius,8px); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); text-align: center; }.aksrt-user-card__cover { height: 105px; background: var(--muted-border-color,#eee); background-position: center; background-size: cover; }.aksrt-user-card__body { position: relative; padding: 15px; }.aksrt-user-card__avatar { display: inline-block; margin-top: -62px; padding: 4px; border-radius: 50%; background: var(--main-bg-color,#fff); }.aksrt-user-card__avatar img { display: block; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }.aksrt-user-card.is-guest .aksrt-user-card__avatar { margin-top: -58px; }.aksrt-user-card h3 { margin: 7px 0; }.aksrt-user-card__identity { margin: 6px 0; }.aksrt-user-card__body > p { color: var(--muted-color,#8a8c98); }.aksrt-user-card__stats { display: flex; justify-content: center; gap: 24px; margin: 16px 0; }.aksrt-user-card__stats span { display: flex; flex-direction: column; font-size: 12px; color: var(--muted-color,#8a8c98); }.aksrt-user-card__stats b { color: inherit; font-size: 17px; }.aksrt-user-card__actions { display: flex; justify-content: center; gap: 9px; }.aksrt-user-card__follow { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border: 0; border-radius: 999px; background: var(--focus-color,#ff5473); color: #fff; cursor: pointer; }.aksrt-user-card__follow.is-following { background: rgba(0,0,0,.5); }.aksrt-user-card__posts { padding: 0 16px 16px; text-align: left; }
|
||||
.aksrt-user-ranking { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.aksrt-user-ranking li { display: flex; align-items: center; gap: 9px; }.aksrt-user-ranking__index { width: 24px; text-align: center; color: var(--muted-color,#8a8c98); font-weight: 700; }.aksrt-user-ranking__index.is-top { color: #f59e0b; }.aksrt-user-tile { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; }.aksrt-user-tile img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }.aksrt-user-tile span { display: flex; min-width: 0; flex-direction: column; }.aksrt-user-tile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.aksrt-user-tile small { color: var(--muted-color,#8a8c98); }.aksrt-user-list { --aksrt-cols: 4; }.aksrt-user-list article { padding: 14px; border-radius: 10px; background: var(--main-bg,#fff); box-shadow: 0 6px 20px rgba(31,35,48,.06); }
|
||||
.aksrt-user-card.no-cover .aksrt-user-card__avatar { margin-top: 0; }.aksrt-user-card__oauth { margin-top: 14px; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-widget { margin: var(--aksrt-widget-space-m-top,0) var(--aksrt-widget-space-m-right,0) var(--aksrt-widget-space-m-bottom,15px) var(--aksrt-widget-space-m-left,0); }
|
||||
.aksrt-widget--only-pc { display: none; }.aksrt-widget--only-mobile { display: block; }
|
||||
.aksrt-widget-grid { grid-template-columns: repeat(var(--aksrt-cols-m,1),minmax(0,1fr)); gap: 10px; }
|
||||
.aksrt-widget__header { align-items: flex-start; flex-direction: column; }.aksrt-widget__title-links { justify-content: flex-start; }
|
||||
.aksrt-widget-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
||||
.aksrt-widget-partners__track { grid-template-rows: repeat(var(--aksrt-partner-rows-m),70px); }
|
||||
.aksrt-term-aggregation, .aksrt-feature-intro__panels article, .aksrt-slider-combo { grid-template-columns: 1fr; }
|
||||
.aksrt-highlight--large { grid-column: auto; }
|
||||
.aksrt-slider { height: var(--aksrt-slider-height-m); }.aksrt-slide--hide-mobile { display: none !important; }
|
||||
.aksrt-widget-gap { height: var(--aksrt-gap-m); }.aksrt-pricing-card.is-featured { transform: none; }
|
||||
.aksrt-user-list { --aksrt-cols-m: 1; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-widget *, .aksrt-widget *::before, .aksrt-widget *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.aksrt-widget :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight !important; }
|
||||
}
|
||||
.aksrt-widget--animate { animation: aksrt-widget-fade .55s both; }.aksrt-widget--animate-slideup { animation-name: aksrt-widget-slideup; }.aksrt-widget--animate-slidedown { animation-name: aksrt-widget-slidedown; }.aksrt-widget--animate-slideright { animation-name: aksrt-widget-slideright; }.aksrt-widget--animate-slideleft { animation-name: aksrt-widget-slideleft; }.aksrt-widget--animate-zoomin { animation-name: aksrt-widget-zoomin; }.aksrt-widget--animate-zoomout { animation-name: aksrt-widget-zoomout; }.aksrt-widget--animate-repeat { animation-iteration-count: infinite; animation-duration: 2s; }
|
||||
@keyframes aksrt-widget-fade { from { opacity: 0; } }@keyframes aksrt-widget-slideup { from { opacity:0;transform:translateY(25px); } }@keyframes aksrt-widget-slidedown { from { opacity:0;transform:translateY(-25px); } }@keyframes aksrt-widget-slideright { from { opacity:0;transform:translateX(-25px); } }@keyframes aksrt-widget-slideleft { from { opacity:0;transform:translateX(25px); } }@keyframes aksrt-widget-zoomin { from { opacity:0;transform:scale(.9); } }@keyframes aksrt-widget-zoomout { from { opacity:0;transform:scale(1.1); } }
|
||||
|
||||
@@ -0,0 +1,413 @@
|
||||
/**
|
||||
* AKSRT Gutenberg Block Styles
|
||||
*
|
||||
* Styles for custom Gutenberg blocks in the editor and front-end.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* ── Tabs ── */
|
||||
|
||||
.aksrt-block-tabs {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.aksrt-block-tabs--line .aksrt-block-tab {
|
||||
border-left: 3px solid var(--color-primary, #1890ff);
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.aksrt-block-tabs--card .aksrt-block-tab {
|
||||
background: var(--surface-2, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── EnlighterJS Code Block ── */
|
||||
|
||||
.aksrt-block-enlighter {
|
||||
margin: 16px 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #1e1e2e;
|
||||
}
|
||||
|
||||
.aksrt-block-enlighter__header {
|
||||
padding: 6px 14px;
|
||||
background: #181825;
|
||||
border-bottom: 1px solid #313244;
|
||||
}
|
||||
|
||||
.aksrt-block-enlighter__lang {
|
||||
font-size: 12px;
|
||||
color: #a6adc8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-block-enlighter__code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #cdd6f4;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
.aksrt-block-enlighter__code:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── Quote ── */
|
||||
|
||||
.aksrt-block-quote {
|
||||
margin: 16px 0;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.aksrt-block-quote--gray {
|
||||
border-color: #9ca3af;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.aksrt-block-quote--blue {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.aksrt-block-quote--green {
|
||||
border-color: #22c55e;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.aksrt-block-quote--red {
|
||||
border-color: #ef4444;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.aksrt-block-quote--yellow {
|
||||
border-color: #eab308;
|
||||
background: #fefce8;
|
||||
}
|
||||
|
||||
.aksrt-block-quote p {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.aksrt-block-quote cite {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* ── Alert ── */
|
||||
|
||||
.aksrt-block-alert {
|
||||
margin: 16px 0;
|
||||
padding: 14px 18px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aksrt-block-alert p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aksrt-block-alert--info {
|
||||
border-color: #93c5fd;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.aksrt-block-alert--success {
|
||||
border-color: #86efac;
|
||||
background: #f0fdf4;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.aksrt-block-alert--warning {
|
||||
border-color: #fcd34d;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.aksrt-block-alert--error {
|
||||
border-color: #fca5a5;
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.aksrt-block-alert__close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aksrt-block-alert__close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Buttons ── */
|
||||
|
||||
.aksrt-block-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 16px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.aksrt-block-buttons--center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-block-buttons--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.aksrt-block-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--sm {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--md {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--lg {
|
||||
padding: 14px 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--primary {
|
||||
background: var(--color-primary, #1890ff);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--secondary {
|
||||
background: #6b7280;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-block-btn--outline {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary, #1890ff);
|
||||
color: var(--color-primary, #1890ff);
|
||||
}
|
||||
|
||||
.aksrt-block-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--color-primary, #1890ff);
|
||||
}
|
||||
|
||||
/* ── Collapse ── */
|
||||
|
||||
.aksrt-block-collapse {
|
||||
margin: 16px 0;
|
||||
border: 1px solid var(--color-line, #e3e8ef);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aksrt-block-collapse__header {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--surface-2, #f8fafc);
|
||||
font-weight: 500;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.aksrt-block-collapse__header::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aksrt-block-collapse__header::after {
|
||||
content: '▸';
|
||||
transition: transform 0.2s;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.aksrt-block-collapse[open] .aksrt-block-collapse__header::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.aksrt-block-collapse__body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* ── Feature Grid ── */
|
||||
|
||||
.aksrt-block-feature {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.aksrt-block-feature--cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.aksrt-block-feature--cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.aksrt-block-feature--cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.aksrt-block-feature__item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: var(--surface-2, #f8fafc);
|
||||
}
|
||||
|
||||
.aksrt-block-feature__icon {
|
||||
font-size: 28px;
|
||||
color: var(--color-primary, #1890ff);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.aksrt-block-feature__title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-block-feature__desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ── Responsive Iframe ── */
|
||||
|
||||
.aksrt-block-iframe {
|
||||
margin: 16px 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe--16-9 {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe--4-3 {
|
||||
position: relative;
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe--1-1 {
|
||||
position: relative;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe--16-9 iframe,
|
||||
.aksrt-block-iframe--4-3 iframe,
|
||||
.aksrt-block-iframe--1-1 iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe--auto iframe {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-block-iframe__placeholder {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
background: var(--surface-2, #f8fafc);
|
||||
}
|
||||
|
||||
/* ---- Paid Fragment ---- */
|
||||
|
||||
.aksrt-paid-fragment-block {
|
||||
margin: 16px 0;
|
||||
border: 1px dashed #ec4899;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #fff7fb;
|
||||
}
|
||||
|
||||
.aksrt-paid-fragment-block .components-notice {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.aksrt-paid-fragment-block__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 9px 14px;
|
||||
color: #9d174d;
|
||||
background: #fce7f3;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aksrt-paid-fragment-block__content {
|
||||
min-height: 72px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-block-feature--cols-3,
|
||||
.aksrt-block-feature--cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.aksrt-block-feature--cols-2,
|
||||
.aksrt-block-feature--cols-3,
|
||||
.aksrt-block-feature--cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,621 @@
|
||||
/* Breadcrumb chrome lives in breadcrumb.css (single source). */
|
||||
|
||||
/* ========== 主布局 ========== */
|
||||
.content-main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-main--single {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content-shell {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 32px 16px 48px;
|
||||
max-width: var(--container);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.content-shell {
|
||||
padding: 40px 24px 56px;
|
||||
}
|
||||
}
|
||||
|
||||
/* page.php 专用：阅读宽度收窄 */
|
||||
.content-shell--page {
|
||||
max-width: var(--container-page, 860px);
|
||||
}
|
||||
|
||||
.content-shell--cms {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* page.php 内的元素 */
|
||||
.entry-page .entry-thumb {
|
||||
margin: 0 0 var(--space-6, 24px);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry-page .page-links {
|
||||
margin-top: var(--space-6, 24px);
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--color-ink-3, var(--color-ink-3));
|
||||
}
|
||||
|
||||
.entry-page .page-links-title {
|
||||
margin-right: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Site shell — site-layout-1/2/3 dual-column
|
||||
* DOM: main.container > .content-wrap + .sidebar (siblings)
|
||||
* body.site-layout-1 = no sidebar
|
||||
* body.site-layout-2 = sidebar right
|
||||
* body.site-layout-3 = sidebar left
|
||||
*
|
||||
* This intentionally uses Zibll's float/negative-margin ownership model.
|
||||
* Below 992px the sidebar is hidden and the content margins collapse.
|
||||
* ============================================================ */
|
||||
|
||||
main.container,
|
||||
main.content-shell,
|
||||
.site-main.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* content-shell is a padding shell for non-dual pages; when it also hosts
|
||||
* the float dual-column, kill horizontal padding so negative-margin math matches Zibll. */
|
||||
main.container.content-shell,
|
||||
main.content-shell.container,
|
||||
.site-main.container.content-shell {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
max-width: var(--container, var(--mian-max-width, 1200px));
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main.container::after,
|
||||
main.content-shell::after,
|
||||
.site-main.container::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Float/negative-margin compatibility fallback.
|
||||
*
|
||||
* Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box
|
||||
* a 100% width + margin-right gutter keeps the border-box at full container
|
||||
* width, so the gutter never shrinks the content box and .sidebar (margin-left:-311px)
|
||||
* sits under the main column (overlap). Zibll only sets margin on .content-layout;
|
||||
* width stays auto so margin carves out the column. */
|
||||
.content-wrap {
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-layout {
|
||||
display: block;
|
||||
/* width:auto — never 100%; margin must shrink the used width */
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-layout__primary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Base sidebar column (Zibll .sidebar defaults) — layout variants override below */
|
||||
.sidebar {
|
||||
float: left;
|
||||
width: 311px; /* Zibll hard 311px; --sidebar-width kept in sync via runtime vars */
|
||||
width: var(--sidebar-width, 311px);
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-layout__aside {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* No sidebar */
|
||||
body.site-layout-1 .sidebar,
|
||||
.site-layout-1 .sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.site-layout-1 .content-layout,
|
||||
body.site-layout-1 .content-layout--no-sidebar,
|
||||
.site-layout-1 .content-layout {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Compat: templates may still stamp content-layout--no-sidebar */
|
||||
.content-layout--no-sidebar {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Sidebar RIGHT (layout 2) — Zibll: margin-right: calc(311px + 15px) only */
|
||||
body.site-layout-2 .content-layout,
|
||||
.site-layout-2 .content-layout {
|
||||
margin-right: calc(311px + 15px);
|
||||
margin-right: calc(var(--sidebar-width, 311px) + 15px);
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.site-layout-2 .sidebar,
|
||||
.site-layout-2 .sidebar {
|
||||
float: left;
|
||||
width: 311px;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: -311px;
|
||||
margin-left: calc(0px - var(--sidebar-width, 311px));
|
||||
position: unset;
|
||||
}
|
||||
|
||||
/* Sidebar LEFT (layout 3) */
|
||||
body.site-layout-3 .content-layout,
|
||||
.site-layout-3 .content-layout {
|
||||
margin-left: calc(311px + 15px);
|
||||
margin-left: calc(var(--sidebar-width, 311px) + 15px);
|
||||
margin-right: unset;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.site-layout-3 .sidebar,
|
||||
.site-layout-3 .sidebar {
|
||||
float: left;
|
||||
width: 311px;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: -100%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
/* Sticky widgets inside sidebar */
|
||||
@media (min-width: 992px) {
|
||||
body.site-layout-2 .sidebar .posts-nav-box,
|
||||
body.site-layout-3 .sidebar .posts-nav-box,
|
||||
body.site-layout-2 .aksrt-article-sidebar .posts-nav-box,
|
||||
body.site-layout-3 .aksrt-article-sidebar .posts-nav-box,
|
||||
.sidebar .content-layout__aside,
|
||||
.content-layout__aside {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height, 60px) + 16px);
|
||||
}
|
||||
|
||||
.has-static-nav .sidebar .posts-nav-box,
|
||||
.has-static-nav .content-layout__aside {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile collapse (Zibll max-width: 991px) */
|
||||
@media (max-width: 991.98px) {
|
||||
body.site-layout-2 .content-layout,
|
||||
body.site-layout-3 .content-layout,
|
||||
.site-layout-2 .content-layout,
|
||||
.site-layout-3 .content-layout {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
body.site-layout-2 .sidebar,
|
||||
body.site-layout-3 .sidebar,
|
||||
.site-layout-2 .sidebar,
|
||||
.site-layout-3 .sidebar,
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 页面标题区 ========== */
|
||||
.page-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.page-header .entry-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--color-ink-3);
|
||||
margin: 0;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.term-page-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-1);
|
||||
box-shadow: var(--shadow-sm, 0 1px 6px rgba(15, 23, 42, 0.04));
|
||||
}
|
||||
|
||||
.term-page-header__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.term-page-header__eyebrow {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.term-page-header__desc {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.term-page-header__cover {
|
||||
min-height: 140px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
|
||||
}
|
||||
|
||||
.term-page-header--simple .term-page-header__cover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Card style: accent top border, slightly more padding */
|
||||
.term-page-header--card {
|
||||
border-top: 3px solid var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
.term-page-header--card .term-page-header__body {
|
||||
padding: 28px 24px;
|
||||
}
|
||||
|
||||
/* Cover style: full-width hero with background image */
|
||||
.term-page-header--cover {
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.term-page-header__cover-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.term-page-header__cover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.term-page-header--cover .term-page-header__body {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.term-page-header__body--overlay .entry-title,
|
||||
.term-page-header__body--overlay .term-page-header__desc,
|
||||
.term-page-header__body--overlay .term-page-header__eyebrow {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.term-page-header__body--overlay .term-page-header__eyebrow {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.term-page-header--cover {
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.aksrt-admin-quicklink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-pill, 999px);
|
||||
background: var(--surface-2);
|
||||
color: var(--color-ink-2);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-admin-quicklink:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-soft, rgba(59, 130, 246, 0.08));
|
||||
}
|
||||
|
||||
.archive-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin: -8px 0 24px;
|
||||
padding: 16px 18px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06));
|
||||
}
|
||||
|
||||
.archive-filter-bar__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.archive-filter-bar__label {
|
||||
color: var(--color-ink-4);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.archive-filter-bar__chips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.archive-filter-bar__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-pill, 999px);
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink-2);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.archive-filter-bar__chip.is-active,
|
||||
.archive-filter-bar__chip:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary, #fff);
|
||||
}
|
||||
|
||||
.archive-filter-bar__meta {
|
||||
color: var(--color-ink-4);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.archive-filter-bar__sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.archive-filter-bar__main--tags {
|
||||
border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06));
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* §3.4 custom_filter dimension rows */
|
||||
.archive-filter-bar__main--custom {
|
||||
border-top: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06));
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.content-stream {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.content-main--archive,
|
||||
.content-main--tag,
|
||||
.content-main--category,
|
||||
.content-main--search,
|
||||
.content-main--single {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.content-stream__list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-stream__footer {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.content-stream__footer > .content-stream__footer-nav,
|
||||
.archive__ajax-wrap > .content-stream__footer-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-stream__empty {
|
||||
padding: 28px 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
|
||||
}
|
||||
|
||||
.article-shell {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* AJAX 筛选加载状态 */
|
||||
.archive__ajax-wrap {
|
||||
position: relative;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.archive__ajax-wrap.is-loading {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.archive__ajax-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.archive__ajax-loading.is-loading {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.archive__ajax-spinner {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 3px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: aksrt-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.term-page-header__body {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.aksrt-admin-quicklink {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== AJAX 分页（加载更多 / 无限滚动） ========== */
|
||||
.aksrt-pagination-ajax {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin: 40px 0 8px;
|
||||
}
|
||||
|
||||
.aksrt-load-more-btn {
|
||||
min-width: 180px;
|
||||
height: 44px;
|
||||
padding: 0 32px;
|
||||
border-radius: var(--radius-btn);
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-page);
|
||||
color: var(--color-ink);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s, background 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-load-more-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-load-more-btn:disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-loading-indicator {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
.aksrt-loading-indicator i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.aksrt-scroll-sentinel {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ========== 移动端/平板隐藏侧栏（与 zibll 一致：991px 以下隐藏） ========== */
|
||||
@media (max-width: 991px) {
|
||||
.content-layout__aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-layout__primary--cms {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Phase 2 — 侧栏 widget 内链接增强
|
||||
* ============================================================ */
|
||||
.content-layout__aside .widget a {
|
||||
transition: color var(--dur-fast, 0.15s) var(--ease);
|
||||
}
|
||||
|
||||
.content-layout__aside .widget a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Phase 5 — 文章操作卡片增强
|
||||
* ============================================================ */
|
||||
|
||||
/* ============================================================
|
||||
* Phase 6 — 评论卡片容器
|
||||
* ============================================================ */
|
||||
.comments-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,593 @@
|
||||
/**
|
||||
* AKSRT Profile / User Center — v3.3 Editorial
|
||||
*
|
||||
* 从 page-profile.php 内嵌 <style> 提取，token 化。
|
||||
* 通过 class-aksrt-scripts.php 在 is_page_template('templates/pages/page-profile.php') 时加载。
|
||||
*
|
||||
* 覆盖：
|
||||
* - 公开个人主页头
|
||||
* - 仪表盘标签 + 数据表
|
||||
* - 个人资料编辑表单 + 联系方式行
|
||||
* - 账号设置区（第三方绑定 / 安全操作）
|
||||
* - 模态弹窗（修改密码 / 修改邮箱）
|
||||
* - 密码强度条
|
||||
*/
|
||||
|
||||
/* 用户主页 / 用户中心统一使用站点内容宽度，避免旧 page/dashboard 容器收窄。
|
||||
* main 自身同时带 content-shell + aksrt-profile，不能写成 .aksrt-profile .content-shell。 */
|
||||
.aksrt-profile.content-shell,
|
||||
.content-shell.aksrt-profile {
|
||||
width: 100%;
|
||||
max-width: var(--container, 1440px);
|
||||
}
|
||||
|
||||
/* ==================== 用户资料卡片（共享） ==================== */
|
||||
.uc-header {
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
overflow: hidden;
|
||||
background: var(--surface-1);
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
/* 对齐 zibll: calc(20% + 100px) */
|
||||
.uc-header__cover {
|
||||
position: relative;
|
||||
padding-bottom: calc(20% + 100px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uc-header__cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.uc-header__cover-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.35), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-cover-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
.aksrt-cover-menu__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: background .2s;
|
||||
}
|
||||
.aksrt-cover-menu__trigger:hover,
|
||||
.aksrt-cover-menu__trigger:focus-visible {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.aksrt-cover-menu__panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: calc(100% + 8px);
|
||||
display: grid;
|
||||
min-width: 140px;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
background: rgba(20, 24, 31, .94);
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,.22);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.aksrt-cover-menu__panel[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.aksrt-cover-menu__panel [role="menuitem"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aksrt-cover-menu__panel [role="menuitem"]:hover,
|
||||
.aksrt-cover-menu__panel [role="menuitem"]:focus-visible { background: rgba(255,255,255,.13); outline: none; }
|
||||
.profile-form__fields { display: grid; gap: 14px; }
|
||||
.profile-form__fields label { display: grid; gap: 6px; font-size: 13px; color: var(--color-ink, #24292f); }
|
||||
|
||||
.uc-header__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 18px 28px 24px;
|
||||
margin-top: -60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uc-header__avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#aksrt-bg-file-input[hidden],
|
||||
#aksrt-avatar-file-input[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 对齐 zibll: 140px, 6px 圆角 */
|
||||
.uc-header__avatar img {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
border: 4px solid var(--surface-1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: inherit;
|
||||
background: rgba(0, 0, 0, 0.52);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload i {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.uc-header__avatar:hover .uc-header__avatar-upload,
|
||||
.uc-header__avatar:focus-within .uc-header__avatar-upload {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.uc-header__avatar:hover img,
|
||||
.uc-header__avatar:focus-within img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -5px;
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload:disabled {
|
||||
cursor: wait;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.uc-header__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-top: 65px;
|
||||
}
|
||||
|
||||
.uc-header__name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-ink);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.uc-header__desc {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
line-height: 1.5;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.aksrt-identity-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.aksrt-identity-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.aksrt-identity-chip--success {
|
||||
color: #0f766e;
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.aksrt-identity-chip--info {
|
||||
color: #1d4ed8;
|
||||
background: rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.aksrt-identity-chip--warning {
|
||||
color: #b45309;
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
}
|
||||
|
||||
.aksrt-identity-chip--brand {
|
||||
color: #7c3aed;
|
||||
background: rgba(124, 58, 237, 0.12);
|
||||
}
|
||||
|
||||
.aksrt-identity-chip--neutral {
|
||||
color: var(--color-ink-3);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
|
||||
.uc-header__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.uc-header__meta .aksrt-ip-geo-badge {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.uc-header__meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.uc-header__meta-item i {
|
||||
font-size: 12px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.uc-header__actions {
|
||||
flex-shrink: 0;
|
||||
padding-top: 68px;
|
||||
}
|
||||
|
||||
|
||||
/* 公开主页响应式 */
|
||||
@media (max-width: 767px) {
|
||||
.uc-header__content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 12px 16px 20px;
|
||||
}
|
||||
|
||||
.uc-header__info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.uc-header__desc {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.uc-header__meta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-identity-chips {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uc-header__actions {
|
||||
padding-top: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.uc-header__cover {
|
||||
padding-bottom: calc(20% + 60px);
|
||||
}
|
||||
|
||||
.uc-header__content {
|
||||
margin-top: -40px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.uc-header__avatar {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.uc-header__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload {
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uc-header__avatar-upload i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.uc-header__name {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==================== Dashboard Tabs 计数徽章 ==================== */
|
||||
.dashboard-tabs__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--color-ink-3);
|
||||
background: var(--surface-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.dashboard-tabs button.is-active .dashboard-tabs__count {
|
||||
color: var(--color-on-primary, #fff);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 移动端 tab 横向滚动（取代换行） */
|
||||
@media (max-width: 640px) {
|
||||
.dashboard-tabs {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.aksrt-profile .uc-mobile-tabs {
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dashboard-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.dashboard-tabs button {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==================== 个人资料编辑表单 ==================== */
|
||||
.profile-form .widget-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.profile-form__submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.profile-add-contact {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.profile-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.profile-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||||
}
|
||||
.profile-textarea {
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.profile-hint {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
.profile-hint--top {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ==================== List Header（标题 + 状态筛选） ==================== */
|
||||
.profile-list-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid var(--color-primary-50);
|
||||
}
|
||||
|
||||
.creator-center-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.creator-center-heading {
|
||||
min-width: 220px;
|
||||
}
|
||||
.creator-center-heading__summary {
|
||||
margin: 4px 0 0;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 12px;
|
||||
}
|
||||
.creator-center-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.creator-center-actions .profile-status-filter {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.widget-title--inline {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.widget-title--inline::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-status-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.profile-status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink-3);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease),
|
||||
background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-status-chip:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.profile-status-chip.is-active {
|
||||
color: var(--color-on-primary, #fff);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.profile-status-chip__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface-3);
|
||||
color: var(--color-ink-4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.profile-status-chip.is-active .profile-status-chip__count {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Level icon base sizing is centralized in assets/css/frontend/base.css. */
|
||||
|
||||
/* 用户中心 layout 间距；双栏 / sticky 见 user-center/shell.css（body.aksrt-user-center）。 */
|
||||
.aksrt-profile__layout {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.aksrt-user-center__notice {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
color: #166534;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
.aksrt-user-center__notice--error {
|
||||
color: var(--color-error, #b91c1c);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
.aksrt-profile .uc-mobile-tabs a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
color: var(--color-ink-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
.aksrt-profile .uc-mobile-tabs a.is-active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
.aksrt-profile .dashboard-panel > .widget-card:first-child,
|
||||
.aksrt-profile .profile-form > .widget-card:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,805 @@
|
||||
/* ==================== 文章 / 收藏 列表（无图） ==================== */
|
||||
.profile-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.profile-list-item {
|
||||
position: relative;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-1);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
transition: background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease),
|
||||
box-shadow var(--dur-fast) var(--ease),
|
||||
opacity var(--dur) var(--ease);
|
||||
}
|
||||
.profile-list-item:hover {
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
.profile-list-item.is-removing {
|
||||
opacity: 0;
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
|
||||
.profile-list[data-list="favorites"] .profile-list-item {
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
.profile-list[data-list="favorites"] .profile-list-item:hover {
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.profile-list-item__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-list-item__head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-list-item__title {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-md, 1.125rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: var(--color-ink);
|
||||
letter-spacing: -0.01em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.profile-list-item__title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-list-item:hover .profile-list-item__title a {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.profile-list-item__status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 6px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-warning);
|
||||
background: rgba(245, 158, 11, 0.10);
|
||||
border-radius: var(--radius-pill);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.profile-list-item__date {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-list-item__excerpt {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
line-height: 1.65;
|
||||
color: var(--color-ink-3);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-list-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
.profile-list-item__meta-spacer {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.profile-list-item__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink-4);
|
||||
transition: color var(--dur-fast) var(--ease),
|
||||
background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-list-item__chip--category {
|
||||
color: var(--color-ink-3);
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
.profile-list-item__chip--category:hover {
|
||||
color: var(--color-ink-2);
|
||||
background: var(--surface-2);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
}
|
||||
.profile-list-item__chip--category i {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
}
|
||||
.profile-list-item__chip--tag {
|
||||
color: var(--color-ink-4);
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
.profile-list-item__chip--tag:hover {
|
||||
color: var(--color-ink-3);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.profile-list-item__meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.profile-list-item__meta-item svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.profile-list-item__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--color-ink-4);
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease),
|
||||
background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease),
|
||||
opacity var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-list-item__action:hover {
|
||||
color: var(--color-ink-2);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.profile-list-item__action--unfavorite {
|
||||
color: var(--color-ink-4);
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
.profile-list-item__action--unfavorite:hover {
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
background: rgba(239, 68, 68, 0.04);
|
||||
}
|
||||
.profile-list-item__action--unfavorite svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
.profile-list-item__action.is-loading {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.profile-list-item__action-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
.profile-list-item__action-icon svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
/* ==================== 评论列表 ==================== */
|
||||
.profile-comment-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.profile-comment-item {
|
||||
position: relative;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-1);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
transition: background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease),
|
||||
box-shadow var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-comment-item::before {
|
||||
content: none;
|
||||
}
|
||||
.profile-comment-item:hover {
|
||||
background: var(--surface-1);
|
||||
border-color: var(--color-line-strong, var(--color-line));
|
||||
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.profile-comment-item__quote-link {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
color: var(--color-ink-2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.profile-comment-item__quote-link:hover .profile-comment-item__quote-text {
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
.profile-comment-item__quote-mark {
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: var(--color-ink-4);
|
||||
opacity: 0.45;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.profile-comment-item__quote-text {
|
||||
flex: 1;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
line-height: 1.65;
|
||||
color: var(--color-ink-2);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
transition: color var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
.profile-comment-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
.profile-comment-item__meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.profile-comment-item__meta-item i {
|
||||
font-size: 11px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.profile-comment-item__meta-sep {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.profile-comment-item__post-link {
|
||||
color: var(--color-ink-2);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-comment-item__post-link:hover {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* ==================== 分页 ==================== */
|
||||
.profile-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-line-soft);
|
||||
}
|
||||
.profile-pagination .page-numbers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-3);
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease),
|
||||
background-color var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease);
|
||||
}
|
||||
.profile-pagination a.page-numbers:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
.profile-pagination .page-numbers.current {
|
||||
color: var(--color-on-primary, #fff);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.profile-pagination .page-numbers.dots {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ==================== 空状态 ==================== */
|
||||
.profile-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.profile-empty__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.profile-empty__icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.profile-empty__title {
|
||||
margin: 0 0 6px;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-md, 1.125rem);
|
||||
font-weight: 700;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.profile-empty__desc {
|
||||
margin: 0 0 16px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--color-ink-3);
|
||||
max-width: 360px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.profile-empty__cta {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---- 联系方式行 ---- */
|
||||
.contact-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.contact-icon {
|
||||
flex: 0 0 120px;
|
||||
min-width: 0;
|
||||
}
|
||||
.contact-row .contact-url {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.contact-remove {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.contact-remove:hover {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* ==================== 账号设置区 ==================== */
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.settings-section__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.settings-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary, #fff);
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-icon i,
|
||||
.security-action-icon i,
|
||||
.aksrt-modal__icon i,
|
||||
.aksrt-modal__close i {
|
||||
line-height: 1;
|
||||
}
|
||||
.settings-hint {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-4);
|
||||
margin: 4px 0 12px;
|
||||
}
|
||||
.settings-hint--top {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.settings-hint--bottom {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.settings-section__title {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
.settings-empty {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-4);
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- 第三方绑定列表 ---- */
|
||||
.binding-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.binding-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 14px;
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.binding-item--linkable {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.binding-item--linkable:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-softer);
|
||||
}
|
||||
.binding-item__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--color-ink);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.binding-item__icon i {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
.binding-item__meta {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.binding-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-success);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.binding-status--idle {
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
.binding-item__name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---- 徽章 ---- */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge__icon {
|
||||
line-height: 1;
|
||||
}
|
||||
.badge--bound {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
.badge--bind {
|
||||
background: #eff6ff;
|
||||
color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary-soft);
|
||||
}
|
||||
|
||||
/* ---- 解绑按钮 ---- */
|
||||
.binding-unbind-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.binding-unbind-btn:hover {
|
||||
color: var(--color-error);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
|
||||
/* ---- 安全设置操作区 ---- */
|
||||
.security-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.security-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.security-action-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.security-action-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.security-action-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.security-action-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.security-action-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
/* Zibll-style user tabs: one panel outside, flat rows inside. */
|
||||
.dashboard--public .profile-list,
|
||||
.dashboard--public .profile-comment-list,
|
||||
.uc-content #panel-posts .profile-list,
|
||||
.uc-content #panel-favorites .profile-list,
|
||||
.uc-content #panel-comments .profile-comment-list {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item,
|
||||
.dashboard--public .profile-comment-item,
|
||||
.uc-content #panel-posts .profile-list-item,
|
||||
.uc-content #panel-favorites .profile-list-item,
|
||||
.uc-content #panel-favorites .profile-list[data-list="favorites"] .profile-list-item,
|
||||
.uc-content #panel-comments .profile-comment-item {
|
||||
padding: 16px 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item:hover,
|
||||
.dashboard--public .profile-comment-item:hover,
|
||||
.uc-content #panel-posts .profile-list-item:hover,
|
||||
.uc-content #panel-favorites .profile-list-item:hover,
|
||||
.uc-content #panel-favorites .profile-list[data-list="favorites"] .profile-list-item:hover,
|
||||
.uc-content #panel-comments .profile-comment-item:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item:first-child,
|
||||
.dashboard--public .profile-comment-item:first-child,
|
||||
.uc-content #panel-posts .profile-list-item:first-child,
|
||||
.uc-content #panel-favorites .profile-list-item:first-child,
|
||||
.uc-content #panel-comments .profile-comment-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item:last-child,
|
||||
.dashboard--public .profile-comment-item:last-child,
|
||||
.uc-content #panel-posts .profile-list-item:last-child,
|
||||
.uc-content #panel-favorites .profile-list-item:last-child,
|
||||
.uc-content #panel-comments .profile-comment-item:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* ==================== 作者收益中心 ==================== */
|
||||
.uc-content #panel-creator.dashboard-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
|
||||
.creator-income { display: flex; flex-direction: column; gap: 16px; }
|
||||
.creator-income__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
||||
.creator-income-card { padding: 18px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--surface-1); }
|
||||
.creator-income-card h2 { margin: 0 0 14px; font-size: 17px; }
|
||||
.creator-income-card--cny h2 { color: var(--color-primary); }
|
||||
.creator-income-card--points h2 { color: #16816c; }
|
||||
.creator-income-card__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
|
||||
.creator-income-card__metrics strong,
|
||||
.creator-income-card__metrics small { display: block; }
|
||||
.creator-income-card__metrics strong { color: var(--color-ink); font-size: 18px; font-variant-numeric: tabular-nums; }
|
||||
.creator-income-card__metrics small { margin-top: 4px; color: var(--color-ink-4); font-size: 11px; }
|
||||
.creator-income-card__hint { margin: 12px 0 0; color: var(--color-ink-4); font-size: 12px; line-height: 1.5; }
|
||||
.creator-income__info { padding: 20px; }
|
||||
.creator-income__info h2,
|
||||
.creator-income__toolbar h2 { margin: 0; font-size: 16px; }
|
||||
.creator-income__info div,
|
||||
.creator-income__toolbar p { margin: 6px 0 0; color: var(--color-ink-4); font-size: 13px; line-height: 1.7; }
|
||||
.creator-income__details { padding: 4px 0 0; }
|
||||
.creator-income__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
||||
.creator-income__list { border-top: 1px solid var(--color-line); }
|
||||
.creator-income-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(86px, auto) minmax(0, 1fr) minmax(180px, auto); align-items: center; gap: 14px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
|
||||
.creator-income-row__order,
|
||||
.creator-income-row__source { min-width: 0; overflow: hidden; color: var(--color-ink-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.creator-income-row__currency { color: var(--color-ink-3); font-size: 13px; white-space: nowrap; }
|
||||
.creator-income-row__detail { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
|
||||
.creator-income-row__amount { flex-shrink: 0; color: #16816c; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.creator-income-row__time { flex-shrink: 0; color: var(--color-ink-4); font-size: 12px; white-space: nowrap; }
|
||||
.creator-income-row__status { flex-shrink: 0; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--color-ink-4); background: var(--surface-2); font-size: 11px; white-space: nowrap; }
|
||||
.creator-income-row__status--settled { color: #16816c; background: rgba(22, 129, 108, .1); }
|
||||
.creator-income-row__status--pending { color: #a86d28; background: rgba(168, 109, 40, .12); }
|
||||
.creator-income__pagination { display: flex; justify-content: center; gap: 6px; padding-top: 16px; }
|
||||
.creator-income__pagination a { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; color: var(--color-ink-3); background: var(--surface-2); font-size: 12px; text-decoration: none; }
|
||||
.creator-income__pagination a.is-active,
|
||||
.creator-income__pagination a:hover { color: #fff; background: var(--color-primary); }
|
||||
.creator-income__empty { padding: 40px 20px; color: var(--color-ink-4); text-align: center; }
|
||||
.creator-income__empty i { display: block; margin-bottom: 8px; color: var(--color-primary); font-size: 28px; }
|
||||
@media (max-width: 767px) {
|
||||
.creator-income__cards { grid-template-columns: 1fr; }
|
||||
.creator-income-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.creator-income-row { grid-template-columns: minmax(100px, .8fr) minmax(78px, auto) minmax(0, 1fr) auto; gap: 10px; }
|
||||
.creator-income-row__detail { align-items: flex-end; flex-direction: column; gap: 4px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.creator-income__details { padding: 16px; }
|
||||
.creator-income-row { grid-template-columns: minmax(82px, .8fr) minmax(72px, auto) minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; }
|
||||
.creator-income-row__order,
|
||||
.creator-income-row__currency,
|
||||
.creator-income-row__source { font-size: 12px; }
|
||||
.creator-income-row__amount { font-size: 13px; }
|
||||
.creator-income-row__time { font-size: 11px; }
|
||||
.creator-income-row__status { padding-inline: 6px; }
|
||||
}
|
||||
|
||||
/* ==================== 独立创作中心工作台 ==================== */
|
||||
.creator-workspace { display: flex; flex-direction: column; gap: 16px; }
|
||||
.creator-workspace__hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--color-primary), #7c3aed); }
|
||||
.creator-workspace__eyebrow { margin: 0 0 6px; font-size: 12px; opacity: .78; }.creator-workspace__title { margin: 0; font-size: 26px; color: inherit; }.creator-workspace__intro { margin: 7px 0 0; font-size: 13px; opacity: .84; }.creator-workspace__primary { flex-shrink: 0; color: var(--color-primary); background: #fff; border-color: #fff; }
|
||||
.creator-workspace__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.creator-stat-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--surface-1); }.creator-stat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--color-primary); background: var(--color-primary-soft); }.creator-stat-card strong, .creator-stat-card small { display: block; }.creator-stat-card strong { font-size: 20px; line-height: 1.1; color: var(--color-ink); }.creator-stat-card small { margin-top: 4px; font-size: 12px; color: var(--color-ink-4); }
|
||||
.creator-workspace__panel { padding: 0; overflow: hidden; }.creator-workspace__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--color-line); }.creator-workspace__toolbar h3 { margin: 0; font-size: 18px; }.creator-workspace__toolbar p { margin: 4px 0 0; font-size: 12px; color: var(--color-ink-4); }.creator-workspace__filters { display: flex; flex-wrap: wrap; gap: 6px; }.creator-filter { padding: 6px 10px; border-radius: var(--radius-pill); color: var(--color-ink-3); font-size: 12px; text-decoration: none; }.creator-filter b { margin-left: 3px; font-weight: 600; color: var(--color-ink-4); }.creator-filter:hover, .creator-filter.is-active { color: var(--color-primary); background: var(--color-primary-soft); }
|
||||
.creator-post-list { display: flex; flex-direction: column; }.creator-post-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--color-line); }.creator-post-row:last-child { border-bottom: 0; }.creator-post-row__thumb { display: block; width: 96px; height: 68px; overflow: hidden; border-radius: 8px; background: var(--surface-2); }.creator-post-row__thumb img { width: 100%; height: 100%; object-fit: cover; }.creator-post-row__thumb span { display: grid; place-items: center; height: 100%; color: var(--color-primary); font-size: 22px; }.creator-post-row__heading { display: flex; align-items: center; gap: 8px; min-width: 0; }.creator-post-row__heading h4 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.creator-post-row__heading h4 a { color: var(--color-ink); text-decoration: none; }.creator-post-row__body p { margin: 6px 0; overflow: hidden; color: var(--color-ink-4); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.creator-post-row__status { flex-shrink: 0; padding: 3px 7px; border-radius: var(--radius-pill); font-size: 11px; color: #2563eb; background: #eff6ff; }.creator-post-row__status--draft { color: #b45309; background: #fffbeb; }.creator-post-row__status--pending { color: #7c3aed; background: #f5f3ff; }.creator-post-row__status--private { color: #64748b; background: #f1f5f9; }.creator-post-row__meta { display: flex; gap: 12px; color: var(--color-ink-4); font-size: 11px; }.creator-post-row__actions { display: flex; gap: 6px; white-space: nowrap; }.creator-post-row__action { padding: 6px 9px; border: 1px solid var(--color-line); border-radius: 6px; color: var(--color-ink-3); background: var(--surface-1); font-size: 12px; text-decoration: none; cursor: pointer; }.creator-post-row__action:hover { color: var(--color-primary); border-color: var(--color-primary); }.creator-post-row__action--danger:hover { color: var(--color-error); border-color: var(--color-error); }.creator-workspace__empty { padding: 48px 20px; text-align: center; color: var(--color-ink-4); }.creator-workspace__empty i { font-size: 32px; color: var(--color-primary); }.creator-workspace__empty h4 { margin: 12px 0 4px; color: var(--color-ink); }.creator-workspace__empty p { margin: 0 0 16px; font-size: 13px; }
|
||||
@media (max-width: 767px) { .creator-workspace__hero { align-items: flex-start; flex-direction: column; padding: 20px; }.creator-workspace__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.creator-workspace__toolbar { align-items: flex-start; flex-direction: column; padding: 16px; }.creator-post-row { grid-template-columns: 72px minmax(0, 1fr); padding: 14px 16px; }.creator-post-row__thumb { width: 72px; height: 58px; }.creator-post-row__actions { grid-column: 2; }.creator-workspace__filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; } }
|
||||
|
||||
|
||||
.dashboard--public .profile-list[data-list="favorites"] .profile-list-item,
|
||||
.dashboard--public .profile-list[data-list="favorites"] .profile-list-item:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.dashboard--public .profile-list-item,
|
||||
.dashboard--public .profile-comment-item,
|
||||
.uc-content #panel-posts .profile-list-item,
|
||||
.uc-content #panel-favorites .profile-list-item,
|
||||
.uc-content #panel-comments .profile-comment-item {
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item:first-child,
|
||||
.dashboard--public .profile-comment-item:first-child,
|
||||
.uc-content #panel-posts .profile-list-item:first-child,
|
||||
.uc-content #panel-favorites .profile-list-item:first-child,
|
||||
.uc-content #panel-comments .profile-comment-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dashboard--public .profile-list-item:last-child,
|
||||
.dashboard--public .profile-comment-item:last-child,
|
||||
.uc-content #panel-posts .profile-list-item:last-child,
|
||||
.uc-content #panel-favorites .profile-list-item:last-child,
|
||||
.uc-content #panel-comments .profile-comment-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,343 @@
|
||||
/* ============================================================
|
||||
* 徽章弹窗（zibll medal 1:1 风格）
|
||||
* ------------------------------------------------------------
|
||||
* 共享于用户中心与公开主页的服务端 HTML 徽章弹窗。
|
||||
* ============================================================ */
|
||||
|
||||
/* ---------- 顶部资料卡入口（zibll user-medal-info parity） ---------- */
|
||||
.aksrt-medal-entry,
|
||||
.uc-header__meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
margin: 2px 8px 2px 0;
|
||||
padding: .3em .6em;
|
||||
border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
|
||||
border-radius: var(--mini-radius, 4px);
|
||||
background: var(--surface-2, rgba(136, 136, 136, .1));
|
||||
box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08));
|
||||
color: var(--muted-2-color, var(--color-ink-3));
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1.44;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.aksrt-medal-entry {
|
||||
cursor: pointer;
|
||||
transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
|
||||
}
|
||||
.aksrt-medal-entry:hover,
|
||||
.aksrt-medal-entry:focus-visible {
|
||||
border-color: var(--focus-color-opacity3, var(--focus-color));
|
||||
background: var(--focus-color-opacity1, rgba(59, 130, 246, .1));
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .1));
|
||||
color: var(--focus-color);
|
||||
opacity: 1;
|
||||
}
|
||||
.aksrt-medal-entry:focus-visible {
|
||||
outline: 2px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.aksrt-medal-entry__icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.aksrt-medal-entry__icon {
|
||||
width: auto;
|
||||
height: 1.45em;
|
||||
max-width: 2.2em;
|
||||
margin: 0 1px;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.aksrt-medal-entry__icon + .aksrt-medal-entry__icon { margin-left: -1px; }
|
||||
.aksrt-medal-entry__fallback {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.aksrt-medal-entry__count { margin-left: 2px; }
|
||||
.aksrt-medal-entry__arrow { margin-left: 1px; font-size: .9em; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-medal-entry,
|
||||
.uc-header__meta-item {
|
||||
margin-right: 4px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.medal-cat-box {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 8px 8px 4px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--muted-border-color, rgba(136, 136, 136, 0.06));
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
.medal-cat-box:last-child { margin-bottom: 0; }
|
||||
|
||||
.medal-cat-head { margin-bottom: 6px; }
|
||||
|
||||
.medal-cat-name {
|
||||
display: inline-block;
|
||||
margin-top: -8px;
|
||||
padding: 6px 22px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
border-radius: 0 0 1000px 1000px;
|
||||
}
|
||||
|
||||
/* ---------- 卡片网格（zibll .medal-list-box / .medal-list） ---------- */
|
||||
.medal-list-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px 4px;
|
||||
}
|
||||
|
||||
.medal-list-box--grant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.medal-grant-item { min-width: 0; }
|
||||
.medal-grant-item .medal-card { height: 100%; }
|
||||
.medal-grant-item > .but { display: block; width: 100%; }
|
||||
|
||||
.medal-list {
|
||||
display: block;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.medal-card {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: var(--mini-radius, 6px);
|
||||
transition: transform 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
.medal-list:hover .medal-card,
|
||||
.medal-list:focus-visible .medal-card {
|
||||
transform: translateY(-2px);
|
||||
background: var(--focus-color-opacity1);
|
||||
}
|
||||
.medal-list:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: var(--mini-radius, 6px); }
|
||||
|
||||
.medal-card .medal-icon {
|
||||
width: auto;
|
||||
height: 70px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.medal-card .medal-icon--fa {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 70px;
|
||||
font-size: 34px;
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
/* 未获得：灰度 + 透明（zibll .no-has） */
|
||||
.medal-card.no-has {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.medal-card__name {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--muted-color, var(--color-ink-3));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.medal-card.is-has .medal-card__name { color: var(--key-color, var(--color-ink)); }
|
||||
|
||||
.medal-card__wear {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
/* ---------- 单徽章详情卡（zibll .medal-single-card） ---------- */
|
||||
.medal-single-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 22px 14px 18px;
|
||||
margin-bottom: 14px;
|
||||
background: var(--muted-border-color, rgba(136, 136, 136, 0.06));
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
.medal-single-bg {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
z-index: 0;
|
||||
max-width: 305px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.medal-single-bg img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.medal-single-main { position: relative; }
|
||||
|
||||
.medal-single-card .medal-icon {
|
||||
width: auto;
|
||||
height: 120px;
|
||||
max-width: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.medal-single-card .medal-icon--fa {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
font-size: 72px;
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
.medal-single-name {
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.medal-single-desc {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.medal-single-state {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 弹窗骨架（远程弹窗 .medal-modal） ---------- */
|
||||
.aksrt-modal-runtime.aksrt-badge-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(620px, calc(100vw - 32px));
|
||||
}
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--single:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(400px, calc(100vw - 32px));
|
||||
}
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--grant:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.medal-modal { position: relative; padding: 6px 4px 12px; }
|
||||
.medal-modal__empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
color: var(--muted-2-color, var(--color-ink-4));
|
||||
}
|
||||
|
||||
.medal-modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
.medal-modal__avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 0 2px var(--focus-color-opacity1);
|
||||
}
|
||||
.medal-modal__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.medal-modal__title .medal-icon {
|
||||
width: auto;
|
||||
height: 1.6em;
|
||||
margin-left: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.medal-modal__scroll {
|
||||
max-height: 50vh;
|
||||
max-height: 50dvh;
|
||||
overflow-y: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* 底部操作区（zibll .modal-buts.but-average 语义） */
|
||||
.medal-modal__buts {
|
||||
display: flex;
|
||||
margin: 12px -4px -12px;
|
||||
border-top: 1px solid var(--main-border-color, var(--color-line));
|
||||
}
|
||||
.medal-modal__buts > .but {
|
||||
flex: 1;
|
||||
padding: 0.7em;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.medal-modal__buts > .but + .but { border-left: 1px solid var(--main-border-color, var(--color-line)); }
|
||||
.medal-modal__buts > .but:hover { background: var(--focus-color-opacity05); opacity: 1; }
|
||||
|
||||
/* 单卡弹窗 */
|
||||
.medal-modal--single { padding: 10px 8px 14px; text-align: center; }
|
||||
.medal-modal__actions { margin-top: 4px; }
|
||||
.medal-modal__actions .but.btn-block,
|
||||
.medal-modal__actions .badg.btn-block { display: block; width: 100%; }
|
||||
.medal-modal__back {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.medal-modal__back:hover { color: var(--focus-color); }
|
||||
|
||||
/* ---------- 细滚动条（zibll .mini-scrollbar） ---------- */
|
||||
.mini-scrollbar { scrollbar-width: thin; scrollbar-color: var(--muted-border-color, rgba(136, 136, 136, 0.3)) transparent; }
|
||||
.mini-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
.mini-scrollbar::-webkit-scrollbar-thumb { background: var(--muted-border-color, rgba(136, 136, 136, 0.3)); border-radius: 10px; }
|
||||
.mini-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* ---------- 响应式（zibll: 桌面 5 列 / 移动 4 列） ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.medal-list-box { grid-template-columns: repeat(4, 1fr); }
|
||||
.medal-list-box--grant { grid-template-columns: 1fr; }
|
||||
.medal-card .medal-icon { height: 55px; }
|
||||
.medal-card .medal-icon--fa { width: 44px; height: 55px; font-size: 26px; }
|
||||
.medal-single-card .medal-icon { height: 96px; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.medal-list-box { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Modal runtime + ajax list primitives (shared).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* ---- scroll lock ---- */
|
||||
html.aksrt-modal-runtime-open,
|
||||
body.aksrt-modal-runtime-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- modal runtime shell ---- */
|
||||
.aksrt-modal-runtime {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100050;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 18, 28, 0.48);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__dialog {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
max-height: min(88vh, 720px);
|
||||
overflow: auto;
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 18px 48px rgba(15, 18, 28, 0.22);
|
||||
transform: translateY(12px) scale(0.98);
|
||||
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
color: var(--color-ink, #1f2937);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime.is-open .aksrt-modal-runtime__dialog {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime--bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 16px 16px 0 0;
|
||||
max-height: 90vh;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime--bottom.is-open .aksrt-modal-runtime__dialog {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 16px 18px 0;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__title {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__content {
|
||||
padding: 18px 18px 16px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__loading,
|
||||
.aksrt-modal-runtime__error-body {
|
||||
padding: 28px 8px;
|
||||
text-align: center;
|
||||
color: var(--color-ink-2, #6b7280);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton-line,
|
||||
.aksrt-modal-runtime__skeleton-block {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.16));
|
||||
background-size: 200% 100%;
|
||||
animation: aksrt-modal-skeleton 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton-line {
|
||||
width: 72%;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton-line.is-wide {
|
||||
width: 92%;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton-line.is-short {
|
||||
width: 44%;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__skeleton-block {
|
||||
width: 100%;
|
||||
min-height: 84px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__retry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes aksrt-modal-skeleton {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: -100% 0; }
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime .touch.border-title,
|
||||
.aksrt-modal-runtime .border-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 14px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime .aksrt-modal-runtime__close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--color-ink-3, #9ca3af);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime .but-average.modal-buts,
|
||||
.aksrt-modal-runtime .modal-buts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime .but-average.modal-buts .but,
|
||||
.aksrt-modal-runtime .modal-buts .but,
|
||||
.aksrt-modal-runtime .modal-buts button {
|
||||
min-height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
background: var(--surface-4, #f3f4f6);
|
||||
color: var(--color-ink, #111);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime .modal-buts .but.c-blue,
|
||||
.aksrt-modal-runtime .modal-buts button.c-blue,
|
||||
.aksrt-modal-runtime .modal-buts .btn-primary {
|
||||
background: var(--color-primary, #f04494);
|
||||
border-color: color-mix(in srgb, var(--color-primary, #f04494) 70%, #000 0%);
|
||||
color: var(--color-on-primary, #fff);
|
||||
}
|
||||
|
||||
/* ---- ajax list ---- */
|
||||
.ajaxpager.is-ajax-loading {
|
||||
position: relative;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.ajaxpager .post_ajax_loader,
|
||||
.ajaxpager .post-ajax-loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ajaxpager .post_ajax_loader.is-loading,
|
||||
.ajaxpager .post-ajax-loader.is-loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ajax-item.is-fading {
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
/* ---- order review modal content ---- */
|
||||
.order-comment-from .shop-score-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.order-comment-from .score-title {
|
||||
width: 4.5em;
|
||||
flex: 0 0 auto;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #6b7280);
|
||||
}
|
||||
|
||||
.order-comment-from .score-icon {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.order-comment-from .icon-star {
|
||||
display: inline-flex;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: #d1d5db;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s ease, transform 0.12s ease;
|
||||
}
|
||||
|
||||
.order-comment-from .icon-star svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.order-comment-from .icon-star.active,
|
||||
.order-comment-from .icon-star.hover {
|
||||
color: #fc7049;
|
||||
}
|
||||
|
||||
.order-comment-from .icon-star.hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.order-comment-from .score-text {
|
||||
min-width: 3em;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #6b7280);
|
||||
}
|
||||
|
||||
.order-comment-from textarea.form-control {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
min-height: 96px;
|
||||
background: var(--surface-1, #fff);
|
||||
color: var(--color-ink, #111);
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .add,
|
||||
.order-comment-from .form-upload .preview .preview-item {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed var(--color-line, #d1d5db);
|
||||
background: var(--surface-4, #f9fafb);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .add::before,
|
||||
.order-comment-from .form-upload .preview .add::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background: var(--color-ink-3, #9ca3af);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .add::before {
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .add::after {
|
||||
width: 2px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .preview-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .preview .preview-item .remove {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-comment-from .form-upload .hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.order-comment-from .review-error {
|
||||
color: #ef4444;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.aksrt-modal-runtime:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: calc(100vw - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
/* ==================== Modal 弹窗 ==================== */
|
||||
.aksrt-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99998;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.aksrt-modal[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.aksrt-modal.is-open {
|
||||
display: flex;
|
||||
}
|
||||
.aksrt-modal__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(18, 18, 18, 0.48);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
animation: modalFadeIn 0.2s ease forwards;
|
||||
}
|
||||
.aksrt-modal__box {
|
||||
position: relative;
|
||||
width: 92%;
|
||||
max-width: 440px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: var(--surface-1);
|
||||
border: none;
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow-drawer);
|
||||
animation: modalSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
@keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes modalSlideUp {
|
||||
from { opacity: 0; transform: translateY(24px) scale(0.96); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
/* Modal 头部 */
|
||||
.aksrt-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
}
|
||||
.aksrt-modal__title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.aksrt-modal__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
.aksrt-modal__title-wrap h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.aksrt-modal__close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--color-ink-4);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.aksrt-modal__close:hover {
|
||||
background: var(--surface-2);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* Modal 表单字段 */
|
||||
.aksrt-modal__box form {
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-field {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.modal-field label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
.modal-field input[type="password"],
|
||||
.modal-field input[type="email"],
|
||||
.modal-field input[type="tel"],
|
||||
.modal-field input[type="text"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 40px 10px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-4, var(--surface-2));
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal-field input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||||
background: var(--surface-1);
|
||||
}
|
||||
.toggle-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 31px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 16px;
|
||||
}
|
||||
.toggle-pwd:hover {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* 只读显示（当前邮箱） */
|
||||
.readonly-display {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
color: var(--color-ink-4);
|
||||
background: var(--surface-2);
|
||||
border: 1.5px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 验证码输入组 */
|
||||
.code-input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.code-input-group input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 10px 14px !important;
|
||||
font-family: inherit !important;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.code-send-btn {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
min-width: 110px;
|
||||
}
|
||||
.code-send-btn.is-counting {
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* 密码强度条 */
|
||||
.pwd-strength {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 7px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
background: var(--surface-3);
|
||||
}
|
||||
.pwd-strength__fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
background-color: var(--color-error);
|
||||
}
|
||||
.pwd-strength__fill.level-weak { width: 33%; background-color: var(--color-error); }
|
||||
.pwd-strength__fill.level-medium { width: 66%; background-color: var(--color-warning); }
|
||||
.pwd-strength__fill.level-strong { width: 100%; background-color: var(--color-success); }
|
||||
.pwd-strength__text {
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.pwd-strength__text.level-weak { color: var(--color-error); }
|
||||
.pwd-strength__text.level-medium { color: var(--color-warning); }
|
||||
.pwd-strength__text.level-strong { color: var(--color-success); }
|
||||
|
||||
/* 人机验证容器在弹窗中的适配 */
|
||||
.aksrt-modal .aksrt-captcha-wrap {
|
||||
margin: 14px 0 8px;
|
||||
}
|
||||
.aksrt-modal .aksrt-captcha-box {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Modal 底部按钮栏 */
|
||||
.aksrt-modal__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
}
|
||||
|
||||
/* Modal mobile */
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-modal__box {
|
||||
width: 96%;
|
||||
max-height: 92vh;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.aksrt-modal__footer {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.aksrt-modal__footer .btn,
|
||||
.aksrt-modal__footer button {
|
||||
width: 100%;
|
||||
}
|
||||
.code-input-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
.code-send-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* Zibll-compatible frontend notifications.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.notyn {
|
||||
position: fixed;
|
||||
bottom: 6em;
|
||||
right: 0;
|
||||
max-width: 320px;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
.notyf {
|
||||
position: relative;
|
||||
margin-bottom: 0.6em;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
float: right;
|
||||
min-width: 200px;
|
||||
padding: 1em 3em 1em 3.4em;
|
||||
box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
transform: translateX(1.5em);
|
||||
transition: 0.3s;
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
-webkit-animation: notyf 0.4s cubic-bezier(0.35, 0.71, 0.46, 1.08);
|
||||
animation: notyf 0.4s cubic-bezier(0.35, 0.71, 0.46, 1.08);
|
||||
}
|
||||
|
||||
.notyn-out .notyf {
|
||||
transform: translateX(110%);
|
||||
opacity: 0.5;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes notyf {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(1.5em);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notyf {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(1.5em);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notyf::before {
|
||||
font-family:"Font Awesome 5 Free";font-weight:900;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
left: 0.8em;
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.notyf.success {
|
||||
background: linear-gradient(90deg, rgba(15, 147, 249, 0.7), rgba(61, 189, 249, 0.8));
|
||||
}
|
||||
|
||||
.notyf.success::before {
|
||||
content: '\f058';
|
||||
}
|
||||
|
||||
.notyf.info {
|
||||
background: linear-gradient(90deg, rgba(58, 162, 54, 0.8), rgba(89, 247, 131, 0.8));
|
||||
}
|
||||
|
||||
.notyf.info::before {
|
||||
content: '\f0a1';
|
||||
}
|
||||
|
||||
.notyf.warning,
|
||||
.notyf.load {
|
||||
background: linear-gradient(90deg, rgba(253, 170, 71, 0.7), rgba(247, 154, 13, 0.8));
|
||||
}
|
||||
|
||||
.notyf.warning::before {
|
||||
content: '\f05a';
|
||||
}
|
||||
|
||||
.notyf.danger {
|
||||
background: linear-gradient(90deg, rgba(253, 69, 28, 0.7), rgba(251, 110, 75, 0.8));
|
||||
}
|
||||
|
||||
.notyf.danger::before {
|
||||
content: '\f057';
|
||||
}
|
||||
|
||||
.notyf .fa-close {
|
||||
float: right;
|
||||
padding: 0.6em;
|
||||
margin: -0.4em;
|
||||
}
|
||||
|
||||
.notyf.load::before {
|
||||
content: '';
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
display: inline-block;
|
||||
border: 0.08em solid transparent;
|
||||
border-width: calc(1px + 0.03em);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--this-color);
|
||||
border-bottom-color: var(--this-color);
|
||||
-webkit-animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
|
||||
animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes huan-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes huan-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* AKSRT Overlay / Glass Primitives
|
||||
*
|
||||
* Provides backdrop-filter glass surfaces used by header, footer-tabbar,
|
||||
* floating buttons and search overlays — matching zibll's blur system.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* .aksrt-blur-bg — generic glass surface
|
||||
* Use on any element that needs a translucent blurred background.
|
||||
* ============================================================ */
|
||||
.aksrt-blur-bg {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
background: var(--blur-bg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Glass on site-nav (when using fixed/sticky mode)
|
||||
* Applied via .site-nav--blur already; this adds the zibll-grade
|
||||
* saturate(5) blur(20px) instead of the lighter saturate(1.5) blur(18px).
|
||||
* ============================================================ */
|
||||
.site-nav--glass {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
background: var(--blur-bg);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.site-nav--glass.is-scrolled {
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-bottom-color: var(--color-line-soft);
|
||||
}
|
||||
|
||||
html.dark .site-nav--glass.is-scrolled,
|
||||
html.dark .site-nav--glass.is-scrolled {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Glass on footer-tabbar (already uses backdrop-filter in footer.css;
|
||||
* this class can be toggled to match zibll's exact blur spec)
|
||||
* ============================================================ */
|
||||
.footer-tabbar--glass {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
background: var(--blur-bg);
|
||||
box-shadow: 0 -8px 24px rgba(20, 28, 48, 0.08);
|
||||
}
|
||||
|
||||
html.dark .footer-tabbar--glass,
|
||||
html.dark .footer-tabbar--glass {
|
||||
box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Glass on floating buttons (lighter blur: saturate(2) blur(10px))
|
||||
* ============================================================ */
|
||||
.float-right--glass .float-btn {
|
||||
-webkit-backdrop-filter: saturate(2) blur(10px);
|
||||
backdrop-filter: saturate(2) blur(10px);
|
||||
background: var(--float-btn-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Scroll shadow on glass header (zibll: .body-scroll .header)
|
||||
* ============================================================ */
|
||||
body.has-scrolled .site-nav--glass {
|
||||
box-shadow: 0 4px 10px rgba(20, 28, 48, 0.06);
|
||||
}
|
||||
|
||||
html.dark body.has-scrolled .site-nav--glass,
|
||||
html.dark body.has-scrolled .site-nav--glass {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
@import url("pages/base.css");
|
||||
@import url("pages/empty-state.css");
|
||||
@import url("pages/submit.css");
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
/* ========== 分页 — 对齐 zibll pagination ========== */
|
||||
.content-stream__footer-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-stream__footer-nav.aksrt-pagination,
|
||||
.content-stream__footer-nav.aksrt-pagination-ajax,
|
||||
.content-stream__footer .aksrt-pagination,
|
||||
.content-stream__footer .aksrt-pagination-ajax {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.aksrt-pagination,
|
||||
.navigation.pagination .nav-links,
|
||||
.pagenav.ajax-pag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 24px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination a,
|
||||
.pagination span,
|
||||
.aksrt-pagination a,
|
||||
.aksrt-pagination span,
|
||||
.navigation.pagination a,
|
||||
.navigation.pagination span,
|
||||
.pagenav.ajax-pag a,
|
||||
.pagenav.ajax-pag span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: var(--muted-color, var(--color-ink-3));
|
||||
background: var(--surface-4, var(--main-border-color, rgba(50, 50, 50, 0.06)));
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xs, 3px);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pagination a:hover,
|
||||
.aksrt-pagination a:hover,
|
||||
.navigation.pagination a:hover,
|
||||
.pagenav.ajax-pag a:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.pagination .current,
|
||||
.aksrt-pagination .current,
|
||||
.navigation.pagination .current,
|
||||
.pagenav.ajax-pag .current {
|
||||
color: var(--color-on-primary, #fff);
|
||||
background: var(--color-primary, #f04494);
|
||||
border-color: var(--color-primary, #f04494);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pagination .dots,
|
||||
.aksrt-pagination .dots,
|
||||
.navigation.pagination .dots,
|
||||
.pagenav.ajax-pag .dots {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-ink-4, #999);
|
||||
cursor: default;
|
||||
min-width: auto;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.pagination .prev,
|
||||
.pagination .next,
|
||||
.aksrt-pagination .prev,
|
||||
.aksrt-pagination .next,
|
||||
.navigation.pagination .prev,
|
||||
.navigation.pagination .next,
|
||||
.pagenav.ajax-pag .prev,
|
||||
.pagenav.ajax-pag .next {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination .prev i,
|
||||
.pagination .next i,
|
||||
.aksrt-pagination .prev i,
|
||||
.aksrt-pagination .next i,
|
||||
.navigation.pagination .prev i,
|
||||
.navigation.pagination .next i,
|
||||
.pagenav.ajax-pag .prev i,
|
||||
.pagenav.ajax-pag .next i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .pag-jump,
|
||||
.aksrt-pagination .pag-jump,
|
||||
.navigation.pagination .pag-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .jump-input,
|
||||
.aksrt-pagination .jump-input,
|
||||
.navigation.pagination .jump-input {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
padding: 6px 8px 5px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: var(--muted-color, var(--color-ink-3));
|
||||
background: var(--main-bg-color, #fff);
|
||||
border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .jump-input:focus,
|
||||
.aksrt-pagination .jump-input:focus,
|
||||
.navigation.pagination .jump-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--focus-color, var(--color-primary, #f04494));
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .pag-jump .ajax-next,
|
||||
.aksrt-pagination .pag-jump .ajax-next,
|
||||
.navigation.pagination .pag-jump .ajax-next {
|
||||
min-width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 上一页/下一页 */
|
||||
.pagination__nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pagination__nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pagination__nav a:hover {
|
||||
color: var(--color-primary, #f04494);
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
/* AJAX 加载更多 */
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.load-more__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 24px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.load-more__btn:hover {
|
||||
color: var(--color-primary, #f04494);
|
||||
border-color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
.load-more__btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.load-more__spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--surface-3, #e8e8e8);
|
||||
border-top-color: var(--color-primary, #f04494);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 767px) {
|
||||
.pagination a,
|
||||
.pagination span,
|
||||
.aksrt-pagination a,
|
||||
.aksrt-pagination span,
|
||||
.navigation.pagination a,
|
||||
.navigation.pagination span,
|
||||
.pagenav.ajax-pag a,
|
||||
.pagenav.ajax-pag span {
|
||||
min-width: 28px;
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .pag-jump,
|
||||
.aksrt-pagination .pag-jump,
|
||||
.navigation.pagination .pag-jump {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.pagenav.ajax-pag .jump-input,
|
||||
.aksrt-pagination .jump-input,
|
||||
.navigation.pagination .jump-input {
|
||||
width: 58px;
|
||||
min-width: 58px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,628 @@
|
||||
/**
|
||||
* Zibll 9.0 article list/card contract.
|
||||
* Source baseline: css/main.css (SHA-256 recorded in tests/visual).
|
||||
*/
|
||||
|
||||
.posts-row {
|
||||
margin-right: -8px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.posts-row > *:not(.post_ajax_loader) {
|
||||
margin-right: 8px !important;
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
|
||||
.posts-item {
|
||||
margin: 15px 0;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: var(--main-radius, 8px);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.posts-item.flex,
|
||||
.posts-item .flex,
|
||||
.posts-mini .flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.posts-item .flex.xx,
|
||||
.posts-mini .flex.xx {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.posts-item .flex.ac,
|
||||
.posts-mini .flex.ac {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.posts-item .flex.jsb,
|
||||
.posts-mini .flex.jsb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.posts-item .flex1,
|
||||
.posts-mini .flex1 {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.posts-item .post-graphic:not(.order1) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.posts-item .order1.post-graphic {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.posts-item .item-thumbnail {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 190px;
|
||||
height: 0;
|
||||
padding-bottom: var(--posts-list-scale, 70%);
|
||||
overflow: hidden;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
|
||||
.item-thumbnail.contain img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.swiper-slide.gradient-bg .dplayer-poster img,
|
||||
.swiper-slide.gradient-bg > * > img {
|
||||
object-fit: contain !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.item-thumbnail .swiper-wrapper {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.list .item-thumbnail .zib-slider,
|
||||
.list .item-thumbnail.new-swiper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.item-thumbnail .dplayer.dplayer-thumb {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
padding-bottom: var(--posts-list-scale, 70%);
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.card .item-thumbnail .dplayer.dplayer-thumb {
|
||||
padding-bottom: var(--posts-card-scale, 70%);
|
||||
}
|
||||
|
||||
.item-thumbnail .dplayer-thumb video,
|
||||
.item-thumbnail .swiper-wrapper,
|
||||
.item-thumbnail img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item-thumbnail .swiper-pagination {
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
padding: 0 2px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.posts-item.thumb-dplayer-playing .dplayer-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.posts-item.thumb-dplayer-playing .abs-center {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.posts-item .item-heading {
|
||||
display: -webkit-box;
|
||||
max-height: 2.8em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
font-size: 18px;
|
||||
line-height: 1.4em;
|
||||
white-space: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list.style2 .item-thumbnail {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.list.style2 .item-heading {
|
||||
display: unset;
|
||||
max-height: 1.4em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.posts-item .item-heading > a {
|
||||
color: var(--key-color, #333);
|
||||
}
|
||||
|
||||
.posts-item .item-heading > a:hover {
|
||||
color: var(--focus-color, #f04494);
|
||||
}
|
||||
|
||||
.posts-item .item-excerpt {
|
||||
margin: 0 0 6px;
|
||||
overflow: hidden;
|
||||
color: var(--muted-color, #777);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.posts-item .item-meta item {
|
||||
margin-right: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.posts-item .item-meta svg.icon,
|
||||
.posts-mini .item-meta svg.icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 2px;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
|
||||
.posts-item .meta-right item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.item-meta .avatar-mini {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.item-meta .meta-pay {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.item-meta .meta-pay img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
|
||||
.posts-item .item-meta a,
|
||||
.posts-mini .item-meta a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.posts-item .item-tags a {
|
||||
margin-right: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.posts-item .item-tags a .fa {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.posts-item.card {
|
||||
display: inline-block;
|
||||
width: calc(33.333% - 16px);
|
||||
margin: 8px;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.posts-item.card:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.posts-item.card .item-body {
|
||||
width: 100%;
|
||||
margin: 10px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.posts-item.card .item-meta item {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.posts-mini-con .item-heading,
|
||||
.posts-item.card .item-heading {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.posts-item.card .item-heading {
|
||||
min-height: 2.8em;
|
||||
}
|
||||
|
||||
.posts-item.card .item-tags {
|
||||
min-height: 23px;
|
||||
}
|
||||
|
||||
.posts-item.card .item-thumbnail {
|
||||
width: 100%;
|
||||
padding-bottom: var(--posts-card-scale, 70%);
|
||||
}
|
||||
|
||||
.posts-item.card.style2 {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.posts-item.card.style2:hover {
|
||||
background: var(--main-bg-color, #fff);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
}
|
||||
|
||||
.posts-item.card.style3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.posts-item.card.style3 .item-thumbnail,
|
||||
.posts-item.card.style3 .item-thumbnail img {
|
||||
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
|
||||
}
|
||||
|
||||
.posts-item.card.style3 .item-body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items {
|
||||
margin: 0 -3px 6px;
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(25% - 6px);
|
||||
height: 0;
|
||||
margin: 0 3px;
|
||||
padding-bottom: calc(var(--posts-list-scale, 70%) / 4);
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items.contain > span {
|
||||
overflow: hidden;
|
||||
background: var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items.contain > span > img {
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.posts-item.no_margin {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.posts-item.no-thumb .item-excerpt {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.posts-item.no-thumb .item-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.posts-item + .pagenav {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.posts-item.card + .pagenav {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.no_margin:first-of-type {
|
||||
margin-top: 10px;
|
||||
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
|
||||
}
|
||||
|
||||
.no_margin:last-of-type {
|
||||
margin-bottom: 15px;
|
||||
border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
|
||||
}
|
||||
|
||||
.posts-mini {
|
||||
padding: 10px;
|
||||
display: inline-flex;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.posts-mini-con {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.posts-mini .item-thumbnail {
|
||||
width: 96px;
|
||||
height: 0;
|
||||
padding-bottom: var(--posts-list-scale, 70%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
|
||||
.posts-mini .item-thumbnail img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.posts-mini .item-heading {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.posts-mini .item-heading.icon-circle {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.posts-mini .item-meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.posts-mini-con .badg {
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
.sidebar .posts-mini,
|
||||
.mobile-nav-widget .posts-mini {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mobile-nav-widget .posts-mini {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.posts-mini:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.posts-mini-lists {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.posts-mini-lists .tab-nav-theme {
|
||||
padding: 0 5px 2px;
|
||||
}
|
||||
|
||||
.mobile-nav-widget .posts-mini-lists .tab-nav-theme {
|
||||
margin: 0 -5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widget-main-post.style-list .widget-ajaxpager,
|
||||
.widget-main-post.style-card .widget-ajaxpager,
|
||||
.widget-tab-post.index-tab .tab-content > .tab-pane {
|
||||
margin: -8px -8px 15px;
|
||||
}
|
||||
|
||||
.widget-tab-post.style-list .tab-content > .tab-pane {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.widget-main-post.style-list .posts-item,
|
||||
.widget-tab-post.style-list .posts-item {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.posts-mini:hover img,
|
||||
.posts-item:hover .item-thumbnail img,
|
||||
.posts-item.mult-thumb .thumb-items > span > img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item {
|
||||
flex-shrink: 0;
|
||||
margin: 0 16px 0 0 !important;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item.list {
|
||||
width: calc(50% - 8px) !important;
|
||||
min-width: 520px !important;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item.posts-mini {
|
||||
width: 360px !important;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item.card {
|
||||
width: calc(33.333% - 11px) !important;
|
||||
}
|
||||
|
||||
.img-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.img-badge.left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.fluid-widget-wrap .posts-item.card,
|
||||
.site-layout-1 .posts-item.card {
|
||||
width: calc(25% - 16px);
|
||||
}
|
||||
|
||||
.fluid-widget-wrap .posts-item:not(.card),
|
||||
.site-layout-1 .posts-item:not(.card) {
|
||||
display: inline-flex;
|
||||
width: calc(50% - 16px);
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.fluid-widget-wrap .posts-item.no_margin,
|
||||
.site-layout-1 .posts-item.no_margin {
|
||||
border-radius: var(--main-radius, 8px);
|
||||
}
|
||||
|
||||
.fluid-widget-wrap .posts-mini,
|
||||
.site-layout-1 .posts-mini {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.sidebar .posts-item.card,
|
||||
.sidebar .posts-item.list {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.posts-row {
|
||||
margin-right: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.posts-row > *:not(.post_ajax_loader) {
|
||||
margin-right: 5px !important;
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.posts-item .item-thumbnail {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
.posts-mini .item-thumbnail,
|
||||
.list.style2 .item-thumbnail {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.posts-item .post-graphic:not(.order1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.posts-item .order1.post-graphic {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.posts-item .item-heading {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.posts-item:not(.no-thumb) .item-excerpt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posts-item.card {
|
||||
width: calc(50% - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.widget-main-post.style-list .widget-ajaxpager,
|
||||
.widget-main-post.style-card .widget-ajaxpager,
|
||||
.widget-tab-post.index-tab .tab-content > .tab-pane {
|
||||
margin: -5px -5px 20px;
|
||||
}
|
||||
|
||||
.widget-tab-post.style-list .tab-content > .tab-pane,
|
||||
.widget-main-post.style-list .widget-ajaxpager {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.widget-tab-post.style-list .posts-item {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.posts-item.card:nth-child(odd) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.posts-item.card:nth-child(even) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span {
|
||||
width: calc(33.333% - 6px);
|
||||
padding-bottom: calc(var(--posts-list-scale, 70%) / 3);
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item.card {
|
||||
width: calc(50% - 5px) !important;
|
||||
}
|
||||
|
||||
.swiper-scroll .posts-item.list {
|
||||
width: 100% !important;
|
||||
min-width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.posts-item:not(.no-thumb) .meta-right item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posts-mini {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.posts-item {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.zib-widget .posts-item.no_margin {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.posts-item,
|
||||
.posts-item img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* AKSRT Reset
|
||||
* 现代精简 reset，结合 box-sizing 与 a11y 友好的默认值。
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
background-color: var(--surface-page);
|
||||
color: var(--color-ink-2);
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 媒体元素 */
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 表单元素继承字体 */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 链接 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 焦点环：a11y 关键 */
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 选区色 */
|
||||
::selection {
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* 屏幕阅读器隐藏 */
|
||||
.screen-reader-text,
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus,
|
||||
.sr-only:focus {
|
||||
position: fixed !important;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 8px 16px;
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink);
|
||||
z-index: 100000;
|
||||
clip: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* 减少动效偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
/* ========== 侧边栏 — 对齐 zibll sidebar ========== */
|
||||
/* Width/float geometry is owned by body.site-layout-* in layout.css.
|
||||
* Keep only non-layout chrome here. */
|
||||
.sidebar {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height, 60px) + 20px);
|
||||
}
|
||||
|
||||
/* Widget 通用 */
|
||||
.widget {
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: none;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--color-ink, #333);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.widget-title i {
|
||||
color: var(--color-primary, #f04494);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
padding: var(--card-padding-lg, 20px);
|
||||
}
|
||||
|
||||
.widget-content--flush {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Widget 链接 */
|
||||
.widget a {
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.widget a:hover {
|
||||
color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
/* Widget 标签云 */
|
||||
.widget-tag-cloud .tagcloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.widget-tag-cloud .tagcloud a {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px !important;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: 4px;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.widget-tag-cloud .tagcloud a:hover {
|
||||
background: var(--color-primary-soft, rgba(240, 68, 148, 0.1));
|
||||
color: var(--color-primary, #f04494);
|
||||
}
|
||||
|
||||
/* Widget 列表 */
|
||||
.widget ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widget ul li {
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.widget ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 热门文章 widget */
|
||||
.widget-hot-posts .hot-post-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.widget-hot-posts .hot-post-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.widget-hot-posts .hot-post-item__thumb {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.widget-hot-posts .hot-post-item__title {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink, #333);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.widget-hot-posts .hot-post-item__meta {
|
||||
font-size: 11px;
|
||||
color: var(--color-ink-4, #999);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 侧边栏响应式 — width/float 由 layout.css 的 --sidebar-width + site-layout-* 拥有。
|
||||
* 禁止在这里硬编码 280px（会与 content-layout gutter 失配导致叠层/空隙）。 */
|
||||
@media (max-width: 991px) {
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
@import url("zibll-utilities.css");
|
||||
@import url("single-post/shell.css");
|
||||
@import url("single-post/content.css");
|
||||
@import url("single-post/code-blocks.css");
|
||||
@import url("single-post/navigation.css");
|
||||
@import url("single-post/cover.css");
|
||||
@import url("single-post/author-actions.css");
|
||||
@import url("single-post/related-toc.css");
|
||||
@import url("single-post/hidden-content.css");
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* AKSRT Site Notice — Popup notice styles
|
||||
*/
|
||||
|
||||
.aksrt-site-notice {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.aksrt-site-notice__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.aksrt-site-notice__dialog {
|
||||
position: relative;
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.aksrt-site-notice__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 0;
|
||||
}
|
||||
|
||||
.aksrt-site-notice__title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-ink, #333);
|
||||
}
|
||||
|
||||
.aksrt-site-notice__close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-2, #eee);
|
||||
color: var(--color-ink-3, #777);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.aksrt-site-notice__close:hover {
|
||||
background: var(--surface-3, #ddd);
|
||||
}
|
||||
|
||||
.aksrt-site-notice__body {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--color-ink-2, #4e5358);
|
||||
}
|
||||
|
||||
.aksrt-site-notice__body a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.aksrt-site-notice__foot {
|
||||
padding: 0 24px 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Button base — shared by both <button> and <a> */
|
||||
.aksrt-site-notice__btn,
|
||||
.aksrt-site-notice__confirm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius, 8px);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-site-notice__btn:hover,
|
||||
.aksrt-site-notice__confirm:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
/* Button color variants */
|
||||
.aksrt-site-notice__btn--primary { background: var(--color-primary); }
|
||||
.aksrt-site-notice__btn--success { background: #10b981; }
|
||||
.aksrt-site-notice__btn--warning { background: #f59e0b; color: #1a1a1a; }
|
||||
.aksrt-site-notice__btn--danger { background: #ef4444; }
|
||||
.aksrt-site-notice__btn--info { background: #3b82f6; }
|
||||
.aksrt-site-notice__btn--purple { background: #8b5cf6; }
|
||||
.aksrt-site-notice__btn--dark { background: #374151; }
|
||||
|
||||
/* Modal size variants */
|
||||
.aksrt-site-notice__dialog.modal-mini { max-width: 320px; }
|
||||
.aksrt-site-notice__dialog.modal-sm { max-width: 420px; }
|
||||
.aksrt-site-notice__dialog.modal-lg { max-width: 720px; }
|
||||
/* Default dialog (no size class) */
|
||||
.aksrt-site-notice__dialog:not(.modal-mini):not(.modal-sm):not(.modal-lg) { max-width: 540px; }
|
||||
|
||||
/* Dark mode */
|
||||
html.dark .aksrt-site-notice__dialog {
|
||||
background: var(--surface-1, #323335);
|
||||
}
|
||||
|
||||
html.dark .aksrt-site-notice__close {
|
||||
background: var(--surface-3, #3a3b3e);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
/* ========== 骨架屏加载 — 对齐 zibll skeleton loading ========== */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--surface-2, #eee);
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* 骨架屏变体 */
|
||||
.skeleton-text {
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-text--title {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-text--short {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.skeleton-text--medium {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-avatar--sm {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.skeleton-avatar--lg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.skeleton-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.skeleton-thumb--square {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.skeleton-thumb--card {
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
|
||||
}
|
||||
|
||||
/* 卡片骨架屏 */
|
||||
.skeleton-card {
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: var(--radius, 8px);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-card__thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.skeleton-card__body {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.skeleton-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 评论骨架屏 */
|
||||
.skeleton-comment {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-comment__body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-comment__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 通用骨架屏容器 */
|
||||
.skeleton-list .skeleton-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.skeleton-list .skeleton-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 减弱动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Theme Name: AKSRT
|
||||
Theme URI: https://github.com/Lexo0522/aksrt
|
||||
Author: Kate
|
||||
Author URI: https://github.com/Lexo0522
|
||||
Description: AKSRT Blog Theme - Modern WordPress theme with custom admin panel, OAuth social login, and beautiful blog layout. Based on fresh frontend with dark/light mode.
|
||||
Version: 1.0.0
|
||||
Requires at least: 6.4
|
||||
Tested up to: 6.8
|
||||
Requires PHP: 8.1
|
||||
License: GPL v2 or later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: aksrt
|
||||
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, dark-mode
|
||||
|
||||
============================================================
|
||||
AKSRT WordPress Theme v3.0 - Fresh Frontend + Admin Backend
|
||||
|
||||
Fresh frontend templates (dark/light mode, responsive).
|
||||
Full admin panel preserved (settings, OAuth, content tools, etc).
|
||||
============================================================
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,427 @@
|
||||
/**
|
||||
* AKSRT Design Tokens v7 — 1:1 Zibll Alignment
|
||||
* ------------------------------------------------------------
|
||||
* 单一真理源（Single Source of Truth）
|
||||
* 所有颜色、字体、间距、动效都从此处读取，禁止在组件内硬编码。
|
||||
* 严格对齐 zibll main.css 的视觉值。
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ===== Primary — Zibll theme-color (#f04494 pink) ===== */
|
||||
--color-primary: #f04494;
|
||||
--color-primary-hover: #e0307e;
|
||||
--color-primary-active: #c9206d;
|
||||
--color-primary-soft: rgba(240, 68, 148, 0.10);
|
||||
--color-primary-softer: rgba(240, 68, 148, 0.05);
|
||||
--color-on-primary: #FFFFFF;
|
||||
|
||||
/* ===== Ink (text) — 对齐 zibll --key-color / --main-color / --muted-color ===== */
|
||||
--color-ink: #333333; /* zibll --key-color */
|
||||
--color-ink-2: #4e5358; /* zibll --main-color */
|
||||
--color-ink-3: #777777; /* zibll --muted-color */
|
||||
--color-ink-4: #999999; /* zibll --muted-2-color */
|
||||
|
||||
/* ===== Surface — 对齐 zibll --body-bg-color / --main-bg-color / --muted-bg-color ===== */
|
||||
--surface-page: #f5f6f7; /* zibll --body-bg-color */
|
||||
--surface-1: #FFFFFF; /* zibll --main-bg-color */
|
||||
--surface-2: #eeeeee; /* zibll --muted-bg-color #eee */
|
||||
--surface-3: #e9ecef; /* 输入框 / code / 次级面 */
|
||||
--surface-4: #f8f8f8; /* 分页 / 标签 / hover 薄层 */
|
||||
|
||||
/* ===== Borders — 对齐 zibll --main-border-color ===== */
|
||||
--color-line: rgba(50, 50, 50, 0.06);
|
||||
--color-line-soft: rgba(0, 0, 0, 0.03);
|
||||
--color-line-stronger: rgba(50, 50, 50, 0.12);
|
||||
|
||||
/* ===== State colors ===== */
|
||||
--color-success: #10B981;
|
||||
--color-warning: #F59E0B;
|
||||
--color-error: #EF4444;
|
||||
--color-info: #3B82F6;
|
||||
|
||||
/* ===== Accent (action green — zibll tabbar/CTA) ===== */
|
||||
--color-accent: #18a058;
|
||||
--color-accent-soft: rgba(24, 160, 88, 0.12);
|
||||
--color-accent-shadow: rgba(24, 160, 88, 0.28);
|
||||
|
||||
/* ===== Fonts — 对齐 zibll（系统默认字体栈）===== */
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
|
||||
/* ===== Type scale ===== */
|
||||
--text-xs: 0.75rem; /* 12 */
|
||||
--text-sm: 0.875rem; /* 14 */
|
||||
--text-base: 1rem; /* 16 */
|
||||
--text-md: 1.125rem; /* 18 */
|
||||
--text-lg: 1.25rem; /* 20 */
|
||||
--text-xl: 1.5rem; /* 24 */
|
||||
--text-2xl: 1.875rem; /* 30 */
|
||||
--text-3xl: 2.25rem; /* 36 */
|
||||
--text-4xl: 3rem; /* 48 */
|
||||
--text-5xl: 3.75rem; /* 60 */
|
||||
--leading-tight: 1.2;
|
||||
--leading-snug: 1.4;
|
||||
--leading-normal: 1.6; /* zibll body line-height */
|
||||
--leading-relaxed: 1.6;
|
||||
|
||||
/* ===== Spacing (4px base) ===== */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 32px;
|
||||
--space-8: 40px;
|
||||
--space-9: 48px;
|
||||
--space-10: 64px;
|
||||
--space-11: 80px;
|
||||
--space-12: 96px;
|
||||
|
||||
/* ===== Radius — 对齐 zibll --main-radius: 8px ===== */
|
||||
--radius-xs: 3px;
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 8px; /* zibll main-radius — was 10px */
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-pill: 100px;
|
||||
--radius-avatar: 50%;
|
||||
|
||||
/* ===== Shadows — 对齐 zibll --main-shadow: rgba(116,116,116,0.08) ===== */
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-sm: 0 0 10px rgba(116, 116, 116, 0.08);
|
||||
--shadow: 0 0 10px rgba(116, 116, 116, 0.12);
|
||||
--shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.10);
|
||||
--shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20);
|
||||
|
||||
/* ===== Layout — 对齐 zibll --mian-max-width: 1200px ===== */
|
||||
--nav-height: 60px;
|
||||
--container: 1200px;
|
||||
--container-wide: 1440px;
|
||||
--container-read: 760px;
|
||||
--container-page: 880px;
|
||||
--sidebar-width: 311px;
|
||||
--content-gap: 24px;
|
||||
--section-gap: 24px;
|
||||
--sidebar-bp: 992px;
|
||||
|
||||
/* ===== Motion ===== */
|
||||
--ease: cubic-bezier(.4, 0, .2, 1);
|
||||
--ease-out: cubic-bezier(.16, 1, .3, 1);
|
||||
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
|
||||
--dur-fast: 0.15s;
|
||||
--dur: 0.25s;
|
||||
--dur-slow: 0.4s;
|
||||
|
||||
/* ===== Focus Ring — 对齐 zibll focus-shadow-color ===== */
|
||||
--focus-ring: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||||
|
||||
/* ===== Z-index layers ===== */
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-fixed: 300;
|
||||
--z-overlay: 400;
|
||||
--z-modal: 500;
|
||||
--z-popover: 600;
|
||||
--z-toast: 700;
|
||||
--z-tooltip: 800;
|
||||
|
||||
/* ===== Button sizes — 对齐 zibll ===== */
|
||||
--radius-btn: 4px;
|
||||
--btn-sm-h: 28px;
|
||||
--btn-md-h: 34px;
|
||||
--btn-lg-h: 44px;
|
||||
|
||||
/* ===== Card density — 对齐 zibll .box-body { padding: 15px } ===== */
|
||||
--card-padding: 15px;
|
||||
--card-padding-sm: 10px;
|
||||
--card-padding-lg: 20px;
|
||||
--card-gap: 16px;
|
||||
--card-gap-lg: 20px;
|
||||
|
||||
/* ===== Skeleton loader ===== */
|
||||
--skeleton-base: var(--surface-2);
|
||||
--skeleton-shine: var(--surface-1);
|
||||
|
||||
/* ===== Extended tokens (used by components) ===== */
|
||||
--color-primary-light: var(--color-primary-soft);
|
||||
--color-surface: var(--surface-1);
|
||||
--color-line-strong: var(--color-line);
|
||||
--color-bg-hover: var(--surface-2);
|
||||
--color-border-light: var(--color-line-soft);
|
||||
--color-fill: var(--surface-2);
|
||||
--color-warning-bg: #fffbe6;
|
||||
--color-warning-text: #ad6800;
|
||||
|
||||
--text-secondary: var(--color-ink-3);
|
||||
--text-tertiary: var(--color-ink-4);
|
||||
|
||||
--surface-active: var(--surface-2);
|
||||
--surface-card: var(--surface-1);
|
||||
--surface-hover: var(--surface-2);
|
||||
--surface-secondary: var(--surface-2);
|
||||
|
||||
--radius-code: var(--radius);
|
||||
--radius-full: 100px;
|
||||
--shadow-xl: 0 0 10px rgba(116, 116, 116, 0.12);
|
||||
--space-16: 64px;
|
||||
--z-floating: 900;
|
||||
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-base: 0.25s ease;
|
||||
|
||||
/* ===== Composite / Context tokens — 对齐 zibll ===== */
|
||||
--header-bg: var(--blur-bg);
|
||||
--header-color: var(--color-ink-2);
|
||||
--footer-bg: var(--surface-1);
|
||||
--footer-color: var(--color-ink-4);
|
||||
--blur-bg: rgba(255, 255, 255, 0.80);
|
||||
--float-btn-bg: rgba(200, 200, 200, 0.40);
|
||||
|
||||
/* ===== AKSRT-to-AKSRT canonical aliases ===== */
|
||||
--content-max: var(--container);
|
||||
--font-heading: var(--font-ui);
|
||||
--radius-card: var(--radius);
|
||||
--radius-md: var(--radius);
|
||||
--color-primary-50: var(--color-primary-soft);
|
||||
--color-primary-dark: var(--color-primary-active);
|
||||
--shadow-md: var(--shadow);
|
||||
--mini-radius: calc(var(--radius) / 1.4);
|
||||
--single-cover-scale: 35%;
|
||||
|
||||
/* ===== Avatar size system — Zibll --this-size 等价 ===== */
|
||||
--aksrt-avatar-size-xs: 24px;
|
||||
--aksrt-avatar-size-sm: 32px;
|
||||
--aksrt-avatar-size: 40px;
|
||||
--aksrt-avatar-size-lg: 56px;
|
||||
--aksrt-avatar-size-xl: 80px;
|
||||
|
||||
/* ===== Post card thumbnail scale ===== */
|
||||
--aksrt-card-thumb-scale: 56.25%; /* 16:9 */
|
||||
|
||||
/* ===== Multi-color palette (for buttons / badges / gradients) ===== */
|
||||
--aksrt-rose: #f43f5e;
|
||||
--aksrt-rose-soft: rgba(244, 63, 94, 0.12);
|
||||
--aksrt-blue: #3b82f6;
|
||||
--aksrt-blue-soft: rgba(59, 130, 246, 0.12);
|
||||
--aksrt-green: #10b981;
|
||||
--aksrt-green-soft: rgba(16, 185, 129, 0.12);
|
||||
--aksrt-orange: #f97316;
|
||||
--aksrt-orange-soft:rgba(249, 115, 22, 0.12);
|
||||
--aksrt-purple: #8b5cf6;
|
||||
--aksrt-purple-soft:rgba(139, 92, 246, 0.12);
|
||||
--aksrt-cyan: #06b6d4;
|
||||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.12);
|
||||
--aksrt-yellow: #eab308;
|
||||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.12);
|
||||
--aksrt-red: #ef4444;
|
||||
--aksrt-red-soft: rgba(239, 68, 68, 0.12);
|
||||
--aksrt-teal: #14b8a6;
|
||||
--aksrt-teal-soft: rgba(20, 184, 166, 0.12);
|
||||
--aksrt-indigo: #6366f1;
|
||||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.12);
|
||||
--aksrt-pink: #ec4899;
|
||||
--aksrt-pink-soft: rgba(236, 72, 153, 0.12);
|
||||
|
||||
/* ===== VIP / special gradients ===== */
|
||||
--aksrt-vip-gold-1: #f6d365;
|
||||
--aksrt-vip-gold-2: #fda085;
|
||||
--aksrt-grad-sunset-1: #f093fb;
|
||||
--aksrt-grad-sunset-2: #f5576c;
|
||||
--aksrt-grad-ocean-1: #4facfe;
|
||||
--aksrt-grad-ocean-2: #00f2fe;
|
||||
--aksrt-grad-forest-1: #43e97b;
|
||||
--aksrt-grad-forest-2: #38f9d7;
|
||||
--aksrt-grad-night-1: #a18cd1;
|
||||
--aksrt-grad-night-2: #fbc2eb;
|
||||
--aksrt-grad-fire-1: #f83600;
|
||||
--aksrt-grad-fire-2: #f9d423;
|
||||
|
||||
/* ===== Component sizing ===== */
|
||||
--aksrt-toggle-w: 44px;
|
||||
--aksrt-toggle-h: 24px;
|
||||
--aksrt-stepper-h: 36px;
|
||||
--aksrt-badge-h: 22px;
|
||||
|
||||
/* ===== Legacy name bridge ===== */
|
||||
--text-1: var(--color-ink);
|
||||
--text-2: var(--color-ink-2);
|
||||
--text-3: var(--color-ink-3);
|
||||
--border: var(--color-line);
|
||||
--color-text-1: var(--color-ink);
|
||||
--color-text-2: var(--color-ink-2);
|
||||
--color-text-3: var(--color-ink-3);
|
||||
--color-primary-bg: var(--color-primary-softer);
|
||||
--color-danger: var(--color-error);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Blur-bg fallback cascade (mirrors zibll behaviour)
|
||||
* ============================================================ */
|
||||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||||
:root {
|
||||
--blur-bg: var(--surface-1);
|
||||
--header-bg: var(--surface-1);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||||
html.dark,
|
||||
body.dark-theme {
|
||||
--blur-bg: #37383a;
|
||||
--header-bg: #37383a;
|
||||
}
|
||||
}
|
||||
|
||||
body.modal-open,
|
||||
body.dialog-open {
|
||||
--blur-bg: var(--surface-1);
|
||||
--header-bg: var(--surface-1);
|
||||
}
|
||||
|
||||
body.modal-open .site-nav,
|
||||
body.modal-open .footer-tabbar,
|
||||
body.modal-open .float-right .float-btn,
|
||||
body.dialog-open .site-nav,
|
||||
body.dialog-open .footer-tabbar,
|
||||
body.dialog-open .float-right .float-btn {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
html.dark body.modal-open,
|
||||
html.dark body.dialog-open,
|
||||
body.dark-theme.modal-open,
|
||||
body.dark-theme.dialog-open {
|
||||
--blur-bg: #37383a;
|
||||
--header-bg: #37383a;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Multi-level container responsive — 对齐 zibll --mian-max-width
|
||||
* 不同视口宽度下容器自动调整
|
||||
* ============================================================ */
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--container: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--container: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
:root {
|
||||
--container: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Dark Theme — 对齐 zibll .dark-theme 精确 hex
|
||||
* body.dark-theme 与 html.dark 同权（zibll 用 body class）
|
||||
* ============================================================ */
|
||||
html.dark,
|
||||
body.dark-theme {
|
||||
--color-ink: #f8fafc; /* zibll --key-color */
|
||||
--color-ink-2: #e5eef7; /* zibll --main-color */
|
||||
--color-ink-3: #b4b6bb; /* zibll --muted-color */
|
||||
--color-ink-4: #888a8f; /* zibll --muted-2-color */
|
||||
|
||||
--surface-page: #292a2d; /* zibll --body-bg-color */
|
||||
--surface-1: #323335; /* zibll --main-bg-color */
|
||||
--surface-2: #2d2e31; /* zibll --muted-bg-color */
|
||||
--surface-3: #3a3c42;
|
||||
--surface-4: #26282d;
|
||||
|
||||
--color-line: rgba(114, 114, 114, 0.1);
|
||||
--color-line-soft: rgba(184, 184, 184, 0.02);
|
||||
--color-line-stronger: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-primary-soft: rgba(240, 68, 148, 0.16);
|
||||
--color-primary-softer: rgba(240, 68, 148, 0.08);
|
||||
|
||||
--color-primary-light: var(--color-primary-soft);
|
||||
--color-surface: var(--surface-1);
|
||||
--color-line-strong: var(--color-line);
|
||||
--color-bg-hover: var(--surface-2);
|
||||
--color-border-light: var(--color-line-soft);
|
||||
--color-fill: var(--surface-2);
|
||||
|
||||
--text-secondary: var(--color-ink-3);
|
||||
--text-tertiary: var(--color-ink-4);
|
||||
|
||||
--surface-active: var(--surface-2);
|
||||
--surface-card: var(--surface-1);
|
||||
--surface-hover: var(--surface-2);
|
||||
--surface-secondary: var(--surface-2);
|
||||
|
||||
--shadow-xl: 0 0 10px rgba(24, 24, 24, 0.18);
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
--shadow-sm: 0 0 10px rgba(24, 24, 24, 0.1); /* zibll --main-shadow dark */
|
||||
--shadow: 0 0 10px rgba(24, 24, 24, 0.14);
|
||||
--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.32);
|
||||
--shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60);
|
||||
|
||||
--blur-bg: rgba(50, 51, 53, 0.80);
|
||||
--float-btn-bg: rgba(70, 70, 70, 0.40);
|
||||
--header-bg: var(--blur-bg);
|
||||
--footer-bg: var(--surface-1);
|
||||
--footer-color: var(--color-ink-4);
|
||||
--shadow-md: var(--shadow);
|
||||
|
||||
--skeleton-base: #3a3b3e;
|
||||
--skeleton-shine: #444548;
|
||||
|
||||
/* Multi-color palette — dark mode: same hue, softer tint backgrounds */
|
||||
--aksrt-rose-soft: rgba(244, 63, 94, 0.18);
|
||||
--aksrt-blue-soft: rgba(59, 130, 246, 0.18);
|
||||
--aksrt-green-soft: rgba(16, 185, 129, 0.18);
|
||||
--aksrt-orange-soft:rgba(249, 115, 22, 0.18);
|
||||
--aksrt-purple-soft:rgba(139, 92, 246, 0.18);
|
||||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.18);
|
||||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.18);
|
||||
--aksrt-red-soft: rgba(239, 68, 68, 0.18);
|
||||
--aksrt-teal-soft: rgba(20, 184, 166, 0.18);
|
||||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.18);
|
||||
--aksrt-pink-soft: rgba(236, 72, 153, 0.18);
|
||||
}
|
||||
|
||||
/* Dark mode component refinements */
|
||||
html.dark .site-nav,
|
||||
body.dark-theme .site-nav {
|
||||
border-bottom-color: var(--color-line);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html.dark .footer-tabbar,
|
||||
body.dark-theme .footer-tabbar {
|
||||
background: rgba(50, 51, 53, 0.80);
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
html.dark .n-drawer,
|
||||
html.dark .n-modal,
|
||||
html.dark .n-dialog,
|
||||
body.dark-theme .n-drawer,
|
||||
body.dark-theme .n-modal,
|
||||
body.dark-theme .n-dialog {
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
html.dark .post-card,
|
||||
html.dark .widget,
|
||||
html.dark .aksrt-theme-box,
|
||||
html.dark .theme-box,
|
||||
body.dark-theme .post-card,
|
||||
body.dark-theme .widget,
|
||||
body.dark-theme .aksrt-theme-box,
|
||||
body.dark-theme .theme-box {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
/**
|
||||
* AKSRT Typography — 1:1 Zibll Alignment
|
||||
*
|
||||
* 对齐 zibll main.css 的排版系统
|
||||
*/
|
||||
|
||||
/* ===== 全局标题 — 对齐 zibll line 8947 ===== */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
margin: 20px 0 10px;
|
||||
color: var(--key-color, #333);
|
||||
}
|
||||
|
||||
h1 { font-size: 22px; }
|
||||
h2 { font-size: 20px; }
|
||||
h3 { font-size: 18px; }
|
||||
h4 { font-size: 16px; }
|
||||
h5 { font-size: 15px; }
|
||||
h6 { font-size: 14px; }
|
||||
|
||||
/* ===== 文章正文 — 对齐 zibll line 8740 ===== */
|
||||
.wp-posts-content,
|
||||
.entry-content,
|
||||
.prose {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
color: var(--main-color, #4e5358);
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
/* ===== 文章内标题 — 对齐 zibll line 8947 ===== */
|
||||
.wp-posts-content h1,
|
||||
.wp-posts-content h2,
|
||||
.wp-posts-content h3,
|
||||
.wp-posts-content h4,
|
||||
.wp-posts-content h5,
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4,
|
||||
.entry-content h5,
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5 {
|
||||
font-weight: 700;
|
||||
margin: 20px 0 10px;
|
||||
color: var(--key-color, #333);
|
||||
}
|
||||
|
||||
.wp-posts-content h1,
|
||||
.entry-content h1,
|
||||
.prose h1 { font-size: 22px; }
|
||||
|
||||
.wp-posts-content h2,
|
||||
.entry-content h2,
|
||||
.prose h2 { font-size: 20px; }
|
||||
|
||||
.wp-posts-content h3,
|
||||
.entry-content h3,
|
||||
.prose h3 { font-size: 18px; }
|
||||
|
||||
.wp-posts-content h4,
|
||||
.entry-content h4,
|
||||
.prose h4 { font-size: 16px; }
|
||||
|
||||
/* ===== 段落 — 对齐 zibll line 8999 ===== */
|
||||
.wp-posts-content p,
|
||||
.entry-content p,
|
||||
.prose p {
|
||||
margin: 0 0 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* ===== 链接 — 对齐 zibll line 8836 ===== */
|
||||
.wp-posts-content a,
|
||||
.entry-content a,
|
||||
.prose a {
|
||||
color: var(--focus-color, #f04494);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-posts-content a:hover,
|
||||
.entry-content a:hover,
|
||||
.prose a:hover {
|
||||
color: var(--focus-color, #f04494);
|
||||
}
|
||||
|
||||
/* ===== 图片 — 对齐 zibll line 8850 ===== */
|
||||
.wp-posts-content img,
|
||||
.entry-content img,
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* ===== 内联代码 — 对齐 zibll line 8844 ===== */
|
||||
.wp-posts-content code:not(pre code),
|
||||
.entry-content code:not(pre code),
|
||||
.prose code:not(pre code) {
|
||||
color: #ff3c98;
|
||||
background: rgba(253, 153, 153, 0.2);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* ===== 代码块 — 对齐 zibll ===== */
|
||||
.wp-posts-content pre,
|
||||
.entry-content pre,
|
||||
.prose pre {
|
||||
position: relative;
|
||||
background: #282c34;
|
||||
color: #abb2bf;
|
||||
padding: 15px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
overflow-x: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.wp-posts-content pre code,
|
||||
.entry-content pre code,
|
||||
.prose pre code {
|
||||
color: inherit;
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* ===== 表格 — 对齐 zibll line 8897 ===== */
|
||||
.wp-posts-content table,
|
||||
.entry-content table,
|
||||
.prose table {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.wp-posts-content th,
|
||||
.wp-posts-content td,
|
||||
.entry-content th,
|
||||
.entry-content td,
|
||||
.prose th,
|
||||
.prose td {
|
||||
border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wp-posts-content th,
|
||||
.entry-content th,
|
||||
.prose th {
|
||||
background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wp-posts-content tr:hover,
|
||||
.entry-content tr:hover,
|
||||
.prose tr:hover {
|
||||
background-color: rgba(240, 68, 148, 0.05);
|
||||
}
|
||||
|
||||
/* ===== 列表 — 对齐 zibll line 8977 ===== */
|
||||
.wp-posts-content ul,
|
||||
.wp-posts-content ol,
|
||||
.entry-content ul,
|
||||
.entry-content ol,
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
margin: 10px 0 20px 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.wp-posts-content li,
|
||||
.entry-content li,
|
||||
.prose li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ===== 引用 — 对齐 zibll line 680 ===== */
|
||||
.wp-posts-content blockquote,
|
||||
.entry-content blockquote,
|
||||
.prose blockquote {
|
||||
padding: 15px 20px;
|
||||
margin: 0 0 20px;
|
||||
border-left: 4px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
|
||||
font-size: 16px;
|
||||
color: var(--muted-color, #777);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wp-posts-content blockquote p:last-child,
|
||||
.entry-content blockquote p:last-child,
|
||||
.prose blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===== 水平分割线 — 对齐 zibll line 676 ===== */
|
||||
hr {
|
||||
border-color: var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
}
|
||||
|
||||
/* ===== Strong / Bold ===== */
|
||||
strong, b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,530 @@
|
||||
/**
|
||||
* AKSRT User Home / Author Page — 公开用户主页 & 作者归档页样式
|
||||
*
|
||||
* Zibll 风格作者页布局
|
||||
* 在 /user/{nicename}/ 和 /author/{nicename}/ 加载
|
||||
*/
|
||||
|
||||
/* ============================================================
|
||||
* Author Hero — 统一的作者头区（与 zibll author-header 对齐）
|
||||
* ============================================================ */
|
||||
.aksrt-author-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
background: var(--surface-1);
|
||||
border: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover {
|
||||
position: relative;
|
||||
padding-bottom: calc(20% + 80px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover-metas {
|
||||
position: absolute;
|
||||
right: 58px;
|
||||
bottom: 12px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.aksrt-author-hero__cover-meta i {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 18px 28px 24px;
|
||||
margin-top: -60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__avatar img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius);
|
||||
border: 4px solid var(--surface-1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__avatar img:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.aksrt-author-hero__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-top: 65px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-ink);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__desc {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
line-height: 1.5;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
/* Body stats row removed for Zibll author parity; counts live in tabs. */
|
||||
.aksrt-author-hero__stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface-2);
|
||||
color: var(--color-ink-3);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__stat strong {
|
||||
color: var(--color-ink);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__contacts {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__contacts .profile-social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 68px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__follow-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__follow-btn[aria-disabled="true"] {
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 18px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__notice--muted,
|
||||
.aksrt-author-hero__notice--restricted {
|
||||
color: #92400e;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.aksrt-author-hero__notice--banned {
|
||||
color: #b91c1c;
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
/* No-cover variant */
|
||||
.aksrt-author-hero--no-cover {
|
||||
border: 1px solid var(--color-line-soft);
|
||||
}
|
||||
|
||||
.aksrt-author-hero--no-cover .aksrt-author-hero__body {
|
||||
margin-top: 0;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero--no-cover .aksrt-author-hero__info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.aksrt-author-hero--no-cover .aksrt-author-hero__actions {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Author hero responsive */
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-author-hero__body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 12px 16px 20px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__desc {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__contacts {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__contacts .profile-social-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__actions {
|
||||
padding-top: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.aksrt-author-hero__cover {
|
||||
padding-bottom: calc(20% + 60px);
|
||||
}
|
||||
|
||||
.aksrt-author-hero__body {
|
||||
margin-top: -40px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__avatar img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__name {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.aksrt-user-home .aksrt-user-home__layout {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.aksrt-user-home .aksrt-user-home__aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
|
||||
.aksrt-user-home .aksrt-user-home__contacts .profile-social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-user-home .user-home-balance-card {
|
||||
padding: 28px;
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.04));
|
||||
border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.aksrt-user-home .user-home-balance-card__label {
|
||||
margin: 0 0 10px;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-user-home .user-home-balance-card__value {
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.aksrt-user-home .user-home-balance-card__hint {
|
||||
margin: 14px 0 18px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
/* 内容区卡片 — 覆盖全局 .dashboard max-width，与头部卡片等宽 */
|
||||
.aksrt-user-home .dashboard--public {
|
||||
max-width: none;
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Tab 栏增强 */
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-3);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button:hover {
|
||||
color: var(--color-ink);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button.is-active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button.is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--color-ink-4);
|
||||
background: var(--surface-3);
|
||||
border-radius: 100px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button.is-active .dashboard-tabs__count {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
/* 面板内容 */
|
||||
.aksrt-user-home .dashboard--public .dashboard-panel {
|
||||
animation: panel-fade-in 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes panel-fade-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ==================== 焦点状态（无障碍）==================== */
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ==================== 空状态增强 ==================== */
|
||||
.aksrt-user-home .profile-empty {
|
||||
padding: 48px 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-home .profile-empty__icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* ==================== 响应式 ==================== */
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.aksrt-user-home .dashboard--public {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard--public .dashboard-tabs button {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* User-home follow tab */
|
||||
.aksrt-user-home .uh-follow__subtabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--c-border, #e8e8e8);
|
||||
}
|
||||
|
||||
.aksrt-user-home .uh-follow__subtab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-pill, 999px);
|
||||
font-size: 13px;
|
||||
color: var(--c-text-3, #999);
|
||||
text-decoration: none;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.aksrt-user-home .uh-follow__subtab:hover {
|
||||
color: var(--c-text-1, #333);
|
||||
background: var(--c-fill-1, #f5f5f5);
|
||||
}
|
||||
|
||||
.aksrt-user-home .uh-follow__subtab.is-active {
|
||||
background: var(--c-primary, #1890ff);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-user-home .uh-follow__subtab-count {
|
||||
font-size: 11px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.aksrt-user-home .uh-follow__pagination {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Full-width public home (Zibll author: no commerce sidebar) */
|
||||
.aksrt-user-home .content-layout--no-sidebar .content-layout__primary {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-user-home .dashboard-tabs__count.opacity8 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.aksrt-author-hero__identity {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: .15rem;
|
||||
}
|
||||
.aksrt-author-hero__identity .aksrt-ip-geo-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.aksrt-author-hero__identity .aksrt-medal-entry,
|
||||
.aksrt-author-hero__identity .badg { height: 26px; box-sizing: border-box; margin: 0; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 26px; }
|
||||
.aksrt-profile-details-modal { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 20px; }
|
||||
.aksrt-profile-details-modal[hidden] { display: none !important; }
|
||||
.aksrt-profile-details-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 15, 22, .52); }
|
||||
.aksrt-profile-details-modal__dialog { position: relative; width: min(100%, 420px); padding: 24px; border-radius: 16px; background: var(--color-card, #fff); box-shadow: 0 24px 64px rgba(0,0,0,.24); }
|
||||
.aksrt-profile-details-modal__dialog h2 { margin: 0 28px 16px 0; font-size: 18px; }
|
||||
.aksrt-profile-details-modal__dialog dl { display: grid; gap: 12px; margin: 0; }
|
||||
.aksrt-profile-details-modal__dialog dl div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; }
|
||||
.aksrt-profile-details-modal__dialog dt { color: var(--color-muted, #6b7280); }
|
||||
.aksrt-profile-details-modal__dialog dd { margin: 0; overflow-wrap: anywhere; }
|
||||
.aksrt-profile-details-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; cursor: pointer; }
|
||||
|
||||
@@ -0,0 +1,365 @@
|
||||
/**
|
||||
* VIP pay modal + hover cards (zibll payvip-modal / vip-card).
|
||||
*/
|
||||
|
||||
.aksrt-vip-modal-panel {
|
||||
width: min(560px, 100%);
|
||||
max-height: min(90vh, 760px);
|
||||
overflow: auto;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
/* VIP now uses the shared modal runtime host. */
|
||||
.aksrt-modal-runtime.aksrt-vip-modal-shell {
|
||||
z-index: 1200;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog {
|
||||
width: min(560px, 100%);
|
||||
max-height: min(90vh, 760px);
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.payvip-modal {
|
||||
position: relative;
|
||||
padding: 18px 16px 16px;
|
||||
}
|
||||
|
||||
.aksrt-vip-points-modal__title {
|
||||
margin: 0 0 6px;
|
||||
padding-right: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.aksrt-vip-points-modal__desc,
|
||||
.aksrt-vip-points-modal__note {
|
||||
margin: 0 0 12px;
|
||||
color: var(--muted-color, #777);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.aksrt-vip-points-modal__balance {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 0 0 14px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
border-radius: 10px;
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
.aksrt-vip-points-modal__balance-label { color: var(--muted-color, #777); font-size: 13px; }
|
||||
.aksrt-vip-points-modal__balance-value { color: #047857; font-size: 17px; }
|
||||
.aksrt-vip-points-modal__packages { display: grid; gap: 9px; margin-bottom: 14px; }
|
||||
.aksrt-vip-points-option { display: block; cursor: pointer; }
|
||||
.aksrt-vip-points-option > input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
.aksrt-vip-points-option__card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 4px 10px;
|
||||
padding: 12px 13px;
|
||||
border: 1px solid var(--color-line, rgba(0, 0, 0, 0.1));
|
||||
border-radius: 10px;
|
||||
background: var(--main-bg-color, #fff);
|
||||
transition: border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.aksrt-vip-points-option__title { font-size: 14px; }
|
||||
.aksrt-vip-points-option__days { color: var(--muted-color, #777); font-size: 12px; }
|
||||
.aksrt-vip-points-option__cost { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #047857; font-size: 14px; font-weight: 700; }
|
||||
.aksrt-vip-points-option > input:checked + .aksrt-vip-points-option__card {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
|
||||
}
|
||||
.aksrt-vip-points-option > input:focus-visible + .aksrt-vip-points-option__card { outline: 3px solid rgba(16, 185, 129, 0.3); outline-offset: 2px; }
|
||||
.aksrt-vip-points-option.is-disabled { cursor: not-allowed; opacity: .55; }
|
||||
.aksrt-vip-points-option.is-disabled .aksrt-vip-points-option__cost { color: #b91c1c; }
|
||||
.aksrt-vip-points-modal__empty { padding: 22px 12px; color: var(--muted-color, #777); text-align: center; }
|
||||
.aksrt-vip-points-submit {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #059669, #10b981);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
.aksrt-vip-points-submit:disabled { cursor: not-allowed; opacity: .5; }
|
||||
.aksrt-vip-points-submit.is-loading { cursor: wait; opacity: .7; }
|
||||
.aksrt-vip-points-modal__tip { min-height: 1.4em; margin: 9px 0 0; }
|
||||
@media (max-width: 480px) {
|
||||
.aksrt-vip-points-modal { padding: 16px 13px 14px; }
|
||||
.aksrt-vip-points-modal__balance { align-items: flex-start; flex-direction: column; gap: 3px; }
|
||||
}
|
||||
|
||||
|
||||
.aksrt-modal-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.vip-cardminis {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vip-cardminis > li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vip-cardminis a.aksrt-vip-tab {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.05));
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vip-cardminis > li.active a.aksrt-vip-tab {
|
||||
background: linear-gradient(90deg, #ff6b6b, #f04494);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pay-vip-form-row {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.pay-vip-form-row {
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
}
|
||||
}
|
||||
|
||||
.aksrt-vip-level-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.aksrt-vip-level-header .aksrt-vip-level-icon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
||||
}
|
||||
|
||||
.pay-vip-info.level-1 {
|
||||
background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 152, 0, 0.08));
|
||||
}
|
||||
|
||||
.pay-vip-info.level-2 {
|
||||
background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(63, 81, 181, 0.08));
|
||||
}
|
||||
|
||||
/* Modal-only equity (admin HTML; no forced bullets) */
|
||||
.payvip-modal .v-equity,
|
||||
.aksrt-vip-modal-panel .v-equity {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.payvip-modal .v-equity > li,
|
||||
.aksrt-vip-modal-panel .v-equity > li {
|
||||
display: block;
|
||||
margin: 0 0 6px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.payvip-modal .v-equity > li::before,
|
||||
.payvip-modal .v-equity > li::after,
|
||||
.aksrt-vip-modal-panel .v-equity > li::before,
|
||||
.aksrt-vip-modal-panel .v-equity > li::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.aksrt-vip-products {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-vip-product-label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aksrt-vip-product-label input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vip-product {
|
||||
position: relative;
|
||||
padding: 12px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: var(--main-bg-color, #fff);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.aksrt-vip-product-label input:checked + .vip-product {
|
||||
border-color: #f04494;
|
||||
box-shadow: 0 0 0 1px #f04494;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vip-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0 10px 0 8px;
|
||||
background: #ffc107;
|
||||
color: #5c3b00;
|
||||
}
|
||||
|
||||
.aksrt-vip-submit {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(90deg, #ff6b6b, #f04494);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-vip-submit.is-loading,
|
||||
.aksrt-vip-submit:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.uc-vip-shop__tip.is-error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* Header hover VIP cards
|
||||
* Markup: .navbar-vip > .navbar-vip-hover.hover-show > a + .hover-show-con.sub-vip-card
|
||||
* (hover-show is on the INNER span, not on .navbar-vip itself)
|
||||
*/
|
||||
.navbar-vip-hover.hover-show,
|
||||
.navbar-vip .hover-show {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sub-vip-card {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 0px);
|
||||
right: 0;
|
||||
z-index: 60;
|
||||
width: max-content;
|
||||
max-width: min(520px, 92vw);
|
||||
padding: 10px;
|
||||
padding-top: 12px; /* hover bridge */
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
gap: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navbar-vip-hover.hover-show:hover .sub-vip-card,
|
||||
.navbar-vip-hover.hover-show:focus-within .sub-vip-card,
|
||||
.navbar-vip .hover-show:hover .sub-vip-card,
|
||||
.navbar-vip .hover-show:focus-within .sub-vip-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vip-card {
|
||||
position: relative;
|
||||
flex: 1 1 160px;
|
||||
min-width: 150px;
|
||||
padding: 14px 12px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #2b2f3a, #1b1e27);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vip-card.vip-theme1 {
|
||||
background: linear-gradient(135deg, #f6c453, #f39c12);
|
||||
color: #3b2a00;
|
||||
}
|
||||
|
||||
.vip-card.vip-theme2 {
|
||||
background: linear-gradient(135deg, #8e44ad, #3f51b5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vip-card .payvip-button {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vipbg-v2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #ffb347, #ff6b6b);
|
||||
}
|
||||
|
||||
.vipbg-v2.level-2 {
|
||||
background: linear-gradient(90deg, #9b59b6, #3f51b5);
|
||||
}
|
||||
|
||||
.vip-expdate-tag {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
lass="fixed-body" data-toggle-class="mobile-navbar-show" data-target="body"></div></div><div class="header-slider-container relative mb20 card-4 filter-blur"><div class="relative zib-slider"><div class="new-swiper slide-index slide-header" data-direction="horizontal" data-effect="slide" data-loop="true" data-autoplay="1" data-interval="6000" data-spaceBetween="0" style="--m-height :280px;--pc-height :550px;"><div class="swiper-wrapper"><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/slider-bg.jpg" alt="幻灯片 - Demo本地"></a></div><div class="swiper-slide "><a href="https://www.zibll.com/" target="_blank" rel="noopener noreferrer"><img class="radius8" src="https://localhost/wp-content/themes/AKSRT-theme/assets/vendor/zibll/img/user_t.jpg" alt="幻灯片 - Demo本地"></a></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination kaoyou"></div></div></div><div class="header-slider-search abs-center"><div class="header-slider-search-more text-center before">更优雅的WordPress主题这是导航栏幻灯片多功能组件，可在后台进行配置</div><div class="search-input"><form method="get" class="padding-10 search-form" action="https://localhost/"><div class="line-form"><div class="search-input-text"><input type="text" name="s" class="line-form-input" tabindex="1" value=""><i class="line-form-line"></i><div class="scale-placeholder" default="开启精彩搜索">开启精彩搜索</div><div class="abs-right muted-color"><button type="submit" tabindex="2" class="null" aria-label="搜索"><i class="fa fas fa-search" aria-hidden="true"></i></button></div></div><input type="hidden" name="type" value="post"></div></form></div></div><div class="header-slider-card container"><div class="flex jse flex-row gutters-5 flex-col-sm-2"><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-yellow" style="font-size: 25px;"><i class="fa fas fa-home em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 图标卡片</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir c-blue-2" style="font-size: 25px;"><i class="fa fas fa-cog em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 原创作品</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-pink" style="font-size: 25px;"><i class="fa fas fa-wrench em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 灵感来源NEW</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div><div class="flex1"><div class="icon-cover-card flex ac zib-widget"><div class="icon-cover-icon badg cir jb-cyan" style="font-size: 25px;"><i class="fa fas fa-shield-alt em09" aria-hidden="true"></i></div><div class="icon-cover-desc ml10 flex1 px12-sm"> <div class="em12 text-ellipsis font-bold"> 系统工具 GO</div><div class="muted-color mt6 text-ellipsis"> 这是一个图标卡片示例</div></div></div></div></div></div></div>
|
||||
@@ -0,0 +1,35 @@
|
||||
aksrt-gutenberg-blocks-front
|
||||
aksrt-style
|
||||
aksrt-tokens
|
||||
aksrt-core-reset
|
||||
aksrt-core-typography
|
||||
aksrt-core-buttons
|
||||
aksrt-core-forms
|
||||
aksrt-core-alerts
|
||||
aksrt-ext-animations
|
||||
aksrt-ext-components-ext
|
||||
aksrt-ext-color-utilities
|
||||
aksrt-base
|
||||
aksrt-card-primitives
|
||||
aksrt-overlay-primitives
|
||||
aksrt-layout
|
||||
aksrt-footer
|
||||
aksrt-floating-buttons
|
||||
aksrt-enhancements
|
||||
aksrt-skeleton
|
||||
aksrt-empty-state
|
||||
aksrt-pagination
|
||||
aksrt-ajax-spinner
|
||||
aksrt-modal-runtime
|
||||
aksrt-vip-modal
|
||||
aksrt-post-card
|
||||
aksrt-sidebar
|
||||
aksrt-breadcrumb
|
||||
aksrt-homepage-fixed-base-1
|
||||
aksrt-homepage-fixed-base-2
|
||||
aksrt-homepage-fixed-base-3
|
||||
aksrt-homepage-fixed-ajax-tab-skeleton-placeholder
|
||||
aksrt-homepage-fixed
|
||||
aksrt-notyf
|
||||
aksrt-site-notice
|
||||
aksrt-widget-system
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
const fs=require('fs');
|
||||
const files=fs.readdirSync('.tmp-shots/css').filter(f=>f.endsWith('.css'));
|
||||
for(const f of files){
|
||||
const css=fs.readFileSync('.tmp-shots/css/'+f,'utf8');
|
||||
for(const tok of ['.em09','.em12','.px12-sm','.icon-cover-desc']){
|
||||
let i=css.indexOf(tok);
|
||||
if(i>=0) console.log(f,'|',tok,'| idx',i,'| ctx:',css.slice(Math.max(0,i-50),i+70).replace(/\s+/g,' '));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
console.log('A', process.version)
|
||||
@@ -0,0 +1,9 @@
|
||||
const fs=require("fs");
|
||||
const files=fs.readdirSync(".tmp-shots/css").filter(f=>f.endsWith(".css"));
|
||||
let found=0;
|
||||
for(const f of files){
|
||||
const css=fs.readFileSync(".tmp-shots/css/"+f,"utf8");
|
||||
const i=css.indexOf(".px12-sm");
|
||||
if(i>=0){found++; console.log(f, i);}
|
||||
}
|
||||
console.log("done", files.length, found);
|
||||
@@ -0,0 +1,5 @@
|
||||
const fs=require("fs");
|
||||
console.log("t3 dir:", fs.readdirSync(".tmp-shots").join(",").slice(0,200));
|
||||
console.log("t3 css count:", fs.readdirSync(".tmp-shots/css").length);
|
||||
console.log("t3 exists main:", fs.existsSync(".tmp-shots/css/main.min.css-44"));
|
||||
console.log("t3 cwd:", process.cwd());
|
||||
@@ -0,0 +1,9 @@
|
||||
const fs=require("fs");
|
||||
const files=fs.readdirSync(".tmp-shots/css");
|
||||
for(const f of files){
|
||||
const css=fs.readFileSync(".tmp-shots/css/"+f,"utf8");
|
||||
for(const tok of [".px12-sm",".em12{",".em09{","icon-cover"]){
|
||||
let i=css.indexOf(tok);
|
||||
if(i>=0) console.log(f,"|",tok,"|",css.slice(Math.max(0,i-60),i+80).replace(/\s+/g," "));
|
||||
}
|
||||
}
|
||||
@@ -97,6 +97,14 @@ main.container,
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Header multifunc icon cards: pin typography baseline so cards render
|
||||
* identically on all pages. .px12-sm is only defined globally in
|
||||
* zibll-utilities.css, which is @import'd by the single-post aggregator;
|
||||
* vendor CSS pins it at <=640px / .sidebar / .mobile-nav-widget only. */
|
||||
.header-slider-card .icon-cover-card {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container,
|
||||
main.container {
|
||||
|
||||
@@ -32,6 +32,10 @@ test('homepage horizontal cards render fully from Zibll CSS with no dedicated st
|
||||
assert.equal(fs.existsSync(path.join(root, 'assets/css/frontend/header-cards.css')), false);
|
||||
assert.doesNotMatch(baseCss, /\.icon-cover-card\.aksrt-icon-cover-card/);
|
||||
assert.doesNotMatch(baseCss, /\.header-components-card/);
|
||||
assert.match(
|
||||
baseCss,
|
||||
/\.header-slider-card\s+\.icon-cover-card\s*\{[^}]*font-size:\s*12px/s,
|
||||
);
|
||||
assert.doesNotMatch(scripts, /header-cards/);
|
||||
assert.doesNotMatch(widgetCss, /aksrt-widget-icon-cards \.icon-cover-card/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user