/* ========================================================= Manus‑Like UI Kit for Bulma (Optimized) - Modern / Minimal / Rounded / Gray-scale / Low-noise - Prefers borders + spacing over shadows - Skeleton-first loading states ========================================================= */ :root { /* Backgrounds */ --ui-bg: #f7f7f8; /* app 背景 */ --ui-surface: #ffffff; /* 面板/卡片 */ --ui-surface-2: #fbfbfc; /* 次级面板 */ /* Text (gray scale) */ --ui-text: #111214; --ui-text-2: #5b6068; --ui-text-3: #8b9098; /* Border */ --ui-border: #e6e7eb; --ui-border-2: #eff0f3; /* Shadows (keep subtle; many surfaces should be shadowless) */ --ui-shadow-sm: 0 1px 4px rgba(16, 24, 40, 0.06); --ui-shadow: 0 4px 14px rgba(16, 24, 40, 0.08); /* Radius (consistent, not too soft) */ --ui-radius: 14px; --ui-radius-sm: 12px; --ui-radius-xs: 10px; /* Spacing */ --ui-gap: 16px; /* Accent (still grayscale) */ --ui-accent: #2a2d33; /* primary button */ --ui-accent-hover: #1f2228; /* Input */ --ui-input-bg: #ffffff; --ui-input-border: #d9dbe1; --ui-input-focus-ring: rgba(42, 45, 51, 0.18); /* Skeleton */ --ui-skeleton: #eceef1; /* Status */ --ui-danger: #c0392b; /* 字体大小系统 - 按优先级 */ --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-xxl: 24px; --font-size-huge: 28px; } /* Dark mode (opt-in): */ html[data-theme="dark"] { --ui-bg: #0f1115; --ui-surface: #141722; --ui-surface-2: #10131b; --ui-text: #eceef2; --ui-text-2: #b3b8c2; --ui-text-3: #8b9098; --ui-border: #232735; --ui-border-2: #1b1f2c; --ui-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --ui-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); --ui-accent: #eceef2; --ui-accent-hover: #ffffff; --ui-input-bg: #10131b; --ui-input-border: #2a2f40; --ui-input-focus-ring: rgba(236, 238, 242, 0.16); --ui-skeleton: #1e2230; } /* Base */ html, body { background: var(--ui-bg); color: var(--ui-text); } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* Typography (Bulma tweaks) */ .title, .subtitle, .label { color: var(--ui-text); } .help, .has-text-grey { color: var(--ui-text-2) !important; } /* Global rounded system */ .button, .input, .textarea, .select select, .box, .card, .notification, .dropdown-content, .menu-list a, .modal-card, .tag { border-radius: var(--ui-radius-xs); } hr { background: transparent; border: 0; border-top: 1px solid var(--ui-border); } /* Reduce Bulma defaults */ .button { box-shadow: none !important; } .card { box-shadow: none; } /* Override Bulma button colors to grayscale system */ .button.is-primary { background-color: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-surface); } .button.is-primary:hover { background-color: var(--ui-accent-hover); border-color: var(--ui-accent-hover); } .button.is-success { background-color: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-surface); } .button.is-success:hover { background-color: var(--ui-accent-hover); border-color: var(--ui-accent-hover); } .button.is-danger { background-color: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-surface); } .button.is-danger:hover { background-color: #a93226; border-color: #a93226; } /* Override Bulma notification colors to grayscale system */ .notification.is-warning, .notification.is-warning.is-light { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } .notification.is-danger, .notification.is-danger.is-light { background-color: rgba(192, 57, 43, 0.1); border: 1px solid var(--ui-danger); color: var(--ui-danger); } .notification.is-success, .notification.is-success.is-light { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } .notification.is-info, .notification.is-info.is-light { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } /* Override Bulma tag colors to grayscale system */ .tag.is-primary { background-color: var(--ui-accent); color: var(--ui-surface); } .tag.is-success { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } .tag.is-warning { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } .tag.is-danger { background-color: rgba(192, 57, 43, 0.1); border: 1px solid var(--ui-danger); color: var(--ui-danger); } .tag.is-info { background-color: var(--ui-surface-2); border: 1px solid var(--ui-border); color: var(--ui-text); } /* ========================================================= Release 3.5 Layout Structure ========================================================= */ /* Header */ .header { background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; flex-shrink: 0; } .header-content { max-width: 100%; margin: 0 auto; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; } .header-left { display: flex; align-items: center; gap: 16px; } .header-right { display: flex; align-items: center; gap: 12px; } .header-title { font-size: var(--font-size-lg); font-weight: 600; margin: 0; color: var(--ui-text); } /* Header Buttons - 遵循设计规范第10章按钮系统 */ .header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); font-size: var(--font-size-sm); font-weight: 500; color: var(--ui-text-2); background: var(--ui-surface); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; font-family: inherit; white-space: nowrap; } .header-btn:hover { background: var(--ui-surface-2); border-color: var(--ui-accent); color: var(--ui-text); } html[data-theme="dark"] .header-btn:hover { background: rgba(255,255,255,0.06); } /* 保持旧类名兼容 - 使用新样式 */ .feedback-btn, .developer-btn, .changelog-btn, .redeem-code-btn, .logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); font-size: var(--font-size-sm); font-weight: 500; color: var(--ui-text-2); background: var(--ui-surface); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; font-family: inherit; white-space: nowrap; } .feedback-btn:hover, .developer-btn:hover, .changelog-btn:hover, .redeem-code-btn:hover, .logout-btn:hover { background: var(--ui-surface-2); border-color: var(--ui-accent); color: var(--ui-text); } html[data-theme="dark"] .feedback-btn:hover, html[data-theme="dark"] .developer-btn:hover, html[data-theme="dark"] .changelog-btn:hover, html[data-theme="dark"] .redeem-code-btn:hover, html[data-theme="dark"] .logout-btn:hover { background: rgba(255,255,255,0.06); } /* Main Layout */ .main-layout { display: flex; flex: 1; overflow: hidden; } /* Sidebar - 遵循设计规范Frame布局层级2 */ .sidebar { width: 240px; min-width: 180px; max-width: 400px; background: var(--ui-surface-2); border-right: 1px solid var(--ui-border); overflow-y: auto; overflow-x: hidden; height: calc(100vh - 60px); position: sticky; top: 60px; resize: horizontal; display: flex; flex-direction: column; margin: 0; padding: 0; box-sizing: border-box; will-change: auto; transform: translateZ(0); } .sidebar-resizer { width: 4px; background: var(--ui-border); cursor: col-resize; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-resizer:hover { background: var(--ui-accent); } .sidebar-nav { padding: 16px 0; flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0; box-sizing: border-box; scroll-behavior: auto; } .sidebar-nav .menu-label { display: block; padding: 12px 20px; color: var(--ui-text-3); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } .sidebar-menu { list-style: none; margin: 0; padding: 0; } .sidebar-item { margin-bottom: 4px; display: block; visibility: visible; opacity: 1; height: auto; min-height: auto; } .sidebar-link { display: flex; align-items: center; padding: 12px 20px; color: var(--ui-text-2); text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; } .sidebar-link:hover { background: rgba(0,0,0,0.03); color: var(--ui-text); } html[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.05); } .sidebar-item.active .sidebar-link { background: rgba(0,0,0,0.035); color: var(--ui-text); border-left-color: var(--ui-accent); font-weight: 600; box-sizing: border-box; } html[data-theme="dark"] .sidebar-item.active .sidebar-link { background: rgba(255,255,255,0.06); } .sidebar-icon { font-size: var(--font-size-lg); margin-right: 12px; width: 24px; text-align: center; } .sidebar-text { flex: 1; } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--ui-border-2); margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .sidebar-user { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .sidebar-user-label { font-size: var(--font-size-sm); color: var(--ui-text-3); white-space: nowrap; } .sidebar-username { font-size: var(--font-size-sm); color: var(--ui-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-actions { display: flex; gap: 8px; } .sidebar-actions .ui-btn { flex: 1; } /* Sidebar Group (Collapsible) */ .sidebar-group { margin-bottom: 4px; display: block; visibility: visible; position: relative; width: 100%; box-sizing: border-box; } .sidebar-group-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--ui-text-2); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; user-select: none; } .sidebar-group-header:hover { background: rgba(0,0,0,0.03); color: var(--ui-text); } html[data-theme="dark"] .sidebar-group-header:hover { background: rgba(255,255,255,0.05); } .sidebar-group.active .sidebar-group-header { background: rgba(0,0,0,0.035); color: var(--ui-text); border-left-color: var(--ui-accent); } html[data-theme="dark"] .sidebar-group.active .sidebar-group-header { background: rgba(255,255,255,0.06); } .sidebar-group-arrow { font-size: var(--font-size-xs); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); color: var(--ui-text-3); } .sidebar-group.active .sidebar-group-arrow { transform: rotate(90deg); color: var(--ui-accent); } .sidebar-submenu { list-style: none; display: none; padding: 0; margin: 0; height: 0; overflow: hidden; opacity: 0; position: relative; width: 100%; box-sizing: border-box; } .sidebar-group.active .sidebar-submenu { display: block; height: auto; opacity: 1; margin: 0; padding: 0; position: relative; width: 100%; box-sizing: border-box; } .sidebar-subitem { margin-bottom: 2px; display: block; visibility: visible; opacity: 1; height: auto; min-height: auto; position: relative; width: 100%; box-sizing: border-box; } .sidebar-subitem .sidebar-link { padding: 10px 20px 10px 40px; font-size: var(--font-size-base); } .sidebar-subitem.active .sidebar-link { background: rgba(0,0,0,0.035); color: var(--ui-text); border-left-color: var(--ui-accent); font-weight: 600; box-sizing: border-box; } html[data-theme="dark"] .sidebar-subitem.active .sidebar-link { background: rgba(255,255,255,0.06); } /* Sidebar Static Group - 静态分组（始终展开，不可折叠） */ .sidebar-static-group { margin-bottom: 4px; display: block; } .sidebar-static-group-header { display: flex; align-items: center; padding: 12px 20px; font-size: var(--font-size-sm); color: var(--ui-text-2); font-weight: 600; cursor: default; } .sidebar-static-submenu { list-style: none; display: block; padding: 0; margin: 0; } .sidebar-static-group.active .sidebar-static-group-header { color: var(--ui-text); } /* Main Content */ .main-content { flex: 1; overflow-y: auto; background: var(--ui-bg); min-height: calc(100vh - 60px); } /* Responsive */ @media (max-width: 980px) { .main-layout { flex-direction: column; } .sidebar { position: relative; width: 100%; height: auto; top: 0; border-right: 0; border-bottom: 1px solid var(--ui-border); resize: none; } .main-content { min-height: auto; } } /* ========================================================= Sidebar ========================================================= */ .menu-label { color: var(--ui-text-3); letter-spacing: 0.02em; } .menu-list a { padding: 10px 12px; color: var(--ui-text-2); border: 1px solid transparent; } .menu-list a:hover { background: rgba(0,0,0,0.03); color: var(--ui-text); } html[data-theme="dark"] .menu-list a:hover { background: rgba(255,255,255,0.05); } .menu-list a.is-active { background: rgba(0,0,0,0.035); color: var(--ui-text); border-color: var(--ui-border); font-weight: 700; } html[data-theme="dark"] .menu-list a.is-active { background: rgba(255,255,255,0.06); } /* ========================================================= Buttons - 根据设计规范第10章 ========================================================= */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-xs); font-size: var(--font-size-base); font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } /* 按钮尺寸变体 */ .ui-btn.ui-btn-sm { height: 32px; padding: 6px 12px; font-size: var(--font-size-sm); } .ui-btn.ui-btn-lg { height: 48px; padding: 12px 24px; font-size: var(--font-size-md); } /* 重要按钮 - 黑色背景，白色文字 */ .ui-btn-primary { background: var(--ui-accent); color: var(--ui-surface); border-color: var(--ui-accent); } .ui-btn-primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: var(--ui-surface); } /* 次要按钮 - 白色背景，灰色边框，黑色文字 */ .ui-btn-secondary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); } .ui-btn-secondary:hover { background: var(--ui-surface-2); border-color: var(--ui-accent); } /* 幽灵按钮 - 透明背景 */ .ui-btn-ghost { background: transparent; border-color: transparent; color: var(--ui-text); } .ui-btn-ghost:hover { background: rgba(0,0,0,0.03); } html[data-theme="dark"] .ui-btn-ghost:hover { background: rgba(255,255,255,0.06); } /* 危险按钮 - 红色 */ .ui-btn-danger { background: var(--ui-danger); color: var(--ui-surface); border-color: var(--ui-danger); } .ui-btn-danger:hover { background: #a93226; border-color: #a93226; } /* 图标按钮 */ .ui-btn-icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; } .ui-btn-icon.ui-btn-sm { width: 32px; height: 32px; } .ui-btn-icon.ui-btn-lg { width: 48px; height: 48px; } /* 禁用状态 */ .ui-btn[disabled], .ui-btn.is-disabled { opacity: 0.55; pointer-events: none; cursor: not-allowed; } /* ========================================================= Cards ========================================================= */ .ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: none; /* 关键：默认无阴影 */ } /* 只有需要"浮层感"的卡片才加 */ .ui-card.is-elevated { box-shadow: var(--ui-shadow-sm); } .ui-card-header { padding: 14px 16px; border-bottom: 1px solid var(--ui-border-2); display: flex; align-items: center; justify-content: space-between; } .ui-card-title { font-weight: 800; } .ui-card-body { padding: 16px; } .ui-card-footer { padding: 14px 16px; border-top: 1px solid var(--ui-border-2); display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .ui-empty { padding: 28px; text-align: center; color: var(--ui-text-2); } /* ========================================================= Forms ========================================================= */ .input, .textarea, .select select { background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); color: var(--ui-text); } .input:focus, .textarea:focus, .select select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-input-focus-ring); } /* Label - 严格遵循设计规范 11px、font-weight 700、letter-spacing 0.1em */ .label { display: block; font-size: var(--font-size-xs, 11px); font-weight: 700; color: var(--ui-text-2); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; line-height: 1.4; } .label .required { color: var(--ui-danger); font-weight: 400; } .ui-field { margin-bottom: 16px; } .ui-field:last-child { margin-bottom: 0; } .ui-help { margin-top: 6px; font-size: var(--font-size-sm, 12px); color: var(--ui-text-3); } .ui-error { color: var(--ui-danger); font-size: var(--font-size-sm); margin-top: 6px; } /* ========================================================= Skeleton ========================================================= */ @keyframes uiPulse { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } } .ui-skeleton { background: var(--ui-skeleton); border-radius: 10px; animation: uiPulse 1.35s ease-in-out infinite; } /* 常用尺寸组合 */ .ui-skeleton.line { height: 12px; } .ui-skeleton.line.sm { height: 10px; } .ui-skeleton.line.lg { height: 14px; } .ui-skeleton.block { height: 48px; } .ui-skeleton.card { height: 120px; } .ui-skeleton.w-30 { width: 30%; } .ui-skeleton.w-50 { width: 50%; } .ui-skeleton.w-70 { width: 70%; } .ui-skeleton.w-100 { width: 100%; } /* ========================================================= Modal ========================================================= */ /* Modal backdrop */ .modal-background { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); } /* Modal card container */ .ui-modal-card { border-radius: var(--ui-radius); overflow: hidden; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); animation: uiModalFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; max-height: 90vh; } @keyframes uiModalFadeIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Modal header */ .ui-modal-head { background: var(--ui-surface); border-bottom: 1px solid var(--ui-border-2); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .ui-modal-head .modal-card-title { font-size: var(--font-size-md); font-weight: 600; color: var(--ui-text); margin: 0; } /* Modal body */ .ui-modal-body { background: var(--ui-surface); padding: 20px; overflow-y: auto; flex: 1; } /* Modal footer */ .ui-modal-foot { background: var(--ui-surface); border-top: 1px solid var(--ui-border-2); padding: 16px 20px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-shrink: 0; } /* Unified modal close button */ .ui-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--ui-radius-xs); background: transparent; color: var(--ui-text-2); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; flex-shrink: 0; } .ui-modal-close:hover { background: var(--ui-surface-2); color: var(--ui-text); } .ui-modal-close .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Override Bulma's default delete button when used as modal close */ .ui-modal-head .delete { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; border-radius: var(--ui-radius-xs); background: transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .ui-modal-head .delete::before, .ui-modal-head .delete::after { background-color: var(--ui-text-2); } .ui-modal-head .delete:hover { background: var(--ui-surface-2); } .ui-modal-head .delete:hover::before, .ui-modal-head .delete:hover::after { background-color: var(--ui-text); } /* Modal without footer (single section modals) */ .ui-modal-card > .ui-modal-body:last-child { border-bottom-left-radius: var(--ui-radius); border-bottom-right-radius: var(--ui-radius); } /* Loading state inside modal */ .ui-modal-body .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--ui-text-2); } .ui-modal-body .loading-spinner { width: 24px; height: 24px; border: 2px solid var(--ui-border); border-top-color: var(--ui-accent); border-radius: 50%; animation: uiSpin 0.8s linear infinite; } .ui-modal-body .loading-text { margin-top: 12px; font-size: var(--font-size-sm); color: var(--ui-text-2); } @keyframes uiSpin { to { transform: rotate(360deg); } } /* ========================================================= Dropdown ========================================================= */ .dropdown-content { border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-sm); background: var(--ui-surface); } .dropdown-item { padding: 10px 12px; color: var(--ui-text); } .dropdown-item:hover { background: rgba(0,0,0,0.03); } html[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.06); } /* ========================================================= Tables ========================================================= */ .table { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; } .table thead th { color: var(--ui-text-2); font-weight: 800; border-bottom: 1px solid var(--ui-border-2); background: var(--ui-surface-2); } .table tbody tr:hover { background: rgba(0,0,0,0.02); } html[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,0.04); } /* ========================================================= Workspace Layouts ========================================================= */ /* Lyrics Workspace - Left/Right Layout */ .lyrics-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: calc(100vh - 60px); background: var(--ui-border); } .input-panel, .result-panel { background: var(--ui-surface); overflow-y: auto; padding: 24px; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-border); } .panel-header h2 { font-size: var(--font-size-xl); font-weight: 600; color: var(--ui-text); margin: 0; } .panel-subtitle { font-size: var(--font-size-sm); color: var(--ui-text-3); margin-top: 4px; } /* Analyze Workspace */ .analyze-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: calc(100vh - 60px); background: var(--ui-border); } /* Music Workspace */ .music-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: calc(100vh - 60px); background: var(--ui-border); } @media (max-width: 1024px) { .lyrics-workspace, .analyze-workspace, .music-workspace { grid-template-columns: 1fr; height: auto; } .input-panel, .result-panel { min-height: 400px; } } /* ========================================================= Hotlist Components (热门雷达) ========================================================= */ .hotlist-workspace { padding: 24px; max-width: 1200px; margin: 0 auto; } /* Hotlist Header */ .hotlist-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ui-border); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; } .hotlist-header-main { flex: 1; min-width: 200px; } .hotlist-page-title { font-size: var(--font-size-xxl); font-weight: 600; color: var(--ui-text); margin: 0 0 8px 0; } .hotlist-page-subtitle { font-size: var(--font-size-xs); color: var(--ui-text-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin: 0 0 12px 0; } /* Hotlist Content */ .hotlist-content { min-height: 400px; } /* Hotlist Item */ .hotlist-item { display: flex; flex-wrap: wrap; align-items: center; padding: 16px; margin-bottom: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .hotlist-item:hover { border-color: var(--ui-accent); } /* Hotlist Rank */ .hotlist-rank { width: 48px; min-width: 48px; text-align: center; font-size: var(--font-size-xl); font-weight: 700; color: var(--ui-text-2); margin-right: 16px; font-variant-numeric: tabular-nums; } .hotlist-rank.top-1 { color: var(--ui-accent); } .hotlist-rank.top-2 { color: var(--ui-text); } .hotlist-rank.top-3 { color: var(--ui-text); } /* Hotlist Cover */ .hotlist-cover { width: 64px; height: 64px; min-width: 64px; border-radius: var(--ui-radius-xs); overflow: hidden; background: var(--ui-surface-2); margin-right: 16px; display: flex; align-items: center; justify-content: center; } .hotlist-cover img { width: 100%; height: 100%; object-fit: cover; } .hotlist-cover-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ui-text-3); } .hotlist-cover-placeholder .material-symbols-outlined { font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Hotlist Info */ .hotlist-info { flex: 1; min-width: 0; margin-right: 16px; display: flex; flex-direction: column; justify-content: center; } .hotlist-song-title { font-size: var(--font-size-md); font-weight: 500; color: var(--ui-text); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hotlist-author { font-size: var(--font-size-sm); color: var(--ui-text-3); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hotlist-stats { display: flex; gap: 16px; font-size: var(--font-size-xs); color: var(--ui-text-3); } .hotlist-play-count { color: var(--ui-text-3); } /* Hotlist Actions */ .hotlist-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .hotlist-play-btn, .hotlist-lyrics-btn { display: inline-flex; align-items: center; gap: 8px; } .hotlist-play-btn .material-symbols-outlined, .hotlist-lyrics-btn .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* Hotlist Audio Player */ .hotlist-audio-player { width: 100%; margin-top: 12px; flex-basis: 100%; order: 5; } /* Hotlist Lyrics */ .hotlist-lyrics { width: 100%; margin-top: 16px; padding: 16px; background: var(--ui-surface-2); border-radius: var(--ui-radius-xs); border: 1px solid var(--ui-border-2); flex-basis: 100%; order: 10; } .hotlist-lyrics-content { max-height: 300px; overflow-y: auto; line-height: 1.8; font-size: var(--font-size-sm); color: var(--ui-text); } .lrc-line { padding: 4px 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .lrc-line:hover { background: rgba(0, 0, 0, 0.03); } html[data-theme="dark"] .lrc-line:hover { background: rgba(255, 255, 255, 0.05); } .lrc-loading, .lrc-empty, .lrc-error { text-align: center; padding: 24px; color: var(--ui-text-3); font-size: var(--font-size-sm); } .lrc-error { color: var(--ui-danger); } /* Hotlist Pagination */ .hotlist-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ui-border); } .pagination-info { font-size: var(--font-size-sm); color: var(--ui-text-2); font-variant-numeric: tabular-nums; } /* Quota Display */ .quota-display { display: flex; gap: 24px; flex-wrap: wrap; } .quota-item { display: flex; align-items: center; gap: 8px; } .quota-label { font-size: var(--font-size-xs); color: var(--ui-text-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .quota-value { font-size: var(--font-size-sm); color: var(--ui-text); font-weight: 500; font-variant-numeric: tabular-nums; } /* Loading State */ .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; gap: 16px; } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--ui-border); border-top-color: var(--ui-accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: var(--font-size-sm); color: var(--ui-text-2); } /* Error Message */ .error-message { padding: 16px; background: rgba(192, 57, 43, 0.1); border: 1px solid var(--ui-danger); border-radius: var(--ui-radius-xs); color: var(--ui-danger); font-size: var(--font-size-sm); margin-bottom: 16px; } /* Empty State */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; text-align: center; } /* Material Symbols全局设置 - 遵循设计规范 */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .empty-icon { font-size: 48px; color: var(--ui-text-3); margin-bottom: 16px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .empty-text { font-size: var(--font-size-base); color: var(--ui-text); font-weight: 600; margin-bottom: 8px; } .empty-hint { font-size: var(--font-size-sm); color: var(--ui-text-2); line-height: 1.5; } /* Responsive - Hotlist */ @media (max-width: 768px) { .hotlist-workspace { padding: 16px; } .hotlist-header { flex-direction: column; } .hotlist-item { padding: 12px; } .hotlist-rank { width: 36px; min-width: 36px; font-size: var(--font-size-lg); margin-right: 12px; } .hotlist-cover { width: 48px; height: 48px; min-width: 48px; margin-right: 12px; } .hotlist-actions { width: 100%; margin-top: 12px; justify-content: flex-end; } .quota-display { flex-direction: column; gap: 8px; } }