/* ============================================================ * ThinkDIY 排行 - 前台样式 * * 颜色策略（变量定义在 .tdr-* 容器上，不是 :root， * 这样才能读到上主题定义的 --wp--preset--color-*） * * fallback 顺序： * 1. 插件后台设置页填的自定义色 --tdr-custom-* * 2. 新区块主题的语义色 --wp--preset--color--primary / contrast / base … * 3. 旧默认调色板 --wp--preset--color--black / white / cyan-bluish-gray * 4. 硬编码默认值 * ============================================================ */ .tdr-list-wrapper, .tdr-view-wrapper { --tdr-primary: var(--tdr-custom-primary, var(--wp--preset--color--primary, var(--wp--preset--color--black, #1a1a1a))); --tdr-primary-hover: var(--tdr-custom-primary-hover, var(--wp--preset--color--secondary, #333333)); --tdr-text: var(--tdr-custom-text, var(--wp--preset--color--contrast, var(--wp--preset--color--black, #1a1a1a))); --tdr-text-secondary: var(--tdr-custom-text-secondary, var(--wp--preset--color--cyan-bluish-gray, #6b7280)); --tdr-surface: var(--tdr-custom-surface, var(--wp--preset--color--base, var(--wp--preset--color--white, #ffffff))); --tdr-border: var(--tdr-custom-border, var(--wp--preset--color--cyan-bluish-gray, #e5e7eb)); --tdr-bg-hover: var(--tdr-custom-bg, var(--wp--preset--color--cyan-bluish-gray, #f0f0f0)); } /* ============================================================ * 容器 * ============================================================ */ .tdr-list-wrapper, .tdr-view-wrapper { max-width: 900px; margin: 0 auto; padding: 10px 0 40px; color: var(--tdr-text); } /* ============================================================ * 分类导航 * ============================================================ */ .tdr-category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } .tdr-cat-link { display: inline-block; padding: 6px 16px; background: var(--tdr-bg-hover); border-radius: 20px; color: var(--tdr-text); text-decoration: none; font-size: 14px; transition: background 0.2s, color 0.2s; } .tdr-cat-link:hover { background: var(--tdr-border); } .tdr-cat-link.active { background: var(--tdr-primary); color: #fff; } /* ============================================================ * 列表 * ============================================================ */ .tdr-list { display: flex; flex-direction: column; gap: 10px; } .tdr-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--tdr-surface); border: 1px solid var(--tdr-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s; color: var(--tdr-text); } .tdr-list-item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .tdr-list-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; } .tdr-list-cat { display: inline-block; padding: 2px 12px; background: var(--tdr-bg-hover); border-radius: 14px; color: var(--tdr-text); text-decoration: none; font-size: 13px; white-space: nowrap; } .tdr-list-cat:hover { background: var(--tdr-border); } .tdr-list-title { font-size: 16px; font-weight: 500; color: var(--tdr-text); text-decoration: none; flex: 1; min-width: 0; word-break: break-word; } .tdr-list-title:hover { text-decoration: underline; } .tdr-list-date { font-size: 12px; color: var(--tdr-text-secondary); white-space: nowrap; } .tdr-list-btn { display: inline-block; padding: 6px 18px; background: var(--tdr-primary); color: #fff; border-radius: 6px; font-size: 13px; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } .tdr-list-btn:hover { opacity: 0.85; } /* ============================================================ * 分页 * ============================================================ */ .tdr-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 24px 0 8px; flex-wrap: wrap; } .tdr-pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 12px; border: 1px solid var(--tdr-border); background: var(--tdr-surface); border-radius: 6px; color: var(--tdr-text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: 0.2s; } .tdr-pagination .page-numbers:hover { background: var(--tdr-bg-hover); } .tdr-pagination .page-numbers.current { background: var(--tdr-primary); color: #fff; border-color: var(--tdr-primary); } /* ============================================================ * 空状态 * ============================================================ */ .tdr-empty-state { text-align: center; padding: 60px 20px; color: var(--tdr-text-secondary); } .tdr-empty-state .tdr-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; } .tdr-empty-state h3 { font-weight: 400; font-size: 17px; color: var(--tdr-text); margin: 0 0 4px; } .tdr-empty-state p { font-size: 13px; margin: 0; } /* ============================================================ * 详情页 * ============================================================ */ .tdr-view-title { font-size: 32px; font-weight: 500; margin: 0 0 10px; line-height: 1.3; color: var(--tdr-text); word-break: break-word; } .tdr-view-meta { display: flex; gap: 16px; font-size: 14px; color: var(--tdr-text-secondary); padding-bottom: 16px; border-bottom: 2px solid var(--tdr-border); margin-bottom: 22px; flex-wrap: wrap; } .tdr-view-cat { display: inline-block; padding: 2px 14px; background: var(--tdr-bg-hover); border-radius: 16px; color: var(--tdr-text); font-size: 13px; } .tdr-view-cover { margin-bottom: 20px; border-radius: 12px; overflow: hidden; } .tdr-view-cover img { width: 100%; height: auto; display: block; } .tdr-view-desc { font-size: 16px; line-height: 1.8; color: var(--tdr-text-secondary); background: var(--tdr-bg-hover); padding: 16px 22px; border-radius: 6px; border-left: 4px solid var(--tdr-primary); margin-bottom: 28px; } /* ============================================================ * 条目 * ============================================================ */ .tdr-items { margin-top: 8px; } .tdr-item-block { background: var(--tdr-bg-hover); border: 1px solid var(--tdr-border); border-radius: 6px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; } .tdr-item-block:hover { border-color: var(--tdr-primary); } .tdr-item-header { padding: 14px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--tdr-bg-hover); transition: background 0.2s; user-select: none; } .tdr-item-header:hover { background: var(--tdr-border); } .tdr-item-title { margin: 0; font-weight: bold; font-size: 20px; flex: 1; word-break: break-word; } .tdr-toggle { font-size: 18px; color: var(--tdr-text-secondary); transition: transform 0.3s; margin-left: 12px; flex-shrink: 0; } .tdr-toggle.open { transform: rotate(180deg); } .tdr-item-body { padding: 16px 20px 20px; border-top: 1px solid var(--tdr-border); background: var(--tdr-surface); } .tdr-item-content { font-size: 15px; line-height: 1.8; color: var(--tdr-text); word-break: break-word; } .tdr-item-content img { max-width: 100%; height: auto; display: block; margin: 8px auto; border-radius: 4px; } .tdr-item-content video, .tdr-item-content iframe { max-width: 100%; display: block; margin: 8px auto; border-radius: 4px; } .tdr-item-content .ql-align-center { text-align: center; } .tdr-item-content .ql-align-right { text-align: right; } .tdr-item-content .ql-align-justify { text-align: justify; } .tdr-item-content p { margin: 0 0 0.8em; } .tdr-item-content p:last-child { margin-bottom: 0; } .tdr-empty-tip { color: var(--tdr-text-secondary); padding: 10px 0; font-size: 14px; } /* ============================================================ * 返回按钮 * ============================================================ */ .tdr-view-back { margin-top: 30px; text-align: center; } .tdr-view-back a { display: inline-block; padding: 10px 32px; background: var(--tdr-primary); color: #fff; border-radius: 6px; text-decoration: none; font-size: 15px; transition: 0.2s; } .tdr-view-back a:hover { background: var(--tdr-primary-hover); transform: translateY(-2px); } /* ============================================================ * 响应式 * ============================================================ */ @media (max-width: 640px) { .tdr-view-title { font-size: 22px; } .tdr-list-item { padding: 10px 14px; gap: 8px; flex-wrap: wrap; } .tdr-list-info { width: 100%; gap: 8px; } .tdr-list-title { flex: 1 1 100%; font-size: 15px; } .tdr-list-date { display: none; } .tdr-list-btn { width: 100%; text-align: center; } .tdr-item-header { padding: 10px 14px; } .tdr-item-title { font-size: 16px; } .tdr-item-body { padding: 12px 14px 14px; } .tdr-view-back a { padding: 8px 20px; font-size: 14px; } }