/** * Riddleling 管理后台 — Apple Human Interface 风格 * 清新、自然、轻质感、高级感（系统蓝 + 中性灰 + 毛玻璃卡片） * 使用：在上加 class="apple-admin"，且本文件在页面内联样式之后加载 */ body.apple-admin { --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --apple-bg: #f2f2f7; --apple-bg-elevated: rgba(255, 255, 255, 0.78); --apple-label: #1c1c1e; --apple-secondary-label: #3c3c43; --apple-tertiary: #8e8e93; --apple-separator: rgba(60, 60, 67, 0.12); --apple-blue: #007aff; --apple-blue-pressed: #0062d6; --apple-green: #34c759; --apple-orange: #ff9500; --apple-red: #ff3b30; --apple-radius-lg: 16px; --apple-radius-md: 12px; --apple-radius-sm: 10px; --apple-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.06); --apple-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08); --apple-blur: saturate(180%) blur(20px); } body.apple-admin { font-family: var(--apple-font); background: linear-gradient(165deg, #e8eef5 0%, #f2f2f7 42%, #ebebf0 100%) fixed !important; color: var(--apple-label) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.apple-admin .container { max-width: 1440px; padding: 20px 18px; } /* 顶栏卡片 */ body.apple-admin .header, body.apple-admin .actions-panel, body.apple-admin .right-panel, body.apple-admin .practice-panel, body.apple-admin .courses-section { background: var(--apple-bg-elevated) !important; backdrop-filter: var(--apple-blur); -webkit-backdrop-filter: var(--apple-blur); border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-lg) !important; box-shadow: var(--apple-shadow-soft) !important; } body.apple-admin .header h1 { color: var(--apple-label) !important; font-weight: 600; letter-spacing: -0.02em; font-size: 1.65em !important; } body.apple-admin .header p, body.apple-admin .right-panel h3, body.apple-admin .actions-panel h3 { color: var(--apple-secondary-label) !important; font-weight: 500; } /* 快捷操作格子 */ body.apple-admin .action-item { background: rgba(255, 255, 255, 0.55) !important; border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-md) !important; transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.22s ease, background 0.22s ease !important; } body.apple-admin .action-item:hover { background: rgba(0, 122, 255, 0.1) !important; color: var(--apple-blue) !important; transform: translateY(-1px) scale(1.02); box-shadow: var(--apple-shadow-hover); } body.apple-admin .action-item h4 { color: inherit; font-weight: 600; } /* 统计高亮格 */ body.apple-admin .action-item.stat-item { background: linear-gradient(145deg, #007aff 0%, #0051d5 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35); } body.apple-admin .action-item.stat-item:hover { background: linear-gradient(145deg, #0a84ff 0%, #0062d6 100%) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4); } body.apple-admin .stat-item .stat-number { color: #fff !important; } /* 按钮 — 系统蓝，少渐变 */ body.apple-admin .btn, body.apple-admin .btn-chapter { background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%) !important; color: #fff !important; border: none !important; border-radius: var(--apple-radius-sm) !important; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important; } body.apple-admin .btn:hover, body.apple-admin .btn-chapter:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35); transform: translateY(-1px); } body.apple-admin .btn-secondary { background: linear-gradient(180deg, #ff9f0a 0%, #ff9500 100%) !important; } body.apple-admin .btn-success { background: linear-gradient(180deg, #30d158 0%, #34c759 100%) !important; } body.apple-admin .speed-test-btn { background: linear-gradient(180deg, #30d158 0%, #28a745 100%) !important; border-radius: var(--apple-radius-sm) !important; } /* 章节卡片 */ body.apple-admin .chapter-card { background: rgba(255, 255, 255, 0.65) !important; border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-md) !important; box-shadow: var(--apple-shadow-soft) !important; } body.apple-admin .chapter-card:hover { border-color: rgba(0, 122, 255, 0.35) !important; box-shadow: var(--apple-shadow-hover) !important; transform: translateY(-2px); } body.apple-admin .chapter-icon { background: linear-gradient(145deg, #5ac8fa 0%, #007aff 100%) !important; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35); } body.apple-admin .chapter-info h4 { color: var(--apple-label) !important; font-weight: 600; } body.apple-admin .chapter-info p { color: var(--apple-tertiary) !important; } /* 课程列表 */ body.apple-admin .course-item { background: rgba(255, 255, 255, 0.8) !important; border-left: 3px solid var(--apple-blue) !important; border-radius: var(--apple-radius-sm) !important; } body.apple-admin .course-title { color: var(--apple-label) !important; } /* 语言选择 */ body.apple-admin .lang-btn.active { background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); } /* 状态与错误 */ body.apple-admin .loading { color: var(--apple-secondary-label) !important; } body.apple-admin .error { background: rgba(255, 59, 48, 0.1) !important; color: var(--apple-red) !important; border: 0.5px solid rgba(255, 59, 48, 0.25); border-radius: var(--apple-radius-sm) !important; } /* 右侧面板高度与滚动更自然 */ body.apple-admin .right-panel { height: min(680px, calc(100vh - 140px)); } /* 链接色 */ body.apple-admin a { color: var(--apple-blue); } body.apple-admin a:hover { opacity: 0.85; } /* ========== 子页面通用（练习管理、课程编辑等） ========== */ body.apple-admin .back-btn, body.apple-admin .home-btn { background: var(--apple-bg-elevated) !important; backdrop-filter: var(--apple-blur); -webkit-backdrop-filter: var(--apple-blur); border: 0.5px solid var(--apple-separator) !important; color: var(--apple-blue) !important; border-radius: var(--apple-radius-md) !important; box-shadow: var(--apple-shadow-soft) !important; font-weight: 600; } body.apple-admin .back-btn:hover, body.apple-admin .home-btn:hover { background: rgba(0, 122, 255, 0.12) !important; color: var(--apple-blue-pressed) !important; } body.apple-admin .practice-header, body.apple-admin .quick-actions, body.apple-admin .create-panel, body.apple-admin .list-panel, body.apple-admin .main-content > div { background: var(--apple-bg-elevated) !important; backdrop-filter: var(--apple-blur); -webkit-backdrop-filter: var(--apple-blur); border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-lg) !important; box-shadow: var(--apple-shadow-soft) !important; } body.apple-admin .practice-info h1, body.apple-admin .create-panel h3, body.apple-admin .list-panel h3 { color: var(--apple-label) !important; } body.apple-admin .practice-info p, body.apple-admin .stat-label { color: var(--apple-secondary-label) !important; } body.apple-admin .stat-number { color: var(--apple-blue) !important; } body.apple-admin .practice-icon { background: linear-gradient(145deg, #5ac8fa 0%, #007aff 100%) !important; box-shadow: 0 2px 10px rgba(0, 122, 255, 0.35); } body.apple-admin .form-group input, body.apple-admin .form-group select, body.apple-admin .form-group textarea { border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-sm) !important; } body.apple-admin .form-group input:focus, body.apple-admin .form-group select:focus, body.apple-admin .form-group textarea:focus { border-color: var(--apple-blue) !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); } /* 课程编辑页 */ body.apple-admin .combined-header, body.apple-admin .practice-management, body.apple-admin .practice-types, body.apple-admin .practice-list { background: var(--apple-bg-elevated) !important; backdrop-filter: var(--apple-blur); -webkit-backdrop-filter: var(--apple-blur); border: 0.5px solid var(--apple-separator) !important; border-radius: var(--apple-radius-lg) !important; box-shadow: var(--apple-shadow-soft) !important; } body.apple-admin .course-icon { background: linear-gradient(145deg, #5ac8fa 0%, #007aff 100%) !important; box-shadow: 0 2px 10px rgba(0, 122, 255, 0.35); } body.apple-admin .course-info h1 { color: var(--apple-label) !important; } body.apple-admin .course-info p { color: var(--apple-secondary-label) !important; } body.apple-admin .btn { background: linear-gradient(180deg, #0a84ff 0%, #007aff 100%) !important; border-radius: var(--apple-radius-sm) !important; }