/* ============================================================ 现代论坛 · 主样式 所有颜色/圆角/字体都走 CSS 变量, 由主题引擎在 注入覆盖 ============================================================ */ /* ---------- 主题变量默认值 (default 主题兜底) ---------- */ :root{ --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-2: #f6f7f8; --color-text: #1c1e21; --color-muted: #6b7076; --color-primary: #2b6cb0; --color-primary-fg: #ffffff; --color-border: #e4e6e9; --color-header: #ffffff; --radius: 6px; --radius-sm: 5px; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; --content-width: 1080px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 6px 24px rgba(0,0,0,.12); --primary-soft: color-mix(in srgb, var(--color-primary) 10%, transparent); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-family); background:var(--color-bg); color:var(--color-text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:var(--color-primary); text-decoration:none; } a:hover{ text-decoration:underline; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ line-height:1.3; margin:0 0 .5em; font-weight:600; } .muted{ color:var(--color-muted); } .container{ max-width:var(--content-width); margin:0 auto; padding:0 16px; } /* ---------- 顶栏 ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--color-header); border-bottom:1px solid var(--color-border); } .header-inner{ display:flex; align-items:center; gap:16px; height:54px; } .brand{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px; color:var(--color-text); } .brand:hover{ text-decoration:none; } .brand-mark{ width:22px; height:22px; border-radius:5px; background:var(--color-primary); } .search-box{ flex:1; max-width:360px; } .search-box input{ width:100%; height:34px; padding:0 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-2); color:var(--color-text); font-size:13px; transition:border-color .12s; } .search-box input:focus{ outline:none; background:var(--color-surface); border-color:var(--color-primary); } .header-nav{ display:flex; align-items:center; gap:16px; margin-left:auto; } .nav-link{ color:var(--color-muted); font-weight:500; font-size:14px; position:relative; } .nav-link:hover{ color:var(--color-text); text-decoration:none; } .nav-bell .badge{ position:absolute; top:-8px; right:-12px; background:#e53e3e; color:#fff; font-size:11px; line-height:1; padding:2px 5px; border-radius:999px; font-weight:600; } /* ---------- 用户菜单 ---------- */ .user-menu{ position:relative; } .user-menu-trigger{ border:none; background:none; padding:0; border-radius:50%; } .user-menu-dropdown{ position:absolute; right:0; top:calc(100% + 8px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); min-width:170px; padding:6px; display:none; } .user-menu.open .user-menu-dropdown{ display:block; } .user-menu-dropdown a{ display:block; padding:9px 12px; border-radius:var(--radius-sm); color:var(--color-text); font-size:14px; } .user-menu-dropdown a:hover{ background:var(--color-surface-2); text-decoration:none; } .menu-sep{ height:1px; background:var(--color-border); margin:6px 4px; } /* ---------- 按钮 ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-weight:500; font-size:13px; transition:background .12s, border-color .12s; white-space:nowrap; } .btn:hover{ text-decoration:none; background:var(--color-surface-2); } .btn-primary{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-primary-fg); } .btn-primary:hover{ background:color-mix(in srgb, var(--color-primary) 88%, #000); } .btn-ghost{ background:transparent; } .btn-ghost:hover{ background:var(--color-surface-2); } .btn-danger{ color:#c53030; border-color:var(--color-border); } .btn-danger:hover{ background:#c53030; color:#fff; border-color:#c53030; } .btn-sm{ height:28px; padding:0 10px; font-size:12.5px; } .btn-block{ width:100%; } .btn:disabled{ opacity:.5; cursor:default; } /* ---------- 卡片 ---------- */ .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); } .card-head{ padding:12px 16px; font-weight:600; font-size:12px; color:var(--color-muted); text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--color-border); } /* ---------- 主体布局 ---------- */ .main-grid{ display:grid; grid-template-columns:1fr 280px; gap:24px; padding-top:20px; padding-bottom:48px; align-items:start; } .side-col{ position:sticky; top:74px; display:flex; flex-direction:column; gap:16px; } .flash-area{ padding-top:16px; } /* END_BASE */ /* ---------- 侧栏 ---------- */ .cat-list{ list-style:none; margin:0; padding:8px; } .cat-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--color-text); font-size:14px; font-weight:500; } .cat-item:hover{ background:var(--color-surface-2); text-decoration:none; } .cat-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; } .cat-count{ margin-left:auto; color:var(--color-muted); font-size:12px; font-weight:600; } .tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 18px; } .tag-cloud.big{ padding:20px; gap:10px; } .stats-card{ display:flex; padding:18px; text-align:center; } .stats-card .stat{ flex:1; } .stats-card .stat b{ display:block; font-size:20px; } .stats-card .stat span{ font-size:12px; color:var(--color-muted); } /* ---------- 标签 chip ---------- */ .tag-chip{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; color:var(--color-muted); background:var(--color-surface-2); border:1px solid var(--color-border); } .tag-chip:hover{ text-decoration:none; color:var(--color-text); border-color:var(--color-muted); } .tag-chip b{ opacity:.6; font-weight:600; } .tag-chip-sm{ padding:1px 7px; font-size:11.5px; } /* ---------- 列表工具栏 ---------- */ .list-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid var(--color-border); } .list-tabs{ display:flex; gap:2px; } .list-tabs a{ padding:9px 14px; color:var(--color-muted); font-weight:500; font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; } .list-tabs a:hover{ text-decoration:none; color:var(--color-text); } .list-tabs a.active{ color:var(--color-text); border-bottom-color:var(--color-primary); font-weight:600; } .list-toolbar .btn{ margin-bottom:8px; } /* ---------- 主题列表 ---------- */ .topic-list{ list-style:none; margin:0; padding:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; } .topic-row{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--color-border); } .topic-row:last-child{ border-bottom:none; } .topic-row:hover{ background:var(--color-surface-2); } .topic-avatar .avatar{ width:38px; height:38px; } .topic-main{ flex:1; min-width:0; } .topic-title-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .topic-title{ font-size:15px; font-weight:500; color:var(--color-text); } .topic-title:hover{ color:var(--color-primary); text-decoration:none; } .topic-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; } .cat-badge{ font-size:12px; font-weight:500; padding:1px 8px; border-radius:var(--radius-sm); color:var(--color-muted); background:var(--color-surface-2); border:1px solid var(--color-border); display:inline-flex; align-items:center; gap:5px; } .cat-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,#888); } .cat-badge:hover{ text-decoration:none; color:var(--color-text); } .topic-stats{ display:flex; gap:18px; text-align:center; } .stat-num{ font-size:14px; font-weight:600; color:var(--color-text); min-width:32px; } .stat-num span{ display:block; font-size:11px; font-weight:400; color:var(--color-muted); } .topic-activity{ display:flex; flex-direction:column; align-items:center; gap:3px; width:52px; } .topic-activity time{ font-size:11.5px; color:var(--color-muted); } .avatar{ border-radius:50%; object-fit:cover; background:var(--color-surface-2); } .avatar-xs{ width:24px; height:24px; } .avatar-sm{ width:32px; height:32px; } .avatar-lg{ width:46px; height:46px; } .avatar-xl{ width:88px; height:88px; } .pin-flag,.lock-flag{ font-size:11px; font-weight:500; padding:1px 6px; border-radius:var(--radius-sm); } .pin-flag{ color:#b7791f; background:rgba(183,121,31,.1); } .lock-flag{ color:var(--color-muted); background:var(--color-surface-2); } /* ---------- 空状态/分页 ---------- */ .empty-state{ text-align:center; padding:56px 20px; color:var(--color-muted); } .empty-state p{ margin-bottom:16px; } .pagination{ display:flex; gap:6px; justify-content:center; margin-top:22px; flex-wrap:wrap; } .page-btn{ min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font-size:14px; } .page-btn:hover{ text-decoration:none; border-color:var(--color-primary); } .page-btn.active{ background:var(--color-primary); color:var(--color-primary-fg); border-color:transparent; } .page-gap{ align-self:center; color:var(--color-muted); } /* ---------- 页头 ---------- */ .page-head{ margin-bottom:20px; } .page-head h1{ font-size:24px; display:flex; align-items:center; gap:10px; } .page-sub{ color:var(--color-muted); margin:4px 0 0; } .section-title{ font-size:16px; margin:28px 0 14px; display:flex; align-items:center; gap:8px; } .section-title small{ color:var(--color-muted); font-weight:400; } /* ---------- 主题详情 (帖子) ---------- */ .topic-detail{ display:flex; flex-direction:column; gap:16px; } .topic-breadcrumb{ font-size:13px; color:var(--color-muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; } .topic-heading{ font-size:26px; } .topic-tags{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .replies-head{ margin-top:8px; } .replies-head h2{ font-size:16px; color:var(--color-muted); } .post-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; } .post-card{ display:flex; gap:16px; background:var(--color-surface); border-bottom:1px solid var(--color-border); padding:16px 18px; } .post-card:last-child{ border-bottom:none; } .post-side{ width:120px; flex-shrink:0; text-align:center; } .post-author{ margin-top:8px; } .author-name{ font-weight:600; font-size:14px; color:var(--color-text); display:block; } .author-meta{ font-size:11.5px; color:var(--color-muted); margin-top:2px; } .role-badge{ display:inline-block; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:5px; margin-top:4px; } .role-admin{ color:#dc2626; background:rgba(220,38,38,.12); } .role-moderator{ color:#0891b2; background:rgba(8,145,178,.12); } .post-body{ flex:1; min-width:0; } .post-toolbar{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--color-muted); margin-bottom:10px; } .post-floor{ font-weight:600; } .edited{ font-style:italic; } .reply-ref{ font-size:13px; color:var(--color-muted); margin-bottom:6px; padding:4px 10px; background:var(--color-surface-2); border-radius:var(--radius-sm); display:inline-block; } .post-footer{ display:flex; gap:4px; margin-top:12px; } .act-btn{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--radius-sm); border:1px solid transparent; background:transparent; color:var(--color-muted); font-size:13px; } .act-btn:hover{ background:var(--color-surface-2); color:var(--color-text); text-decoration:none; } .like-btn.liked{ color:#e11d48; } /* ---------- 回复框/编辑器 ---------- */ .reply-box,.compose-form{ padding:20px; } .reply-box h3{ font-size:16px; margin-bottom:12px; } .editor textarea, .field textarea, .field input, .field select{ width:100%; padding:11px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font-size:14.5px; font-family:inherit; resize:vertical; } .editor textarea:focus, .field textarea:focus, .field input:focus, .field select:focus{ outline:none; border-color:var(--color-primary); } .reply-actions{ display:flex; align-items:center; gap:14px; margin-top:12px; } .editor-hint{ font-size:12.5px; color:var(--color-muted); } .field{ display:block; margin-bottom:16px; } .field-label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; } .field-label small{ font-weight:400; color:var(--color-muted); } .form-actions{ display:flex; gap:10px; margin-top:8px; } .checkbox{ display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:14px; cursor:pointer; } .locked-note,.login-cta{ padding:18px; text-align:center; color:var(--color-muted); } /* ---------- flash ---------- */ .flash{ padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:10px; font-size:14px; border:1px solid transparent; } .flash-success{ background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.25); } .flash-error{ background:rgba(239,68,68,.1); color:#b91c1c; border-color:rgba(239,68,68,.25); } .flash-info{ background:var(--color-surface-2); color:var(--color-text); border-color:var(--color-border); } /* ---------- markdown 正文 ---------- */ .markdown{ font-size:15px; line-height:1.75; word-wrap:break-word; } .markdown p{ margin:0 0 1em; } .markdown h2,.markdown h3,.markdown h4{ margin:1.2em 0 .5em; } .markdown pre{ background:var(--color-surface-2); padding:14px 16px; border-radius:var(--radius-sm); overflow:auto; } .markdown code{ background:var(--color-surface-2); padding:2px 6px; border-radius:4px; font-size:.9em; } .markdown pre code{ background:none; padding:0; } .markdown blockquote{ margin:0 0 1em; padding:6px 16px; border-left:3px solid var(--color-border); color:var(--color-muted); background:var(--color-surface-2); } .markdown a.mention{ color:var(--color-primary); font-weight:500; } .markdown ul,.markdown ol{ padding-left:1.4em; margin:0 0 1em; } .markdown img{ border-radius:var(--radius-sm); margin:8px 0; } .markdown hr{ border:none; border-top:1px solid var(--color-border); margin:1.5em 0; } /* END_COMPONENTS */ /* ---------- 主题商店 ---------- */ .my-themes-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .head-actions{ display:flex; gap:10px; } .theme-section{ margin-bottom:8px; } .theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; } .theme-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; transition:border-color .12s; } .theme-card:hover{ border-color:var(--color-muted); } .theme-card.is-equipped{ border-color:var(--color-primary); } .theme-preview{ display:block; height:140px; position:relative; padding:14px; overflow:hidden; } .theme-preview:hover{ text-decoration:none; } .tp-bar{ position:absolute; top:0; left:0; right:0; height:32px; border-bottom:1px solid var(--color-border); } .tp-accent{ position:absolute; top:46px; left:14px; width:54px; height:16px; border-radius:var(--radius-sm); } .tp-line{ position:absolute; top:74px; left:14px; right:60px; height:10px; border-radius:var(--radius-sm); } .tp-line.short{ top:92px; right:110px; } .tp-dark-tag{ position:absolute; bottom:10px; right:10px; font-size:10px; color:#fff; background:rgba(0,0,0,.4); padding:2px 8px; border-radius:var(--radius-sm); } .theme-preview.big{ height:200px; border-radius:var(--radius); border:1px solid var(--color-border); } .theme-info{ padding:14px 16px; } .theme-name-row{ display:flex; align-items:center; gap:8px; } .theme-name{ font-weight:600; font-size:15px; color:var(--color-text); } .theme-name:hover{ color:var(--color-primary); text-decoration:none; } .equip-tag{ font-size:11px; font-weight:600; color:var(--color-primary); border:1px solid var(--color-primary); padding:1px 7px; border-radius:var(--radius-sm); } .private-tag{ font-size:11px; font-weight:600; color:var(--color-muted); background:var(--color-surface-2); border:1px solid var(--color-border); padding:1px 7px; border-radius:var(--radius-sm); } .theme-desc{ color:var(--color-muted); font-size:13px; margin:6px 0 10px; min-height:18px; } .theme-meta{ display:flex; gap:12px; font-size:12px; color:var(--color-muted); margin-bottom:12px; flex-wrap:wrap; } .theme-actions{ display:flex; gap:8px; align-items:center; } /* ---------- 主题详情 ---------- */ .theme-detail-head{ display:grid; grid-template-columns:320px 1fr; gap:24px; margin-bottom:24px; align-items:center; } .theme-detail-info h1{ font-size:24px; display:flex; align-items:center; gap:10px; } .theme-body{ display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; } .theme-doc{ padding:24px 28px; } .theme-palette{ padding:18px; } .theme-palette h3{ font-size:14px; color:var(--color-muted); margin-bottom:12px; } .palette-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .palette-list li{ display:flex; align-items:center; gap:10px; font-size:12.5px; } .swatch{ width:22px; height:22px; border-radius:var(--radius-sm); border:1px solid var(--color-border); flex-shrink:0; } .palette-list code{ flex:1; color:var(--color-text); } .swatch-val{ color:var(--color-muted); } /* ---------- 主题编辑器 ---------- */ .editor-cols{ display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; } .editor-fields{ padding:22px; } .var-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 18px; } .var-row label{ display:block; font-size:12.5px; margin-bottom:5px; color:var(--color-text); } .var-row label code{ color:var(--color-muted); font-size:11px; } .color-input{ display:flex; gap:8px; align-items:center; } .color-pick{ width:38px; height:38px; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:none; cursor:pointer; flex-shrink:0; } .var-text{ width:100%; padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font-size:13px; font-family:ui-monospace,monospace; } .editor-preview .preview-sticky{ position:sticky; top:84px; } .preview-label{ font-size:12px; color:var(--color-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; } .theme-preview-frame{ border:1px solid var(--pv-border,#e2e8f0); border-radius:var(--radius); overflow:hidden; background:var(--pv-bg,#f8fafc); font-family:var(--pv-font, inherit); } .pf-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--pv-header,#fff); border-bottom:1px solid var(--pv-border,#e2e8f0); } .pf-brand{ font-weight:700; color:var(--pv-text,#0f172a); } .pf-btn{ font-size:12px; padding:5px 12px; border-radius:var(--pv-radius,6px); background:var(--pv-primary,#3b82f6); color:var(--pv-primary-fg,#fff); } .pf-body{ padding:16px; display:flex; flex-direction:column; gap:12px; } .pf-card{ background:var(--pv-surface,#fff); border:1px solid var(--pv-border,#e2e8f0); border-radius:var(--pv-radius,6px); padding:14px; } .pf-title{ font-weight:600; color:var(--pv-text,#0f172a); margin-bottom:6px; } .pf-text{ color:var(--pv-text,#0f172a); font-size:13px; } .pf-muted{ color:var(--pv-muted,#64748b); font-size:12px; margin-top:6px; } .pf-chip{ display:inline-block; margin-top:10px; font-size:11px; padding:1px 8px; border-radius:var(--pv-radius,6px); color:var(--pv-primary,#3b82f6); border:1px solid var(--pv-primary,#3b82f6); } /* ---------- 个人主页 ---------- */ .profile-header{ display:flex; align-items:center; gap:20px; padding:24px; margin-bottom:20px; } .profile-info{ flex:1; } .profile-info h1{ font-size:22px; display:flex; align-items:center; gap:10px; margin-bottom:2px; } .profile-username{ color:var(--color-muted); margin:0 0 8px; } .profile-bio{ margin:0 0 10px; } .profile-stats{ display:flex; gap:18px; font-size:13px; color:var(--color-muted); flex-wrap:wrap; } .profile-stats b{ color:var(--color-text); } .profile-tabs{ margin-bottom:16px; } .recent-posts{ padding:8px; } .recent-post{ display:block; padding:14px 16px; border-radius:var(--radius-sm); } .recent-post:hover{ background:var(--color-surface-2); text-decoration:none; } .rp-title{ font-weight:600; color:var(--color-text); } .rp-excerpt{ color:var(--color-muted); font-size:13px; margin:4px 0; } .recent-post time{ font-size:12px; color:var(--color-muted); } /* ---------- 通知 ---------- */ .notif-head{ display:flex; align-items:center; justify-content:space-between; } .notif-list{ padding:6px; } .notif-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); position:relative; } .notif-item:hover{ background:var(--color-surface-2); text-decoration:none; } .notif-item.unread{ background:var(--color-surface-2); box-shadow:inset 3px 0 0 var(--color-primary); } .notif-body{ flex:1; } .notif-body p{ margin:0; color:var(--color-text); font-size:14px; } .notif-body time{ font-size:12px; color:var(--color-muted); } .unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--color-primary); } /* ---------- 认证页 ---------- */ .auth-wrap{ max-width:420px; margin:40px auto; } .auth-card{ padding:32px; } .auth-title{ font-size:24px; margin-bottom:4px; } .auth-sub{ color:var(--color-muted); margin:0 0 24px; } .auth-note{ font-size:12.5px; color:var(--color-muted); margin-top:16px; text-align:center; } .search-inline{ display:flex; gap:10px; margin-top:12px; } .search-inline input{ flex:1; padding:10px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); } /* ---------- 错误页 ---------- */ .error-page{ text-align:center; padding:80px 20px; } .error-code{ font-size:72px; font-weight:700; color:var(--color-text); line-height:1; } .error-msg{ font-size:18px; color:var(--color-muted); margin:12px 0 24px; } /* ---------- 页脚 ---------- */ .site-footer{ border-top:1px solid var(--color-border); padding:28px 0; margin-top:20px; text-align:center; color:var(--color-muted); font-size:13px; } .site-footer p{ margin:2px 0; } /* ---------- 响应式 ---------- */ @media (max-width:900px){ .main-grid{ grid-template-columns:1fr; } .side-col{ position:static; } .theme-detail-head{ grid-template-columns:1fr; } .theme-body{ grid-template-columns:1fr; } .editor-cols{ grid-template-columns:1fr; } .editor-preview .preview-sticky{ position:static; } } @media (max-width:640px){ .search-box{ display:none; } .post-card{ flex-direction:column; gap:10px; } .post-side{ width:auto; display:flex; align-items:center; gap:12px; text-align:left; } .post-author{ margin-top:0; } .topic-stats{ display:none; } .var-grid{ grid-template-columns:1fr; } .theme-grid{ grid-template-columns:1fr; } } /* ---------- 深色主题微调 ---------- */ html.dark .search-box input{ background:var(--color-surface-2); } html.dark .markdown pre{ background:rgba(0,0,0,.25); } /* ---------- 账户设置 / 管理后台 ---------- */ .settings-card{ padding:22px; } .stack-form{ display:flex; flex-direction:column; gap:16px; } .stack-form .field{ display:flex; flex-direction:column; gap:6px; } .stack-form .field > span{ font-size:13px; font-weight:600; color:var(--color-text); } .stack-form .field small{ font-weight:400; margin-left:4px; } .stack-form input[type=text],.stack-form input[type=email],.stack-form input[type=url], .stack-form input[type=password],.stack-form input[type=number],.stack-form textarea,.stack-form select{ width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; box-sizing:border-box; } .stack-form input:focus,.stack-form textarea:focus,.stack-form select:focus{ outline:none; border-color:var(--color-primary); } .stack-form input:disabled{ background:var(--color-surface-2); color:var(--color-muted); cursor:not-allowed; } .stack-form textarea{ resize:vertical; } .field-check{ flex-direction:row !important; align-items:center; gap:8px; } .field-check input{ width:auto; } .field-row{ display:flex; gap:14px; flex-wrap:wrap; } .field-row .field{ flex:1; min-width:160px; } .field-narrow{ flex:0 0 110px !important; } .form-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .avatar-preview-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px; } .avatar-preview-row h3{ margin:0 0 4px; } .settings-tabs,.admin-tabs{ margin-bottom:18px; } /* 后台概览统计卡片 */ .admin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; margin-bottom:18px; } .stat-card{ padding:20px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .stat-num{ font-size:30px; font-weight:700; color:var(--color-primary); line-height:1; } .stat-label{ font-size:13px; color:var(--color-muted); } .admin-recent{ padding:20px; } .admin-recent h3{ margin:0 0 14px; } .admin-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .admin-list li{ display:flex; align-items:center; gap:10px; } .admin-list time{ margin-left:auto; font-size:12px; } /* 后台表格 */ .admin-table{ width:100%; border-collapse:collapse; font-size:14px; } .admin-table th,.admin-table td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--color-border); vertical-align:middle; } .admin-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-muted); } .admin-table td .avatar-sm{ vertical-align:middle; margin-right:6px; } .admin-table tr:last-child td{ border-bottom:none; } .admin-row-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .cat-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; } .inline-edit{ display:inline-block; } .inline-edit summary{ list-style:none; cursor:pointer; } .inline-edit summary::-webkit-details-marker{ display:none; } .inline-form{ margin-top:10px; padding:12px; background:var(--color-surface-2); border-radius:var(--radius-sm); gap:8px; min-width:220px; } .inline-form input{ font-size:13px; } .role-form select{ padding:6px 8px; font-size:13px; } .official-tag{ background:var(--color-surface-2); color:var(--color-primary); padding:1px 7px; border-radius:var(--radius-sm); border:1px solid var(--color-border); font-size:12px; font-weight:600; } .ok{ color:#16a34a; font-weight:600; } /* 角色徽章 */ .role-badge{ display:inline-block; padding:1px 7px; border-radius:var(--radius-sm); font-size:11px; font-weight:600; vertical-align:middle; } .role-admin{ background:#fee2e2; color:#dc2626; } .role-moderator{ background:#dbeafe; color:#2563eb; } .role-member{ background:var(--color-surface-2); color:var(--color-muted); } .role-banned{ background:#e5e7eb; color:#6b7280; text-decoration:line-through; } html.dark .role-admin{ background:rgba(220,38,38,.2); } html.dark .role-moderator{ background:rgba(37,99,235,.2); } @media (max-width:640px){ .admin-table{ font-size:13px; } .admin-table th:nth-child(2),.admin-table td:nth-child(2){ display:none; } .stat-num{ font-size:24px; } } /* ---------- 后台: 主题选择器 ---------- */ .theme-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; } .theme-pick-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; } .theme-pick-card.is-active{ border-color:var(--color-primary); box-shadow:0 0 0 1px var(--color-primary); } .theme-pick-swatch{ display:flex; height:64px; } .theme-pick-swatch span{ flex:1; } .theme-pick-body{ padding:16px 16px 8px; flex:1; } .theme-pick-name{ font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .theme-pick-desc{ font-size:13px; line-height:1.6; margin:8px 0; } .theme-pick-meta{ font-size:12px; } .theme-pick-action{ padding:12px 16px; border-top:1px solid var(--color-border); display:flex; align-items:center; } .theme-pick-action .ok{ font-size:14px; } /* ---------- 注册: 验证码输入行 ---------- */ .code-row{ display:flex; gap:8px; align-items:stretch; } .code-row input{ flex:1; } .code-row .btn{ white-space:nowrap; flex-shrink:0; } /* ========================================================== UI 优化: 认证页 / 后台 tab / 邮件与验证分组 ========================================================== */ /* ---- 认证页 (登录/注册) 视觉增强 ---- */ .auth-wrap{ max-width:440px; } .auth-card{ padding:36px 32px; } .auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; } .auth-brand .brand-mark{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, #7c3aed)); display:inline-block; } .auth-brand .brand-name{ font-size:18px; font-weight:700; letter-spacing:.3px; } .auth-title{ text-align:center; } .auth-sub{ text-align:center; } .auth-card .flash{ margin-bottom:14px; } .auth-card .btn-block{ margin-top:4px; height:44px; font-size:15px; } .cf-turnstile{ display:flex; justify-content:center; margin:4px 0 8px; } /* ---- 后台 tab: 移动端可横向滚动, 不再挤压 ---- */ .admin-tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .admin-tabs::-webkit-scrollbar{ display:none; } .admin-tabs a{ white-space:nowrap; flex-shrink:0; } /* ---- 邮件与验证 tab: 分组小标题 & 双列表单 ---- */ .settings-card h3{ font-size:15px; font-weight:700; color:var(--color-text); display:flex; align-items:center; gap:8px; } .settings-card h3::before{ content:""; width:3px; height:15px; border-radius:2px; background:var(--color-primary); display:inline-block; } .field-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field-grid-21{ display:grid; grid-template-columns:2fr 1fr; gap:14px; } .field-grid-12{ display:grid; grid-template-columns:1fr 2fr; gap:14px; } .status-pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; } .status-pill.on{ background:rgba(16,185,129,.12); color:#059669; } .status-pill.off{ background:var(--color-surface-2); color:var(--color-muted); } @media (max-width:640px){ .field-grid-2,.field-grid-21,.field-grid-12{ grid-template-columns:1fr; } .auth-card{ padding:28px 20px; } } /* ---- 邮件模板预览 ---- */ .mail-preview-toggle{ margin:8px 0 4px; } .mail-preview{ margin-top:12px; padding:16px; background:var(--color-surface-2); border:1px dashed var(--color-border); border-radius:var(--radius-sm); overflow:auto; } .settings-card h4{ margin:16px 0 4px; } /* ============================================================ 内容编辑器工具栏 + 图片 ============================================================ */ .editor-toolbar{ display:flex; gap:4px; margin-bottom:8px; padding:8px; background:var(--color-surface-2); border-radius:var(--radius-sm); flex-wrap:wrap; } .fmt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:6px 8px; border:1px solid var(--color-border); border-radius:var(--radius-xs); background:var(--color-bg); color:var(--color-text); cursor:pointer; transition:all .15s; font-size:13px; line-height:1; } .fmt-btn svg{ flex-shrink:0; } .fmt-btn:hover{ background:var(--color-surface); border-color:var(--color-primary); } .fmt-btn:active{ transform:scale(.95); } .fmt-btn:disabled{ opacity:.5; cursor:not-allowed; } .fmt-btn-img span{ font-weight:500; } .editor-hint{ font-size:13px; color:var(--color-muted); margin-top:4px; display:inline-block; } /* 帖子正文里的图片 */ .post-content .post-img,.markdown .post-img{ max-width:100%; height:auto; border-radius:var(--radius-sm); margin:8px 0; display:block; } .post-content .post-h{ font-size:1.2em; font-weight:600; margin:12px 0 8px; } .settings-card code{ background:var(--color-surface-2); padding:1px 5px; border-radius:4px; font-size:12px; } /* ===== 广告位 ===== */ .ad-slot{ margin:16px 0; } .ad-slot-header{ margin:12px auto; text-align:center; } .ad-slot-sidebar{ margin-top:20px; } .ad-unit{ margin:8px 0; overflow:hidden; border-radius:8px; } .ad-unit img{ max-width:100%; height:auto; display:block; } .ad-unit::before{ content:"广告"; display:block; font-size:11px; color:var(--color-muted); margin-bottom:4px; letter-spacing:1px; } /* ===== 后台 tab 数量徽标 ===== */ .tab-badge{ display:inline-block; min-width:18px; padding:0 5px; font-size:11px; line-height:18px; text-align:center; background:#ef4444; color:#fff; border-radius:9px; vertical-align:middle; } /* ===== 主题举报入口 ===== */ .topic-report{ margin:16px 0; } .topic-report .inline-edit summary{ color:var(--color-muted); } .topic-report .inline-form{ max-width:420px; margin-top:10px; padding:14px; background:var(--color-surface-2); border-radius:8px; } /* ===== 后台内联编辑表单 ===== */ .inline-edit{ position:relative; } .inline-form{ margin-top:8px; padding:12px; background:var(--color-surface-2); border-radius:8px; min-width:240px; } .inline-form input, .inline-form select, .inline-form textarea{ width:100%; margin-bottom:8px; } .admin-row-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; } .admin-table th, .admin-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--color-border); vertical-align:middle; } .admin-table th{ color:var(--color-muted); font-weight:600; font-size:12.5px; } .field-row{ display:flex; gap:12px; flex-wrap:wrap; } .field-row .field{ flex:1; min-width:140px; } /* ===== 移动端适配 ===== */ @media(max-width:768px){ .admin-table{ font-size:12.5px; } .admin-table th, .admin-table td{ padding:6px 6px; } .admin-tabs{ overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; -webkit-overflow-scrolling:touch; } .field-row{ flex-direction:column; gap:0; } .inline-form{ min-width:auto; width:100%; } .topic-report .inline-form{ max-width:100%; } }