/** * 前台答题页样式 —— 谷歌表单风格。 * * 主题色由 QBS_Frontend::theme_style() 以 --qbs-primary 注入到的行内 style， * 这里所有强调色都引用该变量，换问卷即换配色。 */ :root { --qbs-primary: #1a73e8; --qbs-bg: #f0ebf8; --qbs-card: #ffffff; --qbs-border: #dadce0; --qbs-text: #202124; --qbs-text-sub: #5f6368; --qbs-danger: #d93025; --qbs-radius: 8px; } * { box-sizing: border-box; } html, body.qbs-body { margin: 0; padding: 0; } body.qbs-body { background: var(--qbs-bg); color: var(--qbs-text); font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .qbs-page { padding: 24px 12px 64px; } .qbs-container { max-width: 640px; margin: 0 auto; } .qbs-container-narrow { max-width: 560px; } /* ---------------------------------------------------------- 卡片 ---------------------------------------------------------- */ .qbs-card { position: relative; background: var(--qbs-card); border: 1px solid var(--qbs-border); border-radius: var(--qbs-radius); margin-bottom: 12px; overflow: hidden; } .qbs-card-inner { padding: 24px; } /* 头部卡片顶部的品牌色带 */ .qbs-head-bar { height: 10px; background: var(--qbs-primary); } .qbs-card-head .qbs-card-inner { padding-top: 22px; } .qbs-title { margin: 0 0 8px; font-size: 32px; font-weight: 400; line-height: 1.25; word-break: break-word; } .qbs-desc { color: var(--qbs-text-sub); font-size: 14px; word-break: break-word; } .qbs-desc p { margin: 0 0 10px; } .qbs-desc p:last-child { margin-bottom: 0; } .qbs-desc a, .qbs-rich a { color: var(--qbs-primary); text-decoration: underline; } .qbs-desc strong, .qbs-rich strong { color: var(--qbs-text); } /* 链接内的加粗文字要跟着链接走。写「点击此处」时，上面那条 strong 规则会把它染成正文色，看起来就不像链接了。 */ .qbs-desc a strong, .qbs-rich a strong { color: inherit; } .qbs-head-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--qbs-border); } .qbs-required-note { font-size: 12px; color: var(--qbs-danger); } .qbs-star { color: var(--qbs-danger); } /* 图片与文字说明区块 */ .qbs-card-media .qbs-card-inner { padding: 16px; text-align: center; } .qbs-card-media img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; } .qbs-media-caption { margin: 10px 0 0; font-size: 12px; color: var(--qbs-text-sub); } .qbs-rich { color: var(--qbs-text); word-break: break-word; } .qbs-rich p { margin: 0 0 10px; } .qbs-rich p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------- 题目 ---------------------------------------------------------- */ .qbs-q-title { font-size: 16px; line-height: 1.5; margin-bottom: 4px; word-break: break-word; } .qbs-q-help { margin: 0 0 8px; font-size: 12px; color: var(--qbs-text-sub); } .qbs-q-field { margin-top: 14px; } .qbs-q-error { margin: 10px 0 0; font-size: 12px; color: var(--qbs-danger); display: flex; align-items: center; gap: 6px; } /* hidden 属性的 display:none 出自浏览器默认样式表，优先级低于上面这条 display:flex。不显式覆盖的话，错误框连同 ::before 的红圈感叹号会从页面加载起就一直显示。 */ .qbs-q-error[hidden] { display: none; } .qbs-q-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--qbs-danger); color: #fff; font-size: 10px; font-weight: 700; flex: none; } .qbs-card-question.qbs-has-error { border-color: var(--qbs-danger); } /* 文本输入 */ .qbs-input { width: 100%; border: none; border-bottom: 1px solid var(--qbs-border); background: transparent; padding: 8px 2px; font-size: 14px; font-family: inherit; color: var(--qbs-text); outline: none; transition: border-color .15s; } .qbs-input:focus { border-bottom: 2px solid var(--qbs-primary); padding-bottom: 7px; } .qbs-input::placeholder { color: #9aa0a6; } .qbs-textarea { resize: vertical; min-height: 72px; line-height: 1.6; } .qbs-select { width: 100%; max-width: 320px; padding: 8px 10px; font-size: 14px; font-family: inherit; color: var(--qbs-text); background: #fff; border: 1px solid var(--qbs-border); border-radius: 4px; outline: none; } .qbs-select:focus { border-color: var(--qbs-primary); } /* 单选 / 多选 */ .qbs-choices { display: flex; flex-direction: column; gap: 2px; } .qbs-choice { display: flex; align-items: flex-start; gap: 12px; padding: 8px 4px; border-radius: 4px; cursor: pointer; transition: background .12s; } .qbs-choice:hover { background: rgba(0, 0, 0, .03); } .qbs-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .qbs-choice-mark { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid #5f6368; background: #fff; position: relative; transition: border-color .12s; } .qbs-choice input[type="radio"] ~ .qbs-choice-mark { border-radius: 50%; } .qbs-choice input[type="checkbox"] ~ .qbs-choice-mark { border-radius: 2px; } .qbs-choice input:checked ~ .qbs-choice-mark { border-color: var(--qbs-primary); } /* 选中态：单选画实心圆点，多选画对勾 */ .qbs-choice input[type="radio"]:checked ~ .qbs-choice-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qbs-primary); } .qbs-choice input[type="checkbox"]:checked ~ .qbs-choice-mark { background: var(--qbs-primary); } .qbs-choice input[type="checkbox"]:checked ~ .qbs-choice-mark::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .qbs-choice input:focus-visible ~ .qbs-choice-mark { box-shadow: 0 0 0 8px var(--qbs-primary-soft, rgba(26, 115, 232, .12)); } .qbs-choice-text { font-size: 14px; line-height: 1.6; word-break: break-word; } /* 联系方式题：平台胶囊 + 账号输入 */ .qbs-contact-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .qbs-contact-chip { position: relative; cursor: pointer; } .qbs-contact-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .qbs-contact-chip span { display: inline-block; padding: 7px 16px; border: 1px solid var(--qbs-border); border-radius: 999px; font-size: 13px; color: var(--qbs-text-sub); background: #fff; transition: all .12s; } .qbs-contact-chip:hover span { background: rgba(0, 0, 0, .03); } .qbs-contact-chip input:checked ~ span { border-color: var(--qbs-primary); color: var(--qbs-primary); background: var(--qbs-primary-soft, rgba(26, 115, 232, .1)); font-weight: 500; } .qbs-contact-chip input:focus-visible ~ span { box-shadow: 0 0 0 3px var(--qbs-primary-soft, rgba(26, 115, 232, .2)); } /* ---------------------------------------------------------- 操作区 ---------------------------------------------------------- */ .qbs-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 8px; } .qbs-submit-btn { background: var(--qbs-primary); color: #fff; border: none; border-radius: 4px; padding: 10px 26px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: filter .12s, box-shadow .12s; } .qbs-submit-btn:hover { filter: brightness(1.08); box-shadow: 0 1px 3px rgba(60, 64, 67, .3); } .qbs-submit-btn:disabled { opacity: .6; cursor: not-allowed; } .qbs-clear-btn { background: none; border: none; color: var(--qbs-primary); font-size: 14px; font-family: inherit; cursor: pointer; padding: 8px; border-radius: 4px; } .qbs-clear-btn:hover { background: var(--qbs-primary-soft, rgba(26, 115, 232, .08)); } .qbs-note { margin: 16px 0 0; font-size: 12px; color: var(--qbs-text-sub); } .qbs-footer { margin-top: 28px; text-align: center; font-size: 12px; color: var(--qbs-text-sub); } .qbs-footer a { color: var(--qbs-text-sub); text-decoration: none; } .qbs-footer a:hover { text-decoration: underline; } /* 服务端校验失败时的顶部提示条 */ .qbs-alert { background: #fce8e6; border: 1px solid #f5c6c2; border-radius: var(--qbs-radius); color: #c5221f; padding: 14px 18px; margin-bottom: 12px; font-size: 14px; } /* 蜜罐：对真人彻底不可见，但不用 display:none（部分机器人会跳过） */ .qbs-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------- 提示页 ---------------------------------------------------------- */ .qbs-card-notice .qbs-card-inner { padding: 32px 24px 36px; } .qbs-notice-icon { color: var(--qbs-primary); margin-bottom: 12px; } .qbs-notice-title { margin: 0 0 10px; font-size: 18px; font-weight: 500; } .qbs-link-btn { display: inline-block; padding: 9px 22px; background: var(--qbs-primary); color: #fff !important; border-radius: 4px; text-decoration: none; font-size: 14px; } .qbs-link-btn:hover { filter: brightness(1.08); } /* ---------------------------------------------------------- 移动端 ---------------------------------------------------------- */ @media (max-width: 600px) { .qbs-page { padding: 12px 8px 48px; } .qbs-card-inner { padding: 20px 16px; } .qbs-title { font-size: 24px; } /* 手机上整体放大一级，小屏读小字太费劲 */ .qbs-desc, .qbs-rich, .qbs-choice-text { font-size: 15px; } .qbs-q-title { font-size: 17px; } .qbs-contact-chip span { font-size: 14px; padding: 9px 18px; } /* 输入类控件必须 ≥16px：iOS Safari 在字号小于 16px 的输入框获得焦点时会自动放大整个页面，放大后用户还得手动缩回去 */ .qbs-input, .qbs-select, .qbs-textarea, .qbs-contact-value { font-size: 16px; } /* 提交按钮通栏，手机上更好点 */ .qbs-actions { flex-direction: column; align-items: stretch; gap: 10px; } .qbs-submit-btn { width: 100%; padding: 14px; font-size: 16px; } .qbs-clear-btn { width: 100%; padding: 12px; font-size: 15px; } }