init: 我的博客项目
This commit is contained in:
Your Name
@@ -0,0 +1,103 @@
|
||||
.admin-body { }
|
||||
.admin-layout { display:flex; align-items:flex-start; gap:24px; }
|
||||
.admin-aside { position:sticky; top:88px; align-self:flex-start; width:224px; flex-shrink:0; }
|
||||
.admin-main { flex:1; min-width:0; }
|
||||
|
||||
.admin-menu { padding:12px 10px; }
|
||||
.admin-menu .menu-title { padding:6px 14px 8px; font-size:11px; letter-spacing:2px; color:var(--text-muted); }
|
||||
.admin-menu a.menu-item {
|
||||
display:block; padding:11px 14px; border-radius:12px; margin-bottom:3px;
|
||||
color:var(--text-secondary); font-size:14px; transition:background .2s,color .2s;
|
||||
}
|
||||
.admin-menu a.menu-item:hover { background:var(--glass-bg-strong); color:var(--text-primary); }
|
||||
.admin-menu a.menu-item.active { background:var(--text-primary); color:var(--bg-0); font-weight:600; }
|
||||
.admin-menu .menu-sep { height:1px; background:var(--glass-border); margin:10px 6px; }
|
||||
|
||||
.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; letter-spacing:.5px; }
|
||||
.admin-head .sub { color:var(--text-muted); font-size:13px; margin-top:4px; }
|
||||
|
||||
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:26px; }
|
||||
.stat-card { padding:22px 18px; text-align:center; position:relative; overflow:hidden; }
|
||||
.stat-card .num { font-size:34px; font-weight:800; letter-spacing:-1px; }
|
||||
.stat-card .label { color:var(--text-muted); font-size:13px; margin-top:6px; }
|
||||
.stat-card .foot { font-size:12px; color:var(--text-muted); margin-top:8px; }
|
||||
|
||||
.table-wrap { overflow-x:auto; }
|
||||
.admin-table th.title, .admin-table td.title { max-width:340px; overflow:hidden; text-overflow:ellipsis; }
|
||||
|
||||
.admin-table { width:100%; border-collapse:collapse; }
|
||||
.admin-table th, .admin-table td { padding:11px 10px; text-align:left; border-bottom:1px solid var(--glass-border); font-size:14px; vertical-align:middle; white-space:nowrap; }
|
||||
.admin-table th { font-weight:600; color:var(--text-secondary); white-space:nowrap; font-size:13px; }
|
||||
.admin-table tbody tr { transition:background .15s; }
|
||||
.admin-table tbody tr:hover { background:var(--glass-bg-strong); }
|
||||
.admin-table tbody tr:last-child td { border-bottom:none; }
|
||||
.admin-table .thumb { width:72px; height:44px; object-fit:cover; border-radius:8px; display:block; }
|
||||
.admin-table .num-col { text-align:center; }
|
||||
|
||||
.actions a, .actions button { margin-right:10px; font-size:13px; color:var(--text-secondary); background:none; border:none; cursor:pointer; padding:0; }
|
||||
.actions a:hover, .actions button:hover { color:var(--text-primary); }
|
||||
.actions .danger { color:#c0392b; }
|
||||
[data-theme="dark"] .actions .danger { color:#ff8a8a; }
|
||||
|
||||
.pagination { display:flex; gap:8px; align-items:center; margin-top:18px; flex-wrap:wrap; }
|
||||
.pagination a, .pagination span { padding:7px 13px; border-radius:10px; 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-0); font-weight:600; border-color:var(--text-primary); }
|
||||
|
||||
.admin-form .field { margin-bottom:18px; }
|
||||
.admin-form .field label { display:block; font-weight:600; margin-bottom:8px; font-size:14px; }
|
||||
.admin-form .field .hint { font-size:12px; color:var(--text-muted); margin-top:6px; }
|
||||
.admin-form .form-row { display:flex; gap:16px; }
|
||||
.admin-form .form-row > div { flex:1; }
|
||||
.admin-form textarea.input, .admin-form .input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text-primary); font-size:14px; outline:none; transition:.2s; font-family:inherit; }
|
||||
.admin-form .input:focus { border-color:var(--text-primary); }
|
||||
.admin-form textarea.input { resize:vertical; min-height:140px; line-height:1.7; }
|
||||
.admin-form .input.code { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; }
|
||||
.admin-form select.input { appearance:none; -webkit-appearance:none; }
|
||||
.admin-form .btn-row { display:flex; gap:10px; margin-top:6px; }
|
||||
.tag-check { display:inline-flex; align-items:center; gap:6px; margin:0 14px 10px 0; font-size:14px; color:var(--text-secondary); cursor:pointer; }
|
||||
.tag-check input { width:16px; height:16px; accent-color:var(--text-primary); }
|
||||
|
||||
.msg { padding:13px 16px; border-radius:12px; margin-bottom:16px; background:var(--glass-bg-strong); border:1px solid var(--glass-border); font-size:14px; }
|
||||
.msg.ok { border-color:rgba(34,139,34,.4); color:#2e7d32; }
|
||||
[data-theme="dark"] .msg.ok { color:#8fd18f; }
|
||||
.msg.err { border-color:rgba(192,57,43,.4); color:#c0392b; }
|
||||
[data-theme="dark"] .msg.err { color:#ff8a8a; }
|
||||
|
||||
.card-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
|
||||
.card-title h3 { font-size:16px; }
|
||||
.text-muted { color:var(--text-muted); }
|
||||
.empty { text-align:center; color:var(--text-muted); padding:56px 20px; font-size:14px; }
|
||||
|
||||
@media (max-width:900px){
|
||||
.admin-aside { display:none; }
|
||||
.admin-layout { display:block; }
|
||||
}
|
||||
|
||||
.admin-main .card:hover { transform:none; }
|
||||
.admin-main .card::after { display:none; }
|
||||
.admin-main .card { margin-bottom:20px; }
|
||||
|
||||
.admin-head .head-right { display:flex; gap:10px; align-items:center; }
|
||||
|
||||
/* 后台输入框：清晰可见的边框与背景（浅色主题下白边框不可见） */
|
||||
.admin-main .input,
|
||||
.admin-main select.input,
|
||||
.admin-main textarea.input {
|
||||
width:100%; padding:11px 14px; border-radius:12px;
|
||||
border:1px solid var(--input-border);
|
||||
background:var(--glass-bg-strong);
|
||||
color:var(--text-primary); font-size:14px; outline:none; transition:.2s; font-family:inherit;
|
||||
}
|
||||
.admin-main .input::placeholder { color:var(--text-muted); }
|
||||
.admin-main .input:focus { border-color:var(--text-primary); box-shadow:0 0 0 3px var(--glass-border); }
|
||||
.admin-main textarea.input { resize:vertical; min-height:140px; line-height:1.7; }
|
||||
.admin-main .input.code { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; }
|
||||
|
||||
/* 自定义确认框 */
|
||||
.modal-mask { position:fixed; inset:0; z-index:200; background:rgba(15,18,28,0.42); display:flex; align-items:center; justify-content:center; padding:24px; }
|
||||
.modal { width:100%; max-width:360px; padding:28px; }
|
||||
.modal .modal-title { font-size:17px; font-weight:700; margin-bottom:14px; }
|
||||
.modal .modal-text { color:var(--text-secondary); font-size:14px; line-height:1.7; margin-bottom:24px; }
|
||||
.modal .modal-actions { display:flex; justify-content:flex-end; gap:10px; }
|
||||
Reference in New Issue
Block a user