mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-10-29 08:58:22 +08:00
fix(theme): 清爽皮肤green族主题色全量接管与双层蓝色板
This commit is contained in:
augushong
@@ -13,6 +13,7 @@
|
||||
// 0. 设计令牌
|
||||
$header-h: 36px;
|
||||
$main: #1E9FFF;
|
||||
$main-deep: #0b73de; // 深蓝层：语义蓝类/链接（与主题蓝拉开明度层次）
|
||||
$main-light: #e8f3ff;
|
||||
$text-main: #33383f;
|
||||
$text-sub: #6b7280;
|
||||
@@ -567,3 +568,166 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08);
|
||||
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;
|
||||
}
|
||||
|
||||
// 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 → $main-deep）
|
||||
.layui-bg-blue {
|
||||
background-color: $main-deep !important;
|
||||
}
|
||||
|
||||
.layui-border-blue {
|
||||
border-color: $main-deep !important;
|
||||
color : $main-deep !important;
|
||||
}
|
||||
|
||||
.layui-font-blue {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -2542,6 +2542,113 @@
|
||||
background-color: #1E9FFF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.elem-style-fresh .layui-form-checkbox[lay-skin=primary]:hover > i {
|
||||
border-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-form-checked,
|
||||
.elem-style-fresh .layui-form-checked:hover {
|
||||
border-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-form-checked > div,
|
||||
.elem-style-fresh .layui-form-checked:hover > div {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-form-checked > i,
|
||||
.elem-style-fresh .layui-form-checked:hover > i {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-form-checked[lay-skin=primary] > i {
|
||||
border-color: #1E9FFF !important;
|
||||
background-color: #1E9FFF;
|
||||
color: #fff;
|
||||
}
|
||||
.elem-style-fresh .layui-form-radioed,
|
||||
.elem-style-fresh .layui-form-radioed > i {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-form-onswitch {
|
||||
border-color: #1E9FFF;
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-tabs-header .layui-this,
|
||||
.elem-style-fresh .layui-tabs-header li:hover {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-tabs-header .layui-this:after {
|
||||
border-bottom-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-tab-brief > .layui-tab-title .layui-this {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laypage a:hover {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laypage input:focus,
|
||||
.elem-style-fresh .layui-laypage select:focus {
|
||||
border-color: #1E9FFF !important;
|
||||
}
|
||||
.elem-style-fresh .ua-data-card-checked {
|
||||
border-color: #1E9FFF;
|
||||
box-shadow: 0 0 0 1px #1E9FFF inset;
|
||||
}
|
||||
.elem-style-fresh .ua-data-card-checked .ua-data-card-check {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laydate .layui-this,
|
||||
.elem-style-fresh .layui-laydate .layui-this > div {
|
||||
background-color: #1E9FFF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.elem-style-fresh .layui-laydate-header i:hover,
|
||||
.elem-style-fresh .layui-laydate-header span:hover,
|
||||
.elem-style-fresh .layui-laydate-footer span:hover {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laydate-content td.laydate-day-now {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-laydate-content td.laydate-day-now:after {
|
||||
border-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .laydate-day-mark::after {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-nav-tree .layui-nav-bar {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-slider-input-btn i:hover {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-upload-drag .layui-icon {
|
||||
color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-upload-drag[lay-over] {
|
||||
border-color: #1E9FFF;
|
||||
}
|
||||
.elem-style-fresh .layui-bg-blue {
|
||||
background-color: #0b73de !important;
|
||||
}
|
||||
.elem-style-fresh .layui-border-blue {
|
||||
border-color: #0b73de !important;
|
||||
color: #0b73de !important;
|
||||
}
|
||||
.elem-style-fresh .layui-font-blue {
|
||||
color: #0b73de !important;
|
||||
}
|
||||
.elem-style-fresh .layui-table-cell .layui-table-link {
|
||||
color: #0b73de;
|
||||
}
|
||||
.elem-style-fresh .layui-text a:not(.layui-btn) {
|
||||
color: #0b73de;
|
||||
}
|
||||
.elem-style-fresh .layuimini-container .layui-btn-success {
|
||||
color: #fff;
|
||||
background-color: #1E9FFF;
|
||||
border-color: #1E9FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ark-pixel";
|
||||
|
||||
Reference in New Issue
Block a user