/* ============================================================ 萨都管理后台 · 鎏金玄夜（refined dark） 暖炭黑底 + 鎏金描边(卡片顶缘高光) + 琥珀强调 + 高对比米金文字 依赖 Bootstrap 5.3 暗色模式（）。 ============================================================ */ :root { /* —— 鎏金玄夜色板 —— */ --ink: #14110c; /* 夜底（暖炭黑，不发紫） */ --ink-2: #1b160f; /* 略亮炭黑 */ --gild: #c9a25c; /* 鎏金（描边/分隔） */ --gild-soft: rgba(201, 162, 92, 0.16); --gild-edge: rgba(246, 225, 170, 0.12); /* 顶缘高光 */ --amber: #f0a83c; /* 琥珀（主强调） */ --amber-2: #d9761f; /* 深琥珀 */ --gold-text: #eccf8a; /* 米金（标题/强调字） */ --cream: #efe6d3; /* 正文亮米 */ --txt-2: #b9ac90; /* 次文字 */ --txt-3: #8c8068; /* 淡文字 */ --panel: rgba(40, 33, 23, 0.66); --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --font-brand: "Songti SC", "STSong", Georgia, serif; /* —— Bootstrap 暗色变量覆盖 —— */ --bs-body-bg: var(--ink); --bs-body-bg-rgb: 20, 17, 12; --bs-body-color: var(--cream); --bs-body-color-rgb: 239, 230, 211; --bs-emphasis-color: var(--gold-text); --bs-secondary-color: var(--txt-2); --bs-tertiary-color: var(--txt-3); --bs-tertiary-bg: rgba(255, 255, 255, 0.03); --bs-border-color: var(--gild-soft); --bs-border-color-translucent: var(--gild-soft); --bs-primary: var(--amber); --bs-primary-rgb: 240, 168, 60; --bs-link-color: var(--amber); --bs-link-color-rgb: 240, 168, 60; --bs-link-hover-color: var(--gold-text); --bs-link-hover-color-rgb: 236, 207, 138; --bs-font-sans-serif: var(--font-body); } /* ----- 全局底色：单一暖光顶 + 暖炭黑渐变（无紫） ----- */ html, body { min-height: 100%; } body { font-family: var(--font-body); color: var(--cream); -webkit-font-smoothing: antialiased; background-color: var(--ink) !important; background-image: radial-gradient(860px 440px at 50% -10%, rgba(240, 168, 60, 0.13), transparent 60%), linear-gradient(180deg, #1a160f 0%, #110e09 100%); background-attachment: fixed; background-repeat: no-repeat; } /* 标题：克制无衬线 + 米金 + 字距，避免廉价宋体观感 */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: 1.5px; color: var(--gold-text); } .text-secondary { color: var(--txt-2) !important; } .text-body-tertiary { color: var(--txt-3) !important; } code { color: var(--amber); } hr { border-color: var(--gild-soft); } /* ----- 顶栏 ----- */ .navbar.bg-dark { background: linear-gradient(180deg, rgba(28, 23, 15, 0.92), rgba(22, 18, 12, 0.84)) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201, 162, 92, 0.22); box-shadow: inset 0 1px 0 var(--gild-edge); } .navbar-brand { display: inline-flex !important; align-items: center; gap: 12px; font-family: var(--font-brand); color: var(--gold-text) !important; font-size: 19px; letter-spacing: 3px; } /* 品牌前的鎏金辉光点（克制呼吸） */ .navbar-brand::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ffd27a 0%, var(--amber) 45%, var(--amber-2) 78%, transparent 80%); box-shadow: 0 0 10px rgba(240, 168, 60, 0.65); animation: sdBreathe 6s ease-in-out infinite alternate; } .navbar .dropdown-toggle { color: var(--txt-2) !important; font-size: 14px; } .dropdown-menu { background: #221b12; border: 1px solid var(--gild-soft); box-shadow: 0 18px 40px -20px rgba(0,0,0,.8); } .dropdown-item { color: var(--cream); } .dropdown-item:hover { background: rgba(240,168,60,.12); color: var(--gold-text); } /* ----- shell / 侧栏 ----- */ #app-shell { min-height: calc(100vh - 57px); } aside.sidebar, aside.sidebar.bg-white { width: 232px; flex-shrink: 0; position: sticky; top: 57px; align-self: flex-start; max-height: calc(100vh - 57px); overflow-y: auto; padding-bottom: 24px; background: linear-gradient(180deg, rgba(31, 25, 17, 0.82), rgba(24, 19, 13, 0.82)) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-right: 1px solid var(--gild-soft) !important; } .sidebar .nav-section { font-size: 11px; letter-spacing: 3px; color: var(--amber); opacity: .8; padding: 18px 20px 7px; text-transform: uppercase; } .sidebar .nav-link { position: relative; color: var(--txt-2); border-radius: 0; padding: 9px 20px; font-size: 14.5px; letter-spacing: .6px; transition: color .2s, background .2s; } .sidebar .nav-link:hover { color: var(--gold-text); background: rgba(246, 225, 170, 0.05); } .sidebar .nav-link.active { color: var(--gold-text); font-weight: 600; background: linear-gradient(90deg, rgba(240, 168, 60, 0.16), transparent 80%); } .sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(180deg, var(--amber), var(--amber-2)); box-shadow: 0 0 10px rgba(240, 168, 60, 0.7); border-radius: 0 2px 2px 0; } /* ----- 卡片：鎏金玻璃，顶缘高光 ----- */ .card { background: linear-gradient(180deg, rgba(43, 35, 24, 0.80), rgba(30, 25, 17, 0.84)) !important; border: 1px solid var(--gild-soft) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 var(--gild-edge), 0 24px 50px -30px rgba(0, 0, 0, 0.85) !important; color: var(--cream); } .card .text-secondary { color: var(--txt-2) !important; } .display-6 { color: var(--gold-text); font-weight: 600; letter-spacing: .5px; text-shadow: 0 0 22px rgba(240, 168, 60, 0.22); } /* ----- 表格 ----- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--cream); --bs-table-border-color: var(--gild-soft); --bs-table-hover-bg: rgba(240, 168, 60, 0.09); --bs-table-hover-color: var(--gold-text); margin-bottom: 0; } .table > thead.table-light > tr > th, .table .table-light th { background: transparent !important; color: var(--amber) !important; border-bottom: 1px solid rgba(201, 162, 92, 0.35) !important; font-weight: 600; letter-spacing: 1.5px; font-size: 12px; text-transform: uppercase; padding-top: 14px; padding-bottom: 14px; } .table > tbody > tr > td { padding-top: 14px; padding-bottom: 14px; } .table > :not(caption) > * > * { border-bottom-color: var(--gild-soft); } /* ----- 按钮 ----- */ .btn { letter-spacing: .5px; } .btn-primary { background: linear-gradient(96deg, #ffbe5a, var(--amber-2)); border: none; color: #2a1606; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(217, 118, 31, 0.85); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: linear-gradient(96deg, #ffca74, #e8821f); color: #2a1606; box-shadow: 0 12px 28px -10px rgba(217, 118, 31, 0.95); } .btn-outline-primary { --bs-btn-color: var(--amber); --bs-btn-border-color: rgba(201, 162, 92, 0.45); --bs-btn-hover-bg: var(--amber); --bs-btn-hover-border-color: var(--amber); --bs-btn-hover-color: #2a1606; --bs-btn-active-bg: var(--amber); --bs-btn-active-color: #2a1606; } .btn-outline-secondary { --bs-btn-color: var(--txt-2); --bs-btn-border-color: var(--gild-soft); --bs-btn-hover-bg: rgba(246, 225, 170, 0.10); --bs-btn-hover-border-color: rgba(201, 162, 92, 0.4); --bs-btn-hover-color: var(--gold-text); } .btn-outline-danger { --bs-btn-border-color: rgba(200, 90, 90, .4); } .btn-secondary { --bs-btn-bg: rgba(255,255,255,.07); --bs-btn-border-color: var(--gild-soft); --bs-btn-color: var(--cream); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: var(--gold-text); } .btn-link { color: var(--txt-2); } /* ----- 表单 ----- */ .form-label { font-size: 13px; color: var(--txt-2); margin-bottom: 6px; letter-spacing: .5px; } .form-control, .form-select { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--gild-soft); color: var(--cream); border-radius: 10px; } .form-control::placeholder { color: var(--txt-3); } .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.06); border-color: var(--amber); box-shadow: 0 0 0 .2rem rgba(240, 168, 60, 0.20); color: var(--gold-text); } .input-group-text { background: rgba(255,255,255,.05); border-color: var(--gild-soft); color: var(--txt-2); } .form-select option { background: #1f1810; color: var(--cream); } /* ----- 弹窗 ----- */ .modal-content { background: linear-gradient(180deg, #271f15, #1c1710); border: 1px solid rgba(201, 162, 92, 0.32); border-radius: 18px; box-shadow: inset 0 1px 0 var(--gild-edge), 0 40px 80px -30px rgba(0,0,0,.9); } .modal-header, .modal-footer { border-color: var(--gild-soft); } .modal-title { color: var(--gold-text); } /* ----- 徽章 ----- */ .badge { font-weight: 600; letter-spacing: .5px; } .badge.text-bg-success { background: rgba(120, 190, 120, 0.20) !important; color: #b7e0b7 !important; } .badge.text-bg-secondary { background: rgba(255,255,255,.10) !important; color: var(--txt-2) !important; } .badge.text-bg-info { background: rgba(120, 170, 255, 0.20) !important; color: #c2d4ff !important; } .badge.text-bg-warning { background: rgba(240, 168, 60, 0.20) !important; color: var(--amber) !important; } .badge.text-bg-danger { background: rgba(220, 110, 110, 0.20) !important; color: #efb1b1 !important; } /* ----- 进度条 / 滚动条 ----- */ .progress { background: rgba(255,255,255,.07); } .progress-bar { background: linear-gradient(90deg, var(--amber), var(--amber-2)); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(201, 162, 92, 0.20); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 92, 0.35); } /* ----- 移动端侧栏 ----- */ @media (max-width: 767.98px) { aside.sidebar, aside.sidebar.bg-white { position: fixed; top: 57px; left: 0; bottom: 0; z-index: 1040; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .55); } aside.sidebar.open { transform: translateX(0); } } /* ============================================================ 登录页 ============================================================ */ .auth-page { min-height: 100vh; position: relative; overflow: hidden; } .auth-page::before { content: ""; position: absolute; top: 42%; left: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(240, 168, 60, 0.26) 0%, rgba(217, 118, 31, 0.10) 42%, transparent 66%); animation: sdGlow 7s ease-in-out infinite alternate; pointer-events: none; } .auth-card { position: relative; z-index: 1; width: 380px; max-width: 90vw; padding: 44px 38px; background: linear-gradient(180deg, rgba(43, 35, 24, 0.86), rgba(28, 23, 16, 0.9)); border: 1px solid rgba(201, 162, 92, 0.32); border-radius: 22px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--gild-edge), 0 40px 90px -34px rgba(0, 0, 0, 0.85); } .auth-logo { display: block; width: 88px; margin: 0 auto 16px; filter: drop-shadow(0 0 18px rgba(240, 168, 60, 0.45)); animation: sdBreathe 6s ease-in-out infinite alternate; } .auth-sub { text-align: center; color: var(--amber); font-size: 13px; letter-spacing: 6px; margin-bottom: 28px; opacity: .9; } /* ----- 呼吸辉光 ----- */ @keyframes sdBreathe { 0% { transform: scale(0.94); opacity: .8; } 100% { transform: scale(1.06); opacity: 1; } } @keyframes sdGlow { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }