body.theme-expense { background: var(--color-bg) } body.theme-expense .container { color: var(--color-text) } body.theme-expense h2 { color: var(--color-text) } body.theme-expense .panel.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--gap) } body.theme-expense .expense-layout { display: grid; grid-template-columns: 1fr; gap: var(--gap) } /* 顶部胶囊标签 */ body.theme-expense .expense-tabs .tabs { display:flex; gap:10px; padding:0 } body.theme-expense .expense-tabs .tab { display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; user-select:none; transition: all .3s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; backdrop-filter: blur(8px) } /* 暗黑 */ body.theme-expense[data-theme="dark"] .expense-tabs .tab { background: rgba(17,24,39,0.8); border:1px solid rgba(31,41,55,0.5); color:#cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05) } body.theme-expense[data-theme="dark"] .expense-tabs .tab:hover { background: rgba(26,35,52,0.6); border-color: rgba(51,65,85,0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.10) } body.theme-expense[data-theme="dark"] .expense-tabs .tab.active { background: rgba(37,99,235,0.20); border-color: rgba(59,130,246,0.5); color:#fff; box-shadow: 0 8px 24px rgba(37,99,235,0.25) } /* 明亮 */ body.theme-expense[data-theme="light"] .expense-tabs .tab { background: #ffffff; border:1px solid var(--color-border); color: var(--color-text); box-shadow: 0 2px 6px rgba(0,0,0,0.06) } body.theme-expense[data-theme="light"] .expense-tabs .tab:hover { background: #f8fafc; border-color: var(--color-border); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08) } body.theme-expense[data-theme="light"] .expense-tabs .tab.active { background: rgba(37,99,235,0.12); border-color: var(--color-primary); color: var(--color-text); box-shadow: 0 8px 24px rgba(37,99,235,0.15) } @media (max-width: 768px) { body.theme-expense .expense-tabs .tabs { flex-wrap: wrap; justify-content: center; gap:8px; padding:6px } body.theme-expense .expense-tabs .tab { padding:8px 16px; font-size:13px } } /* 表格卡片 */ body.theme-expense .list-card { background: var(--table-bg); border: 1px solid var(--table-border); border-radius: var(--table-radius); overflow: hidden; box-shadow: var(--shadow-sm) } body.theme-expense .grid { width: 100%; border-collapse: collapse; background: var(--table-bg) } body.theme-expense .grid thead { background: var(--table-header-bg); position: sticky; top: 0 } body.theme-expense .grid th { padding: 10px 12px; text-align: left; font-weight: 600; font-size: inherit; color: var(--text-primary); border-bottom: 2px solid var(--table-border) } body.theme-expense .grid td { padding: 10px 12px; border-bottom: 1px solid var(--table-border); color: var(--color-text); font-size: inherit; transition: all .2s ease } body.theme-expense .grid tbody tr:nth-child(odd) { background: var(--table-row-odd) } body.theme-expense .grid tbody tr:nth-child(even) { background: var(--table-row-even) } body.theme-expense .grid tbody tr:hover { background: var(--table-row-hover); color: var(--table-text-hover) } /* 导航显示控制 */ body.theme-expense:not(.nav-visible) #topbar { display: none } /* 头部图标样式(与云产品一致) */ body.theme-expense[data-theme="dark"] .icon-toggle, body.theme-expense[data-theme="dark"] .icon-theme { border-color: var(--color-border) } body.theme-expense[data-theme="light"] .icon-toggle, body.theme-expense[data-theme="light"] .icon-theme { border-color: var(--color-border) }