mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-11-08 20:10:50 +08:00
feat(theme): 新增清爽皮肤（36px 紧凑头部）并设为默认
This commit is contained in:
augushong
211
public/static/common/css/theme/_fresh.scss
Normal file
211
public/static/common/css/theme/_fresh.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
// ============================================================================
|
||||
// 清爽（fresh）皮肤 —— 36px 紧凑头部 + 白底轻量视觉
|
||||
// 结构：(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触
|
||||
// 约定：尺寸/布局/圆角/阴影归本文件，颜色基调归配色系统（buildThemeCss），
|
||||
// 本文件只覆盖自身视觉语言所需颜色。禁用选择器扩展语法。
|
||||
// ============================================================================
|
||||
|
||||
// 0. 设计令牌
|
||||
$header-h: 36px;
|
||||
$main: #1E9FFF;
|
||||
$main-light: #e8f3ff;
|
||||
$text-main: #33383f;
|
||||
$text-sub: #6b7280;
|
||||
$border-light: #f0f2f5;
|
||||
$border: #e5e9ef;
|
||||
$bg-page: #f7f8fa;
|
||||
$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: #fff !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 : $text-sub;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-body,
|
||||
.layui-layout-admin .layui-side {
|
||||
top: $header-h !important;
|
||||
}
|
||||
|
||||
// B. 头部分组 tab（白底浅字，激活用 inset box-shadow 底条，不依赖被置零的 :after）
|
||||
.layuimini-header-menu>.layui-nav-item>a,
|
||||
.layui-header>.layui-layout-right>.layui-nav-item>a {
|
||||
padding: 0 14px;
|
||||
color : $text-sub !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 .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 高度不动）
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item>a,
|
||||
.layuimini-menu-left .layui-nav .layui-nav-child a {
|
||||
color: #4a5261 !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover {
|
||||
background-color: #f5f7fa !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: #fafbfc;
|
||||
}
|
||||
|
||||
// 激活态（选择器清单参照 _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. 内容组件轻触（& = body.elem-style-fresh）
|
||||
& {
|
||||
background: $bg-page;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
border-radius: $radius-btn;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user