mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-10-30 01:18:22 +08:00
751 lines
26 KiB
SCSS
751 lines
26 KiB
SCSS
// ============================================================================
|
||
// 清爽(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-deep: #0b73de; // 深蓝层:语义蓝类/链接(与主题蓝拉开明度层次)
|
||
$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 : 30px;
|
||
vertical-align : middle;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
// 侧栏展开宽度 170→160(用户定案,13px 字号下安全下限)与五联动(W=160):
|
||
// .layui-side width / .layui-body left / .layuimini-logo width /
|
||
// .layuimini-tool left(=W+35) 四条框架源规则均无 !important,包裹 +1 类即稳赢;
|
||
// .layui-layout-left left(=W+75) 框架源带 !important(layuimini.css (0,1,0)!),
|
||
// 须同姿态反杀。收起态 60px 独立体系(框架全 !important 更高特异性)零影响。
|
||
.layui-side {
|
||
width: 160px;
|
||
}
|
||
|
||
.layui-body {
|
||
left: 160px;
|
||
}
|
||
|
||
.layuimini-logo {
|
||
width: 160px;
|
||
}
|
||
|
||
.layuimini-tool {
|
||
left: 195px;
|
||
}
|
||
|
||
.layui-layout-left {
|
||
left: 235px !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: 160px;
|
||
}
|
||
|
||
// 菜单项左右内边距 20→8(用户三轮收紧:20→10→8,随缩进档 8/16/24 同步):
|
||
// layui 基线 .layui-nav .layui-nav-item a{padding:0 20px}。主侧栏一级两端收紧;
|
||
// 二三级 padding-left 由更高特异性的缩进档位接管(下方 16/24 档),padding-right
|
||
// 全级生效(箭头为绝对定位不受影响)。zoom 面板仅收右侧——其左内边距承载自有
|
||
// 层级缩进档位,平级压平层级不可取。
|
||
.layuimini-menu-left .layui-nav .layui-nav-item a {
|
||
padding-left : 8px;
|
||
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;
|
||
}
|
||
|
||
// 层级缩进 8/16/24 等差 8px(用户三轮收紧:10/25/40 → 10/20/30 → 8/16/24,配合侧栏
|
||
// 160px;13px 字号下限:最长三级项内容需 缩进+129px,24px 档余量约 7px):
|
||
// 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: 16px;
|
||
}
|
||
|
||
.layui-layout-admin .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child a {
|
||
padding-left: 24px;
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
|
||
// 内容页主容器 padding 15→0(用户定案):基线 public.css :12 (0,1,0) 无 !important,
|
||
// 包裹后 (0,2,0) 稳赢。侧栏 160px 收紧后内容区寸土寸金,留白交给内部组件自管。
|
||
.layuimini-container {
|
||
padding: 0;
|
||
}
|
||
|
||
.layui-layer {
|
||
border-radius: $radius-card;
|
||
overflow : hidden;
|
||
}
|
||
|
||
.layui-layer-title {
|
||
background-color: #fff;
|
||
border-bottom : 1px solid $border-light;
|
||
}
|
||
|
||
// 弹框头部清新化(用户修正):public.css :394 `.layui-layer-easy .layui-layer-title`
|
||
// (0,2,0)! 深藏青 #2c3e50 压掉上方 (0,2,0) 白底(border-bottom 已生效、bg/color 失守,
|
||
// 实测 computed bg=rgb(44,62,80))。镜像其他皮肤同型做法(demo/sicfi/nes/win7/
|
||
// neomorphic 均有此复合档),加 .layui-layer-easy 档以 (0,3,0)! 反杀;同源的深色
|
||
// 附件一并清新化:setwin 关闭/最大化/最小化图标白色(public.css :449/:469/:485,
|
||
// 白底下不可见)、按钮区灰底灰钮蓝钮(public.css :421-440)。加载顺序上
|
||
// theme/index.css 后于 public.css(顶层与 iframe 内容页均验证),同特异性 !important
|
||
// 亦稳赢。
|
||
.layui-layer-easy .layui-layer-title {
|
||
background : #fff !important;
|
||
color : $text-main !important;
|
||
border-bottom: 1px solid $border-light !important;
|
||
}
|
||
|
||
.layui-layer-easy .layui-layer-setwin > span,
|
||
.layui-layer-easy .layui-layer-setwin > a::after {
|
||
color: $text-sub !important;
|
||
}
|
||
|
||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::after,
|
||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::before,
|
||
.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
|
||
border-color: $text-sub !important;
|
||
}
|
||
|
||
.layui-layer-easy .layui-layer-btn {
|
||
background: #fafbfc;
|
||
border-top: 1px solid $border-light;
|
||
}
|
||
|
||
.layui-layer-easy .layui-layer-btn a {
|
||
background-color: #fff !important;
|
||
border-color : $border !important;
|
||
color : $text-main !important;
|
||
}
|
||
|
||
.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
|
||
background-color: $main !important;
|
||
border-color : $main !important;
|
||
color : #fff !important;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
// ============================================================================
|
||
// G. 表单与组件主题色接管(双层蓝,用户定案)
|
||
// 背景:清爽主题蓝 $main 恰为 layui 原生蓝 #1E9FFF。green 族交互位归 $main;
|
||
// 语义蓝类与链接降深一档($main-deep #0b73de,同色相明度阶),避免语义强调
|
||
// 与交互强调同值撞色。覆盖源:layui.css(#16baaa tabs/分页/滑块、#16b777
|
||
// 表单选择族/日期、#01aaed 链接)、public.css :763/:797(卡片硬编码 #16b777)。
|
||
// 基线多为 (0,1,0)-(0,3,0) 无 !important 包裹即胜;带 !important 的五处
|
||
// (primary 多选框、laypage focus、laydate 选中、bg/border/font-blue 语义类)
|
||
// 同姿态反杀。显式皮肤(layer/laydate 的 molv 墨绿 lay-skin)为业务主动选择,
|
||
// 不接管。tabs .layui-this:after 注意:layui.css 另有同选择器"白线融合"变体
|
||
// (border:1px solid #eee;border-bottom-color:#fff),本组反杀会将其底线一并
|
||
// 染蓝——仅影响个别使用该融合手法的 tab 变体,接受(选中强调语义不破坏)。
|
||
// ============================================================================
|
||
|
||
// G1 复选框(#16b777;primary 风格即表格行选/筛选列面板多选)
|
||
.layui-form-checkbox[lay-skin=primary]:hover > i {
|
||
border-color: $main;
|
||
}
|
||
|
||
.layui-form-checked,
|
||
.layui-form-checked:hover {
|
||
border-color: $main;
|
||
}
|
||
|
||
.layui-form-checked > div,
|
||
.layui-form-checked:hover > div {
|
||
background-color: $main;
|
||
}
|
||
|
||
.layui-form-checked > i,
|
||
.layui-form-checked:hover > i {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-form-checked[lay-skin=primary] > i {
|
||
border-color : $main !important;
|
||
background-color: $main;
|
||
color : #fff;
|
||
}
|
||
|
||
// G2 单选与开关
|
||
.layui-form-radioed,
|
||
.layui-form-radioed > i {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-form-onswitch {
|
||
border-color : $main;
|
||
background-color: $main;
|
||
}
|
||
|
||
// G3 tabs(2.10 新组件 #16baaa;brief 风格选中)
|
||
.layui-tabs-header .layui-this,
|
||
.layui-tabs-header li:hover {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-tabs-header .layui-this:after {
|
||
border-bottom-color: $main;
|
||
}
|
||
|
||
.layui-tab-brief > .layui-tab-title .layui-this {
|
||
color: $main;
|
||
}
|
||
|
||
// G3b 经典 brief tab 下划线(用户线上反馈补盖):layui.css
|
||
// `.layui-tab-brief>.layui-tab-more li.layui-this:after,
|
||
// .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom:2px solid #16b777}`
|
||
// G3 初版只盖了 brief 字色、漏了此条——system.config 页实测字蓝线绿。精确镜像
|
||
// brief 限定选择器(包裹后 (0,3,1)/(0,4,1) 必胜),不带 brief 的"白线融合"变体
|
||
// (.layui-tab-title .layui-this:after 底线 #fff)不受牵连。
|
||
.layui-tab-brief > .layui-tab-more li.layui-this:after,
|
||
.layui-tab-brief > .layui-tab-title .layui-this:after {
|
||
border-bottom-color: $main;
|
||
}
|
||
|
||
// G4 分页(#16baaa)
|
||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||
background-color: $main;
|
||
}
|
||
|
||
.layui-laypage a:hover {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-laypage input:focus,
|
||
.layui-laypage select:focus {
|
||
border-color: $main !important;
|
||
}
|
||
|
||
// G5 卡片模式选中态(public.css :763/:797 硬编码 #16b777)
|
||
.ua-data-card-checked {
|
||
border-color: $main;
|
||
box-shadow : 0 0 0 1px $main inset;
|
||
}
|
||
|
||
.ua-data-card-checked .ua-data-card-check {
|
||
color: $main;
|
||
}
|
||
|
||
// G6 日期组件(#16b777,默认主题:选中日/头部切换/今天/标记点)
|
||
.layui-laydate .layui-this,
|
||
.layui-laydate .layui-this > div {
|
||
background-color: $main !important;
|
||
color : #fff !important;
|
||
}
|
||
|
||
.layui-laydate-header i:hover,
|
||
.layui-laydate-header span:hover,
|
||
.layui-laydate-footer span:hover {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-laydate-content td.laydate-day-now {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-laydate-content td.laydate-day-now:after {
|
||
border-color: $main;
|
||
}
|
||
|
||
.laydate-day-mark::after {
|
||
background-color: $main;
|
||
}
|
||
|
||
// G7 边角(#16baaa:侧栏滑动指示条/滑块微调钮/上传拖拽区)
|
||
.layui-nav-tree .layui-nav-bar {
|
||
background-color: $main;
|
||
}
|
||
|
||
.layui-slider-input-btn i:hover {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-upload-drag .layui-icon {
|
||
color: $main;
|
||
}
|
||
|
||
.layui-upload-drag[lay-over] {
|
||
border-color: $main;
|
||
}
|
||
|
||
// G8 深蓝层:语义色类与链接(#1E9FFF/#01aaed/#16baaa → $main-deep)
|
||
// 绿色语义族(bg/border/font-green)按用户定案"名字叫 green 也可覆盖"一并归深蓝,
|
||
// 与蓝色语义类同层同值——徽章/标签/强调文字整族统一,不再有绿蓝割裂。
|
||
// 基线全部带 !important(layui.css),同姿态反杀。
|
||
.layui-bg-blue,
|
||
.layui-bg-green {
|
||
background-color: $main-deep !important;
|
||
}
|
||
|
||
.layui-border-blue,
|
||
.layui-border-green {
|
||
border-color: $main-deep !important;
|
||
color : $main-deep !important;
|
||
}
|
||
|
||
.layui-font-blue,
|
||
.layui-font-green {
|
||
color: $main-deep !important;
|
||
}
|
||
|
||
.layui-table-cell .layui-table-link {
|
||
color: $main-deep;
|
||
}
|
||
|
||
.layui-text a:not(.layui-btn) {
|
||
color: $main-deep;
|
||
}
|
||
|
||
// G9 success 语义按钮(public.css :322 项目自定义绿 #4bb368——layui 原生无此类,
|
||
// CURD 行操作"编辑"与工具栏"导出"的默认类):fresh 语境归主题蓝(用户定案
|
||
// "名字叫 green 也可覆盖"),hover/active 由既有 .layui-btn:hover/:active 蓝系承接
|
||
// (public.css 未定义其悬停态)。danger(红 #f56c6c)保留警示语义不动。
|
||
.layuimini-container .layui-btn-success {
|
||
color : #fff;
|
||
background-color: $main;
|
||
border-color : $main;
|
||
}
|