/*!
* ZYUI v2.9 — 完整样式合并包（zyui.css）
* ════════════════════════════════════════════════════════
*
* 本文件包含 ZYUI 所有核心组件的完整样式，页面只需引入这一个文件。
*
* 目录：
*
* ① 基础层（Base）
* CSS 主题变量 / Anti-FOUC / 重置 / 卡片 / 按钮 / 布局 / 标签页 / 表单项目
*
* ② 表单控件（Form Controls）
* 输入框（zyinput）/ 密码框（zypassword）/ 复选框（zycheckbox）
* 单选框（zyradio）/ 下拉选择（zyselect）/ 日期（zydate）
* 树选择（zytree）/ 图片上传（zyimage）/ 文件上传（zyfile）
* 模板选择（zytemplate）/ 子栏目ID（zychildrenids）
* 颜色选择（zycolor）/ 权限（zyauth）
*
* ③ 弹窗消息（Layer & Modal）
* 消息提示（ZYLayer）/ 模态框（ZYModal）
*
* ④ 表格列表（Table & List）
* 表格（ZYTable）/ 分页（ZYPage）/ 列表（ZYList）
* 工具栏 / 下拉菜单 / 状态标签 / 列拖拽
*
* 以下模块单独按需加载，不包含在此文件：
* zyui-form-editor.css ← 富文本编辑器（zyui-form-editor.js 触发）
* zyui-carousel.css ← 轮播组件（zyui-carousel.js 触发）
* zyui-chat.css ← 聊天组件（独立使用，手动引入）
*
* ════════════════════════════════════════════════════════
*/
/* ════════════════════════════════════════════════════
* ▸ 图标字体（iconfont，项目 3708340）
* 字体文件放在 font/ 目录，页面引入 zyui.css 即可使用
* 图标类：.iconfont.icon-24gl-home11 / icon-24gl-folder
* icon-24gl-folderPlus / icon-24gl-folderMinus
* ════════════════════════════════════════════════════ */
/* iconfont 已迁移为 SVG mask-image，此处删除 */
/* ════════════════════════════════════════════════════
* ① 基础层
* ════════════════════════════════════════════════════ */
/* ╔═══════════════════════════════════════════════════════╗
* ║ 1. CSS 主题变量 ║
* ╚═══════════════════════════════════════════════════════╝
*
* 所有组件统一使用 --zy-primary 系列，方便整体换色。
* 运行时调用 ZYTheme.set(color) 可动态切换主题。
*/
:root { /* 原始颜色值（zyui-theme.js 运行时修改这四个） */ --zy-color: #1890ff; /* 主色 */ --zy-color-dark: #047ceb; /* hover 深色 */ --zy-color-active: #0068d7; /* active 更深色 */ --zy-color-light: rgba(24,144,255,0.1); /* 浅背景（选中遮罩等） */ /* 组件内部统一引用的别名 */ --zy-primary: var(--zy-color, #1890ff); --zy-primary-rgb: 24, 144, 255; /* RGB 分量，用于 rgba() */ --zy-primary-dark: var(--zy-color-dark, #047ceb); --zy-primary-darker: var(--zy-color-active, #0068d7); /* 通用边框色 */ --zy-border: #e6e6e6; /* === 滚动条封装变量（组件通过 .zy-scrollbar 类引用，主题色由 zyui-theme.js 自动跟随）=== */ --zy-sb-size: 8px; /* 滚动条宽/高 */ --zy-sb-radius: 99px; /* 滑块圆角 */ --zy-sb-thumb: var(--zy-primary, #1890ff); /* 滑块颜色 */ --zy-sb-thumb-hover: var(--zy-primary-dark, #096dd9); /* 滑块 hover */ --zy-sb-track: transparent; /* 轨道背景 */ }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 2. Anti-FOUC ║
* ╚═══════════════════════════════════════════════════════╝
*
* 页面加载时 JS 尚未替换原生控件，让它们临时不可见，
* 避免出现"原生 → 自定义"的闪烁。
* JS 渲染完成后会添加 data-zyui-rendered 属性，解除此规则。
*/
select:not([zy-ignore]):not(.zy-native):not([data-zyui-rendered]),
input[zy-skin][type="checkbox"]:not([zy-ignore]):not([data-zyui-rendered]),
input[zy-skin][type="radio"]:not([zy-ignore]):not([data-zyui-rendered]),
input.zydate:not([zy-ignore]):not([data-zyui-rendered]),
input.zytemplate:not([zy-ignore]):not([data-zyui-rendered]),
input.zytree:not([zy-ignore]):not([data-zyui-rendered]),
input.zyimage:not([zy-ignore]):not([data-zyui-rendered]),
input.zyfile:not([zy-ignore]):not([data-zyui-rendered]),
textarea.zyeditor:not([zy-ignore]):not([data-zyui-rendered]) { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 3. 重置 & 基础样式 ║
* ╚═══════════════════════════════════════════════════════╝ */
/* 消除常用元素的默认 margin/padding，移除移动端点击高亮 */
blockquote, body, button, dd, div, dl, dt, form,
h1, h2, h3, h4, h5, h6, input, li, ol, p, pre,
td, textarea, th, ul { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { line-height: 1.6; color: #333; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif; }
/* ── 列表页：body 撑满 iframe，zy-card 填满 body ── */
html, body { margin: 0; padding: 0; }
a { color: #333; text-decoration: none; }
a:hover { color: #777; }
/* 原生 select 保留样式（加 [zy-ignore] 或 .zy-native 跳过 JS 美化） */
select[zy-ignore],
select.zy-native { min-width: 180px; line-height: 39px; height: 39px; border: 1px solid var(--zy-border, #e6e6e6); padding: 0 28px 0 8px; appearance: none; -webkit-appearance: none; /* 自定义下拉箭头（inline SVG，避免额外图片请求） */ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center; }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 4. 卡片容器 ║
* ╚═══════════════════════════════════════════════════════╝
*
* 用法：
*/
.zy-card { margin: 15px; padding: 10px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.zy-card-body { padding: 15px; }
/* ── 列表页基础重置（body.zy-page / body.zy-list-page）──────────────────── */
/* 防止页面出现滚动条；zy-card/zy-card-body 保留原有 margin/padding，不注入 flex */
body.zy-page,
body.zy-list-page { margin: 0; padding: 0; height: 100vh; overflow: hidden; background: var(--zy-bg-page, var(--bg-color, #f6f8fb)); }
/* 移动端解锁滚动: 视口小内容易超高, 必须允许整页滚动 */
@media(max-width:768px) {
body.zy-page,
body.zy-list-page { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
}
/* ╔═══════════════════════════════════════════════════════╗
* ║ 5. 按钮系统 ║
* ╚═══════════════════════════════════════════════════════╝ */
/* ── 基础按钮 ─────────────────────────────────────────── */
/* inline-flex 让内嵌 SVG 图标垂直居中，不依赖 line-height */
.zy-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; height: 38px; background-color: var(--zy-primary, #1890ff); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color .3s, transform .3s, box-shadow .3s; margin: 2px; /* 相邻按钮间距 */ }
.zy-btn:hover { background-color: var(--zy-primary-dark, #047ceb); color: #fff; }
.zy-btn i { margin-right: 5px; }
/* 图标与文字间距 */
/* 禁用态：降低不透明度，屏蔽所有交互，阻止 hover 上移动效 */
.zy-btn[disabled],
.zy-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; pointer-events: none; background-color: #f0f0f0; color: #999; border-color: #ddd; }
/* 次级主按钮（比 .zy-btn 深一档，适合"确认"等强调操作） */
.zy-btn2 { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; height: 38px; background-color: var(--zy-primary-darker, #0068d7); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color .3s, transform .3s, box-shadow .3s; margin: 2px; }
.zy-btn2:hover { background-color: var(--zy-primary, #1890ff); color: #fff; }
.zy-btn2 i { margin-right: 5px; }
.zy-btn2[disabled],
.zy-btn2:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; pointer-events: none; background-color: #f0f0f0; color: #999; border-color: #ddd; }
/* ── 颜色变体 ─────────────────────────────────────────── */
.zy-btn-primary { background: var(--zy-primary, #1890ff); color: white; border: 1px solid var(--zy-primary, #1890ff); }
.zy-btn-primary:hover:not(:disabled) { background: var(--zy-primary-dark, #047ceb); border-color: var(--zy-primary-dark, #047ceb); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--zy-primary-rgb), 0.2); }
.zy-btn-secondary { background: #6c757d; color: white; border: 1px solid #6c757d; }
.zy-btn-secondary:hover:not(:disabled) { background: #545b62; border-color: #545b62; }
.zy-btn-red { background-color: #dc3545; color: #fff; border: 1px solid #dc3545; }
.zy-btn-red:hover:not(:disabled) { background-color: #b02a37; border-color: #b02a37; }
.zy-btn-orange { background-color: #faad14; color: #fff; border: 1px solid #faad14; }
.zy-btn-orange:hover:not(:disabled) { background-color: #d48806; border-color: #d48806; }
.zy-btn-green { background-color: #28a745; color: #fff; border: 1px solid #28a745; }
.zy-btn-green:hover:not(:disabled) { background-color: #1e7e34; border-color: #1e7e34; }
/* cyan 用深蓝绿色，适合"还原/导出"等次要操作 */
.zy-btn-cyan { background-color: #2f4056; color: #fff; border: 1px solid #2f4056; }
.zy-btn-cyan:hover:not(:disabled) { background-color: #1f2c3a; border-color: #1f2c3a; }
.zy-btn-blue { background-color: #1890ff; color: #fff; border: 1px solid #1890ff; }
.zy-btn-blue:hover:not(:disabled) { background-color: #0c6bcf; border-color: #0c6bcf; }
.zy-btn-purple { background-color: #a233c6; color: #fff; border: 1px solid #a233c6; }
.zy-btn-purple:hover:not(:disabled) { background-color: #7b28a0; border-color: #7b28a0; }
.zy-btn-black { background-color: #2f363c; color: #fff; border: 1px solid #2f363c; }
.zy-btn-black:hover:not(:disabled) { background-color: #1a1f24; border-color: #1a1f24; }
/* gray 浅色背景，适合"取消/关闭"等低优先级操作 */
.zy-btn-gray { background-color: #fafafa; color: #5f5f5f; border: 1px solid var(--zy-border, #e6e6e6); }
.zy-btn-gray:hover:not(:disabled) { background-color: #e9ecef; border-color: #d0d0d0; }
/* 语义化别名 */
.zy-btn-normal { background-color: #f8f8f8; color: #333; border: 1px solid var(--zy-border, #e6e6e6); }
.zy-btn-normal:hover:not(:disabled) { background-color: var(--zy-border, #e6e6e6); }
.zy-btn-danger { background-color: #dc3545; color: #fff; }
.zy-btn-danger:hover:not(:disabled) { background-color: #c82333; }
/* ── 尺寸变体 ─────────────────────────────────────────── */
.zy-btn-xs { height: 22px; padding: 0 5px; font-size: 12px; }
/* 行内操作（表格行按钮） */
.zy-btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
/* 小型操作（弹窗内按钮） */
.zy-btn-sm i { font-size: 13px !important; }
.zy-btn-xs i { font-size: 12px !important; }
/* ── 按钮组 ───────────────────────────────────────────── */
/* 多按钮等分排列，适合弹窗底部操作区 */
.zy-btn-group { display: flex; flex-wrap: wrap; gap: 5px; }
.zy-btn-group .zy-btn { flex: 1; min-width: 30%; margin: 0; }
.zy-btn-group .zy-btn:only-child { flex: 0 1 100%; }
/* 单按钮不强制撑满 */
@media (max-width: 768px) {
.zy-btn { padding: 0 5px; }
/* 移动端减小内边距，防文字溢出 */
}
/* ╔═══════════════════════════════════════════════════════╗
* ║ 6. 页面布局 ║
* ╚═══════════════════════════════════════════════════════╝ */
/* ── 主内容区 ─────────────────────────────────────────── */
.mainBox { margin: 20px; padding: 15px; background: #fff; border-radius: 8px; }
/* 旧式，向后兼容 */
/* === 滚动条封装工具类：给需要主题色滚动条的元素加上此类即可 === */
.zy-scrollbar { scrollbar-width: thin; scrollbar-color: var(--zy-sb-thumb) var(--zy-sb-track); }
.zy-scrollbar::-webkit-scrollbar { width: var(--zy-sb-size); height: var(--zy-sb-size); }
.zy-scrollbar::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.zy-scrollbar::-webkit-scrollbar-track { background: var(--zy-sb-track); border-radius: var(--zy-sb-radius); }
.zy-scrollbar::-webkit-scrollbar-thumb { background: var(--zy-sb-thumb); border-radius: var(--zy-sb-radius); }
.zy-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--zy-sb-thumb-hover); }
.zy-scrollbar::-webkit-scrollbar-corner { background: transparent; }
.zy-main-box { width: 100%; position: relative; background: #fff; border-radius: 8px; overflow: auto; padding-bottom: 80px; /* 为固定底栏预留 */ scrollbar-width: thin; scrollbar-color: var(--zy-sb-thumb) rgba(0,0,0,.06); }
.zy-main-box::-webkit-scrollbar-track { background: rgba(0,0,0,.06); } /* 轨道淡灰，覆盖 .zy-scrollbar 默认透明 */
/* ── 左右分栏（批量编辑页：左侧列表 + 右侧表单）──────── */
.zy-split { display: flex; overflow: hidden; }
.zy-split-left { flex: 0 0 var(--split-left, 320px); /* 宽度可通过 CSS 变量调整 */ overflow-y: auto; border-right: 1px solid var(--bd, #e4eaf2); padding-right: 15px; margin-right: 15px; }
.zy-split-right { flex: 1; min-width: 0; overflow-y: auto; }
.zy-split-left-head { padding: 10px 0; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--bd, #e4eaf2); }
.zy-split-left-search { padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.zy-split-left .batch-search-container { display: flex; gap: 6px; margin-top: 10px; }
.zy-split-left .batch-search-input { flex: 1; }
/* 左侧列表 */
.zy-split-left-list { list-style: none; border: 1px solid var(--bd, #e4eaf2); border-radius: 5px; padding: 10px; }
.zy-split-left-list li { padding: 8px 14px; cursor: pointer; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .15s; }
.zy-split-left-list li:hover { background: var(--zy-primary-light, #e8f4ff); }
.zy-split-left-list li.zy-active { background: var(--zy-primary, #1677ff); color: #fff; }
/* 批量编辑专用列表 */
.zy-split-left .batch-list { list-style: none; border: 1px solid var(--zy-border, #e6e6e6); border-radius: 4px; max-height: 500px; overflow-y: auto; }
.zy-split-left .batch-list-item { padding: 10px 12px; border-bottom: 1px solid var(--zy-border, #e6e6e6); cursor: pointer; transition: all 0.2s; }
.zy-split-left .batch-list-item:last-child { border-bottom: none; }
.zy-split-left .batch-list-item:hover { background: rgba(var(--zy-primary-rgb), 0.06); }
.zy-split-left .batch-list-item.active { background: var(--zy-primary, #1890ff); color: #fff; }
/* 批量列表细滚动条 */
.zy-split-left .batch-list::-webkit-scrollbar { width: 6px; height: 6px; }
.zy-split-left .batch-list::-webkit-scrollbar-track { background: white; border-radius: 4px; }
.zy-split-left .batch-list::-webkit-scrollbar-thumb { background: var(--zy-border, #e6e6e6); border-radius: 4px; }
.zy-split-left .batch-list::-webkit-scrollbar-corner { background: #f6f6f6; }
/* ── 固定底栏（保存/取消操作区）──────────────────────── */
.zy-bottom { background: #fff; border: 1px solid var(--bd, #e4eaf2); z-index: 1009; box-sizing: border-box; margin: 20px 0px 10px 0px; }
.zy-bottom-content { display: flex; align-items: center; gap: 8px; padding: 8px 15px; }
.zy-button-container { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.zy-button-container > .zy-btn { white-space: nowrap; }
/* fixed 模式：吸底显示，遮住页面内容（body 同步加 .has-fixed-bottom）*/
.zy-bottom.fixed { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; box-shadow: 0 -2px 8px rgba(0,0,0,.06); border-left: none; border-right: none; border-bottom: none; }
body.has-fixed-bottom { padding-bottom: 70px; }
body.has-fixed-page { padding-bottom: 40px; }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 7. 标签页 ║
* ╚═══════════════════════════════════════════════════════╝
*
* 用法：
*
*/
.zy-tab { margin: 10px; }
.zy-tab .zy-tab-title { height: 38px; white-space: nowrap; margin: 0; padding: 0; }
.zy-tab .zy-tab-title li { display: inline-flex; align-items: center; height: 100%; padding: 0 15px; cursor: pointer; position: relative; color: #666; margin-bottom: -1px; /* 与内容区边框重叠，实现"连接"视觉效果 */ }
.zy-tab .zy-tab-title li:hover { color: #333; }
/* 激活标签：主色字体 + 上/左/右边框（无底边框），底部白条盖住内容区顶线 */
.zy-tab .zy-tab-title .zy-this { color: var(--zy-primary, #1890ff); font-weight: bold; border: 1px solid #eee; border-bottom: none; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.zy-tab .zy-tab-title .zy-this:after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #fff; /* 白色条遮住内容区顶部边框，视觉上"连通" */ }
.zy-tab .zy-tab-content { padding: 0 10px; border: 1px solid #eee; }
.zy-tab .zy-tab-item { padding: 10px 0; display: none; }
.zy-tab .zy-show { display: block !important; }
.zy-tab .zy-hide { display: none !important; }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 8. 表单项目布局 ║
* ╚═══════════════════════════════════════════════════════╝
*
* 标准表单行：左侧固定宽度标签 + 右侧 flex 控件区
*
*
*
* .zyinput-block / .zyinput-inline 是 .zy-form-content 的别名，
* 三者效果相同，保留别名是为了向后兼容旧模板代码。
*/
.zy-form-item { display: flex; align-items: flex-start; margin-top: 15px; width: 100%; }
/* 标签列：固定宽度，右对齐，padding-top 9px 与输入框高度对齐 */
.zy-form-label { flex: 0 0 auto; min-width: 130px; padding: 9px 12px 9px 0; font-weight: 400; line-height: 20px; text-align: right; color: #555; white-space: nowrap; }
/* 控件区：撑满剩余宽度，flex-wrap 支持"输入框 + 按钮"同行排列 */
.zy-form-content,
.zyinput-block,
.zyinput-inline { flex: 1; min-width: 0; /* 防止 flex 子项撑破父容器 */ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ╔═══════════════════════════════════════════════════════╗
* ║ 9. 栅格系统(12 列) ║
* ╚═══════════════════════════════════════════════════════╝
*
* 用法:
*
*
* 间距变体(在 .zy-row 上加):
* 默认 gap: 15px(对齐 .zy-card margin)
* .zy-row-tight gap: 8px (统计行/紧凑列表)
* .zy-row-loose gap: 24px(独立卡片之间留更多呼吸)
* .zy-row-flush gap: 0 (无缝拼接,如表格行)
*
* 响应式断点(< 1100px 移动端):
* .zy-col-N 默认全部撑满(span 12)→ 所有列变成竖排
* 要在移动端保留分列,显式加 .zy-col-mobile-N 覆盖
* 例:.zy-col-4.zy-col-mobile-12 = 桌面 1/3 宽,手机整行
*
* 设计取舍:跟 layui/bootstrap 的多断点不同,这里只做单断点。
* 后台管理系统 768/992/1200 三段意义不大,保持简单。
*/
.zy-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.zy-row-tight { gap: 8px; }
.zy-row-loose { gap: 24px; }
.zy-row-flush { gap: 0; }
.zy-col-1 { grid-column: span 1; } .zy-col-2 { grid-column: span 2; }
.zy-col-3 { grid-column: span 3; } .zy-col-4 { grid-column: span 4; }
.zy-col-5 { grid-column: span 5; } .zy-col-6 { grid-column: span 6; }
.zy-col-7 { grid-column: span 7; } .zy-col-8 { grid-column: span 8; }
.zy-col-9 { grid-column: span 9; } .zy-col-10 { grid-column: span 10; }
.zy-col-11 { grid-column: span 11; } .zy-col-12 { grid-column: span 12; }
@media (max-width: 1100px) {
/* 默认所有 .zy-col-N 撑满整行(竖排),除非显式给了 .zy-col-mobile-N */
.zy-row > [class*="zy-col-"]:not([class*="zy-col-mobile-"]) { grid-column: 1 / -1; }
.zy-col-mobile-1 { grid-column: span 1; } .zy-col-mobile-2 { grid-column: span 2; }
.zy-col-mobile-3 { grid-column: span 3; } .zy-col-mobile-4 { grid-column: span 4; }
.zy-col-mobile-5 { grid-column: span 5; } .zy-col-mobile-6 { grid-column: span 6; }
.zy-col-mobile-7 { grid-column: span 7; } .zy-col-mobile-8 { grid-column: span 8; }
.zy-col-mobile-9 { grid-column: span 9; } .zy-col-mobile-10 { grid-column: span 10; }
.zy-col-mobile-11 { grid-column: span 11; } .zy-col-mobile-12 { grid-column: span 12; }
}
/* ════════════════════════════════════════════════════
* 组件样式已拆分到各自独立文件，按需引入：
*
* zyui-form-input.css 输入框 / 文本域 / 拖动调宽
* zyui-form-password.css 密码框
* zyui-form-checkbox.css 复选框（普通 / tag / switch）
* zyui-form-radio.css 单选框
* zyui-form-select.css 下拉选择
* zyui-form-date.css 日期选择器
* zyui-form-tree.css 树选择器
* zyui-form-image.css 图片上传
* zyui-form-file.css 文件上传
* zyui-form-template.css 模板选择
* zyui-form-childrenids.css 子栏目 ID 选择
* zyui-form-color.css 颜色选择器
* zyui-form-auth.css 权限组件
* zyui-layer.css 消息提示（ZYLayer）
* zyui-list.css 列表组件（ZYList）
* zyui-modal.css 模态框（ZYModal）
* zyui-table.css 表格 / 分页 / 列表（ZYTable / ZYPage / ZYList）
*
* 以下模块按需手动引入：
* zyui-form-editor.css 富文本编辑器
* zyui-carousel.css 轮播组件
* zyui-chat.css 聊天组件
* ════════════════════════════════════════════════════ */
/* ── ZYTable 滚动条 ── */
/* ╔═══════════════════════════════════════════════════════╗
* ║ 全局移动端响应式 (≤768px) ║
* ║ ║
* ║ 作用: 让模板生成器 (Create.cs) 自动产出的标准 Add/Edit ║
* ║ 表单在手机端也可用. 主要修桌面端 .zy-form-item 是 flex ║
* ║ 横排 + label 固定 180px 宽这个反手机的默认行为. ║
* ║ ║
* ║ 影响范围: 全站所有引入 zyui.css 的页面 (User / Manage ║
* ║ / Live / Firewall). 桌面端 (>768px) 行为完全不变. ║
* ╚═══════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {
/* ── 表单项: label 在上 / input 在下 竖排 ── */
.zy-form-item {
flex-direction: column;
align-items: stretch;
}
.zy-form-label {
min-width: 0;
padding: 0 0 6px 0;
text-align: left;
white-space: normal;
line-height: 20px;
font-size: 13px;
}
.zy-form-content,
.zyinput-block,
.zyinput-inline {
width: 100%;
/* 控件内部仍允许 flex-wrap (一行放不下时换行) */
}
/* ── 单个控件: 强制 100% 宽, 覆盖模板生成器留的 inline width:NNNpx ── */
.zy-form-content .zyinput,
.zy-form-content input.zyinput,
.zy-form-content textarea.zyinput,
.zy-form-content .zyinput-box,
.zy-form-content .zyselect,
.zy-form-content .zydate,
.zy-form-content .zytextarea,
.zy-form-content .zyeditor,
.zy-form-content .zyoffice,
.zy-form-content .zycolor,
.zy-form-content .zytree,
.zy-form-content .zypassword,
.zy-form-content .zyfile,
.zy-form-content .zyimage {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
/* ── 富文本编辑器 (zyeditor 渲染后的容器) 也强制满宽 ── */
.zy-form-content [data-zyui-rendered].zye-wrap,
.zy-form-content .zye-wrap,
.zy-form-content .zye-editor {
width: 100% !important;
max-width: 100%;
}
/* ── 卡片内边距收一点, 给小屏多留水平空间 ── */
.zy-card-body { padding: 12px; }
.mainBox { margin: 10px; padding: 12px; }
/* ── tab 标题横向可滚动, 防止 tab 多时换行/挤压 ── */
.zy-tab .zy-tab-title {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.zy-tab .zy-tab-title::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.zy-tab .zy-tab-title li { padding: 0 12px; }
/* ── 底部固定操作栏: 按钮铺满, 避免文字溢出 ── */
.zy-bottom { margin: 10px 0 0 0; }
.zy-bottom-content {
padding: 10px 12px;
flex-wrap: wrap;
}
.zy-bottom .zy-btn {
flex: 1 1 calc(33.333% - 6px); /* 三按钮一行均分 */
min-width: 0;
padding: 0 8px;
margin: 0;
white-space: nowrap;
}
/* ── radio / checkbox 组: 保持自然 inline 排列, 别被 form-item 竖排带成挤压 ── */
.zy-form-content > .zyradio,
.zy-form-content > .zycheckbox {
margin-right: 4px;
}
}
@media (max-width: 420px) {
/* 极窄屏 (iPhone SE 等) 底部按钮再换成全宽两/三行 */
.zy-bottom .zy-btn { flex: 1 1 100%; }
.zy-card-body { padding: 10px; }
}