/* * _layer.css — 弹窗 / Toast / Loading * ==================================== * * 注意：layer 弹窗动态注入到末尾，作用域必须从 html[data-skin="dark"] 起头， * 不能依赖 body[data-skin="dark"]（因为有时 body 没有这个属性，但 html 有）。 * * 覆盖： * - .layui-layer 弹窗主体 * - .layui-layer-title 标题栏 * - .layui-layer-content 内容区 * - .layui-layer-btn 按钮区 * - .layui-layer-setwin 关闭按钮 * - .layui-layer-iframe iframe 弹层 * - .layui-layer-msg Toast * - .layui-layer-loading 加载圈 * - .layui-layer-shade 遮罩 */ /* === 基础弹窗 === */ html[data-skin="dark"] .layui-layer { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); color: var(--text-1); font-family: var(--font-family); } /* === 标题栏 === */ html[data-skin="dark"] .layui-layer-title { background: var(--bg-3); color: var(--text-1); font-size: var(--font-size-md); font-weight: 500; height: 48px; line-height: 48px; padding: 0 var(--space-5); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* === 内容区 === */ html[data-skin="dark"] .layui-layer-content { background: var(--bg-elevated); color: var(--text-1); padding: var(--space-5); line-height: var(--line-height-normal); } /* === 按钮区 === */ html[data-skin="dark"] .layui-layer-btn { background: var(--bg-3); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-lg) var(--radius-lg); text-align: right; } html[data-skin="dark"] .layui-layer-btn a { background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text-1); border-radius: var(--radius-sm); height: 32px; line-height: 30px; padding: 0 var(--space-4); font-size: var(--font-size-sm); transition: all var(--transition-base); margin-left: var(--space-2); } html[data-skin="dark"] .layui-layer-btn a:hover { background: var(--bg-elevated); border-color: var(--primary); color: var(--primary); } html[data-skin="dark"] .layui-layer-btn .layui-layer-btn0 { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); } html[data-skin="dark"] .layui-layer-btn .layui-layer-btn0:hover { background: var(--primary-hover); color: var(--text-on-primary); box-shadow: 0 0 12px var(--primary-glow); } /* === 关闭按钮 === */ html[data-skin="dark"] .layui-layer-setwin { top: 16px; right: 16px; } html[data-skin="dark"] .layui-layer-setwin a { background: transparent !important; color: var(--text-3) !important; width: 24px; height: 24px; border-radius: var(--radius-sm); margin-left: var(--space-1); transition: all var(--transition-base); } html[data-skin="dark"] .layui-layer-setwin .layui-layer-min cite { background: var(--text-3); } html[data-skin="dark"] .layui-layer-setwin .layui-layer-close1 { background: transparent !important; } html[data-skin="dark"] .layui-layer-setwin a:hover { background: var(--bg-elevated) !important; color: var(--danger) !important; } /* === iframe 弹层（带工具栏） === */ html[data-skin="dark"] .layui-layer-iframe .layui-layer-content { background: var(--bg-1); padding: 0; overflow: hidden; } /* === Toast / Msg === */ html[data-skin="dark"] .layui-layer-msg { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); color: var(--text-1); } html[data-skin="dark"] .layui-layer-msg .layui-layer-content { background: transparent; padding: var(--space-3) var(--space-5); font-size: var(--font-size-md); color: var(--text-1); } /* msg 图标（成功/失败/警告/信息） */ html[data-skin="dark"] .layui-layer-ico { /* 保留默认图标，但调整背景使其在暗色下可读 */ filter: brightness(1.1); } /* msg type=0/1/2/... 的语义色 */ html[data-skin="dark"] .layui-layer-msg.layui-layer-hui { background: var(--bg-elevated); } /* === Loading === */ html[data-skin="dark"] .layui-layer-loading { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: var(--space-4); } html[data-skin="dark"] .layui-layer-loading .layui-layer-content { background: transparent; } html[data-skin="dark"] .layui-layer-loading .layui-layer-ico { background-image: none; } html[data-skin="dark"] .layui-layer-loading .layui-layer-ico::after { content: ""; display: block; width: 32px; height: 32px; border: 3px solid var(--bg-3); border-top-color: var(--primary); border-radius: 50%; animation: layer-loading-spin 0.8s linear infinite; } @keyframes layer-loading-spin { to { transform: rotate(360deg); } } /* === 遮罩 === */ html[data-skin="dark"] .layui-layer-shade { background: rgba(0, 4, 12, 0.75) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* === 询问框（layer.confirm） === */ html[data-skin="dark"] .layui-layer-dialog { /* 标题栏稍小 */ } html[data-skin="dark"] .layui-layer-dialog .layui-layer-content { padding: var(--space-6) var(--space-5); font-size: var(--font-size-md); } /* 带 icon 的 dialog（layer.confirm / layer.alert 用 icon 参数时，layui 给 content 加 .layui-layer-padding） * .layui-layer-ico 是绝对定位在 content 左上角，需要给左侧留出图标位置避免文字与图标重叠 */ html[data-skin="dark"] .layui-layer-dialog .layui-layer-content.layui-layer-padding { padding: var(--space-6) var(--space-5) var(--space-6) 60px; } /* === Tips（layer.tips 气泡） === */ html[data-skin="dark"] .layui-layer-tips .layui-layer-content { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-1); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-elevated); border-radius: var(--radius-sm); } html[data-skin="dark"] .layui-layer-tips i.layui-layer-TipsT, html[data-skin="dark"] .layui-layer-tips i.layui-layer-TipsB, html[data-skin="dark"] .layui-layer-tips i.layui-layer-TipsL, html[data-skin="dark"] .layui-layer-tips i.layui-layer-TipsR { border-color: var(--bg-elevated) !important; } /* === Photo（layer.photos） === */ html[data-skin="dark"] .layui-layer-photos .layui-layer-content { background: transparent; padding: 0; } html[data-skin="dark"] .layui-layer-imgsee { background: var(--bg-elevated); border-radius: var(--radius-md); }