/* ============================================================
pdddiy-site · 统一 UI 设计规范 (Shared Theme)
原型：小学数学题生成器 (mathgen)
适用：门户(index.html) + 全部子应用 + 未来新增子应用
------------------------------------------------------------
加载方式（每个子应用 index.html 内）：
门户深色变体：在 加 class="theme-dark"
============================================================ */
:root {
/* —— 品牌色板（源自 mathgen 原型）—— */
--brand-primary: #4e73df; /* 主蓝 */
--brand-secondary: #6f42c1; /* 主紫 */
--brand-success: #1cc88a;
--brand-warning: #f6c23e;
--brand-danger: #e74a3b;
--brand-info: #36b9cc;
--brand-light: #f8f9fc;
--brand-dark: #5a5c69;
/* —— 渐变 —— */
--gradient-page: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-brand: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
--gradient-success:linear-gradient(135deg, #1cc88a, #138a64);
--gradient-danger: linear-gradient(135deg, #e74a3b, #c0392b);
/* —— 表面与文本（浅色主题默认）—— */
--surface: #ffffff;
--surface-soft: #f8f9fc;
--surface-muted: #eef1f6;
--text-strong: #2d3748;
--text: #3a4256;
--text-muted: #6c757d;
--border: #e3e6ed;
/* —— 圆角 —— */
--radius-xl: 15px;
--radius-lg: 12px;
--radius-md: 10px;
--radius-sm: 8px;
--radius-pill: 25px;
/* —— 阴影 —— */
--shadow-container: 0 15px 35px rgba(0,0,0,0.10);
--shadow-card: 0 5px 15px rgba(0,0,0,0.08);
--shadow-card-hover: 0 10px 25px rgba(0,0,0,0.12);
--shadow-btn: 0 4px 12px rgba(78,115,223,0.30);
/* —— 间距 —— */
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
--space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-8:3rem;
/* —— 字体 —— */
--font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-mono: 'Courier New', Consolas, monospace;
/* —— 布局 —— */
--container-max: 1200px;
--transition-base: .25s ease;
}
/* ===== 深色变体（门户等）===== */
body.theme-dark {
--surface: #161b29;
--surface-soft: #1f2638;
--surface-muted: #2a3349;
--text-strong: #ffffff;
--text: #e6e9f0;
--text-muted: #9aa3b5;
--border: #2e3850;
background: linear-gradient(135deg, #0a0e17 0%, #10243a 100%);
}
body.theme-dark .card,
body.theme-dark .app-shell,
body.theme-dark .main-container { color: var(--text); }
/* ===== 页面底座 ===== */
* { box-sizing: border-box; }
body {
background: var(--gradient-page);
min-height: 100vh;
font-family: var(--font-base);
color: var(--text);
margin: 0;
-webkit-font-smoothing: antialiased;
}
/* ===== 主容器（白卡）===== */
.app-shell,
.main-container {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-container);
margin: var(--space-6) auto;
max-width: var(--container-max);
overflow: hidden;
}
/* ===== 顶部标题带（统一 Header）===== */
.app-header {
background: var(--gradient-brand);
color: #fff;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
padding: var(--space-6);
text-align: center;
}
.app-header h1 {
font-size: 2rem; font-weight: 700; margin: 0 0 var(--space-2);
display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.app-header .lead { font-size: 1rem; opacity: .92; margin: 0; }
/* ===== 内容区 ===== */
.app-body { padding: var(--space-6); }
/* ===== 卡片 ===== */
.card {
background: var(--surface);
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--border);
padding: var(--space-4) var(--space-5);
font-weight: 600;
}
.card-header .card-title { margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-body { padding: var(--space-5); }
/* ===== 面板（设置区/结果区）===== */
.panel {
background: var(--surface-soft);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.panel-scroll {
background: var(--surface-soft);
border-radius: var(--radius-md);
padding: var(--space-5);
max-height: 600px; overflow-y: auto;
scrollbar-width: thin;
}
/* ===== 按钮（胶囊渐变）===== */
.btn {
font-family: var(--font-base);
font-weight: 600;
border-radius: var(--radius-pill);
padding: 10px 26px;
border: none;
cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base);
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-btn); }
.btn-success { background: var(--gradient-success); color: #fff; }
.btn-danger { background: var(--gradient-danger); color: #fff; }
.btn-secondary { background: var(--brand-dark); color: #fff; }
.btn-info { background: var(--brand-info); color: #fff; }
.btn-outline-primary { background: transparent; color: var(--brand-primary); border: 2px solid var(--brand-primary); }
.btn-outline-primary.active,
.btn-outline-primary:hover { background: var(--brand-primary); color: #fff; }
.btn:active { transform: scale(.97); }
.btn-block { width: 100%; }
/* ===== 表单 ===== */
.form-label { font-weight: 600; color: var(--text-strong); margin-bottom: var(--space-2); display: flex; align-items: center; gap: .4rem; }
.form-control, .form-select {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: .55rem .75rem;
font-family: var(--font-base);
background: var(--surface);
color: var(--text);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
width: 100%;
}
.form-control:focus, .form-select:focus {
outline: none; border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(78,115,223,.15);
}
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
/* ===== 结果 / 题目行 ===== */
.result-line, .math-question {
font-family: var(--font-mono);
font-size: 16px;
margin: var(--space-2) 0;
padding: var(--space-3) var(--space-4);
background: var(--surface);
border-radius: var(--radius-sm);
border-left: 4px solid var(--brand-primary);
}
.result-line.alt { border-left-color: var(--brand-secondary); }
/* ===== 表格 ===== */
.table { width: 100%; border-collapse: collapse; }
.table th { background: var(--surface-soft); border-bottom: 2px solid var(--border); padding: .6rem; text-align: left; }
.table td { padding: .6rem; border-bottom: 1px solid var(--border); }
.table-hover tbody tr:hover { background: var(--surface-soft); }
/* ===== 徽标 / 标签 ===== */
.badge-pill { border-radius: 999px; padding: .3rem .8rem; font-weight: 600; font-size: .8rem; }
.badge-primary { background: var(--brand-primary); color: #fff; }
.badge-success { background: var(--brand-success); color: #fff; }
.badge-warning { background: var(--brand-warning); color: #212529; }
/* ===== 进度条 ===== */
.progress { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.progress-bar { background: var(--gradient-brand); height: 100%; }
/* ===== 提示条（免责声明等）===== */
.notice {
border-radius: var(--radius-sm);
padding: .75rem 1rem;
font-size: .9rem;
display: flex; align-items: center; gap: .5rem;
background: rgba(246,194,62,.15);
border: 1px solid var(--brand-warning);
color: #8a6d1a;
}
body.theme-dark .notice { color: #f6c23e; }
/* ===== 页脚（备案号 / 版权）===== */
.app-footer {
text-align: center;
padding: var(--space-4);
color: var(--text-muted);
font-size: .82rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
gap: .45rem;
}
.app-footer a { color: var(--brand-primary); text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
.app-footer .footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .35rem .9rem;
}
.app-footer .footer-copy { font-size: .78rem; color: var(--text-muted); }
img.gongan { height: 14px; vertical-align: -2px; margin-right: 4px; }
/* ===== 网格工具（Bootstrap 未引入时备用）===== */
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--space-3)); }
.col, .col-12, .col-lg-4, .col-lg-8 { padding: 0 var(--space-3); width: 100%; }
@media (min-width: 992px) {
.col-lg-4 { width: 33.3333%; }
.col-lg-8 { width: 66.6667%; }
}
.g-4 > * { margin-bottom: var(--space-4); }
.d-grid { display: grid; }
.gap-2 { gap: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
/* ===== 触摸 / 移动优化 ===== */
@media (hover: none) and (pointer: coarse) {
.btn, .form-control, .form-select { min-height: 44px; }
.card:hover { transform: none; }
.btn-primary:hover { transform: none; }
}
@media (max-width: 768px) {
.app-shell, .main-container { margin: .5rem; border-radius: var(--radius-lg); }
.app-header { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.app-header h1 { font-size: 1.6rem; }
.app-body { padding: var(--space-4); }
}
@media (max-width: 480px) {
.app-header h1 { font-size: 1.4rem; }
.btn { font-size: .9rem; padding: 10px 20px; }
}
/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}