247 lines
7.8 KiB
CSS
247 lines
7.8 KiB
CSS
body{
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
|
color:#e5e7eb;
|
|
margin:0;
|
|
}
|
|
|
|
a{color:#60a5fa;text-decoration:none;}
|
|
a:hover{text-decoration:underline;}
|
|
|
|
.layout{display:grid;min-height:100vh;}
|
|
.sidebar{padding:24px;}
|
|
.sidebar-title,.sidebar-brand{margin-top:0;}
|
|
.sidebar a,
|
|
.sidebar-link{display:block;color:#cbd5e1;text-decoration:none;padding:10px 12px;border-radius:10px;margin-bottom:8px;}
|
|
.sidebar a:hover,
|
|
.sidebar-link:hover{text-decoration:none;}
|
|
.group-title{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px;}
|
|
.sidebar-logout,.logout-form{margin-top:18px;}
|
|
|
|
.content{padding:28px;}
|
|
|
|
/* 顶部导航布局（将左侧菜单提升到顶部，提升可视面积，避免底部需要横向滚动才看到关键动作） */
|
|
.layout.layout-topnav{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
|
|
.layout.layout-topnav .sidebar{
|
|
position:sticky;
|
|
top:0;
|
|
z-index:50;
|
|
padding:16px 20px;
|
|
border-right:none !important;
|
|
border-bottom:1px solid #22384f;
|
|
}
|
|
.layout.layout-topnav .content{padding-top:20px;}
|
|
|
|
/* 顶部导航：把链接横向排布，超出则可横向滚动 */
|
|
.layout.layout-topnav .sidebar a,
|
|
.layout.layout-topnav .sidebar-link{
|
|
display:inline-block;
|
|
margin:0 8px 0 0;
|
|
padding:8px 10px;
|
|
border-radius:10px;
|
|
}
|
|
.layout.layout-topnav .group-title{display:inline-block;margin:0 10px 0 0;}
|
|
.layout.layout-topnav .logout-form,
|
|
.layout.layout-topnav .sidebar-logout{display:inline-block;margin:0 0 0 10px;}
|
|
.layout.layout-topnav .sidebar{white-space:nowrap;overflow-x:auto;}
|
|
.layout.layout-topnav .sidebar::-webkit-scrollbar{height:8px;}
|
|
.layout.layout-topnav .sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:999px;}
|
|
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
|
|
.page-title{margin:0;}
|
|
|
|
.card{border:1px solid #334155;border-radius:14px;padding:16px;}
|
|
.card + .card{margin-top:20px;}
|
|
.card-spaced{margin-bottom:20px;}
|
|
|
|
.grid{display:grid;gap:16px;}
|
|
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
|
|
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
|
|
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
|
|
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
|
|
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
|
|
.grid-align-end{align-items:end;}
|
|
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
|
|
.span-2{grid-column:span 2;}
|
|
.span-3{grid-column:span 3;}
|
|
|
|
.num{font-size:28px;font-weight:700;}
|
|
.num-md{font-size:20px;font-weight:700;}
|
|
.num-sm{font-size:18px;font-weight:700;}
|
|
|
|
/* 兼容：早期页面使用 metric-number 作为指标数字样式 */
|
|
.metric-number{font-size:28px;font-weight:700;}
|
|
|
|
.text-md{font-size:16px;display:block;}
|
|
.muted{color:#94a3b8;}
|
|
.muted-tight{margin-top:0;}
|
|
.muted-xs{margin-top:6px;font-size:12px;}
|
|
|
|
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;margin-top:8px;}
|
|
|
|
table{width:100%;border-collapse:collapse;}
|
|
th,td{padding:10px;border-bottom:1px solid #334155;text-align:left;vertical-align:top;}
|
|
|
|
input,select,button,textarea,
|
|
.form-grid input,
|
|
.form-grid select,
|
|
.login-form input,
|
|
.login-form button{
|
|
padding:10px 12px;
|
|
border-radius:10px;
|
|
border:1px solid #475569;
|
|
background:#0f172a;
|
|
color:#fff;
|
|
box-sizing:border-box;
|
|
}
|
|
button{cursor:pointer;}
|
|
|
|
/* Buttons (UI Components)
|
|
* 说明：统一总台/站点后台/商家后台按钮风格（四端后台美化第一步）。
|
|
*/
|
|
.btn,
|
|
button.btn,
|
|
.btn-secondary,
|
|
button.btn-secondary,
|
|
.btn-danger,
|
|
button.btn-danger{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:6px;
|
|
padding:10px 14px;
|
|
border-radius:10px;
|
|
font-weight:600;
|
|
text-decoration:none;
|
|
border:1px solid transparent;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.btn,
|
|
button.btn{
|
|
background:#1d4ed8;
|
|
border-color:#1d4ed8;
|
|
color:#dbeafe;
|
|
}
|
|
.btn:hover,
|
|
button.btn:hover{
|
|
background:#1e40af;
|
|
border-color:#1e40af;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.btn-secondary,
|
|
button.btn-secondary{
|
|
background:transparent;
|
|
border-color:#334155;
|
|
color:#cbd5e1;
|
|
}
|
|
.btn-secondary:hover,
|
|
button.btn-secondary:hover{
|
|
background:#1e293b;
|
|
border-color:#475569;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.btn-danger,
|
|
button.btn-danger{
|
|
background:#7f1d1d;
|
|
border-color:#7f1d1d;
|
|
color:#fecaca;
|
|
}
|
|
.btn-danger:hover,
|
|
button.btn-danger:hover{
|
|
background:#991b1b;
|
|
border-color:#991b1b;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.btn-sm,
|
|
button.btn-sm{
|
|
padding:8px 10px;
|
|
border-radius:9px;
|
|
font-size:13px;
|
|
}
|
|
|
|
textarea.w-full,input.w-full{width:100%;}
|
|
|
|
.pre-wrap{white-space:pre-wrap;}
|
|
|
|
.w-100{width:100px;}
|
|
.w-120{width:120px;}
|
|
.w-140{width:140px;}
|
|
.w-160{width:160px;}
|
|
.w-200{width:200px;}
|
|
|
|
input.w-90{width:90px;}
|
|
.block{display:block;}
|
|
.inline{display:inline;}
|
|
.inline-form{display:inline;}
|
|
|
|
.mb-0{margin-bottom:0;}
|
|
.mb-6{margin-bottom:6px;}
|
|
.mb-8{margin-bottom:8px;}
|
|
.mb-10{margin-bottom:10px;}
|
|
.mb-12{margin-bottom:12px;}
|
|
.mb-16{margin-bottom:16px;}
|
|
.mb-20{margin-bottom:20px;}
|
|
.mt-0{margin-top:0;}
|
|
.mt-4{margin-top:4px;}
|
|
.mt-6{margin-top:6px;}
|
|
.mt-8{margin-top:8px;}
|
|
.mt-10{margin-top:10px;}
|
|
.mt-12{margin-top:12px;}
|
|
.mt-16{margin-top:16px;}
|
|
.my-16{margin:16px 0;}
|
|
.my-20{margin:20px 0;}
|
|
.list-indent,.ml-18{margin:8px 0 0 18px;}
|
|
|
|
.flash{background:#052e16;color:#bbf7d0;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
|
|
.warning{background:#78350f;color:#fde68a;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
|
|
.error-box{background:#7f1d1d;color:#fecaca;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
|
|
.error,.error-inline{color:#fca5a5;margin-top:10px;}
|
|
.filter-error{margin-bottom:12px;padding:12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:8px;}
|
|
|
|
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
|
|
.actions-spread{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
|
|
.inline-links,.card-link-list{display:flex;gap:8px;flex-wrap:wrap;}
|
|
|
|
/* Layout helpers */
|
|
.flex-between{display:flex;justify-content:space-between;gap:12px;align-items:center;}
|
|
.items-center{align-items:center;}
|
|
|
|
.gap-12{gap:12px;}
|
|
.gap-10{gap:10px;}
|
|
|
|
.focus-box,.nav-box,.profile-box{padding:12px;border:1px solid #334155;border-radius:8px;}
|
|
.summary-box,.stat-box,.status-card,.status-link{padding:12px;border:1px solid #334155;border-radius:8px;}
|
|
.status-card,.status-link{color:inherit;text-decoration:none;display:block;}
|
|
.status-card:hover,.status-link:hover{text-decoration:none;}
|
|
.pagination-wrap{margin-top:16px;}
|
|
.text-center,.table-empty{text-align:center;}
|
|
.section-dark{background:#0f172a;}
|
|
.stat-box-light,.status-link-light{padding:12px;border:1px solid #e5e7eb;border-radius:8px;}
|
|
.status-link-light{color:inherit;text-decoration:none;display:block;}
|
|
.is-active-dark,.status-card-active{background:#1e293b;border-color:#60a5fa;}
|
|
.is-active-light{background:#f5faff;border-color:#93c5fd;}
|
|
.result-warning{color:#f59e0b;}
|
|
.result-success{color:#22c55e;}
|
|
.info-warning{margin-bottom:12px;padding:10px 12px;border:1px solid #f59e0b;border-radius:8px;color:#f59e0b;}
|
|
.helper-text{margin:12px 0 0;}
|
|
|
|
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
|
.card-login,.login-card{width:420px;border-radius:18px;padding:28px;}
|
|
.login-form input,
|
|
.login-form button{width:100%;padding:12px;margin-top:10px;}
|
|
|
|
@media (max-width: 1200px){
|
|
.grid,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr);}
|
|
.two-col{grid-template-columns:1fr;}
|
|
}
|
|
|
|
@media (max-width: 768px){
|
|
.layout{grid-template-columns:1fr !important;}
|
|
.sidebar{border-right:none !important;border-bottom:1px solid #22384f;}
|
|
.content{padding:16px;}
|
|
.top,.actions-spread{flex-direction:column;}
|
|
.grid,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr;}
|
|
}
|