/**
* WLBWeibo - 吾乐吧动态主题样式表
*
* @package WLBWeibo
* @version 1.0.0
*/
/* ============================================
CSS 变量
============================================ */
:root {
/* 主题色 */
--wlb-primary: #ff6b00;
--wlb-primary-hover: #e55e00;
--wlb-primary-light: #fff3e6;
--wlb-primary-bg: rgba(255, 107, 0, 0.08);
--wlb-primary-focus-ring: rgba(255, 107, 0, 0.1);
--wlb-primary-glow: rgba(255, 107, 0, 0.3);
--wlb-gradient-start: #ff8a00;
--wlb-gradient-end: #ff5d00;
--wlb-gradient-accent: #ff9a44;
/* 背景色 */
--wlb-bg: #f1f2f5;
--wlb-bg-white: #ffffff;
--wlb-bg-hover: #f7f8fa;
--wlb-bg-gray: #f5f5f5;
--wlb-bg-code: #f6f8fa;
--wlb-bg-code-inline: #eff1f3;
/* 边框 */
--wlb-border: #e8e8e8;
--wlb-border-light: #f0f0f0;
--wlb-border-medium: #e0e0e0;
/* 文字 */
--wlb-text-primary: #333333;
--wlb-text-secondary: #666666;
--wlb-text-muted: #999999;
--wlb-text-link: #eb7350;
--wlb-text-placeholder: #bbbbbb;
/* 语义色 */
--wlb-success: #52c41a;
--wlb-danger: #ff4d4f;
--wlb-warning: #faad14;
--wlb-info: #1890ff;
--wlb-danger-bg: #fff1f0;
--wlb-danger-bg-light: #fff0f0;
/* 阴影 */
--wlb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
--wlb-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
--wlb-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
--wlb-shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.3);
--wlb-shadow-navbar: 0 1px 3px rgba(0, 0, 0, 0.05);
--wlb-shadow-avatar: 0 2px 8px rgba(0, 0, 0, 0.15);
/* 圆角 */
--wlb-radius: 10px;
--wlb-radius-sm: 4px;
--wlb-radius-md: 8px;
--wlb-radius-lg: 16px;
--wlb-radius-full: 50%;
/* 间距 */
--wlb-gap: 16px;
--wlb-page-gap: 12px;
/* 字体 */
--wlb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--wlb-font-size-xs: 11px;
--wlb-font-size-sm: 12px;
--wlb-font-size-base: 13px;
--wlb-font-size-md: 14px;
--wlb-font-size-body: 15px;
--wlb-font-size-icon: 16px;
--wlb-font-size-lg: 18px;
--wlb-font-size-xl: 22px;
/* 导航 */
--wlb-nav-height: 52px;
/* 遮罩 */
--wlb-overlay-bg: rgba(0, 0, 0, 0.92);
--wlb-overlay-text: rgba(255, 255, 255, 0.8);
--wlb-overlay-btn-bg: rgba(255, 255, 255, 0.15);
--wlb-overlay-btn-hover: rgba(255, 255, 255, 0.3);
/* 第三方 */
--wlb-wechat: #07c160;
--wlb-qq: #12b7f5;
/* 热搜排名 */
--wlb-hot-rank-2: #ff7a45;
--wlb-hot-rank-3: #ffa940;
--wlb-tag-new-bg: #e6f7ff;
--wlb-tag-recommend-bg: #f6ffed;
/* 通用边框颜色 */
--wlb-border-dashed: #d9d9d9;
/* 表单成功背景 */
--wlb-form-success-bg: #f6ffed;
--wlb-form-success-border: #b7eb8f;
/* 审核状态 */
--wlb-review-pending-bg: #fff3cd;
--wlb-review-pending-text: #856404;
--wlb-review-pending-icon: #e6a817;
--wlb-review-rejected-bg: #fce8e6;
--wlb-review-rejected-text: #a03030;
--wlb-review-rejected-icon: #c44040;
/* 投诉状态 */
--wlb-complaint-pending-bg: #fff7e6;
--wlb-complaint-pending-text: #fa8c16;
--wlb-complaint-handled-bg: #f6ffed;
--wlb-complaint-handled-text: #52c41a;
--wlb-complaint-dismissed-bg: #f5f5f5;
--wlb-complaint-dismissed-text: #999;
/* 文章正文（GitHub风格） */
--wlb-article-text: #1f2328;
--wlb-article-text-muted: #656d76;
--wlb-article-border: #d1d9e0;
--wlb-article-border-dark: #30363d;
--wlb-article-blockquote-border: #d1d9e0;
--wlb-article-blockquote-text: #656d76;
--wlb-article-table-border: #d0d7de;
--wlb-article-table-th-bg: #ffffff;
--wlb-article-table-tr-bg: #ffffff;
--wlb-article-table-tr-stripe: #f6f8fa;
/* 暗黑模式文章正文 */
--wlb-article-text-dark: #e6edf3;
--wlb-article-text-muted-dark: #8b949e;
--wlb-article-border-dark-mode: #3b434b;
--wlb-article-table-th-bg-dark: #262626;
--wlb-article-table-tr-bg-dark: #262626;
--wlb-article-table-tr-stripe-dark: #2e2e2e;
/* Banner/Dropdown */
--wlb-banner-overlay: rgba(0,0,0,0.4);
--wlb-banner-dropdown-bg: rgba(0,0,0,0.7);
/* 取消按钮hover色 */
--wlb-cancel-hover: #ff4d4f;
/* 提示框 */
--wlb-tip-success-bg: #e8f8e8;
--wlb-tip-success-text: #389e0d;
--wlb-tip-success-border: #b7eb8f;
--wlb-tip-warning-bg: #fff7e6;
--wlb-tip-warning-text: #d48806;
--wlb-tip-warning-border: #ffd591;
--wlb-tip-error-text: #cf1322;
--wlb-tip-error-border: #ffa39e;
--wlb-tip-info-bg: #e6f4ff;
--wlb-tip-info-text: #0958d9;
--wlb-tip-info-border: #91caff;
/* 视频 */
--wlb-video-bg: #000000;
/* 表单成功提示 */
--wlb-success-bg: #f6ffed;
--wlb-success-border: #b7eb8f;
/* SVG 资源（统一管理，避免重复） */
--wlb-svg-spinner: url('data:image/svg+xml,');
--wlb-svg-spinner-dark: url('data:image/svg+xml,');
--wlb-svg-spinner-light: url('data:image/svg+xml,');
--wlb-cursor-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") 16 16, pointer;
--wlb-cursor-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") 16 16, pointer;
}
/* ============================================
全局重置
============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; min-height: 100vh; }
body { font-family: var(--wlb-font); font-size: 15px; line-height: 1.6; color: var(--wlb-text-primary); background: var(--wlb-bg); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--wlb-text-link); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--wlb-primary); }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
input, textarea { font-family: inherit; outline: none; }
/* ============================================
工具类（可复用样式）
============================================ */
/* ---- 布局 ---- */
.wlb-flex { display: flex; }
.wlb-flex-center { display: flex; align-items: center; }
.wlb-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wlb-flex-col { display: flex; flex-direction: column; }
.wlb-flex-wrap { flex-wrap: wrap; }
.wlb-flex-1 { flex: 1; min-width: 0; }
/* ---- 文字 ---- */
.wlb-text-xs { font-size: var(--wlb-font-size-xs); }
.wlb-text-sm { font-size: var(--wlb-font-size-sm); }
.wlb-text-base { font-size: var(--wlb-font-size-base); }
.wlb-text-md { font-size: var(--wlb-font-size-md); }
.wlb-text-lg { font-size: var(--wlb-font-size-lg); }
.wlb-text-muted { color: var(--wlb-text-muted); }
.wlb-text-secondary { color: var(--wlb-text-secondary); }
.wlb-text-primary { color: var(--wlb-primary); }
.wlb-text-danger { color: var(--wlb-danger); }
.wlb-text-center { text-align: center; }
.wlb-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wlb-text-bold { font-weight: 600; }
/* ---- 间距 ---- */
.wlb-mt-0 { margin-top: 0; }
.wlb-mt-4 { margin-top: 4px; }
.wlb-mt-8 { margin-top: 8px; }
.wlb-mt-12 { margin-top: 12px; }
.wlb-mt-16 { margin-top: 16px; }
.wlb-mb-0 { margin-bottom: 0; }
.wlb-mb-4 { margin-bottom: 4px; }
.wlb-mb-8 { margin-bottom: 8px; }
.wlb-mb-12 { margin-bottom: 12px; }
.wlb-mb-16 { margin-bottom: 16px; }
.wlb-ml-auto { margin-left: auto; }
/* ---- 通用组件 ---- */
.wlb-hidden { display: none; }
.wlb-block { display: block; }
.wlb-inline-flex { display: inline-flex; align-items: center; gap: 6px; }
.wlb-cursor-pointer { cursor: pointer; }
.wlb-no-decoration { text-decoration: none; }
.wlb-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- 通用文本框 ---- */
.wlb-textarea {
width: 100%; min-height: 40px; max-height: 200px; padding: 10px 12px;
border: 1px solid var(--wlb-border); border-radius: 6px;
font-size: 14px; color: var(--wlb-text-primary); transition: border-color 0.2s;
resize: none; line-height: 1.5; overflow-y: hidden;
}
.wlb-textarea:focus { border-color: var(--wlb-primary); box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring); }
.wlb-textarea::placeholder { color: var(--wlb-text-muted); }
/* ---- 通用提交按钮 ---- */
.wlb-btn-submit {
padding: 5px 18px; border-radius: 16px; background: var(--wlb-primary);
color: white; font-size: 13px; font-weight: 500; cursor: pointer;
transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
}
.wlb-btn-submit:hover { background: var(--wlb-primary-hover); }
/* ============================================
顶部导航栏
============================================ */
.wlb-navbar {
position: fixed; top: 0; left: 0; right: 0; height: var(--wlb-nav-height);
background: var(--wlb-bg-white); border-bottom: 1px solid var(--wlb-border);
z-index: 1000; box-shadow: var(--wlb-shadow-navbar);
}
.wlb-navbar-inner {
max-width: 1200px; margin: 0 auto; height: 100%;
display: flex; align-items: center; padding: 0 16px; gap: 16px;
}
.wlb-logo {
display: flex; align-items: center; gap: 8px;
font-size: 22px; font-weight: 700; color: var(--wlb-primary); flex-shrink: 0;
}
.wlb-logo:hover { color: var(--wlb-primary-hover); }
.wlb-logo-icon {
width: 144px; height: 32px; background: url('../img/logo.png') center/contain no-repeat;
border-radius: 0; flex-shrink: 0;
}
.wlb-logo-text {
display: flex; flex-direction: column; line-height: 1.1;
}
.wlb-logo-title {
font-size: 23px; font-weight: 600; color: var(--wlb-primary); letter-spacing: 5.5px;
}
.wlb-logo-sub {
font-size: 10px; font-weight: 400; color: var(--wlb-text-muted); letter-spacing: 2.0px;
}
.wlb-search {
flex: 0 1 200px; position: relative;
}
.wlb-search-input {
width: 100%; height: 32px; padding: 0 36px 0 12px;
border: 1px solid var(--wlb-border); border-radius: 16px;
background: var(--wlb-bg); font-size: 13px; color: var(--wlb-text-primary);
transition: all 0.2s;
}
.wlb-search-input:focus { border-color: var(--wlb-primary); background: var(--wlb-bg-white); box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring); }
.wlb-search-input::placeholder { color: var(--wlb-text-muted); }
.wlb-search-btn {
position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: var(--wlb-border); color: var(--wlb-text-muted); display: flex;
align-items: center; justify-content: center; font-size: 13px;
border: none; cursor: pointer; transition: all 0.2s;
}
.wlb-search-btn:hover { background: var(--wlb-primary); color: white; }
.wlb-search:focus-within .wlb-search-btn { background: var(--wlb-primary); color: white; }
/* 导航链接 */
.wlb-nav-links { display: flex; align-items: center; gap: 0; }
.wlb-nav-link {
padding: 6px 16px; border-radius: 16px; font-size: 15px;
color: var(--wlb-text-secondary); font-weight: 500; transition: all 0.2s;
}
.wlb-nav-link:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-nav-link.active { color: var(--wlb-primary); font-weight: 600; }
.wlb-nav-link i { display: none; }
/* 导航右侧 */
.wlb-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* 导航中间（移动端隐藏） */
.wlb-nav-center { display: none; }
/* 按钮 */
.wlb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 7px 18px; border-radius: 18px; font-size: 13px; font-weight: 500;
transition: all 0.2s; white-space: nowrap; cursor: pointer; border: none; line-height: 1;
}
.wlb-btn-primary { background: var(--wlb-primary); color: white; }
.wlb-btn-primary:hover { background: var(--wlb-primary-hover); color: white; }
.wlb-btn-outline { background: transparent; color: var(--wlb-primary); border: 1px solid var(--wlb-primary); }
.wlb-btn-outline:hover { background: var(--wlb-primary); color: white; }
.wlb-btn-ghost { background: transparent; color: var(--wlb-text-secondary); }
.wlb-btn-ghost:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-btn-danger { background: transparent; color: var(--wlb-danger); }
.wlb-btn-danger:hover { background: var(--wlb-danger-bg-light); color: var(--wlb-danger); }
.wlb-btn-sm { padding: 4px 12px; font-size: 12px; }
.wlb-btn-block { width: 100%; }
/* 个人主页/侧边栏关注按钮 */
.wlb-profile-follow-btn {
border: 1px solid transparent; /* 预留边框空间，防止切换时位置跳动 */
}
/* 已关注状态 */
.wlb-profile-follow-btn.followed {
background: var(--wlb-bg-light); color: var(--wlb-text-muted); border-color: var(--wlb-border-medium);
}
.wlb-profile-follow-btn.followed:hover { color: var(--wlb-danger); border-color: var(--wlb-danger); background: var(--wlb-danger-bg-light); }
/* 头像 */
.wlb-avatar {
width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
flex-shrink: 0; background: var(--wlb-border-light);
}
.wlb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wlb-avatar-sm { width: 34px; height: 34px; }
.wlb-avatar-lg { width: 48px; height: 48px; }
.wlb-avatar-xl { width: 64px; height: 64px; }
/* ============================================
页面布局 - 动态三栏结构
============================================ */
.wlb-page {
padding-top: calc(var(--wlb-nav-height) + var(--wlb-page-gap));
flex: none;
min-height: 100vh;
display: flex; flex-direction: column;
}
.wlb-container {
max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 16px;
display: flex; gap: 16px; align-items: flex-start;
flex: 1 0 auto;
}
.wlb-content-area {
flex: 1; min-width: 0; display: flex; gap: 16px; align-items: flex-start;
}
/* ============================================
左侧栏 - 动态风格
============================================ */
.wlb-sidebar-left {
width: 180px; flex-shrink: 0;
position: sticky;
top: calc(var(--wlb-nav-height) - var(--wlb-radius-sm));
align-self: flex-start;
}
/* 卡片基础样式 */
.wlb-side-card,
.wlb-hot-card,
.wlb-feed-card,
.wlb-album-card,
.wlb-settings-card,
.wlb-comments-section {
background: var(--wlb-bg-white);
border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card);
}
/* 左侧卡片样式 */
.wlb-side-card { margin-bottom: 12px; }
/* 左侧用户信息区域 */
.wlb-side-user {
padding: 16px 14px 12px;
}
.wlb-side-avatar {
display: flex; justify-content: center; margin-bottom: 8px;
}
.wlb-side-user-name {
font-size: 16px; font-weight: 600; color: var(--wlb-text-primary);
text-align: center; margin-bottom: 10px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wlb-side-user-stats {
display: flex; justify-content: center; gap: 20px; font-size: 12px; color: var(--wlb-text-muted);
}
.wlb-side-stat {
white-space: nowrap; text-align: center;
}
.wlb-side-stat strong {
color: var(--wlb-text-primary); font-weight: 600; font-size: 16px;
display: block; margin-bottom: 2px;
}
.wlb-side-stat span {
font-size: 12px;
}
/* 卡片头部 */
.wlb-side-card-header,
.wlb-card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--wlb-border-light);
}
/* 卡片标题基础样式 */
.wlb-side-card-title,
.wlb-card-title,
.wlb-album-card-title {
font-size: 14px; font-weight: 600; color: var(--wlb-text-primary);
}
/* 卡片标题（带图标布局） */
.wlb-side-card-title,
.wlb-album-card-title {
display: flex; align-items: center; gap: 8px;
}
.wlb-side-card-title i,
.wlb-album-card-title i {
color: var(--wlb-primary); font-size: 14px;
}
/* 左侧卡片内容 */
.wlb-side-card-body {
padding: 8px 0;
}
.wlb-side-menu-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px; color: var(--wlb-text-primary); font-size: 14px;
transition: all 0.15s; cursor: pointer; font-weight: 400;
}
.wlb-side-menu-item:hover { background: rgba(0,0,0,0.04); color: var(--wlb-primary); }
.wlb-side-menu-item.active { color: var(--wlb-primary); font-weight: 600; padding-left: 11px; }
.wlb-side-menu-item i { width: 16px; text-align: center; font-size: 13px; color: var(--wlb-text-muted); }
.wlb-side-menu-item.active i { color: var(--wlb-primary); }
.wlb-side-menu-count { font-size: 12px; color: var(--wlb-text-muted); margin-left: auto; }
/* TOC目录项（继承 .wlb-side-menu-item 基础样式，仅补充TOC特有样式） */
.toc-item {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block; min-width: 0;
}
.toc-level-2 { padding-left: 28px; font-size: 13px; }
/* TOC 展开/收起 */
.wlb-toc-header {
cursor: pointer; user-select: none;
}
.wlb-toc-toggle {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
color: var(--wlb-text-muted);
font-size: 11px;
transition: transform 0.25s ease, color 0.15s;
}
.wlb-toc-toggle:hover { color: var(--wlb-primary); }
.wlb-toc-header.collapsed .wlb-toc-toggle {
transform: rotate(180deg);
}
.wlb-toc-body {
transition: max-height 0.3s ease, padding 0.3s ease;
overflow: hidden;
}
.wlb-toc-body.collapsed {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================
中间主内容区
============================================ */
.wlb-main {
flex: 1; min-width: 0;
}
/* 右侧栏 */
.wlb-sidebar-right {
width: 280px; flex-shrink: 0;
position: sticky;
top: calc(var(--wlb-nav-height) - var(--wlb-radius-sm));
align-self: flex-start;
z-index: 10;
}
/* ============================================
发布框
============================================ */
.wlb-compose-card {
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card); padding: 7px 20px; margin-bottom: 12px;
}
.wlb-compose-body {
position: relative;
}
.wlb-compose-input {
width: 100%; min-height: 120px; max-height: 480px; padding: 10px 4px 0 4px; border: none;
font-size: 15px; color: var(--wlb-text-primary); resize: none;
line-height: 1.6; background: transparent; overflow-y: auto;
}
.wlb-compose-input::placeholder { color: var(--wlb-text-muted); }
.wlb-compose-input:focus { outline: none; }
.wlb-compose-category-row {
display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 0 0 8px 0;
}
.wlb-char-count {
font-size: 13px; color: var(--wlb-text-muted);
}
.wlb-char-count.over {
color: var(--wlb-danger);
}
.wlb-compose-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 7px; margin-top: 0; border-top: 1px solid var(--wlb-border-light);
}
.wlb-compose-tools { display: flex; align-items: center; gap: 4px; }
/* 内容分类按钮 */
.wlb-content-category-wrap {
position: relative;
}
.wlb-content-category-btn {
display: flex; align-items: center; gap: 4px;
padding: 4px 0; border-radius: 4px;
background: transparent; color: var(--wlb-text-muted);
font-size: 12px; cursor: pointer; transition: color 0.15s;
border: none;
}
.wlb-content-category-btn:hover {
color: var(--wlb-primary);
}
.wlb-content-category-btn .wlb-content-category-arrow {
font-size: 10px; transition: transform 0.2s;
}
.wlb-content-category-btn.active .wlb-content-category-arrow {
transform: rotate(180deg);
}
.wlb-content-category-text {
max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 内容分类面板 */
.wlb-content-category-panel {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 300px; background: var(--wlb-bg-white);
border-radius: 8px; box-shadow: var(--wlb-shadow-hover);
border: 1px solid var(--wlb-border-light);
padding: 0; z-index: 100;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all 0.2s;
}
.wlb-content-category-panel.active {
opacity: 1; visibility: visible; transform: translateY(0);
}
.wlb-content-category-header {
padding: 12px 16px;
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-content-category-title {
font-size: 14px; font-weight: 600; color: var(--wlb-text-primary);
}
.wlb-content-category-body {
padding: 12px 16px;
}
.wlb-content-category-tags {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.wlb-content-category-tag {
padding: 8px 10px; border-radius: 4px; font-size: 13px;
background: var(--wlb-bg); color: var(--wlb-text-secondary);
cursor: pointer; transition: all 0.2s; border: 1px solid transparent;
text-align: center;
}
.wlb-content-category-tag:hover {
background: var(--wlb-primary-bg); color: var(--wlb-primary);
border-color: var(--wlb-primary);
}
.wlb-content-category-tag.active {
background: var(--wlb-primary); color: white; border-color: var(--wlb-primary);
}
.wlb-compose-tool {
width: 34px; height: 34px; border-radius: 8px; display: flex;
align-items: center; justify-content: center; color: var(--wlb-text-muted);
font-size: 17px; transition: all 0.15s; cursor: pointer;
}
.wlb-compose-tool:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
/* 发布框/弹窗内的上传预览区域 */
.wlb-compose-card .wlb-upload-preview,
.wlb-publish-modal .wlb-upload-preview { padding: 4px 0 0; }
.wlb-compose-card .wlb-upload-preview-item,
.wlb-publish-modal .wlb-upload-preview-item { width: 80px; height: 80px; }
.wlb-compose-card .wlb-upload-preview-item img,
.wlb-publish-modal .wlb-upload-preview-item img { width: 80px; height: 80px; }
.wlb-compose-tool:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
/* ============================================
标签切换
============================================ */
.wlb-tabs {
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card); margin-bottom: 12px;
display: flex; padding: 0 16px;
}
.wlb-tab {
padding: 12px 20px; font-size: 14px; color: var(--wlb-text-secondary);
cursor: pointer; position: relative; transition: color 0.2s; font-weight: 500;
}
.wlb-tab:hover { color: var(--wlb-primary); }
.wlb-tab.active { color: var(--wlb-primary); font-weight: 600; }
.wlb-tab.active::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 24px; height: 3px; background: var(--wlb-primary); border-radius: 2px;
}
/* ============================================
信息流卡片
============================================ */
.wlb-feed-card { padding: 14px 16px; margin-bottom: 12px; }
.wlb-feed-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wlb-feed-user-info { flex: 1; min-width: 0; }
/* 内容区域缩进到头像后面（与用户名对齐，仅PC端） */
@media (min-width: 769px) {
.wlb-feed-card > .wlb-feed-title,
.wlb-feed-card > .wlb-feed-content,
.wlb-feed-card > .wlb-feed-content-wrapper,
.wlb-feed-card > .wlb-feed-images,
.wlb-feed-card > .wlb-feed-video,
.wlb-feed-card > .wlb-inline-viewer,
.wlb-feed-card > .wlb-feed-actions,
.wlb-feed-card > .wlb-repost-source-card,
.wlb-feed-card > .wlb-article-tags {
margin-left: 54px; /* 44px头像 + 10px间距 */
width: calc(100% - 54px);
box-sizing: border-box;
}
/* 转发/评论区：头像在左边，内容对齐到54px位置 */
.wlb-feed-card > .wlb-repost-expand,
.wlb-feed-card > .wlb-comment-expand {
margin-left: 0;
width: 100%;
box-sizing: border-box;
}
}
.wlb-feed-username { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.wlb-feed-name { font-size: 15px; font-weight: 600; color: var(--wlb-text-primary); cursor: pointer; }
.wlb-feed-name:hover { color: var(--wlb-primary); }
.wlb-feed-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 8px; font-size: 11px; font-weight: 500; }
/* 等级徽章颜色 */
.wlb-lv1 { color: #8c6e4a; }
.wlb-lv2 { color: #9ca3af; }
html.wlb-dark .wlb-lv2 { color: #d1d5db; }
.wlb-lv3 { color: #d97706; }
.wlb-lv4 { color: #14b8a6; }
.wlb-lv5 { color: #8b5cf6; }
.wlb-lv6 { color: #f97316; }
.wlb-lv7 { color: #f59e0b; }
.wlb-member-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 3px; border-radius: 0; font-size: 12px; font-weight: 600; margin-left: 3px; vertical-align: middle; }
.wlb-level-img { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
#wlbCheckinLevel .wlb-level-img { width: 15px; height: 15px; }
#wlbCheckinLevel { display: inline-flex; align-items: center; white-space: nowrap; min-width: 38px; flex: 1 1 auto; }
#wlbCheckinLevel i { margin-right: 3px; flex-shrink: 0; color: #e6a817; }
.wlb-level-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-member-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 3px; border-radius: 0; font-size: 12px; font-weight: 600; margin-left: 3px; vertical-align: middle; }
.wlb-level-img { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
#wlbCheckinLevel .wlb-level-img { width: 15px; height: 15px; }
.wlb-level-img { width: auto; height: 16px; vertical-align: middle; flex-shrink: 0; }
.wlb-checkin-stats .wlb-level-img { width: 14px; height: 14px; }
.wlb-badge-svip { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.wlb-badge-author { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
.wlb-badge-verified { background: var(--wlb-info); color: white; }
/* 置顶标识（与 .wlb-feed-badge 保持一致的圆角和字号） */
.wlb-feed-sticky { position: relative; }
.wlb-sticky-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; background: var(--wlb-primary); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 500; vertical-align: middle; flex-shrink: 0; }
.wlb-sticky-badge i { font-size: 9px; }
.wlb-review-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 500; vertical-align: middle; flex-shrink: 0; }
.wlb-review-badge i { font-size: 9px; }
.wlb-review-pending { background: var(--wlb-review-pending-bg); color: var(--wlb-review-pending-text); }
.wlb-review-pending i { color: var(--wlb-review-pending-icon); }
.wlb-review-rejected { background: var(--wlb-review-rejected-bg); color: var(--wlb-review-rejected-text); }
.wlb-review-rejected i { color: var(--wlb-review-rejected-icon); }
.wlb-review-reason { font-size: 12px; color: var(--wlb-review-rejected-text); background: var(--wlb-review-rejected-bg); padding: 8px 12px; margin: 0 0 8px 54px; border-radius: 6px; line-height: 1.5; word-break: break-all; }
.wlb-review-reason i { margin-right: 4px; color: var(--wlb-review-rejected-icon); }
.wlb-feed-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wlb-text-muted); }
.wlb-feed-detail {
color: var(--wlb-text-muted); font-size: 12px; text-decoration: none;
cursor: pointer; transition: color 0.2s;
}
.wlb-feed-detail:hover { color: var(--wlb-primary); text-decoration: underline; }
.wlb-feed-follow-btn {
padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: 500;
background: transparent; color: var(--wlb-primary); border: 1px solid var(--wlb-primary);
cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
.wlb-feed-follow-btn:hover { background: var(--wlb-primary); color: white; }
.wlb-feed-follow-btn.followed {
background: var(--wlb-bg-light); color: var(--wlb-text-muted); border-color: var(--wlb-border-medium);
}
.wlb-feed-follow-btn.followed:hover { color: var(--wlb-danger); border-color: var(--wlb-danger); background: var(--wlb-danger-bg-light); }
/* ============================================
签到卡片（精简/完整 双模式）
============================================ */
.wlb-checkin-body { padding: 8px 14px 10px; }
#wlbCheckinToggle { cursor: pointer; user-select: none; }
.wlb-checkin-arrow { font-size: 11px; color: var(--wlb-text-muted); transition: transform 0.25s; }
.wlb-checkin-card:not(.compact) .wlb-checkin-arrow { transform: rotate(180deg); }
/* 精简模式 */
.wlb-checkin-compact { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
/* 等级进度条 */
.wlb-checkin-progress { margin-top: 6px; }
.wlb-checkin-progress-bar {
height: 4px; background: var(--wlb-primary); border-radius: 2px;
transition: width 0.3s ease; min-width: 4px; /* 极低进度时也能看见 */
}
.wlb-checkin-progress-bar-wrap {
background: var(--wlb-border); border-radius: 2px; overflow: hidden; /* 轨道底色 */
}
.wlb-checkin-progress-text { display: block; font-size: 10px; color: var(--wlb-text-muted); margin-top: 3px; line-height: 1.3; }
.wlb-checkin-progress--max .wlb-checkin-progress-bar { background: linear-gradient(90deg, #ff6b00, #f0ad4e, #5cb85c); }
/* 紧凑模式（收起状态）：完全不显示进度条 */
.wlb-checkin-card.compact .wlb-checkin-progress { display: none; }
.wlb-checkin-btn {
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
padding: 5px 12px; border: none; border-radius: 14px;
background: var(--wlb-primary); color: #fff;
font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.wlb-checkin-btn:hover { background: var(--wlb-primary-hover); color: #fff; }
.wlb-checkin-btn.checked { background: transparent; color: var(--wlb-text-muted); border: 1px solid var(--wlb-border); cursor: default; pointer-events: none; }
.wlb-checkin-stats { display: flex; flex: 1; gap: 4px; font-size: 11px; color: var(--wlb-text-secondary); line-height: 1.7; min-width: 0; }
#wlbCheckinStreak { white-space: nowrap; flex-shrink: 0; }
#wlbCheckinPoints { white-space: nowrap; flex-shrink: 0; }
#wlbCheckinLevel { text-align: right; white-space: nowrap; min-width: 38px; flex: 1 1 auto; }
#wlbCheckinLevel::before { flex-shrink: 0; }
.wlb-level-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.wlb-checkin-stats i { width: 13px; text-align: center; }
.wlb-checkin-stats em { font-weight: 600; font-style: normal; color: var(--wlb-text-primary); }
#wlbCheckinStreak i { color: #ff6b00; }
#wlbCheckinPoints i { color: #f0ad4e; }
/* 精简隐藏完整 */
.wlb-checkin-card.compact .wlb-checkin-full { display: none; }
/* 完整模式 */
.wlb-checkin-card:not(.compact) .wlb-checkin-compact { flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
/* 日历加载 */
.wlb-cal-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 24px 0; color: var(--wlb-text-muted); font-size: 13px; }
.wlb-cal-loading i { margin-right: 6px; }
/* 日历导航 */
.wlb-cal-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0 6px; }
.wlb-cal-nav-btn { border: none; background: none; color: var(--wlb-text-muted); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 3px; }
.wlb-cal-nav-btn:hover { color: var(--wlb-primary); background: var(--wlb-bg); }
.wlb-cal-nav-btn.disabled { opacity: 0.3; pointer-events: none; }
.wlb-cal-month { font-size: 12px; font-weight: 600; color: var(--wlb-text-primary); min-width: 90px; text-align: center; }
/* 日历网格 */
.wlb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wlb-cal-hd { font-size: 10px; color: var(--wlb-text-muted); text-align: center; padding-bottom: 2px; }
.wlb-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 10px; position: relative; }
/* 积分圆点 */
.wlb-cal-pt { position: absolute; top: -6px; right: -6px; z-index: 1; font-size: 9px; font-weight: 700; line-height: 1; background: var(--wlb-primary); color: #fff; border-radius: 10px; min-width: 20px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.wlb-cal-day.ok .wlb-cal-pt { background: #fff; color: var(--wlb-primary); font-weight: 800; border: 1px solid rgba(0,0,0,0.1); }
.wlb-dark .wlb-cal-day.ok .wlb-cal-pt { background: #fff; color: var(--wlb-primary); border-color: rgba(0,0,0,0.2); }
/* 日期状态 */
.wlb-cal-day.e { background: none; }
.wlb-cal-day.ok { background: var(--wlb-primary); color: #fff; }
.wlb-cal-day.ms { color: var(--wlb-text-muted); opacity: 0.3; }
.wlb-cal-day.td { font-weight: 700; border: 1px solid var(--wlb-primary); color: var(--wlb-primary); }
.wlb-cal-day.td.ck:hover { background: var(--wlb-primary-light); }
.wlb-cal-day.ck { cursor: pointer; }
/* 宽限期内（冻结保护） */
.wlb-cal-day.gr { color: #3b82f6; border: 1px solid rgba(59,130,246,0.35); cursor: pointer; }
.wlb-cal-day.gr:hover { background: #ebf5ff; }
.wlb-dark .wlb-cal-day.gr:hover { background: rgba(59,130,246,0.18); }
/* 可补签 */
.wlb-cal-day.mu { cursor: pointer; border: 1px dashed var(--wlb-primary); color: var(--wlb-primary); opacity: 0.8; }
.wlb-cal-day.mu:hover { opacity: 1; background: var(--wlb-primary-light); }
/* 图例 */
.wlb-cal-legend { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 10px; color: var(--wlb-text-muted); flex-wrap: wrap; }
.wlb-ld { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 2px; vertical-align: middle; }
.wlb-ld.ok { background: var(--wlb-primary); }
.wlb-ld.gr { background: #fff; border: 1px solid rgba(59,130,246,0.6); }
.wlb-ld.mu { border: 1px dashed var(--wlb-primary); }
.wlb-cal-makeup-hint { margin-left: auto; }
/* 补签弹窗 */
.wlb-makeup-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); }
.wlb-makeup-content { background: var(--wlb-bg-white); border-radius: 12px; padding: 24px; max-width: 360px; width: 90%; text-align: center; }
.wlb-makeup-content h3 { font-size: 17px; margin-bottom: 8px; }
.wlb-makeup-cal { margin: 0 auto; max-width: 300px; }
.wlb-makeup-cal .wlb-cal-day.makeup { cursor: pointer; border: 1px dashed var(--wlb-primary); color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-makeup-cal .wlb-cal-day.makeup:hover { background: var(--wlb-primary-light); }
.wlb-makeup-cal .wlb-cal-day.makeup.selected { background: var(--wlb-primary); color: #fff; border-style: solid; }
.wlb-makeup-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.wlb-makeup-actions button { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.wlb-makeup-submit { background: var(--wlb-primary); color: #fff; }
.wlb-makeup-submit:disabled { opacity: 0.5; cursor: default; }
.wlb-makeup-cancel { background: var(--wlb-bg); color: var(--wlb-text-secondary); }
/* 更多操作按钮 */
.wlb-feed-more-wrap { position: relative; flex-shrink: 0; }
.wlb-feed-more-btn {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--wlb-text-muted); font-size: 12px;
cursor: pointer; transition: all 0.2s; background: none; border: none;
}
.wlb-feed-more-btn:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-feed-more-menu {
position: absolute; top: calc(100% + 4px); right: 0;
min-width: 140px; background: var(--wlb-bg-white);
border-radius: 8px; box-shadow: var(--wlb-shadow-hover);
border: 1px solid var(--wlb-border-light);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all 0.2s; z-index: 100; overflow: hidden;
}
.wlb-feed-more-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
.wlb-feed-more-item {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; font-size: 13px; color: var(--wlb-text-primary);
cursor: pointer; transition: background 0.15s;
}
.wlb-feed-more-item:hover { background: var(--wlb-bg); }
.wlb-feed-more-item i { width: 14px; text-align: center; color: var(--wlb-text-muted); font-size: 13px; }
.wlb-feed-more-item.danger { color: var(--wlb-danger); }
.wlb-feed-more-item.danger i { color: var(--wlb-danger); }
/* 卡片内容 */
.wlb-feed-content,
.wlb-feed-content-wrapper {
font-size: 15px; line-height: 1.7; color: var(--wlb-text-primary);
margin-bottom: 12px; word-wrap: break-word; word-break: break-word;
}
.wlb-feed-content-inner {
display: inline;
}
.wlb-feed-content-inner.full {
display: block;
}
/* 初始状态限制高度，防止网速慢时全文闪现。JS 处理后会移除 data-truncate 属性自动解除 */
.wlb-feed-content-inner.full[data-truncate="1"] {
max-height: 150px; overflow: hidden;
}
.wlb-feed-content-inner p {
margin-bottom: 14px; overflow-wrap: break-word; word-break: break-word;
}
/* ===== 行内 code ===== */
.wlb-feed-content-inner :not(pre) > code,
.wlb-article-body :not(pre) > code,
.wlb-repost-source-text :not(pre) > code {
display: inline-block;
padding: 0 4px;
margin: 0 1px 2px 1px;
font-size: 92%;
color: #c7254e;
background: #f9f2f4;
border-radius: 3px;
word-break: break-word;
}
.wlb-dark .wlb-feed-content-inner :not(pre) > code,
.wlb-dark .wlb-article-body :not(pre) > code,
.wlb-dark .wlb-repost-source-text :not(pre) > code {
color: #f7788d;
background: rgba(248,81,73,0.1);
}
/* ===== pre 代码块 ===== */
.wlb-feed-content-inner pre,
.wlb-article-body pre,
.wlb-repost-source-text pre {
background: #f6f8fa;
border-radius: 6px;
margin: 12px 0;
padding: 10px;
line-height: 1.4;
font-size: 14px;
position: relative;
overflow: hidden;
}
/* pre 内含 code 时有边框 */
.wlb-feed-content-inner pre:has(> code),
.wlb-article-body pre:has(> code),
.wlb-repost-source-text pre:has(> code) {
border: 1px solid #d0d7de;
}
.wlb-dark .wlb-feed-content-inner pre,
.wlb-dark .wlb-article-body pre,
.wlb-dark .wlb-repost-source-text pre {
background: #222;
border-color: #30363d;
}
/* 复制按钮（仅 icon，透明背景） */
.wlb-code-copy-btn {
position: absolute;
top: 6px;
right: 8px;
padding: 4px 8px;
background: none;
border: none;
color: var(--wlb-text-muted);
font-size: 15px;
cursor: pointer;
border-radius: 4px;
z-index: 1;
line-height: 1;
}
.wlb-code-copy-btn:hover {
background: rgba(0,0,0,0.06);
color: var(--wlb-primary);
}
.wlb-code-copy-btn.copied {
color: var(--wlb-success);
}
.wlb-dark .wlb-code-copy-btn:hover {
background: rgba(255,255,255,0.06);
}
/* pre 内 code 基础重置 */
.wlb-feed-content-inner pre > code,
.wlb-article-body pre > code,
.wlb-repost-source-text pre > code {
display: block;
overflow-x: auto;
padding: 12px;
background: none;
border: none;
border-radius: 0;
font-size: 100%;
white-space: pre;
color: #24292f;
}
.wlb-dark .wlb-feed-content-inner pre > code,
.wlb-dark .wlb-article-body pre > code,
.wlb-dark .wlb-repost-source-text pre > code {
color: #e6edf3;
}
/* code.hljs 容器 */
.wlb-feed-content-inner pre code.hljs,
.wlb-article-body pre code.hljs,
.wlb-repost-source-text pre code.hljs {
padding: 12px;
color: #24292f;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, sans-serif;
}
.wlb-dark .wlb-feed-content-inner pre code.hljs,
.wlb-dark .wlb-article-body pre code.hljs,
.wlb-dark .wlb-repost-source-text pre code.hljs {
background: #222;
color: #e6edf3;
}
/* 暗黑模式 hljs 语法色 */
html.wlb-dark .hljs-comment,
html.wlb-dark .hljs-quote { color: #8b949e; }
html.wlb-dark .hljs-keyword,
html.wlb-dark .hljs-selector-tag,
html.wlb-dark .hljs-type { color: #ff7b72; }
html.wlb-dark .hljs-string,
html.wlb-dark .hljs-addition { color: #a5d6ff; }
html.wlb-dark .hljs-number,
html.wlb-dark .hljs-literal { color: #79c0ff; }
html.wlb-dark .hljs-title,
html.wlb-dark .hljs-section { color: #d2a8ff; }
html.wlb-dark .hljs-attr,
html.wlb-dark .hljs-attribute,
html.wlb-dark .hljs-variable,
html.wlb-dark .hljs-template-variable { color: #79c0ff; }
html.wlb-dark .hljs-built_in,
html.wlb-dark .hljs-function .hljs-title { color: #d2a8ff; }
html.wlb-dark .hljs-meta { color: #8b949e; }
html.wlb-dark .hljs-tag { color: #7ee787; }
html.wlb-dark .hljs-name { color: #7ee787; }
/* ===== 代码块滚动条 ===== */
.wlb-feed-content-inner pre code::-webkit-scrollbar,
.wlb-article-body pre code::-webkit-scrollbar,
.wlb-repost-source-text pre code::-webkit-scrollbar {
height: 6px;
}
.wlb-feed-content-inner pre code::-webkit-scrollbar-thumb,
.wlb-article-body pre code::-webkit-scrollbar-thumb,
.wlb-repost-source-text pre code::-webkit-scrollbar-thumb {
background: var(--wlb-border);
border-radius: 3px;
}
.wlb-feed-content-inner pre code::-webkit-scrollbar-track,
.wlb-article-body pre code::-webkit-scrollbar-track,
.wlb-repost-source-text pre code::-webkit-scrollbar-track {
background: transparent;
}
.wlb-feed-ellipsis {
color: var(--wlb-text-muted);
}
.wlb-feed-expand-btn {
color: var(--wlb-primary); font-size: 15px; cursor: pointer;
font-weight: 500; display: inline; margin-left: 2px;
}
.wlb-feed-expand-btn:hover { text-decoration: underline; }
/* 视频 */
.wlb-feed-video {
margin-bottom: 10px; border-radius: 8px; overflow: hidden;
background: var(--wlb-video-bg);
}
.wlb-feed-video video {
width: 100%; display: block; outline: none;
}
/* 图片 */
.wlb-feed-images { display: grid; gap: 4px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
.wlb-feed-images.grid-1 { grid-template-columns: 1fr; max-width: 320px; }
.wlb-feed-images.grid-2 { grid-template-columns: 1fr 1fr; width: 75.6%; }
.wlb-feed-images.grid-3 { grid-template-columns: 1fr 1fr 1fr; width: 75.6%; }
.wlb-feed-images.grid-4 { grid-template-columns: 1fr 1fr; width: 75.6%; }
.wlb-feed-images.grid-9 { grid-template-columns: 1fr 1fr 1fr; width: 75.6%; }
.wlb-feed-images img.wlb-feed-image {
width: 100%; height: 100%; min-height: 50px;
aspect-ratio: 1; object-fit: cover; cursor: zoom-in; transition: opacity 0.2s;
background: var(--wlb-bg-gray) var(--wlb-svg-spinner) center/30px no-repeat;
}
.wlb-feed-images img.wlb-feed-image:hover { opacity: 0.9; }
.wlb-feed-images.grid-1 img.wlb-feed-image { aspect-ratio: 16/9; max-height: 260px; }
/* 相册图片占位 */
.wlb-album-item img {
background-color: var(--wlb-border-light);
background-image: var(--wlb-svg-spinner);
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
}
/* ============================================
长文特色图片 + 分类标签覆盖（标题/摘要已合并到内容，与短文共用样式）
============================================ */
/* 分类标签覆盖在特色图片左上角 */
.wlb-feed-article-thumb-cat {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 10px;
border-radius: 3px;
font-size: 12px;
line-height: 14px;
color: #fff;
background: rgba(0,0,0,0.55);
text-decoration: none;
z-index: 1;
}
.wlb-feed-article-thumb-cat:hover {
background: rgba(0,0,0,0.75);
color: #fff;
text-decoration: none;
}
/* ============================================
发现页 - 精选文章轮播区（横向轮播）
============================================ */
.wlb-discover-carousel {
position: relative;
width: 100%;
aspect-ratio: 16 / 5;
margin-bottom: 12px;
border-radius: var(--wlb-radius-sm);
overflow: hidden;
background: var(--wlb-bg);
box-shadow: var(--wlb-shadow-card);
}
.wlb-discover-carousel-track {
position: relative;
width: 100%;
height: 100%;
}
.wlb-discover-carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
display: block;
text-decoration: none;
color: #fff;
}
.wlb-discover-carousel-slide.active {
opacity: 1;
z-index: 1;
}
.wlb-discover-carousel-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.wlb-discover-carousel-slide:hover img {
transform: scale(1.03);
}
.wlb-discover-carousel-slide:hover {
color: #fff;
}
.wlb-discover-carousel-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 40px 24px 20px;
background: linear-gradient(transparent, rgba(0,0,0,0.75));
pointer-events: none;
}
.wlb-discover-carousel-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 12px;
background: var(--wlb-primary);
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
.wlb-discover-carousel-title {
font-size: 22px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wlb-discover-carousel-meta {
display: flex;
gap: 14px;
font-size: 13px;
opacity: 0.85;
}
/* 左右箭头 */
.wlb-discover-carousel-prev,
.wlb-discover-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,0.4);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s, background 0.25s;
}
.wlb-discover-carousel-prev { left: 12px; }
.wlb-discover-carousel-next { right: 12px; }
.wlb-discover-carousel:hover .wlb-discover-carousel-prev,
.wlb-discover-carousel:hover .wlb-discover-carousel-next {
opacity: 1;
}
.wlb-discover-carousel-prev:hover,
.wlb-discover-carousel-next:hover {
background: rgba(0,0,0,0.65);
}
/* 底部圆点 */
.wlb-discover-carousel-dots {
position: absolute;
bottom: 12px;
right: 16px;
z-index: 2;
display: flex;
gap: 6px;
}
.wlb-discover-carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.45);
cursor: pointer;
transition: background 0.25s, width 0.25s;
}
.wlb-discover-carousel-dot.active {
width: 20px;
border-radius: 4px;
background: #fff;
}
.wlb-discover-carousel-dot:hover:not(.active) {
background: rgba(255,255,255,0.75);
}
/* 响应式 */
@media (max-width: 768px) {
.wlb-discover-carousel {
width: 100%;
margin: 0;
border-radius: 0;
aspect-ratio: 16 / 5;
min-height: 110px; /* 防止 flex 子元素宽度未确定时高度坍塌 */
}
.wlb-discover-carousel-overlay {
padding: 24px 14px 14px;
}
.wlb-discover-carousel-title {
font-size: 16px;
}
.wlb-discover-carousel-meta {
font-size: 12px;
}
.wlb-discover-carousel-prev,
.wlb-discover-carousel-next {
width: 30px;
height: 30px;
font-size: 12px;
}
.wlb-discover-carousel-dots {
bottom: 8px;
right: 12px;
}
/* 移动端：去掉内容缩进，更紧凑 */
.wlb-feed-card > .wlb-feed-title,
.wlb-feed-card > .wlb-feed-content,
.wlb-feed-card > .wlb-review-reason,
.wlb-feed-card > .wlb-feed-content-wrapper,
.wlb-feed-card > .wlb-feed-images,
.wlb-feed-card > .wlb-feed-video,
.wlb-feed-card > .wlb-inline-viewer,
.wlb-feed-card > .wlb-feed-actions,
.wlb-feed-card > .wlb-repost-expand,
.wlb-feed-card > .wlb-comment-expand,
.wlb-feed-card > .wlb-repost-source-card,
.wlb-feed-card > .wlb-article-tags {
margin-left: 0;
width: 100%;
}
}
/* ============================================
操作栏 - 动态风格（转发/评论/点赞）
============================================ */
.wlb-feed-actions {
display: flex; align-items: center; padding-top: 8px;
border-top: 1px solid var(--wlb-border-light);
}
.wlb-feed-action {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 1px 0; color: var(--wlb-text-muted); font-size: 13px;
cursor: pointer; transition: color 0.15s;
}
.wlb-feed-action:hover { color: var(--wlb-primary); }
.wlb-feed-action.liked { color: var(--wlb-danger); }
.wlb-feed-action-icon { font-size: 15px; }
/* 评论关闭时的禁用状态 */
.wlb-feed-actions-closed {
opacity: 0.6;
}
.wlb-feed-action-disabled {
cursor: default !important;
color: var(--wlb-text-muted) !important;
font-size: 12px !important;
}
.wlb-feed-action-disabled:hover {
color: var(--wlb-text-muted) !important;
}
/* ============================================
内联转发/评论展开区域
============================================ */
.wlb-repost-expand,
.wlb-comment-expand {
display: none; padding: 14px 0 0; margin-top: 10px;
border-top: 1px solid var(--wlb-border-light);
}
.wlb-repost-expand.active,
.wlb-comment-expand.active { display: block; }
.wlb-repost-expand-input-wrap,
.wlb-comment-expand-input-wrap {
display: flex; gap: 10px; margin-bottom: 10px;
}
@media (min-width: 769px) {
.wlb-repost-expand-input-wrap,
.wlb-comment-expand-input-wrap {
gap: 22px; /* 32px头像 + 22px = 54px，与feed内容对齐 */
}
}
.wlb-repost-expand-input-wrap .wlb-avatar,
.wlb-comment-expand-input-wrap .wlb-avatar {
flex-shrink: 0;
}
.wlb-repost-expand-input-body,
.wlb-comment-expand-input-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 重置 WordPress comment_form 生成的包裹元素样式 */
.wlb-comment-expand-input-body #respond,
.wlb-comment-expand-input-body .comment-respond { margin: 0; padding: 0; width: 100%; }
.wlb-comment-expand-input-body #reply-title,
.wlb-comment-expand-input-body .comment-reply-title { display: none; margin: 0; padding: 0; }
.wlb-comment-expand-input-body .comment-respond > *:first-child { margin-top: 0; }
.wlb-comment-expand-input-body form { margin: 0; padding: 0; }
.wlb-comment-expand-input-body form > * { margin: 0; }
.wlb-repost-expand-textarea,
.wlb-comment-expand-textarea {
width: 100%; min-height: 40px; max-height: 200px; padding: 10px 12px;
border: 1px solid var(--wlb-border); border-radius: 6px;
font-size: 14px; color: var(--wlb-text-primary); transition: border-color 0.2s;
resize: none; line-height: 1.5; overflow-y: hidden;
}
.wlb-repost-expand-textarea:focus,
.wlb-comment-expand-textarea:focus { border-color: var(--wlb-primary); box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring); }
.wlb-repost-expand-textarea::placeholder,
.wlb-comment-expand-textarea::placeholder { color: var(--wlb-text-muted); }
/* 重置 WordPress comment_form 生成的包裹元素样式 */
.wlb-comment-expand-input-body #respond,
.wlb-comment-expand-input-body .comment-respond { margin: 0; padding: 0; width: 100%; }
.wlb-comment-expand-input-body #reply-title,
.wlb-comment-expand-input-body .comment-reply-title { display: none; margin: 0; padding: 0; }
.wlb-comment-expand-input-body .comment-respond > *:first-child { margin-top: 0; }
.wlb-comment-expand-input-body form { margin: 0; padding: 0; }
.wlb-comment-expand-input-body form > * { margin: 0; }
.wlb-repost-expand-textarea,
.wlb-comment-expand-textarea {
width: 100%; min-height: 40px; max-height: 200px; padding: 10px 12px;
border: 1px solid var(--wlb-border); border-radius: 6px;
font-size: 14px; color: var(--wlb-text-primary); transition: border-color 0.2s;
resize: none; line-height: 1.5; overflow-y: hidden;
}
.wlb-repost-expand-textarea:focus,
.wlb-comment-expand-textarea:focus { border-color: var(--wlb-primary); box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring); }
.wlb-repost-expand-textarea::placeholder,
.wlb-comment-expand-textarea::placeholder { color: var(--wlb-text-muted); }
.wlb-repost-expand-tools,
.wlb-comment-expand-tools {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
}
.wlb-repost-expand-tools-left,
.wlb-comment-expand-tools-left { display: flex; align-items: center; gap: 2px; }
.wlb-repost-expand-submit,
.wlb-comment-expand-submit {
padding: 5px 18px; border-radius: 16px; background: var(--wlb-primary);
color: white; font-size: 13px; font-weight: 500; cursor: pointer;
transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
}
.wlb-repost-expand-submit:hover,
.wlb-comment-expand-submit:hover { background: var(--wlb-primary-hover); }
.wlb-repost-expand-list,
.wlb-comment-expand-list { }
.wlb-repost-expand-item,
.wlb-comment-expand-item {
display: flex; gap: 10px; padding: 12px 0;
border-bottom: 1px solid var(--wlb-border-light);
}
@media (min-width: 769px) {
.wlb-repost-expand-item,
.wlb-comment-expand-item {
gap: 22px; /* 32px头像 + 22px = 54px，与feed内容对齐 */
}
}
.wlb-repost-expand-item:last-child,
.wlb-comment-expand-item:last-child { border-bottom: none; }
.wlb-repost-expand-item .wlb-avatar,
.wlb-comment-expand-item .wlb-avatar {
flex-shrink: 0;
}
.wlb-repost-expand-body,
.wlb-comment-expand-body { flex: 1; min-width: 0; }
.wlb-repost-expand-user,
.wlb-comment-expand-user {
font-size: 14px; font-weight: 500; color: var(--wlb-text-primary); margin-bottom: 3px;
}
.wlb-repost-expand-text,
.wlb-comment-expand-text {
font-size: 14px; line-height: 1.5; color: var(--wlb-text-primary); margin-bottom: 6px;
}
.wlb-repost-expand-meta,
.wlb-comment-expand-meta {
display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--wlb-text-muted);
}
.wlb-repost-expand-action,
.wlb-comment-expand-action { cursor: pointer; transition: color 0.15s; }
.wlb-repost-expand-action:hover,
.wlb-comment-expand-action:hover { color: var(--wlb-primary); }
.wlb-repost-expand-action.liked,
.wlb-comment-expand-action.liked { color: var(--wlb-danger); }
/* 转发/评论回复 */
.wlb-repost-reply-wrap {
margin-top: 8px; display: none;
}
.wlb-repost-reply-wrap.active { display: flex; gap: 8px; align-items: flex-start; }
.wlb-repost-reply-input,
.wlb-comment-reply-input {
flex: 1; min-height: 36px; padding: 8px 12px;
border: 1px solid var(--wlb-border); border-radius: 18px;
font-size: 13px; color: var(--wlb-text-primary); transition: border-color 0.2s;
}
.wlb-repost-reply-input:focus,
.wlb-comment-reply-input:focus { border-color: var(--wlb-primary); }
.wlb-repost-reply-input::placeholder,
.wlb-comment-reply-input::placeholder { color: var(--wlb-text-muted); }
.wlb-repost-reply-submit,
.wlb-comment-reply-submit {
padding: 6px 16px; border-radius: 18px; background: var(--wlb-primary);
color: white; font-size: 13px; font-weight: 500; cursor: pointer;
transition: background 0.2s; white-space: nowrap;
}
.wlb-repost-reply-submit:hover,
.wlb-comment-reply-submit:hover { background: var(--wlb-primary-hover); }
/* 子回复列表 */
.wlb-repost-replies,
.wlb-comment-replies {
margin-top: 8px; padding: 8px 12px; background: var(--wlb-bg-hover); border-radius: 8px;
}
.wlb-repost-reply-item,
.wlb-comment-reply-item {
display: flex; gap: 12px; padding: 6px 0;
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-comment-reply-item:last-of-type { border-bottom: none; }
.wlb-repost-reply-item:last-child { border-bottom: none; }
.wlb-repost-reply-body,
.wlb-comment-reply-body { flex: 1; }
.wlb-repost-reply-user,
.wlb-comment-reply-user { font-size: 13px; font-weight: 500; color: var(--wlb-text-primary); }
.wlb-repost-reply-to,
.wlb-comment-reply-to { color: var(--wlb-text-muted); font-weight: 400; }
.wlb-repost-reply-text,
.wlb-comment-reply-text { font-size: 13px; line-height: 1.5; color: var(--wlb-text-primary); margin: 2px 0 4px; }
.wlb-repost-reply-meta,
.wlb-comment-reply-meta { font-size: 12px; color: var(--wlb-text-muted); display: flex; gap: 12px; }
/* 空评论/转发提示 */
.wlb-empty-comment,
.wlb-empty-repost {
text-align: center; padding: 40px 20px; color: var(--wlb-text-muted);
}
.wlb-empty-comment i,
.wlb-empty-repost i {
font-size: 48px; margin-bottom: 12px; opacity: 0.3; display: block;
}
.wlb-empty-comment div,
.wlb-empty-repost div {
font-size: 14px;
}
.wlb-repost-reply-action,
.wlb-comment-reply-action { cursor: pointer; }
.wlb-repost-reply-action:hover,
.wlb-comment-reply-action:hover { color: var(--wlb-primary); }
.wlb-repost-reply-action.liked,
.wlb-comment-reply-action.liked { color: var(--wlb-danger); }
.wlb-comment-delete:hover { color: var(--wlb-primary); }
/* 评论区未登录提示 */
.wlb-comment-login-notice {
text-align: center;
padding: 20px;
color: var(--wlb-text-muted);
font-size: 13px;
background: var(--wlb-bg-gray);
border: 1px solid var(--wlb-border-light);
border-radius: var(--wlb-radius-sm);
margin: 10px 0;
}
.wlb-comment-login-notice-text {
margin-bottom: 12px;
}
.wlb-comment-login-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wlb-comment-login-link,
.wlb-comment-register-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 16px;
border-radius: var(--wlb-radius-sm);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all 0.15s;
}
.wlb-comment-login-link {
background: var(--wlb-primary);
color: #fff;
}
.wlb-comment-login-link:hover {
background: var(--wlb-primary-hover);
color: #fff;
}
.wlb-comment-register-link {
background: var(--wlb-bg-white);
color: var(--wlb-primary);
border: 1px solid var(--wlb-primary);
}
.wlb-comment-register-link:hover {
color: var(--wlb-primary);
background: var(--wlb-primary-bg);
}
/* 已删除评论占位样式 */
.wlb-comment-deleted-placeholder {
display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-comment-deleted-placeholder .wlb-comment-expand-body { flex: 1; min-width: 0; }
.wlb-comment-deleted-placeholder .wlb-comment-expand-text {
color: var(--wlb-text-muted); font-style: italic; font-size: 14px;
}
/* 展开/收起回复 */
.wlb-reply-hidden { display: none; }
.wlb-comment-replies.expanded .wlb-reply-hidden { display: flex; }
.wlb-replies-expand-wrap { padding: 6px 0 2px; }
.wlb-replies-expand-btn {
background: none; border: none; cursor: pointer;
font-size: 13px; color: var(--wlb-primary); padding: 4px 0;
display: inline-flex; align-items: center; gap: 4px;
}
.wlb-replies-expand-btn:hover { color: var(--wlb-primary-hover); }
.wlb-replies-expand-btn i { font-size: 11px; }
/* 评论列表样式 - 移除默认样式，子评论缩进1层 */
.wlb-comment-expand-list ol,
.wlb-comment-expand-list li {
list-style: none !important;
margin: 0;
padding: 0;
}
.wlb-comment-expand-list ol {
padding-left: 0;
}
/* 子评论缩进1层 */
.wlb-comment-expand-list ol ol {
padding-left: 40px;
border-left: 2px solid var(--wlb-border-light);
}
.wlb-comment-reply-to {
font-size: 12px; color: var(--wlb-text-muted); font-weight: 400;
}
.wlb-comment-reply-to a {
color: var(--wlb-primary); text-decoration: none;
}
.wlb-comment-reply-to a:hover {
text-decoration: underline;
}
/* ============================================
右侧栏 - 热门推荐
============================================ */
.wlb-hot-card { overflow: hidden; margin-bottom: 12px; }
.wlb-card-more { font-size: 12px; color: var(--wlb-text-muted); cursor: pointer; }
.wlb-card-more:hover { color: var(--wlb-primary); }
.wlb-hot-list { padding: 4px 0; }
.wlb-hot-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px; cursor: pointer; transition: background 0.15s;
}
.wlb-hot-item:hover { background: var(--wlb-bg-hover); }
/* 热门话题可点击样式 */
.wlb-hot-item[data-topic] {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
border-radius: 8px;
-webkit-transition: background 0.2s, box-shadow 0.2s;
transition: background 0.2s, box-shadow 0.2s;
}
.wlb-hot-item[data-topic]:hover .wlb-hot-title { color: var(--wlb-primary); }
/* 热门话题选中高亮（与分类筛选高亮风格一致） */
.wlb-hot-item.wlb-hot-topic-active {
background: var(--wlb-primary);
box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
}
.wlb-hot-item.wlb-hot-topic-active .wlb-hot-rank { color: rgba(255, 255, 255, 0.7); }
.wlb-hot-item.wlb-hot-topic-active .wlb-hot-title { color: #fff; }
.wlb-hot-item.wlb-hot-topic-active .wlb-hot-count { color: rgba(255, 255, 255, 0.8); }
.wlb-hot-item.wlb-hot-topic-active .wlb-hot-tag { background: rgba(255, 255, 255, 0.2); color: #fff; }
.wlb-hot-rank { width: 18px; font-size: 15px; font-weight: 700; text-align: center; flex-shrink: 0; }
.wlb-hot-rank.top-1 { color: var(--wlb-danger); }
.wlb-hot-rank.top-2 { color: var(--wlb-hot-rank-2); }
.wlb-hot-rank.top-3 { color: var(--wlb-hot-rank-3); }
.wlb-hot-info { flex: 1; min-width: 0; }
.wlb-hot-title {
font-size: 13px; color: var(--wlb-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wlb-hot-count { font-size: 11px; color: var(--wlb-text-muted); }
.wlb-hot-tag { padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 500; flex-shrink: 0; }
.wlb-tag-hot { background: var(--wlb-danger-bg); color: var(--wlb-danger); }
.wlb-tag-new { background: var(--wlb-tag-new-bg); color: var(--wlb-info); }
.wlb-tag-recommend { background: var(--wlb-tag-recommend-bg); color: var(--wlb-success); }
/* 最新评论（侧边栏） */
.wlb-latest-list { padding: 0; }
.wlb-latest-item {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
border-bottom: 1px solid var(--wlb-border-light); transition: background 0.15s;
}
.wlb-latest-item:last-child { border-bottom: none; }
.wlb-latest-item:hover { background: var(--wlb-bg-hover); }
.wlb-latest-avatar {
border: 2px solid var(--wlb-primary-light); border-radius: 50%; padding: 1px;
}
.wlb-latest-info { flex: 1; min-width: 0; }
.wlb-latest-user {
font-size: 13px; font-weight: 500; color: var(--wlb-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-decoration: none; display: inline-block;
}
.wlb-latest-user:hover { color: var(--wlb-primary); }
.wlb-latest-user-row { display: flex; align-items: center; gap: 3px; margin-bottom: 4px; }
.wlb-latest-text {
font-size: 13px; color: var(--wlb-text-secondary); line-height: 1.5; margin-bottom: 6px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wlb-latest-meta {
display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--wlb-text-muted);
}
.wlb-latest-article {
color: var(--wlb-text-muted); text-decoration: none;
max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wlb-latest-article:hover { color: var(--wlb-primary); }
/* 推荐用户 */
.wlb-recommend-list { padding: 4px 0; }
.wlb-recommend-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px; transition: background 0.15s;
}
.wlb-recommend-item:hover { background: var(--wlb-bg-hover); }
.wlb-recommend-info { flex: 1; min-width: 0; }
.wlb-recommend-name {
font-size: 13px; font-weight: 500; color: var(--wlb-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-decoration: none; display: block;
}
.wlb-recommend-name:hover { color: var(--wlb-primary); }
.wlb-recommend-name-row { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.wlb-recommend-item .wlb-avatar { text-decoration: none; }
.wlb-recommend-desc {
font-size: 11px; color: var(--wlb-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 热门标签云 - 3D 旋转 */
.wlb-tag-cloud-wrapper {
padding: 0 14px 12px;
min-height: 200px;
}
.wlb-tagcloud a {
font-size: 12px;
color: #fff;
padding: 0 !important;
text-decoration: none;
}
.wlb-tagcloud a:hover {
color: #fff !important;
text-decoration: none;
}
.wlb-tagcloud-item {
color: #fff;
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
}
.wlb-tagcloud-item:hover {
opacity: 1 !important;
z-index: 100 !important;
}
/* 左侧官方公告 */
.wlb-side-notice { padding: 4px 0; }
.wlb-side-notice-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 14px;
color: inherit; text-decoration: none;
transition: background 0.15s;
}
.wlb-side-notice-item:hover { background: var(--wlb-bg-hover); }
.wlb-side-notice-title {
flex: 1; min-width: 0;
font-size: 13px; color: var(--wlb-text-primary); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wlb-side-notice-item:hover .wlb-side-notice-title { color: var(--wlb-primary); }
.wlb-side-notice-date {
flex-shrink: 0;
font-size: 12px; color: var(--wlb-text-muted);
}
/* ============================================
文章详情页
============================================ */
.wlb-article-card {
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card); padding: 24px; margin-bottom: 12px;
}
.wlb-article-header { margin-bottom: 16px; align-items: center; }
.wlb-article-title {
font-size: 25px; font-weight: 700; color: var(--wlb-text-primary);
line-height: 1.4; margin-bottom: 12px;
}
.wlb-article-author { display: flex; align-items: center; gap: 10px; }
.wlb-article-author-info { flex: 1; }
.wlb-article-author-meta { font-size: 12px; color: var(--wlb-text-muted); }
/* ===== 文章详情页 - GitHub 风格排版 ===== */
.wlb-article-body {
font-size: 16px; line-height: 1.5; color: var(--wlb-article-text); margin-bottom: 20px;
max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
.wlb-dark .wlb-article-body { color: var(--wlb-article-text-dark); }
.wlb-article-body p { margin-top: 0; margin-bottom: 16px; overflow-wrap: break-word; word-break: break-word; }
.wlb-article-body a { color: var(--wlb-primary); text-decoration: none; word-break: break-all; }
.wlb-article-body a:hover { text-decoration: underline; color: var(--wlb-primary-hover); }
.wlb-dark .wlb-article-body a { color: var(--wlb-primary); }
.wlb-article-body h1, .wlb-article-body h2, .wlb-article-body h3,
.wlb-article-body h4, .wlb-article-body h5, .wlb-article-body h6 {
margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; color: var(--wlb-article-text);
}
.wlb-dark .wlb-article-body h1, .wlb-dark .wlb-article-body h2, .wlb-dark .wlb-article-body h3,
.wlb-dark .wlb-article-body h4, .wlb-dark .wlb-article-body h5, .wlb-dark .wlb-article-body h6 { color: var(--wlb-article-text-dark); }
.wlb-article-body h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--wlb-article-border); }
.wlb-dark .wlb-article-body h1 { border-bottom-color: var(--wlb-article-border-dark); }
.wlb-article-body h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--wlb-article-border); }
.wlb-dark .wlb-article-body h2 { border-bottom-color: var(--wlb-article-border-dark); }
.wlb-article-body h3 { font-size: 1.25em; }
.wlb-article-body h4 { font-size: 1em; }
.wlb-article-body h5 { font-size: 0.875em; }
.wlb-article-body h6 { font-size: 0.85em; color: var(--wlb-article-text-muted); }
.wlb-dark .wlb-article-body h6 { color: var(--wlb-article-text-muted-dark); }
.wlb-article-body ul { list-style: disc; margin-top: 0; margin-bottom: 16px; padding-left: 2em; }
.wlb-article-body ol { list-style: decimal; margin-top: 0; margin-bottom: 16px; padding-left: 2em; }
.wlb-article-body li { margin-bottom: 4px; }
.wlb-article-body li + li { margin-top: 4px; }
.wlb-article-body ul ul, .wlb-article-body ul ol,
.wlb-article-body ol ul, .wlb-article-body ol ol { margin-bottom: 0; }
.wlb-article-body blockquote {
margin: 0 0 16px 0;
padding: 12px 16px;
color: var(--wlb-article-blockquote-text);
border-left: 0.25em solid var(--wlb-article-blockquote-border);
background: #f6f8fa;
border-radius: 6px;
}
.wlb-dark .wlb-article-body blockquote {
color: var(--wlb-article-text-muted-dark);
border-left-color: var(--wlb-article-border-dark-mode);
background: #1c1c1c;
}
.wlb-article-body blockquote > :first-child { margin-top: 0; }
.wlb-article-body blockquote > :last-child { margin-bottom: 0; }
.wlb-article-body hr {
height: 0.25em; padding: 0; margin: 24px 0; background-color: var(--wlb-article-border); border: 0; border-radius: 2px;
}
.wlb-dark .wlb-article-body hr { background-color: var(--wlb-article-border-dark-mode); }
.wlb-article-body table {
border-spacing: 0; border-collapse: collapse; display: table;
max-width: 100%; width: auto; overflow: auto; margin: 16px 0;
}
.wlb-article-body table th, .wlb-article-body table td {
padding: 6px 13px; border: 1px solid var(--wlb-article-table-border);
word-break: break-word; overflow-wrap: break-word;
}
.wlb-article-body table th:first-child,
.wlb-article-body table td:first-child {
white-space: nowrap; min-width: 60px;
}
.wlb-dark .wlb-article-body table th, .wlb-dark .wlb-article-body table td { border-color: var(--wlb-article-border-dark-mode); }
.wlb-article-body table th { font-weight: 600; background-color: var(--wlb-article-table-th-bg); }
.wlb-dark .wlb-article-body table th { background-color: var(--wlb-article-table-th-bg-dark); }
.wlb-article-body table tr { background-color: var(--wlb-article-table-tr-bg); border-top: 1px solid var(--wlb-article-table-border); }
.wlb-dark .wlb-article-body table tr { background-color: var(--wlb-article-table-tr-bg-dark); border-top-color: var(--wlb-article-border-dark-mode); }
/* 偶数行（排除标题行） */
.wlb-article-body table tr:not(:first-child):nth-child(2n) { background-color: var(--wlb-article-table-tr-stripe); }
.wlb-dark .wlb-article-body table tr:not(:first-child):nth-child(2n) { background-color: var(--wlb-article-table-tr-stripe-dark); }
.wlb-article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.wlb-article-body * { max-width: 100%; }
.wlb-article-body strong { font-weight: 600; }
.wlb-article-body del { color: var(--wlb-article-text-muted); }
.wlb-article-body .alignnone { max-width: 100%; height: auto; }
.wlb-article-body .alignleft { float: left; margin: 0 16px 16px 0; }
.wlb-article-body .alignright { float: right; margin: 0 0 16px 16px; }
.wlb-article-body .aligncenter { display: block; margin: 16px auto; }
.wlb-article-body figure.alignnone, .wlb-article-body figure.alignleft,
.wlb-article-body figure.alignright, .wlb-article-body figure.aligncenter { max-width: 100%; }
.wlb-article-body .wp-caption { max-width: 100%; }
.wlb-article-body .wp-caption img { max-width: 100%; height: auto; border: none; }
.wlb-article-body .wp-caption-text { font-size: 13px; color: var(--wlb-article-text-muted); text-align: center; margin-top: 8px; }
.wlb-article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wlb-article-tag {
padding: 3px 10px; border-radius: 12px; font-size: 12px;
background: var(--wlb-bg); color: var(--wlb-text-secondary); cursor: pointer;
transition: all 0.2s; text-decoration: none; display: inline-block;
}
.wlb-article-tag:hover { background: var(--wlb-primary-light); color: var(--wlb-primary); }
/* ============================================
评论区（详情页）
============================================ */
.wlb-comments-section { padding: 16px; margin-bottom: 12px; }
.wlb-comments-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.wlb-comments-title { font-size: 15px; font-weight: 600; }
.wlb-comments-count { font-size: 12px; color: var(--wlb-text-muted); }
.wlb-comment-input-wrap { display: flex; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wlb-border-light); }
.wlb-comment-input {
flex: 1; min-height: 60px; padding: 10px 12px; border: 1px solid var(--wlb-border);
border-radius: 6px; font-size: 13px; color: var(--wlb-text-primary); resize: vertical;
transition: border-color 0.2s; line-height: 1.5;
}
.wlb-comment-input:focus { border-color: var(--wlb-primary); }
.wlb-comment-input::placeholder { color: var(--wlb-text-muted); }
.wlb-comment-submit-wrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.wlb-comment-list { }
.wlb-comment-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--wlb-border-light); }
.wlb-comment-item:last-child { border-bottom: none; }
.wlb-comment-body { flex: 1; min-width: 0; }
.wlb-comment-user { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.wlb-comment-name { font-size: 13px; font-weight: 500; color: var(--wlb-text-primary); }
.wlb-comment-time { font-size: 11px; color: var(--wlb-text-muted); }
.wlb-comment-text { font-size: 13px; line-height: 1.5; color: var(--wlb-text-primary); margin-bottom: 6px; }
.wlb-comment-actions { display: flex; align-items: center; gap: 14px; }
.wlb-comment-action {
display: flex; align-items: center; gap: 4px; font-size: 12px;
color: var(--wlb-text-muted); cursor: pointer; transition: color 0.15s;
}
.wlb-comment-action:hover { color: var(--wlb-primary); }
/* ============================================
错误页面（404等）
============================================ */
.wlb-error-page {
min-height: 100vh; display: flex; flex-direction: column;
background: var(--wlb-bg);
}
.wlb-error-main {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 40px 20px; position: relative; overflow: hidden;
}
.wlb-error-main::before,
.wlb-error-main::after {
content: ''; position: absolute; border-radius: 50%; opacity: 0.04;
background: var(--wlb-primary); pointer-events: none;
}
.wlb-error-main::before { width: 320px; height: 320px; top: -80px; right: -60px; }
.wlb-error-main::after { width: 240px; height: 240px; bottom: -60px; left: -40px; }
/* 浮动装饰 */
.wlb-error-deco {
position: absolute; opacity: 0.06; color: var(--wlb-primary);
pointer-events: none; animation: wlb-error-float 6s ease-in-out infinite;
}
.wlb-error-deco-1 { font-size: 28px; top: 15%; left: 10%; animation-delay: 0s; }
.wlb-error-deco-2 { font-size: 22px; top: 25%; right: 12%; animation-delay: 1.2s; }
.wlb-error-deco-3 { font-size: 18px; bottom: 30%; left: 8%; animation-delay: 2.4s; }
.wlb-error-deco-4 { font-size: 24px; bottom: 20%; right: 10%; animation-delay: 0.8s; }
.wlb-error-deco-5 { font-size: 20px; top: 50%; left: 50%; animation-delay: 1.8s; }
@keyframes wlb-error-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-16px) rotate(8deg); }
}
/* 内容区 */
.wlb-error-content { text-align: center; color: var(--wlb-text-muted); position: relative; z-index: 1; max-width: 420px; width: 100%; }
.wlb-error-icon { font-size: 80px; margin-bottom: 20px; opacity: 0.08; color: var(--wlb-primary); }
.wlb-error-code { font-size: 48px; font-weight: 700; color: var(--wlb-text-primary); margin-bottom: 8px; letter-spacing: 4px; }
.wlb-error-text { font-size: 15px; margin-bottom: 24px; }
/* 搜索框 */
.wlb-error-search { margin-bottom: 24px; }
.wlb-error-search form { display: flex; gap: 0; max-width: 320px; margin: 0 auto; }
.wlb-error-search-input {
flex: 1; height: 40px; padding: 0 14px; border: 1px solid var(--wlb-border);
border-right: none; border-radius: 20px 0 0 20px; font-size: 14px;
color: var(--wlb-text-primary); background: var(--wlb-bg-white); outline: none;
transition: border-color 0.2s;
}
.wlb-error-search-input:focus { border-color: var(--wlb-primary); }
.wlb-error-search-input::placeholder { color: var(--wlb-text-muted); }
.wlb-error-search-btn {
width: 44px; height: 40px; border: 1px solid var(--wlb-border);
border-radius: 0 20px 20px 0; background: var(--wlb-primary); color: #fff;
cursor: pointer; font-size: 14px; transition: background 0.2s;
}
.wlb-error-search-btn:hover { background: var(--wlb-primary-hover); }
/* 按钮组 */
.wlb-error-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
/* ============================================
认证页面（登录/注册）
============================================ */
.wlb-auth-page {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
padding: 32px 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
position: relative; overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.wlb-auth-page::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.wlb-auth-page::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom center;
background-size: cover;
}
.wlb-auth-card {
width: 100%; max-width: 440px; background: var(--wlb-bg-white);
border-radius: 12px; box-shadow: var(--wlb-shadow-heavy);
padding: 24px 28px; position: relative; z-index: 1;
}
.wlb-auth-theme-toggle {
position: fixed; top: 16px; right: 16px; z-index: 10;
width: 40px; height: 40px; border-radius: 50%; border: none;
background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8);
font-size: 16px; cursor: pointer; transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
.wlb-auth-theme-toggle:hover {
background: rgba(255,255,255,0.25); color: white; transform: scale(1.1);
}
.wlb-auth-header { text-align: center; margin-bottom: 18px; }
.wlb-auth-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wlb-auth-logo-icon {
width: 44px; height: 44px; background: linear-gradient(135deg, var(--wlb-primary), var(--wlb-gradient-accent));
border-radius: 12px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 22px; font-weight: 700;
}
.wlb-auth-title { font-size: 22px; font-weight: 700; color: var(--wlb-text-primary); margin-bottom: 4px; }
.wlb-auth-subtitle { font-size: 13px; color: var(--wlb-text-muted); }
/* 表单 */
.wlb-form-group { margin-bottom: 10px; }
.wlb-form-label { display: block; font-size: 13px; font-weight: 500; color: var(--wlb-text-secondary); margin-bottom: 5px; }
.wlb-form-input-wrap { position: relative; }
.wlb-form-input {
width: 100%; height: 38px; padding: 0 14px; border: 1px solid var(--wlb-border);
border-radius: 6px; font-size: 14px; color: var(--wlb-text-primary);
transition: all 0.2s; background: white;
}
.wlb-form-input:focus { border-color: var(--wlb-primary); box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring); }
.wlb-form-input::placeholder { color: var(--wlb-text-placeholder); }
.wlb-form-input-icon {
position: absolute; right: 10px; top: 0; bottom: 0;
display: flex; align-items: center; justify-content: center;
color: var(--wlb-text-muted); cursor: pointer; font-size: 14px; width: 30px;
}
.wlb-form-input-icon:hover { color: var(--wlb-primary); }
/* 邮箱验证码组 */
.wlb-email-code-group {
display: flex; gap: 10px; align-items: stretch;
}
.wlb-email-code-group .wlb-form-input {
flex: 1; min-height: 38px; height: 38px; box-sizing: border-box;
}
.wlb-send-code-btn {
min-height: 38px; height: 38px; padding: 0 14px; border-radius: 6px;
background: var(--wlb-primary-light); color: var(--wlb-primary);
font-size: 12px; font-weight: 500; border: 1px solid var(--wlb-primary);
cursor: pointer; transition: all 0.2s; white-space: nowrap;
box-sizing: border-box; display: flex; align-items: center; justify-content: center;
}
.wlb-send-code-btn:hover { background: var(--wlb-primary); color: white; }
.wlb-send-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 图形验证码 */
.wlb-captcha-group { display: flex; gap: 10px; align-items: stretch; }
.wlb-captcha-group .wlb-form-input { flex: 1; min-height: 38px; height: 38px; box-sizing: border-box; }
.wlb-captcha-group .wlb-captcha-img { height: 38px; flex-shrink: 0; }
.wlb-captcha-group .wlb-send-code-btn { flex-shrink: 0; }
.wlb-captcha-img { height: 38px; border-radius: 6px; cursor: pointer; border: 1px solid var(--wlb-border); flex-shrink: 0; }
/* 密码强度 */
.wlb-password-strength { margin-top: 5px; display: flex; align-items: center; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease; }
.wlb-password-strength.active { max-height: 30px; opacity: 1; }
.wlb-strength-bar { flex: 1; height: 3px; background: var(--wlb-border); border-radius: 2px; overflow: hidden; }
.wlb-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: all 0.3s; }
.wlb-strength-text { font-size: 11px; color: var(--wlb-text-muted); min-width: 40px; }
/* 复选框 */
.wlb-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wlb-text-secondary); cursor: pointer; position: relative; padding-left: 22px; }
.wlb-checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; }
.wlb-checkbox-custom {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; border: 1px solid var(--wlb-border);
border-radius: 3px; background: white; transition: all 0.2s;
}
.wlb-checkbox-label input[type="checkbox"]:checked + .wlb-checkbox-custom {
background: var(--wlb-primary); border-color: var(--wlb-primary);
}
.wlb-checkbox-label input[type="checkbox"]:checked + .wlb-checkbox-custom::after {
content: '✓'; display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; color: white; font-size: 12px; font-weight: 700;
}
/* 认证链接 */
.wlb-auth-links { text-align: center; margin-top: 12px; font-size: 13px; color: var(--wlb-text-muted); }
.wlb-auth-links a { color: var(--wlb-primary); font-weight: 500; }
/* 第三方登录 */
.wlb-thirdparty-divider {
display: flex; align-items: center; gap: 12px; margin: 16px 0;
color: var(--wlb-text-muted); font-size: 12px;
}
.wlb-thirdparty-divider::before, .wlb-thirdparty-divider::after {
content: ''; flex: 1; height: 1px; background: var(--wlb-border);
}
.wlb-thirdparty-buttons { display: flex; justify-content: center; gap: 14px; }
.wlb-thirdparty-btn {
width: 40px; height: 40px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 18px;
transition: all 0.2s; border: 1px solid var(--wlb-border); color: var(--wlb-text-secondary);
}
.wlb-thirdparty-btn:hover { border-color: var(--wlb-primary); color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-thirdparty-btn.wlb-wechat:hover { border-color: var(--wlb-wechat); color: var(--wlb-wechat); background: rgba(7,193,96,0.08); }
.wlb-thirdparty-btn.wlb-qq:hover { border-color: var(--wlb-qq); color: var(--wlb-qq); background: rgba(18,183,245,0.08); }
.wlb-auth-back { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--wlb-text-muted); }
.wlb-auth-back:hover { color: var(--wlb-primary); }
/* ============================================
页脚
============================================ */
/* 全站底部版权栏（footer.php，全宽） */
.wlb-footer {
width: 100%;
border: none;
background: var(--wlb-bg);
padding: 20px 0 28px;
margin-top: 10px;
position: relative;
}
.wlb-footer::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(to right, transparent, var(--wlb-border), transparent);
opacity: 0.6;
}
.wlb-footer-inner {
max-width: 1200px; margin: 0 auto; padding: 0 16px;
text-align: center;
}
.wlb-footer-links {
font-size: 13px; color: var(--wlb-text-muted);
margin-bottom: 8px;
}
.wlb-footer-links a {
color: var(--wlb-text-muted); text-decoration: none; transition: color 0.2s;
}
.wlb-footer-links a:hover { color: var(--wlb-primary); }
.wlb-footer-copyright {
font-size: 12px; color: var(--wlb-text-muted); line-height: 1.8; opacity: 0.8;
}
.wlb-footer-copyright a {
color: var(--wlb-text-muted); text-decoration: none;
}
.wlb-footer-copyright a:hover { color: var(--wlb-primary); }
/* 底部友情链接（footer 区域，标题在左，链接在右） */
.wlb-footer-friend-links {
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
padding-bottom: 14px;
position: relative;
}
.wlb-footer-friend-links::after {
content: '';
position: absolute;
bottom: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(to right, transparent, var(--wlb-border), transparent);
opacity: 0.6;
}
.wlb-footer-friend-links-title {
font-size: 13px; font-weight: 600; color: var(--wlb-text-secondary);
white-space: nowrap; margin-right: 16px; flex-shrink: 0;
}
.wlb-footer-friend-links-title i { margin-right: 4px; color: var(--wlb-text-muted); }
.wlb-footer-friend-links-list {
display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.wlb-footer-friend-link-item {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; color: var(--wlb-text-muted);
text-decoration: none; transition: color 0.2s;
}
.wlb-footer-friend-link-item:hover { color: var(--wlb-primary); }
.wlb-footer-friend-link-favicon {
width: 14px; height: 14px; max-width: 14px; max-height: 14px;
border-radius: 3px; object-fit: contain; flex-shrink: 0; display: block;
}
/* 加载更多按钮 */
/* ============================================
消息页面
============================================ */
.wlb-message-list {
padding: 0;
}
.wlb-message-item {
display: flex; gap: 12px; padding: 14px 20px;
border-bottom: 1px solid var(--wlb-border-light);
transition: background 0.15s;
}
.wlb-message-item:last-child { border-bottom: none; }
.wlb-message-item:hover { background: var(--wlb-bg-hover); }
.wlb-message-item .wlb-avatar { width: 34px; height: 34px; margin-top: 10px; }
.wlb-message-content { flex: 1; min-width: 0; }
.wlb-message-user {
font-size: 14px; font-weight: 500; margin-bottom: 4px;
}
.wlb-message-user a { color: var(--wlb-text-primary); }
.wlb-message-user a:hover { color: var(--wlb-primary); }
.wlb-message-time {
font-size: 12px; color: var(--wlb-text-muted); font-weight: 400; margin-left: 8px;
}
.wlb-message-text {
font-size: 14px; color: var(--wlb-text-secondary); line-height: 1.6; flex: 1; min-width: 0;
}
.wlb-message-text-row {
display: flex; align-items: center; gap: 8px;
}
.wlb-message-link {
color: var(--wlb-primary); text-decoration: none;
}
.wlb-message-link:hover { text-decoration: underline; }
.wlb-message-original {
font-size: 13px; color: var(--wlb-text-muted); margin-top: 6px;
padding: 8px 12px; background: var(--wlb-bg); border-radius: 6px;
border-left: 3px solid var(--wlb-border);
}
.wlb-message-original a { color: var(--wlb-primary); text-decoration: none; }
.wlb-message-original a:hover { text-decoration: underline; }
/* 消息子分类Tab */
.wlb-message-sub-tabs {
display: flex; gap: 0; border-bottom: 1px solid var(--wlb-border-light);
padding: 0 24px; background: var(--wlb-bg-white);
}
.wlb-message-sub-tab {
padding: 12px 16px; font-size: 14px; color: var(--wlb-text-secondary);
cursor: pointer; border-bottom: 2px solid transparent;
transition: all 0.2s; white-space: nowrap; font-weight: 500;
}
.wlb-message-sub-tab:hover { color: var(--wlb-text-primary); }
.wlb-message-sub-tab.active {
color: var(--wlb-primary); border-bottom-color: var(--wlb-primary);
}
/* 消息加载/空状态 */
.wlb-message-loading {
text-align: center; padding: 60px 40px; color: var(--wlb-text-muted); font-size: 14px;
}
.wlb-message-loading i { margin-right: 6px; }
.wlb-message-empty {
text-align: center; padding: 60px 40px; color: var(--wlb-text-muted);
}
.wlb-message-empty i { font-size: 48px; margin-bottom: 12px; opacity: 0.3; display: block; }
/* 消息分页 */
.wlb-message-pagination {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 16px 12px; border-top: 1px solid var(--wlb-border-light);
flex-wrap: wrap;
}
.wlb-msg-page-btn {
min-width: 30px; height: 30px; padding: 0 6px; border-radius: 4px;
border: 1px solid var(--wlb-border); background: var(--wlb-bg-white);
color: var(--wlb-text-secondary); font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.wlb-msg-page-btn:hover { border-color: var(--wlb-primary); color: var(--wlb-primary); }
.wlb-msg-page-btn.active { background: var(--wlb-primary); color: white; border-color: var(--wlb-primary); }
.wlb-msg-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 取消点赞按钮 */
.wlb-message-unlike-btn {
padding: 2px 8px; border-radius: 4px;
background: transparent; color: var(--wlb-text-muted); font-size: 12px;
cursor: pointer; transition: all 0.2s; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
margin-left: 12px; line-height: 1.6;
}
.wlb-message-unlike-btn:hover {
border-color: var(--wlb-cancel-hover); color: var(--wlb-cancel-hover);
}
.wlb-message-unlike-btn:disabled {
opacity: 0.5; cursor: not-allowed;
}
.wlb-message-unlike-btn i { font-size: 11px; }
/* 删除评论按钮 */
.wlb-message-delete-btn {
padding: 2px 8px; border-radius: 4px;
background: transparent; color: var(--wlb-text-muted); font-size: 12px;
cursor: pointer; transition: all 0.2s; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
margin-left: 12px; line-height: 1.6;
}
.wlb-message-delete-btn:hover {
border-color: var(--wlb-cancel-hover); color: var(--wlb-cancel-hover);
}
.wlb-message-delete-btn:disabled {
opacity: 0.5; cursor: not-allowed;
}
.wlb-message-delete-btn i { font-size: 11px; }
@media (max-width: 600px) {
.wlb-message-sub-tabs { padding: 0 12px; overflow-x: auto; }
.wlb-message-sub-tab { padding: 10px 12px; font-size: 13px; }
}
/* 加载更多按钮 */
.wlb-load-more-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px 0; border-radius: var(--wlb-radius-sm);
background: var(--wlb-bg-white); color: var(--wlb-text-secondary);
font-size: 15px; font-weight: 500; cursor: pointer;
border: 1px solid var(--wlb-border-light);
box-shadow: var(--wlb-shadow-card); transition: all 0.2s;
}
.wlb-load-more-btn:hover { color: var(--wlb-primary); border-color: var(--wlb-primary); background: var(--wlb-primary-bg); }
/* 动态内容中的URL链接样式 */
.wlb-feed-content a[href^="http"],
.wlb-feed-content-inner a[href^="http"] {
color: var(--wlb-primary); text-decoration: none; word-break: break-all;
}
.wlb-feed-content a[href^="http"]:hover,
.wlb-feed-content-inner a[href^="http"]:hover { color: var(--wlb-primary-hover); text-decoration: underline; }
/* 话题标签样式 - 橙色 */
.wlb-topic-link {
color: var(--wlb-primary); text-decoration: none; cursor: pointer;
}
.wlb-topic-link:hover { color: var(--wlb-primary-hover); text-decoration: underline; }
/* 热门话题列表 */
.wlb-topic-list { padding: 4px 0; }
.wlb-topic-item {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; color: var(--wlb-text-primary); text-decoration: none;
font-size: 14px; transition: all 0.15s;
}
.wlb-topic-item:hover { background: var(--wlb-bg-hover); color: var(--wlb-primary); }
.wlb-topic-item.active {
color: var(--wlb-primary);
font-weight: 600;
}
.wlb-topic-item.active .wlb-topic-count { color: var(--wlb-primary); }
.wlb-topic-count { font-size: 12px; color: var(--wlb-text-muted); }
/* 网址链接样式 - 橙色，显示为标题/域名 */
.wlb-url-link {
color: var(--wlb-primary); text-decoration: none; cursor: pointer;
}
.wlb-url-link:hover { color: var(--wlb-primary-hover); text-decoration: underline; }
/* 内容区域链接样式 */
.wlb-feed-content-inner .wlb-topic-link,
.wlb-feed-content-inner .wlb-url-link {
color: var(--wlb-primary); text-decoration: none; cursor: pointer;
}
.wlb-feed-content-inner .wlb-topic-link:hover,
.wlb-feed-content-inner .wlb-url-link:hover {
color: var(--wlb-primary-hover); text-decoration: underline;
}
/* ============================================
空状态
============================================ */
.wlb-empty-state {
text-align: center;
padding: 48px 20px;
}
.wlb-empty-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--wlb-bg-hover);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.wlb-empty-icon i {
font-size: 26px;
color: var(--wlb-text-muted);
}
.wlb-empty-title {
font-size: 15px;
font-weight: 500;
color: var(--wlb-text-secondary);
margin-bottom: 6px;
}
.wlb-empty-desc {
font-size: 13px;
color: var(--wlb-text-muted);
}
/* ============================================
提示框（Toast通知 - 顶部居中）
============================================ */
.wlb-tip {
position: fixed; top: calc(var(--wlb-nav-height) + 10px); left: 50%; transform: translateX(-50%);
padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500;
z-index: 10000; box-shadow: var(--wlb-shadow-hover);
animation: wlb-tip-in 0.3s ease; max-width: 400px; white-space: nowrap;
display: flex; align-items: center; gap: 8px;
}
.wlb-tip-success { background: var(--wlb-tip-success-bg); color: var(--wlb-tip-success-text); border: 1px solid var(--wlb-tip-success-border); }
.wlb-tip-warning { background: var(--wlb-tip-warning-bg); color: var(--wlb-tip-warning-text); border: 1px solid var(--wlb-tip-warning-border); }
.wlb-tip-error { background: var(--wlb-danger-bg); color: var(--wlb-tip-error-text); border: 1px solid var(--wlb-tip-error-border); }
.wlb-tip-info { background: var(--wlb-tip-info-bg); color: var(--wlb-tip-info-text); border: 1px solid var(--wlb-tip-info-border); }
@keyframes wlb-tip-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* ============================================
表单消息提示（按钮上方）
============================================ */
.wlb-form-error-msg {
display: none;
padding: 8px 12px;
margin-bottom: 12px;
border-radius: 6px;
font-size: 12px;
animation: wlb-error-shake 0.3s ease;
}
.wlb-form-error-msg.show {
display: flex;
align-items: center;
gap: 6px;
}
.wlb-form-error-msg.error {
color: var(--wlb-danger);
background: var(--wlb-danger-bg);
border: 1px solid var(--wlb-tip-error-border);
}
.wlb-form-error-msg.success {
color: var(--wlb-success);
background: var(--wlb-success-bg);
border: 1px solid var(--wlb-success-border);
}
.wlb-form-error-msg i {
font-size: 13px;
flex-shrink: 0;
}
@keyframes wlb-error-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 返回顶部 */
.wlb-back-to-top {
position: fixed; bottom: 30px; right: 30px; width: 38px; height: 38px;
border-radius: 50%; background: var(--wlb-primary); color: white;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s;
z-index: 999; box-shadow: 0 2px 8px var(--wlb-primary-glow); font-size: 14px;
}
/* ============================================
用户个人主页
============================================ */
.wlb-profile-banner {
height: 200px;
background: linear-gradient(135deg, var(--wlb-gradient-start), var(--wlb-gradient-end));
border-radius: var(--wlb-radius-sm) var(--wlb-radius-sm) 0 0; position: relative;
background-size: cover; background-position: center;
}
.wlb-banner-edit-wrap {
position: absolute; top: 10px; right: 10px;
}
.wlb-banner-edit-btn {
background: var(--wlb-banner-overlay); color: #fff; border: none; border-radius: 50%;
width: 32px; height: 32px; font-size: 14px; cursor: pointer;
backdrop-filter: blur(4px); transition: background 0.2s;
display: flex; align-items: center; justify-content: center;
}
.wlb-banner-edit-btn:hover { background: rgba(0,0,0,0.6); }
.wlb-banner-dropdown {
display: none; position: absolute; top: 38px; right: 0;
background: var(--wlb-banner-dropdown-bg); backdrop-filter: blur(12px);
border-radius: 8px; min-width: 140px; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 10;
}
.wlb-banner-dropdown.active { display: block; }
.wlb-banner-dropdown-item {
padding: 10px 16px; color: #fff; font-size: 13px; cursor: pointer;
display: flex; align-items: center; gap: 8px; transition: background 0.15s;
}
.wlb-banner-dropdown-item:hover { background: rgba(255,255,255,0.15); }
.wlb-banner-dropdown-item.danger { color: var(--wlb-danger); }
.wlb-profile-info {
background: var(--wlb-bg-white); border-radius: 0 0 var(--wlb-radius-sm) var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card); padding: 0 20px 20px; margin-bottom: 12px;
position: relative;
}
.wlb-profile-avatar {
width: 80px; height: 80px; border-radius: 50%; border: 4px solid white;
overflow: hidden; position: absolute; top: -40px; left: 20px;
background: var(--wlb-border-light); box-shadow: var(--wlb-shadow-avatar);
}
.wlb-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wlb-profile-header { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 48px; }
.wlb-profile-name { font-size: 20px; font-weight: 700; color: var(--wlb-text-primary); margin-bottom: 4px; }
.wlb-profile-bio { font-size: 14px; color: var(--wlb-text-secondary); margin-bottom: 12px; line-height: 1.5; }
.wlb-profile-stats { display: flex; gap: 24px; font-size: 14px; }
.wlb-profile-stat { color: var(--wlb-text-muted); cursor: pointer; transition: color 0.15s; }
.wlb-profile-stat:hover,
.wlb-profile-stat:hover strong { color: var(--wlb-primary); }
.wlb-profile-stat strong { color: var(--wlb-text-primary); font-weight: 600; }
.wlb-profile-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--wlb-text-muted); }
.wlb-profile-meta a { word-break: break-all; }
/* ============================================
个人主页 - 动态/相册切换
============================================ */
/* 相册版块 */
.wlb-album-card { padding: 14px 16px; margin-bottom: 12px; }
.wlb-album-card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 0 10px 0;
border-bottom: 1px solid var(--wlb-border-light);
margin-bottom: 10px;
}
.wlb-album-card-count {
font-size: 12px; color: var(--wlb-text-muted);
}
.wlb-album-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.wlb-album-item {
aspect-ratio: 1;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.2s;
}
.wlb-album-item:hover { opacity: 0.85; }
.wlb-album-item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s;
}
.wlb-album-item:hover img { transform: scale(1.05); }
/* ============================================
图片灯箱
============================================ */
.wlb-lightbox {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.92); z-index: 3000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.3s;
}
.wlb-lightbox.active { opacity: 1; visibility: visible; }
.wlb-lightbox-img {
max-width: 90vw; max-height: 85vh; object-fit: contain;
border-radius: 4px; user-select: none; cursor: zoom-out;
}
.wlb-lightbox-close {
position: absolute; top: 16px; right: 20px;
width: 36px; height: 36px; border-radius: 50%;
background: var(--wlb-overlay-btn-bg); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 18px; cursor: pointer; transition: background 0.2s;
}
.wlb-lightbox-close:hover { background: var(--wlb-overlay-btn-hover); }
.wlb-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--wlb-overlay-btn-bg); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 20px; cursor: pointer; transition: background 0.2s;
}
.wlb-lightbox-nav:hover { background: var(--wlb-overlay-btn-hover); }
.wlb-lightbox-prev { left: 16px; }
.wlb-lightbox-next { right: 16px; }
.wlb-lightbox-counter {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
color: var(--wlb-overlay-text); font-size: 14px;
}
.wlb-lightbox-actions {
position: absolute; bottom: 20px; right: 20px;
display: flex; gap: 10px;
}
.wlb-lightbox-action-btn {
padding: 6px 14px; border-radius: 16px;
background: var(--wlb-overlay-btn-bg); color: white;
font-size: 13px; cursor: pointer; transition: background 0.2s;
display: flex; align-items: center; gap: 6px;
}
.wlb-lightbox-action-btn:hover { background: var(--wlb-overlay-btn-hover); }
/* ============================================
点赞大拇指动画
============================================ */
.wlb-like-bubble {
position: fixed; z-index: 2500; pointer-events: none;
font-size: 36px; animation: wlb-like-float 0.8s ease-out forwards;
}
@keyframes wlb-like-float {
0% { opacity: 1; transform: scale(0.5) translateY(0); }
30% { opacity: 1; transform: scale(1.3) translateY(-20px); }
60% { opacity: 1; transform: scale(1) translateY(-50px); }
100% { opacity: 0; transform: scale(0.8) translateY(-90px); }
}
.wlb-like-burst {
position: absolute; width: 60px; height: 60px; top: 50%; left: 50%;
transform: translate(-50%, -50%); pointer-events: none;
}
.wlb-like-burst span {
position: absolute; width: 6px; height: 6px; border-radius: 50%;
background: var(--wlb-primary); animation: wlb-like-particle 0.6s ease-out forwards;
}
@keyframes wlb-like-particle {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
/* ============================================
导航栏右侧功能区
============================================ */
.wlb-nav-actions {
display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.wlb-nav-icon-btn {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--wlb-text-secondary); font-size: 14px;
cursor: pointer; transition: all 0.2s; position: relative;
background: var(--wlb-bg);
}
.wlb-nav-icon-btn:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
.wlb-nav-user-btn {
display: flex; align-items: center; gap: 6px;
padding: 4px 8px; border-radius: 20px;
cursor: pointer; transition: all 0.2s;
background: transparent; border: none;
}
.wlb-nav-user-btn:hover { background: var(--wlb-primary-bg); }
.wlb-nav-user-btn .wlb-avatar {
width: 28px; height: 28px;
}
.wlb-nav-user-name {
font-size: 14px; font-weight: 500; color: var(--wlb-text-secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 28px;
}
.wlb-nav-user-btn i {
font-size: 10px; color: var(--wlb-text-muted);
transition: transform 0.2s;
}
.wlb-nav-user-btn.active i {
transform: rotate(180deg);
}
.wlb-nav-publish {
width: 30px; height: 30px; padding: 0; border-radius: 50%;
background: var(--wlb-primary); color: white;
font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s; border: none; flex-shrink: 0;
}
.wlb-nav-publish:hover { background: var(--wlb-primary-hover); }
.wlb-theme-toggle {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s; font-size: 14px;
color: var(--wlb-text-secondary); background: var(--wlb-bg); border: none;
}
.wlb-theme-toggle:hover { color: var(--wlb-primary); background: var(--wlb-primary-bg); }
/* 夜间模式 - 深色配色 */
html.wlb-dark,
body.wlb-dark {
--wlb-bg: #1d1d1d;
--wlb-bg-white: #262626;
--wlb-bg-hover: #2e2e2e;
--wlb-bg-gray: #1a1a1a;
--wlb-border: #3a3a3a;
--wlb-border-light: #333333;
--wlb-border-medium: #444444;
--wlb-text-primary: #e8e8e8;
--wlb-text-secondary: #aaaaaa;
--wlb-text-muted: #777777;
--wlb-text-placeholder: #666666;
--wlb-shadow-card: 0 1px 3px rgba(0,0,0,0.3);
--wlb-shadow-navbar: 0 1px 3px rgba(0,0,0,0.3);
--wlb-overlay-bg: rgba(0,0,0,0.95);
--wlb-primary-focus-ring: rgba(255,107,0,0.15);
--wlb-bg-code: #1e1e1e;
--wlb-bg-code-inline: #2d2d2d;
color-scheme: dark;
}
html.wlb-dark .wlb-navbar { background: var(--wlb-bg-white); border-color: var(--wlb-border); box-shadow: var(--wlb-shadow-navbar); }
html.wlb-dark .wlb-side-menu-item:hover { background: rgba(255,255,255,0.06); }
html.wlb-dark .wlb-side-menu-item.active { background: transparent; }
html.wlb-dark .wlb-hot-item:hover,
html.wlb-dark .wlb-recommend-item:hover { background: var(--wlb-bg-hover); }
html.wlb-dark .wlb-topic-item.active { background: transparent; color: var(--wlb-primary); font-weight: 600; }
html.wlb-dark .wlb-topic-item.active .wlb-topic-count { color: var(--wlb-primary); }
html.wlb-dark .wlb-hot-item.wlb-hot-topic-active { background: var(--wlb-primary); }
html.wlb-dark .wlb-hot-item.wlb-hot-topic-active .wlb-hot-title { color: #fff; }
html.wlb-dark .wlb-hot-item.wlb-hot-topic-active .wlb-hot-count { color: rgba(255, 255, 255, 0.8); }
html.wlb-dark .toc-item:hover { background: rgba(255,255,255,0.06); }
html.wlb-dark .wlb-comment-expand-textarea,
html.wlb-dark .wlb-repost-expand-textarea,
html.wlb-dark .wlb-form-input,
html.wlb-dark .wlb-search-input { background: var(--wlb-bg-hover); border-color: var(--wlb-border); }
html.wlb-dark .wlb-compose-input { background: transparent; }
html.wlb-dark .wlb-comment-replies,
html.wlb-dark .wlb-repost-replies { background: var(--wlb-bg-hover); }
html.wlb-dark .wlb-feed-follow-btn.followed { background: var(--wlb-border-light); color: var(--wlb-text-muted); border-color: var(--wlb-border-medium); }
html.wlb-dark .wlb-profile-follow-btn.followed { background: var(--wlb-border-light); color: var(--wlb-text-muted); border-color: var(--wlb-border-medium); }
html.wlb-dark .wlb-feed-expand-btn { color: var(--wlb-primary); }
/* 夜间模式 - 下载按钮 */
html.wlb-dark .wlb-downbtn {
background: var(--wlb-bg-hover);
border-color: var(--wlb-border);
}
html.wlb-dark .wlb-downbtn:hover {
border-color: var(--downbtn-color, var(--wlb-primary));
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* 夜间模式 - 长文特色图片分类标签 */
html.wlb-dark .wlb-feed-article-thumb-cat { background: rgba(0,0,0,0.7); }
html.wlb-dark .wlb-feed-article-thumb-cat:hover { background: rgba(0,0,0,0.9); }
/* 夜间模式 - 发现页 */
html.wlb-dark .wlb-discover-carousel { background: var(--wlb-bg-white); }
html.wlb-dark .wlb-discover-carousel-slide { color: #fff; }
html.wlb-dark .wlb-discover-carousel-overlay {
background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
html.wlb-dark .wlb-discover-carousel-badge { background: var(--wlb-primary); }
html.wlb-dark .wlb-review-pending { background: #2a2520; color: #d4a84a; }
html.wlb-dark .wlb-review-pending i { color: #d4a84a; }
html.wlb-dark .wlb-review-rejected { background: transparent; color: #e06060; }
html.wlb-dark .wlb-review-rejected i { color: #e06060; }
html.wlb-dark .wlb-review-reason { background: #2a2222; color: #e06060; }
html.wlb-dark .wlb-review-reason i { color: #e06060; }
html.wlb-dark .wlb-discover-carousel-prev,
html.wlb-dark .wlb-discover-carousel-next {
background: rgba(0,0,0,0.5);
color: #fff;
}
html.wlb-dark .wlb-discover-carousel-prev:hover,
html.wlb-dark .wlb-discover-carousel-next:hover {
background: rgba(0,0,0,0.75);
}
html.wlb-dark .wlb-discover-carousel-dot {
background: rgba(255,255,255,0.4);
}
html.wlb-dark .wlb-discover-carousel-dot.active {
background: #fff;
}
/* 夜间模式 - 错误页面 */
html.wlb-dark .wlb-error-main::before,
html.wlb-dark .wlb-error-main::after { opacity: 0.06; }
html.wlb-dark .wlb-error-deco { opacity: 0.08; }
html.wlb-dark .wlb-error-icon { opacity: 0.12; }
html.wlb-dark .wlb-error-search-input { background: var(--wlb-bg-hover); border-color: var(--wlb-border-medium); }
html.wlb-dark .wlb-error-search-input:focus { border-color: var(--wlb-primary); }
/* 夜间模式 - 认证页面 */
html.wlb-dark .wlb-auth-page {
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #111111 100%);
}
html.wlb-dark .wlb-auth-page::before {
opacity: 0.3;
}
html.wlb-dark .wlb-auth-card {
background: var(--wlb-bg-white);
box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
html.wlb-dark .wlb-auth-logo-icon {
box-shadow: 0 2px 12px rgba(255,107,0,0.3);
}
html.wlb-dark .wlb-nav-links { background: var(--wlb-bg-white); border-color: var(--wlb-border); }
html.wlb-dark .wlb-feed-images img.wlb-feed-image,
html.wlb-dark .wlb-album-item img {
background-color: #2a2a2a;
background-image: var(--wlb-svg-spinner-dark);
}
/* 夜间模式 - 全屏查看器 */
html.wlb-dark .wlb-album-actions {
background: rgba(255,255,255,0.15);
}
html.wlb-dark .wlb-album-action-btn {
color: rgba(255,255,255,0.9);
}
html.wlb-dark .wlb-album-divider {
background: rgba(255,255,255,0.3);
}
html.wlb-dark .wlb-album-zoom-percent {
color: rgba(255,255,255,0.9);
}
html.wlb-dark .wlb-lightbox { background: var(--wlb-overlay-bg); }
html.wlb-dark .wlb-inline-viewer { background: var(--wlb-bg-gray); }
html.wlb-dark .wlb-inline-viewer-header,
html.wlb-dark .wlb-inline-viewer-footer { background: var(--wlb-bg-white); }
html.wlb-dark .wlb-inline-viewer-header { border-color: var(--wlb-border); }
html.wlb-dark .wlb-inline-viewer-body { background: #111; }
html.wlb-dark .wlb-inline-viewer-btn { color: var(--wlb-text-secondary); }
html.wlb-dark .wlb-inline-viewer-btn:hover { color: var(--wlb-primary); }
html.wlb-dark .wlb-inline-viewer-counter { color: var(--wlb-text-muted); }
html.wlb-dark .wlb-inline-viewer-close { background: var(--wlb-border-light); color: var(--wlb-text-secondary); }
html.wlb-dark .wlb-inline-viewer-close:hover { background: var(--wlb-border-medium); }
html.wlb-dark .wlb-inline-viewer-img {
background-color: var(--wlb-bg-hover);
background-image: var(--wlb-svg-spinner-dark);
}
html.wlb-dark .wlb-album-img {
background-image: var(--wlb-svg-spinner-light);
}
/* 发动态弹窗 */
.wlb-publish-modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5); z-index: 2000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.3s;
}
.wlb-publish-modal-overlay.active { opacity: 1; visibility: visible; }
.wlb-publish-modal {
background: var(--wlb-bg-white); border-radius: 12px;
width: 90%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
transform: translateY(20px); transition: transform 0.3s;
}
.wlb-publish-modal-overlay.active .wlb-publish-modal { transform: translateY(0); }
.wlb-publish-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-publish-modal-title { font-size: 16px; font-weight: 600; }
.wlb-publish-modal-close {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--wlb-text-muted); cursor: pointer; transition: all 0.2s;
background: none; border: none; font-size: 16px;
}
.wlb-publish-modal-close:hover { color: var(--wlb-text-primary); background: var(--wlb-bg); }
.wlb-publish-modal-body { padding: 7px 20px; }
.wlb-publish-modal-textarea {
width: 100%; min-height: 120px; max-height: 480px; padding: 10px 14px 0 14px; border: none;
font-size: 15px; color: var(--wlb-text-primary); resize: none;
line-height: 1.6; background: transparent;
overflow-y: auto;
}
.wlb-publish-modal-textarea::placeholder { color: var(--wlb-text-muted); }
.wlb-publish-modal-textarea:focus { outline: none; }
.wlb-publish-modal-body .wlb-compose-body {
position: relative;
}
.wlb-publish-modal-body .wlb-compose-category-row {
display: flex; justify-content: flex-end; padding: 0 0 8px 0;
}
.wlb-publish-modal-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 20px; border-top: 1px solid var(--wlb-border-light);
}
/* 自定义确认弹窗 */
.wlb-confirm-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45); z-index: 3000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.2s;
}
.wlb-confirm-overlay.active { opacity: 1; visibility: visible; }
.wlb-confirm-dialog {
background: var(--wlb-bg-white); border-radius: 12px;
width: 90%; max-width: 380px; padding: 28px 24px 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
transform: scale(0.9); transition: transform 0.2s;
text-align: center;
}
.wlb-confirm-overlay.active .wlb-confirm-dialog { transform: scale(1); }
.wlb-confirm-icon {
width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: var(--wlb-danger);
background: rgba(245,63,63,0.08);
}
.wlb-confirm-msg {
font-size: 15px; color: var(--wlb-text-primary);
margin-bottom: 24px; line-height: 1.5;
}
.wlb-confirm-btns {
display: flex; gap: 12px; justify-content: center;
}
.wlb-confirm-btns .wlb-btn { min-width: 100px; }
/* ============================================
滚动加载
============================================ */
.wlb-load-more {
text-align: center; padding: 0; color: var(--wlb-text-muted); font-size: 14px;
}
.wlb-load-more-loading {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px 0; color: var(--wlb-text-muted); font-size: 15px;
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card);
}
.wlb-load-more-loading i { animation: wlb-spin 1s linear infinite; color: var(--wlb-primary); }
@keyframes wlb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wlb-load-more-end {
text-align: center; padding: 10px 0; color: var(--wlb-text-muted); font-size: 13px;
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-card);
}
/* ============================================
筛选排序栏
============================================ */
.wlb-filter-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--wlb-border-light);
margin-bottom: 12px;
}
.wlb-filter-left { display: flex; align-items: center; gap: 12px; }
.wlb-filter-right { display: flex; align-items: center; gap: 12px; }
.wlb-filter-total {
font-size: 13px; color: var(--wlb-text-primary); font-weight: 500;
}
.wlb-filter-total .wlb-filter-count { color: var(--wlb-text-muted); font-weight: 400; }
.wlb-filter-tag {
display: inline-flex; align-items: center; padding: 4px 12px;
border-radius: 14px; font-size: 12px; cursor: pointer;
border: 1px solid var(--wlb-border); color: var(--wlb-text-secondary);
transition: all 0.2s;
}
.wlb-filter-tag:hover { border-color: var(--wlb-primary); color: var(--wlb-primary); }
.wlb-filter-tag.active {
background: var(--wlb-primary); color: white; border-color: var(--wlb-primary);
}
.wlb-filter-sort {
font-size: 12px; color: var(--wlb-text-muted); cursor: pointer;
transition: color 0.2s;
}
.wlb-filter-sort:hover { color: var(--wlb-primary); }
.wlb-filter-sort.active { color: var(--wlb-text-primary); font-weight: 500; }
/* ============================================
分页
============================================ */
.wlb-pagination {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 16px 0; margin-top: 8px;
}
.wlb-pagination-total {
font-size: 12px; color: var(--wlb-text-muted); white-space: nowrap;
}
.wlb-pagination-btns {
display: flex; align-items: center; gap: 4px;
}
.wlb-page-btn {
min-width: 30px; height: 30px; padding: 0 8px; border-radius: 4px;
border: 1px solid var(--wlb-border); background: var(--wlb-bg-white);
color: var(--wlb-text-secondary); font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.wlb-page-btn:hover { border-color: var(--wlb-primary); color: var(--wlb-primary); }
.wlb-page-btn.active {
background: var(--wlb-primary); color: white; border-color: var(--wlb-primary);
}
.wlb-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wlb-page-ellipsis { min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--wlb-text-muted); user-select: none; letter-spacing: 2px; }
.wlb-page-info { font-size: 12px; color: var(--wlb-text-muted); margin-right: 8px; }
/* ============================================
搜索关键词高亮
============================================ */
.wlb-search-highlight {
color: var(--wlb-primary);
background: var(--wlb-primary-bg);
padding: 1px 3px;
border-radius: 3px;
font-weight: 500;
}
.wlb-dark .wlb-search-highlight {
background: rgba(255, 107, 0, 0.2);
}
/* ============================================
查看全部链接
============================================ */
.wlb-view-all {
display: block; text-align: center; padding: 10px 0; margin-top: 4px;
font-size: 13px; color: var(--wlb-text-muted); cursor: pointer;
transition: color 0.2s; border-top: 1px solid var(--wlb-border-light);
}
.wlb-view-all:hover { color: var(--wlb-primary); }
/* ============================================
内联图片查看器（动态风格）
============================================ */
.wlb-inline-viewer {
display: none; margin-top: 12px; background: var(--wlb-bg-gray);
border-radius: 8px; overflow: hidden; position: relative;
}
.wlb-inline-viewer.active { display: block; }
.wlb-inline-viewer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0; background: white; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-inline-viewer-counter { font-size: 13px; color: var(--wlb-text-muted); }
.wlb-inline-viewer-actions { display: flex; gap: 8px; justify-content: flex-start; }
.wlb-inline-viewer-btn {
padding: 4px 8px; border-radius: 0;
background: transparent; color: var(--wlb-text-secondary);
font-size: 13px; cursor: pointer; transition: all 0.2s;
display: flex; align-items: center; gap: 4px; border: none;
}
.wlb-inline-viewer-btn:hover { color: var(--wlb-primary); }
.wlb-inline-viewer-btn.primary { color: var(--wlb-primary); font-weight: 500; }
.wlb-inline-viewer-btn.primary:hover { color: var(--wlb-primary-hover); }
.wlb-inline-viewer-close {
width: 28px; height: 28px; border-radius: 50%;
background: var(--wlb-bg); color: var(--wlb-text-muted);
display: flex; align-items: center; justify-content: center;
font-size: 14px; cursor: pointer; transition: all 0.2s;
border: none;
}
.wlb-inline-viewer-close:hover { background: var(--wlb-border-medium); color: var(--wlb-text-primary); }
.wlb-inline-viewer-body {
display: flex; align-items: center; justify-content: center;
position: relative; background: var(--wlb-bg-gray);
min-height: 300px; max-height: 70vh; overflow: hidden;
}
.wlb-inline-viewer-img-wrap {
position: relative; display: inline-block; max-width: 100%; max-height: 100%;
}
.wlb-inline-viewer-img {
width: 100%; height: auto;
user-select: none; display: block; cursor: zoom-out;
background-color: var(--wlb-bg-gray);
background-image: var(--wlb-svg-spinner);
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
min-height: 200px;
}
.wlb-inline-viewer-zone-left,
.wlb-inline-viewer-zone-right {
position: absolute; top: 0; bottom: 0;
cursor: pointer; z-index: 1;
}
.wlb-inline-viewer-zone-left { left: 0; width: 50%; cursor: var(--wlb-cursor-prev); }
.wlb-inline-viewer-zone-right { right: 0; width: 50%; cursor: var(--wlb-cursor-next); }
.wlb-inline-viewer-img-wrap {
position: relative; display: inline-block; max-width: 100%; z-index: 2;
}
/* 内联查看器图片上的点击区域 */
.wlb-inline-viewer-img-zone-left,
.wlb-inline-viewer-img-zone-right {
position: absolute; top: 0; bottom: 0; width: 30%; z-index: 3;
cursor: pointer;
}
.wlb-inline-viewer-img-zone-left { left: 0; cursor: var(--wlb-cursor-prev); }
.wlb-inline-viewer-img-zone-right { right: 0; cursor: var(--wlb-cursor-next); }
.wlb-inline-viewer-img-zone-center {
position: absolute; top: 0; bottom: 0; left: 30%; right: 30%; z-index: 3;
cursor: zoom-out;
}
.wlb-inline-viewer-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.2); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 16px; cursor: pointer; transition: background 0.2s;
border: none;
}
.wlb-inline-viewer-nav:hover { background: rgba(255,255,255,0.4); }
.wlb-inline-viewer-prev { left: 12px; }
.wlb-inline-viewer-next { right: 12px; }
.wlb-inline-viewer-footer {
display: flex; align-items: center; justify-content: flex-start;
padding: 10px 0 10px 0; gap: 6px; background: white;
padding-left: 0;
}
.wlb-inline-viewer-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--wlb-border-medium); cursor: pointer; transition: all 0.2s;
}
.wlb-inline-viewer-dot.active { background: var(--wlb-primary); width: 16px; border-radius: 3px; }
/* 缩略图导航 */
.wlb-inline-viewer-thumb {
width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
cursor: pointer; border: 2px solid transparent; transition: all 0.2s;
flex-shrink: 0; opacity: .5;
}
.wlb-inline-viewer-thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.wlb-inline-viewer-thumb.active { border-color: var(--wlb-primary); opacity: 1; }
.wlb-inline-viewer-thumb:hover { border-color: var(--wlb-primary); opacity: 0.8; }
/* 查看器展开时隐藏原图 */
.wlb-feed-images.wlb-hidden { display: none; }
/* ============================================
下拉菜单
============================================ */
.wlb-dropdown-wrap { position: relative; }
.wlb-dropdown {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 160px; background: var(--wlb-bg-white);
border-radius: var(--wlb-radius-sm); box-shadow: var(--wlb-shadow-hover);
border: 1px solid var(--wlb-border-light);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all 0.2s; z-index: 1100; overflow: hidden;
}
.wlb-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.wlb-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; font-size: 14px; color: var(--wlb-text-primary);
cursor: pointer; transition: background 0.15s;
}
.wlb-dropdown-item:hover { background: var(--wlb-bg); }
.wlb-dropdown-item i { width: 16px; text-align: center; color: var(--wlb-text-muted); font-size: 14px; }
.wlb-dropdown-divider { height: 1px; background: var(--wlb-border-light); margin: 4px 0; }
/* ============================================
自定义下拉选择器（替代原生 select）
============================================ */
.wlb-select-wrap {
position: relative;
display: inline-block;
}
.wlb-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 100px;
height: 36px;
padding: 0 12px;
background: var(--wlb-bg-white);
border: 1px solid var(--wlb-border);
border-radius: var(--wlb-radius-sm);
font-size: 13px;
color: var(--wlb-text-primary);
cursor: pointer;
transition: all 0.2s;
user-select: none;
white-space: nowrap;
}
.wlb-select-trigger:hover {
border-color: var(--wlb-primary);
}
.wlb-select-trigger.active {
border-color: var(--wlb-primary);
box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring);
}
.wlb-select-trigger .wlb-select-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.wlb-select-trigger .wlb-select-text.placeholder {
color: var(--wlb-text-placeholder);
}
.wlb-select-trigger .wlb-select-arrow {
font-size: 10px;
color: var(--wlb-text-muted);
transition: transform 0.2s;
flex-shrink: 0;
}
.wlb-select-trigger.active .wlb-select-arrow {
transform: rotate(180deg);
}
.wlb-select-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 100%;
background: var(--wlb-bg-white);
border-radius: var(--wlb-radius-sm);
box-shadow: var(--wlb-shadow-hover);
border: 1px solid var(--wlb-border-light);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: all 0.2s;
z-index: 1100;
overflow: hidden;
max-height: 260px;
overflow-y: auto;
}
.wlb-select-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wlb-select-option {
padding: 9px 14px;
font-size: 13px;
color: var(--wlb-text-primary);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.wlb-select-option:hover {
background: var(--wlb-bg);
}
.wlb-select-option.selected {
color: var(--wlb-primary);
font-weight: 500;
background: var(--wlb-primary-bg);
}
.wlb-select-option.selected::before {
content: '';
display: inline-block;
width: 5px;
height: 9px;
border: solid var(--wlb-primary);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-right: 8px;
margin-top: -2px;
vertical-align: middle;
}
/* 设置页面 */
.wlb-settings-card { margin-bottom: 16px; width: 100%; }
.wlb-settings-card.hidden {
display: none;
}
.wlb-settings-header {
padding: 20px 24px; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-settings-title { font-size: 18px; font-weight: 600; color: var(--wlb-text-primary); margin-bottom: 4px; }
.wlb-settings-desc { font-size: 13px; color: var(--wlb-text-muted); }
.wlb-settings-body { padding: 20px 24px; }
.wlb-settings-row {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-settings-row:last-child { border-bottom: none; }
.wlb-settings-label { font-size: 14px; color: var(--wlb-text-primary); font-weight: 500; }
.wlb-settings-value { font-size: 14px; color: var(--wlb-text-muted); }
.wlb-settings-link { color: var(--wlb-primary); cursor: pointer; font-size: 14px; }
.wlb-settings-link:hover { color: var(--wlb-primary-hover); }
/* 编辑弹窗 */
.wlb-edit-modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.3s;
}
.wlb-edit-modal-overlay.active { opacity: 1; visibility: visible; }
.wlb-edit-modal {
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-lg);
width: 420px; max-width: 90vw; max-height: 80vh; overflow: visible;
transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex; flex-direction: column;
}
.wlb-edit-modal-overlay.active .wlb-edit-modal { transform: scale(1) translateY(0); }
.wlb-edit-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--wlb-border-light); flex-shrink: 0;
}
.wlb-edit-modal-title { font-size: 16px; font-weight: 600; color: var(--wlb-text-primary); }
.wlb-edit-modal-close {
width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
background: var(--wlb-bg-gray); color: var(--wlb-text-muted); font-size: 14px;
display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.wlb-edit-modal-close:hover { background: var(--wlb-border); color: var(--wlb-text-primary); }
.wlb-edit-modal-body { padding: 20px; flex: 1; overflow-y: visible; }
.wlb-edit-modal-footer {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 20px; border-top: 1px solid var(--wlb-border-light); flex-shrink: 0;
}
.wlb-edit-form-group { margin-bottom: 10px; }
.wlb-edit-form-group:last-child { margin-bottom: 0; }
.wlb-edit-form-label { display: block; font-size: 13px; font-weight: 500; color: var(--wlb-text-secondary); margin-bottom: 6px; }
.wlb-edit-form-hint { font-size: 12px; color: var(--wlb-text-muted); margin-top: 8px; line-height: 1.4; }
/* 大文本框样式 */
.wlb-textarea-lg {
min-height: 80px !important;
resize: vertical;
line-height: 1.6;
padding-top: 12px !important;
}
/* ============================================
弹窗相册查看器
============================================ */
.wlb-album-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,2,6,.85); z-index: 3000;
display: none; flex-direction: column;
}
.wlb-album-overlay.active { display: flex; }
.wlb-album-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; color: white; flex-shrink: 0;
}
.wlb-album-counter { font-size: 14px; color: rgba(255,255,255,0.8); }
.wlb-album-actions {
display: flex; align-items: center; gap: 2px;
background: rgba(0,0,0,0.4);
border-radius: 5px; padding: 4px;
position: relative; z-index: 10;
}
.wlb-album-action-btn {
width: 36px; height: 36px; border-radius: 6px;
background: transparent; color: rgba(255,255,255,0.9);
font-size: 14px; cursor: pointer;
display: flex; align-items: center; justify-content: center; border: none;
flex-shrink: 0;
}
.wlb-album-divider {
width: 1px; height: 20px;
background: rgba(255,255,255,0.2);
margin: 0 2px;
}
.wlb-album-zoom-percent {
font-size: 12px; color: rgba(255,255,255,0.9);
min-width: 40px; text-align: center;
user-select: none;
}
.wlb-album-close {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.12); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 18px; cursor: pointer; transition: background 0.2s; border: none;
}
.wlb-album-close:hover { background: rgba(255,255,255,0.25); }
.wlb-album-body {
flex: 1; display: flex; align-items: center; justify-content: center;
position: relative; min-height: 0;
overflow: hidden;
}
/* 外层区域：由JavaScript动态计算位置 */
.wlb-album-zone-left, .wlb-album-zone-right {
position: absolute; top: 0; bottom: 0;
cursor: pointer; z-index: 1;
}
.wlb-album-zone-left { left: 0; width: 50%; cursor: var(--wlb-cursor-prev); }
.wlb-album-zone-right { right: 0; width: 50%; cursor: var(--wlb-cursor-next); }
/* 图片容器 */
.wlb-album-img-wrap {
position: relative; display: flex; align-items: center; justify-content: center; z-index: 2;
max-width: 100%; max-height: 100%;
}
/* 图片 */
.wlb-album-img {
max-width: 100%; max-height: 100%; object-fit: contain; display: block;
background-color: transparent;
background-image: var(--wlb-svg-spinner-light);
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
min-height: 200px;
}
/* 图片上的点击区域：左边30%、中间40%、右边30% */
.wlb-album-img-zone-left,
.wlb-album-img-zone-right {
position: absolute; top: 0; bottom: 0; width: 30%; z-index: 3;
}
.wlb-album-img-zone-left { left: 0; cursor: var(--wlb-cursor-prev); }
.wlb-album-img-zone-right { right: 0; cursor: var(--wlb-cursor-next); }
.wlb-album-img-zone-center {
position: absolute; top: 0; bottom: 0; left: 30%; right: 30%; z-index: 3;
cursor: zoom-in;
}
.wlb-album-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.12); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 20px; cursor: pointer; transition: background 0.2s; border: none;
}
.wlb-album-nav:hover { background: rgba(255,255,255,0.25); }
.wlb-album-prev { left: 16px; }
.wlb-album-next { right: 16px; }
.wlb-album-footer {
display: flex; align-items: center; justify-content: center;
padding: 12px 20px; gap: 8px; flex-shrink: 0; background: rgba(0, 0, 0, .8); border-top: 1px solid var(--wlb-border);
}
.wlb-album-thumb {
width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
cursor: pointer; border: 2px solid transparent; transition: all 0.2s; flex-shrink: 0;
-webkit-filter: brightness(.5); filter: brightness(.5);
}
.wlb-album-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wlb-album-thumb.active { border-color: white; -webkit-filter: none; filter: none;}
.wlb-album-thumb:hover { border-color: rgba(255,255,255,0.5); }
/* ============================================
点赞/赞赏按钮 - 简洁图标样式
============================================ */
.wlb-like-btn-wrap,
.wlb-reward-btn-wrap {
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.wlb-like-btn,
.wlb-reward-btn {
width: 56px; height: 56px; border: none; cursor: pointer;
background: transparent; color: var(--wlb-text-muted); font-size: 32px;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
}
.wlb-like-btn { position: relative; }
.wlb-like-btn:hover {
color: var(--wlb-primary); transform: scale(1.1);
}
.wlb-like-btn.liked,
.wlb-like-btn.liked i {
color: var(--wlb-primary) !important;
}
.wlb-like-count {
font-size: 16px; font-weight: 700; color: var(--wlb-text-primary);
line-height: 1;
}
.wlb-like-label,
.wlb-reward-label {
font-size: 11px; color: var(--wlb-text-muted);
}
.wlb-reward-btn:hover {
color: var(--wlb-primary); transform: scale(1.1);
}
/* 赞赏弹窗 */
.wlb-reward-modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: all 0.3s;
}
.wlb-reward-modal-overlay.active {
opacity: 1; visibility: visible;
}
.wlb-reward-modal {
background: var(--wlb-bg-white); border-radius: var(--wlb-radius-lg);
width: 360px; max-width: 90vw; overflow: hidden;
transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.wlb-reward-modal-overlay.active .wlb-reward-modal {
transform: scale(1) translateY(0);
}
.wlb-reward-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-reward-modal-title {
font-size: 17px; font-weight: 600; color: var(--wlb-text-primary);
}
.wlb-reward-modal-close {
width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
background: var(--wlb-bg-gray); color: var(--wlb-text-muted); font-size: 14px;
display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.wlb-reward-modal-close:hover {
background: var(--wlb-border); color: var(--wlb-text-primary);
}
.wlb-reward-modal-body {
padding: 24px 20px;
}
.wlb-reward-tabs {
display: flex; gap: 8px; margin-bottom: 20px; background: var(--wlb-bg-gray);
border-radius: 10px; padding: 4px;
}
.wlb-reward-tab {
flex: 1; padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer;
background: transparent; color: var(--wlb-text-secondary); font-size: 14px;
font-weight: 500; transition: all 0.2s; display: flex; align-items: center;
justify-content: center; gap: 6px;
}
.wlb-reward-tab.active {
background: var(--wlb-bg-white); color: var(--wlb-text-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.wlb-reward-tab:hover:not(.active) {
color: var(--wlb-text-primary);
}
.wlb-reward-tab i {
font-size: 16px;
}
.wlb-reward-tab[data-tab="wechat"].active i {
color: #07c160;
}
.wlb-reward-tab[data-tab="alipay"].active i {
color: #1677ff;
}
.wlb-reward-qrcode-wrap {
display: flex; justify-content: center; min-height: 200px;
}
.wlb-reward-qrcode {
display: none; flex-direction: column; align-items: center; gap: 12px;
}
.wlb-reward-qrcode.active {
display: flex;
}
.wlb-reward-qrcode img {
width: 100%; max-width: 240px; border-radius: 8px;
border: 1px solid var(--wlb-border-light); object-fit: contain;
}
.wlb-reward-qrcode-tip {
font-size: 14px; color: var(--wlb-text-secondary); font-weight: 500;
}
.wlb-reward-footer-tip {
text-align: center; font-size: 13px; color: var(--wlb-text-muted);
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wlb-border-light);
}
.wlb-reward-count {
font-size: 22px; font-weight: 700; color: var(--wlb-text-primary);
line-height: 1;
}
.wlb-reward-label {
font-size: 12px; color: var(--wlb-text-muted);
}
/* ============================================
移动端赞赏按钮（文章详情页操作栏）
============================================ */
.wlb-mobile-reward-inline {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 1px 0; color: var(--wlb-text-muted); font-size: 13px;
cursor: pointer; transition: color 0.15s;
}
.wlb-mobile-reward-inline:hover { color: var(--wlb-primary); }
.wlb-mobile-reward-inline .wlb-reward-btn {
width: auto; height: auto; font-size: 15px; padding: 0;
}
.wlb-mobile-reward-inline .wlb-reward-label { display: none; }
/* ============================================
响应式
============================================ */
@media (max-width: 1100px) {
.wlb-sidebar-left { display: none; }
}
@media (max-width: 860px) {
/* ===== 顶部导航栏：紧凑模式 ===== */
.wlb-navbar-inner { padding: 0 12px; gap: 8px; }
.wlb-logo .wlb-logo-text { display: none; }
.wlb-logo-icon { width: 36px; height: 28px; background: url('../img/favicon.png') center/contain no-repeat; }
.wlb-search { flex: 1 1 auto; }
.wlb-search-input { height: 34px; }
/* 隐藏PC端导航元素 */
.wlb-nav-right .wlb-btn { display: none; }
.wlb-nav-right .wlb-theme-toggle { display: none; }
.wlb-nav-right .wlb-nav-publish { display: none; }
.wlb-nav-user-name { display: none; }
.wlb-nav-right .wlb-dropdown-wrap .fa-chevron-down { display: none; }
/* 移动端图片网格宽度100% */
.wlb-feed-images.grid-2,
.wlb-feed-images.grid-3,
.wlb-feed-images.grid-4,
.wlb-feed-images.grid-9 {
width: 100%;
}
/* ===== 左侧栏：转为水平标签栏 ===== */
.wlb-sidebar-left {
display: block !important; /* 覆盖 <1100 的 display:none */
position: fixed;
top: var(--wlb-nav-height);
left: 0; right: 0;
width: 100%;
z-index: 998;
background: var(--wlb-bg-white);
border-bottom: 1px solid var(--wlb-border-light);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.wlb-sidebar-left::-webkit-scrollbar { display: none; }
.wlb-sidebar-left .wlb-side-card:not(:first-child) { display: none; }
.wlb-sidebar-left .wlb-side-card:first-child {
margin-bottom: 0; box-shadow: none; border-radius: 0;
}
.wlb-sidebar-left .wlb-side-card-header { display: none; }
.wlb-sidebar-left .wlb-side-card-body {
display: flex; padding: 0; overflow-x: auto; white-space: nowrap;
scrollbar-width: none;
}
.wlb-sidebar-left .wlb-side-card-body::-webkit-scrollbar { display: none; }
.wlb-sidebar-left .wlb-side-menu-item {
flex-shrink: 0; padding: 0 16px; height: 44px;
display: inline-flex; align-items: center;
border-bottom: 2px solid transparent; border-radius: 0;
white-space: nowrap; font-size: 14px;
}
.wlb-sidebar-left .wlb-side-menu-item.active {
border-bottom-color: var(--wlb-primary); padding-left: 16px; background: transparent;
}
.wlb-sidebar-left .wlb-side-menu-item i { display: none; }
/* TOC目录项移动端：继承 .wlb-side-menu-item 横向排列样式 */
/* 热门话题在发现页移动端同样横向排列 */
.wlb-sidebar-left .wlb-topic-list {
display: flex; padding: 0; gap: 0;
}
.wlb-sidebar-left .wlb-topic-item {
flex-shrink: 0; padding: 0 16px; height: 44px;
display: inline-flex; align-items: center; gap: 6px;
border-bottom: 2px solid transparent; border-radius: 0;
white-space: nowrap; font-size: 14px;
color: var(--wlb-text-secondary);
}
.wlb-sidebar-left .wlb-topic-item:hover,
.wlb-sidebar-left .wlb-topic-item.active {
border-bottom-color: var(--wlb-primary);
background: transparent; color: var(--wlb-primary);
}
.wlb-sidebar-left .wlb-topic-count { display: none; }
/* 移动端文章详情页显示赞赏按钮 */
.wlb-mobile-reward-btn { display: flex; }
/* ===== 底部固定导航栏：复用PC端 nav-links ===== */
.wlb-nav-links {
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
justify-content: space-around;
align-items: center;
background: var(--wlb-bg-white);
border-top: 1px solid var(--wlb-border);
z-index: 1000;
height: 56px;
padding: 0; gap: 0;
box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}
.wlb-nav-link {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 0; border-radius: 0;
font-size: 11px; flex: 1; height: 100%; gap: 2px;
color: var(--wlb-text-muted);
}
.wlb-nav-link:hover { background: transparent; color: var(--wlb-primary); }
.wlb-nav-link.active { color: var(--wlb-primary); font-weight: 600; }
.wlb-nav-link i { display: block; font-size: 18px; }
/* 返回顶部按钮避开底部导航栏 */
.wlb-back-to-top { bottom: 70px; }
/* ===== 内容区域布局 ===== */
.wlb-page {
padding-top: calc(var(--wlb-nav-height) + 44px + 12px);
padding-bottom: 68px;
}
.wlb-container { padding: 0 8px; }
.wlb-content-area { width: 100%; }
.wlb-sidebar-right { display: none; }
.wlb-checkin-mobile { display: block; margin-bottom: 12px; }
.wlb-checkin-mobile .wlb-checkin-card { margin-bottom: 0; }
}
@media (min-width: 769px) {
.wlb-checkin-mobile { display: none; }
}
@media (max-width: 600px) {
/* 全屏查看器移动端适配 */
.wlb-album-header {
padding: 8px 12px;
flex-wrap: wrap;
gap: 8px;
}
.wlb-album-counter {
font-size: 12px;
}
.wlb-album-actions {
gap: 2px;
padding: 3px;
}
.wlb-album-action-btn {
width: 32px; height: 32px;
font-size: 12px;
}
.wlb-album-divider {
height: 16px;
margin: 0 1px;
}
.wlb-album-zoom-percent {
font-size: 11px;
min-width: 35px;
}
.wlb-album-close {
width: 32px; height: 32px;
font-size: 16px;
}
.wlb-album-footer {
padding: 8px 12px;
gap: 6px;
}
.wlb-album-thumb {
width: 40px; height: 40px;
}
.wlb-navbar-inner { padding: 0 12px; }
.wlb-container { padding: 0 8px; }
.wlb-feed-card { padding: 12px; }
.wlb-feed-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wlb-footer { display: none; }
.wlb-article-card { padding: 16px; }
.wlb-article-title { font-size: 18px; }
/* 分页移动端适配 */
.wlb-message-pagination,
.wlb-pagination { display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px !important; }
.wlb-pagination-total { display: block; font-size: 12px; color: var(--wlb-text-muted); order: 1; }
.wlb-pagination-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; order: 0; }
.wlb-msg-page-btn,
.wlb-page-btn { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; }
/* 登录注册页面移动端适配 */
.wlb-auth-theme-toggle { display: none; }
.wlb-auth-page { padding: 0; align-items: flex-start; }
.wlb-auth-card { border-radius: 0; max-width: 100%; min-height: 100vh; box-shadow: none; }
.wlb-auth-title { font-size: 20px; }
/* 编辑弹窗移动端适配 */
.wlb-edit-modal { width: 90vw; max-height: 80vh; }
.wlb-edit-modal-body { max-height: calc(80vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 420px) {
/* 设备来源信息太长时显示12个字符 */
.wlb-feed-source {
max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex-shrink: 0;
}
}
@media (max-width: 390px) {
/* 个人主页统计数字 - 小屏幕两行显示 */
.wlb-profile-stats { gap: 16px; }
.wlb-profile-stat { display: inline-flex; flex-wrap: wrap; justify-content: start; gap: 0; }
.wlb-profile-stat strong { width: 100%; text-align: start; }
}
/* ============================================
表情选择器（动态 GIF 表情）
============================================ */
.wlb-emoji-panel {
position: absolute; z-index: 99999;
display: none; /* JS 控制显示 */
width: 360px;
max-width: calc(100vw - 16px);
background: var(--wlb-bg-white);
border: 1px solid var(--wlb-border);
border-radius: var(--wlb-radius-md);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
overflow: hidden;
}
/* 标题栏 */
.wlb-emoji-header {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 12px;
border-bottom: 1px solid var(--wlb-border-light);
background: var(--wlb-bg-gray);
}
.wlb-emoji-header-title { font-size: 13px; font-weight: 600; color: var(--wlb-text-secondary); }
.wlb-emoji-header-count { font-size: 11px; color: var(--wlb-text-muted); }
/* 表情网格：Grid 自动铺满，每行放尽可能多的项，不留空白 */
.wlb-emoji-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
gap: 2px; padding: 8px;
}
/* 表情项：Grid 自动填满，保持正方形 */
.wlb-emoji-item {
cursor: pointer;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1;
border-radius: 6px;
transition: background 0.15s;
user-select: none;
}
.wlb-emoji-item:hover { background: var(--wlb-border-light); }
.wlb-emoji-item img {
width: 26px; height: 26px;
border-radius: 3px;
pointer-events: none;
transition: transform 0.15s;
}
.wlb-emoji-item:hover img { transform: scale(1.2); }
/* 评论中内联表情图片 */
.wlb-emoji-img { display: inline-block; vertical-align: -5px; border-radius: 3px; }
/* 移动端遮罩（点击关闭面板） */
.wlb-emoji-mask { position: fixed; inset: 0; z-index: 99998; background: transparent; }
/* 移动端面板（absolute 挂 body，跟随页面滚动，宽度自适应） */
.wlb-emoji-panel-mobile {
position: absolute !important;
width: 360px; max-width: calc(100vw - 16px) !important;
}
/* 暗黑模式 */
html.wlb-dark .wlb-emoji-panel { background: var(--wlb-bg-white); border-color: var(--wlb-border); }
html.wlb-dark .wlb-emoji-header { background: var(--wlb-bg-gray); border-color: var(--wlb-border-light); }
html.wlb-dark .wlb-emoji-item:hover { background: var(--wlb-border-light); }
/* ============================================
上传图片预览
============================================ */
.wlb-upload-preview { display: none; padding: 6px 0; }
.wlb-upload-preview.active { display: flex; gap: 6px; flex-wrap: wrap; }
#wlbComplaintModal .wlb-upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wlb-upload-preview-item { position: relative; width: 72px; height: 72px; }
.wlb-upload-preview-item img { width: 72px; height: 72px; border-radius: 6px; border: 1px solid var(--wlb-border); object-fit: cover; }
.wlb-upload-preview-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--wlb-danger); color: #fff; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; }
.wlb-upload-preview-remove:hover { background: var(--wlb-primary-hover); }
/* 回复区内图片预览更紧凑 */
.wlb-comment-reply-wrap .wlb-upload-preview-item { width: 60px; height: 60px; }
.wlb-comment-reply-wrap .wlb-upload-preview-item img { width: 60px; height: 60px; }
.wlb-upload-progress { display: inline-block; padding: 8px 12px; font-size: 12px; color: var(--wlb-text-muted); }
.wlb-upload-progress i { margin-right: 4px; }
/* 评论图片网格（文字下方独立区域） */
.wlb-comment-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wlb-comment-media .wlb-comment-img { max-width: 150px; max-height: 120px; border-radius: 6px; border: 1px solid var(--wlb-border); object-fit: cover; cursor: pointer; transition: opacity 0.15s; }
.wlb-comment-media .wlb-comment-img:hover { opacity: 0.85; }
.wlb-comment-media .wlb-comment-video { max-width: 300px; max-height: 200px; border-radius: 6px; }
/* 回复区工具栏 */
.wlb-comment-reply-wrap { display: none; margin-top: 8px; }
.wlb-comment-reply-wrap.active { display: block; }
/* 共享回复输入框 */
.wlb-shared-reply-wrap { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wlb-border-light); }
.wlb-shared-reply-wrap.active { display: block; }
.wlb-shared-reply-textarea { width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--wlb-border); border-radius: 18px; font-size: 13px; color: var(--wlb-text-primary); background: var(--wlb-bg-white); resize: none; outline: none; transition: border-color 0.2s; }
.wlb-shared-reply-textarea:focus { border-color: var(--wlb-primary); }
.wlb-shared-reply-textarea::placeholder { color: var(--wlb-text-muted); }
.wlb-shared-reply-submit { padding: 6px 16px; border-radius: 18px; background: var(--wlb-primary); color: white; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.wlb-shared-reply-submit:hover { background: var(--wlb-primary-hover); }
.wlb-shared-reply-wrap .wlb-upload-preview-item { width: 60px; height: 60px; }
.wlb-shared-reply-wrap .wlb-upload-preview-item img { width: 60px; height: 60px; }
.wlb-comment-reply-textarea { width: 100%; min-height: 32px; max-height: 200px; padding: 6px 10px; border: 1px solid var(--wlb-border); border-radius: var(--wlb-radius-sm); font-size: 13px; resize: none; outline: none; background: var(--wlb-bg-white); color: var(--wlb-text-primary); font-family: inherit; overflow-y: hidden; }
.wlb-comment-reply-textarea:focus { border-color: var(--wlb-primary); }
.wlb-reply-tools { display: flex; align-items: center; gap: 4px; margin-top: 4px; justify-content: space-between; }
.wlb-reply-tools .wlb-comment-reply-submit { margin-left: auto; }
/* ============================================
转发条目样式
============================================ */
.wlb-repost-item { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--wlb-border-light); }
@media (min-width: 769px) {
.wlb-repost-item { gap: 22px; /* 32px头像 + 22px = 54px，与feed内容对齐 */ }
}
.wlb-repost-item:last-child { border-bottom: none; }
.wlb-repost-item .wlb-avatar { flex-shrink: 0; }
.wlb-repost-body { flex: 1; min-width: 0; }
.wlb-repost-user { font-size: 14px; font-weight: 500; color: var(--wlb-text-primary); margin-bottom: 3px; }
.wlb-repost-user a { color: var(--wlb-primary); text-decoration: none; }
.wlb-repost-user a:hover { text-decoration: underline; }
.wlb-repost-text { font-size: 14px; line-height: 1.5; color: var(--wlb-text-primary); margin-bottom: 6px; word-break: break-all; }
.wlb-repost-meta { font-size: 13px; color: var(--wlb-text-muted); display: flex; align-items: center; gap: 16px; }
.wlb-repost-action { cursor: pointer; transition: color 0.15s; }
.wlb-repost-action:hover { color: var(--wlb-primary); }
.wlb-repost-action.liked { color: var(--wlb-primary); }
.wlb-repost-delete:hover { color: var(--wlb-danger) !important; }
.wlb-repost-item .wlb-comment-media { margin-top: 6px; }
.wlb-repost-item .wlb-comment-media .wlb-comment-img { max-width: 120px; max-height: 90px; }
/* 转发原帖引用卡片（feed-item 中使用） */
.wlb-repost-source-card {
margin-top: 10px; padding: 12px; border-radius: var(--wlb-radius-sm);
border: 1px solid var(--wlb-border-light); background: var(--wlb-bg);
transition: background 0.15s;
}
.wlb-repost-source-card:hover { background: var(--wlb-bg-hover); }
.wlb-repost-source-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wlb-repost-source-name { font-size: 13px; font-weight: 600; color: var(--wlb-text-primary); text-decoration: none; }
.wlb-repost-source-name:hover { color: var(--wlb-primary); }
.wlb-repost-source-text { font-size: 13px; color: var(--wlb-text-secondary); line-height: 1.6; }
.wlb-repost-source-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wlb-border-light); display: flex; align-items: center; gap: 8px; }
.wlb-repost-source-time { font-size: 12px; color: var(--wlb-text-muted); }
.wlb-repost-source-link { font-size: 12px; color: var(--wlb-text-muted); text-decoration: none; transition: color 0.15s; }
.wlb-repost-source-link:hover { color: var(--wlb-primary); }
.wlb-repost-source-text .wlb-feed-content-wrapper { margin: 0; }
.wlb-repost-source-text .wlb-feed-content-inner { font-size: 13px; }
.wlb-repost-source-card .wlb-feed-images { margin-top: 8px; }
.wlb-repost-source-card .wlb-feed-images .wlb-feed-image { border-radius: 6px; }
.wlb-avatar-xs { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.wlb-avatar-xs img { width: 100%; height: 100%; object-fit: cover; }
.wlb-repost-source-deleted { opacity: 0.5; }
.wlb-repost-source-deleted .wlb-repost-source-text { color: var(--wlb-text-muted); font-style: italic; }
/* 转发文章：转发者图片在 article-body 内，与原帖卡片的间距优化 */
.wlb-article-body > .wlb-feed-images { margin-top: 10px; margin-bottom: 0; }
.wlb-article-card > .wlb-article-body + .wlb-repost-source-card,
.wlb-feed-card > .wlb-article-body + .wlb-repost-source-card { margin-top: 10px; }
/* =============================================
关注/粉丝列表页
============================================= */
.wlb-follow-tab {
flex: 1; text-align: center; padding: 14px 0; font-size: 15px; font-weight: 500;
color: var(--wlb-text-muted); text-decoration: none; position: relative;
transition: color 0.2s;
}
.wlb-follow-tab span { font-size: 13px; margin-left: 4px; font-weight: 400; }
.wlb-follow-tab.active { color: var(--wlb-text-primary); font-weight: 600; }
.wlb-follow-tab.active::after {
content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%;
height: 2px; background: var(--wlb-primary); border-radius: 1px;
}
.wlb-follow-tab:hover { color: var(--wlb-text-primary); }
.wlb-follow-user-card { padding: 16px; transition: background 0.15s; }
.wlb-follow-user-card:hover { background: var(--wlb-bg-hover, rgba(0,0,0,0.02)); }
/* 列表内嵌套时，去掉单独卡片样式，用分隔线区分 */
#wlbFollowCard { padding: 0; }
#wlbFollowCard .wlb-follow-user-card { border-radius: 0; box-shadow: none; margin: 0; padding: 10px 16px; }
#wlbFollowCard .wlb-avatar-lg { width: 40px; height: 40px; }
#wlbFollowCard .wlb-empty-state { padding: 40px 20px; }
.wlb-follow-pagination {
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wlb-follow-page-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 10px;
border-radius: 8px; font-size: 14px; font-weight: 500;
color: var(--wlb-text-secondary); text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.wlb-follow-page-btn:hover { background: var(--wlb-bg-hover, rgba(0,0,0,0.05)); color: var(--wlb-text-primary); }
.wlb-follow-page-btn.active {
background: var(--wlb-primary); color: #fff; font-weight: 600;
}
.wlb-follow-page-ellipsis {
color: var(--wlb-text-muted); font-size: 14px; padding: 0 4px;
}
/* ============================================
高分辨率适配（最佳分辨率 1440px，超出自动扩展）
============================================ */
@media (min-width: 1600px) {
.wlb-navbar-inner,
.wlb-container {
max-width: 1320px;
}
.wlb-sidebar-left { width: 200px; }
.wlb-sidebar-right { width: 300px; }
.wlb-container { gap: 20px; }
.wlb-content-area { gap: 20px; }
}
@media (min-width: 1920px) {
.wlb-navbar-inner,
.wlb-container {
max-width: 1440px;
}
.wlb-sidebar-left { width: 210px; }
.wlb-sidebar-right { width: 310px; }
}
/* ============================================
内置短代码样式
============================================ */
/* ---- [reply] 回复可见 ---- */
.wlb-reply-content {
background: var(--wlb-bg-white);
border: 2px dashed var(--wlb-border);
border-radius: var(--wlb-radius-sm);
padding: 20px;
margin: 16px 0;
}
.wlb-reply-content-title {
font-size: 12px;
color: var(--wlb-text-muted);
margin: 0 0 16px 0;
font-weight: 400;
padding-bottom: 12px;
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-reply-content-title i {
margin-right: 6px;
color: var(--wlb-success);
}
.wlb-reply-notice {
background: var(--wlb-bg-white);
border: 2px dashed var(--wlb-border);
border-radius: var(--wlb-radius);
padding: 20px;
margin: 16px 0;
text-align: center;
color: var(--wlb-text-muted);
font-size: 14px;
}
.wlb-reply-notice i {
color: var(--wlb-text-muted);
margin-right: 4px;
}
.wlb-reply-notice a {
color: var(--wlb-primary);
text-decoration: none;
transition: color 0.15s;
}
.wlb-reply-notice a:hover {
color: var(--wlb-primary-hover);
text-decoration: underline;
}
/* ---- [loginshow] 登录可见 ---- */
.wlb-loginshow-notice {
background: var(--wlb-bg-white);
border: 2px dashed var(--wlb-border);
border-radius: var(--wlb-radius);
padding: 24px 20px;
margin: 16px 0;
text-align: center;
color: var(--wlb-text-muted);
font-size: 14px;
line-height: 1.8;
}
.wlb-loginshow-notice i {
color: var(--wlb-text-muted);
margin-right: 4px;
}
.wlb-loginshow-notice a {
color: var(--wlb-primary);
font-weight: 600;
text-decoration: none;
padding: 2px 8px;
background: var(--wlb-primary-bg);
border-radius: 4px;
transition: all 0.15s;
}
.wlb-loginshow-notice a:hover {
background: var(--wlb-primary);
color: #fff;
}
/* ---- [c-downbtn] 下载按钮 ---- */
.wlb-downbtn {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--wlb-bg-white);
border: 1px solid var(--wlb-border-light);
border-radius: var(--wlb-radius-sm);
padding: 12px 16px;
margin: 10px 0;
transition: all 0.2s;
}
.wlb-downbtn:hover {
border-color: var(--downbtn-color, var(--wlb-primary));
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wlb-downbtn-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.wlb-downbtn-icon {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
background: white;
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center;
}
.wlb-downbtn-icon i {
font-size: 15px;
color: var(--downbtn-color, var(--wlb-primary));
}
.wlb-downbtn-info {
flex: 1;
min-width: 0;
}
.wlb-downbtn-title {
font-size: 14px;
font-weight: 500;
color: var(--wlb-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wlb-downbtn-title a {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.wlb-downbtn-title a:hover {
color: var(--wlb-primary);
}
.wlb-downbtn-meta {
font-size: 12px;
color: var(--wlb-text-muted);
margin-top: 3px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.wlb-downbtn-sep {
margin: 0 4px;
color: var(--wlb-border);
}
.wlb-downbtn-pwd {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
background: rgba(0,0,0,0.06);
padding: 2px 8px;
border-radius: 4px;
color: var(--wlb-text-primary);
font-size: 12px;
letter-spacing: 0.5px;
font-weight: 500;
}
.wlb-dark .wlb-downbtn-pwd {
background: rgba(255,255,255,0.12);
}
.wlb-downbtn-copy {
background: none;
border: none;
cursor: pointer;
color: var(--wlb-text-muted);
padding: 2px 4px;
font-size: 12px;
transition: all 0.15s;
border-radius: 3px;
}
.wlb-downbtn-copy:hover {
color: var(--wlb-primary);
background: var(--wlb-primary-bg);
}
.wlb-article-body .wlb-downbtn-btn,
.wlb-downbtn-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 16px;
background: var(--downbtn-color, var(--wlb-primary));
color: #fff !important;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s;
flex-shrink: 0;
}
.wlb-article-body .wlb-downbtn-btn:hover,
.wlb-downbtn-btn:hover {
color: #fff !important;
opacity: 0.85;
}
.wlb-downbtn-btn i {
font-size: 13px;
}
/* downbtn 链接禁止下划线（覆盖 article-body 全局 hover 下划线） */
.wlb-downbtn a,
.wlb-downbtn .wlb-downbtn-title a,
.wlb-downbtn .wlb-downbtn-btn {
text-decoration: none !important;
}
.wlb-downbtn a:hover,
.wlb-downbtn .wlb-downbtn-title a:hover,
.wlb-downbtn .wlb-downbtn-btn:hover {
text-decoration: none !important;
}
/* ---- [title-plane] 带标题面板 ---- */
.wlb-title-plane {
background: #f5f5f5;
color: #444;
border: 2px dashed #bbb;
border-radius: 8px;
padding: 2px;
margin-bottom: 16px;
overflow: hidden;
}
.wlb-title-plane > p {
background: #6c757d;
color: #fff;
border-radius: 6px;
display: inline-block;
font-size: 14px;
padding: 2px 20px;
margin: 0;
}
.wlb-title-plane > div {
padding: 12px 20px;
}
.wlb-dark .wlb-title-plane {
background: #1e1e1e;
color: #b0bec5;
border-color: #555;
}
.wlb-dark .wlb-title-plane > p {
background: #555;
}
/* ---- [start-plane] 开始面板 ---- */
.wlb-start-plane {
margin: 12px 0;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
line-height: 1.7;
}
.wlb-start-plane-1 { color: #856404; background: #fff3cd; }
.wlb-start-plane-2 { color: #004085; background: #cce5ff; }
.wlb-start-plane-3 { color: #721c24; background: #f8d7da; }
.wlb-start-plane-4 { color: #383d41; background: #e2e3e5; }
.wlb-start-plane > div::before {
font-family: "Font Awesome 6 Pro";
font-weight: 900;
content: "\f005";
margin-right: 6px;
}
.wlb-dark .wlb-start-plane-1 { color: #ffd970; background: #3e3100; }
.wlb-dark .wlb-start-plane-2 { color: #8ab4f8; background: #0a1e3d; }
.wlb-dark .wlb-start-plane-3 { color: #f5a3a3; background: #3d0a0e; }
.wlb-dark .wlb-start-plane-4 { color: #9aa0a6; background: #202124; }
/* ---- [icon-url] 外链链接 ---- */
.wlb-icon-url {
background: #f0f0f0;
color: #464646 !important;
padding: 1px 6px;
border-radius: 4px;
font-size: 14px;
margin-right: 3px;
display: inline-block;
text-decoration: none !important;
}
.wlb-icon-url:hover {
text-decoration: none !important;
}
.wlb-icon-url::after {
font-family: "Font Awesome 6 Pro";
font-weight: 900;
content: "\f35d";
margin-left: 4px;
font-size: 12px;
}
.wlb-dark .wlb-icon-url {
background: #2d2d2d;
color: #b0bec5 !important;
}
/* ---- [zd-plane] 折叠面板 ---- */
.wlb-zd-plane {
border: 1px solid var(--wlb-border-light);
border-radius: var(--wlb-radius-sm);
margin: 16px 0;
overflow: hidden;
background: var(--wlb-bg-white);
}
.wlb-zd-plane-title {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: var(--wlb-bg);
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--wlb-text-primary);
transition: all 0.15s;
user-select: none;
border: none;
}
.wlb-zd-plane-title:hover {
background: var(--wlb-bg-hover);
color: var(--wlb-primary);
}
.wlb-zd-plane-title:hover .wlb-zd-plane-icon i {
color: var(--wlb-primary);
}
.wlb-zd-plane-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
transition: transform 0.25s ease;
}
.wlb-zd-plane-icon i {
font-size: 12px;
color: var(--wlb-text-muted);
transition: color 0.15s;
}
.wlb-zd-plane.expanded .wlb-zd-plane-icon {
transform: rotate(90deg);
}
.wlb-zd-plane-content {
display: none;
padding: 16px;
background: #f6f8fa;
border-top: 1px solid var(--wlb-border-light);
animation: wlb-zd-fadeIn 0.2s ease;
}
.wlb-dark .wlb-zd-plane-content {
background: #222;
border-top-color: #30363d;
}
.wlb-zd-plane.expanded .wlb-zd-plane-content {
display: block;
}
@keyframes wlb-zd-fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Toast 小气泡提示 ---- */
.wlb-toast {
position: fixed;
background: var(--wlb-text-primary);
color: var(--wlb-bg-white);
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
z-index: 10000;
pointer-events: none;
animation: wlb-toast-fade 1.5s ease forwards;
}
.wlb-toast i {
margin-right: 4px;
font-size: 12px;
}
html.wlb-dark .wlb-toast {
background: var(--wlb-text-secondary);
color: var(--wlb-bg-white);
}
@keyframes wlb-toast-fade {
0% { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
15% { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
80% { opacity: 1; }
100% { opacity: 0; }
}
/* ---- [pwdshow] 密码可见 ---- */
.wlb-pwdshow-form-wrap {
background: var(--wlb-bg-white);
border: 2px dashed var(--wlb-border);
border-radius: var(--wlb-radius-sm);
padding: 24px 20px;
margin: 16px 0;
}
.wlb-pwdshow-notice {
text-align: center;
color: var(--wlb-text-muted);
font-size: 14px;
margin-bottom: 16px;
}
.wlb-pwdshow-notice i {
margin-right: 4px;
}
.wlb-pwdshow-error {
text-align: center;
color: var(--wlb-danger);
font-size: 13px;
margin-bottom: 12px;
padding: 8px 12px;
background: var(--wlb-danger-bg);
border-radius: 6px;
}
.wlb-pwdshow-error i {
margin-right: 4px;
}
.wlb-pwdshow-input-group {
display: flex;
gap: 8px;
max-width: 320px;
margin: 0 auto;
}
.wlb-pwdshow-input {
flex: 1;
height: 40px;
padding: 0 14px;
border: 1px solid var(--wlb-border);
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.wlb-pwdshow-input:focus {
border-color: var(--wlb-primary);
box-shadow: 0 0 0 2px var(--wlb-primary-focus-ring);
}
.wlb-pwdshow-btn {
height: 40px;
padding: 0 20px;
background: var(--wlb-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.wlb-pwdshow-btn:hover {
background: var(--wlb-primary-hover);
transform: translateY(-1px);
}
.wlb-pwdshow-content {
background: var(--wlb-bg-white);
border: 2px dashed var(--wlb-border);
border-radius: var(--wlb-radius);
padding: 20px;
margin: 16px 0;
}
.wlb-pwdshow-content-title {
font-size: 12px;
color: var(--wlb-text-muted);
margin: 0 0 16px 0;
font-weight: 400;
padding-bottom: 12px;
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-pwdshow-content-title i {
margin-right: 6px;
color: var(--wlb-success);
}
/* ---- [c-alert] 警告提示框 ---- */
.wlb-c-alert {
padding: 12px 16px;
border-radius: var(--wlb-radius-sm);
margin: 12px 0;
font-size: 14px;
line-height: 1.6;
}
.wlb-c-alert i {
margin-right: 8px;
}
/* ---- [clickshow] 点击显示隐藏 ---- */
.wlb-clickshow {
border: 2px dashed var(--wlb-border);
display: inline-block;
border-radius: var(--wlb-radius-sm);
padding: 2px 8px;
margin: 4px 0;
background-image: repeating-linear-gradient(-45deg, #fff, #f7f9fa 2px, #fff 0, #fff 6px);
color: transparent;
user-select: none;
cursor: pointer;
transition: all 0.3s;
}
.wlb-clickshow.revealed {
color: var(--wlb-text-primary);
background: var(--wlb-bg-gray);
border-style: solid;
}
.wlb-clickshow-block {
display: block;
}
/* ===== 文章详情页 - 版权声明 ===== */
.wlb-article-copyright {
margin-top: 24px;
padding: 12px 20px;
background: var(--wlb-bg);
border-radius: var(--wlb-radius-sm);
font-size: 13px;
line-height: 1.8;
color: var(--wlb-text-muted);
}
.wlb-article-copyright p {
margin: 0;
}
.wlb-article-copyright strong {
color: var(--wlb-text-secondary);
}
/* ===== 文章详情页 - THE END ===== */
.wlb-article-end {
text-align: center;
color: var(--wlb-text-muted);
margin: 24px 0;
font-size: 13px;
letter-spacing: 2px;
user-select: none;
}
.wlb-article-end::before,
.wlb-article-end::after {
content: "";
background: var(--wlb-border-light);
width: 20%;
vertical-align: middle;
height: 1px;
display: inline-block;
margin: 0 16px;
}
/* ===== 文章详情页 - 上一篇/下一篇 ===== */
.wlb-article-nav {
display: flex;
gap: 12px;
margin: 20px 0;
}
.wlb-article-nav-card {
flex: 1;
display: block;
padding: 16px;
border-radius: var(--wlb-radius-sm);
text-decoration: none;
min-width: 0;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
color: #fff;
min-height: 80px;
}
.wlb-article-nav-card::before {
content: "";
position: absolute;
left: 0; top: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.wlb-article-nav-card:hover {
color: #fff;
}
.wlb-article-nav-card:hover::before {
background: rgba(0,0,0,0.6);
}
.wlb-article-nav-overlay {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.wlb-article-nav-next {
text-align: right;
}
.wlb-article-nav-label {
font-size: 12px;
color: rgba(255,255,255,0.7);
flex-shrink: 0;
}
.wlb-article-nav-title {
font-size: 14px;
font-weight: 500;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wlb-article-nav-empty {
flex: 1;
padding: 14px 16px;
background: var(--wlb-bg);
border: 1px solid var(--wlb-border);
border-radius: var(--wlb-radius);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--wlb-text-muted);
font-size: 13px;
min-height: 80px;
}
@media (max-width: 500px) {
.wlb-article-nav { display: none; }
}
/* ===== 文章详情页 - 相关内容 ===== */
.wlb-article-related {
background: var(--wlb-bg-white);
border: 1px solid var(--wlb-border-light);
border-radius: var(--wlb-radius-sm);
margin: 20px 0;
overflow: hidden;
}
.wlb-article-related-title {
padding: 14px 20px;
font-size: 16px;
font-weight: 600;
color: var(--wlb-text-primary);
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-article-related-list {
list-style: none;
padding: 8px 20px;
margin: 0;
}
.wlb-article-related-list li {
padding: 8px 0;
border-bottom: 1px solid var(--wlb-border-light);
display: flex;
align-items: center;
gap: 8px;
}
.wlb-article-related-list li:last-child {
border-bottom: none;
}
.wlb-article-related-list li::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--wlb-border);
flex-shrink: 0;
}
.wlb-article-related-list a {
color: var(--wlb-text-secondary);
text-decoration: none;
font-size: 14px;
transition: color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wlb-article-related-list a:hover {
color: var(--wlb-primary);
}
/* ============================================
投诉功能
============================================ */
.wlb-complaint-type-option {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 1px solid var(--wlb-border);
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.wlb-complaint-type-option:hover {
border-color: var(--wlb-primary);
color: var(--wlb-primary);
}
.wlb-complaint-type-option input[type="radio"] {
margin: 0;
width: 14px;
height: 14px;
border: 2px solid var(--wlb-border-medium);
border-radius: 50%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.wlb-complaint-type-option input[type="radio"]:checked {
border-color: var(--wlb-primary);
background: var(--wlb-primary);
}
.wlb-complaint-type-option input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.wlb-complaint-type-option:has(input:checked) {
border-color: var(--wlb-primary);
background: var(--wlb-primary-bg);
color: var(--wlb-primary);
}
/* 投诉列表状态标签 */
.wlb-complaint-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
}
.wlb-complaint-status-pending { background: var(--wlb-complaint-pending-bg); color: var(--wlb-complaint-pending-text); }
.wlb-complaint-status-handled { background: var(--wlb-complaint-handled-bg); color: var(--wlb-complaint-handled-text); }
.wlb-complaint-status-dismissed { background: var(--wlb-complaint-dismissed-bg); color: var(--wlb-complaint-dismissed-text); }
html.wlb-dark .wlb-complaint-status-pending { background: rgba(250,140,22,0.15); color: #fa8c16; }
html.wlb-dark .wlb-complaint-status-handled { background: rgba(82,196,26,0.15); color: #52c41a; }
html.wlb-dark .wlb-complaint-status-dismissed { background: rgba(0,0,0,0.15); color: #999; }
/* 投诉批量选择 - 复用邀请页样式 */
.wlb-complaint-checkbox {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--wlb-border-medium);
border-radius: 3px;
background: var(--wlb-bg-white);
position: relative;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
.wlb-complaint-checkbox:checked {
background: var(--wlb-primary);
border-color: var(--wlb-primary);
}
.wlb-complaint-checkbox:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wlb-complaint-checkbox:disabled {
opacity: .4;
cursor: not-allowed;
}
/* 投诉管理页面 - 筛选栏 */
.wlb-complaint-filter {
padding: 16px 20px;
border-bottom: 1px solid var(--wlb-border-light);
}
.wlb-complaint-filter-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.wlb-complaint-filter .wlb-form-input {
height: 36px;
padding: 0 12px;
font-size: 13px;
border-radius: var(--wlb-radius-sm);
}
.wlb-complaint-filter .wlb-form-input[type="text"] {
width: 180px;
}
.wlb-complaint-filter select.wlb-form-input {
width: auto;
min-width: 100px;
}
.wlb-complaint-filter .wlb-btn {
height: 36px;
padding: 0 16px;
font-size: 13px;
}
/* 投诉管理页面 - 批量操作栏 */
.wlb-complaint-batch {
display: none;
padding: 10px 20px;
border-bottom: 1px solid var(--wlb-border-light);
background: var(--wlb-bg-hover);
width: 100%;
box-sizing: border-box;
}
.wlb-complaint-batch.visible {
display: flex;
}
.wlb-complaint-batch-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.wlb-complaint-batch-left {
display: flex;
align-items: center;
gap: 10px;
}
.wlb-complaint-batch-right {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wlb-complaint-batch-count {
font-size: 13px;
color: var(--wlb-text-muted);
}
.wlb-complaint-batch-count strong {
color: var(--wlb-primary);
}
/* 投诉管理页面 - 投诉项 */
.wlb-complaint-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--wlb-border-light);
transition: background 0.15s;
}
.wlb-complaint-item:last-child {
border-bottom: none;
}
.wlb-complaint-item:hover {
background: var(--wlb-bg-hover);
}
.wlb-complaint-item .wlb-complaint-checkbox {
margin-top: 4px;
}
.wlb-complaint-body {
flex: 1;
min-width: 0;
}
.wlb-complaint-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.wlb-complaint-header a {
font-size: 14px;
font-weight: 500;
color: var(--wlb-text-primary);
}
.wlb-complaint-header a:hover {
color: var(--wlb-primary);
}
.wlb-complaint-target {
font-size: 14px;
color: var(--wlb-text-secondary);
margin-bottom: 6px;
line-height: 1.6;
}
.wlb-complaint-target a {
color: var(--wlb-primary);
text-decoration: none;
}
.wlb-complaint-target a:hover {
text-decoration: underline;
}
.wlb-complaint-detail {
font-size: 13px;
color: var(--wlb-text-secondary);
margin-top: 6px;
line-height: 1.6;
}
.wlb-complaint-detail strong {
font-weight: 500;
color: var(--wlb-text-primary);
}
.wlb-complaint-images {
margin-top: 8px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wlb-complaint-images img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--wlb-radius-sm);
cursor: pointer;
transition: opacity 0.2s;
}
.wlb-complaint-images img:hover {
opacity: 0.8;
}
.wlb-complaint-actions {
margin-top: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wlb-complaint-handled-info {
margin-top: 10px;
font-size: 13px;
color: var(--wlb-text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.wlb-complaint-handled-info i {
font-size: 12px;
}
/* ============================================
友情链接页面（/link）
============================================ */
.wlb-links-page {
padding: 20px 0 40px;
}
/* 页面标题 */
.wlb-links-page-header {
text-align: center;
margin-bottom: 32px;
padding: 30px 16px 24px;
}
.wlb-links-page-title {
font-size: 24px;
font-weight: 700;
color: var(--wlb-text-primary);
margin: 0 0 10px;
}
.wlb-links-page-title i {
margin-right: 8px;
color: var(--wlb-primary);
}
.wlb-links-page-desc {
font-size: 14px;
color: var(--wlb-text-muted);
margin: 0;
line-height: 1.6;
}
/* 分区 */
.wlb-links-section {
margin-bottom: 32px;
}
.wlb-links-section-title {
font-size: 16px;
font-weight: 600;
color: var(--wlb-text-primary);
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 2px solid var(--wlb-primary);
display: flex;
align-items: center;
gap: 6px;
}
.wlb-links-section-title i {
color: var(--wlb-primary);
font-size: 15px;
}
/* 卡片网格 */
.wlb-links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
/* 单个链接卡片 */
.wlb-link-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--wlb-bg-white);
border: 1px solid var(--wlb-border-light);
border-radius: var(--wlb-radius);
text-decoration: none;
transition: all 0.25s ease;
position: relative;
top: 0;
}
.wlb-link-card:hover {
top: -3px;
border-color: var(--wlb-primary);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.wlb-link-card:hover .wlb-link-card-icon {
background: var(--wlb-primary-light);
color: var(--wlb-primary);
transform: scale(1.05);
}
.wlb-link-card:hover .wlb-link-card-name {
color: var(--wlb-primary);
}
/* 卡片图标 */
.wlb-link-card-icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 10px;
background: var(--wlb-bg);
border: 1px solid var(--wlb-border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--wlb-text-muted);
transition: all 0.25s ease;
overflow: hidden;
}
html.wlb-dark .wlb-link-card-icon {
background: #2e2e2e;
border-color: #3a3a3a;
}
.wlb-link-card-favicon {
width: 24px;
height: 24px;
border-radius: 4px;
object-fit: contain;
}
/* 卡片文字信息 */
.wlb-link-card-info {
flex: 1;
min-width: 0;
}
.wlb-link-card-name {
font-size: 15px;
font-weight: 600;
color: var(--wlb-text-primary);
line-height: 1.4;
transition: color 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wlb-link-card-desc {
font-size: 13px;
color: var(--wlb-text-muted);
margin-top: 4px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 空状态 */
.wlb-links-empty {
text-align: center;
padding: 60px 16px;
color: var(--wlb-text-muted);
}
.wlb-links-empty p {
margin-top: 12px;
font-size: 14px;
}
/* ===== 响应式 ===== */
@media (max-width: 700px) {
.wlb-links-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.wlb-link-card {
padding: 14px;
gap: 10px;
}
.wlb-link-card-icon {
width: 38px;
height: 38px;
min-width: 38px;
font-size: 18px;
}
.wlb-link-card-name {
font-size: 14px;
}
}
@media (max-width: 480px) {
.wlb-links-grid {
grid-template-columns: 1fr;
}
.wlb-links-page-header {
padding: 20px 12px 16px;
}
.wlb-links-page-title {
font-size: 20px;
}
}