:root { --bg: #f7f8fa; --card: #ffffff; --text: #1f2329; --muted: #8a919f; --primary: #2f6fed; --border: #eceef1; --code-bg: #f3f4f6; --max: 820px; } /* 主题：覆盖 CSS 变量（data-theme 挂在 上，必须写在 :root 之后以覆盖默认值） */ [data-theme="dark"] { --bg: #16181d; --card: #1f2329; --text: #e6e8eb; --muted: #9aa1ab; --primary: #4c8dff; --border: #2c313a; --code-bg: #23272f; } [data-theme="green"] { --primary: #18a058; --border: #e6f2ea; --code-bg: #f1f8f4; } [data-theme="pink"] { --primary: #ec5990; --border: #fce8f0; --code-bg: #fdf1f6; } [data-theme="purple"] { --primary: #7c4dff; --border: #efe9fd; --code-bg: #f5f1fe; } [data-theme="sunset"] { --primary: #f0883e; --border: #fdeede; --code-bg: #fdf6ec; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 15px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max); margin: 0 auto; padding: 0 16px; } /* 头部 */ .site-header, .admin-header { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } /* 前台 header 容器与正文两栏布局同宽（1080px），避免 logo 与正文内容区左边缘错开 */ .site-header .container { max-width: 1080px; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; } /* logo 在左、搜索框居中、菜单在右（space-between 三段分配） */ /* 站内搜索框 */ .search-form { display: flex; flex: 0 0 240px; max-width: 320px; margin: 0; } .search-form input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px 0 0 6px; font-size: 14px; outline: none; min-width: 0; } .search-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,0,0,.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); } .search-form button { padding: 7px 14px; border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; white-space: nowrap; } .search-form button:hover { opacity: .9; } .empty-tip { color: var(--muted); text-align: center; padding: 40px 0; } @media (max-width: 600px) { .nav { flex-wrap: wrap; height: auto; padding: 8px 0; gap: 8px; } .search-form { order: 3; flex-basis: 100%; max-width: none; margin: 0; } .nav-menu { margin-left: auto; } } .logo { font-weight: 700; font-size: 20px; letter-spacing: .3px; } .nav nav a { position: relative; margin-left: 16px; padding: 4px 0; color: var(--muted); text-decoration: none; transition: color .15s; } .nav nav a:hover { color: var(--primary); } .nav nav a.active { color: var(--primary); font-weight: 600; } .nav nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); border-radius: 2px; } /* 首页文章列表（卡片化精修） */ .post-list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 16px; } .post-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .post-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.10); border-color: var(--primary); } .post-title { margin: 0 0 8px; font-size: 20px; line-height: 1.35; } .post-title a { color: var(--text); text-decoration: none; transition: color .15s; } .post-title a:hover { color: var(--primary); } .post-meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .post-excerpt { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .post-tags a { display: inline-block; background: #eef3ff; color: var(--primary); border-radius: 999px; padding: 3px 11px; font-size: 12px; text-decoration: none; transition: background .15s, color .15s; } .post-tags a:hover { background: var(--primary); color: #fff; } @media (max-width: 600px) { .post-item { padding: 16px 16px; border-radius: 10px; } .post-title { font-size: 18px; } } /* 首页图文卡片模式（后台「网站设置」可切换） */ .home-cards { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 16px; } .home-card { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .home-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .hc-cover { flex: 0 0 220px; width: 220px; height: 140px; border-radius: 8px; overflow: hidden; display: block; background: #eef1f5; } .hc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .hc-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; background: repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 10px, #eef1f5 10px, #eef1f5 20px); } .hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hc-title { font-size: 20px; margin: 0 0 8px; line-height: 1.35; } .hc-title a { color: var(--text); text-decoration: none; } .hc-title a:hover { color: var(--primary); } .hc-meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .hc-excerpt { color: var(--text); opacity: .85; font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hc-tags { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .hc-tags a { display: inline-block; background: #eef3ff; color: var(--primary); border-radius: 999px; padding: 3px 11px; font-size: 12px; text-decoration: none; transition: background .15s, color .15s; } .hc-tags a:hover { background: var(--primary); color: #fff; } @media (max-width: 600px) { .home-card { flex-direction: column; } .hc-cover { flex-basis: auto; width: 100%; height: 170px; } .hc-title { font-size: 18px; } } .filter-tip { background: #fff7e6; border: 1px solid #ffe0a3; color: #8a6d3b; padding: 10px 14px; border-radius: 8px; margin: 24px 0 0; } .filter-tip a { margin-left: 8px; } .pagination { display: flex; gap: 8px; align-items: center; margin: 20px 0; } .pagination a, .pagination .current { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; } .pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); } /* 文章内部分页 */ .content-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 22px 0; padding-top: 16px; border-top: 1px dashed var(--border); } .content-pager a, .content-pager .pager-info { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; } .content-pager a { color: var(--primary); text-decoration: none; } .content-pager a:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .content-pager .pager-info { color: var(--muted); } .content-pager .disabled { color: #bbb; border-color: #eee; } /* 上下篇导航 */ .post-nav { display: flex; gap: 16px; margin: 22px 0; } .post-nav a, .post-nav .disabled { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; background: var(--card); transition: border-color .15s, box-shadow .15s; } .post-nav a:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); } .post-nav .post-nav-prev { text-align: left; align-items: flex-start; } .post-nav .post-nav-next { text-align: right; align-items: flex-end; } .post-nav .post-nav-label { font-size: 12px; color: var(--muted); } .post-nav .post-nav-title { font-weight: 600; color: var(--text); } .post-nav .disabled { color: var(--muted); } .post-nav .disabled .post-nav-title { color: #bbb; font-weight: 400; } /* 文章详情 */ .article { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px 30px; margin: 24px 0; } .article-title { margin: 0 0 8px; font-size: 26px; } .article-cover { margin: 16px 0 4px; } .article-cover img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 10px; display: block; } .post-cover { display: block; margin: 0 0 12px; } .post-cover img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; display: block; } .status-badge { display: inline-block; font-size: 12px; padding: 1px 9px; border-radius: 10px; } .status-badge.published { background: #e6f7e6; color: #237804; } .status-badge.draft { background: #fff7e6; color: #ad6800; } /* Markdown 排版 */ .markdown h1, .markdown h2, .markdown h3 { margin: 1.2em 0 .6em; line-height: 1.3; } .markdown p { margin: .8em 0; } .markdown ul, .markdown ol { padding-left: 1.5em; } .markdown blockquote { margin: 1em 0; padding: 8px 16px; border-left: 4px solid var(--primary); background: var(--code-bg); color: #555; } .markdown code { background: var(--code-bg); padding: 2px 5px; border-radius: 4px; font-size: 13px; } .markdown pre.code-block { background: #1e1e2e; color: #e4e4e4; padding: 14px 16px; border-radius: 8px; overflow: auto; } .markdown pre.code-block code { background: none; padding: 0; color: inherit; } .markdown img { max-width: 100%; border-radius: 6px; } .markdown table { border-collapse: collapse; width: 100%; margin: 1em 0; } .markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 10px; } /* 评论 */ .comments { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 22px 30px; margin: 16px 0 40px; } .comment { border-bottom: 1px solid var(--border); padding: 12px 0; } .comment:last-child { border-bottom: none; } .comment-meta { color: var(--muted); font-size: 13px; } .comment-body { margin-top: 4px; white-space: pre-wrap; } .comment-children { margin-left: 22px; border-left: 2px solid var(--border); padding-left: 14px; } .comment.official { background: #eef7ff; border-radius: 8px; padding: 12px; } .comment.official .badge.official { background: var(--primary); color: #fff; } .badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; margin-left: 6px; } .badge.approved { background: #e6f7e6; color: #237804; } .badge.pending { background: #fff7e6; color: #ad6800; } .badge.hidden { background: #f0f0f0; color: #595959; } .badge.spam { background: #fff1f0; color: #cf1322; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .muted { color: var(--muted); } .comment-form { margin: 18px auto 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; } .comment-form-fields { display: flex; flex-direction: column; gap: 12px; } .comment-form .comment-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; font: inherit; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; } .comment-form .comment-input::placeholder { color: var(--muted); } .comment-form .comment-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); } .comment-form textarea.comment-input { min-height: 100px; resize: vertical; line-height: 1.6; } .comment-form-actions { display: flex; justify-content: center; } .comment-submit { border-radius: 8px; padding: 11px 26px; font-weight: 600; letter-spacing: .5px; transition: background .15s, transform .05s, box-shadow .15s, filter .15s; box-shadow: 0 2px 8px rgba(47, 111, 237, .28); } .comment-submit:hover { filter: brightness(.94); box-shadow: 0 4px 12px rgba(47, 111, 237, .34); text-decoration: none; } .comment-submit:active { transform: translateY(1px); box-shadow: 0 1px 5px rgba(47, 111, 237, .28); } .comment-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 111, 237, .35); } /* 页脚 */ .site-footer { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; } /* 登录 */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 320px; text-align: center; } .login-box h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; } .login-box form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .login-box input { border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; font: inherit; transition: border-color .15s, box-shadow .15s; } .login-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56,110,255,.12); } .login-box button { width: 100%; background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: 8px; padding: 11px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .05s, box-shadow .15s; } .login-box button:hover { background: #2f6bff; box-shadow: 0 4px 12px rgba(56,110,255,.25); } .login-box button:active { transform: translateY(1px); box-shadow: none; } .login-box p a { color: var(--primary); text-decoration: none; font-size: 13px; } .login-box p a:hover { text-decoration: underline; } .error { color: #d4380d; } .ok { color: #237804; } /* 后台 */ .admin-main { padding-top: 24px; padding-bottom: 40px; } body.admin .container { max-width: 1180px; } .cards { display: flex; gap: 16px; margin: 20px 0; } .card { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; } .card .num { font-size: 28px; font-weight: 700; color: var(--primary); } .card .label { color: var(--muted); } .btn { display: inline-block; background: #eef3ff; color: var(--primary); border: 1px solid #d6e2ff; border-radius: 6px; padding: 8px 14px; cursor: pointer; font: inherit; } .btn:hover { background: #e2ecff; } .btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; } .btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); } .btn-ghost:hover { background: var(--card); color: var(--text); } .btn-danger { background: #ffeaea; color: #d23b3b; border-color: #ffc9c9; } .btn-danger:hover { background: #ffd6d6; } .batch-bar { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; } .check-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .col-check { width: 38px; text-align: center; } .col-check input { vertical-align: middle; cursor: pointer; } .btn:hover { text-decoration: none; } .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); } .admin-table { width: 100%; border-collapse: collapse; background: var(--card); margin-top: 16px; table-layout: fixed; } .admin-table th, .admin-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; font-size: 14px; vertical-align: middle; } .admin-table th { background: #fafbfc; } .admin-table tbody tr:hover { background: #fafbfe; } .admin-table .col-check { width: 40px; text-align: center; } .admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 58px; text-align: center; white-space: nowrap; } /* ID */ .admin-table th:nth-child(4) { width: 120px; } .admin-table td:nth-child(4) { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 分类 */ .admin-table th:nth-child(5), .admin-table td:nth-child(5) { width: 78px; text-align: center; white-space: nowrap; } /* 状态 */ .admin-table th:nth-child(6), .admin-table td:nth-child(6) { width: 66px; text-align: center; } /* 浏览 */ .admin-table th:nth-child(7), .admin-table td:nth-child(7) { width: 162px; white-space: nowrap; } /* 时间 */ .admin-table th:nth-child(8), .admin-table td:nth-child(8) { width: 104px; white-space: nowrap; } /* 操作 */ .admin-table th:nth-child(3), .admin-table td:nth-child(3) { word-break: break-word; } /* 标题：占剩余宽度，过长自动折行 */ /* 回收站表格：列结构不同于文章列表，覆盖上面的通用 nth-child 列宽，避免删除时间/操作被压变形 */ .admin-table.admin-table--trash th:nth-child(2), .admin-table.admin-table--trash td:nth-child(2) { width: 58px; text-align: center; white-space: nowrap; } /* ID */ .admin-table.admin-table--trash th:nth-child(4), .admin-table.admin-table--trash td:nth-child(4) { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 分类 */ .admin-table.admin-table--trash th:nth-child(5), .admin-table.admin-table--trash td:nth-child(5) { width: 182px; white-space: nowrap; } /* 删除时间：完整时间戳，不裁切 */ .admin-table.admin-table--trash th:nth-child(6), .admin-table.admin-table--trash td:nth-child(6) { width: 122px; white-space: nowrap; } /* 操作：恢复 / 永久删除，一行显示 */ .admin-table.admin-table--trash th:nth-child(3), .admin-table.admin-table--trash td:nth-child(3) { word-break: break-word; } /* 标题：占剩余宽度 */ /* 评论管理表格：7 列结构（ID/文章/昵称/内容/状态/时间/操作），覆盖通用 nth-child 列宽， 避免文章列被压成 58px、内容被裁切、时间被压窄 */ .admin-table.admin-table--comment th:nth-child(1), .admin-table.admin-table--comment td:nth-child(1) { width: 56px; text-align: center; white-space: nowrap; } /* ID */ .admin-table.admin-table--comment th:nth-child(2), .admin-table.admin-table--comment td:nth-child(2) { width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 文章：标题省略，不挤压 */ .admin-table.admin-table--comment th:nth-child(3), .admin-table.admin-table--comment td:nth-child(3) { width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 昵称 */ .admin-table.admin-table--comment th:nth-child(4), .admin-table.admin-table--comment td:nth-child(4) { word-break: break-word; } /* 内容：占剩余宽度，自动折行 */ .admin-table.admin-table--comment th:nth-child(5), .admin-table.admin-table--comment td:nth-child(5) { width: 74px; text-align: center; white-space: nowrap; } /* 状态 */ .admin-table.admin-table--comment th:nth-child(6), .admin-table.admin-table--comment td:nth-child(6) { width: 152px; white-space: nowrap; } /* 时间：完整时间戳不裁切 */ .admin-table.admin-table--comment th:nth-child(7), .admin-table.admin-table--comment td:nth-child(7) { width: 200px; white-space: normal; } /* 操作：链接可换行 */ .filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; } .filter-tabs a { color: var(--muted); text-decoration: none; padding: 4px 10px; border-radius: 6px; } .filter-tabs a.active { background: var(--primary); color: #fff; } .filter-tabs a.settings-link { margin-left: auto; color: var(--primary); } .admin-table .ops a { margin-right: 8px; white-space: nowrap; } .reply-box { margin-top: 6px; } .reply-box textarea { width: 100%; min-height: 54px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; } .settings-form { max-width: 560px; display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .settings-form .switch { display: flex; gap: 8px; align-items: center; } .settings-form .switch input { width: 16px; height: 16px; } .settings-form .form-row { flex-direction: column; align-items: stretch; } .settings-form .form-row label { width: auto; } .settings-form textarea { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; min-height: 80px; resize: vertical; } /* 表单 */ .inline-form, .form-row { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; } .form-row label { width: 120px; color: var(--muted); } .form-row input, .form-row select, .form-row textarea { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; max-width: 480px; } /* 编辑器（左右分栏） */ .editor { display: flex; gap: 16px; margin: 16px 0; } .editor-col { flex: 1; display: flex; flex-direction: column; } .editor-col label { color: var(--muted); margin-bottom: 6px; } .editor-col textarea { min-height: 320px; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font: 14px/1.6 Consolas, Monaco, monospace; resize: vertical; } .preview-box { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; min-height: 320px; background: var(--card); overflow: auto; } /* 文章编辑器工具栏：加粗 / 颜色 / 字号（图片上传在上方单独一行） */ .editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); } .editor-toolbar .tbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; } .editor-toolbar .tbtn:hover { border-color: var(--primary); } .editor-toolbar .tsep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; } .editor-toolbar .tcolors { display: inline-flex; align-items: center; gap: 6px; } .editor-toolbar .tcolor { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; } .editor-toolbar .tcolor:hover { transform: scale(1.12); } .editor-toolbar .tcolor-pick { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; } .editor-toolbar .tselect { height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 0 6px; font: inherit; } .empty { text-align: center; padding: 60px 0; color: var(--muted); } @media (max-width: 680px) { .editor { flex-direction: column; } .cards { flex-direction: column; } .article, .comments { padding: 18px; } } /* 网站地图 */ .sitemap-page h1 { font-size: 26px; margin: 24px 0 8px; } .sitemap-intro { color: var(--muted); margin: 0 0 16px; } .sitemap-intro a { font-weight: 600; } .sitemap-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin: 16px 0; } .sitemap-section h2 { font-size: 18px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .sitemap-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .sitemap-cats li a { display: inline-block; background: #eef3ff; color: var(--primary); border-radius: 6px; padding: 6px 12px; } .sitemap-tags { display: flex; flex-wrap: wrap; gap: 8px; } .sitemap-tags .tag-item { display: inline-block; background: var(--code-bg); color: var(--text); border-radius: 14px; padding: 4px 12px; font-size: 13px; } .sitemap-tags .tag-item span { color: var(--muted); } .sitemap-posts { list-style: none; padding: 0; margin: 0; } .sitemap-posts li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); } .sitemap-posts li:last-child { border-bottom: none; } .sitemap-posts a { color: var(--text); font-size: 15px; } .sitemap-posts a:hover { color: var(--primary); text-decoration: none; } .sitemap-date { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; } /* ===== 前台两栏布局 + 侧边栏 widget ===== */ .layout-body { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .main-col { min-width: 0; } .sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; } .widget { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .widget-title { font-size: 15px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); } .widget-list { list-style: none; margin: 0; padding: 0; } .widget-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; } .widget-list li:last-child { border-bottom: none; } .widget-list a { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-list a:hover { color: var(--primary); text-decoration: none; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-block; background: var(--code-bg); color: var(--text); border-radius: 14px; padding: 3px 11px; line-height: 1.7; } .tag-cloud a:hover { color: var(--primary); text-decoration: none; } .tag-cloud .tag-2 { font-size: 14px; padding: 4px 12px; } .tag-cloud .tag-3 { font-size: 15px; font-weight: 600; padding: 5px 13px; background: #eef3ff; color: var(--primary); } .rss-link { display: inline-block; background: #f26522; color: #fff; border-radius: 6px; padding: 6px 14px; font-size: 14px; font-weight: 600; } .rss-link:hover { opacity: .92; color: #fff; text-decoration: none; } @media (max-width: 860px) { .layout-body { grid-template-columns: 1fr; gap: 20px; } .sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .sidebar .widget { flex: 1 1 240px; } } /* 分类管理美化 */ .cat-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px 20px; margin-top: 8px; } .cat-panel-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--text); padding-left: 10px; border-left: 3px solid var(--primary); } .cat-form-grid { display: grid; grid-template-columns: 1fr 200px; gap: 14px; align-items: end; } .cat-field { display: flex; flex-direction: column; gap: 6px; } .cat-field label { font-size: 13px; color: var(--muted); } .cat-field input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font: inherit; background: #fbfcfe; transition: border-color .15s, box-shadow .15s; } .cat-field input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(47, 111, 237, .12); } .cat-form-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .cat-form-actions .btn { padding: 7px 18px; font-size: 13px; border-radius: 8px; } /* ===== 媒体库弹窗（写文章选图 / 设封面） ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45); display: none; align-items: center; justify-content: center; padding: 24px; } .modal-panel { background: var(--card); border-radius: 12px; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; } .modal-close { border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; } .modal-close:hover { color: var(--text); } .modal-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); } .modal-grid { padding: 16px 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .modal-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .modal-item:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .12); } .modal-item img { width: 100%; height: 92px; object-fit: cover; background: #f5f5f5; display: block; } .modal-name { font-size: 12px; color: #555; padding: 5px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-cancel { color: var(--muted); padding: 8px 12px; font: inherit; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; } .cat-cancel:hover { color: var(--primary); background: #f3f6fd; text-decoration: none; } .btn.sm { padding: 6px 12px; font-size: 13px; } .btn.danger { background: #fff1f0; color: #cf1322; border-color: #ffccc7; } .btn.danger:hover { background: #ffe7e3; } .cat-table { margin-top: 20px; border-radius: 10px; overflow: hidden; } .cat-table th { font-weight: 600; } .cat-table tbody tr { transition: background .15s; } .cat-table tbody tr:hover { background: #fafbfe; } .cat-name { font-weight: 500; } /* ===== 后台退出按钮 + 退出确认对话框 ===== */ .nav-logout { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0 0 0 20px; font: inherit; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 50%; transition: color .15s, border-color .15s, background .15s; } .nav-logout:hover { color: #d23b3b; border-color: #ffc9c9; background: #fff1f0; } .nav-logout svg { display: block; } .logout-panel { width: min(360px, 100%); } .logout-body { padding: 28px 24px 16px; text-align: center; } .logout-icon { color: var(--primary); margin-bottom: 12px; } .logout-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text); } .logout-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .logout-actions { display: flex; gap: 12px; padding: 14px 24px 22px; } .logout-actions .btn { flex: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; } /* ===== 网站设置 ===== */ .site-form .form-row { margin-bottom: 18px; } .site-form .form-row > .logo-block { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } /* 把 logo-row + logo-upload 包成一个块，垂直堆叠两行，避免与 label 三列错位 */ .site-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .site-form input[type=text], .site-form textarea { width: 100%; max-width: 480px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font: inherit; background: #fbfcfe; transition: border-color .15s, box-shadow .15s; } .site-form input[type=text]:focus, .site-form textarea:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(47, 111, 237, .12); } .site-form textarea { resize: vertical; } .logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .logo-row img { height: 40px; width: auto; max-width: 200px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--border); background: #fff; } .logo-row input { flex: 1 1 0; min-width: 0; max-width: none; } .logo-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .logo-upload input[type=file] { flex: 1 1 240px; min-width: 200px; max-width: 420px; } .logo-upload .hint { font-size: 12px; color: var(--muted); } .site-form .form-actions { margin-top: 8px; } .site-form .form-actions .btn.primary { padding: 7px 18px; font-size: 13px; border-radius: 8px; } /* 主题选择器 */ .theme-picker { display: flex; flex-wrap: wrap; gap: 10px; } .theme-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px 6px 38px; min-width: 120px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text); background: transparent; border: 1px solid var(--c); transition: background .15s, color .15s, border-color .15s; } .theme-swatch input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-swatch .swatch-dot { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .theme-swatch:hover { color: var(--c, var(--primary)); } /* 选中：整颗按钮填充为主题色；未选中保持纯文本+色点，不做额外处理 */ .theme-swatch.active { background: var(--c, var(--primary)); color: #fff; border-color: var(--c, var(--primary)); box-shadow: 0 1px 5px rgba(0,0,0,.18); } .theme-swatch.active .swatch-dot { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.95); } /* 网站设置：首页展示模式单选卡片 */ .radio-group { display: flex; flex-wrap: wrap; gap: 12px; } .radio-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 40px; min-width: 220px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s; } .radio-item input { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); } .radio-item:hover { border-color: var(--primary); } .radio-item.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: 0 1px 6px rgba(0,0,0,.12); } .radio-title { font-size: 14px; font-weight: 600; color: var(--text); } .radio-desc { font-size: 12px; color: var(--muted); } /* 前台 header logo + footer 备案号 */ .site-logo { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; transition: color .15s; } .site-logo:hover { color: var(--primary); } .site-logo img { height: 30px; width: auto; border-radius: 6px; } .site-footer .beian { opacity: .85; } /* 搜索高亮 + 错误提示 */ mark, .search-hl { background: #fff3a3; color: inherit; padding: 0 2px; border-radius: 3px; } .error-tip { background: #fdeef0; color: #c0392b; border: 1px solid #f5c6cb; border-radius: 8px; padding: 9px 12px; margin: 12px 0; font-size: 14px; } @media (max-width: 600px) { .cat-form-grid { grid-template-columns: 1fr; } .cat-form-actions { justify-content: stretch; } .cat-form-actions .btn { width: 100%; } .cat-form-actions .cat-cancel { width: 100%; text-align: center; } }