178 lines
13 KiB
CSS
178 lines
13 KiB
CSS
:root {
|
|
--bg-0:#ffffff;
|
|
--bg-gradient: linear-gradient(160deg,#ffffff 0%,#f5f6fa 55%,#e9ecf3 100%);
|
|
--bg-glow: radial-gradient(circle at 50% -10%,rgba(255,255,255,0.35),transparent 55%);
|
|
--glass-bg: rgba(255,255,255,0.55);
|
|
--glass-bg-strong: rgba(255,255,255,0.8);
|
|
--glass-border: rgba(255,255,255,0.9);
|
|
--input-border: rgba(20,20,32,0.3);
|
|
--glass-highlight: rgba(255,255,255,1);
|
|
--glass-blur: 26px;
|
|
--glass-radius: 18px;
|
|
--text-primary:#141419; --text-secondary:rgba(20,20,32,0.62); --text-muted:rgba(20,20,32,0.42);
|
|
--shadow: 0 10px 36px rgba(31,45,84,0.12);
|
|
}
|
|
[data-theme="dark"] {
|
|
--bg-0:#0e0f13;
|
|
--bg-gradient: linear-gradient(160deg,#0e0f13 0%,#12141a 55%,#171a22 100%);
|
|
--bg-glow: radial-gradient(circle at 50% -10%,rgba(255,255,255,0.05),transparent 50%);
|
|
--glass-bg: rgba(255,255,255,0.06);
|
|
--glass-bg-strong: rgba(255,255,255,0.12);
|
|
--glass-border: rgba(255,255,255,0.14);
|
|
--input-border: rgba(255,255,255,0.35);
|
|
--glass-highlight: rgba(255,255,255,0.22);
|
|
--glass-blur: 26px;
|
|
--glass-radius: 18px;
|
|
--text-primary:#eef0f5; --text-secondary:rgba(255,255,255,0.66); --text-muted:rgba(255,255,255,0.4);
|
|
--shadow: 0 10px 36px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html { -webkit-text-size-adjust:100%; }
|
|
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text-primary); min-height:100vh; background:var(--bg-gradient); transition:background .4s; }
|
|
a { color:inherit; text-decoration:none; }
|
|
.bg { position:fixed; inset:0; z-index:-1; background:var(--bg-gradient); }
|
|
.bg::before { content:""; position:absolute; inset:-10%; background:var(--bg-glow); }
|
|
|
|
.glass { background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border:1px solid var(--glass-border); border-radius:var(--glass-radius); box-shadow:inset 0 1px 0 var(--glass-highlight), var(--shadow); }
|
|
.glass-nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:64px; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6); border-bottom:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-highlight); }
|
|
.nav-brand { font-weight:800; font-size:20px; letter-spacing:1px; color:var(--text-primary); }
|
|
.nav-links { display:flex; gap:6px; align-items:center; }
|
|
.nav-link { padding:8px 14px; border-radius:10px; color:var(--text-secondary); font-size:14px; transition:.2s; }
|
|
.nav-link:hover,.nav-link.active { background:var(--glass-bg-strong); color:var(--text-primary); }
|
|
.glass-btn { display:inline-block; padding:8px 16px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass-bg-strong); color:var(--text-primary); cursor:pointer; font-size:14px; transition:.2s; }
|
|
.glass-btn:hover { transform:translateY(-1px); }
|
|
.glass-btn.primary { background:var(--text-primary); color:var(--bg-0); border-color:transparent; }
|
|
.glass-chip { display:inline-block; padding:3px 12px; border-radius:999px; font-size:12px; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); }
|
|
.glass-input { width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--input-border); background:var(--glass-bg); color:var(--text-primary); font-size:14px; outline:none; transition:.2s; }
|
|
.glass-input:focus { border-color:var(--text-primary); box-shadow:0 0 0 3px var(--input-border); }
|
|
.glass-input::placeholder{ color:var(--text-muted); }
|
|
textarea.glass-input { resize:vertical; min-height:120px; font-family:inherit; }
|
|
.glass-select { padding:12px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text-primary); font-size:14px; outline:none; }
|
|
.theme-toggle { border:none; background:transparent; color:var(--text-secondary); font-size:14px; cursor:pointer; padding:8px 10px; }
|
|
.theme-toggle:hover { color:var(--text-primary); }
|
|
|
|
.container { max-width:1080px; margin:0 auto; padding:88px 24px 60px; }
|
|
.layout { display:grid; grid-template-columns:1fr 300px; gap:24px; }
|
|
@media (max-width:820px){ .layout{grid-template-columns:1fr;} .sidebar{display:none;} }
|
|
|
|
.sidebar { position:sticky; top:88px; align-self:start; display:flex; flex-direction:column; gap:20px; }
|
|
.side-panel { padding:20px; }
|
|
.side-panel h3 { font-size:15px; margin-bottom:14px; }
|
|
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
|
|
.chip-row .glass-chip { transition:.15s; }
|
|
.chip-row .glass-chip:hover { transform:translateY(-1px); color:var(--text-primary); }
|
|
.arch-item { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--glass-border); font-size:14px; color:var(--text-secondary); }
|
|
.arch-item:last-child{ border-bottom:none; }
|
|
.arch-item a:hover{ color:var(--text-primary); }
|
|
|
|
.hero { text-align:center; padding:40px 0 30px; }
|
|
.hero h1 { font-size:40px; font-weight:800; letter-spacing:2px; }
|
|
.hero h1 span{ color:var(--text-secondary); font-weight:300; }
|
|
.hero p { color:var(--text-secondary); margin-top:12px; font-size:15px; }
|
|
.search-row { max-width:520px; margin:18px auto 0; display:flex; gap:10px; }
|
|
.search-row .glass-btn{ flex-shrink:0; }
|
|
|
|
.card { padding:24px; margin-bottom:20px; display:block; transition:transform .25s, box-shadow .25s; position:relative; overflow:hidden; }
|
|
.card:hover { transform:translateY(-4px); }
|
|
.card-meta { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--text-muted); margin-bottom:12px; }
|
|
.card h2 { font-size:22px; margin-bottom:10px; line-height:1.4; }
|
|
.card p { color:var(--text-secondary); line-height:1.7; font-size:15px; }
|
|
.card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:13px; color:var(--text-muted); }
|
|
.card.clickable { cursor:pointer; }
|
|
.pagination { display:flex; gap:8px; justify-content:center; margin-top:24px; }
|
|
.page-btn { padding:8px 14px; border-radius:10px; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); font-size:14px; }
|
|
.page-btn.active { background:var(--glass-bg-strong); color:var(--text-primary); }
|
|
|
|
.article-card { padding:32px; }
|
|
.article-card h1 { font-size:30px; line-height:1.4; margin-bottom:14px; }
|
|
.article-meta { display:flex; gap:16px; font-size:13px; color:var(--text-muted); margin-bottom:24px; flex-wrap:wrap; }
|
|
.article-body { line-height:1.9; font-size:16px; color:var(--text-primary); }
|
|
.article-body h2 { font-size:24px; margin:28px 0 14px; }
|
|
.article-body h3 { font-size:19px; margin:22px 0 10px; }
|
|
.article-body p { margin:14px 0; }
|
|
.article-body ul,.article-body ol { margin:14px 0 14px 24px; }
|
|
.article-body blockquote { border-left:3px solid var(--text-primary); padding:6px 16px; margin:14px 0; color:var(--text-secondary); font-style:italic; }
|
|
.article-body code { background:var(--glass-bg-strong); padding:2px 6px; border-radius:6px; font-size:0.9em; }
|
|
.article-body pre { background:rgba(0,0,0,0.05); padding:16px; border-radius:12px; overflow:auto; margin:14px 0; }
|
|
[data-theme="dark"] .article-body pre{ background:rgba(255,255,255,0.06);}
|
|
.article-body pre code { background:none; padding:0; }
|
|
.article-body img { max-width:100%; border-radius:12px; }
|
|
|
|
.comments { margin-top:24px; }
|
|
.comments h3 { margin-bottom:16px; }
|
|
.comment-item { padding:16px; margin-bottom:12px; }
|
|
.comment-item.reply { margin-left:36px; }
|
|
.comment-head { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
|
|
.comment-body { color:var(--text-secondary); line-height:1.7; font-size:14px; }
|
|
.comment-form .field { margin-bottom:14px; }
|
|
|
|
.login-wrap { max-width:380px; margin:0 auto; padding:40px 0; }
|
|
.login-box { padding:32px; }
|
|
.login-box h2 { margin-bottom:6px; font-size:22px; }
|
|
.login-box .sub { color:var(--text-muted); font-size:13px; margin-bottom:24px; }
|
|
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
|
|
.login-page .login-box { width:100%; max-width:380px; padding:38px; }
|
|
.login-page .login-brand { text-align:center; font-size:22px; font-weight:800; letter-spacing:1px; margin-bottom:26px; }
|
|
.login-page .theme-toggle { position:fixed; top:20px; right:24px; }
|
|
.login-page .login-back { text-align:center; margin-top:22px; font-size:13px; color:var(--text-muted); }
|
|
.login-page .login-back a { color:var(--text-secondary); }
|
|
.login-page .login-back a:hover { color:var(--text-primary); }
|
|
.field { margin-bottom:16px; }
|
|
.field label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
|
|
.alert { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; background:var(--glass-bg-strong); border:1px solid var(--glass-border); color:var(--text-primary); }
|
|
.alert.error { border-color:rgba(180,60,60,0.4); color:rgba(180,60,60,1); }
|
|
[data-theme="dark"] .alert.error{ color:#ff8a8a; border-color:rgba(255,120,120,0.4);}
|
|
|
|
.page-head { margin-bottom:24px; }
|
|
.page-head h1 { font-size:26px; }
|
|
.page-head .desc { color:var(--text-muted); font-size:14px; margin-top:6px; }
|
|
|
|
.about-card { padding:32px; line-height:1.9; }
|
|
.about-card h2 { margin:20px 0 10px; }
|
|
|
|
.admin-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
|
|
.admin-head h1 { font-size:24px; }
|
|
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
|
|
.stat-card { padding:20px; text-align:center; }
|
|
.stat-card .num { font-size:32px; font-weight:800; }
|
|
.stat-card .label { color:var(--text-muted); font-size:13px; margin-top:4px; }
|
|
.table-wrap { overflow-x:auto; }
|
|
.glass-table { width:100%; border-collapse:collapse; font-size:14px; }
|
|
.glass-table th { text-align:left; padding:12px 14px; color:var(--text-muted); font-weight:600; font-size:13px; border-bottom:1px solid var(--glass-border); }
|
|
.glass-table td { padding:12px 14px; border-bottom:1px solid var(--glass-border); }
|
|
.glass-table tr:hover td { background:var(--glass-bg); }
|
|
.tag-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; background:var(--glass-bg); border:1px solid var(--glass-border); }
|
|
.actions a, .actions button { margin-right:8px; font-size:13px; color:var(--text-secondary); }
|
|
.actions a:hover, .actions button:hover{ color:var(--text-primary); }
|
|
.form-card { padding:24px; }
|
|
.form-card .field label { font-weight:600; }
|
|
.form-row { display:flex; gap:12px; }
|
|
.form-row > div { flex:1; }
|
|
.btn-danger { color:#c0392b; }
|
|
[data-theme="dark"] .btn-danger{ color:#ff8a8a;}
|
|
.footnote { text-align:center; color:var(--text-muted); font-size:12px; padding:20px 0 0; margin-top:20px; }
|
|
.msg { padding:12px 16px; border-radius:10px; margin-bottom:16px; background:var(--glass-bg-strong); border:1px solid var(--glass-border); font-size:14px; }
|
|
|
|
.side-panel a.nav-link {
|
|
display:block; padding:10px 12px; border-radius:8px; margin-bottom:4px;
|
|
color:var(--text-secondary); font-size:14px; text-decoration:none; transition:background .2s,color .2s;
|
|
}
|
|
.side-panel a.nav-link:hover { background:var(--glass-bg-strong); color:var(--text-primary); }
|
|
.side-panel a.nav-link.active { background:var(--glass-bg-strong); color:var(--text-primary); font-weight:600; }
|
|
.admin-table { width:100%; border-collapse:collapse; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; }
|
|
.admin-table th, .admin-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--glass-border); font-size:14px; }
|
|
.admin-table th { background:var(--glass-bg-strong); font-weight:600; color:var(--text-secondary); white-space:nowrap; }
|
|
.admin-table tr:last-child td { border-bottom:none; }
|
|
.admin-table tr:hover td { background:var(--glass-bg-strong); }
|
|
.admin-table .thumb { width:64px; height:40px; object-fit:cover; border-radius:6px; }
|
|
.text-muted { color:var(--text-muted); }
|
|
.input, .admin-table select, .admin-table input[type=text], .admin-table input[type=number] {
|
|
padding:8px 10px; border-radius:8px; border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text-primary); font-size:14px;
|
|
}
|
|
.admin-table input[type=checkbox]{ width:16px; height:16px; }
|
|
.pagination { display:flex; gap:8px; align-items:center; margin-top:20px; flex-wrap:wrap; }
|
|
.pagination a, .pagination span { padding:6px 12px; border-radius:8px; font-size:13px; border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text-secondary); }
|
|
.pagination a:hover { color:var(--text-primary); }
|
|
.pagination .current { background:var(--text-primary); color:var(--bg); font-weight:600; border-color:var(--text-primary); }
|
|
.badge-count { display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:var(--glass-bg-strong); font-size:12px; text-align:center; } |