Files
ulthon_admin/public/static/common/css/theme/_fresh.scss

318 lines
10 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// ============================================================================
// 清爽(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 : $header-h !important;
line-height : $header-h !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. 侧栏(菜单项 40px 高度不动;常态文字色由 F 段 T11/T12 接管,本段仅保留 hover 背景/边框/激活胶囊)
.layuimini-menu-left .layui-nav .layui-nav-item a:hover {
background-color: rgba(127, 127, 127, 0.15) !important;
}
.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-btn {
border-radius: $radius-btn;
}
.layui-btn-primary {
border-color: $border;
color : #4e5969;
}
.layui-btn-primary:hover {
border-color: $main;
color : $main;
}
.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;
}