Files
wordpress-theme-aksrt/assets/css/frontend/resource-meta/part-4.css
T
kate522 9375b1c30c refactor(assets): vendor 资产迁入标准目录并全仓去除 zibll 标识
- assets/vendor 全量迁移: fontawesome5→assets/fontawesome5, css→assets/css,
  js→assets/js/runtime(避开 14 个同名自有文件), img 合并去重→assets/img,
  fonts→assets/fonts; 删除 assets/vendor
- libs 五个与 widgets/third-party 字节相同的库不重复入库, loader paths 改指向
- 运行时切换: _win.uri=assets 根, loader baseUrl=/js/runtime, enlighter 注入
  路径同步; PHP 7 个引用文件切换并改名 $zibll_*→$runtime_*
- 去品牌: Qinver 头注释/品牌 console.log/演示链接清除, 默认文案中性化
- 功能标识符改名: zib__→aksrt__, zib_ajax→aksrt_ajax, window.zib→
  window.aksrtLegacy, zibllblock/*→aksrtblock/*, .zib-widget→.aksrt-panel,
  .zib-slider→.aksrt-slider, zib_menu_options meta 键等
- 自有 CSS 改名: legacy-utilities/compat-vars/footer shell
- admin SPA 重建; 契约测试同步(路径/断言/文件更名)
- 例外保留: tests/visual 对照环境与 fixtures 前缀(外部 Zibll 产品引用)

验证: php -l 133 个改动文件通过; runtime 86 个 JS node --check 通过;
契约测试 68/70(2 个失败经 stash 对照确认为存量问题)
2026-08-22 16:16:30 +08:00

301 lines
8.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
color: var(--color-ink-4, #8A8F98);
}
/* ----- 移动端悬浮下载按钮(FAB) ----- */
.resource-mobile-fab {
display: none; /* 默认隐藏,移动端媒体查询中启用 */
position: fixed;
bottom: 72px;
right: 20px;
z-index: 950;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary, #3B82F6);
color: #fff;
text-decoration: none;
display: flex; /* 覆盖上面的 display:none */
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 16px rgba(59,130,246,0.35), 0 2px 6px rgba(0,0,0,0.1);
opacity: 0;
transform: scale(0.8) translateY(10px);
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
pointer-events: none;
-webkit-tap-highlight-color: transparent;
animation: fabFadeIn 0.5s 1.5s forwards;
}
@keyframes fabFadeIn {
to {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
}
.resource-mobile-fab:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 6px 24px rgba(59,130,246,0.45), 0 4px 10px rgba(0,0,0,0.15);
color: #fff;
}
.resource-mobile-fab:active {
transform: scale(0.95);
transition-duration: 0.1s;
}
/* FAB脉冲效果(吸引注意) */
.resource-mobile-fab::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--color-primary, #3B82F6);
opacity: 0;
animation: fabPulse 2s 2.5s infinite;
}
@keyframes fabPulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
/* ============================================================
* 响应式媒体查询
* ============================================================ */
/* 移动端/平板(< 992px):显示移动端下载栏和FAB */
@media (max-width: 991px) {
.resource-mobile-download-bar {
display: block;
}
.resource-mobile-fab {
display: flex;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
right: calc(20px + env(safe-area-inset-right, 0px));
}
/* 超小屏适配(<= 380px) */
@media (max-width: 380px) {
.resource-mobile-download-bar .resource-download-box__header {
flex-wrap: wrap;
gap: 8px;
padding: 14px 12px 10px;
}
.resource-mobile-download-bar .resource-download-box__list {
padding: 10px 12px 14px;
gap: 8px;
}
.resource-mobile-download-bar .resource-download-box__btn {
min-height: 46px;
padding: 10px 14px;
font-size: 13px;
}
.resource-mobile-download-bar .resource-download-box__title {
font-size: 14px;
}
.resource-mobile-download-bar .resource-download-box__hint,
.resource-mobile-download-bar .resource-download-box__footer,
.resource-mobile-download-bar .resource-download-box__captcha {
margin-left: 12px;
margin-right: 12px;
}
}
}
/* 桌面端(>= 992px):隐藏移动端元素,保持原侧栏布局 */
@media (min-width: 992px) {
.resource-mobile-download-bar {
display: none !important;
}
.resource-mobile-fab {
display: none !important;
}
}
/* ============================================================
* 云服务品牌按钮样式
* ============================================================ */
.resource-download-box__btn--service-baidu {
background: linear-gradient(135deg, #1578f8 0%, #0d65d9 100%);
}
.resource-download-box__btn--service-lanzou {
background: linear-gradient(135deg, #f37526 0%, #e06318 100%);
}
.resource-download-box__btn--service-aliyun {
background: linear-gradient(135deg, #6666ff 0%, #5050e0 100%);
}
.resource-download-box__btn--service-weiyun {
background: linear-gradient(135deg, #4facfe 0%, #3a8fd4 100%);
}
.resource-download-box__btn--service-onedrive {
background: linear-gradient(135deg, #0078d4 0%, #006abc 100%);
}
.resource-download-box__btn--service-tianyi {
background: linear-gradient(135deg, #0099ff 0%, #0080e0 100%);
}
.resource-download-box__btn--service-123pan {
background: linear-gradient(135deg, #2b7bff 0%, #1a65e0 100%);
}
.resource-download-box__btn--service-quark {
background: linear-gradient(135deg, #6a5acd 0%, #5a4ab5 100%);
}
.resource-download-box__btn--service-xunlei {
background: linear-gradient(135deg, #00a4ff 0%, #0090e0 100%);
}
.resource-download-box__btn--service-mega {
background: linear-gradient(135deg, #d92323 0%, #c01a1a 100%);
}
.resource-download-box__btn--service-github {
background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);
}
/* 云服务徽章 */
.resource-download-box__service-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
color: #fff;
margin-left: 6px;
letter-spacing: 0.02em;
line-height: 1.3;
}
/* ============================================================
* 元信息卡片图标增强
* ============================================================ */
.resource-meta-box__key {
display: flex;
align-items: center;
gap: 8px;
}
.resource-meta-box__key i {
width: 16px;
text-align: center;
color: var(--color-ink-4, #8A8F98);
font-size: 13px;
flex-shrink: 0;
}
/* ============================================================
* 渐变价格标签(模仿 legacy 渐变 pay-tag)
* ============================================================ */
.resource-download-box__price--gradient {
background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
color: #fff;
font-weight: 700;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
}
.resource-download-box__price--gradient.is-free {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}
/* ============================================================
* 销量/下载量徽章
* ============================================================ */
.resource-download-box__sales-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
white-space: nowrap;
}
/* ============================================================
* 下载框整体增强 — 模仿 legacy pay-box 视觉重量
* ============================================================ */
.resource-download-box {
position: relative;
overflow: visible;
}
.resource-download-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* ============================================================
* 付费类型徽章 — 模仿 legacy 渐变 pay-tag
* ============================================================ */
.resource-pay-type-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
color: #fff;
line-height: 1.3;
letter-spacing: 0.02em;
}
.resource-pay-type-badge i {
font-size: 10px;
}
/* 在归档卡片上的徽章位置 */
.post-card .resource-pay-type-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}
/* 在下载框内的徽章 */
.resource-download-box__header .resource-pay-type-badge {
margin-left: 8px;
}
/* ============================================================
* 原价划线 — 模仿 legacy .original-price
* ============================================================ */
.resource-original-price {
font-size: 13px;
color: var(--color-ink-4);
text-decoration: line-through;
margin-left: 6px;
}
.resource-original-price::before {
content: '';