/** * training-ui.css — 跃创年轮训练插件统一UI规范 * * 使用方式：每个插件在 中引入此文件， * 然后通过 :root { --accent: #plugin色 } 覆盖主色。 * * 插件只需定义自己的特有样式，通用组件全部由此文件提供。 */ /* ===== 1. 基础变量 ===== */ :root { /* 可被插件覆盖的主题色 */ --accent: #F97316; --accent-dim: rgba(249,115,22,0.15); /* 深色背景体系 */ --bg: #0A1628; --bg2: #0F1E33; --bg3: #162840; /* 文字 */ --text: #ECF0F5; --text2: #8A9BB5; --text3: #5A6A80; /* 语义色 */ --green: #3dba6a; --red: #FF6B6B; --yellow: #FFD93D; --blue: #38BDF8; /* 圆角 */ --r: 16px; --r-sm: 12px; --r-xs: 8px; /* 字体 */ --font: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif; } /* ===== 2. 全局重置 ===== */ *{margin:0;padding:0;box-sizing:border-box} body{ font-family:var(--font); background:var(--bg); color:var(--text); max-width:480px; margin:0 auto; min-height:100vh; overflow-x:hidden; -webkit-tap-highlight-color:transparent; } /* ===== 3. 导航栏 ===== */ .top-bar{ display:flex; align-items:center; padding:12px 16px; background:var(--bg2); position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,0.05); } .top-bar .back{ font-size:22px; cursor:pointer; color:var(--text2); width:36px; transition:transform 0.15s; background:none; border:none; } .top-bar .back:active{transform:scale(0.92)} .top-bar .title{ flex:1; text-align:center; font-size:16px; font-weight:700; } .top-bar .title span{color:var(--accent)} /* ===== 4. 按钮 ===== */ .btn-primary{ width:100%; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#000)); border:none; border-radius:var(--r-sm); padding:14px 16px; font-size:15px; font-weight:700; color:#fff; cursor:pointer; transition:transform 0.15s; font-family:inherit; } .btn-primary:active{transform:scale(0.98)} .btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none} .btn-secondary{ width:100%; background:var(--bg3); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-sm); padding:12px 16px; font-size:14px; color:var(--text); cursor:pointer; margin-top:8px; transition:transform 0.15s; font-family:inherit; } .btn-secondary:active{transform:scale(0.98)} /* ===== 5. 选项按钮 ===== */ .options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; } .option-btn{ background:var(--bg3); border:2px solid rgba(255,255,255,0.08); border-radius:var(--r-sm); padding:14px 12px; text-align:center; cursor:pointer; transition:all 0.2s; font-size:14px; color:var(--text); font-family:inherit; min-height:48px; display:flex; align-items:center; justify-content:center; } .option-btn:active{transform:scale(0.96)} .option-btn.selected{border-color:var(--accent);background:var(--accent-dim)} .option-btn.correct{border-color:var(--green);background:rgba(52,211,153,0.15);pointer-events:none} .option-btn.wrong{border-color:var(--red);background:rgba(255,107,107,0.15);pointer-events:none} /* ===== 6. 进度条 ===== */ .progress-bar{ width:100%; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin-bottom:16px; overflow:hidden; } .progress-bar .fill{ height:100%; background:var(--accent); border-radius:3px; transition:width 0.6s cubic-bezier(0.4,0,0.2,1); } /* ===== 7. 卡片/模块选择 ===== */ .mod-card{ background:var(--bg3); border:1px solid rgba(255,255,255,0.06); border-radius:var(--r); padding:16px; margin-bottom:12px; display:flex; gap:14px; align-items:center; cursor:pointer; transition:all 0.2s; } .mod-card:active{transform:scale(0.98)} .mod-card .mc-icon{ width:44px;height:44px; border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; font-size:22px; background:var(--accent-dim); flex-shrink:0; } .mod-card .mc-info{flex:1} .mod-card .mc-name{font-size:15px;font-weight:600} .mod-card .mc-desc{font-size:12px;color:var(--text2);margin-top:2px} .mod-card .mc-diff{ font-size:10px;padding:2px 8px;border-radius:8px;font-weight:700; } .mc-diff.easy{background:rgba(52,211,153,0.2);color:var(--green)} .mc-diff.medium{background:rgba(255,217,61,0.2);color:var(--yellow)} .mc-diff.hard{background:rgba(255,107,107,0.2);color:var(--red)} /* ===== 8. 结果页 ===== */ .result-score{ font-size:56px; font-weight:900; color:var(--accent); text-align:center; animation:scorePop 0.6s cubic-bezier(0.175,0.885,0.32,1.275); margin-bottom:16px; } @keyframes scorePop{ from{opacity:0;transform:scale(0.3)} 60%{transform:scale(1.1)} to{opacity:1;transform:scale(1)} } .result-stars{ font-size:32px; text-align:center; margin-bottom:16px; animation:starsIn 0.8s ease 0.3s both; } @keyframes starsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .result-detail{ background:var(--bg3); border-radius:var(--r); padding:16px; text-align:left; margin-bottom:16px; border:1px solid rgba(255,255,255,0.06); } .result-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:14px; } .result-row:last-child{border:none} .result-row .label{color:var(--text2)} .result-row .value{font-weight:600} /* ===== 9. 反馈气泡 ===== */ .feedback{ background:var(--bg3); border-radius:var(--r); padding:16px; margin-bottom:16px; text-align:center; display:none; border:1px solid rgba(255,255,255,0.08); animation:fbIn 0.3s ease; } .feedback.show{display:block} @keyframes fbIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}} .fb-emoji{font-size:36px;margin-bottom:8px} .fb-text{font-size:14px;line-height:1.7;color:var(--text2)} /* ===== 10. Toast ===== */ .toast{ position:fixed; top:20px;left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:#fff; padding:10px 20px; border-radius:20px; font-size:13px; z-index:9999; animation:toastIn 0.3s ease,toastOut 0.3s ease 2.2s forwards; pointer-events:none; } @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} @keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(-10px)}} /* ===== 11. 星星飞入 ===== */ .star-fly{ position:fixed;font-size:28px;z-index:9999;pointer-events:none; animation:starFly 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards; } @keyframes starFly{ 0%{opacity:1;transform:scale(1)} 40%{opacity:1;transform:scale(1.5) translateY(-30px)} 100%{opacity:0;transform:scale(0.5) translateY(-120px)} } /* ===== 12. 页面过渡 ===== */ .page-enter{animation:pageEnter 0.4s ease} @keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* ===== 13. SAFE时间管理 ===== */ .safe-timer{ position:fixed;bottom:0;left:50%;transform:translateX(-50%); width:100%;max-width:480px; background:var(--bg2); padding:6px 16px; z-index:90; border-top:1px solid rgba(255,255,255,0.06); } .safe-fill{ height:4px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--green)); transition:width 1s linear; } .safe-text{ font-size:10px;color:var(--text2);text-align:center;margin-top:3px; } .rest-overlay{ position:fixed;inset:0;z-index:9990; background:rgba(0,0,0,0.92); display:flex;flex-direction:column; align-items:center;justify-content:center; color:#fff; } .rest-countdown{font-size:64px;font-weight:900;margin:20px 0} .rest-btn{ background:var(--accent);color:#fff;border:none; border-radius:var(--r-sm);padding:14px 40px; font-size:16px;font-weight:700;cursor:pointer; animation:restBounce 1s ease infinite; font-family:inherit; } @keyframes restBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} /* ===== 14. 无障碍 ===== */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} @media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}} /* ===== 15. 滚动条 ===== */ ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px} /* ===== 16. 骨架屏 (Skeleton Loading) ===== */ .skeleton{position:relative;overflow:hidden;background:var(--bg3);border-radius:8px} .skeleton::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);animation:skeletonShimmer 1.5s infinite} @keyframes skeletonShimmer{to{left:100%}} .skeleton-text{height:14px;margin:8px 0;border-radius:4px} .skeleton-text.short{width:60%} .skeleton-text.medium{width:80%} .skeleton-title{height:20px;width:40%;margin:12px 0;border-radius:4px} .skeleton-circle{width:40px;height:40px;border-radius:50%} .skeleton-card{height:120px;margin:12px 0;border-radius:12px} .skeleton-row{display:flex;gap:12px;align-items:center;padding:12px 0} /* ===== 17. 离线提示 ===== */ .offline-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:linear-gradient(135deg,#D97706,#B45309);color:#fff;text-align:center;padding:8px 16px;font-size:13px;font-weight:600;transform:translateY(-100%);transition:transform .3s ease;display:flex;align-items:center;justify-content:center;gap:6px} .offline-banner.show{transform:translateY(0)} .offline-banner .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:offlinePulse 1.5s infinite} @keyframes offlinePulse{0%,100%{opacity:1}50%{opacity:0.3}} /* ===== 18. 错误边界 ===== */ .error-boundary{display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;min-height:200px} .error-boundary.show{display:flex} .error-boundary .error-icon{font-size:48px;margin-bottom:16px;opacity:0.6} .error-boundary .error-msg{color:var(--text2);font-size:14px;margin-bottom:16px;max-width:300px} .error-boundary .retry-btn{background:var(--accent);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600} .error-boundary .retry-btn:active{transform:scale(0.95)} /* ===== 19. 空状态 ===== */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center} .empty-state .empty-icon{font-size:56px;margin-bottom:16px;opacity:0.5} .empty-state .empty-title{color:var(--text);font-size:16px;font-weight:600;margin-bottom:8px} .empty-state .empty-desc{color:var(--text2);font-size:13px;max-width:260px} /* ===== 20. 页面切换动画 ===== */ .page-enter{animation:pageEnter .3s ease} @keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}