/* * 网页版（手机 / 浏览器）覆盖样式 * 在 styles.css 之后加载，仅覆盖桌面挂件专属的设定，不改动 styles.css 本身。 * 触发条件：（由 scripts/build-web.js 注入） */ /* 网页版需要可滚动、可见底色（Electron 版是透明不可滚动的桌面挂件） */ html { height: auto; } body.web-mode { overflow: auto; height: auto; min-height: 100vh; background: var(--paper-dark); -webkit-text-size-adjust: 100%; } /* 容器自适应：桌面浏览器居中限宽，手机铺满 */ body.web-mode .app { max-width: 720px; margin: 0 auto; height: auto; min-height: 100vh; border-radius: 0; box-shadow: none; border: none; } /* 隐藏窗口标题栏（置顶/紧凑/最小化/关闭在网页无意义；元素仍保留，故 renderer.js 不报错） */ body.web-mode .title-bar { display: none; } body.web-mode .content { padding: 20px 16px; } /* 5 个模式按钮在窄屏需要换行，避免溢出 */ body.web-mode .mode-tabs { flex-wrap: wrap; } /* 结果文字允许选中/复制（styles.css 全局 user-select:none 对网页体验不友好） */ body.web-mode .result-desc, body.web-mode .category-text, body.web-mode .term-detail-summary, body.web-mode .term-detail-content, body.web-mode .info-value, body.web-mode .mingpan-summary, body.web-mode .question-text { user-select: text; -webkit-user-select: text; } /* 手机窄屏适配 */ @media (max-width: 600px) { body.web-mode .content { padding: 14px 12px; } body.web-mode .header { padding: 12px 0; margin-bottom: 16px; } body.web-mode .header h1 { font-size: 2rem; letter-spacing: 4px; } body.web-mode .subtitle { font-size: 0.9rem; letter-spacing: 2px; margin-top: 6px; } body.web-mode .mode-tabs { gap: 8px; margin-bottom: 12px; } body.web-mode .mode-tab { padding: 8px 16px; font-size: 0.9rem; } body.web-mode .input-panel { padding: 14px; gap: 12px; margin-bottom: 16px; } /* 输入项整宽单列，按钮整宽更易点 */ body.web-mode .input-group { flex: 1 1 100%; min-width: 0; } body.web-mode .btn-primary { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; } /* 分类解读在小屏单列阅读更舒适 */ body.web-mode .result-categories { grid-template-columns: 1fr; } body.web-mode .result-name { font-size: 1.7rem; } /* 命盘等宽表保留横向滚动（styles.css 已处理），这里给点滚动提示间距 */ body.web-mode .result-area { -webkit-overflow-scrolling: touch; } }