/* ============================================================ * 黄历详情页样式（static/hl/style.css） * * 作用域： * 1. 独立页模式（）—— 以独立 URL 打开 * 2. 内嵌页模式（#hl-detail 容器）—— 在当前页面 SPA 切换显示 * 两种模式共享相同组件样式，通过 .hl-standalone 和 #hl-detail 区分根容器。 * * 主题变量复用： * 所有颜色均引用 root.css 的 --xxx 变量，自动跟随 data-theme 切换。 * 预定义变量包括：--main_bg_color / --back_filter_color / --item_bg_color / * --item_hover_color / --main_text_color / --purple_text_color / --cal-good / --cal-bad * * 注意：此文件有额外的 .hl-k 重复定义（line 367 和 523）， * 后者覆盖前者将 font-size 从 12px 改为 13px——这是有意为之， * 以加大卡片标题字号提升可读性。 * * 目录（Table of Contents）： * §1 全局重置与基础 —— 通用 box-sizing / html-body 默认清除 * §2 独立页根容器（hl-standalone）—— 全屏 body 背景 + 毛玻璃遮罩 * §3 内容区容器（hl-page） —— 居中约束 max-width:960px * §4 顶栏（hl-top / hl-back / hl-title / hl-theme / hl-footer） * §5 日期导航栏（hl-datebar） —— 翻页 / 今天 / 日期输入 / 快捷查询 / 分享 * §5.1 日期输入框（hl-dateinput + 自定义图标+农历内显） * §5.2 隐藏原生日期选择器（hl-datepicker-hidden） * §5.3 快捷查询按钮（hl-quick-btn / hl-quick-hint） * §6 头部 Hero 信息块（hl-hero）—— 公历/农历/黄道吉日概览 * §6.1 基本信息（hl-solar / hl-lunar / hl-badge） * §6.2 可点击复制项（hl-hero-item） * §7 区块标题（hl-sec-title / hl-tag） * §8 宜忌大卡片（hl-yiji） —— 双栏网格布局 * §9 热门概览网格（hl-pop-grid）—— 统计卡 3 列 * §10 通用信息卡片网格（hl-grid / hl-card） * §11 合并短文本卡片（hl-combined / hl-combined-grid） * §11.1 可复制内联块（hl-copy-inner） * §12 时辰吉凶表（hl-table / 响应式时辰面板 hl-shichen-body） * §13 指针时钟 SVG（hl-clock-svg / 各部分 SVG 元素） * §14 复制提示 Toast（hl-toast） * §15 可点击悬停反馈 * §16 响应式断点（≤640px / ≤480px） * §17 文字清晰度优化 * ============================================================ */ /* ============================================================ * §1 全局重置与基础 * * 仅在黄历页作用域内生效的 box-sizing 和 body 清除。 * 注意：此处 * 会覆盖主页的全局重置，但仅限黄历页。 * ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ============================================================ * §2 独立页根容器（.hl-standalone） * * 当黄历以独立 URL 打开时，body 增加 .hl-standalone 类名。 * 样式完全复用主页的视觉体系：主题背景 / 文字色 / 字体栈 / 过渡。 * * .hl-standalone .noise-filter * — 全屏 fixed 定位毛玻璃遮罩，与主页视觉一致 * — z-index:0，内容区 .hl-page z-index:1，确保遮罩在内容之下 * — pointer-events:none 确保不阻挡交互 * ============================================================ */ body.hl-standalone { min-height: 100vh; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "Source Han Sans CN", sans-serif; color: var(--main_text_color); background: var(--main_bg_color); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; transition: color .4s ease, background-color .4s ease; } /* 全屏毛玻璃遮罩：inset:0 是 top:0;right:0;bottom:0;left:0 的简写 */ .hl-standalone .noise-filter { position: fixed; inset: 0; background: var(--back_filter_color); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 0; pointer-events: none; } /* ============================================================ * §3 内容区容器（.hl-page） * * 居中约束，max-width:960px 比主页（1150px）略窄， * 适合以文字和卡片为主的黄历详情页。 * z-index:1 确保内容在 .noise-filter（z-index:0）之上。 * ============================================================ */ .hl-page { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 18px 16px 48px; } /* ============================================================ * §4 顶栏（.hl-top） * * 包含三个元素：返回按钮（hl-back）、标题（hl-title）、主题切换按钮（hl-theme）。 * 使用 space-between 分布，左/中/右对齐。 * * .hl-back： * — 胶囊样式返回链接，点击回到主页 * — Hover 时边框变为主题强调色 * * .hl-theme： * — 简洁调色板图标按钮（去除滑块样式，仅保留圆角按钮外观） * — 点击触发主题切换（由 JS 处理） * ============================================================ */ .hl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .hl-back { color: var(--purple_text_color); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border: 1px solid rgba(128,128,128,0.3); border-radius: 10px; background: var(--item_bg_color); transition: border-color .2s, color .2s; } .hl-back:hover { border-color: var(--purple_text_color); } .hl-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 2px; } /* 主题切换按钮：简洁调色板图标 */ .hl-theme { cursor: pointer; border: 1px solid rgba(128,128,128,0.3); border-radius: 10px; background: var(--item_bg_color); color: var(--main_text_color); font-size: 16px; width: 40px; height: 38px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; } .hl-theme:hover { border-color: var(--purple_text_color); color: var(--purple_text_color); } /* 页脚来源链接 */ .hl-footer a { color: var(--purple_text_color); text-decoration: none; } .hl-footer a:hover { text-decoration: underline; } /* ============================================================ * §5 日期导航栏（.hl-datebar） * * 功能入口区：包含翻页箭头 / 今天按钮 / 日期输入框 / 快捷查询按钮。 * Flex wrap 布局，在窄屏时自动换行。 * * §5.1 翻页箭头 / 今天按钮：同款胶囊样式 * §5.2 hl-dateinput-wrapper：日期输入 + 自定义日历图标 + 农历内显 * §5.3 hl-quick-btn：查吉日 / 查节日 / 分享等快捷操作 * ============================================================ */ .hl-datebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } /* §5.1 翻页按钮与今天按钮 */ .hl-arrow, .hl-today { cursor: pointer; border: 1px solid rgba(128,128,128,0.35); border-radius: 10px; background: var(--item_bg_color); color: var(--main_text_color); font-size: 16px; padding: 8px 14px; transition: border-color .2s, color .2s, transform .1s; } .hl-arrow:hover, .hl-today:hover { border-color: var(--purple_text_color); color: var(--purple_text_color); } .hl-arrow:active, .hl-today:active { transform: scale(0.95); } .hl-today { font-size: 13px; font-weight: 600; } /* §5.2 日期输入框容器：flex:1 保证拉伸，min-width:310px 防过窄 */ .hl-dateinput-wrapper { flex: 1 1 310px; min-width: 310px; position: relative; height: 38px; } /* 自定义日历图标：位于输入框左侧，pointer-events:auto 保证可点击弹出日期面板 */ .hl-date-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--purple_text_color); font-size: 14px; pointer-events: auto; /* 图标可点击，点击即打开日期选择面板 */ cursor: pointer; z-index: 2; transition: color .2s, transform .1s; } .hl-date-icon:hover { color: var(--main_text_color); } .hl-date-icon:active { transform: translateY(-50%) scale(0.9); } /* 日期选择输入框：隐藏浏览器原生控件外观（appearance:none）， * padding-left 为图标留空间，padding-right 为农历内显留空间 */ .hl-dateinput { width: 100%; height: 100%; padding: 0 10px; padding-left: 32px; /* 左侧自定义日历图标 */ padding-right: 185px; /* 右侧完整农历日期 */ border: 1px solid rgba(128,128,128,0.35); border-radius: 10px; background: var(--item_bg_color); color: var(--main_text_color); font-size: 14px; color-scheme: dark; -webkit-appearance: none; /* 隐藏浏览器原生日历图标 */ -moz-appearance: none; appearance: none; } /* 彻底隐藏 WebKit 原生日历控件（calendar-picker-indicator 和 spinner） */ .hl-dateinput::-webkit-calendar-picker-indicator, .hl-dateinput::-webkit-inner-spin-button { display: none; opacity: 0; width: 0; padding: 0; margin: 0; } /* 输入框右侧内显农历日期：绝对定位、单行省略 */ .hl-date-lunar-inside { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); max-width: 175px; font-size: 12.5px; font-weight: 700; color: var(--purple_text_color); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } /* 隐藏的原生日期输入：覆盖整个输入框区域，opacity:0 仅用于 JS showPicker() * 覆盖（而非移出屏幕）可保证 showPicker() 在更多浏览器中正常弹出 */ .hl-datepicker-hidden { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; z-index: 0; } /* §5.3 快捷查询按钮：主题色边框，Hover 反转背景/文字颜色 */ .hl-quick-btn { cursor: pointer; border: 1px solid var(--purple_text_color); border-radius: 10px; background: var(--item_bg_color); color: var(--purple_text_color); font-size: 13px; font-weight: 600; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: background-color .2s, color .2s, transform .1s; } .hl-quick-btn:hover { background: var(--purple_text_color); color: #fff; } .hl-quick-btn:active { transform: scale(0.97); } /* 快捷查询提示文字：主题色，置查询下方 */ .hl-quick-hint { width: 100%; min-height: 16px; margin-top: 4px; font-size: 12.5px; color: var(--purple_text_color); opacity: .9; } /* ============================================================ * §6 头部 Hero 信息块（.hl-hero） * * 页面最上方的大卡片，显示公历日期 / 农历日期 / 黄道吉日概览。 * 整张卡片（.hl-hero）可点击复制全部内容，单个文字块 * （.hl-hero-item）可点击复制该块内容。 * * .hl-badge 作为吉日/凶日标签，圆角胶囊，语义色边框+背景。 * ============================================================ */ .hl-hero { text-align: center; padding: 18px 14px; margin-bottom: 14px; border-radius: 16px; background: var(--item_bg_color); border: 1px solid rgba(128,128,128,0.18); cursor: pointer; /* 大卡片空白处可点击：复制全部内容 */ } .hl-solar { font-size: 26px; font-weight: 800; } .hl-week-inline { font-size: 15px; font-weight: 600; opacity: .7; margin-left: 6px; } .hl-lunar { font-size: 16px; margin-top: 10px; color: var(--purple_text_color); font-weight: 600; word-break: break-all; } .hl-lunar-cn { font-size: 13px; opacity: .8; margin-top: 4px; } /* 吉日/凶日徽章：圆角胶囊，语义色 */ .hl-badge { display: block; width: fit-content; margin: 12px auto 0; padding: 6px 16px; border-radius: 20px; font-size: 15px; font-weight: 800; border: 1px solid transparent; } .hl-badge.good { color: var(--cal-good); border-color: var(--cal-good); background: rgba(76,219,134,0.12); } .hl-badge.bad { color: var(--cal-bad); border-color: var(--cal-bad); background: rgba(255,107,107,0.12); } /* §6.1 Hero 内可点击块：单行居中显示，Hover 浅色反馈 */ .hl-hero-item { cursor: pointer; transition: background-color .2s; } .hl-hero-item:not(.hl-badge) { display: block; width: fit-content; margin-left: auto; margin-right: auto; padding: 6px 10px; border-radius: 8px; } .hl-hero-item:hover { background: var(--item_hover_color, rgba(128,128,128,0.08)); } /* 大卡片空白处同样可点击：复制整个 hero / 合并卡片全部内容 */ .hl-card.hl-combined { cursor: pointer; } /* ============================================================ * §7 区块标题（.hl-sec-title） * * 左侧 4px 主题色竖条 + 标题文字 + 可选标签徽章。 * .hl-tag 是圆角小徽章，置于标题右侧。 * ============================================================ */ .hl-sec-title { font-size: 17px; font-weight: 800; margin: 18px 0 12px; padding-left: 10px; border-left: 4px solid var(--purple_text_color); display: flex; align-items: center; gap: 8px; } .hl-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--purple_text_color); color: #fff; letter-spacing: 0; } /* ============================================================ * §8 宜 / 忌大卡片（.hl-yiji / .hl-yi / .hl-ji） * * 双栏等宽 Grid（1fr 1fr），左侧宜、右侧忌。 * 每个卡片顶部有圆形图标（.hl-cap）带语义色背景。 * 内容文字自动换行（overflow:hidden 配合 float 防溢出）。 * ============================================================ */ .hl-yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .hl-yi, .hl-ji { border-radius: 16px; padding: 16px 14px; background: var(--item_bg_color); border: 1px solid rgba(128,128,128,0.18); min-height: 96px; } /* 圆形图标：float:left 嵌入文字左上方 */ .hl-cap { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; float: left; margin-right: 12px; } .hl-cap-yi { background: var(--cal-good); } .hl-cap-ji { background: var(--cal-bad); } .hl-list { font-size: 14.5px; line-height: 1.7; overflow: hidden; } /* ============================================================ * §9 热门概览网格（.hl-pop-grid） * * 3 列 Grid 统计卡（标题 + 数值）。 * .hl-ov-k 标题用主题色，.hl-ov-v 数值用语义色（good/bad）。 * .hl-pop-time 特化：数值字号略小，以容纳时辰时间段。 * ============================================================ */ .hl-pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .hl-pop-grid .hl-ov { text-align: center; padding: 12px 8px; border-radius: 14px; background: var(--item_bg_color); border: 1px solid rgba(128,128,128,0.18); } .hl-pop-grid .hl-ov-k { font-size: 12px; color: var(--purple_text_color); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; } .hl-pop-grid .hl-ov-v { font-size: 15px; font-weight: 800; line-height: 1.4; word-break: break-word; } .hl-pop-grid .hl-ov-v.good { color: var(--cal-good); } .hl-pop-grid .hl-ov-v.bad { color: var(--cal-bad); } .hl-pop-time .hl-ov-v { font-size: 13.5px; } /* 当前时辰含时间段，字号略小 */ /* ============================================================ * §10 通用信息卡片网格（.hl-grid / .hl-card） * * .hl-grid：auto-fill 自适应列数，minmax(180px, 1fr) * .hl-card：带圆角和边框的标准卡片 * — .hl-wide：grid-column: 1 / -1 跨列，用于五行卡片占满整行 * — .hl-common-grid：热门区常用历法项，与上方保持 12px 间距 * ============================================================ */ .hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; } .hl-card { border-radius: 14px; padding: 12px 14px; background: var(--item_bg_color); border: 1px solid rgba(128,128,128,0.18); transition: background-color .2s, transform .12s; } .hl-card:hover { background: var(--item_hover_color); } .hl-card.hl-wide { grid-column: 1 / -1; } /* 五行卡片横跨整行 */ .hl-common-grid { margin-bottom: 12px; } /* 热门区常用历法项，与上方 12px 间距一致 */ /* 卡片键（标题）：主题色，小字号，等宽字距 */ .hl-k { font-size: 12px; color: var(--purple_text_color); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; } /* 卡片值（内容）：white-space: pre-line 保留彭祖百忌等有换行需求的内容 */ .hl-v { font-size: 14.5px; line-height: 1.6; white-space: pre-line; /* 彭祖百忌保留换行 */ word-break: break-word; } .hl-v.good { color: var(--cal-good); } .hl-v.bad { color: var(--cal-bad); } /* ============================================================ * §11 合并短文本项目卡片（.hl-combined） * * 将多个短键值对合并到一张大卡片中， * 以高密度键值网格（hl-combined-grid）布局展示。 * 适用于生肖 / 冲煞 / 星座 / 廿八宿等基本信息。 * ============================================================ */ .hl-card.hl-combined { padding: 12px 14px; margin-bottom: 12px; } /* 合并卡片网格：auto-fill 多列紧凑布局，gap 较小（3px 10px） */ .hl-combined-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 3px 10px; /* 进一步紧凑基本黄历各项间距 */ } .hl-combined-item { padding: 2px 5px; display: flex; align-items: flex-start; min-width: 0; } /* §11.1 可复制内联块：hover 浅色反馈，点击复制该块内容 */ .hl-copy-inner { display: inline-block; max-width: 100%; padding: 4px 6px; border-radius: 8px; cursor: pointer; transition: background-color .2s; } .hl-copy-inner:hover { background: var(--item_hover_color, rgba(128,128,128,0.08)); } .hl-combined-item .hl-k { font-size: 11px; margin-bottom: 3px; letter-spacing: 0.5px; } .hl-combined-item .hl-v { font-size: 15px; font-weight: 700; line-height: 1.4; } /* 标题后的复制提示说明：同色低透明度，深浅主题均可读 */ .hl-sec-hint { font-size: 12px; font-weight: 400; color: var(--main_text_color); opacity: 0.62; margin-left: 4px; letter-spacing: 0.5px; } /* ============================================================ * §12 时辰吉凶表（.hl-table） * * 12 行地支时辰表格，展示各时辰对应的吉凶/宜忌等信息。 * 当前时辰行（tr.cur）带有主题色左侧指示条（box-shadow inset）。 * border-collapse + border-radius + overflow:hidden 实现圆角表格。 * ============================================================ */ .hl-table { width: 100%; border-collapse: collapse; border-radius: 14px; overflow: hidden; background: var(--item_bg_color); border: 1px solid rgba(128,128,128,0.18); } .hl-table th, .hl-table td { padding: 10px 12px; text-align: center; font-size: 14px; border-bottom: 1px solid rgba(128,128,128,0.12); } .hl-table th { background: rgba(128,128,128,0.12); font-weight: 700; color: var(--purple_text_color); } .hl-table tr:last-child td { border-bottom: none; } .hl-sc-name { font-weight: 700; } .hl-luck { font-weight: 800; } .hl-luck.good { color: var(--cal-good); } .hl-luck.bad { color: var(--cal-bad); } /* 当前时辰高亮行：浅色背景 + 左侧主题色指示条 */ .hl-table tr.cur td { background: rgba(128,128,128,0.10); box-shadow: inset 3px 0 0 var(--purple_text_color); } .hl-table tr.cur .hl-sc-name { color: var(--purple_text_color); } /* ============================================================ * §13 指针时钟 SVG（.hl-shichen-clock 区域） * * 与时辰表左右并排显示（Flex row wrap）， * 可视化为 24 小时制圆盘时钟，标注 12 地支和当前时辰。 * * SVG 元素分层说明： * .hl-clock-outer —— 外装饰双环（淡主题色描边） * .hl-clock-ring —— 主表盘环（半透明填充 + 主题色描边） * .hl-clock-hour —— 24 小时小刻度点（内圈低透明度） * .hl-clock-tick —— 12 地支主刻度线 * .hl-clock-label —— 地支标签文字（当前时辰 .cur 高亮） * .hl-clock-range —— 时辰时间范围（外圈小字，如 23-1） * .hl-clock-hub —— 中心枢纽圆（文字衬底） * .hl-clock-hub-text —— 中心当前时辰名 * .hl-clock-hub-luck —— 中心当前时辰吉凶 * .hl-clock-hand —— 指针主体（箭头三角，fill 由 JS 按吉凶着色） * .hl-clock-hand-tail —— 指针配重尾 * .hl-clock-dot —— 指针中心轴点 * ============================================================ */ .hl-shichen-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .hl-shichen-table-wrap { flex: 1 1 260px; min-width: 0; overflow-x: auto; } .hl-table { width: 100%; table-layout: auto; } .hl-table th, .hl-table td { padding: 5px 10px; white-space: nowrap; text-align: center; } /* 时钟区域：Flex column 居中，flex 240px 基础宽度 */ .hl-shichen-clock { flex: 1 1 240px; max-width: 360px; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hl-clock-title { font-size: 13px; color: var(--purple_text_color); font-weight: 700; } /* 时钟 SVG 容器：宽度自适应、保持纵横比 */ .hl-clock-svg { width: 100%; height: auto; display: block; max-width: 360px; } /* 外装饰双环：淡主题色描边，仅作装饰 */ .hl-clock-outer { fill: none; stroke: var(--purple_text_color); stroke-width: 1; opacity: 0.25; } /* 主表盘环：半透明填充 + 主题色描边 */ .hl-clock-ring { fill: rgba(128,128,128,0.06); stroke: var(--purple_text_color); stroke-width: 1.5; opacity: 0.55; } /* 24 小时小刻度点（内圈，低透明度） */ .hl-clock-hour { fill: var(--main_text_color); opacity: 0.3; } /* 12 地支主刻度线 */ .hl-clock-tick { stroke: var(--main_text_color); stroke-width: 2; opacity: 0.5; stroke-linecap: round; } /* 地支标签文字（当前时辰 .cur 高亮） */ .hl-clock-label { fill: var(--main_text_color); font-size: 14px; font-weight: 600; } .hl-clock-label.cur { fill: var(--purple_text_color); font-weight: 800; } /* 时辰时间范围（外圈小字，如 23-1） */ .hl-clock-range { fill: var(--main_text_color); font-size: 8px; opacity: 0.45; } /* 中心枢纽圆：文字衬底，半透明 */ .hl-clock-hub { fill: rgba(128,128,128,0.10); stroke: var(--purple_text_color); stroke-width: 1; opacity: 0.6; } /* 中心枢纽文字：当前时辰名；paint-order 先描边后填充保证深色主题可读 */ .hl-clock-hub-text { fill: var(--purple_text_color); font-size: 26px; font-weight: 800; stroke: var(--item_bg_color); stroke-width: 3px; paint-order: stroke fill; } /* 中心枢纽下方：当前时辰吉凶文字 */ .hl-clock-hub-luck { font-size: 26px; font-weight: 800; stroke: var(--item_bg_color); stroke-width: 3px; paint-order: stroke fill; } /* 指针主体（箭头三角，fill 由 JS 按吉凶着色） */ .hl-clock-hand { stroke: none; } /* 指针配重尾（与指针同色，半透明） */ .hl-clock-hand-tail { stroke: none; opacity: 0.7; } /* 指针中心轴点（白描边突出） */ .hl-clock-dot { stroke: #ffffff; stroke-width: 1.5; } /* 页脚 */ .hl-footer { text-align: center; font-size: 12px; opacity: .7; margin-top: 22px; } /* ============================================================ * §14 复制提示 Toast（.hl-toast） * * Fixed 定位底部居中，opacity + transform 控制显隐。 * z-index: 9999 确保高于所有内容。 * border 使用主题色，与主页 .cal-toast 风格统一但更细致（加 box-shadow）。 * ============================================================ */ .hl-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(12px); max-width: 80%; padding: 10px 18px; border-radius: 12px; background: rgba(20, 20, 28, 0.92); color: #fff; font-size: 13px; font-weight: 600; border: 1px solid var(--purple_text_color, #b388ff); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 9999; } .hl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ * §15 可点击区域悬停反馈 * * 统一为可复制/可点击元素添加 pointer 光标 + 主题色边框发光效果。 * 悬停时：border-color 变为主题色 + inset box-shadow 模拟发光边框。 * ============================================================ */ .hl-combined-item, .hl-grid .hl-card, .hl-yi, .hl-ji, .hl-table tbody tr { cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .1s; } .hl-combined-item:hover, .hl-grid .hl-card:hover, .hl-yi:hover, .hl-ji:hover, .hl-table tbody tr:hover { border-color: var(--purple_text_color); box-shadow: 0 0 0 1px var(--purple_text_color, #b388ff) inset; } /* ============================================================ * §16 响应式断点 * * ≤640px：缩进 / 标题 / 日期 / 网格列数 / 表格间距适配 * ≤480px：日期栏布局调整（输入框占首行）+ 宜忌单栏 + 网格列缩小 * ============================================================ */ @media (max-width: 640px) { .hl-page { padding: 14px 12px 40px; } .hl-title { font-size: 18px; } .hl-solar { font-size: 22px; } .hl-pop-grid { grid-template-columns: 1fr 1fr; } .hl-grid { grid-template-columns: 1fr 1fr; } .hl-table th, .hl-table td { padding: 8px 6px; font-size: 12.5px; } } @media (max-width: 480px) { .hl-datebar { gap: 6px; } .hl-arrow, .hl-today { padding: 8px 12px; font-size: 15px; } /* 日期框独占首行，箭头/今天/查询按钮在下方一行铺开 */ .hl-dateinput-wrapper { flex: 1 1 100%; order: -1; min-width: 0; height: 40px; } .hl-date-icon { font-size: 13px; left: 8px; } .hl-date-lunar-inside { right: 10px; font-size: 12px; max-width: 155px; } .hl-quick-btn { flex: 1 1 0; font-size: 13px; padding: 9px 6px; } .hl-yiji { grid-template-columns: 1fr; } /* 宜忌改为上下单栏 */ .hl-combined-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .hl-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ============================================================ * §17 文字清晰度优化 * * 全局开启抗锯齿（antialiased）和文字渲染优化（optimizeLegibility）， * 减少毛玻璃背景上的文字锯齿。 * * 注意：下面重复定义了 .hl-k（从 12px 覆盖为 13px）和 * .hl-combined-item .hl-k（同样 13px）， * 这是有意为之——在页面底部统一加大卡片标题字号以提升可读性。 * ============================================================ */ .hl-page, #hl-detail, #hl-root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 小卡片标题字号加大（覆盖上方 §10 中 .hl-k 的 12px 定义） */ .hl-k { font-size: 13px; } .hl-combined-item .hl-k { font-size: 13px; } /* ============================================================ * §13（续）时辰吉凶面板完整定义 * * (此部分为 §13 的补充定义，与上方 §13 连续。 * flex 表格 + 时钟双栏布局已在上方定义完全。) * ============================================================ */ .hl-shichen-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .hl-shichen-table-wrap { flex: 1 1 260px; min-width: 0; overflow-x: auto; } .hl-table { width: 100%; table-layout: auto; } .hl-table th, .hl-table td { padding: 5px 10px; white-space: nowrap; text-align: center; } .hl-shichen-clock { flex: 1 1 240px; max-width: 360px; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hl-clock-title { font-size: 13px; color: var(--purple_text_color); font-weight: 700; } .hl-clock-svg { width: 100%; height: auto; display: block; max-width: 360px; } .hl-clock-outer { fill: none; stroke: var(--purple_text_color); stroke-width: 1; opacity: 0.25; } .hl-clock-ring { fill: rgba(128,128,128,0.06); stroke: var(--purple_text_color); stroke-width: 1.5; opacity: 0.55; } .hl-clock-hour { fill: var(--main_text_color); opacity: 0.3; } .hl-clock-tick { stroke: var(--main_text_color); stroke-width: 2; opacity: 0.5; stroke-linecap: round; } .hl-clock-label { fill: var(--main_text_color); font-size: 14px; font-weight: 600; } .hl-clock-label.cur { fill: var(--purple_text_color); font-weight: 800; } .hl-clock-range { fill: var(--main_text_color); font-size: 8px; opacity: 0.45; } .hl-clock-hub { fill: rgba(128,128,128,0.10); stroke: var(--purple_text_color); stroke-width: 1; opacity: 0.6; } .hl-clock-hub-text { fill: var(--purple_text_color); font-size: 26px; font-weight: 800; stroke: var(--item_bg_color); stroke-width: 3px; paint-order: stroke fill; } .hl-clock-hub-luck { font-size: 26px; font-weight: 800; stroke: var(--item_bg_color); stroke-width: 3px; paint-order: stroke fill; } .hl-clock-hand { stroke: none; } .hl-clock-hand-tail { stroke: none; opacity: 0.7; } .hl-clock-dot { stroke: #ffffff; stroke-width: 1.5; }