/*
* 爱刷题设计令牌与组件样式
* 三套主题由 切换；组件只引用令牌，不写死颜色。
*/
/* ===== 1. 设计令牌 ===== */
:root,
[data-theme='blue'] {
color-scheme: light;
--color-bg: #f5f7fa;
--color-surface: #ffffff;
--color-surface-2: #f0f2f5;
--color-text: #1f2329;
--color-text-2: #646a73;
--color-border: #e4e8ee;
--color-primary: #1890ff;
--color-primary-soft: #e8f4ff;
--color-on-primary: #ffffff;
--color-success: #18b566;
--color-success-soft: #e8fff3;
--color-warning: #ff9f0a;
--color-warning-soft: #fff7e6;
--color-info: #1890ff;
--color-info-soft: #f0faff;
--color-danger: #f53f3f;
--color-danger-soft: #ffece8;
--radius-card: 12px;
--radius-btn: 10px;
--radius-chip: 999px;
--shadow-card: 0 2px 8px rgba(31, 35, 41, 0.06);
--transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme='paper'] {
color-scheme: light;
--color-bg: #faf6ef;
--color-surface: #fffdf8;
--color-surface-2: #f4eee2;
--color-text: #3d3427;
--color-text-2: #7a6f5d;
--color-border: #ece2cf;
--color-primary: #3a7d5c;
--color-primary-soft: #eef6f0;
--color-on-primary: #ffffff;
--color-success: #3a7d5c;
--color-success-soft: #eef6f0;
--color-warning: #c07a2d;
--color-warning-soft: #faf1e2;
--color-info: #8a6d3b;
--color-info-soft: #f7f1e3;
--color-danger: #c0392b;
--color-danger-soft: #f9e9e7;
--shadow-card: 0 2px 8px rgba(61, 52, 39, 0.08);
}
[data-theme='dark'] {
color-scheme: dark;
--color-bg: #0f1115;
--color-surface: #1a1d24;
--color-surface-2: #232733;
--color-text: #e8eaed;
--color-text-2: #8b93a1;
--color-border: #2c313c;
--color-primary: #4d9fff;
--color-primary-soft: #152536;
--color-on-primary: #0f1115;
--color-success: #34c77b;
--color-success-soft: #10281c;
--color-warning: #ffb020;
--color-warning-soft: #2b2110;
--color-info: #4d9fff;
--color-info-soft: #152536;
--color-danger: #ff5c5c;
--color-danger-soft: #331518;
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* ===== 2. 基础 ===== */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
-webkit-tap-highlight-color: transparent;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
font-size: 16px;
line-height: 1.6;
transition: background 0.25s ease, color 0.25s ease;
}
button {
font-family: inherit;
}
/* 应用列：移动端全宽，桌面端居中限宽 */
#el {
max-width: 520px;
margin: 0 auto;
padding: 0 16px 110px;
}
/* ===== 3. 顶栏 ===== */
.topbar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0;
background: var(--color-bg);
}
.topbar-title {
flex: 1;
margin: 0;
font-size: 17px;
font-weight: 700;
text-align: center;
}
.topbar-spacer {
width: 40px;
flex: none;
}
.icon-btn {
width: 40px;
height: 40px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-btn);
background: transparent;
color: var(--color-text);
cursor: pointer;
transition: var(--transition-smooth);
}
.icon-btn:hover {
background: var(--color-surface-2);
}
/* ===== 4. 卡片 / 首页题库卡 / 模式卡 ===== */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.bank-card {
padding: 16px;
margin-bottom: 12px;
cursor: pointer;
transition: var(--transition-smooth);
}
.bank-card:hover {
border-color: var(--color-primary);
}
.bank-name {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.bank-desc {
margin: 0;
font-size: 13px;
color: var(--color-text-2);
line-height: 1.6;
}
.empty-tip {
text-align: center;
color: var(--color-text-2);
padding: 40px 0;
}
.mode-list {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 8px;
}
.mode-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
cursor: pointer;
transition: var(--transition-smooth);
}
.mode-card:hover {
border-color: var(--color-primary);
}
.mode-name {
font-size: 16px;
font-weight: 600;
}
.mode-arrow {
color: var(--color-text-2);
font-size: 20px;
}
/* ===== 5. 进度区 ===== */
.progress-wrap {
padding: 4px 0 12px;
}
.progress-text {
font-size: 13px;
color: var(--color-text-2);
letter-spacing: 0.05em;
}
.progress-bar {
height: 6px;
background: var(--color-surface-2);
border-radius: 3px;
margin-top: 8px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}
/* ===== 6. 题目卡片与选项 ===== */
.qcard {
padding: 16px;
margin-bottom: 16px;
}
.qcard-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.chip {
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 12px;
border-radius: var(--radius-chip);
padding: 2px 10px;
flex: none;
}
.qtitle {
margin: 0;
font-size: 17px;
font-weight: 600;
line-height: 1.7;
}
.opts {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 选项：触控高度 >= 48px */
.opt {
min-height: 48px;
display: flex;
align-items: center;
padding: 8px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
color: var(--color-text);
font-size: 16px;
line-height: 1.5;
cursor: pointer;
transition: var(--transition-smooth);
}
.opt.active {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 600;
}
/* 作答后：正确项 / 误选项高亮 */
.opt.right {
border-color: var(--color-success);
background: var(--color-success-soft);
color: var(--color-success);
}
.opt.miss {
border-color: var(--color-danger);
background: var(--color-danger-soft);
color: var(--color-danger);
}
/* ===== 7. 结果提示条与答案解析 ===== */
.banner {
margin-top: 14px;
padding: 10px 14px;
border-radius: var(--radius-btn);
font-size: 14px;
border: 1px solid;
}
.banner.success {
color: var(--color-success);
background: var(--color-success-soft);
border-color: var(--color-success);
}
.banner.warning {
color: var(--color-warning);
background: var(--color-warning-soft);
border-color: var(--color-warning);
}
.banner.info {
color: var(--color-info);
background: var(--color-info-soft);
border-color: var(--color-info);
}
.answer {
margin-top: 12px;
white-space: pre-line;
font-size: 15px;
}
.analysis {
margin-top: 8px;
color: var(--color-text-2);
font-size: 14px;
}
/* 解析三段：对项/错项/依据 各占一行，标签按语义着色 */
.analysis-line {
margin-top: 6px;
}
.analysis-line:first-child {
margin-top: 0;
}
.analysis-tag {
font-weight: 600;
}
.tag-right {
color: var(--color-primary);
}
.tag-wrong {
color: var(--color-warning);
}
.tag-base {
color: var(--color-text);
}
.tag-memory {
color: var(--color-success);
}
/* ===== 8. 按钮与吸底操作区 ===== */
.btn {
appearance: none;
border: 1px solid transparent;
border-radius: var(--radius-btn);
font-size: 16px;
padding: 10px 18px;
min-height: 44px;
cursor: pointer;
transition: var(--transition-smooth);
color: var(--color-text);
background: var(--color-surface-2);
}
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-on-primary);
font-weight: 600;
}
.btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-ghost {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
.btn-block {
display: block;
width: 100%;
}
/* 错题模式「我已学会」与「标记已学」次级按钮 */
.btn-learned {
margin: 0 0 12px;
background: var(--color-surface);
border-color: var(--color-success);
color: var(--color-success);
}
.btn-learned.on {
background: var(--color-success-soft);
}
.actionbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.actionbar-inner {
max-width: 520px;
margin: 0 auto;
display: flex;
gap: 12px;
}
.action-main {
flex: 1;
}
/* ===== 9. 完成统计页 ===== */
.result-view {
padding: 24px 16px;
margin-top: 12px;
text-align: center;
}
.result-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 16px;
}
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.result-cell {
background: var(--color-surface-2);
border-radius: var(--radius-btn);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.result-num {
font-size: 22px;
font-weight: 700;
}
.result-num.good {
color: var(--color-success);
}
.result-num.bad {
color: var(--color-danger);
}
.result-cap {
font-size: 12px;
color: var(--color-text-2);
}
.result-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ===== 10. 自定义练习底部抽屉 ===== */
.drawer-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 200;
}
.drawer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 201;
max-width: 520px;
margin: 0 auto;
background: var(--color-surface);
border-radius: 16px 16px 0 0;
padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.open {
transform: translateY(0);
}
.drawer-title {
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
}
.drawer-ok {
margin-top: 16px;
}
.custom-label {
margin: 12px 0 8px;
font-size: 14px;
color: var(--color-text-2);
}
.custom-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-btn {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-2);
border-radius: var(--radius-chip);
padding: 6px 14px;
font-size: 14px;
min-height: 36px;
cursor: pointer;
transition: var(--transition-smooth);
}
.chip-btn.active {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 600;
}
.chip-btn:disabled {
border-style: dashed;
border-color: var(--color-border);
background: var(--color-surface-2);
color: var(--color-text-2);
opacity: 0.55;
cursor: not-allowed;
}
/* ===== 11. 错题互通工具栏 ===== */
.sync-toolbar {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.sync-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
padding: 6px 12px;
min-height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius-chip);
background: var(--color-surface);
color: var(--color-text-2);
cursor: pointer;
transition: var(--transition-smooth);
}
.sync-btn:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
#importFile {
display: none;
}
/* ===== 12. 主题选择面板（theme.js 注入） ===== */
.tp-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.35);
}
.tp-panel {
position: fixed;
z-index: 301;
top: 56px;
right: 12px;
width: 240px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 8px;
}
.tp-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px;
border: none;
border-radius: var(--radius-btn);
background: transparent;
cursor: pointer;
text-align: left;
transition: var(--transition-smooth);
}
.tp-item:hover {
background: var(--color-surface-2);
}
.tp-item.active {
background: var(--color-primary-soft);
}
.tp-dot {
width: 28px;
height: 28px;
flex: none;
border-radius: 50%;
border: 1px solid var(--color-border);
}
.tp-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.tp-name {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
.tp-note {
font-size: 12px;
color: var(--color-text-2);
}
/* ===== 13. 全屏 Loading ===== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--color-bg);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: loading-spin 0.8s linear infinite;
margin-bottom: 12px;
}
@keyframes loading-spin {
to {
transform: rotate(360deg);
}
}
.loading-text {
color: var(--color-text-2);
font-size: 14px;
}
/* ===== 14. 切题过渡动画 ===== */
.qfade-enter-active,
.qfade-leave-active {
transition: opacity 0.18s ease, transform 0.18s ease;
}
.qfade-enter,
.qfade-leave-to {
opacity: 0;
transform: translateY(8px);
}
/* ===== 15. iView 保留组件主题化（$Message / $Modal.confirm） ===== */
.ivu-message-notice-content {
background: var(--color-surface) !important;
color: var(--color-text) !important;
box-shadow: var(--shadow-card) !important;
border-radius: var(--radius-btn) !important;
}
.ivu-modal-content {
background: var(--color-surface);
border-radius: var(--radius-card);
}
.ivu-modal-header {
border-bottom-color: var(--color-border);
}
.ivu-modal-header p,
.ivu-modal-confirm-body {
color: var(--color-text);
}
.ivu-modal-confirm-body .ivu-modal-confirm-content {
color: var(--color-text-2);
}
.ivu-modal-footer {
border-top-color: var(--color-border);
}
.ivu-btn-text {
color: var(--color-text-2);
}
.ivu-btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* ===== 16. 题号导航侧滑抽屉 ===== */
.drawer-side-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 200;
}
.drawer-side {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 201;
width: 78%;
max-width: 320px;
background: var(--color-surface);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
}
.drawer-side-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px 6px;
}
.drawer-side-title {
font-size: 15px;
font-weight: 700;
}
.drawer-side-close {
border: none;
background: transparent;
color: var(--color-text-2);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
}
.drawer-stats {
display: flex;
gap: 12px;
padding: 6px 14px 10px;
font-size: 12px;
color: var(--color-text-2);
}
.drawer-stats i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 4px;
}
.drawer-grid {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 14px;
display: grid;
grid-template-columns: repeat(5, 40px);
gap: 8px;
align-content: start;
justify-content: center;
}
/* 格子五态：答对/答错/已看/未答 + 当前题描边叠加 */
.cell {
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-2);
color: var(--color-text-2);
transition: var(--transition-smooth);
}
.cell.right {
background: var(--color-success);
color: #ffffff;
}
.cell.wrong {
background: var(--color-danger);
color: #ffffff;
}
.cell.seen {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.cell.selected {
border: 2px dashed var(--color-primary);
}
.cell.current {
border: 2px solid var(--color-primary);
}
.cell.idle.current {
background: var(--color-surface);
color: var(--color-primary);
font-weight: 700;
}
/* 预览条：吸抽屉底部 */
.drawer-preview {
border-top: 1px solid var(--color-border);
padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
}
.drawer-preview-head {
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 4px;
}
.drawer-preview-title {
font-size: 12px;
color: var(--color-text-2);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.drawer-preview-jump {
margin-top: 8px;
}
/* ===== 17. 空态页（错题/复习为空） ===== */
.empty-state {
padding: 48px 24px;
margin-top: 16px;
text-align: center;
}
.empty-state-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
}
.empty-state-desc {
font-size: 14px;
color: var(--color-text-2);
margin: 0 0 20px;
line-height: 1.6;
}
.empty-state-btn {
max-width: 240px;
margin: 0 auto;
}
/* ===== 18. 多设备同步（状态点 + 同步抽屉） ===== */
/* 顶栏同步状态点：叠加在同步图标按钮右上角 */
.sync-dot {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border);
border: 1.5px solid var(--color-surface);
pointer-events: none;
}
/* 状态配色：idle 灰 / syncing 主色呼吸 / synced 绿 / error 橙（绿橙为语义固定色） */
.sync-dot[data-status='syncing'] {
background: var(--color-primary);
animation: sync-pulse 1.1s ease-in-out infinite;
}
.sync-dot[data-status='synced'] { background: #52c41a; }
.sync-dot[data-status='error'] { background: #fa8c16; }
@keyframes sync-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.75); }
}
/* 承载状态点的图标按钮需要相对定位 */
.icon-btn.sync-entry { position: relative; }
/* 同步抽屉复用 §10 的 .drawer-mask / .drawer，此处只补内部排版 */
.sync-desc {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.7;
color: var(--color-text-2);
}
/* 同步码展示：大号等宽，便于口述与手输 */
.sync-code {
margin: 0 0 8px;
padding: 14px 12px;
text-align: center;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 28px;
font-weight: 700;
letter-spacing: 6px;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: var(--radius-btn);
word-break: break-all;
}
.sync-hint {
margin: 0 0 16px;
font-size: 12px;
color: var(--color-text-2);
text-align: center;
}
/* 输入同步码 */
.sync-input {
width: 100%;
margin-bottom: 12px;
padding: 11px 14px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 18px;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
outline: none;
box-sizing: border-box;
transition: var(--transition-smooth);
}
.sync-input:focus { border-color: var(--color-primary); }
/* 已绑定态的次要操作行 */
.sync-actions {
display: flex;
gap: 10px;
margin-top: 12px;
}
.sync-actions .btn { flex: 1; }
/* 解除绑定：次级按钮 + 警示色文字 */
.btn-ghost-danger {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: #fa8c16;
border-radius: var(--radius-btn);
padding: 10px 14px;
font-size: 14px;
min-height: 42px;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-ghost-danger:active { transform: scale(0.98); }
/* 上次同步时间 */
.sync-time {
margin: 12px 0 0;
font-size: 12px;
color: var(--color-text-2);
text-align: center;
}