// ============================================================================ // 清爽(fresh)皮肤 —— 36px 紧凑头部 + 白底轻量视觉 // 结构:(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 (F)全包颜色接管 // 全包边界声明:本皮肤接管全部框架颜色(含文字色),配色系统注入(miniTheme.js // buildThemeCss)仅对标准皮肤生效,fresh 不消费其色值。 // 此为经用户批准的第二轮架构变更,推翻第一轮"文字颜色归配色系统"边界——仅对 fresh // 适用,其他皮肤仍守旧边界。F 段选择器逐字镜像 buildThemeCss 注入清单,作为对照表 // 出处与接管依据:.elem-style-fresh 包裹使每条规则天然 +1 类特异性,与注入同 // !important 时镜像选择器必胜。 // 约定:尺寸/布局/圆角/阴影归本文件;禁用选择器扩展语法。 // ============================================================================ // 0. 设计令牌 $header-h: 36px; $main: #1E9FFF; $main-light: #e8f3ff; $text-main: #33383f; $text-sub: #6b7280; $border-light: #f0f2f5; $border: #e5e9ef; $bg-page: #f7f8fa; // logo 区+侧栏灰底 $radius-btn: 4px; $radius-card: 8px; $shadow-card: 0 1px 2px rgba(0, 0, 0, .04); $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); // A. 头部 36px(对冲 layuimini.css 全部 60px !important 硬编码) .layui-layout-admin .layui-header, .layuimini-header-menu { height : $header-h !important; box-sizing : border-box; border-bottom : 1px solid $border-light; } .layuimini-header-menu>.layui-nav-item, .layui-header>.layui-layout-right>.layui-nav-item { height : $header-h !important; line-height: $header-h !important; } .layui-layout-admin .layui-header .layui-nav .layui-nav-item a { line-height: $header-h; } .layui-layout-admin .layuimini-logo { height : 35px !important; line-height : 35px !important; background-color: $bg-page !important; color : $text-main !important; box-sizing : border-box; border-right : 1px solid $border-light; } .layui-layout-admin .layuimini-logo img { height: 20px; } .layui-layout-admin .layuimini-logo h1 { color : $text-main !important; font-size: 15px; } .layuimini-tool { line-height: $header-h; color : $text-sub !important; } .layuimini-tool i { width : 20px; height : 20px; line-height : 20px; margin-top : 8px; border-radius: $radius-btn; color : #4e5969; } .layui-layout-admin .layui-body, .layui-layout-admin .layui-side { top: $header-h !important; } // B. 头部分组 tab(:hover/.layui-this 路径是注入盲区的唯一 hover 反馈来源;常态文字色由 F 段 T3/T5 接管;激活底条用 inset box-shadow) // 右侧布局项运行时 DOM 为 .layui-header > .layuimini-header-content > ul.layui-layout-right, // 故层级用后代约束;其 hover>a 需压过 T3 常态镜像 (0,5,1),由下方 (0,7,1) 规则负责。 .layuimini-header-menu>.layui-nav-item>a, .layui-header .layui-layout-right>.layui-nav-item>a { padding: 0 14px; } .layuimini-header-menu>.layui-nav-item:hover, .layuimini-header-menu>.layui-nav-item.layui-this, .layui-header .layui-layout-right>.layui-nav-item:hover, .layui-header .layui-layout-right>.layui-nav-item.layui-this { background-color: transparent !important; } .layuimini-header-menu>.layui-nav-item:hover>a, .layuimini-header-menu>.layui-nav-item.layui-this>a, .layui-header .layui-layout-right>.layui-nav-item:hover>a, .layui-header .layui-layout-right>.layui-nav-item.layui-this>a { color: $main !important; } .layui-layout-admin .layui-header .layui-nav.layui-layout-right>.layui-nav-item:hover>a { color: $main !important; } .layuimini-header-menu>.layui-nav-item.layui-this, .layui-header>.layui-layout-right>.layui-nav-item.layui-this { box-shadow: inset 0 -2px 0 $main; } .layui-header .layui-nav-img { width : 24px; height: 24px; } // C. 页签条重描(高度保持 35px,仅改颜色) .layuimini-tab .layui-tab-title { border-color: $border-light; } .layuimini-tab .layui-tab-title li { border-right: 1px solid $border-light; color : $text-sub; } .layuimini-tab .layui-tab-title span { color: $text-sub; } .layuimini-tab .layui-tab-title .layui-this { box-shadow: inset 0 -2px 0 $main; } .layuimini-tab .layui-tab-title .layui-this span { color: $main !important; } .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active { width : 6px; height : 6px; background-color: $main; } .layuimini-tab .layui-tab-control>li { background-color: #fff; border-top : $border-light 1px solid; border-bottom : $border-light 1px solid; } // D. 侧栏(菜单项 32px 紧凑行高(用户验收定案,仅 fresh);常态文字色由 F 段 T11/T12 接管,本段仅保留 hover 背景/边框/激活胶囊) // 40px→32px:layuimini.css 同姿态规则((0,3,1) 无 !important)+1 类前缀(由 index.scss // 包裹注入)即稳赢;>a 的 5px 上下 padding 依 border-box 同步归零,否则 32px 行盒在 // 22px 内容区内下偏;layui nav-more 为字体图标(top:0,line-height 继承自 a), // 行高变更后自动垂直居中,无需同步。收起态 .layuimini-mini 挂 .layui-layout-body // (框架规则 (0,4,1) 在 1025px 媒体查询内),单独加一档类压过同特异性竞争; // zoom 悬浮面板(layer.tips 动态插 body 下)一并承接。 .layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a { height : 32px; line-height: 32px; } .layuimini-menu-left .layui-nav .layui-nav-item>a { padding-top : 0; padding-bottom: 0; } // zoom 悬浮面板 a 不经过 layuimini.css 的 5px padding 规则,但 layui.css 的 // .layui-nav-tree .layui-nav-item>a { padding:5px 0 } 同样把它顶成 42px,一并归零 .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-item>a { padding-top : 0; padding-bottom: 0; } // layui.css 给树形导航箭头留了 5px 上下 padding(40px 时代的垂直微调),32px 下 // 变成 42px 溢出盒,字形随之下偏并被 a 的 overflow:hidden 裁切,同步归零即随 // line-height 自动居中。 .layuimini-menu-left .layui-nav-tree .layui-nav-item>a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-item>a .layui-nav-more { padding-top : 0; padding-bottom: 0; } // 收起态:.layuimini-mini 挂 .layui-layout-body(elem-style-fresh 同元素非祖先), // 且 .layui-side 与 .layuimini-menu-left 是同一元素,嵌套前缀表达不了上述复合关系; // 改用真实中间档 .layui-layout-admin 堆特异性压过 layuimini.css 收起态规则 // ((0,5,1) > 框架 (0,4,1),media query 内外通吃;展开态同值命中无害) .layui-layout-admin .layuimini-menu-left .layui-nav .layui-nav-item a { height : 32px; line-height: 32px; } .layuimini-menu-left .layui-nav .layui-nav-item a:hover { background-color: rgba(127, 127, 127, 0.15) !important; } // 侧栏展开宽度 190→180(用户定案)与五联动(W=180):.layui-side width / .layui-body left / // .layuimini-logo width / .layuimini-tool left(=W+35) 四条框架源规则均无 !important, // .elem-style-fresh 包裹 +1 类即稳赢;.layui-layout-left left(=W+95) 框架源带 !important // (layuimini.css (0,1,0)!),须同姿态反杀(包裹后 (0,2,0)!)。收起态 60px 为独立体系: // 框架收起态规则全带 !important 且特异性更高(layout-left 收起态 (0,4,0)! > 本组 (0,2,0)!), // 整体压制本组声明,收起态零影响,无需 :not 排除。 .layui-side { width: 180px; } .layui-body { left: 180px; } .layuimini-logo { width: 180px; } .layuimini-tool { left: 215px; } .layui-layout-left { left: 255px !important; } // 控制按钮收紧(用户修正):layuimini.css 基线 .layuimini-tool{width:60px}(60px 头部 // 时代遗产)图标贴左缘,右侧 40px 空白后标签页才开始。收窄至 40px,标签页起点随之 // 左移(layout-left = W+75)。图标系 display:block(text-align 无效),用定宽 + 左右 // margin:auto 居中。:not(.layuimini-mini) 限定展开态——收起态框架以更高特异性 // !important 体系自管(60/95/155),不受牵连。 &:not(.layuimini-mini) .layuimini-tool { width: 40px; } &:not(.layuimini-mini) .layuimini-tool i { margin-left : auto; margin-right: auto; } // 收起态图标居中恢复(用户修正):layui 靠基础 padding-left 20px 把 20px 图标居中于 // 60px 收起侧栏,上方一级收紧到 10px 后图标左移 10px、右侧空白 30px。收起态显式 // 回 20px(.layuimini-mini 与 .elem-style-fresh 同挂 body,复合选择器可达, // (0,5,1) 压过本文件基础档 (0,4,1))。 &.layuimini-mini .layuimini-menu-left .layui-nav .layui-nav-item a { padding-left: 20px; } // 导航树宽度对齐 180(用户修正):layui.css .layui-nav-tree{width:200px} 系五联动之外 // 的第 6 条暗规则——200px 导航盒在 180px 侧栏内右缘被裁,绝对定位 right:3px 的展开 // 箭头随之溢出不可见。包裹 +1 类稳赢;zoom 面板的导航宽度由下方 .popup-tips 规则自管。 .layuimini-menu-left .layui-nav.layui-nav-tree { width: 180px; } // 菜单项左右内边距 20→10(用户修正):layui 基线 .layui-nav .layui-nav-item a{padding:0 20px}。 // 主侧栏一级两端收紧;二三级 padding-left 由更高特异性的缩进档位接管(下方 25/40 档), // padding-right 全级生效(箭头为绝对定位不受影响)。zoom 面板仅收右侧——其左内边距 // 承载自有层级缩进档位,平级压平层级不可取。 .layuimini-menu-left .layui-nav .layui-nav-item a { padding-left : 10px; padding-right: 10px; } .layuimini-menu-left-zoom.layui-nav .layui-nav-item a { padding-right: 10px; } // 图标与标题间距收紧(用户修正):miniMenu 模板空格折叠后恒 3.63px(13px 字号一个 // 空格),无任何框架 margin 参与的纯空格间距——图标负右距对冲 2.5px,净距约 1px。 // 仅命中带图标项(a > i 直接子级),无图标项的缩进不受牵连;zoom 面板同步。 .layuimini-menu-left .layui-nav .layui-nav-item a > i, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a > i { margin-right: -2.5px; } // 侧栏菜单字号 14→13px(用户定案,一/二/三级统一;头部/页签字体不动)。菜单名文字由 // span 承载,线上 CDN 分发的 layui-ul.css 以 .layui-nav * { font-size:14px }(本地 // layui.css 无此条,CSSOM 跨域拒读,常规命中分析不可见)把 span 钉死 14px,故 a 与 // span 须分别显式声明。zoom 悬浮面板同步 13px:面板 170px 下子级项内容需求 // icon14.86+间隙3.63+7字13px=91 → 合计 164.5px,余 5.5px(span 若保持 14px 需 98px // 合计 171.5px 仍截断 1.5px)。 .layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a, .layuimini-menu-left .layui-nav .layui-nav-item a .layui-left-nav, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a .layui-left-nav { font-size: 13px; } // 层级缩进 10/25/40 三级等差(用户修正:此前 45→35 与 V2 档撞车,二三级无层次): // V2 档 layuimini.css (0,4,1)、V3 档 (0,5,1) 均无 !important,用真实中间档 // .layui-layout-admin 堆特异性逐级反杀(.layui-layout-body 前缀与 .elem-style-fresh // 同挂 body 永不匹配——fix-menu-height 同型前科)。L3 同时命中两档时本组 V3 (0,6,1) // 压过本组 V2 (0,5,1),层级自洽与加载顺序无关。zoom 面板无 .layuimini-menu-left // 祖先不命中,自有档位保持。 .layui-layout-admin .layuimini-menu-left .layui-nav .layui-nav-child a { padding-left: 25px; } .layui-layout-admin .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child a { padding-left: 40px; } // zoom 悬浮面板 150→170px(用户定案;layuimini.css (0,2,0) 无 !important,包裹即稳赢; // 面板是 layer.tips 动态插 body 下的 DOM,.elem-style-fresh 挂 body 命中其子孙) .popup-tips .layui-nav-tree { width: 170px; } .layui-side.layui-bg-black>.layuimini-menu-left>ul>.layui-nav-item:first-child { border-top-color: $border-light; } .layuimini-menu-left .layui-nav-tree .layui-nav-child, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { background-color: #f2f3f6; } // 激活态(选择器清单参照 _sicfi.scss:763-770,含 dd 与 -zoom 变体) .layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this>a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this>a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a { background-color: $main-light !important; color : $main !important; box-shadow : inset 3px 0 0 $main; } // E. 内容组件轻触 // 主按钮适配清爽品牌蓝(覆盖 layui 2.10 默认青绿 #16baaa);layui 按钮系列声明 // 全部无 !important(唯一例外 disabled:hover 背景),.elem-style-fresh 包裹 // (0,2,0) 起步天然稳赢,故本段不加 !important。 .layui-btn { background-color: $main; border-radius : $radius-btn; color : #fff; } .layui-btn:hover { background-color: #40a2ff; } .layui-btn:active { background-color: #0f87e6; } // 描边钮(方案A):必须声明在上方 .layui-btn 背景之后,同特异性源序压过主色 .layui-btn-primary { background-color: #fff; border-color : $border; color : #4e5969; } .layui-btn-primary:hover { background-color: $main-light; border-color : $main; color : $main; } // 描边钮软按压态:同 hover 底色,:active (0,3,0) 声明在 primary:hover 之后, // 源序压过 .layui-btn:active 的压深值,修复点击瞬间闪实心深蓝 .layui-btn-primary:active { background-color: $main-light; border-color : $main; color : $main; } // 语义色保留:显式重申当前生效值(danger/success 与 public.css 一致,warm/disabled // 为 layui 原值),防止被上方主色背景同特异性压过;hover/active 同值重申防被提亮/ // 压深值命中变蓝(:active 是 (0,3,0),必须并入同值规则组才能压过 .layui-btn:active; // layui 原版语义钮 hover/active 为 opacity 变化,无背景声明;disabled:hover 背景 // 已由 layui !important 自保护,无需重申) .layui-btn-warm, .layui-btn-warm:hover, .layui-btn-warm:active { background-color: #ffb800; } .layui-btn-danger, .layui-btn-danger:hover, .layui-btn-danger:active { background-color: #f56c6c; } .layui-btn-success, .layui-btn-success:hover, .layui-btn-success:active { background-color: #4bb368; } .layui-btn-disabled { background-color: #fbfbfb; } .layui-card, .layuimini-container { border-radius: $radius-card; border : 1px solid $border; box-shadow : $shadow-card; } .layui-layer { border-radius: $radius-card; overflow : hidden; } .layui-layer-title { background-color: #fff; border-bottom : 1px solid $border-light; } .layui-table thead tr, .layui-table-header { background-color: #fafbfc; } .layui-header .layui-nav-child { top : 100% !important; border-radius : 6px; border : 1px solid $border-light; box-shadow : $shadow-pop; } // F. 全包颜色接管 // 以下选择器逐字镜像 miniTheme.js buildThemeCss 注入清单(:330-423), // 在 .elem-style-fresh 包裹上下文内每条规则天然 +1 类特异性, // 与注入同 !important 时镜像选择器必胜。 // T8(logo h1 文字色 $text-main)已由上方既有规则满足,按定案保留、不重复声明; // T15(页签圆点)由 C 段圆点选择器补 .layui-this 承接(包裹下 (0,5,0) > 注入 (0,4,0),无需 !important)。 // T1 头部背景(白底定案) .layui-layout-admin .layui-header { background-color: #fff !important; } // T2 头部选中背景/工具图标 hover(透明) .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layui-layout-admin .layuimini-tool i:hover { background-color: transparent !important; } // T3 头部导航文字 .layui-layout-admin .layui-header .layui-nav .layui-nav-item a { color: #4e5969 !important; } // T4 头部下拉文字 .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a { color: #4e5969 !important; } // T5 头部 hover/激活文字(品牌蓝) .layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a { color: $main !important; } // T6 头部工具图标 .layui-layout-admin .layui-header .layuimini-tool i { color: #4e5969 !important; } // T9 侧栏背景(灰底定案) .layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul { background-color: $bg-page !important; } // T10 侧栏展开子菜单背景 .layuimini-menu-left .layui-nav-itemed > .layui-nav-child { background-color: #f2f3f6 !important; } // T11 侧栏文字(图标继承 a 色一并解决纯黑问题) .layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a { color: #3d4757 !important; } // T12 侧栏 hover/激活文字(品牌蓝;激活底胶囊与左条由 D 段既有规则继续负责) .layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a { color: $main !important; } // T13 侧栏展开箭头 .layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more { border-top-color: #3d4757 !important; } .layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more { border-color: transparent transparent #3d4757 !important; } // T14 头部展开箭头与下拉激活 .layui-header .layui-nav .layui-nav-more { border-top-color: #4e5969 !important; } .layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more { border-color: transparent transparent #4e5969 !important; } .layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a { background-color: $main !important; color : #fff !important; }