/**
* 卡片组件：天气 — 样式（mTab 风格）
* --------------------------------------------------------------
* 与 ./index.js 配对，由 include.php 自动扫描所在子目录注入：
*
*
* 结构对齐 mTab 桌面卡片：.halotab-widget-weather > section.comp > .weather-app ... + .names
* 卡片内部保留两类子元素：
* 1) mTab 同名类：.weather-app / .weather-icon / .weather-days / .feelsLike ...
* —— 主要视觉骨架直接复用其语义，便于后续接入官方主题
* 2) HaloTab 私有：.hw-* —— 数据槽位 + 兼容旧 JS 的钩子
*
* 注意：详情面板（.hw-d-*）和城市选择器（.hw-pick-*）样式保持原状，本组件只改"卡片本体"。
*/
/* ----------------------------------------------------------
* 卡片：4×2 mTab 风格
* 根容器 由框架自动包装为
* 外层卡片背景由 HaloTab 卡片框架提供圆角与阴影
* .comp 内容区
* .weather-app 真正的天气容器（有内边距 / 文字色等）
* .names 卡片底部标题（"天气"）
* ---------------------------------------------------------- */
.halotab-widget-weather{
width: 100%; height: 100%;
display: flex; flex-direction: column;
position: relative;
border-radius: inherit;
overflow: hidden;
box-sizing: border-box;
/* 卡片整体留出底部 .names 标题空间（占位用 padding-bottom 也可以，
但用 flex 让 section.comp 占满更稳） */
}
/* 让 widget icon 槽位的白底让位给本组件的彩色渐变（外层圆角/裁剪保留） */
.halotab-card-widget-icon:has(> .halotab-widget-weather){
background: transparent;
box-shadow: none;
}
.halotab-widget-weather .comp{
flex: 1 1 auto;
min-height: 0;
display: block;
}
/* widget 卡片标题已由 HaloTab 卡片框架（.halotab-card-body）统一显示，
widget 内部的 .names 不再渲染，避免与外层标题重复 */
.halotab-widget-weather .names{
display: none;
color: var(--ht-fg, #2b3138);
opacity: .85;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="dark"] .halotab-widget-weather .names,
html[data-theme="auto"] .halotab-widget-weather .names{ color: #e6edf6; }
/* weather-app：卡片主体
*
* 配色逻辑（为保证跟随用户的"主题切换"按钮，不再被昼夜抢色）：
* - 卡片底色 / 文字色：完全由 html[data-theme] 决定
* light 主题 → 浅色暖渐变 + 深字（本块默认值）
* dark 主题 → 暗色夜空渐变 + 浅字（见 258 行的 dark 覆盖段）
* - 装饰图层（白天的太阳/云、夜晚的月亮/星星）：仍由
* .weather-app[data-period] 控制 day/night 显隐，但**不再覆盖背景**，
* 这样夜里 19~7 点天气卡也能保持浅色（用户选 light 时）或保持深色
* （用户选 dark 时），跟整体主题风格统一，不会再出现"主题切到浅色，
* 天气卡却是夜空色"的违和感。
* data-period 由 JS 在 fillData 时根据当前小时设置（默认 day）。 */
.halotab-widget-weather .weather-app{
width: 100%; height: 100%;
position: relative;
border-radius: 14px;
padding: 12px 14px 10px;
box-sizing: border-box;
color: #1f2937;
background: linear-gradient(to right top, #C5E5FE, #F7EEDA, #FBDBD9);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, background .4s ease, color .4s ease;
display: flex;
/* 月亮"咬出弯月"的遮罩色：浅色主题取浅蓝（与背景同源），dark 在 258 行覆盖 */
--ht-w-night-mask: #C5E5FE;
}
/* 白天/夜晚 SVG 元素互斥显示（仅装饰层切换，不再切换背景） */
.halotab-widget-weather .weather-app .ht-w-night{ display: none; }
.halotab-widget-weather .weather-app[data-period="night"] .ht-w-day{ display: none; }
.halotab-widget-weather .weather-app[data-period="night"] .ht-w-night{ display: block; }
/* weather 卡片内的内容层在装饰背景之上 */
.halotab-widget-weather .weather-app > .weather{ position: relative; z-index: 1; }
/* ============================================================
* 装饰性 SVG 背景：纯 SVG 光晕 + 星点 + 语义图标（云朵），不依赖外网图片。
* - 跟其它 widget 用同一个 class .halotab-widget-deco-bg 保持风格一致
* - currentColor 接卡片文字色（这里继承自 .weather-app 的 #2b3138）
* - 永远在内容层之下、不拦截事件
* ============================================================ */
.halotab-widget-weather .halotab-widget-deco-bg{
position: absolute;
inset: 0;
pointer-events: none;
color: var(--ht-deco-color, currentColor);
z-index: 0;
}
.halotab-widget-weather .halotab-widget-deco-bg svg{
width: 100%;
height: 100%;
display: block;
}
/* 云朵缓慢飘动：远景右飘、近景左飘，形成视差感
* 周期长（30s/40s）+ 位移很小（≤6%），保证不会让卡片"晃动"打扰阅读。 */
.halotab-widget-weather .halotab-widget-deco-bg .ht-weather-clouds-back{
animation: ht-weather-cloud-back 40s linear infinite;
transform-origin: 50% 50%;
}
.halotab-widget-weather .halotab-widget-deco-bg .ht-weather-clouds-front{
animation: ht-weather-cloud-front 30s linear infinite;
transform-origin: 50% 50%;
}
@keyframes ht-weather-cloud-back{
0% { transform: translateX(-2%); }
50% { transform: translateX(4%); }
100% { transform: translateX(-2%); }
}
@keyframes ht-weather-cloud-front{
0% { transform: translateX(3%); }
50% { transform: translateX(-3%); }
100% { transform: translateX(3%); }
}
@media (prefers-reduced-motion: reduce){
.halotab-widget-weather .halotab-widget-deco-bg .ht-weather-clouds-back,
.halotab-widget-weather .halotab-widget-deco-bg .ht-weather-clouds-front{
animation: none;
}
}
.halotab-widget-weather .weather{
width: 100%; height: 100%;
display: flex; flex-direction: column;
gap: 6px;
min-height: 0;
}
/* ---------- 顶部：省 · 区（左上角） ---------- */
.halotab-widget-weather #city{
flex: 0 0 auto;
align-self: flex-start; /* 不被父级 align-items 拉伸/居中 */
font-size: 13px;
opacity: .98;
text-align: left; /* 兜底，避免外层 text-align:center 影响 */
width: 100%;
}
.halotab-widget-weather .cityData{
display: inline-flex; align-items: center; gap: 4px;
position: relative;
font-weight: 600;
letter-spacing: .3px;
margin: 0; /* 紧贴左上角 */
}
.halotab-widget-weather .cityData .hw-sep{
opacity: .85;
font-weight: 400;
}
/* 桌面卡片不再提供"切换城市"入口（统一收敛到详情面板内的下拉） */
/* ---------- 中段：feelsLike + 当前天气 ---------- */
.halotab-widget-weather .weather-center{
flex: 1 1 auto;
min-height: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.halotab-widget-weather .feelsLike{
display: flex; align-items: flex-start;
font-weight: 300; line-height: 1;
letter-spacing: -1px;
}
.halotab-widget-weather .feelsLike .hw-feels-num{
font-size: clamp(34px, 12cqi, 56px);
font-variant-numeric: tabular-nums;
}
.halotab-widget-weather .feelsLike .hw-feels-unit{
font-size: clamp(16px, 5cqi, 24px);
margin-top: .25em;
margin-left: 2px;
opacity: .9;
}
.halotab-widget-weather .weather-icon{
display: flex; flex-direction: column; align-items: flex-end;
gap: 4px;
min-width: 0;
text-align: right;
}
.halotab-widget-weather .weather-icon-Item{
display: flex; align-items: center; gap: 8px;
justify-content: flex-end;
}
.halotab-widget-weather .weather-icon-Item .hw-desc{
font-size: 12px; opacity: .92;
transform: translateY(2px);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 90px;
}
.halotab-widget-weather .weather-icon-Item .hw-ico-now{
font-size: 28px; line-height: 1;
filter: drop-shadow(0 4px 10px rgba(43,49,56,.12));
}
.halotab-widget-weather .hw-range{
font-size: 12px;
text-align: right;
opacity: .92;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------- 底段：未来 5 天小卡（水平 5 等分撑满，垂直对齐 grid 行高） ---------- */
.halotab-widget-weather .weather-card4{
flex: 0 0 auto;
width: 100%;
margin-top: 4px;
}
.halotab-widget-weather .hw-days{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
width: 100%;
}
.halotab-widget-weather .weather-days{
display: flex; flex-direction: column; align-items: center;
justify-content: space-between;
gap: 2px;
padding: 4px 2px;
background: transparent;
border-radius: 8px;
font-size: 11px;
line-height: 1.3;
width: 100%;
height: 100%;
min-width: 0;
box-sizing: border-box;
}
.halotab-widget-weather .weather-days.is-placeholder{ opacity: .45; }
.halotab-widget-weather .weather-days .week{
font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.halotab-widget-weather .weather-days .weatherTips{ line-height: 1; }
.halotab-widget-weather .weather-days .weatherTips .hw-ico{ font-size: 18px; }
.halotab-widget-weather .weather-days .tianQi{
font-size: 11px;
opacity: .92;
font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.text-center{ text-align: center; }
.flex-shrink-0{ flex-shrink: 0; }
/* 暗色模式 · weather 卡片
* 浅色（默认）：晨曦三段渐变 + 深字。
* 暗色：统一暗紫蓝渐变 + 浅字，**不再按 data-period 二次区分昼夜**，
* 避免 light 主题下夜里仍显暗色、dark 主题下白天却变浅的反直觉切换。
* 与 calendar/tools 的暗色基调对齐到同一个"夜紫蓝"色系。
* 注：data-theme="auto" 现已被 JS 解析成 light/dark 实际值（见 halotab-app.js
* 的 applyThemeMode），运行时不会再出现 [data-theme="auto"]，这里保留
* 选择器仅作为 JS 未执行的极端兜底。*/
html[data-theme="dark"] .halotab-widget-weather .weather-app,
html[data-theme="auto"] .halotab-widget-weather .weather-app{
color: #e6ecf7;
background: linear-gradient(to right top, #1f2a44, #2a2547, #3a2a4a);
--ht-w-night-mask: #0f1530;
}
/* 窄卡片：保持底部 5 天预报，仅隐藏当前天气描述文字以缓解拥挤 */
@container (max-width: 320px) {
.halotab-widget-weather .weather-icon-Item .hw-desc{ display: none; }
}
/* ============================================================
* 多 size 自适应（按外层 .halotab-card[data-size] 切换）
* - 4x2（默认）：城市 + 大温度 + 当前图标/范围 + 5 天预报
* - 2x2：左上角城市，居中大温度，右下角天气图标 + 今日温度范围
* - 1x1：城市 + 当前温度（垂直，温度大；其它隐藏）
* ============================================================ */
/* ---------- 2×2 ---------- */
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-app{
padding: 10px 12px;
}
/* 隐藏 5 天预报 */
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-card4{ display: none; }
/* 顶部城市保持原样（左上角） */
.halotab-card[data-size="2x2"] .halotab-widget-weather #city{
font-size: 12px;
}
/* 中段：温度居中（占据剩余空间），右下角 icon + range
* 2x2 下不再用 flex row 布局：因为 .weather-icon 已是 position: absolute 脱流，
* 只剩 .feelsLike 作为唯一普通子项时，flex 容器对它 width:100% 仍会带来 gap/对齐误差，
* 导致温度数字看起来略偏左。改为普通 block 容器（position: relative）后：
* · .feelsLike 用 absolute + inset:0 真正水平&垂直居中
* · .weather-icon 仍然 absolute 钉右下角不变 */
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-center{
flex: 1 1 auto;
display: block;
position: relative;
gap: 0;
}
.halotab-card[data-size="2x2"] .halotab-widget-weather .feelsLike{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.halotab-card[data-size="2x2"] .halotab-widget-weather .feelsLike .hw-feels-num{
font-size: clamp(40px, 28cqi, 72px);
line-height: 1;
font-weight: 400;
}
.halotab-card[data-size="2x2"] .halotab-widget-weather .feelsLike .hw-feels-unit{
font-size: clamp(16px, 9cqi, 22px);
}
/* 右下角：图标 + 今日温度范围（垂直） */
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-icon{
position: absolute;
right: 0;
bottom: 0;
align-items: flex-end;
gap: 2px;
}
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-icon-Item .hw-desc{ display: none; }
.halotab-card[data-size="2x2"] .halotab-widget-weather .weather-icon-Item .hw-ico-now{
font-size: clamp(20px, 13cqi, 30px);
}
.halotab-card[data-size="2x2"] .halotab-widget-weather .hw-range{
font-size: clamp(10px, 5cqi, 12px);
opacity: .9;
}
/* ---------- 1×1 ---------- */
.halotab-card[data-size="1x1"] .halotab-widget-weather .weather-app{
padding: 6px 8px;
}
.halotab-card[data-size="1x1"] .halotab-widget-weather .weather{
align-items: center;
justify-content: center;
gap: 2px;
}
/* 隐藏右侧 icon + range，5 天预报 */
.halotab-card[data-size="1x1"] .halotab-widget-weather .weather-icon,
.halotab-card[data-size="1x1"] .halotab-widget-weather .weather-card4{ display: none; }
/* 城市文字缩小并居中 */
.halotab-card[data-size="1x1"] .halotab-widget-weather #city{
align-self: center;
text-align: center;
font-size: clamp(10px, 13cqi, 13px);
width: 100%;
}
.halotab-card[data-size="1x1"] .halotab-widget-weather .cityData{
display: inline-flex;
justify-content: center;
width: 100%;
font-weight: 600;
}
/* 1×1 简化：省份隐藏，只留区县 */
.halotab-card[data-size="1x1"] .halotab-widget-weather .cityData .hw-prov,
.halotab-card[data-size="1x1"] .halotab-widget-weather .cityData .hw-sep{
display: none;
}
/* 中段：温度居中、加大、占主视觉 */
.halotab-card[data-size="1x1"] .halotab-widget-weather .weather-center{
flex: 1 1 auto;
justify-content: center;
gap: 0;
}
.halotab-card[data-size="1x1"] .halotab-widget-weather .feelsLike{
align-items: baseline;
justify-content: center;
width: 100%;
}
.halotab-card[data-size="1x1"] .halotab-widget-weather .feelsLike .hw-feels-num{
font-size: clamp(28px, 44cqi, 56px);
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
}
.halotab-card[data-size="1x1"] .halotab-widget-weather .feelsLike .hw-feels-unit{
font-size: clamp(12px, 16cqi, 20px);
}
/* ----------------------------------------------------------
* 详情面板（点击放大）—— mTab "weather-window" 风格
* ---------------------------------------------------------- */
.ht-appbox-body[data-key="weather"]{
padding: 30px 60px;
overflow: auto;
display: block;
box-sizing: border-box;
/* 详情面板复用同一套晨曦渐变作为浅色主题底；
* 与卡片相同：背景仅由 data-theme 控制，不再被 data-period 改写，
* 这样夜里 19~7 点用户切到 light 时，详情面板也保持浅色，跟卡片一致。 */
background: linear-gradient(to right top, #C5E5FE, #F7EEDA, #FBDBD9);
transition: background .4s ease, color .4s ease;
}
html[data-theme="dark"] .ht-appbox-body[data-key="weather"],
html[data-theme="auto"] .ht-appbox-body[data-key="weather"]{
background: linear-gradient(to right top, #1f2a44, #2a2547, #3a2a4a);
color: #e6ecf7;
}
/* 详情面板内的大温度数字、白底文字模块在暗色下继承同色 */
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] .weather-window-weather,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] .weather-window-weather,
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] .weather-window-maxWeatherNum,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] .weather-window-maxWeatherNum{
color: #e6ecf7;
}
/* 7 天预报小卡：白底改成半透明玻璃，与暗色背景融合 */
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] .weather-window-weather-days,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] .weather-window-weather-days{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.08);
color: #e6ecf7;
}
.weather-window-weather{
display: flex; flex-direction: column;
width: 100%;
height: 100%; /* 详情面板撑满 AppBox 内容区，便于中段 flex:1 居中 */
min-height: 0;
gap: 14px;
color: #1a1f25; /* 黑色文字加深（非彩色文字均继承此色） */
font-weight: 500; /* 黑色字体稍微加宽（彩色字会被各自规则覆盖） */
}
/* 暗色态由上方 [data-theme] 规则改写文字色，这里不再强制 */
/* 顶部一行：左侧"省·区 + 切换/IP定位 + 更新时间"（关闭按钮复用 appBox 自带） */
.weather-window-weather-container{
position: relative;
display: flex; align-items: center; justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
min-height: 32px;
}
.weather-window-city{
display: flex; align-items: center; gap: 12px;
min-width: 0;
}
.weather-window-cityData{
display: inline-flex; align-items: center;
gap: 4px;
font-size: 18px;
font-weight: 600;
letter-spacing: .3px;
position: relative;
flex-wrap: wrap;
}
.weather-window-cityData .hw-d-sep{ opacity: .5; font-weight: 400; }
/* ----------------------------------------------------------
* mTab 风格：城市名后面跟一个圆形定位图标按钮（.weather-window-position）
* 点击展开右侧搜索区（.weather-window-citySearch / .hw-d-editor）
* ---------------------------------------------------------- */
.weather-window-position{
display: inline-flex; align-items: center;
margin-left: 8px;
}
.weather-window-position .hw-d-toggle{
width: 26px; height: 26px;
padding: 0;
border: 1px solid rgba(0,0,0,.1);
border-radius: 50%;
background: rgba(255,255,255,.8);
color: #4f8cff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.weather-window-position .hw-d-toggle:hover{
background: #fff;
border-color: rgba(79,140,255,.55);
color: #3a78ee;
transform: translateY(-1px);
}
.weather-window-position .hw-d-toggle svg{ display: block; }
html[data-theme="dark"] .weather-window-position .hw-d-toggle,
html[data-theme="auto"] .weather-window-position .hw-d-toggle{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.14);
color: #8fc1ff;
}
html[data-theme="dark"] .weather-window-position .hw-d-toggle:hover,
html[data-theme="auto"] .weather-window-position .hw-d-toggle:hover{
background: rgba(255,255,255,.16);
border-color: rgba(143,193,255,.55);
color: #c5dbff;
}
/* mTab 风格搜索框：内联在 cityData 右侧，承担"输入 LocationID / 经纬度 + 确认 + 重新定位 + 取消" */
.weather-window-citySearch{
display: inline-flex; align-items: center; gap: 8px;
margin-left: 12px;
}
.weather-window-citySearch[hidden]{ display: none !important; }
.weather-window-citySearchInner{
display: inline-flex; align-items: center;
}
/* 模拟 el-select：白底圆角、内含输入 + 右侧下拉箭头 */
.weather-window-citySearch .hw-d-select{
width: 240px;
position: relative;
}
.weather-window-citySearch .hw-d-select-wrapper{
position: relative;
display: flex; align-items: center;
height: 32px;
padding: 0 10px;
border: 1px solid rgba(0,0,0,.12);
border-radius: 8px;
background: rgba(255,255,255,.85);
box-shadow: 0 0 0 0 rgba(79,140,255,0);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.weather-window-citySearch .hw-d-select-wrapper:hover{
border-color: rgba(79,140,255,.55);
background: #fff;
}
.weather-window-citySearch .hw-d-select-wrapper:focus-within{
border-color: #4f8cff;
background: #fff;
box-shadow: 0 0 0 3px rgba(79,140,255,.18);
}
.weather-window-citySearch .hw-d-select-input{
flex: 1 1 auto;
display: flex; align-items: center;
min-width: 0;
}
.weather-window-citySearch .hw-d-input{
flex: 1 1 auto;
width: 100%;
height: 28px;
border: 0;
outline: none;
background: transparent;
color: #2b3138;
font-size: 13px;
font-variant-numeric: tabular-nums;
padding: 0;
}
.weather-window-citySearch .hw-d-input::placeholder{ color: rgba(0,0,0,.4); }
.weather-window-citySearch .hw-d-select-suffix{
flex: 0 0 auto;
display: flex; align-items: center;
margin-left: 6px;
color: rgba(43,49,56,.6);
pointer-events: none;
}
.weather-window-citySearch .hw-d-select-caret svg{ display: block; }
/* 输入校验失败：整组高亮红 */
.weather-window-citySearch.is-invalid .hw-d-select-wrapper{
border-color: #e26060;
box-shadow: 0 0 0 3px rgba(226,96,96,.18);
}
/* 暗色 */
html[data-theme="dark"] .weather-window-citySearch .hw-d-select-wrapper,
html[data-theme="auto"] .weather-window-citySearch .hw-d-select-wrapper{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-select-wrapper:hover,
html[data-theme="auto"] .weather-window-citySearch .hw-d-select-wrapper:hover{
background: rgba(255,255,255,.12);
border-color: rgba(143,193,255,.55);
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-select-wrapper:focus-within,
html[data-theme="auto"] .weather-window-citySearch .hw-d-select-wrapper:focus-within{
background: rgba(255,255,255,.14);
border-color: #8fc1ff;
box-shadow: 0 0 0 3px rgba(143,193,255,.18);
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-input,
html[data-theme="auto"] .weather-window-citySearch .hw-d-input{
color: #e6edf6;
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-input::placeholder,
html[data-theme="auto"] .weather-window-citySearch .hw-d-input::placeholder{
color: rgba(230,237,246,.45);
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-select-suffix,
html[data-theme="auto"] .weather-window-citySearch .hw-d-select-suffix{
color: rgba(230,237,246,.6);
}
/* 确认按钮：主色实心 */
.weather-window-citySearch .hw-d-applybtn{
height: 32px;
padding: 0 14px;
border: 1px solid rgba(79,140,255,.55);
border-radius: 8px;
background: #4f8cff;
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.weather-window-citySearch .hw-d-applybtn:hover{
background: #3a78ee;
border-color: #3a78ee;
}
.weather-window-citySearch .hw-d-applybtn:disabled{
opacity: .55;
cursor: not-allowed;
}
/* 重新获取位置：圆形图标按钮，与左侧切换按钮风格一致 */
.weather-window-citySearch .weather-window-clearPosition,
.weather-window-citySearch .hw-d-cancelbtn{
width: 28px; height: 28px;
padding: 0;
border: 1px solid rgba(0,0,0,.1);
border-radius: 50%;
background: rgba(255,255,255,.85);
color: #4f8cff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.weather-window-citySearch .weather-window-clearPosition:hover,
.weather-window-citySearch .hw-d-cancelbtn:hover{
background: #fff;
border-color: rgba(79,140,255,.55);
color: #3a78ee;
transform: translateY(-1px);
}
.weather-window-citySearch .weather-window-clearPosition[disabled]{
opacity: .55; cursor: not-allowed; transform: none;
}
.weather-window-citySearch .hw-d-cancelbtn{ color: #6b7280; }
.weather-window-citySearch .hw-d-cancelbtn:hover{ color: #2b3138; }
html[data-theme="dark"] .weather-window-citySearch .weather-window-clearPosition,
html[data-theme="auto"] .weather-window-citySearch .weather-window-clearPosition,
html[data-theme="dark"] .weather-window-citySearch .hw-d-cancelbtn,
html[data-theme="auto"] .weather-window-citySearch .hw-d-cancelbtn{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.14);
color: #8fc1ff;
}
html[data-theme="dark"] .weather-window-citySearch .hw-d-cancelbtn,
html[data-theme="auto"] .weather-window-citySearch .hw-d-cancelbtn{ color: rgba(230,237,246,.65); }
html[data-theme="dark"] .weather-window-citySearch .weather-window-clearPosition:hover,
html[data-theme="auto"] .weather-window-citySearch .weather-window-clearPosition:hover,
html[data-theme="dark"] .weather-window-citySearch .hw-d-cancelbtn:hover,
html[data-theme="auto"] .weather-window-citySearch .hw-d-cancelbtn:hover{
background: rgba(255,255,255,.16);
border-color: rgba(143,193,255,.55);
color: #c5dbff;
}
.weather-window-citySearch .weather-window-clearPosition svg,
.weather-window-citySearch .hw-d-cancelbtn svg{ display: block; }
/* 重新定位按钮"加载中"旋转 */
.weather-window-citySearch .weather-window-clearPosition.is-loading svg{
animation: hw-spin 1s linear infinite;
}
@keyframes hw-spin{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.weather-window-updateTime{
font-size: 12px;
opacity: .85;
font-variant-numeric: tabular-nums;
margin-left: auto; /* 即便不换行也只占自身宽度，左对齐顶端块在前 */
margin-right: 0;
}
/* 在 flex-start 布局下让"更新时间"紧贴城市行右侧，但永远在关闭按钮左边（受 container padding-right 保护） */
.weather-window-weather-container > .weather-window-updateTime{
margin-left: 4px;
}
/* 右上关闭按钮已移除，复用 appBox 自带关闭按钮 */
/* 中段：card / card2 / card3 整体垂直居中并撑满剩余空间 */
.weather-window-mid{
flex: 1 1 auto;
min-height: 0;
display: flex; flex-direction: column;
justify-content: center; /* 垂直居中 */
gap: 12px;
}
/* 大温度 + 当前图标 */
.weather-window-weather-card{
display: flex; align-items: center; gap: 16px;
padding: 4px 0 0;
}
.weather-window-maxWeatherNum{
font-size: 120px;
font-weight: 700;
line-height: 1;
letter-spacing: -3px;
font-variant-numeric: tabular-nums;
color: #1a1f25;
}
/* 暗色态由上方 [data-theme] 规则改写文字色，这里不再强制 */
.weather-window-weather-icon .hw-d-ico-big{
font-size: 80px; line-height: 1;
display: inline-block;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}
/* ----------------------------------------------------------
* 和风图标配色（qweather-icons 为单色字体，统一通过 color 着色）
* 作用域：限定在天气卡片 .halotab-widget-weather 与详情面板 [data-key="weather"] 内，
* 避免污染外部潜在的 qweather 用法。
* 分组依据：QWeather IconCode（https://dev.qweather.com/docs/resource/icons/）
* ---------------------------------------------------------- */
.halotab-widget-weather i[class*="qi-"],
.ht-appbox-body[data-key="weather"] i[class*="qi-"]{
color: #6b7280; /* 兜底中性灰，下面按 code 覆盖 */
transition: color .2s ease;
}
/* 简写：用统一前缀 .hw-w-icon 表示「天气作用域内的某个图标」 */
.halotab-widget-weather i.qi-100,
.ht-appbox-body[data-key="weather"] i.qi-100{ color:#f5a623; } /* 晴（白） */
.halotab-widget-weather i.qi-150,
.ht-appbox-body[data-key="weather"] i.qi-150{ color:#7c8cd9; } /* 晴（夜·月） */
.halotab-widget-weather i.qi-101,
.ht-appbox-body[data-key="weather"] i.qi-101,
.halotab-widget-weather i.qi-151,
.ht-appbox-body[data-key="weather"] i.qi-151{ color:#e8b04b; } /* 多云 */
.halotab-widget-weather i.qi-102,
.ht-appbox-body[data-key="weather"] i.qi-102,
.halotab-widget-weather i.qi-152,
.ht-appbox-body[data-key="weather"] i.qi-152{ color:#f0bf5a; } /* 少云 */
.halotab-widget-weather i.qi-103,
.ht-appbox-body[data-key="weather"] i.qi-103,
.halotab-widget-weather i.qi-153,
.ht-appbox-body[data-key="weather"] i.qi-153{ color:#eaaa3c; } /* 晴间多云 */
.halotab-widget-weather i.qi-104,
.ht-appbox-body[data-key="weather"] i.qi-104,
.halotab-widget-weather i.qi-154,
.ht-appbox-body[data-key="weather"] i.qi-154{ color:#7d8794; } /* 阴 */
/* 雨：300/301/305/309/399 中蓝；306/314/315 加深；307/308/316/317/318 暴雨更深 */
.halotab-widget-weather i.qi-300,
.ht-appbox-body[data-key="weather"] i.qi-300,
.halotab-widget-weather i.qi-301,
.ht-appbox-body[data-key="weather"] i.qi-301,
.halotab-widget-weather i.qi-305,
.ht-appbox-body[data-key="weather"] i.qi-305,
.halotab-widget-weather i.qi-309,
.ht-appbox-body[data-key="weather"] i.qi-309,
.halotab-widget-weather i.qi-399,
.ht-appbox-body[data-key="weather"] i.qi-399{ color:#4f8cff; }
.halotab-widget-weather i.qi-306,
.ht-appbox-body[data-key="weather"] i.qi-306,
.halotab-widget-weather i.qi-314,
.ht-appbox-body[data-key="weather"] i.qi-314,
.halotab-widget-weather i.qi-315,
.ht-appbox-body[data-key="weather"] i.qi-315{ color:#3b78f0; }
.halotab-widget-weather i.qi-307,
.ht-appbox-body[data-key="weather"] i.qi-307,
.halotab-widget-weather i.qi-308,
.ht-appbox-body[data-key="weather"] i.qi-308,
.halotab-widget-weather i.qi-316,
.ht-appbox-body[data-key="weather"] i.qi-316,
.halotab-widget-weather i.qi-317,
.ht-appbox-body[data-key="weather"] i.qi-317,
.halotab-widget-weather i.qi-318,
.ht-appbox-body[data-key="weather"] i.qi-318{ color:#2956c8; }
/* 雷阵雨 302/303/304：紫蓝主色 + 暖黄电光高光 */
.halotab-widget-weather i.qi-302,
.ht-appbox-body[data-key="weather"] i.qi-302,
.halotab-widget-weather i.qi-303,
.ht-appbox-body[data-key="weather"] i.qi-303,
.halotab-widget-weather i.qi-304,
.ht-appbox-body[data-key="weather"] i.qi-304{
color:#7c3aed;
filter: drop-shadow(0 0 6px rgba(245,200,80,.55));
}
/* 冻雨 313：青蓝 */
.halotab-widget-weather i.qi-313,
.ht-appbox-body[data-key="weather"] i.qi-313{ color:#22b8cf; }
/* 雪 400/401/407/456/457/499：浅蓝；402/403/408/409/410 更深；404/405/406 雨夹雪偏灰蓝 */
.halotab-widget-weather i.qi-400,
.ht-appbox-body[data-key="weather"] i.qi-400,
.halotab-widget-weather i.qi-401,
.ht-appbox-body[data-key="weather"] i.qi-401,
.halotab-widget-weather i.qi-407,
.ht-appbox-body[data-key="weather"] i.qi-407,
.halotab-widget-weather i.qi-456,
.ht-appbox-body[data-key="weather"] i.qi-456,
.halotab-widget-weather i.qi-457,
.ht-appbox-body[data-key="weather"] i.qi-457,
.halotab-widget-weather i.qi-499,
.ht-appbox-body[data-key="weather"] i.qi-499{ color:#82b9ff; }
.halotab-widget-weather i.qi-402,
.ht-appbox-body[data-key="weather"] i.qi-402,
.halotab-widget-weather i.qi-403,
.ht-appbox-body[data-key="weather"] i.qi-403,
.halotab-widget-weather i.qi-408,
.ht-appbox-body[data-key="weather"] i.qi-408,
.halotab-widget-weather i.qi-409,
.ht-appbox-body[data-key="weather"] i.qi-409,
.halotab-widget-weather i.qi-410,
.ht-appbox-body[data-key="weather"] i.qi-410{ color:#5da6ff; }
.halotab-widget-weather i.qi-404,
.ht-appbox-body[data-key="weather"] i.qi-404,
.halotab-widget-weather i.qi-405,
.ht-appbox-body[data-key="weather"] i.qi-405,
.halotab-widget-weather i.qi-406,
.ht-appbox-body[data-key="weather"] i.qi-406{ color:#7aa6e6; }
/* 雾 500/501/509/510/514/515：雾灰 */
.halotab-widget-weather i.qi-500,
.ht-appbox-body[data-key="weather"] i.qi-500,
.halotab-widget-weather i.qi-501,
.ht-appbox-body[data-key="weather"] i.qi-501,
.halotab-widget-weather i.qi-509,
.ht-appbox-body[data-key="weather"] i.qi-509,
.halotab-widget-weather i.qi-510,
.ht-appbox-body[data-key="weather"] i.qi-510,
.halotab-widget-weather i.qi-514,
.ht-appbox-body[data-key="weather"] i.qi-514,
.halotab-widget-weather i.qi-515,
.ht-appbox-body[data-key="weather"] i.qi-515{ color:#94a3b8; }
/* 霾 502/511/512/513：橙黄警示 */
.halotab-widget-weather i.qi-502,
.ht-appbox-body[data-key="weather"] i.qi-502,
.halotab-widget-weather i.qi-511,
.ht-appbox-body[data-key="weather"] i.qi-511,
.halotab-widget-weather i.qi-512,
.ht-appbox-body[data-key="weather"] i.qi-512,
.halotab-widget-weather i.qi-513,
.ht-appbox-body[data-key="weather"] i.qi-513{ color:#d97706; }
/* 沙尘 503/504/507/508：沙黄褐 */
.halotab-widget-weather i.qi-503,
.ht-appbox-body[data-key="weather"] i.qi-503,
.halotab-widget-weather i.qi-504,
.ht-appbox-body[data-key="weather"] i.qi-504,
.halotab-widget-weather i.qi-507,
.ht-appbox-body[data-key="weather"] i.qi-507,
.halotab-widget-weather i.qi-508,
.ht-appbox-body[data-key="weather"] i.qi-508{ color:#b45309; }
/* 极端 900 热 / 901 冷 / 999 未知 */
.halotab-widget-weather i.qi-900,
.ht-appbox-body[data-key="weather"] i.qi-900{ color:#ef4444; }
.halotab-widget-weather i.qi-901,
.ht-appbox-body[data-key="weather"] i.qi-901{ color:#3b82f6; }
.halotab-widget-weather i.qi-999,
.ht-appbox-body[data-key="weather"] i.qi-999{ color:#9ca3af; }
/* 暗色主题：阴/雾稍提亮，避免发闷 */
html[data-theme="dark"] .halotab-widget-weather i.qi-104,
html[data-theme="auto"] .halotab-widget-weather i.qi-104,
html[data-theme="dark"] .halotab-widget-weather i.qi-154,
html[data-theme="auto"] .halotab-widget-weather i.qi-154,
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] i.qi-104,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] i.qi-104,
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] i.qi-154,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] i.qi-154{ color:#aab3c0; }
html[data-theme="dark"] .halotab-widget-weather i.qi-500,
html[data-theme="auto"] .halotab-widget-weather i.qi-500,
html[data-theme="dark"] .halotab-widget-weather i.qi-501,
html[data-theme="auto"] .halotab-widget-weather i.qi-501,
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] i.qi-500,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] i.qi-500,
html[data-theme="dark"] .ht-appbox-body[data-key="weather"] i.qi-501,
html[data-theme="auto"] .ht-appbox-body[data-key="weather"] i.qi-501{ color:#b6c2d2; }
/* 文字描述行（card2 / card3） */
.weather-window-weather-card2,
.weather-window-weather-card3{
display: flex; flex-wrap: wrap;
gap: 8px 18px;
font-size: 13px;
line-height: 1.6;
}
.weather-window-weather-card2 > span:first-child{
font-size: 16px;
font-weight: 600;
color: #4f8cff;
}
html[data-theme="dark"] .weather-window-weather-card2 > span:first-child,
html[data-theme="auto"] .weather-window-weather-card2 > span:first-child{ color: #8fc1ff; }
.weather-window-weather-card3{ opacity: .95; }
/* 7 天预报：横向 7 等分百分比铺满，纵向 grid 行内同高 */
.weather-window-weather-card4{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 20px;
width: 100%;
margin-top: 4px;
padding-top: 14px;
}
.weather-window-weather-days{
display: flex; flex-direction: column; align-items: center;
justify-content: space-between;
gap: 4px;
padding: 10px 6px;
background: #fff;
border: 1px solid rgba(0,0,0,.05);
border-radius: 38px;
font-size: 12px;
text-align: center;
width: 100%;
height: 300px; /* 固定高度 */
min-width: 0;
box-sizing: border-box;
transition: transform .15s ease, box-shadow .15s ease;
}
.weather-window-weather-days.is-placeholder{ opacity: .45; }
.weather-window-weather-days:hover{
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(79,140,255,.18);
}
.weather-window-weather-days.is-placeholder:hover{
transform: none; box-shadow: none;
}
.weather-window-week{
font-weight: 600;
font-size: 13px;
}
.weather-window-day{
font-size: 11px; opacity: .85;
font-variant-numeric: tabular-nums;
}
.weather-window-WeatherItemIcon{
display: flex; flex-direction: column; gap: 2px;
margin: 4px 0;
font-size: 11px;
opacity: 1;
}
.weather-window-WeatherItemIcon > div{
display: inline-flex; align-items: center; justify-content: center;
gap: 4px;
}
.weather-window-WeatherItemIcon .hw-d-ico{
font-size: 24px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.weather-window-tianQi{
font-size: 13px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.weather-window-tianQi > span:first-child{ color: #f97316; }
.weather-window-tianQi > span:last-child{ color: #3b82f6; }
.weather-window-weatherTips{
font-size: 11px;
opacity: .9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.weather-window-weatherTips > div{
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-empty{
text-align: center; padding: 24px; opacity: .6; font-size: 13px;
}
/* 窄屏：保持 7 列（今天 + 后 6 天 = 共 7 天），仅压缩内部尺寸 */
@media (max-width: 880px) {
.weather-window-weather-card4{ gap: 6px; }
.weather-window-weather-days{ padding: 8px 4px; font-size: 11px; }
.weather-window-week{ font-size: 12px; }
.weather-window-WeatherItemIcon .hw-d-ico{ font-size: 20px; }
.weather-window-tianQi{ font-size: 12px; }
}
@media (max-width: 560px) {
.weather-window-weather-card4{ gap: 4px; }
.weather-window-weather-days{ padding: 6px 2px; font-size: 10px; gap: 2px; }
.weather-window-week{ font-size: 11px; }
.weather-window-day{ font-size: 10px; }
.weather-window-WeatherItemIcon{ font-size: 10px; gap: 1px; margin: 2px 0; }
.weather-window-WeatherItemIcon .hw-d-ico{ font-size: 16px; }
.weather-window-tianQi{ font-size: 11px; }
.weather-window-weatherTips{ display: none; }
.weather-window-maxWeatherNum{ font-size: 88px; letter-spacing: -2px; }
.weather-window-weather-icon .hw-d-ico-big{ font-size: 60px; }
}
/* 注：旧 AppBox 城市选择器（.hw-pick-* / data-key="weather-picker"）已废弃，
* 切换城市改由详情面板顶部 .hw-d-sel-prov / .hw-d-sel-city / .hw-d-sel-dist
* 三级