/** * story-box.css — 故事盒子 + 教教我 通用样式 * * 用法：页面 中引用本文件后，通过 CSS 变量设置主题色： * * :root { * --story-accent: #e67e22; /* 主色（徽章、按钮、高亮） */ * --story-bg: #fff8f0; /* 故事卡背景 */ * --story-border: #f0d9b5; /* 故事卡边框 */ * --story-hover: #d35400; /* 按钮悬停 */ * --story-input-border: #d4a56a; /* 输入框边框 */ * --story-btn-text: #fff; /* 按钮文字色 */ * } * * 不设置则使用默认值（金色主题）。 */ :root { --story-accent: #e67e22; --story-bg: #fff8f0; --story-border: #f0d9b5; --story-hover: #d35400; --story-input-border: #d4a56a; --story-btn-text: #fff; --teach-accent: #667eea; } /* ===== 故事盒子 ===== */ .story-box { background: var(--story-bg); border: 2px solid var(--story-border); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .story-box .story-badge { font-size: 1.1rem; font-weight: 600; color: var(--story-accent); margin-bottom: 8px; } .story-box .story-text { font-size: 0.95rem; line-height: 1.8; color: #444; padding: 10px 14px; background: #fff; border-radius: 8px; border-left: 4px solid var(--story-border); margin-bottom: 14px; white-space: pre-wrap; } .story-box .story-extract { border-top: 1px dashed var(--story-border); padding-top: 12px; } .story-box .extract-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding: 6px 0; } .story-box .extract-item .extract-label { font-size: 0.92rem; font-weight: 500; color: #555; min-width: 80px; } .story-box .extract-item .extract-input { padding: 6px 12px; border: 2px solid var(--story-input-border); border-radius: 6px; font-size: 1rem; width: 80px; font-family: 'Consolas', monospace; } .story-box .extract-item .extract-input:focus { border-color: var(--story-accent); outline: none; } .story-box .extract-item .extract-input.correct { background: #d4edda; border-color: #27ae60; } .story-box .extract-item .extract-input.wrong { background: #fff5f5; border-color: #e74c3c; } .story-box .extract-item .extract-unit { font-size: 0.9rem; color: #888; } .story-box .extract-item .extract-hint-btn { padding: 3px 12px; border: 1px solid var(--story-accent); border-radius: 14px; background: #fff; color: var(--story-accent); font-size: 0.75rem; cursor: pointer; transition: all 0.2s; } .story-box .extract-item .extract-hint-btn:hover { background: var(--story-accent); color: var(--story-btn-text); } .story-box .extract-item .extract-hint-text { display: none; font-size: 0.82rem; color: var(--story-accent); margin: 2px 0 0 80px; width: 100%; } .story-box .extract-item .extract-hint-text.show { display: block; } .story-box .extract-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; } .story-box .extract-btn { padding: 8px 24px; background: var(--story-accent); color: var(--story-btn-text); border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; font-weight: 600; transition: background 0.2s; } .story-box .extract-btn:hover { background: var(--story-hover); } .story-box .extract-btn:disabled { background: #bbb; cursor: not-allowed; } .story-box .extract-feedback { font-size: 0.9rem; min-height: 1.4em; } .story-box .extract-feedback.correct { color: #27ae60; } .story-box .extract-feedback.wrong { color: #e74c3c; } .story-box .extract-done-badge { text-align: center; padding: 8px; background: #d4edda; border-radius: 8px; color: #155724; font-weight: 600; margin-bottom: 10px; } .extract-area-title { font-size: 0.95rem; font-weight: 500; color: #555; margin-bottom: 10px; } /* ===== 教教我安全出口 ===== */ .teach-me-area { margin: 6px 0 0 34px; } .teach-me-btn { padding: 3px 12px; border: 1px solid #ccc; border-radius: 12px; background: #fff; color: #999; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; } .teach-me-btn:hover { border-color: var(--teach-accent); color: var(--teach-accent); } .teach-me-btn.hidden { display: none; } .teach-me-content { margin-top: 8px; padding: 10px 14px; background: var(--story-bg); border: 1px solid var(--story-border); border-radius: 8px; font-size: 0.95rem; display: none; line-height: 1.7; } .teach-me-content.show { display: block; } .teach-me-content .tm-label { font-weight: 600; color: var(--story-accent); margin-bottom: 4px; } .teach-me-content .tm-answer { color: #27ae60; font-weight: 500; } /* ===== 输入框单位标签 ===== */ .unit-label { font-size: 0.9rem; color: #888; font-weight: 500; margin-left: 3px; } .unit-reminder { font-size: 0.78rem; color: var(--story-accent); font-weight: 400; display: block; margin-top: 2px; } /* ===== 可折叠提示按钮 ===== */ .hint-reveal-area { margin: 8px 0 8px 34px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hint-reveal-btn { padding: 5px 14px; border: 2px solid var(--story-accent); border-radius: 20px; background: #fff; color: var(--story-accent); font-size: 0.85rem; cursor: pointer; font-weight: 500; transition: all 0.2s; } .hint-reveal-btn:hover { background: var(--story-accent); color: var(--story-btn-text); } .hint-reveal-btn.revealed { background: #27ae60; border-color: #27ae60; color: #fff; cursor: default; } .hint-detail { margin: 4px 0 0 34px; padding: 8px 14px; background: var(--story-bg); border: 1px dashed var(--story-border); border-radius: 6px; font-size: 1rem; display: none; } .hint-detail.show { display: block; }