/* ============================================================ blog-java 全站样式：从 Next.js 版设计系统移植（手写 CSS） 设计 token 对齐原 globals.css；深色模式由 驱动。 液态玻璃导航简化为普通毛玻璃（已定偏差）。 ============================================================ */ /* ---------- 1. Token 与基础 ---------- */ :root { --background: #ffffff; --foreground: #171717; --muted: #f5f5f5; --muted-fg: #737373; --border: #e5e5e5; --card: rgba(255, 255, 255, 0.72); --card-solid: #ffffff; --link: #2563eb; --glass-blur: saturate(1.5) blur(12px); --shadow: 0 10px 30px rgba(0, 0, 0, 0.10); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --radius: 12px; --radius-lg: 16px; --nav-h: 56px; } html.dark { --background: #0a0a0a; --foreground: #ededed; --muted: #1a1a1a; --muted-fg: #a3a3a3; --border: #262626; --card: rgba(23, 23, 23, 0.72); --card-solid: #171717; --link: #60a5fa; --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: 1.6; font-size: 15px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; } h1, h2, h3, h4 { line-height: 1.3; } code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-fg) 40%, transparent); border-radius: 5px; } ::-webkit-scrollbar-track { background: transparent; } /* 整页背景图（nav.bgImage） */ .page-bg { position: fixed; inset: 0; z-index: -10; background-size: cover; background-position: center; } /* ---------- 2. 通用组件 ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-solid); color: var(--foreground); font-size: 14px; cursor: pointer; transition: all .15s ease; user-select: none; } .btn:hover { border-color: var(--muted-fg); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--foreground); color: var(--background); border-color: var(--foreground); } .btn-primary:hover { opacity: .85; } .btn-danger { color: #dc2626; border-color: #fca5a5; } .btn-danger:hover { background: #fef2f2; border-color: #dc2626; } html.dark .btn-danger:hover { background: #2a1414; } .btn-ghost { border-color: transparent; background: transparent; } .btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 6px; } .input, .select, .textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-solid); color: var(--foreground); font-size: 14px; outline: none; transition: border-color .15s; } .input:focus, .select:focus, .textarea:focus { border-color: var(--link); } .textarea { resize: vertical; min-height: 80px; font-family: inherit; } .label { display: block; font-size: 13px; color: var(--muted-fg); margin-bottom: 6px; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--muted-fg); } .badge-green { color: #16a34a; border-color: #86efac; background: rgba(22, 163, 74, .08); } .badge-amber { color: #d97706; border-color: #fcd34d; background: rgba(217, 119, 6, .10); } .badge-red { color: #dc2626; border-color: #fca5a5; background: rgba(220, 38, 38, .08); } .badge-blue { color: #2563eb; border-color: #93c5fd; background: rgba(37, 99, 235, .08); } .tag-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--muted); color: var(--muted-fg); font-size: 12px; cursor: pointer; border: 1px solid transparent; transition: all .12s; } .tag-chip:hover { color: var(--foreground); } .tag-chip.on { background: var(--foreground); color: var(--background); border-color: var(--foreground); } .alert { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin: 10px 0; display: none; } .alert.show { display: block; } .alert-err { background: rgba(220,38,38,.10); color: #dc2626; border: 1px solid #fca5a5; } .alert-ok { background: rgba(22,163,74,.10); color: #16a34a; border: 1px solid #86efac; } /* 毛玻璃卡片 */ .glass { background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .20); } html.dark .glass { border-color: rgba(255,255,255,.10); } .card { background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius); } .card-pad { padding: 18px 20px; } /* 截断 */ .clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .muted { color: var(--muted-fg); } .small { font-size: 13px; } .empty { text-align: center; color: var(--muted-fg); padding: 48px 0; } /* 分页 */ .pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 28px 0; } .pager a, .pager span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; color: var(--muted-fg); padding: 0 8px; } .pager .cur { background: var(--foreground); color: var(--background); border-color: var(--foreground); } .pager .dis { opacity: .4; pointer-events: none; } /* 模态框 */ .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-mask.show { display: flex; } .modal { background: var(--card-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; padding: 22px 24px; } .modal h3 { margin: 0 0 14px; font-size: 17px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } /* 表格 */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted-fg); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tr:hover td { background: color-mix(in srgb, var(--muted) 55%, transparent); } /* ---------- 3. 前台布局 ---------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50; display: flex; align-items: center; } .site-nav .nav-inner { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 8px; } .site-nav.glass-solid { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.12); } .site-title { font-size: 20px; font-weight: 800; color: var(--foreground); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(255,255,255,.6); } html.dark .site-title { text-shadow: 0 1px 2px rgba(0,0,0,.8); } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; } .nav-link { padding: 6px 12px; border-radius: 8px; color: var(--foreground); font-size: 14px; } .nav-link:hover { background: rgba(127,127,127,.14); } .nav-link.active { background: rgba(127,127,127,.18); font-weight: 600; } .nav-item { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; padding: 6px; border-radius: 10px; box-shadow: var(--shadow); display: none; z-index: 60; background: color-mix(in srgb, var(--card-solid) 92%, transparent); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255,255,255,.25); } html.dark .nav-dropdown { border-color: rgba(255,255,255,.12); } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; } .nav-dropdown a { display: block; padding: 7px 12px; border-radius: 7px; color: var(--foreground); font-size: 14px; } .nav-dropdown a:hover { background: rgba(127,127,127,.15); } .theme-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); } .theme-btn:hover { background: rgba(127,127,127,.15); } .hamburger { display: none; } .mobile-panel { display: none; } @media (max-width: 767px) { .nav-links { display: none; } .hamburger { display: inline-flex; margin-left: auto; } .mobile-panel { display: none; position: fixed; inset: 0; z-index: 80; background: var(--background); padding: 20px; overflow: auto; } .mobile-panel.show { display: block; } .mobile-panel a { display: block; padding: 12px 8px; color: var(--foreground); font-size: 17px; border-bottom: 1px solid var(--border); } .mobile-panel a.sub { padding-left: 28px; color: var(--muted-fg); } } /* 正文列：毛玻璃大卡片 */ .page-wrap { max-width: 64rem; margin: 0 auto; padding: 0 16px; } .page-card { margin-top: calc(var(--nav-h) + 32px); margin-bottom: 32px; border-radius: var(--radius-lg); padding: 32px clamp(16px, 4vw, 40px) 40px; background: var(--card); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--shadow); } html.dark .page-card { border-color: rgba(255,255,255,.10); } .no-bg .page-card { background: var(--card-solid); } .hero { text-align: center; padding: 26px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .hero .sub { font-size: 22px; font-weight: 700; margin: 0 0 6px; } .hero .desc { color: var(--muted-fg); font-size: 14px; margin: 0; } .home-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 1024px) { .home-grid { grid-template-columns: 1fr 280px; } } .grid-cards { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .grid-cards { grid-template-columns: 1fr 1fr; } } .article-card { display: block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--card-solid) 70%, transparent); backdrop-filter: blur(6px); transition: box-shadow .2s ease; color: var(--foreground); } .article-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.14); } .cover { position: relative; aspect-ratio: 16/9; background: var(--muted); overflow: hidden; } .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; display: block; } .article-card:hover .cover img { transform: scale(1.05); } .cover .cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: var(--border); } .cover .cover-cat { position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; } .ac-body { padding: 14px 16px 16px; } .ac-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--foreground); } .ac-excerpt { font-size: 13px; color: var(--muted-fg); margin: 0 0 10px; } .ac-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted-fg); } .widget h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; } .hot-list { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: hot; } .hot-list li { counter-increment: hot; margin-bottom: 10px; display: flex; gap: 10px; } .hot-list li::before { content: counter(hot, decimal-leading-zero); font-family: ui-monospace, monospace; color: var(--muted-fg); font-size: 13px; padding-top: 2px; } .hot-list a { color: var(--foreground); font-size: 14px; } .cloud { display: flex; flex-wrap: wrap; gap: 8px; } .cloud a { color: var(--muted-fg); } .cloud a:hover { color: var(--link); } /* 归档 */ .archive-year { font-size: 20px; font-weight: 700; margin: 30px 0 14px; } .archive-list { list-style: none; margin: 0; padding: 0; } .archive-list li { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .archive-list .d { width: 84px; flex: none; color: var(--muted-fg); font-size: 13px; padding-top: 2px; } .archive-list a { color: var(--foreground); } /* 详情页 */ .post-header { margin-bottom: 22px; } .post-cat { color: var(--link); font-size: 14px; } .post-header h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin: 10px 0 12px; } .post-meta { display: flex; gap: 16px; color: var(--muted-fg); font-size: 13px; } .post-cover { border-radius: 12px; overflow: hidden; margin: 0 0 26px; } .post-layout { display: grid; grid-template-columns: 1fr; gap: 34px; } @media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0,1fr) 220px; } } .toc { display: none; } @media (min-width: 1024px) { .toc { display: block; } } .toc-inner { position: sticky; top: 80px; font-size: 13px; } .toc-inner h3 { font-size: 14px; margin: 0 0 10px; color: var(--muted-fg); } .toc-inner ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); } .toc-inner li { margin: 6px 0; } .toc-inner li.h3 { padding-left: 16px; } .toc-inner a { color: var(--muted-fg); } .toc-inner a:hover { color: var(--link); } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; margin-top: 30px; border-top: 1px solid var(--border); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; } .post-nav a { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; color: var(--foreground); } .post-nav .lbl { font-size: 12px; color: var(--muted-fg); display: block; margin-bottom: 6px; } .post-nav .next { text-align: right; } .related { margin-top: 40px; } .related h2 { font-size: 18px; } .related-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px; margin-top: 14px; } @media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } /* 文章正文排版（原 .article-content 移植） */ .article-content { line-height: 1.75; font-size: 15.5px; word-break: break-word; } .article-content h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .article-content h3 { font-size: 19px; font-weight: 700; margin: 30px 0 14px; } .article-content h4 { font-size: 16px; margin: 24px 0 10px; } .article-content p { margin: 14px 0; } .article-content a { color: var(--link); } .article-content a:hover { text-decoration: underline; } .article-content ul, .article-content ol { padding-left: 26px; margin: 14px 0; } .article-content li { margin: 6px 0; } .article-content blockquote { margin: 18px 0; padding: 10px 18px; border-left: 4px solid var(--border); background: var(--muted); border-radius: 0 8px 8px 0; color: var(--muted-fg); } .article-content blockquote p { margin: 4px 0; } .article-content code { background: color-mix(in srgb, var(--muted) 80%, transparent); padding: 2px 6px; border-radius: 5px; font-size: .875em; } .article-content pre { background: #0d1117; color: #e6edf3; padding: 16px; border-radius: 10px; overflow-x: auto; margin: 18px 0; line-height: 1.6; } .article-content pre code { background: transparent; padding: 0; color: inherit; font-size: 13.5px; } .article-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; display: block; overflow-x: auto; } .article-content th, .article-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .article-content th { background: var(--muted); font-weight: 600; } .article-content img { border-radius: 10px; margin: 10px 0; } .article-content hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; } /* 评论 */ .comments { margin-top: 44px; } .comments h2 { font-size: 18px; } .cmt-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .cmt-item.reply { border-bottom: none; } .cmt-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--muted); } .cmt-item.reply .cmt-avatar { width: 32px; height: 32px; } .cmt-body { flex: 1; min-width: 0; } .cmt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; } .cmt-name { font-weight: 600; color: var(--foreground); } .cmt-name.author { color: var(--link); } .cmt-badge { font-size: 11px; color: #fff; background: var(--link); border-radius: 4px; padding: 0 6px; } .cmt-time { color: var(--muted-fg); } .cmt-content { white-space: pre-wrap; font-size: 14.5px; margin: 6px 0; } .cmt-actions { display: flex; gap: 14px; font-size: 13px; } .cmt-actions button { background: none; border: none; color: var(--muted-fg); cursor: pointer; padding: 0; font-size: 13px; } .cmt-actions button:hover, .cmt-actions button.liked { color: #dc2626; } .cmt-actions button.liked { cursor: default; } .cmt-replies { border-left: 2px solid var(--border); padding-left: 14px; margin-top: 8px; } .cmt-form { margin-top: 24px; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .cmt-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 560px) { .cmt-form .row { grid-template-columns: 1fr; } } .captcha-row { display: flex; gap: 10px; align-items: center; } .captcha-row .q { font-family: ui-monospace, monospace; background: var(--muted); padding: 8px 12px; border-radius: 8px; } .replying { background: var(--muted); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; display: none; } .replying.show { display: block; } /* 友链 */ .link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .link-grid { grid-template-columns: 1fr; } } .link-card { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--foreground); } .link-card:hover { box-shadow: var(--shadow-sm); } .link-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; } .link-logo img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } /* ---------- 4. 后台 ---------- */ .admin-shell { display: flex; min-height: 100vh; background: var(--muted); } .admin-sidebar { width: 224px; flex: none; background: var(--card-solid); border-right: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow: auto; } .admin-sidebar .brand { font-weight: 800; font-size: 16px; padding: 8px 10px 18px; color: var(--foreground); } .admin-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--foreground); font-size: 14px; margin-bottom: 2px; } .admin-menu a:hover { background: var(--muted); } .admin-menu a.active { background: var(--foreground); color: var(--background); } .admin-menu .sep { margin: 14px 0 8px; } .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-topbar { height: 52px; background: var(--card-solid); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; gap: 12px; position: sticky; top: 0; z-index: 20; } .admin-topbar .who { margin-left: auto; font-size: 14px; color: var(--muted-fg); } .admin-content { padding: 24px; max-width: 1200px; width: 100%; } .admin-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; } @media (max-width: 860px) { .admin-shell { flex-direction: column; } .admin-sidebar { width: 100%; height: auto; position: static; } } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .stat-card { background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .stat-card .n { font-size: 26px; font-weight: 800; } .stat-card .t { font-size: 13px; color: var(--muted-fg); margin-top: 2px; } .stat-card .h { font-size: 12px; color: var(--muted-fg); margin-top: 6px; } .stat-card.warn .n, .stat-card.warn .t { color: #d97706; } .panel { background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .panel h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; } .panel h2 .more { margin-left: auto; font-size: 13px; font-weight: 400; } .two-col { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; } @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .filter-bar .select, .filter-bar .input { width: auto; } .list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .editor-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 1024px) { .editor-grid { grid-template-columns: minmax(0,1fr) 320px; } } .title-input { width: 100%; font-size: 22px; font-weight: 700; border: none; border-bottom: 2px solid var(--border); background: transparent; color: var(--foreground); padding: 6px 2px; outline: none; margin-bottom: 14px; } .title-input:focus { border-color: var(--foreground); } .meta-panel { background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .meta-panel .sec { margin-bottom: 16px; } .cover-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 22px; text-align: center; color: var(--muted-fg); font-size: 13px; cursor: pointer; position: relative; overflow: hidden; } .cover-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cover-drop .rm { position: absolute; top: 6px; right: 6px; z-index: 2; display: none; } .cover-drop.has img + .rm { display: inline-block; } .settings-sec { background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .settings-sec h2 { font-size: 15px; margin: 0 0 14px; } .settings-sec .frow { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 12px; } @media (min-width: 720px) { .settings-sec .frow { grid-template-columns: 200px 1fr; align-items: start; } } .settings-sec .frow .label { margin: 6px 0 0; } .status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .status-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: var(--muted-fg); } .status-tabs a.active { background: var(--foreground); color: var(--background); border-color: var(--foreground); } .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .media-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .media-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { .media-grid { grid-template-columns: repeat(6, 1fr); } } .media-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--card-solid); } .media-item .thumb { aspect-ratio: 1; background: var(--muted); } .media-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-item .meta { padding: 8px 10px; font-size: 12px; } .media-item .meta .fn { color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 5. 登录页 ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; } .login-card { width: 100%; max-width: 380px; padding: 34px 32px; border-radius: 18px; background: var(--card); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.3); box-shadow: var(--shadow); } .login-card h1 { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 24px; } .login-card .field { margin-bottom: 14px; } /* 页脚 */ .site-footer { text-align: center; padding: 30px 16px 40px; color: var(--muted-fg); font-size: 13px; } .site-footer a { color: var(--muted-fg); } .site-footer .socials { display: flex; gap: 18px; justify-content: center; margin-bottom: 8px; } /* 搜索页 */ .search-bar { display: flex; gap: 10px; margin-bottom: 22px; } .search-bar .input { flex: 1; }