mirror of
https://github.com/skyle1995/NetworkAuth.git
synced 2026-05-25 02:24:05 +08:00
New warehouse
This commit is contained in:
104
web/static/css/admin.css
Normal file
104
web/static/css/admin.css
Normal file
@@ -0,0 +1,104 @@
|
||||
wc-include{padding: 15px;display: block;}
|
||||
#app {display: none;}
|
||||
.layui-layout-right .layui-nav-bar {background-color: unset !important;}
|
||||
.layui-layout-admin .layui-side {top: 0 !important;z-index: 1001;}
|
||||
.layui-layout-admin .layui-logo {position: relative !important;height: 60px !important;top: -2px !important;}
|
||||
|
||||
/* Logo文字美化样式 */
|
||||
.logo-enhanced {
|
||||
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
|
||||
letter-spacing: 1px !important;
|
||||
}
|
||||
|
||||
.layui-side,
|
||||
.layui-header,
|
||||
.layui-body,
|
||||
.layui-footer {transition: left 0.3s;}
|
||||
.collapse .layui-layout-admin .layui-side,
|
||||
.collapse .layui-layout-admin .layui-header {left: -200px;}
|
||||
.collapse .layui-layout-admin .layui-footer,
|
||||
.collapse .layui-layout-admin .layui-body {left: 0px;}
|
||||
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {animation: none;mix-blend-mode: normal;}
|
||||
::view-transition-old(root) {z-index: 9999;}
|
||||
::view-transition-new(root) {z-index: 1;}
|
||||
.dark::view-transition-old(root) {z-index: 1;}
|
||||
.dark::view-transition-new(root) {z-index: 9999;}
|
||||
|
||||
/* 以下为自定义样式 */
|
||||
.system-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 20px; }
|
||||
.system-info-item { padding: 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); }
|
||||
.system-info-label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
|
||||
.system-info-value { font-size: 16px; font-weight: 600; color: var(--fg); }
|
||||
|
||||
/* ===================== 滚动条美化与布局约束（右侧滑块条） ===================== */
|
||||
/*
|
||||
作用：
|
||||
1. 统一 Admin 布局下内容区（.layui-body）为局部滚动容器，只在头部与页脚之间滚动
|
||||
2. 美化 .layui-body 的滚动条样式，增强可用性与观感
|
||||
3. 不影响登录页等非 Admin 布局页面（仅在 .layui-layout-admin 作用域内生效）
|
||||
*/
|
||||
:root {
|
||||
/* 头部与页脚的高度变量，便于后续维护/调整 */
|
||||
--admin-header-h: 60px;
|
||||
--admin-footer-h: 0px; /* 当前页脚未启用，如启用可改为 44px 等 */
|
||||
}
|
||||
|
||||
/* Admin 主容器占满视口，高度锁定，避免出现浏览器右侧全局滚动条 */
|
||||
.layui-layout-admin {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部/页脚高度同步到变量，确保与内容区上下边界垂直齐平 */
|
||||
.layui-layout-admin .layui-header {
|
||||
height: var(--admin-header-h);
|
||||
line-height: var(--admin-header-h);
|
||||
}
|
||||
.layui-layout-admin .layui-footer {
|
||||
height: var(--admin-footer-h);
|
||||
line-height: var(--admin-footer-h);
|
||||
}
|
||||
|
||||
/* 内容区设为局部滚动容器，顶部/底部与头部/页脚精确对齐 */
|
||||
.layui-layout-admin .layui-body {
|
||||
/* 仅约束垂直方向，左右定位保持与 Layui 默认一致，兼容现有折叠动画 */
|
||||
top: var(--admin-header-h) !important;
|
||||
bottom: var(--admin-footer-h) !important;
|
||||
overflow: auto;
|
||||
|
||||
/* Firefox 滚动条样式（细滚动条+自定义颜色） */
|
||||
scrollbar-width: thin; /* 细滚动条 */
|
||||
scrollbar-color: var(--lay-color-secondary) var(--lay-color-bg-3); /* thumb 与 track 颜色 */
|
||||
}
|
||||
|
||||
/* WebKit 滚动条样式（Chrome/Edge/Safari） */
|
||||
.layui-layout-admin .layui-body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.layui-layout-admin .layui-body::-webkit-scrollbar-track {
|
||||
background: var(--lay-color-bg-2);
|
||||
border-left: 1px solid var(--lay-color-border-2);
|
||||
}
|
||||
.layui-layout-admin .layui-body::-webkit-scrollbar-thumb {
|
||||
/* 渐变+内边透明边框，获得圆润质感 */
|
||||
background: linear-gradient(180deg, var(--lay-color-gray-7), var(--lay-color-gray-9));
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.layui-layout-admin .layui-body::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--lay-color-secondary); /* 悬停高亮，强化可交互性 */
|
||||
}
|
||||
.layui-layout-admin .layui-body::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ===================== END 滚动条美化与布局约束 ===================== */
|
||||
178
web/static/css/home.css
Normal file
178
web/static/css/home.css
Normal file
@@ -0,0 +1,178 @@
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.card-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.header h1 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.progress-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.progress-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 2px;
|
||||
background: #e6e6e6;
|
||||
z-index: 1;
|
||||
}
|
||||
.progress-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
height: 2px;
|
||||
background: #5FB878;
|
||||
transition: width 0.5s ease;
|
||||
z-index: 2;
|
||||
width: 0%;
|
||||
}
|
||||
.step {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.step-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #e6e6e6;
|
||||
color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 10px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.step.active .step-circle {
|
||||
background: #5FB878;
|
||||
color: white;
|
||||
}
|
||||
.step.completed .step-circle {
|
||||
background: #5FB878;
|
||||
color: white;
|
||||
}
|
||||
.step-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.step.active .step-text {
|
||||
color: #5FB878;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-item label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.layui-input {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 12px 15px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
.layui-input:focus {
|
||||
border-color: #5FB878;
|
||||
box-shadow: 0 0 0 2px rgba(95, 184, 120, 0.2);
|
||||
}
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: linear-gradient(45deg, #5FB878, #42B983);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.submit-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(95, 184, 120, 0.4);
|
||||
}
|
||||
.submit-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #5FB878;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 修复 select 下拉在某些浏览器中文字垂直被裁剪问题 */
|
||||
select.layui-input,
|
||||
select.layui-select {
|
||||
/* 统一高度，避免被 padding 挤压导致文字显示不全 */
|
||||
height: 40px;
|
||||
line-height: 40px; /* 对多数浏览器有效，确保文字垂直居中 */
|
||||
padding: 0 15px; /* 与 .layui-input 保持一致的水平内边距 */
|
||||
box-sizing: border-box; /* 使高度计算更可控，不受 padding 影响 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 兼容性优化：在部分内核下 select 需要明确字体大小与行高匹配 */
|
||||
select.layui-input option,
|
||||
select.layui-select option {
|
||||
line-height: 40px;
|
||||
}
|
||||
330
web/static/js/admin.js
Executable file
330
web/static/js/admin.js
Executable file
@@ -0,0 +1,330 @@
|
||||
const VERSION = '2.10.1';
|
||||
const layuicss = `https://unpkg.com/layui@${VERSION}/dist/css/layui.css`;
|
||||
const layuijs = `https://unpkg.com/layui@${VERSION}/dist/layui.js`;
|
||||
const rootPath = (function (src) {
|
||||
src = (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT') ? document.currentScript.src : document.scripts[document.scripts.length - 1].src;
|
||||
return src.substring(0, src.lastIndexOf('/') + 1);
|
||||
})();
|
||||
|
||||
const app = document.querySelector('#app')
|
||||
|
||||
addLink({ href: layuicss }).then(() => {
|
||||
app.style.display = 'block';
|
||||
});
|
||||
|
||||
addLink({ id: 'layui_theme_css', href: `./static/src/layui-theme-dark-selector.css` });
|
||||
|
||||
// TODO 弃用，下个版本只支持选择器模式
|
||||
//addLink({ id: 'layui_theme_css', href: `${rootPath}dist/layui-theme-dark.css` });
|
||||
|
||||
loadScript(layuijs, function () {
|
||||
layui
|
||||
.config({
|
||||
base: './static/lib/',
|
||||
})
|
||||
.extend({
|
||||
drawer: 'drawer/drawer',
|
||||
});
|
||||
layui.use(['drawer', 'colorMode'], function () {
|
||||
const { $, element, form, layer, util, dropdown, drawer, colorMode } = layui;
|
||||
|
||||
const APPERANCE_KEY = 'layui-theme-demo-prefer-dark';
|
||||
|
||||
const theme = colorMode.init({
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
initialValue: 'dark',
|
||||
modes: {
|
||||
light: '',
|
||||
dark: 'dark',
|
||||
},
|
||||
storageKey: APPERANCE_KEY,
|
||||
onChanged(mode, defaultHandler) {
|
||||
const isAppearanceTransition = document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
|
||||
const isDark = mode === 'dark';
|
||||
|
||||
$('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
|
||||
|
||||
if (!isAppearanceTransition) {
|
||||
defaultHandler();
|
||||
} else {
|
||||
rippleViewTransition(isDark, function () {
|
||||
defaultHandler();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
routerTo({path: location.hash.slice(1) || 'dashboard'});
|
||||
|
||||
dropdown.render({
|
||||
elem: '#change-theme',
|
||||
align: 'center',
|
||||
data: [
|
||||
{
|
||||
title: '深色模式',
|
||||
id: 'dark',
|
||||
icon: 'layui-icon-moon',
|
||||
},
|
||||
{
|
||||
title: '浅色模式',
|
||||
id: 'light',
|
||||
icon: 'layui-icon-light',
|
||||
},
|
||||
{
|
||||
title: '跟随系统',
|
||||
id: 'auto',
|
||||
icon: 'layui-icon-console',
|
||||
},
|
||||
],
|
||||
templet(d) {
|
||||
return `
|
||||
<span style="display: flex;">
|
||||
<i class="layui-icon ${d.icon}" style="margin-right: 8px"></i>
|
||||
${d.title}
|
||||
</span>`.trim();
|
||||
},
|
||||
click(obj) {
|
||||
const { id: mode } = obj;
|
||||
theme.setMode(mode);
|
||||
},
|
||||
});
|
||||
|
||||
util.event('lay-header-event', {
|
||||
menuLeft() {
|
||||
$('body').toggleClass('collapse');
|
||||
},
|
||||
menuRight() {
|
||||
drawer.open({
|
||||
area: '600px',
|
||||
url: './static/tpl/theme.html',
|
||||
hideOnClose: true,
|
||||
id: 'drawer-theme-tpl',
|
||||
shade: 0.01,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
element.on('nav(nav-side)', function (elem) {
|
||||
var path = elem.data('path');
|
||||
if (path) {
|
||||
routerTo({path});
|
||||
if ($(window).width() <= 768) {
|
||||
$('body').toggleClass('collapse', false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#layuiv').text(layui.v);
|
||||
|
||||
/*
|
||||
* 后台通用脚本
|
||||
* 说明：统一处理全局的退出登录逻辑，遵循后端 jsonResponse 的返回格式：
|
||||
* code: 0 表示成功，非0表示失败
|
||||
* msg: 提示信息
|
||||
* data: 业务数据
|
||||
*/
|
||||
|
||||
// 绑定退出登录按钮事件（箭头函数写法）
|
||||
const bindLogout = () => {
|
||||
const btn = document.getElementById('logout-btn');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
handleLogout();
|
||||
});
|
||||
};
|
||||
|
||||
// 执行退出登录（箭头函数写法）
|
||||
// 功能：弹出确认框 -> 显示加载层 -> 调用 /admin/logout -> 依据 code===0 判断
|
||||
const handleLogout = () => {
|
||||
layer.confirm('确定要退出登录吗？', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, (index) => {
|
||||
layer.close(index);
|
||||
|
||||
// 显示加载层
|
||||
const loadIndex = layer.load(2, {
|
||||
content: '正在退出登录...'
|
||||
});
|
||||
|
||||
// 调用登出接口
|
||||
fetch('/admin/logout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
layer.close(loadIndex);
|
||||
const ok = data && data.code === 0;
|
||||
const msg = (data && (data.msg || data.message)) || (ok ? '退出登录成功' : '退出登录失败');
|
||||
if (ok) {
|
||||
layer.msg(msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, () => {
|
||||
// 跳转到登录页或后端返回的地址
|
||||
const redirect = (data && data.data && data.data.redirect) || '/admin/login';
|
||||
window.location.href = redirect;
|
||||
});
|
||||
} else {
|
||||
layer.msg(msg, { icon: 2 });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
layer.close(loadIndex);
|
||||
console.error('登出请求失败:', error);
|
||||
layer.msg('网络错误，请重试', { icon: 2 });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 页面就绪后绑定事件（箭头函数写法）
|
||||
(() => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', bindLogout);
|
||||
} else {
|
||||
bindLogout();
|
||||
}
|
||||
})();
|
||||
|
||||
// 刷新页面功能处理
|
||||
const handleRefresh = () => {
|
||||
layer.confirm('确定要刷新内容吗？', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, (index) => {
|
||||
layer.close(index);
|
||||
|
||||
// 获取当前hash值，确定当前页面路径
|
||||
let currentPath = window.location.hash.replace('#', '') || 'dashboard';
|
||||
|
||||
// 显示加载层
|
||||
const loadIndex = layer.load(2, {
|
||||
content: '正在刷新...'
|
||||
});
|
||||
|
||||
// 延迟一下再刷新内容，让用户看到加载效果
|
||||
setTimeout(() => {
|
||||
// 重新加载当前内容页面
|
||||
routerTo({ path: currentPath });
|
||||
layer.close(loadIndex);
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 绑定刷新按钮点击事件
|
||||
$('#refresh-btn').on('click', handleRefresh);
|
||||
|
||||
function routerTo({
|
||||
elem = '#router-view',
|
||||
path = 'dashboard',
|
||||
prefix = 'admin/', //路由前缀
|
||||
suffix = '', //路由后缀
|
||||
} = {}) {
|
||||
var routerView = $(elem);
|
||||
var url = prefix + path + suffix;
|
||||
|
||||
var loadTimer = setTimeout(() => {
|
||||
layer.load(2);
|
||||
}, 100);
|
||||
|
||||
history.replaceState({}, '', `#${path}`); // 因为并没有处理路由
|
||||
routerView.attr('src', url)
|
||||
routerView.off('load').on('load',function(){
|
||||
element.render();
|
||||
form.render();
|
||||
clearTimeout(loadTimer);
|
||||
layer.closeLast('loading');
|
||||
})
|
||||
|
||||
// 选中, 展开菜单
|
||||
$('#ws-nav-side')
|
||||
.find("[data-path='" + path + "']")
|
||||
.parent('dd')
|
||||
.addClass('layui-this')
|
||||
.closest('.layui-nav-item')
|
||||
.addClass('layui-nav-itemed');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
function rippleViewTransition(isDark, callback) {
|
||||
// 移植自 https://github.com/vuejs/vitepress/pull/2347
|
||||
// 支持 Chrome 111+
|
||||
|
||||
// 兼容 jQuery 3 下隐式 event 全局对象不可用的问题
|
||||
if (!window.event) {
|
||||
window.event = new MouseEvent('click', {
|
||||
clientX: document.documentElement.clientWidth,
|
||||
clientY: 60,
|
||||
});
|
||||
}
|
||||
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const transition = document.startViewTransition(function () {
|
||||
callback && callback();
|
||||
});
|
||||
transition.ready.then(function () {
|
||||
var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? clipPath : [...clipPath].reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function addStyle(id, cssStr) {
|
||||
const el = document.getElementById(id) || document.createElement('style');
|
||||
if (!el.isConnected) {
|
||||
el.type = 'text/css';
|
||||
el.id = id;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent = cssStr;
|
||||
}
|
||||
|
||||
function addLink(opt) {
|
||||
return new Promise((resolve) => {
|
||||
const link = Object.assign(document.createElement('link'), {
|
||||
rel: 'stylesheet',
|
||||
onload: () => resolve({ ...opt, status: 'success' }),
|
||||
onerror: () => resolve({ ...opt, status: 'error' }), // 为了在 Promise.all 的使用场景
|
||||
...opt,
|
||||
});
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
function loadScript(url, callback) {
|
||||
const script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.async = 'async';
|
||||
script.src = url;
|
||||
document.body.appendChild(script);
|
||||
if (script.readyState) {
|
||||
script.onreadystatechange = function () {
|
||||
if (script.readyState == 'complete' || script.readyState == 'loaded') {
|
||||
script.onreadystatechange = null;
|
||||
callback && callback();
|
||||
}
|
||||
};
|
||||
} else {
|
||||
script.onload = function () {
|
||||
callback && callback();
|
||||
};
|
||||
}
|
||||
}
|
||||
83
web/static/lib/README.md
Normal file
83
web/static/lib/README.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# ColorMode 模块（WIP）
|
||||
|
||||
开箱即用的主题切换（深色/浅色/自定义）模块，具有自动数据持久性。
|
||||
|
||||
**基本使用**
|
||||
|
||||
```js
|
||||
layui.use(['colorMode'], function () {
|
||||
var colorMode = layui.colorMode
|
||||
|
||||
var theme = colorMode.init()
|
||||
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
**配置**
|
||||
|
||||
模块仅处理 DOM 属性更改，以便在 CSS 中应用正确的选择器，不会处理实际的样式，主题或 CSS。
|
||||
默认情况下，使用 auto 模式（与用户的浏览器首选项匹配），将类 dark 应用于 html 标签时启用深色模式，返回一个对象，用来获取和改变主题。
|
||||
|
||||
```js
|
||||
var theme = colorMode.init()
|
||||
|
||||
theme.mode() // 'dark' | 'light'
|
||||
|
||||
theme.setMode('dark') // 设置为深色模式并持久化到 localstorage
|
||||
|
||||
theme.setMode('auto') // 设置为 auto 模式
|
||||
```
|
||||
|
||||
也可以自定义以使其适用于大多数场景
|
||||
|
||||
```js
|
||||
var theme = colorMode.init({
|
||||
selector: 'body',
|
||||
attribute: 'theme-mode',
|
||||
initialValue: 'light',
|
||||
modes: {
|
||||
auto: '',
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
contrast: 'dark contrast',
|
||||
},
|
||||
storage: localStorage,
|
||||
storageKey: 'xxx-theme-mode',
|
||||
disableTransition: true,
|
||||
})
|
||||
```
|
||||
|
||||
如果上述配置仍不能满足您的需求，可以使用 onChanged 选项完全控制处理更新的方式
|
||||
|
||||
```js
|
||||
var theme = colorMode.init({
|
||||
onChanged: function(mode, defaultHandler){
|
||||
// 自定义更新方式
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**API**
|
||||
|
||||
```ts
|
||||
/**
|
||||
* @typedef {object} initOptions
|
||||
* @prop {string} [selector='html'] - 应用于目标元素的 CSS 选择器
|
||||
* @prop {string} [attribute='class'] - 应用于目标元素的 HTML 属性
|
||||
* @prop {string} [initialValue='auto'] - 初始颜色模式
|
||||
* @prop {Object.<string, string>} [modes]- 颜色模式。value 为添加到 HTML 属性上的值
|
||||
* @prop {(mode: string, defaultHandler: () => void) => void} [onChanged] - 用于处理更新的自定义处理程序，指定时，默认行为将被覆盖。mode 为颜色模式，defaultHandler 为默认处理程序
|
||||
* @prop {Storage} [storage=localStorage] - 将数据持久化到 localStorage/sessionStorage 的键。传递 `null` 以禁用持久性
|
||||
* @prop {string | null} [storageKey='color-scheme'] - 持久化使用的 key
|
||||
* @prop {boolean} [disableTransition=true] - 禁用切换时的过渡 {@link https://paco.me/writing/disable-theme-transitions}
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {initOptions} options
|
||||
* @returns {{ mode: () => string; setMode: (mode: string) => void;}}
|
||||
*/
|
||||
colorMode.init(options)
|
||||
```
|
||||
191
web/static/lib/colorMode.js
Executable file
191
web/static/lib/colorMode.js
Executable file
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* WIP
|
||||
* 移植自 https://github.com/vueuse/vueuse/tree/main/packages/core/useColorMode
|
||||
*/
|
||||
// @ts-ignore
|
||||
layui.define(['jquery'], function (exports) {
|
||||
'use strict';
|
||||
|
||||
/** @type {jQuery}*/
|
||||
var $ = layui.jquery;
|
||||
|
||||
var MOD_NAME = 'colorMode';
|
||||
var defaultWindow = window;
|
||||
var document = defaultWindow.document;
|
||||
|
||||
var colorMode = {
|
||||
/**
|
||||
* @typedef {object} initOptions
|
||||
* @prop {string} [selector="html"] - 应用于目标元素的 CSS 选择器
|
||||
* @prop {string} [attribute="class"] - 应用于目标元素的 HTML 属性
|
||||
* @prop {string} [initialValue='auto'] - 初始颜色模式
|
||||
* @prop {Object.<string, string>} [modes]- 颜色模式。value 为添加到 HTML 属性上的值
|
||||
* @prop {(mode: string, defaultHandler: (window?: Window) => void) => void} [onChanged] - 用于处理更新的自定义处理程序，指定时，默认行为将被覆盖。
|
||||
* @prop {Storage} [storage=localStorage] - 将数据持久化到 localStorage/sessionStorage 的键。传递 `null` 以禁用持久性
|
||||
* @prop {string | null} [storageKey='color-scheme'] - 持久化使用的 key
|
||||
* @prop {boolean} [disableTransition=true] - 禁用切换时的过渡 {@link https://paco.me/writing/disable-theme-transitions}
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {initOptions} options
|
||||
* @returns {{mode: () => string; setMode: (mode: string, window?: Window) => void; }}
|
||||
*/
|
||||
init: function (options) {
|
||||
var defaults = {
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
initialValue: 'auto',
|
||||
modes: {
|
||||
auto: '',
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
},
|
||||
storage: localStorage,
|
||||
storageKey: 'color-scheme',
|
||||
disableTransition: true,
|
||||
};
|
||||
|
||||
var opts = $.extend(true, {}, defaults, options);
|
||||
|
||||
// 当前颜色模式
|
||||
var state;
|
||||
// 系统颜色模式
|
||||
var system;
|
||||
// 初始化 storage
|
||||
var store =
|
||||
opts.storageKey == null
|
||||
? opts.initialValue
|
||||
: (function () {
|
||||
var v = opts.storage.getItem(opts.storageKey);
|
||||
if (!v) {
|
||||
opts.storage.setItem(opts.storageKey, opts.initialValue);
|
||||
return opts.initialValue;
|
||||
}
|
||||
return v;
|
||||
})();
|
||||
|
||||
/**
|
||||
* 更新 HTML 属性值
|
||||
* @param {String} selector
|
||||
* @param {String} attribute
|
||||
* @param {String} value
|
||||
* @param {Window} win
|
||||
*/
|
||||
var updateHTMLAttrs = function (selector, attribute, value, win) {
|
||||
win = win || defaultWindow;
|
||||
var document = win.document;
|
||||
var el = typeof selector === 'string' ? document.querySelector(selector) : undefined;
|
||||
if (!el) return;
|
||||
|
||||
/**@type HTMLStyleElement */
|
||||
var style;
|
||||
|
||||
if (opts.disableTransition) {
|
||||
style = document.createElement('style');
|
||||
style.appendChild(
|
||||
document.createTextNode(
|
||||
'*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
|
||||
)
|
||||
);
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
if (attribute === 'class') {
|
||||
var current = value.split(/\s/g);
|
||||
$.each(opts.modes, function (_, modeval) {
|
||||
$.each((modeval || '').split(/\s/g), function (_, v) {
|
||||
if (!v) return;
|
||||
if (current.indexOf(v) !== -1) {
|
||||
el.classList.add(v);
|
||||
} else {
|
||||
el.classList.remove(v);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
el.setAttribute(attribute, value);
|
||||
}
|
||||
|
||||
if (opts.disableTransition) {
|
||||
// 调用 getComputedStyle 强制浏览器重绘
|
||||
// @ts-expect-error 未使用的变量
|
||||
var _ = window.getComputedStyle(style).opacity;
|
||||
document.head.removeChild(style);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新状态
|
||||
* @param {String} mode - 颜色模式
|
||||
*/
|
||||
var updateState = function (mode) {
|
||||
store = opts.storageKey == null ? mode : opts.storage.getItem(opts.storageKey);
|
||||
|
||||
state = store === 'auto' ? system : store;
|
||||
};
|
||||
|
||||
var prefersColorScheme = function () {
|
||||
var isSupported = window && 'matchMedia' in window && typeof window.matchMedia === 'function';
|
||||
if (!isSupported) {
|
||||
system = 'light';
|
||||
onChanged(system);
|
||||
return;
|
||||
}
|
||||
|
||||
var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
var update = function () {
|
||||
var preferredDark = darkThemeMediaQuery.matches;
|
||||
system = preferredDark ? 'dark' : 'light';
|
||||
onChanged(system);
|
||||
};
|
||||
update();
|
||||
if ('addEventListener' in darkThemeMediaQuery) {
|
||||
darkThemeMediaQuery.addEventListener('change', update);
|
||||
} else {
|
||||
// @ts-ignore 已弃用
|
||||
darkThemeMediaQuery.addListener(update);
|
||||
}
|
||||
};
|
||||
|
||||
prefersColorScheme();
|
||||
|
||||
function defaultOnChanged(win) {
|
||||
updateHTMLAttrs(opts.selector, opts.attribute, opts.modes[state], win);
|
||||
}
|
||||
|
||||
function onChanged(mode, win) {
|
||||
updateState(mode);
|
||||
if (opts.onChanged) {
|
||||
opts.onChanged(state, defaultOnChanged);
|
||||
} else {
|
||||
defaultOnChanged(win);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
setMode: function (mode, win) {
|
||||
if (opts.storageKey) {
|
||||
opts.storage.setItem(opts.storageKey, mode);
|
||||
}
|
||||
onChanged(mode, win);
|
||||
},
|
||||
mode: function () {
|
||||
return state;
|
||||
},
|
||||
};
|
||||
},
|
||||
addStyle: function (id, cssStr) {
|
||||
var el = /** @type {HTMLStyleElement} */ (document.getElementById(id) || document.createElement('style'));
|
||||
if (!el.isConnected) {
|
||||
el.type = 'text/css';
|
||||
el.id = id;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent = cssStr;
|
||||
},
|
||||
};
|
||||
|
||||
exports(MOD_NAME, colorMode);
|
||||
});
|
||||
317
web/static/lib/drawer/drawer.css
Normal file
317
web/static/lib/drawer/drawer.css
Normal file
@@ -0,0 +1,317 @@
|
||||
.layer-drawer.layui-layer {
|
||||
border-radius: 0 !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layer-drawer.layui-layer.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.layer-drawer-anim,
|
||||
.layer-drawer-anim.layui-anim {
|
||||
-webkit-animation-duration: .3s;
|
||||
animation-duration: .3s;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
/* right to left */
|
||||
@keyframes layer-rl {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-rl {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-rl {
|
||||
-webkit-animation-name: layer-rl;
|
||||
animation-name: layer-rl;
|
||||
}
|
||||
|
||||
/* right to left close */
|
||||
@keyframes layer-rl-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-rl-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-rl-close,
|
||||
.layer-anim-rl.layer-anim-close {
|
||||
-webkit-animation-name: layer-rl-close;
|
||||
animation-name: layer-rl-close;
|
||||
}
|
||||
|
||||
/* left to right */
|
||||
@-webkit-keyframes layer-lr {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-lr {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-lr {
|
||||
-webkit-animation-name: layer-lr;
|
||||
animation-name: layer-lr
|
||||
}
|
||||
|
||||
/* left to right close */
|
||||
@-webkit-keyframes layer-lr-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-lr-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-lr-close,
|
||||
.layer-anim-lr.layer-anim-close {
|
||||
-webkit-animation-name: layer-lr-close;
|
||||
animation-name: layer-lr-close
|
||||
}
|
||||
|
||||
/* top to bottom */
|
||||
@-webkit-keyframes layer-tb {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-tb {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-tb {
|
||||
-webkit-animation-name: layer-tb;
|
||||
animation-name: layer-tb
|
||||
}
|
||||
|
||||
/* top to bottom close */
|
||||
@-webkit-keyframes layer-tb-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-tb-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-tb-close,
|
||||
.layer-anim-tb.layer-anim-close {
|
||||
-webkit-animation-name: layer-tb-close;
|
||||
animation-name: layer-tb-close
|
||||
}
|
||||
|
||||
/* bottom to top */
|
||||
@-webkit-keyframes layer-bt {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-bt {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-bt {
|
||||
-webkit-animation-name: layer-bt;
|
||||
animation-name: layer-bt
|
||||
}
|
||||
|
||||
/* bottom to top close */
|
||||
@-webkit-keyframes layer-bt-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-bt-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-bt-close,
|
||||
.layer-anim-bt.layer-anim-close {
|
||||
-webkit-animation-name: layer-bt-close;
|
||||
animation-name: layer-bt-close
|
||||
}
|
||||
200
web/static/lib/drawer/drawer.js
Executable file
200
web/static/lib/drawer/drawer.js
Executable file
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* 抽屉模块
|
||||
*/
|
||||
layui.define(['jquery', 'layer'], function (exports) {
|
||||
('use strict');
|
||||
|
||||
var MOD_NAME = 'drawer';
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
layui.link(layui.cache.base + 'drawer/drawer.css');
|
||||
var drawer = new (function () {
|
||||
this.open = function (option) {
|
||||
return layerDrawer(option);
|
||||
};
|
||||
this.title = layer.title;
|
||||
this.style = layer.style;
|
||||
this.close = layer.close;
|
||||
this.closeAll = layer.closeAll;
|
||||
})();
|
||||
|
||||
/**
|
||||
*
|
||||
* 封装 layer.open
|
||||
*
|
||||
* @param {object} option, `type`, `anim`, `move`, `fixed`, `skin`,`maxWidth`, `maxHeight`, `moveOut`, `moveEnd` 不可用,其它参数和 layer.open 一致, 新增 `iframe`和 `url`参数
|
||||
* @returns {number} 原生 layer 的 index
|
||||
*/
|
||||
function layerDrawer(option) {
|
||||
var opt = normalizeOption(option);
|
||||
if (opt.target) appendToTarget(opt);
|
||||
if (opt.url) loadFragment(opt);
|
||||
if (opt.shade) {
|
||||
$('<style/>')
|
||||
.attr('id', 'layer-drawer')
|
||||
.html('.layui-layer-shade{opacity: 0;transition: opacity .35s cubic-bezier(0.34, 0.69, 0.1, 1);}') // fadeIn
|
||||
.appendTo('head');
|
||||
|
||||
option.end = Aspect(option.end, undefined, function (layero, index) {
|
||||
$('#layer-drawer').remove();
|
||||
});
|
||||
}
|
||||
return layer.open(opt);
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载 HTML 片段到 layer content
|
||||
* @param {object} option 设置选项
|
||||
*/
|
||||
function loadFragment(option) {
|
||||
option.success = Aspect(option.success, function (layero) {
|
||||
$.ajax({
|
||||
url: option.url,
|
||||
dataType: 'html',
|
||||
success: function (result) {
|
||||
layero.children('.layui-layer-content').html(result);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*将 layer 附加到指定节点
|
||||
* @param {object} opt 设置选项
|
||||
*/
|
||||
function appendToTarget(opt) {
|
||||
var targetDOM = $(opt.target);
|
||||
var contentDOM = opt.content;
|
||||
|
||||
contentDOM.appendTo(targetDOM);
|
||||
opt.skin = getDrawerAnimationClass(opt.offset, true);
|
||||
opt.offset = calcOffset(opt.offset, opt.area, targetDOM);
|
||||
// 处理关闭后偶现 DOM 仍显示的问题
|
||||
opt.end = Aspect(opt.end, function () {
|
||||
contentDOM.css('display', 'none');
|
||||
});
|
||||
if (opt.shade) {
|
||||
opt.success = Aspect(opt.success, function (layero, index) {
|
||||
var shadeDOM = $('#layui-layer-shade' + index);
|
||||
shadeDOM.css('position', 'absolute');
|
||||
shadeDOM.appendTo(layero.parent());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 规范化 layer.open 选项
|
||||
* @param {object} option layer.open 的选项
|
||||
* @returns 规范化后的选项
|
||||
*/
|
||||
function normalizeOption(option) {
|
||||
option.type = option.iframe ? 2 : 1;
|
||||
option.anim = -1;
|
||||
option.move = false;
|
||||
option.fixed = true;
|
||||
option.content = option.iframe ? option.iframe : option.content;
|
||||
if (option.offset === undefined) option.offset = 'r';
|
||||
option.area = calcDrawerArea(option.offset, option.area);
|
||||
option.skin = getDrawerAnimationClass(option.offset);
|
||||
if (option.title === undefined) option.title = false;
|
||||
if (option.closeBtn === undefined) option.closeBtn = false;
|
||||
if (option.shade === undefined) option.shade = 0.3;
|
||||
if (option.shadeClose === undefined) option.shadeClose = true;
|
||||
if (option.resize === undefined) option.resize = false;
|
||||
if (option.success === undefined) option.success = function () {}; // 处理遮罩需要
|
||||
if (option.end === undefined) option.end = function () {};
|
||||
return option;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算抽屉宽高
|
||||
* @param {string} offset 抽屉方向 l = 左, r = 右, t = 上, b = 下
|
||||
* @param {string[] | string} drawerArea 抽屉大小，字符串数组格式[width, height]：["200px","100%"]，字符串格式："30%" "200px"。
|
||||
* @returns{string[]} 抽屉宽高数组
|
||||
*/
|
||||
function calcDrawerArea(offset, drawerArea) {
|
||||
if (drawerArea instanceof Array) {
|
||||
return drawerArea;
|
||||
}
|
||||
drawerArea = drawerArea === undefined || drawerArea === 'auto' ? '30%' : drawerArea;
|
||||
if (offset === 'l' || offset === 'r') {
|
||||
return [drawerArea, '100%'];
|
||||
} else if (offset === 't' || offset === 'b') {
|
||||
return ['100%', drawerArea];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取抽屉动画类，指定挂载容器时需要设置绝对定位
|
||||
* @param {string} offset 抽屉方向 l = 左, r = 右, t = 上, b = 下
|
||||
* @param {boolean} [isAbsolute] 是否是绝对定位
|
||||
* @returns {string} 抽屉入场动画类
|
||||
*/
|
||||
function getDrawerAnimationClass(offset, isAbsolute) {
|
||||
var prefixClass = 'layer-drawer layer-drawer-anim layui-anim layer-anim-';
|
||||
var suffix = 'rl';
|
||||
if (offset === 'l') {
|
||||
suffix = 'lr';
|
||||
} else if (offset === 'r') {
|
||||
suffix = 'rl';
|
||||
} else if (offset === 't') {
|
||||
suffix = 'tb';
|
||||
} else if (offset === 'b') {
|
||||
suffix = 'bt';
|
||||
}
|
||||
return prefixClass + suffix + (isAbsolute ? ' position-absolute ' : '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 指定挂载容器重新计算 offset
|
||||
*
|
||||
* layer 源码中使用窗口宽高计算位置，所以此
|
||||
* @param {string} offset 位置
|
||||
* @param {string | string[]} area 范围大小
|
||||
* @param {*} targetEl 挂载节点
|
||||
* @returns 包含抽屉位置信息的数组，[top, left]
|
||||
*/
|
||||
function calcOffset(offset, area, targetEl) {
|
||||
// https://gitee.com/layui/layui/blob/main/src/modules/layer.js#L560
|
||||
if (offset === undefined || offset === 'l' || offset === 't') {
|
||||
offset = 'lt';
|
||||
} else if (offset === 'r') {
|
||||
// https://gitee.com/layui/layui/blob/main/src/modules/layer.js#L554
|
||||
area = area instanceof Array ? area[0] : area;
|
||||
var left = /%$/.test(area)
|
||||
? targetEl.innerWidth() * (1 - window.parseFloat(area) / 100)
|
||||
: targetEl.innerWidth() - window.parseFloat(area);
|
||||
offset = ['0', left];
|
||||
} else if (offset === 'b') {
|
||||
area = area instanceof Array ? area[1] : area;
|
||||
var top = /%$/.test(area)
|
||||
? targetEl.innerHeight() * (1 - window.parseFloat(area) / 100)
|
||||
: targetEl.innerHeight() - window.parseFloat(area);
|
||||
offset = [top, '0'];
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
|
||||
/**
|
||||
* 简易的切面
|
||||
* @param {Function} target 被通知的对象，原函数
|
||||
* @param {Function | undefined} [before] 前置通知
|
||||
* @param {Function | undefined} [after] 后置通知
|
||||
* @returns 代理函数
|
||||
*/
|
||||
function Aspect(target, before, after) {
|
||||
function proxyFunc() {
|
||||
if (before && typeof before === 'function') {
|
||||
before.apply(this, arguments);
|
||||
}
|
||||
target.apply(this, arguments);
|
||||
if (after && typeof after === 'function') {
|
||||
after.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
return proxyFunc;
|
||||
}
|
||||
|
||||
exports(MOD_NAME, drawer);
|
||||
});
|
||||
142
web/static/lib/include.js
Executable file
142
web/static/lib/include.js
Executable file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* @typedef {object} IncludeFile
|
||||
*
|
||||
* @prop {boolean} ok
|
||||
* @prop {number} status
|
||||
* @prop {string} html
|
||||
*/
|
||||
|
||||
/** @type {Map<string,IncludeFile | Promise<IncludeFile>>} */
|
||||
const includeFiles = new Map();
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} src
|
||||
* @param {'cors' | 'no-cors' | 'same-origin'} [mode='cors']
|
||||
*
|
||||
* @returns {Promise<IncludeFile>}
|
||||
*/
|
||||
export function requestInclude(src, mode = 'cors'){
|
||||
const prev = includeFiles.get(src);
|
||||
if (prev !== undefined) {
|
||||
return Promise.resolve(prev);
|
||||
}
|
||||
const fileDataPromise = fetch(src, { mode: mode }).then(async response => {
|
||||
const res = {
|
||||
ok: response.ok,
|
||||
status: response.status,
|
||||
html: await response.text()
|
||||
};
|
||||
includeFiles.set(src, res);
|
||||
return res;
|
||||
});
|
||||
includeFiles.set(src, fileDataPromise);
|
||||
return fileDataPromise;
|
||||
}
|
||||
|
||||
class HtmlImport extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
}
|
||||
|
||||
static get observedAttributes () {
|
||||
return ['src', 'mode', 'allow-scripts'];
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this.getAttribute('src') || '';
|
||||
}
|
||||
|
||||
set src(value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
get mode() {
|
||||
return this.getAttribute('mode') || 'cors';
|
||||
}
|
||||
|
||||
set mode(value) {
|
||||
this.setAttribute('mode', value);
|
||||
}
|
||||
|
||||
get allowScripts() {
|
||||
return this.hasAttribute('allow-scripts');
|
||||
}
|
||||
|
||||
set allowScripts(value) {
|
||||
this.toggleAttribute('allow-scripts', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行 innerHTML 中的 <script></script>
|
||||
* @param {HTMLScriptElement} scripts
|
||||
*/
|
||||
async executeScript(scripts) {
|
||||
const execQueue = function (script) {
|
||||
const newScript = document.createElement('script');
|
||||
[...script.attributes].forEach(attr => newScript.setAttribute(attr.name, attr.value));
|
||||
newScript.textContent = script.textContent;
|
||||
script.parentNode && script.parentNode.replaceChild(newScript, script);
|
||||
return script.src ? new Promise((resolve) => {
|
||||
newScript.async = false;
|
||||
newScript.addEventListener('load', e => resolve(e));
|
||||
newScript.addEventListener('error', e => resolve(e));
|
||||
}) : Promise.resolve();
|
||||
};
|
||||
// 按 <script> 顺序执行，确保上下文关联
|
||||
for (const script of scripts) {
|
||||
await execQueue(script);
|
||||
// console.log(`${script.src||script} loaded`, Date.now());
|
||||
}
|
||||
}
|
||||
|
||||
async handleSrcChange() {
|
||||
try {
|
||||
const src = this.src;
|
||||
const file = await requestInclude(src, this.mode);
|
||||
|
||||
if (src !== this.src) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!file.ok) {
|
||||
this.emit('error', { detail: { status: file.status } });
|
||||
return;
|
||||
}
|
||||
|
||||
this.innerHTML = file.html;
|
||||
|
||||
if (this.allowScripts) {
|
||||
await this.executeScript(this.querySelectorAll('script'));
|
||||
}
|
||||
|
||||
this.emit('load');
|
||||
} catch {
|
||||
this.emit('error', { detail: { status: -1 } });
|
||||
}
|
||||
}
|
||||
|
||||
attributeChangedCallback (name) {
|
||||
if (name == 'src') {
|
||||
this.handleSrcChange();
|
||||
}
|
||||
}
|
||||
|
||||
emit(name, options) {
|
||||
const event = new CustomEvent(name, {
|
||||
bubbles: true,
|
||||
cancelable: false,
|
||||
composed: true,
|
||||
detail: {},
|
||||
...options
|
||||
});
|
||||
|
||||
this.dispatchEvent(event);
|
||||
|
||||
return event;
|
||||
}
|
||||
}
|
||||
|
||||
if (!customElements.get('wc-include')) {
|
||||
customElements.define('wc-include', HtmlImport);
|
||||
}
|
||||
11360
web/static/lib/less.js
Executable file
11360
web/static/lib/less.js
Executable file
File diff suppressed because it is too large
Load Diff
202
web/static/src/css-variables.css
Normal file
202
web/static/src/css-variables.css
Normal file
@@ -0,0 +1,202 @@
|
||||
:root{
|
||||
/* =====色板===== */
|
||||
/*常量,不随明暗主题变化*/
|
||||
--color-white: #FFFFFF;
|
||||
--color-black: #000000;
|
||||
|
||||
--lay-color-white: #FAFAFA;
|
||||
--lay-color-black: #333333;
|
||||
|
||||
--lay-color-red-1: #FFF1E8;
|
||||
--lay-color-red-2: #FFD7C0;
|
||||
--lay-color-red-3: #FFBB99;
|
||||
--lay-color-red-4: #FF9C71;
|
||||
--lay-color-red-5: #FF7A4A;
|
||||
--lay-color-red-6: #FF5722;
|
||||
--lay-color-red-7: #D23B15;
|
||||
--lay-color-red-8: #A6250B;
|
||||
--lay-color-red-9: #791404;
|
||||
--lay-color-red-10: #4D0800;
|
||||
|
||||
--lay-color-blue-1: #E8F9FF;
|
||||
--lay-color-blue-2: #C0ECFF;
|
||||
--lay-color-blue-3: #97DCFF;
|
||||
--lay-color-blue-4: #6FCAFF;
|
||||
--lay-color-blue-5: #46B5FF;
|
||||
--lay-color-blue-6: #1E9FFF;
|
||||
--lay-color-blue-7: #1379D2;
|
||||
--lay-color-blue-8: #0A58A6;
|
||||
--lay-color-blue-9: #043A79;
|
||||
--lay-color-blue-10: #00214D;
|
||||
|
||||
--lay-color-lightblue-1: #E8FDFF;
|
||||
--lay-color-lightblue-2: #C1F4FB;
|
||||
--lay-color-lightblue-3: #9CEAF7;
|
||||
--lay-color-lightblue-4: #77DDF4;
|
||||
--lay-color-lightblue-5: #53CEF0;
|
||||
--lay-color-lightblue-6: #31BDEC;
|
||||
--lay-color-lightblue-7: #1F95C4;
|
||||
--lay-color-lightblue-8: #10709C;
|
||||
--lay-color-lightblue-9: #064E74;
|
||||
--lay-color-lightblue-10: #002F4D;
|
||||
|
||||
--lay-color-layuigreen-1: #E8FFF9;
|
||||
--lay-color-layuigreen-2: #B5F1E3;
|
||||
--lay-color-layuigreen-3: #87E3D1;
|
||||
--lay-color-layuigreen-4: #5DD6C1;
|
||||
--lay-color-layuigreen-5: #37C8B5;
|
||||
--lay-color-layuigreen-6: #16BAAA;
|
||||
--lay-color-layuigreen-7: #0E9F95;
|
||||
--lay-color-layuigreen-8: #08837F;
|
||||
--lay-color-layuigreen-9: #036868;
|
||||
--lay-color-layuigreen-10: #004A4D;
|
||||
|
||||
--lay-color-green-1: #E8FFF2;
|
||||
--lay-color-green-2: #B5F1D1;
|
||||
--lay-color-green-3: #86E2B4;
|
||||
--lay-color-green-4: #5CD49C;
|
||||
--lay-color-green-5: #37C588;
|
||||
--lay-color-green-6: #16B777;
|
||||
--lay-color-green-7: #0E9C68;
|
||||
--lay-color-green-8: #088259;
|
||||
--lay-color-green-9: #036749;
|
||||
--lay-color-green-10: #004D38;
|
||||
|
||||
--lay-color-orange-1: #FFFCE8;
|
||||
--lay-color-orange-2: #FFF5BA;
|
||||
--lay-color-orange-3: #FFEA8B;
|
||||
--lay-color-orange-4: #FFDC5D;
|
||||
--lay-color-orange-5: #FFCB2E;
|
||||
--lay-color-orange-6: #FFB800;
|
||||
--lay-color-orange-7: #D29000;
|
||||
--lay-color-orange-8: #A66C00;
|
||||
--lay-color-orange-9: #794B00;
|
||||
--lay-color-orange-10: #4D2D00;
|
||||
|
||||
--lay-color-cyan-1: #E8F6FF;
|
||||
--lay-color-cyan-2: #B9CEDD;
|
||||
--lay-color-cyan-3: #8FA7BB;
|
||||
--lay-color-cyan-4: #6A829A;
|
||||
--lay-color-cyan-5: #4A5F78;
|
||||
--lay-color-cyan-6: #2F4056;
|
||||
--lay-color-cyan-7: #223654;
|
||||
--lay-color-cyan-8: #162C51;
|
||||
--lay-color-cyan-9: #0B214F;
|
||||
--lay-color-cyan-10: #00174D;
|
||||
|
||||
--lay-color-purple-1: #FDE8FF;
|
||||
--lay-color-purple-2: #EDBEF4;
|
||||
--lay-color-purple-3: #DC97E8;
|
||||
--lay-color-purple-4: #C972DD;
|
||||
--lay-color-purple-5: #B651D1;
|
||||
--lay-color-purple-6: #A233C6;
|
||||
--lay-color-purple-7: #8120A8;
|
||||
--lay-color-purple-8: #631289;
|
||||
--lay-color-purple-9: #48076B;
|
||||
--lay-color-purple-10: #2F004D;
|
||||
|
||||
--lay-color-black-1: #E8F8FF;
|
||||
--lay-color-black-2: #BFD0D8;
|
||||
--lay-color-black-3: #98A8B1;
|
||||
--lay-color-black-4: #73818A;
|
||||
--lay-color-black-5: #505B63;
|
||||
--lay-color-black-6: #2F363C;
|
||||
--lay-color-black-7: #23303C;
|
||||
--lay-color-black-8: #18293C;
|
||||
--lay-color-black-9: #0C213C;
|
||||
--lay-color-black-10: #00183C;
|
||||
|
||||
--lay-color-gray-1: #FAFAFA;
|
||||
--lay-color-gray-2: #F6F6F6;
|
||||
--lay-color-gray-3: #EEEEEE;
|
||||
--lay-color-gray-4: #E2E2E2;
|
||||
--lay-color-gray-5: #DDDDDD;
|
||||
--lay-color-gray-6: #D2D2D2;
|
||||
--lay-color-gray-7: #CCCCCC;
|
||||
--lay-color-gray-8: #C2C2C2;
|
||||
--lay-color-gray-9: #AAAAAA;
|
||||
--lay-color-gray-10: #939393;
|
||||
|
||||
--lay-color-gray-11: #858585;
|
||||
--lay-color-gray-12: #7b7b7b;
|
||||
--lay-color-gray-13: #686868;
|
||||
|
||||
/* =====语义===== */
|
||||
/* 主色 */
|
||||
--lay-color-primary: var(--lay-color-layuigreen-6);
|
||||
--lay-color-primary-hover: var(--lay-color-layuigreen-5);
|
||||
--lay-color-primary-active: var(--lay-color-layuigreen-7);
|
||||
--lay-color-primary-disabled: var(--lay-color-layuigreen-3);
|
||||
--lay-color-primary-light: var(--lay-color-layuigreen-4);
|
||||
|
||||
/* 次色 */
|
||||
--lay-color-secondary: var(--lay-color-green-6);
|
||||
--lay-color-secondary-hover: var(--lay-color-green-5);
|
||||
--lay-color-secondary-active: var(--lay-color-green-7);
|
||||
--lay-color-secondary-disabled: var(--lay-color-green-3);
|
||||
--lay-color-secondary-light: var(--lay-color-green-4);
|
||||
|
||||
/* 引导 */
|
||||
--lay-color-info: var(--lay-color-lightblue-6);
|
||||
--lay-color-info-hover: var(--lay-color-lightblue-5);
|
||||
--lay-color-info-active: var(--lay-color-lightblue-7);
|
||||
--lay-color-info-disabled: var(--lay-color-lightblue-3);
|
||||
--lay-color-info-light: var(--lay-color-lightblue-4);
|
||||
|
||||
/* 百搭 */
|
||||
--lay-color-normal: var(--lay-color-blue-6);
|
||||
--lay-color-normal-hover: var(--lay-color-blue-5);
|
||||
--lay-color-normal-active: var(--lay-color-blue-7);
|
||||
--lay-color-normal-disabled: var(--lay-color-blue-3);
|
||||
--lay-color-normal-light: var(--lay-color-blue-4);
|
||||
|
||||
/* 警示 */
|
||||
--lay-color-warning: var(--lay-color-orange-6);
|
||||
--lay-color-warning-hover: var(--lay-color-orange-5);
|
||||
--lay-color-warning-active: var(--lay-color-orange-7);
|
||||
--lay-color-warning-disabled: var(--lay-color-orange-3);
|
||||
--lay-color-warning-light: var(--lay-color-orange-4);
|
||||
|
||||
/* 成功 */
|
||||
--lay-color-success: var(--lay-color-green-6);
|
||||
--lay-color-success-hover: var(--lay-color-green-5);
|
||||
--lay-color-success-active: var(--lay-color-green-7);
|
||||
--lay-color-success-disabled: var(--lay-color-green-3);
|
||||
--lay-color-success-light: var(--lay-color-green-4);
|
||||
|
||||
/* 错误 */
|
||||
--lay-color-danger: var(--lay-color-red-6);
|
||||
--lay-color-danger-hover: var(--lay-color-red-5);
|
||||
--lay-color-danger-active: var(--lay-color-red-7);
|
||||
--lay-color-danger-disabled: var(--lay-color-red-3);
|
||||
--lay-color-danger-light: var(--lay-color-red-4);
|
||||
|
||||
--lay-color-bg-1: #17171A; /*整体背景*/
|
||||
--lay-color-bg-2: #232324; /*一级容器背景,卡片,面板*/
|
||||
--lay-color-bg-3: #2a2a2b; /*二级容器背景*/
|
||||
--lay-color-bg-4: #313132; /*三级容器背景*/
|
||||
--lay-color-bg-5: #373739; /*下拉弹出框、Tooltip 背景颜色*/
|
||||
--lay-color-bg-white: #f6f6f6; /*白色背景*/
|
||||
|
||||
--lay-color-text-1: rgba(255,255,255,.9); /*强调/正文标题*/
|
||||
--lay-color-text-2: rgba(255,255,255,.7); /*次强调/语句*/
|
||||
--lay-color-text-3: rgba(255,255,255,.5); /*次要信息*/
|
||||
--lay-color-text-4: rgba(255,255,255,.3);/*禁用状态文字 */
|
||||
|
||||
--lay-color-border-1: #2e2e30;
|
||||
--lay-color-border-2: #484849;
|
||||
--lay-color-border-3: #5f5f60;
|
||||
--lay-color-border-4: #929293;
|
||||
|
||||
--lay-color-fill-1: rgba(255,255,255,.04);/*浅/禁用*/
|
||||
--lay-color-fill-2: rgba(255,255,255,.08);/*常规/白底悬浮*/
|
||||
--lay-color-fill-3: rgba(255,255,255,.12); /*深/灰底悬浮*/
|
||||
--lay-color-fill-4: rgba(255,255,255,.16);/*重/特殊场景*/
|
||||
|
||||
--lay-color-hover: var(--lay-color-fill-3); /*bg*/
|
||||
--lay-color-active: var(--lay-color-fill-3); /*bg*/
|
||||
|
||||
--lay-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);/*基础/下层投影 卡片面板*/
|
||||
--lay-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);/*中层投影 下拉菜单,选择器*/
|
||||
--lay-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);/*上层投影 弹窗*/
|
||||
}
|
||||
1899
web/static/src/layui-theme-dark-selector.css
Normal file
1899
web/static/src/layui-theme-dark-selector.css
Normal file
File diff suppressed because it is too large
Load Diff
1
web/static/src/layui-theme-dark-selector.css.map
Normal file
1
web/static/src/layui-theme-dark-selector.css.map
Normal file
File diff suppressed because one or more lines are too long
738
web/static/src/layui-theme-dark.css
Normal file
738
web/static/src/layui-theme-dark.css
Normal file
@@ -0,0 +1,738 @@
|
||||
:root{
|
||||
/* =====色板===== */
|
||||
/*常量,不随明暗主题变化*/
|
||||
--color-white: #FFFFFF;
|
||||
--color-black: #000000;
|
||||
|
||||
--lay-color-white: #FAFAFA;
|
||||
--lay-color-black: #333333;
|
||||
|
||||
--lay-color-red-1: #FFF1E8;
|
||||
--lay-color-red-2: #FFD7C0;
|
||||
--lay-color-red-3: #FFBB99;
|
||||
--lay-color-red-4: #FF9C71;
|
||||
--lay-color-red-5: #FF7A4A;
|
||||
--lay-color-red-6: #FF5722;
|
||||
--lay-color-red-7: #D23B15;
|
||||
--lay-color-red-8: #A6250B;
|
||||
--lay-color-red-9: #791404;
|
||||
--lay-color-red-10: #4D0800;
|
||||
|
||||
--lay-color-blue-1: #E8F9FF;
|
||||
--lay-color-blue-2: #C0ECFF;
|
||||
--lay-color-blue-3: #97DCFF;
|
||||
--lay-color-blue-4: #6FCAFF;
|
||||
--lay-color-blue-5: #46B5FF;
|
||||
--lay-color-blue-6: #1E9FFF;
|
||||
--lay-color-blue-7: #1379D2;
|
||||
--lay-color-blue-8: #0A58A6;
|
||||
--lay-color-blue-9: #043A79;
|
||||
--lay-color-blue-10: #00214D;
|
||||
|
||||
--lay-color-lightblue-1: #E8FDFF;
|
||||
--lay-color-lightblue-2: #C1F4FB;
|
||||
--lay-color-lightblue-3: #9CEAF7;
|
||||
--lay-color-lightblue-4: #77DDF4;
|
||||
--lay-color-lightblue-5: #53CEF0;
|
||||
--lay-color-lightblue-6: #31BDEC;
|
||||
--lay-color-lightblue-7: #1F95C4;
|
||||
--lay-color-lightblue-8: #10709C;
|
||||
--lay-color-lightblue-9: #064E74;
|
||||
--lay-color-lightblue-10: #002F4D;
|
||||
|
||||
--lay-color-layuigreen-1: #E8FFF9;
|
||||
--lay-color-layuigreen-2: #B5F1E3;
|
||||
--lay-color-layuigreen-3: #87E3D1;
|
||||
--lay-color-layuigreen-4: #5DD6C1;
|
||||
--lay-color-layuigreen-5: #37C8B5;
|
||||
--lay-color-layuigreen-6: #16BAAA;
|
||||
--lay-color-layuigreen-7: #0E9F95;
|
||||
--lay-color-layuigreen-8: #08837F;
|
||||
--lay-color-layuigreen-9: #036868;
|
||||
--lay-color-layuigreen-10: #004A4D;
|
||||
|
||||
--lay-color-green-1: #E8FFF2;
|
||||
--lay-color-green-2: #B5F1D1;
|
||||
--lay-color-green-3: #86E2B4;
|
||||
--lay-color-green-4: #5CD49C;
|
||||
--lay-color-green-5: #37C588;
|
||||
--lay-color-green-6: #16B777;
|
||||
--lay-color-green-7: #0E9C68;
|
||||
--lay-color-green-8: #088259;
|
||||
--lay-color-green-9: #036749;
|
||||
--lay-color-green-10: #004D38;
|
||||
|
||||
--lay-color-orange-1: #FFFCE8;
|
||||
--lay-color-orange-2: #FFF5BA;
|
||||
--lay-color-orange-3: #FFEA8B;
|
||||
--lay-color-orange-4: #FFDC5D;
|
||||
--lay-color-orange-5: #FFCB2E;
|
||||
--lay-color-orange-6: #FFB800;
|
||||
--lay-color-orange-7: #D29000;
|
||||
--lay-color-orange-8: #A66C00;
|
||||
--lay-color-orange-9: #794B00;
|
||||
--lay-color-orange-10: #4D2D00;
|
||||
|
||||
--lay-color-cyan-1: #E8F6FF;
|
||||
--lay-color-cyan-2: #B9CEDD;
|
||||
--lay-color-cyan-3: #8FA7BB;
|
||||
--lay-color-cyan-4: #6A829A;
|
||||
--lay-color-cyan-5: #4A5F78;
|
||||
--lay-color-cyan-6: #2F4056;
|
||||
--lay-color-cyan-7: #223654;
|
||||
--lay-color-cyan-8: #162C51;
|
||||
--lay-color-cyan-9: #0B214F;
|
||||
--lay-color-cyan-10: #00174D;
|
||||
|
||||
--lay-color-purple-1: #FDE8FF;
|
||||
--lay-color-purple-2: #EDBEF4;
|
||||
--lay-color-purple-3: #DC97E8;
|
||||
--lay-color-purple-4: #C972DD;
|
||||
--lay-color-purple-5: #B651D1;
|
||||
--lay-color-purple-6: #A233C6;
|
||||
--lay-color-purple-7: #8120A8;
|
||||
--lay-color-purple-8: #631289;
|
||||
--lay-color-purple-9: #48076B;
|
||||
--lay-color-purple-10: #2F004D;
|
||||
|
||||
--lay-color-black-1: #E8F8FF;
|
||||
--lay-color-black-2: #BFD0D8;
|
||||
--lay-color-black-3: #98A8B1;
|
||||
--lay-color-black-4: #73818A;
|
||||
--lay-color-black-5: #505B63;
|
||||
--lay-color-black-6: #2F363C;
|
||||
--lay-color-black-7: #23303C;
|
||||
--lay-color-black-8: #18293C;
|
||||
--lay-color-black-9: #0C213C;
|
||||
--lay-color-black-10: #00183C;
|
||||
|
||||
--lay-color-gray-1: #FAFAFA;
|
||||
--lay-color-gray-2: #F6F6F6;
|
||||
--lay-color-gray-3: #EEEEEE;
|
||||
--lay-color-gray-4: #E2E2E2;
|
||||
--lay-color-gray-5: #DDDDDD;
|
||||
--lay-color-gray-6: #D2D2D2;
|
||||
--lay-color-gray-7: #CCCCCC;
|
||||
--lay-color-gray-8: #C2C2C2;
|
||||
--lay-color-gray-9: #AAAAAA;
|
||||
--lay-color-gray-10: #939393;
|
||||
|
||||
--lay-color-gray-11: #858585;
|
||||
--lay-color-gray-12: #7b7b7b;
|
||||
--lay-color-gray-13: #686868;
|
||||
|
||||
/* =====语义===== */
|
||||
/* 主色 */
|
||||
--lay-color-primary: var(--lay-color-layuigreen-6);
|
||||
--lay-color-primary-hover: var(--lay-color-layuigreen-5);
|
||||
--lay-color-primary-active: var(--lay-color-layuigreen-7);
|
||||
--lay-color-primary-disabled: var(--lay-color-layuigreen-3);
|
||||
--lay-color-primary-light: var(--lay-color-layuigreen-4);
|
||||
|
||||
/* 次色 */
|
||||
--lay-color-secondary: var(--lay-color-green-6);
|
||||
--lay-color-secondary-hover: var(--lay-color-green-5);
|
||||
--lay-color-secondary-active: var(--lay-color-green-7);
|
||||
--lay-color-secondary-disabled: var(--lay-color-green-3);
|
||||
--lay-color-secondary-light: var(--lay-color-green-4);
|
||||
|
||||
/* 引导 */
|
||||
--lay-color-info: var(--lay-color-lightblue-6);
|
||||
--lay-color-info-hover: var(--lay-color-lightblue-5);
|
||||
--lay-color-info-active: var(--lay-color-lightblue-7);
|
||||
--lay-color-info-disabled: var(--lay-color-lightblue-3);
|
||||
--lay-color-info-light: var(--lay-color-lightblue-4);
|
||||
|
||||
/* 百搭 */
|
||||
--lay-color-normal: var(--lay-color-blue-6);
|
||||
--lay-color-normal-hover: var(--lay-color-blue-5);
|
||||
--lay-color-normal-active: var(--lay-color-blue-7);
|
||||
--lay-color-normal-disabled: var(--lay-color-blue-3);
|
||||
--lay-color-normal-light: var(--lay-color-blue-4);
|
||||
|
||||
/* 警示 */
|
||||
--lay-color-warning: var(--lay-color-orange-6);
|
||||
--lay-color-warning-hover: var(--lay-color-orange-5);
|
||||
--lay-color-warning-active: var(--lay-color-orange-7);
|
||||
--lay-color-warning-disabled: var(--lay-color-orange-3);
|
||||
--lay-color-warning-light: var(--lay-color-orange-4);
|
||||
|
||||
/* 成功 */
|
||||
--lay-color-success: var(--lay-color-green-6);
|
||||
--lay-color-success-hover: var(--lay-color-green-5);
|
||||
--lay-color-success-active: var(--lay-color-green-7);
|
||||
--lay-color-success-disabled: var(--lay-color-green-3);
|
||||
--lay-color-success-light: var(--lay-color-green-4);
|
||||
|
||||
/* 错误 */
|
||||
--lay-color-danger: var(--lay-color-red-6);
|
||||
--lay-color-danger-hover: var(--lay-color-red-5);
|
||||
--lay-color-danger-active: var(--lay-color-red-7);
|
||||
--lay-color-danger-disabled: var(--lay-color-red-3);
|
||||
--lay-color-danger-light: var(--lay-color-red-4);
|
||||
|
||||
--lay-color-bg-1: #17171A; /*整体背景*/
|
||||
--lay-color-bg-2: #232324; /*一级容器背景,卡片,面板*/
|
||||
--lay-color-bg-3: #2a2a2b; /*二级容器背景*/
|
||||
--lay-color-bg-4: #313132; /*三级容器背景*/
|
||||
--lay-color-bg-5: #373739; /*下拉弹出框、Tooltip 背景颜色*/
|
||||
--lay-color-bg-white: #f6f6f6; /*白色背景*/
|
||||
|
||||
--lay-color-text-1: rgba(255,255,255,.9); /*强调/正文标题*/
|
||||
--lay-color-text-2: rgba(255,255,255,.7); /*次强调/语句*/
|
||||
--lay-color-text-3: rgba(255,255,255,.5); /*次要信息*/
|
||||
--lay-color-text-4: rgba(255,255,255,.3);/*禁用状态文字 */
|
||||
|
||||
--lay-color-border-1: #2e2e30;
|
||||
--lay-color-border-2: #484849;
|
||||
--lay-color-border-3: #5f5f60;
|
||||
--lay-color-border-4: #929293;
|
||||
|
||||
--lay-color-fill-1: rgba(255,255,255,.04);/*浅/禁用*/
|
||||
--lay-color-fill-2: rgba(255,255,255,.08);/*常规/白底悬浮*/
|
||||
--lay-color-fill-3: rgba(255,255,255,.12); /*深/灰底悬浮*/
|
||||
--lay-color-fill-4: rgba(255,255,255,.16);/*重/特殊场景*/
|
||||
|
||||
--lay-color-hover: var(--lay-color-fill-3); /*bg*/
|
||||
--lay-color-active: var(--lay-color-fill-3); /*bg*/
|
||||
|
||||
--lay-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);/*基础/下层投影 卡片面板*/
|
||||
--lay-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);/*中层投影 下拉菜单,选择器*/
|
||||
--lay-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);/*上层投影 弹窗*/
|
||||
}
|
||||
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{-webkit-tap-highlight-color: rgba(0, 0, 0, 0)} /*danger: 勿改*/
|
||||
body{color:var(--lay-color-text-2);background-color: var(--lay-color-bg-1); color-scheme: dark;}
|
||||
hr{border-bottom:1px solid var(--lay-color-border-2)!important}
|
||||
a{color:var(--lay-color-text-1);}
|
||||
a:hover{color:var(--lay-color-text-3)}
|
||||
/* 三角形 */
|
||||
.layui-edge{border-color:transparent}
|
||||
.layui-edge-top{border-bottom-color:var(--lay-color-border-4)}
|
||||
.layui-edge-right{border-left-color:var(--lay-color-border-4)}
|
||||
.layui-edge-bottom{border-top-color:var(--lay-color-border-4)}
|
||||
.layui-edge-left{border-right-color:var(--lay-color-border-4)}
|
||||
/* 禁用文字 */
|
||||
.layui-disabled,.layui-disabled:hover{color:var(--lay-color-text-4)!important}
|
||||
/* 图标 */
|
||||
.layui-icon{-moz-osx-font-smoothing:grayscale}
|
||||
/* admin 布局 */
|
||||
.layui-layout-admin .layui-header{background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-footer{box-shadow:-1px 0 4px rgb(0 0 0 / 12%);background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-logo{color:var(--lay-color-primary);box-shadow:0 1px 2px 0 rgb(0 0 0 / 15%)}
|
||||
/* 引用 */
|
||||
.layui-elem-quote{border-left:5px solid var(--lay-color-secondary);background-color:var(--lay-color-fill-1)}
|
||||
.layui-quote-nm{border-color: var(--lay-color-fill-1)}
|
||||
/* 进度条 */
|
||||
.layui-progress{background-color: var(--lay-color-bg-3)}
|
||||
.layui-progress-bar{background-color:var( --lay-color-secondary)}
|
||||
.layui-progress-text{color:var(--lay-color-text-2)}
|
||||
.layui-progress-big .layui-progress-text{color: var(--lay-color-text-1)}
|
||||
/* 折叠面板 */
|
||||
.layui-colla-title{color: var(--lay-color-text-1);background-color: var(--lay-color-bg-2)}
|
||||
.layui-colla-content{color:var(--lay-color-text-2)}
|
||||
/* 卡片面板 */
|
||||
.layui-card{background-color: var(--lay-color-bg-2);box-shadow:var(--lay-shadow-1)}
|
||||
.layui-card-header{border-bottom:1px solid var(--lay-color-border-2);color:var(--lay-color-text-1)}
|
||||
/* 常规面板 */
|
||||
.layui-panel{box-shadow:var(--lay-shadow-1);background-color: var( --lay-color-bg-2);color: var(--lay-color-text-1)}
|
||||
.layui-menu-body-panel{box-shadow: var(--lay-shadow-2)}
|
||||
/* 窗口面板 */
|
||||
.layui-panel-window{border-top:5px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-2)}
|
||||
/* 背景颜色 */
|
||||
.layui-bg-red{background-color:var(--lay-color-red-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-orange{background-color:var(--lay-color-orange-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-green{background-color:var(--lay-color-layuigreen-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-cyan{background-color:var(--lay-color-cyan-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-blue{background-color: var(--lay-color-blue-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-black{background-color:var(--lay-color-black-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-purple{background-color: var(--lay-color-purple-6)!important; color: var(--lay-color-white)!important;}
|
||||
.layui-bg-gray{background-color:var(--lay-color-gray-1)!important;color: var(--lay-color-black-6)!important}
|
||||
/* 徽章 */
|
||||
.layui-badge-rim,.layui-border,.layui-colla-content,.layui-colla-item,.layui-collapse,.layui-elem-field,.layui-form-pane .layui-form-item[pane],.layui-form-pane .layui-form-label,.layui-input,.layui-input-split,.layui-panel,.layui-select,.layui-tab-bar,.layui-tab-card,.layui-tab-title,.layui-tab-title .layui-this:after,.layui-textarea{border-color: var(--lay-color-border-1)}
|
||||
/* 边框颜色 */
|
||||
.layui-border{color:var(--lay-color-text-1)!important}
|
||||
.layui-border-red{border-color:var(--lay-color-red-6)!important;color:var(--lay-color-red-6)!important}
|
||||
.layui-border-orange{border-color:var(--lay-color-orange-6)!important;color:var(--lay-color-orange-6)!important}
|
||||
.layui-border-green{border-color:var(--lay-color-layuigreen-6)!important;color:var(--lay-color-layuigreen-6)!important}
|
||||
.layui-border-cyan{border-color:var(--lay-color-cyan-6)!important;color:var(--lay-color-cyan-6)!important}
|
||||
.layui-border-blue{border-color: var(--lay-color-blue-6)!important;color: var(--lay-color-blue-6)!important}
|
||||
.layui-border-purple{border-color: var(--lay-color-purple-6)!important; color: var(--lay-color-purple-6)!important;}
|
||||
.layui-border-black{border-color:var(--lay-color-black-6)!important;color:var(--lay-color-text-1)!important}
|
||||
/* 文本区域 */
|
||||
.layui-text{color:var(--lay-color-text-2)}
|
||||
.layui-text-em,.layui-word-aux{color: var(--lay-color-text-3)!important}
|
||||
.layui-text a:not(.layui-btn){color:var(--lay-color-lightblue-6)}
|
||||
.layui-text blockquote:not(.layui-elem-quote){border-left:5px solid var(--lay-color-border-4)}
|
||||
/* 字体颜色 */
|
||||
.layui-font-red{color:var(--lay-color-red-6)!important}
|
||||
.layui-font-orange{color:var(--lay-color-orange-6)!important}
|
||||
.layui-font-green{color:var(--lay-color-layuigreen-6)!important}
|
||||
.layui-font-cyan{color:var(--lay-color-cyan-6)!important}
|
||||
.layui-font-blue{color:var(--lay-color-lightblue-6)!important}
|
||||
.layui-font-black{color:var(--lay-color-black)!important}
|
||||
.layui-font-purple{color:var(--lay-color-purple-6)!important;}
|
||||
.layui-font-gray{color:var(--lay-color-gray-7)!important}
|
||||
/* 按钮 */
|
||||
.layui-btn{border:1px solid transparent;background-color:var(--lay-color-primary);color: var(--lay-color-text-1)}
|
||||
.layui-btn:hover{color: var(--lay-color-text-2)}
|
||||
.layui-btn-primary{border-color:var(--lay-color-border-2);color:var(--lay-color-text-1);background-color: var(--lay-color-bg-4)}
|
||||
.layui-btn-primary:hover{border-color: transparent;color:var(--lay-color-text-2)}
|
||||
.layui-btn-normal{background-color: var(--lay-color-normal)}
|
||||
.layui-btn-warm{background-color:var(--lay-color-warning)}
|
||||
.layui-btn-danger{background-color:var(--lay-color-danger)}
|
||||
.layui-btn-checked{background-color:var(--lay-color-success)}
|
||||
.layui-btn-disabled,.layui-btn-disabled:active,.layui-btn-disabled:hover{border-color: var(--lay-color-border-2)!important;background-color: var(--lay-color-bg-2)!important;color: var(--lay-color-text-4)!important}
|
||||
.layui-btn-group .layui-btn{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-color:var(--lay-color-border-2);color:var(--lay-color-primary)}
|
||||
.layui-btn-group .layui-btn-primary:first-child{border-left:1px solid var(--lay-color-gray-5)}
|
||||
/*表单*/
|
||||
.layui-input,.layui-select,.layui-textarea{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-2)}
|
||||
.layui-input:hover,.layui-textarea:hover{border-color: var(--lay-color-border-2)!important}
|
||||
.layui-input:focus,.layui-textarea:focus{border-color: var(--lay-color-secondary-hover)!important;background-color: var(--lay-color-bg-2);box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08);}
|
||||
.layui-input[disabled],.layui-select[disabled],.layui-textarea[disabled],.layui-input.layui-disabled,.layui-textarea.layui-disabled{background-color: var(--lay-color-fill-1);color: var(--lay-color-text-4);border-color: var(--lay-color-border-1)!important;box-shadow: 0 0 0 0;}
|
||||
.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus{border-color:var(--lay-color-danger)!important;box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.08);}
|
||||
/* 输入框点缀 */
|
||||
.layui-input-prefix .layui-icon,.layui-input-split .layui-icon,.layui-input-suffix .layui-icon{color: var(--lay-color-gray-8)}
|
||||
.layui-input-wrap .layui-input:hover+.layui-input-split{border-color: var(--lay-color-border-2)}
|
||||
.layui-input-wrap .layui-input[disabled]:hover+.layui-input-split{border-color: var(--lay-color-border-1)}
|
||||
.layui-input-wrap .layui-input:focus+.layui-input-split{border-color: var(--lay-color-secondary-hover)}
|
||||
.layui-input-wrap .layui-input.layui-form-danger:focus + .layui-input-split{border-color: var(--lay-color-danger);}
|
||||
.layui-input-affix .layui-icon{color: var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon-clear{color:var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon:hover{color:var(--lay-color-text-3)}
|
||||
/* 数字输入框动态点缀 */
|
||||
.layui-input-wrap .layui-input-number .layui-icon-up{border-bottom-color:var(--lay-color-border-1)}
|
||||
.layui-input-wrap .layui-input[type="number"].layui-input-number-out-of-range{color:var(--lay-color-danger)}
|
||||
/* 下拉选择 */
|
||||
.layui-form-select{color:var(--lay-color-text-2)}
|
||||
.layui-form-select .layui-edge{border-top-color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl{border:1px solid var( --lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-form-select dl dt{color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-active)}
|
||||
.layui-form-select dl dd.layui-select-tips{color:var(--lay-color-text-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color: var(--lay-color-active);color: var(--lay-color-text-1)}
|
||||
.layui-form-select dl dd.layui-disabled,.layui-form-select dl dd:hover.layui-disabled{background-color: var(--lay-color-bg-5)}
|
||||
.layui-select-none{color:var(--lay-color-black-8)}
|
||||
.layui-select-disabled .layui-disabled{border-color:var(--lay-color-border-1)!important}
|
||||
.layui-select-disabled .layui-edge{border-top-color:var(--lay-color-gray-6)}
|
||||
/* 复选框 */
|
||||
.layui-form-checkbox{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox>div{background-color:var(--lay-color-fill-3);color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox:hover>div{background-color: var(--lay-color-active)}
|
||||
.layui-form-checkbox>i{background-color: var(--lay-color-fill-1);border-top-color:var(--lay-color-border-1);border-right-color:var(--lay-color-border-1);border-bottom-color:var(--lay-color-border-1);border-left-color:initial;color:var(--lay-color-text-1)}
|
||||
.layui-form-checkbox:hover>i{border-color:var(--lay-color-border-2);color:var(--lay-color-text-4)}
|
||||
.layui-form-checked,.layui-form-checked:hover{border-color:var(--lay-color-secondary-active)}
|
||||
.layui-form-checked>div,.layui-form-checked:hover>div{background-color:var(--lay-color-secondary)}
|
||||
.layui-form-checked>i,.layui-form-checked:hover>i{color:var(--lay-color-secondary-hover)}
|
||||
.layui-form-checkbox.layui-checkbox-disabled>div{background-color: var(--lay-color-fill-3) !important;}
|
||||
/* 复选框-默认风格 */
|
||||
.layui-form-checkbox[lay-skin=primary]{background-image:none;background-color:initial;border-color:initial!important}
|
||||
.layui-form-checkbox[lay-skin=primary]>div{background-image:none;background-color:initial;color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox[lay-skin=primary]>i{border-color:var(--lay-color-border-1);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover>i{border-color:var(--lay-color-secondary-hover);color:var(--lay-color-text-1)}
|
||||
.layui-form-checked[lay-skin=primary]>i{background-color:var(--lay-color-secondary);color:var(--lay-color-text-1);border-color:var(--lay-color-secondary-active)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary] >div{background:none!important;color:var(--lay-color-text-4)!important}
|
||||
.layui-form-checked.layui-checkbox-disabled[lay-skin=primary]>i{background-color:var(--lay-color-fill-1)!important;border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary]:hover>i{border-color:var(--lay-color-border-1)}
|
||||
.layui-form-checkbox[lay-skin="primary"]>.layui-icon-indeterminate:before{background-color: var(--lay-color-secondary-hover);opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover>.layui-icon-indeterminate:before{opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"]>.layui-icon-indeterminate{border-color: var(--lay-color-secondary-hover);}
|
||||
/* 复选框-开关风格 */
|
||||
.layui-form-switch{border-color:var(--lay-color-border-2);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-switch>i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-switch.layui-checkbox-disabled>i{background-color:var(--lay-color-gray-7);}
|
||||
.layui-form-switch>div{color:var(--lay-color-gray-8)!important}
|
||||
.layui-form-onswitch{border-color:var(--lay-color-secondary-active);background-color:var(--lay-color-secondary)}
|
||||
.layui-form-onswitch>i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-onswitch>div{color:var(--lay-color-text-1)!important}
|
||||
.layui-checkbox-disabled{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled>div{background-color:var(--lay-color-fill-3)!important;color: var(--lay-color-text-4)!important;}
|
||||
.layui-checkbox-disabled>i{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled:hover>i{color:var(--lay-color-text-1)!important}
|
||||
.layui-form-switch.layui-checkbox-disabled>div{background-color:initial!important;color: var(--lay-color-text-3)!important;}
|
||||
/*复选框背景优化*/
|
||||
.layui-form-checkbox>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checkbox:hover>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checked.layui-checkbox-disabled:hover>i:before,.layui-form-checked:hover>i:before,.layui-form-checked>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checked[lay-skin=primary]:hover>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-checkbox-disabled:hover>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
/*单选框*/
|
||||
.layui-form-radio>i{color:var(--lay-color-gray-8)}
|
||||
.layui-form-radio:hover>*,.layui-form-radioed,.layui-form-radioed>i{color:var(--lay-color-secondary)}
|
||||
.layui-radio-disabled>i{color:var(--lay-color-text-4)!important}
|
||||
.layui-radio-disabled>*{color:var(--lay-color-text-4)!important}
|
||||
/* 表单方框风格 */
|
||||
.layui-form-pane .layui-form-label{background-color:var(--lay-color-bg-2)}
|
||||
/** 分页 **/
|
||||
.layui-laypage a,.layui-laypage button,.layui-laypage input,.layui-laypage select,.layui-laypage span{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-laypage a,.layui-laypage span{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-laypage a[data-page]{color:var(--lay-color-text-2)}
|
||||
.layui-laypage a:hover{color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-spr{color:var(--lay-color-text-3)}
|
||||
.layui-laypage .layui-laypage-curr em{color: var(--lay-color-white)}
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-skip{color:var(--lay-color-text-3)}
|
||||
.layui-laypage button,.layui-laypage input{background-color: var(--lay-color-bg-2)}
|
||||
.layui-laypage input:focus,.layui-laypage select:focus{border-color: var(--lay-color-primary)!important}
|
||||
/** 流加载 **/
|
||||
.layui-flow-more{color:var(--lay-color-text-1)}
|
||||
.layui-flow-more a cite{background-color: var(--lay-color-bg-4);color: var(--lay-color-text-1)}
|
||||
.layui-flow-more a i{color:var(--lay-color-text-2)}
|
||||
/** 表格 **/
|
||||
.layui-table{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-table-mend{background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-click,.layui-table-hover,.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-fill-3)}
|
||||
.layui-table-checked{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-1)}
|
||||
.layui-table-checked.layui-table-hover,.layui-table-checked.layui-table-click{background-color: var(--lay-color-fill-3);}
|
||||
.layui-table td,.layui-table th,.layui-table-col-set,.layui-table-fixed-r,.layui-table-grid-down,.layui-table-header,.layui-table-mend,.layui-table-page,.layui-table-tips-main,.layui-table-tool,.layui-table-total,.layui-table-view,.layui-table[lay-skin=line],.layui-table[lay-skin=row]{border-color: var(--lay-color-border-2)}
|
||||
.layui-table-view:after {background-color: var(--lay-color-border-2);}
|
||||
.layui-table-view .layui-table td[data-edit]:hover:after{border:1px solid var(--lay-color-primary-active)}
|
||||
.layui-table-loading-icon .layui-icon{color:var(--lay-color-gray-8);}
|
||||
.layui-table-page{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span{border: none;}
|
||||
.layui-table-tool{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-tool .layui-inline[lay-event]{color:var(--lay-color-text-3);border:1px solid var(--lay-color-border-2)}
|
||||
.layui-table-tool .layui-inline[lay-event]:hover{border:1px solid var(--lay-color-border-3)}
|
||||
.layui-table-tool-panel{color: var(--lay-color-text-1); border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-table-tool-panel li:hover{background-color:var(--lay-color-active)}
|
||||
.layui-table-col-set{background-color: var(--lay-color-white)}
|
||||
.layui-table-sort .layui-table-sort-asc{border-bottom-color:var(--lay-color-gray-8)}
|
||||
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color:var(--lay-color-gray-11)}
|
||||
.layui-table-sort .layui-table-sort-desc{border-top-color:var(--lay-color-gray-8)}
|
||||
.layui-table-sort .layui-table-sort-desc:hover{border-top-color:var(--lay-color-gray-11)}
|
||||
.layui-table-sort[lay-sort=asc] .layui-table-sort-asc{border-bottom-color:var(--lay-color-gray-13)}
|
||||
.layui-table-sort[lay-sort=desc] .layui-table-sort-desc{border-top-color:var(--lay-color-gray-13)}
|
||||
.layui-table-cell .layui-table-link{color: var(--lay-color-lightblue-5)}
|
||||
.layui-table-body .layui-none{color:var(--lay-color-gray-8)}
|
||||
.layui-table-fixed-l{box-shadow:1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-fixed-r{box-shadow:-1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-edit{box-shadow:var(--lay-shadow-1);background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-edit:focus{border-color:var(--lay-color-secondary)!important}
|
||||
select.layui-table-edit{border-color:var(--lay-color-border-2)}
|
||||
.layui-table-grid-down{background-color: var(--lay-color-bg-5);color:var(--lay-color-gray-8)}
|
||||
.layui-table-grid-down:hover{background-color:var(--lay-color-bg-5)}
|
||||
/* 单元格多行展开风格 */
|
||||
.layui-table-cell-c{background-color: var(--lay-color-gray-13);color: var(--lay-color-text-1); border-color: var(--lay-color-border-3);}
|
||||
.layui-table-cell-c:hover{border-color: var(--lay-color-secondary-hover);}
|
||||
/* 单元格 TIPS 展开风格 */
|
||||
body .layui-table-tips .layui-layer-content{box-shadow:var(--lay-shadow-3)}
|
||||
.layui-table-tips-main{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-3)}
|
||||
.layui-table-tips-c{background-color:var(--lay-color-gray-13);color: var(--lay-color-text-1)}
|
||||
.layui-table-tips-c:hover{background-color:var(--lay-color-gray-10)}
|
||||
/** 文件上传 **/
|
||||
.layui-upload-choose{color:var(--lay-color-gray-8)}
|
||||
.layui-upload-drag{border:1px dashed var( --lay-color-border-2);background-color: var(--lay-color-bg-4);color: var(--lay-color-text-2)}
|
||||
.layui-upload-drag .layui-icon{color: var(--lay-color-primary)}
|
||||
.layui-upload-drag[lay-over]{border-color: var(--lay-color-primary)}
|
||||
/* 基础菜单元素 */
|
||||
.layui-menu{background-color: var(--lay-color-bg-2)}
|
||||
.layui-menu li{color: var(--lay-color-text-1)}
|
||||
.layui-menu li:hover{background-color: var(--lay-color-bg-5)}
|
||||
.layui-menu li.layui-disabled,.layui-menu li.layui-disabled *{color:var(--lay-color-text-4)!important}
|
||||
.layui-menu .layui-menu-item-group>.layui-menu-body-title{color: var(--lay-color-text-3)}
|
||||
.layui-menu .layui-menu-item-none{color: var(--lay-color-text-3);}
|
||||
.layui-menu .layui-menu-item-divider{border-bottom:1px solid var(--lay-color-border-2)}
|
||||
.layui-menu .layui-menu-item-group:hover,
|
||||
.layui-menu .layui-menu-item-none:hover,
|
||||
.layui-menu .layui-menu-item-divider:hover{background: none;}
|
||||
.layui-menu .layui-menu-item-up>.layui-menu-body-title{color: var(--lay-color-text-1)}
|
||||
.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon,.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon{color: var(--lay-color-text-1)}
|
||||
.layui-menu .layui-menu-item-checked,.layui-menu .layui-menu-item-checked2{background-color:var(--lay-color-active)!important;color:var(--lay-color-secondary)}
|
||||
.layui-menu .layui-menu-item-checked a,.layui-menu .layui-menu-item-checked2 a{color:var(--lay-color-secondary)}
|
||||
.layui-menu .layui-menu-item-checked:after{border-right:3px solid var(--lay-color-secondary)}
|
||||
.layui-menu-body-title a{color: var(--lay-color-text-1)}
|
||||
.layui-menu-lg .layui-menu-body-title a:hover,.layui-menu-lg li:hover{color:var(--lay-color-secondary)}
|
||||
/* 下拉菜单 */
|
||||
.layui-dropdown{background-color: var(--lay-color-bg-5)}
|
||||
.layui-dropdown.layui-panel,.layui-dropdown .layui-panel{background-color: var(--lay-color-bg-5);box-shadow: var(--lay-shadow-2)}
|
||||
.layui-dropdown.layui-panel .layui-menu{background-color: var(--lay-color-bg-5)}
|
||||
/** 导航菜单 **/
|
||||
.layui-nav{background-color:var(--lay-color-black-6);color: var(--lay-color-white)}
|
||||
.layui-nav .layui-nav-item a{color: var(--lay-color-text-1);}
|
||||
.layui-nav .layui-this:after,.layui-nav-bar{background-color:var(--lay-color-secondary)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{color: var(--lay-color-text-1)}
|
||||
.layui-nav-child{box-shadow:var(--lay-shadow-2);border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5)}
|
||||
.layui-nav .layui-nav-child a{color: var(--lay-color-text-1)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-this>a:hover{background-color: var(--lay-color-primary);color: var(--lay-color-white)}
|
||||
.layui-nav-itemed>a,.layui-nav-tree .layui-nav-title a,.layui-nav-tree .layui-nav-title a:hover{color: var(--lay-color-white)!important}
|
||||
.layui-nav-tree .layui-nav-bar{background-color:var(--lay-color-primary)}
|
||||
.layui-nav-tree .layui-nav-child{background: none; background-color:rgba(0, 0, 0, .3); border: none; box-shadow: none;}
|
||||
.layui-nav-tree .layui-nav-child a{color: var(--lay-color-white);color: var(--lay-color-text-1)}
|
||||
.layui-nav-tree .layui-nav-child a:hover{background: none; color: var(--lay-color-white)}
|
||||
.layui-nav.layui-bg-gray,.layui-nav-tree.layui-bg-gray{background-color: var(--lay-color-bg-2) !important;color: var(--lay-color-text-1);}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child{background-color: rgba(0, 0, 0, .3) !important;}
|
||||
.layui-nav-tree.layui-bg-gray a,.layui-nav.layui-bg-gray .layui-nav-item a{color: var(--lay-color-text-1)}
|
||||
.layui-nav.layui-bg-gray .layui-nav-child{background-color: var(--lay-color-bg-5);}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: var(--lay-color-text-1)!important}
|
||||
.layui-nav.layui-bg-gray .layui-this a{color:var(--lay-color-secondary)}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a,.layui-nav-tree.layui-bg-gray .layui-this,.layui-nav-tree.layui-bg-gray .layui-this>a{color:var(--lay-color-secondary)!important}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-bar{background-color:var(--lay-color-secondary)}
|
||||
/** 面包屑 **/
|
||||
.layui-breadcrumb a{color:var(--lay-color-gray-7)!important}
|
||||
.layui-breadcrumb a:hover{color:var(--lay-color-secondary)!important}
|
||||
.layui-breadcrumb a cite{color:var(--lay-color-gray-8)}
|
||||
.layui-breadcrumb span[lay-separator]{color:var(--lay-color-gray-7)}
|
||||
/** Tab 选项卡 **/
|
||||
.layui-tab .layui-tab-title:after{border-bottom-color: var(--lay-color-border-1);}
|
||||
.layui-tab-title .layui-this{color: var(--lay-color-text-2)}
|
||||
.layui-tab-title .layui-this:after{border-bottom-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-bar{background-color: var(--lay-color-bg-3)}
|
||||
.layui-tab-more li.layui-this:after{border-bottom-color:var(--lay-color-border-1)}
|
||||
.layui-tab-title li .layui-tab-close{color:var(--lay-color-gray-8)}
|
||||
.layui-tab-title li .layui-tab-close:hover{background-color:var(--lay-color-danger);color: var(--lay-color-white)}
|
||||
.layui-tab-brief>.layui-tab-title .layui-this{color:var( --lay-color-primary)}
|
||||
.layui-tab-brief>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom:2px solid var(--lay-color-secondary)}
|
||||
.layui-tab-card{box-shadow: var(--lay-shadow-1)}
|
||||
.layui-tab-card>.layui-tab-title{background-color: var(--lay-color-bg-2)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this{background-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this:after{border-bottom-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-card>.layui-tab-more .layui-this{color:var(--lay-color-secondary)}
|
||||
|
||||
/** tabs 标签页 **/
|
||||
.layui-tabs-header:after,
|
||||
.layui-tabs-scroll:after{border-bottom-color: var(--lay-color-border-1);}
|
||||
.layui-tabs-card>.layui-tabs-header .layui-this{background-color: transparent;}
|
||||
.layui-tabs-card>.layui-tabs-header .layui-this:after{border-color: var(--lay-color-border-1); border-bottom-color: var(--lay-color-bg-1);}
|
||||
.layui-tabs-card.layui-panel>.layui-tabs-header .layui-this:after{border-bottom-color: var(--lay-color-bg-2);}
|
||||
.layui-tabs-bar .layui-icon{background-color: var(--lay-color-bg-1); color: var(--lay-color-text-2); border-color: var(--lay-color-border-1); box-shadow: 2px 0 5px 0 rgb(0 0 0 / 32%);}
|
||||
.layui-tabs-bar .layui-icon-next{box-shadow: -2px 0 5px 0 rgb(0 0 0 / 32%);}
|
||||
|
||||
/*时间线*/
|
||||
.layui-timeline-axis{background-color: var(--lay-color-bg-4);color:var(--lay-color-secondary)}
|
||||
.layui-timeline-axis:hover{color:var(--lay-color-red-6)}
|
||||
.layui-timeline-item:before{background-color: var(--lay-color-bg-3)}
|
||||
/*徽章*/
|
||||
.layui-badge,.layui-badge-dot,.layui-badge-rim{background-color:var(--lay-color-red-6);color: var(--lay-color-white)}
|
||||
.layui-badge-rim{background-color: var(--lay-color-white);color:var(--lay-color-black-6)}
|
||||
/* carousel 轮播 */
|
||||
.layui-carousel{background-color:var(--lay-color-gray-2)}
|
||||
.layui-carousel>[carousel-item]:before{color:var(--lay-color-gray-8);-moz-osx-font-smoothing:grayscale}
|
||||
.layui-carousel>[carousel-item]>*{background-color:var(--lay-color-gray-2)}
|
||||
.layui-carousel-arrow{background-color:rgba(0,0,0,.2);color: var(--lay-color-white)}
|
||||
.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:var(--lay-color-black)}
|
||||
.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:var(--lay-color-black)}
|
||||
.layui-carousel-ind ul{background-color:rgba(0,0,0,.2)}
|
||||
.layui-carousel-ind ul li{background-color:var(--lay-color-gray-3);background-color: var(--lay-color-text-3)}
|
||||
.layui-carousel-ind ul li:hover{background-color: var(--lay-color-white)}
|
||||
.layui-carousel-ind ul li.layui-this{background-color: var(--lay-color-white)}
|
||||
/** fixbar **/
|
||||
.layui-fixbar li{background-color:var(--lay-color-black-5);color: var(--lay-color-text-1)}
|
||||
/** 表情面板 **/
|
||||
body .layui-util-face .layui-layer-content{background-color: var(--lay-color-bg-5);color:var(--lay-color-text-2)}
|
||||
.layui-util-face ul{border:1px solid var(--lay-color-border-3);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-util-face ul li{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-util-face ul li:hover{border:1px solid var(--lay-color-red-7);background: var(--lay-color-text-1)}
|
||||
/** 代码文本修饰 **/
|
||||
.layui-code{border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-white);color: var(--lay-color-text-2)}
|
||||
/** 穿梭框 **/
|
||||
.layui-transfer-box,.layui-transfer-header,.layui-transfer-search{border-color: var(--lay-color-border-2)}
|
||||
.layui-transfer-box{background-color: var(--lay-color-bg-2)}
|
||||
.layui-transfer-search .layui-icon-search{color:var(--lay-color-gray-8)}
|
||||
.layui-transfer-active .layui-btn{background-color:var( --lay-color-secondary);border-color:var( --lay-color-secondary);color: var(--lay-color-white)}
|
||||
.layui-transfer-active .layui-btn-disabled{background-color:var(--lay-color-gray-2);border-color:var(--lay-color-gray-3);color:var(--lay-color-gray-8)}
|
||||
.layui-transfer-data li:hover{background-color:var(--lay-color-active)}
|
||||
/* chrome 105 */
|
||||
.layui-transfer-data li:hover:has([lay-filter="layTransferCheckbox"][disabled]){background-color:var(--lay-color-bg-2)}
|
||||
.layui-transfer-data .layui-none{color:var(--lay-color-gray-7)}
|
||||
/** 评分组件 **/
|
||||
.layui-rate li i.layui-icon{color:var(--lay-color-orange-6)}
|
||||
/** 颜色选择器 **/
|
||||
.layui-colorpicker{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-colorpicker:hover{border-color: var(--lay-color-border-2)}
|
||||
.layui-colorpicker-trigger-span{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-colorpicker-trigger-i{color: var(--lay-color-white)}
|
||||
.layui-colorpicker-trigger-i.layui-icon-close{color:var(--lay-color-black-7)}
|
||||
.layui-colorpicker-main{background: var(--lay-color-bg-2);border:1px solid var( --lay-color-border-2);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-colorpicker-basis-white{background:linear-gradient(90deg, #fff,hsla(0,0%,100%,0))} /* danger: 勿改*/
|
||||
.layui-colorpicker-basis-black{background:linear-gradient(0deg,#000,transparent)} /* danger: 勿改*/
|
||||
.layui-colorpicker-basis-cursor{border:1px solid var(--lay-color-white)}
|
||||
.layui-colorpicker-side{background:linear-gradient(linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00))} /* danger: 勿改*/
|
||||
.layui-colorpicker-side-slider{box-shadow:var(--lay-shadow-1);background: var(--lay-color-white);border:1px solid var(--lay-color-gray-2)}
|
||||
.layui-colorpicker-alpha-slider{box-shadow:var(--lay-shadow-1);background: var(--lay-color-white);border:1px solid var(--lay-color-gray-2)}
|
||||
.layui-colorpicker-pre.layui-this{box-shadow:var(--lay-shadow-1)}
|
||||
.layui-colorpicker-pre.selected{box-shadow:var(--lay-shadow-1)}
|
||||
.layui-colorpicker-main-input input.layui-input{color: var(--lay-color-text-2)}
|
||||
/** 滑块 **/
|
||||
.layui-slider{background: var( --lay-color-bg-5)}
|
||||
.layui-slider-step{background: var(--lay-color-fill-4)}
|
||||
.layui-slider-wrap-btn{background: var(--lay-color-bg-4)}
|
||||
.layui-slider-tips{color: var(--lay-color-text-1);background:var(--lay-color-black);box-shadow: var(--lay-shadow-3)}
|
||||
.layui-slider-tips:after{border-color:var(--lay-color-black) transparent transparent transparent}
|
||||
.layui-slider-input{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn{border-left:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn i{color:var(--lay-color-gray-9)}
|
||||
.layui-slider-input-btn i:first-child{border-bottom:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn i:hover{color:var(--lay-color-primary)}
|
||||
/** 树组件 **/
|
||||
.layui-tree-line .layui-tree-set .layui-tree-set:after{border-top:1px dotted var(--lay-color-gray-7)}
|
||||
.layui-tree-entry:hover{background-color: var(--lay-color-bg-4)}
|
||||
.layui-tree-line .layui-tree-entry:hover{background-color:var(--lay-color-black)}
|
||||
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt{color:var(--lay-color-text-3)}
|
||||
.layui-tree-entry:hover:has(span.layui-tree-txt.layui-disabled){background-color: transparent !important}
|
||||
.layui-tree-line .layui-tree-set:before{border-left:1px dotted var(--lay-color-gray-7)}
|
||||
.layui-tree-iconClick{color:var(--lay-color-gray-7)}
|
||||
.layui-tree-icon{border:1px solid var(--lay-color-gray-8)}
|
||||
.layui-tree-icon .layui-icon{color:var(--lay-color-text-1)}
|
||||
.layui-tree-iconArrow:after{border-color:transparent transparent transparent var(--lay-color-gray-7)}
|
||||
.layui-tree-txt{color:var(--lay-color-text-2)}
|
||||
.layui-tree-search{color:var(--lay-color-black-7)}
|
||||
.layui-tree-btnGroup .layui-icon:hover{color:var(--lay-color-text-2)}
|
||||
.layui-tree-editInput{background-color:var(--lay-color-fill-2)}
|
||||
.layui-tree-emptyText{color:var(--lay-color-text-2)}
|
||||
/*code 不处理*/
|
||||
.layui-code-view{border:1px solid var(--lay-color-border-1);}
|
||||
.layui-code-view:not(.layui-code-hl){background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2);}
|
||||
.layui-code-header{border-bottom: 1px solid var(--lay-color-border-1); background-color: var(--lay-color-bg-2)}
|
||||
.layui-code-header > .layui-code-header-about{color: var(--lay-color-text-2);}
|
||||
.layui-code-view:not(.layui-code-hl) .layui-code-ln-side{border-color: var(--lay-color-border-1); background-color: var(--lay-color-bg-2);}
|
||||
.layui-code-nowrap > .layui-code-ln-side{background: none !important;}
|
||||
.layui-code-fixbar > span{color: var(--lay-color-text-3);}
|
||||
.layui-code-fixbar > span:hover{color: var(--lay-color-secondary-hover);}
|
||||
|
||||
.layui-code-theme-dark,
|
||||
.layui-code-theme-dark > .layui-code-header{border-color: rgb(126 122 122 / 15%); background-color: #1f1f1f;}
|
||||
.layui-code-theme-dark{border-width: 1px; color: #ccc;}
|
||||
.layui-code-theme-dark > .layui-code-ln-side{border-right-color: #2a2a2a; background: none; color: #6e7681;}
|
||||
|
||||
.layui-code-view.layui-code-hl > .layui-code-ln-side{background-color: transparent;}
|
||||
.layui-code-theme-dark.layui-code-hl,
|
||||
.layui-code-theme-dark.layui-code-hl > .layui-code-ln-side{border-color: rgb(126 122 122 / 15%);}
|
||||
|
||||
.layui-code-full{background-color: var(--lay-color-bg-1)}
|
||||
/*日期选择器*/
|
||||
.layui-laydate-header i{color:var(--lay-color-gray-8)}
|
||||
.laydate-day-holidays:before{color:var(--lay-color-red-6)}
|
||||
.layui-laydate .layui-this .laydate-day-holidays:before{color: var(--lay-color-white)}
|
||||
.layui-laydate-footer span{border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5)}
|
||||
.layui-laydate-footer span:hover{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-footer span.layui-laydate-preview{border-color:transparent!important;}
|
||||
.layui-laydate-footer span.layui-laydate-preview:hover{color:var(--lay-color-text-1) !important}
|
||||
.layui-laydate-shortcut+.layui-laydate-main{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate .layui-laydate-list{background-color: var(--lay-color-bg-5)}
|
||||
.layui-laydate-hint{color:var(--lay-color-danger)}
|
||||
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content,.layui-laydate-range .laydate-main-list-1 .layui-laydate-header{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate,.layui-laydate-hint{border-color: var(--lay-color-border-2);box-shadow:var(--lay-shadow-3);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-laydate{box-shadow: var(--lay-shadow-2)}
|
||||
.layui-laydate-hint{border-color:var(--lay-color-border-1)}
|
||||
.layui-laydate-header{border-bottom:1px solid var( --lay-color-border-2)}
|
||||
.layui-laydate-header i:hover,.layui-laydate-header span:hover{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-content th{color: var(--lay-color-text-1)}
|
||||
.layui-laydate-content td{color: var(--lay-color-text-1)}
|
||||
.layui-laydate-content td.laydate-day-now{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-content td.laydate-day-now:after{border:1px solid var(--lay-color-secondary)}
|
||||
.layui-laydate-linkage .layui-laydate-content td.laydate-selected>div{background-color:var(--lay-color-green-8);}
|
||||
.layui-laydate-linkage .laydate-selected:hover>div{background-color:var(--lay-color-green-8)!important}
|
||||
.layui-laydate-content td>div:hover,.layui-laydate-list li:hover,.layui-laydate-shortcut>li:hover{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-2)}
|
||||
.layui-laydate-content td.laydate-disabled>div:hover{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-4)}
|
||||
.laydate-time-list li ol{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-time-list>li:hover{background: 0 0;}
|
||||
.layui-laydate-content .laydate-day-next,.layui-laydate-content .laydate-day-prev{color: var(--lay-color-text-3)}
|
||||
.layui-laydate-linkage .laydate-selected.laydate-day-next>div,.layui-laydate-linkage .laydate-selected.laydate-day-prev>div{background: none!important}
|
||||
.layui-laydate-footer{border-top:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate-hint{color:var(--lay-color-danger)}
|
||||
.laydate-day-mark::after{background-color:var(--lay-color-secondary)}
|
||||
.layui-laydate-footer span[lay-type=date]{color:var(--lay-color-secondary)}
|
||||
.layui-laydate .layui-this,.layui-laydate .layui-this>div{background-color:var(--lay-color-secondary)!important;color: var(--lay-color-white)!important}
|
||||
.layui-laydate .laydate-disabled,.layui-laydate .laydate-disabled:hover{color: var(--lay-color-text-4)!important}
|
||||
.layui-laydate .layui-this.laydate-disabled,.layui-laydate .layui-this.laydate-disabled>div{background-color: var(--lay-color-fill-1) !important;color: var(--lay-color-text-4) !important;}
|
||||
.laydate-theme-molv .layui-laydate-header{background-color:var(--lay-color-primary)}
|
||||
.laydate-theme-molv .layui-laydate-header i,.laydate-theme-molv .layui-laydate-header span{color:var(--lay-color-gray-2)}
|
||||
.laydate-theme-molv .layui-laydate-header i:hover,.laydate-theme-molv .layui-laydate-header span:hover{color: var(--lay-color-white)}
|
||||
.laydate-theme-molv .layui-laydate-content{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-theme-molv .layui-this, .laydate-theme-molv .layui-this>div{background-color: var(--lay-color-primary) !important;}
|
||||
.laydate-theme-molv .layui-laydate-footer{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-theme-grid .laydate-month-list>li,.laydate-theme-grid .laydate-year-list>li,.laydate-theme-grid .layui-laydate-content td,.laydate-theme-grid .layui-laydate-content thead{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate-linkage.laydate-theme-grid .laydate-selected,.layui-laydate-linkage.laydate-theme-grid .laydate-selected:hover{background-color:var(--lay-color-gray-3)!important;color:var(--lay-color-primary)!important}
|
||||
.layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-next,.layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-prev{color:var(--lay-color-gray-6)!important}
|
||||
.layui-laydate.laydate-theme-circle .layui-laydate-content table td.layui-this{background-color:transparent!important}
|
||||
/*layer*/
|
||||
.layui-layer{background-color: var(--lay-color-bg-3);box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-border{border:1px solid var(--lay-color-border-2);box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-move{background-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-title{border-bottom:1px solid var(--lay-color-border-2);color: var(--lay-color-text-1)}
|
||||
.layui-layer-setwin span{color: var(--lay-color-text-1)}
|
||||
.layui-layer-setwin .layui-layer-min:before{border-bottom-color:var(--lay-color-text-1)}
|
||||
.layui-layer-setwin .layui-layer-min:hover:before{border-bottom-color:var(--lay-color-info-hover)}
|
||||
.layui-layer-setwin .layui-layer-max:after,.layui-layer-setwin .layui-layer-max:before{border:1px solid var(--lay-color-text-3)}
|
||||
.layui-layer-setwin .layui-layer-max:hover:after,.layui-layer-setwin .layui-layer-max:hover:before{border-color:var(--lay-color-info-hover)}
|
||||
.layui-layer-setwin .layui-layer-maxmin:after,.layui-layer-setwin .layui-layer-maxmin:before{background-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-setwin .layui-layer-close2{color:var(--lay-color-text-1);background-color:var(--lay-color-gray-10)}
|
||||
.layui-layer-setwin .layui-layer-close2:hover{background-color:var(--lay-color-normal)}
|
||||
.layui-layer-btn a{border:1px solid var(--lay-color-border-2);background-color: var( --lay-color-bg-3);color: var(--lay-color-text-2)}
|
||||
.layui-layer-btn .layui-layer-btn0{border-color: transparent;background-color: var(--lay-color-normal);color: var(--lay-color-text-1)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-layer-face{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-tips{color:var(--lay-color-warning)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-success{color: var(--lay-color-success)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-error{top: 19px; color: var(--lay-color-danger)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-question{color: var(--lay-color-warning);}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-lock{color: var(--lay-color-gray-10)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-face-cry{color:var(--lay-color-danger)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-face-smile{color:var(--lay-color-success)}
|
||||
.layui-layer-rim{border:6px solid var(--lay-color-gray-8);border:6px solid var(--lay-color-border-2)}
|
||||
.layui-layer-msg{border:1px solid var( --lay-color-border-1)}
|
||||
.layui-layer-hui{background-color: var(--lay-color-bg-3);color: var(--lay-color-text-1)}
|
||||
.layui-layer-hui .layui-layer-close{color: var(--lay-color-white)}
|
||||
.layui-layer-loading-icon{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-loading-2:after,.layui-layer-loading-2:before{border:3px solid var(--lay-color-gray-6)}
|
||||
.layui-layer-loading-2:after{border-color:transparent;border-left-color: var(--lay-color-normal)}
|
||||
.layui-layer-tips .layui-layer-content{box-shadow: var(--lay-shadow-3);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-tips i.layui-layer-TipsG{border-color:transparent}
|
||||
.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{border-right-color:var(--lay-color-black)}
|
||||
.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{border-bottom-color:var(--lay-color-black)}
|
||||
.layui-layer-lan .layui-layer-title{background:var(--lay-color-blue-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-lan .layui-layer-btn{border-top:1px solid var(--lay-color-border-3)}
|
||||
.layui-layer-lan .layui-layer-btn a{background: var(--lay-color-white);border-color:var(--lay-color-border-3);color: var(--lay-color-black-7)}
|
||||
.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background: var(--lay-color-gray-7)}
|
||||
.layui-layer-molv .layui-layer-title{background:var(--lay-color-layuigreen-6);color: var(--lay-color-text-1)}
|
||||
.layui-layer-molv .layui-layer-btn a{background:var(--lay-color-layuigreen-6);border-color:var(--lay-color-layuigreen-6)}
|
||||
.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:var(--lay-color-gray-7)}
|
||||
.layui-layer-win10{border-color: var(--lay-color-border-2)}
|
||||
.layui-layer-win10 .layui-layer-btn{background-color: var(--lay-color-bg-2);border-color: var(--lay-color-border-2)}
|
||||
.layui-layer-win10.layui-layer-dialog .layui-layer-content{color: var(--lay-color-blue-7)}
|
||||
.layui-layer-win10 .layui-layer-btn .layui-layer-btn0{border-color: var(--lay-color-blue-9);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-win10 .layui-layer-btn .layui-layer-btn1{border-color: var(--lay-color-border-2);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-win10 .layui-layer-btn a:hover{background-color: var(--lay-color-blue-10);border-color: var(--lay-color-blue-8)}
|
||||
.layui-layer-prompt .layui-layer-input{border:1px solid var(--lay-color-border-2);color: var(--lay-color-text-2)}
|
||||
.layui-layer-tab{box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-tab .layui-layer-title span.layui-this{border-left:1px solid var(--lay-color-border-2);border-right:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-3)}
|
||||
.layui-layer-photos{background: none; box-shadow: none;}
|
||||
.layui-layer-photos-prev,.layui-layer-photos-next{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-photos-prev:hover,.layui-layer-photos-next:hover{color:var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar{background-color:#333;background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar *{color: var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar a:hover{color: var(--lay-color-text-2)}
|
||||
.layui-layer-photos-header > span:hover{background-color: var(--lay-color-fill-2)}
|
||||
.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{border-right-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{border-bottom-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-prompt .layui-layer-input{border:1px solid var(--lay-color-border-2);color:var(--lay-color-text-1);background-color:var(--lay-color-black)}
|
||||
.layui-layer-prompt .layui-layer-input:focus{outline:0}
|
||||
|
||||
/*fix style*/
|
||||
.layui-layer-loading{background:0 0;box-shadow:0 0}
|
||||
.layui-btn-primary{border-color:transparent}
|
||||
.layui-btn-group .layui-btn:first-child{border-left:none}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-top-color:transparent; border-bottom-color: transparent;}
|
||||
.layui-menu li:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{background-color: var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-fill-2)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this:after{border-bottom-color:var(--lay-color-bg-1)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-laypage button{color:var(--lay-color-text-1)}
|
||||
.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-fill-4)}
|
||||
.layui-menu .layui-menu-item-checked,.layui-menu .layui-menu-item-checked2{background-color:var(--lay-color-fill-2)!important}
|
||||
.layui-input-split{background-color: var(--lay-color-bg-2);}
|
||||
.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 1px;}
|
||||
.layui-input-wrap .layui-input-split:has(+.layui-input:hover) {border-color: var(--lay-color-border-2);}
|
||||
.layui-input-wrap .layui-input-split:has(+.layui-input:focus) {border-color: var(--lay-color-secondary-hover);}
|
||||
.layui-layer-tab .layui-layer-title span:first-child{border-left: none !important;}
|
||||
.layui-slider-input.layui-input,
|
||||
.layui-slider-input .layui-input {background-color: var(--lay-color-bg-2);}
|
||||
|
||||
/*# sourceMappingURL=layui-theme-dark.css.map */
|
||||
1
web/static/src/layui-theme-dark.css.map
Normal file
1
web/static/src/layui-theme-dark.css.map
Normal file
File diff suppressed because one or more lines are too long
534
web/static/src/override.css
Normal file
534
web/static/src/override.css
Normal file
@@ -0,0 +1,534 @@
|
||||
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{-webkit-tap-highlight-color: rgba(0, 0, 0, 0)} /*danger: 勿改*/
|
||||
body{color:var(--lay-color-text-2);background-color: var(--lay-color-bg-1); color-scheme: dark;}
|
||||
hr{border-bottom:1px solid var(--lay-color-border-2)!important}
|
||||
a{color:var(--lay-color-text-1);}
|
||||
a:hover{color:var(--lay-color-text-3)}
|
||||
/* 三角形 */
|
||||
.layui-edge{border-color:transparent}
|
||||
.layui-edge-top{border-bottom-color:var(--lay-color-border-4)}
|
||||
.layui-edge-right{border-left-color:var(--lay-color-border-4)}
|
||||
.layui-edge-bottom{border-top-color:var(--lay-color-border-4)}
|
||||
.layui-edge-left{border-right-color:var(--lay-color-border-4)}
|
||||
/* 禁用文字 */
|
||||
.layui-disabled,.layui-disabled:hover{color:var(--lay-color-text-4)!important}
|
||||
/* 图标 */
|
||||
.layui-icon{-moz-osx-font-smoothing:grayscale}
|
||||
/* admin 布局 */
|
||||
.layui-layout-admin .layui-header{background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-footer{box-shadow:-1px 0 4px rgb(0 0 0 / 12%);background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-logo{color:var(--lay-color-primary);box-shadow:0 1px 2px 0 rgb(0 0 0 / 15%)}
|
||||
/* 引用 */
|
||||
.layui-elem-quote{border-left:5px solid var(--lay-color-secondary);background-color:var(--lay-color-fill-1)}
|
||||
.layui-quote-nm{border-color: var(--lay-color-fill-1)}
|
||||
/* 进度条 */
|
||||
.layui-progress{background-color: var(--lay-color-bg-3)}
|
||||
.layui-progress-bar{background-color:var( --lay-color-secondary)}
|
||||
.layui-progress-text{color:var(--lay-color-text-2)}
|
||||
.layui-progress-big .layui-progress-text{color: var(--lay-color-text-1)}
|
||||
/* 折叠面板 */
|
||||
.layui-colla-title{color: var(--lay-color-text-1);background-color: var(--lay-color-bg-2)}
|
||||
.layui-colla-content{color:var(--lay-color-text-2)}
|
||||
/* 卡片面板 */
|
||||
.layui-card{background-color: var(--lay-color-bg-2);box-shadow:var(--lay-shadow-1)}
|
||||
.layui-card-header{border-bottom:1px solid var(--lay-color-border-2);color:var(--lay-color-text-1)}
|
||||
/* 常规面板 */
|
||||
.layui-panel{box-shadow:var(--lay-shadow-1);background-color: var( --lay-color-bg-2);color: var(--lay-color-text-1)}
|
||||
.layui-menu-body-panel{box-shadow: var(--lay-shadow-2)}
|
||||
/* 窗口面板 */
|
||||
.layui-panel-window{border-top:5px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-2)}
|
||||
/* 背景颜色 */
|
||||
.layui-bg-red{background-color:var(--lay-color-red-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-orange{background-color:var(--lay-color-orange-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-green{background-color:var(--lay-color-layuigreen-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-cyan{background-color:var(--lay-color-cyan-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-blue{background-color: var(--lay-color-blue-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-black{background-color:var(--lay-color-black-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-purple{background-color: var(--lay-color-purple-6)!important; color: var(--lay-color-white)!important;}
|
||||
.layui-bg-gray{background-color:var(--lay-color-gray-1)!important;color: var(--lay-color-black-6)!important}
|
||||
/* 徽章 */
|
||||
.layui-badge-rim,.layui-border,.layui-colla-content,.layui-colla-item,.layui-collapse,.layui-elem-field,.layui-form-pane .layui-form-item[pane],.layui-form-pane .layui-form-label,.layui-input,.layui-input-split,.layui-panel,.layui-select,.layui-tab-bar,.layui-tab-card,.layui-tab-title,.layui-tab-title .layui-this:after,.layui-textarea{border-color: var(--lay-color-border-1)}
|
||||
/* 边框颜色 */
|
||||
.layui-border{color:var(--lay-color-text-1)!important}
|
||||
.layui-border-red{border-color:var(--lay-color-red-6)!important;color:var(--lay-color-red-6)!important}
|
||||
.layui-border-orange{border-color:var(--lay-color-orange-6)!important;color:var(--lay-color-orange-6)!important}
|
||||
.layui-border-green{border-color:var(--lay-color-layuigreen-6)!important;color:var(--lay-color-layuigreen-6)!important}
|
||||
.layui-border-cyan{border-color:var(--lay-color-cyan-6)!important;color:var(--lay-color-cyan-6)!important}
|
||||
.layui-border-blue{border-color: var(--lay-color-blue-6)!important;color: var(--lay-color-blue-6)!important}
|
||||
.layui-border-purple{border-color: var(--lay-color-purple-6)!important; color: var(--lay-color-purple-6)!important;}
|
||||
.layui-border-black{border-color:var(--lay-color-black-6)!important;color:var(--lay-color-text-1)!important}
|
||||
/* 文本区域 */
|
||||
.layui-text{color:var(--lay-color-text-2)}
|
||||
.layui-text-em,.layui-word-aux{color: var(--lay-color-text-3)!important}
|
||||
.layui-text a:not(.layui-btn){color:var(--lay-color-lightblue-6)}
|
||||
.layui-text blockquote:not(.layui-elem-quote){border-left:5px solid var(--lay-color-border-4)}
|
||||
/* 字体颜色 */
|
||||
.layui-font-red{color:var(--lay-color-red-6)!important}
|
||||
.layui-font-orange{color:var(--lay-color-orange-6)!important}
|
||||
.layui-font-green{color:var(--lay-color-layuigreen-6)!important}
|
||||
.layui-font-cyan{color:var(--lay-color-cyan-6)!important}
|
||||
.layui-font-blue{color:var(--lay-color-lightblue-6)!important}
|
||||
.layui-font-black{color:var(--lay-color-black)!important}
|
||||
.layui-font-purple{color:var(--lay-color-purple-6)!important;}
|
||||
.layui-font-gray{color:var(--lay-color-gray-7)!important}
|
||||
/* 按钮 */
|
||||
.layui-btn{border:1px solid transparent;background-color:var(--lay-color-primary);color: var(--lay-color-text-1)}
|
||||
.layui-btn:hover{color: var(--lay-color-text-2)}
|
||||
.layui-btn-primary{border-color:var(--lay-color-border-2);color:var(--lay-color-text-1);background-color: var(--lay-color-bg-4)}
|
||||
.layui-btn-primary:hover{border-color: transparent;color:var(--lay-color-text-2)}
|
||||
.layui-btn-normal{background-color: var(--lay-color-normal)}
|
||||
.layui-btn-warm{background-color:var(--lay-color-warning)}
|
||||
.layui-btn-danger{background-color:var(--lay-color-danger)}
|
||||
.layui-btn-checked{background-color:var(--lay-color-success)}
|
||||
.layui-btn-disabled,.layui-btn-disabled:active,.layui-btn-disabled:hover{border-color: var(--lay-color-border-2)!important;background-color: var(--lay-color-bg-2)!important;color: var(--lay-color-text-4)!important}
|
||||
.layui-btn-group .layui-btn{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-color:var(--lay-color-border-2);color:var(--lay-color-primary)}
|
||||
.layui-btn-group .layui-btn-primary:first-child{border-left:1px solid var(--lay-color-gray-5)}
|
||||
/*表单*/
|
||||
.layui-input,.layui-select,.layui-textarea{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-2)}
|
||||
.layui-input:hover,.layui-textarea:hover{border-color: var(--lay-color-border-2)!important}
|
||||
.layui-input:focus,.layui-textarea:focus{border-color: var(--lay-color-secondary-hover)!important;background-color: var(--lay-color-bg-2);box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08);}
|
||||
.layui-input[disabled],.layui-select[disabled],.layui-textarea[disabled],.layui-input.layui-disabled,.layui-textarea.layui-disabled{background-color: var(--lay-color-fill-1);color: var(--lay-color-text-4);border-color: var(--lay-color-border-1)!important;box-shadow: 0 0 0 0;}
|
||||
.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus{border-color:var(--lay-color-danger)!important;box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.08);}
|
||||
/* 输入框点缀 */
|
||||
.layui-input-prefix .layui-icon,.layui-input-split .layui-icon,.layui-input-suffix .layui-icon{color: var(--lay-color-gray-8)}
|
||||
.layui-input-wrap .layui-input:hover+.layui-input-split{border-color: var(--lay-color-border-2)}
|
||||
.layui-input-wrap .layui-input[disabled]:hover+.layui-input-split{border-color: var(--lay-color-border-1)}
|
||||
.layui-input-wrap .layui-input:focus+.layui-input-split{border-color: var(--lay-color-secondary-hover)}
|
||||
.layui-input-wrap .layui-input.layui-form-danger:focus + .layui-input-split{border-color: var(--lay-color-danger);}
|
||||
.layui-input-affix .layui-icon{color: var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon-clear{color:var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon:hover{color:var(--lay-color-text-3)}
|
||||
/* 数字输入框动态点缀 */
|
||||
.layui-input-wrap .layui-input-number .layui-icon-up{border-bottom-color:var(--lay-color-border-1)}
|
||||
.layui-input-wrap .layui-input[type="number"].layui-input-number-out-of-range{color:var(--lay-color-danger)}
|
||||
/* 下拉选择 */
|
||||
.layui-form-select{color:var(--lay-color-text-2)}
|
||||
.layui-form-select .layui-edge{border-top-color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl{border:1px solid var( --lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-form-select dl dt{color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-active)}
|
||||
.layui-form-select dl dd.layui-select-tips{color:var(--lay-color-text-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color: var(--lay-color-active);color: var(--lay-color-text-1)}
|
||||
.layui-form-select dl dd.layui-disabled,.layui-form-select dl dd:hover.layui-disabled{background-color: var(--lay-color-bg-5)}
|
||||
.layui-select-none{color:var(--lay-color-black-8)}
|
||||
.layui-select-disabled .layui-disabled{border-color:var(--lay-color-border-1)!important}
|
||||
.layui-select-disabled .layui-edge{border-top-color:var(--lay-color-gray-6)}
|
||||
/* 复选框 */
|
||||
.layui-form-checkbox{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox>div{background-color:var(--lay-color-fill-3);color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox:hover>div{background-color: var(--lay-color-active)}
|
||||
.layui-form-checkbox>i{background-color: var(--lay-color-fill-1);border-top-color:var(--lay-color-border-1);border-right-color:var(--lay-color-border-1);border-bottom-color:var(--lay-color-border-1);border-left-color:initial;color:var(--lay-color-text-1)}
|
||||
.layui-form-checkbox:hover>i{border-color:var(--lay-color-border-2);color:var(--lay-color-text-4)}
|
||||
.layui-form-checked,.layui-form-checked:hover{border-color:var(--lay-color-secondary-active)}
|
||||
.layui-form-checked>div,.layui-form-checked:hover>div{background-color:var(--lay-color-secondary)}
|
||||
.layui-form-checked>i,.layui-form-checked:hover>i{color:var(--lay-color-secondary-hover)}
|
||||
.layui-form-checkbox.layui-checkbox-disabled>div{background-color: var(--lay-color-fill-3) !important;}
|
||||
/* 复选框-默认风格 */
|
||||
.layui-form-checkbox[lay-skin=primary]{background-image:none;background-color:initial;border-color:initial!important}
|
||||
.layui-form-checkbox[lay-skin=primary]>div{background-image:none;background-color:initial;color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox[lay-skin=primary]>i{border-color:var(--lay-color-border-1);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover>i{border-color:var(--lay-color-secondary-hover);color:var(--lay-color-text-1)}
|
||||
.layui-form-checked[lay-skin=primary]>i{background-color:var(--lay-color-secondary);color:var(--lay-color-text-1);border-color:var(--lay-color-secondary-active)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary] >div{background:none!important;color:var(--lay-color-text-4)!important}
|
||||
.layui-form-checked.layui-checkbox-disabled[lay-skin=primary]>i{background-color:var(--lay-color-fill-1)!important;border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary]:hover>i{border-color:var(--lay-color-border-1)}
|
||||
.layui-form-checkbox[lay-skin="primary"]>.layui-icon-indeterminate:before{background-color: var(--lay-color-secondary-hover);opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover>.layui-icon-indeterminate:before{opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"]>.layui-icon-indeterminate{border-color: var(--lay-color-secondary-hover);}
|
||||
/* 复选框-开关风格 */
|
||||
.layui-form-switch{border-color:var(--lay-color-border-2);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-switch>i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-switch.layui-checkbox-disabled>i{background-color:var(--lay-color-gray-7);}
|
||||
.layui-form-switch>div{color:var(--lay-color-gray-8)!important}
|
||||
.layui-form-onswitch{border-color:var(--lay-color-secondary-active);background-color:var(--lay-color-secondary)}
|
||||
.layui-form-onswitch>i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-onswitch>div{color:var(--lay-color-text-1)!important}
|
||||
.layui-checkbox-disabled{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled>div{background-color:var(--lay-color-fill-3)!important;color: var(--lay-color-text-4)!important;}
|
||||
.layui-checkbox-disabled>i{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled:hover>i{color:var(--lay-color-text-1)!important}
|
||||
.layui-form-switch.layui-checkbox-disabled>div{background-color:initial!important;color: var(--lay-color-text-3)!important;}
|
||||
/*复选框背景优化*/
|
||||
.layui-form-checkbox>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checkbox:hover>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checked.layui-checkbox-disabled:hover>i:before,.layui-form-checked:hover>i:before,.layui-form-checked>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checked[lay-skin=primary]:hover>i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-checkbox-disabled:hover>i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
/*单选框*/
|
||||
.layui-form-radio>i{color:var(--lay-color-gray-8)}
|
||||
.layui-form-radio:hover>*,.layui-form-radioed,.layui-form-radioed>i{color:var(--lay-color-secondary)}
|
||||
.layui-radio-disabled>i{color:var(--lay-color-text-4)!important}
|
||||
.layui-radio-disabled>*{color:var(--lay-color-text-4)!important}
|
||||
/* 表单方框风格 */
|
||||
.layui-form-pane .layui-form-label{background-color:var(--lay-color-bg-2)}
|
||||
/** 分页 **/
|
||||
.layui-laypage a,.layui-laypage button,.layui-laypage input,.layui-laypage select,.layui-laypage span{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-laypage a,.layui-laypage span{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-laypage a[data-page]{color:var(--lay-color-text-2)}
|
||||
.layui-laypage a:hover{color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-spr{color:var(--lay-color-text-3)}
|
||||
.layui-laypage .layui-laypage-curr em{color: var(--lay-color-white)}
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-skip{color:var(--lay-color-text-3)}
|
||||
.layui-laypage button,.layui-laypage input{background-color: var(--lay-color-bg-2)}
|
||||
.layui-laypage input:focus,.layui-laypage select:focus{border-color: var(--lay-color-primary)!important}
|
||||
/** 流加载 **/
|
||||
.layui-flow-more{color:var(--lay-color-text-1)}
|
||||
.layui-flow-more a cite{background-color: var(--lay-color-bg-4);color: var(--lay-color-text-1)}
|
||||
.layui-flow-more a i{color:var(--lay-color-text-2)}
|
||||
/** 表格 **/
|
||||
.layui-table{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-table-mend{background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-click,.layui-table-hover,.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-fill-3)}
|
||||
.layui-table-checked{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-1)}
|
||||
.layui-table-checked.layui-table-hover,.layui-table-checked.layui-table-click{background-color: var(--lay-color-fill-3);}
|
||||
.layui-table td,.layui-table th,.layui-table-col-set,.layui-table-fixed-r,.layui-table-grid-down,.layui-table-header,.layui-table-mend,.layui-table-page,.layui-table-tips-main,.layui-table-tool,.layui-table-total,.layui-table-view,.layui-table[lay-skin=line],.layui-table[lay-skin=row]{border-color: var(--lay-color-border-2)}
|
||||
.layui-table-view:after {background-color: var(--lay-color-border-2);}
|
||||
.layui-table-view .layui-table td[data-edit]:hover:after{border:1px solid var(--lay-color-primary-active)}
|
||||
.layui-table-loading-icon .layui-icon{color:var(--lay-color-gray-8);}
|
||||
.layui-table-page{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span{border: none;}
|
||||
.layui-table-tool{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-tool .layui-inline[lay-event]{color:var(--lay-color-text-3);border:1px solid var(--lay-color-border-2)}
|
||||
.layui-table-tool .layui-inline[lay-event]:hover{border:1px solid var(--lay-color-border-3)}
|
||||
.layui-table-tool-panel{color: var(--lay-color-text-1); border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-table-tool-panel li:hover{background-color:var(--lay-color-active)}
|
||||
.layui-table-col-set{background-color: var(--lay-color-white)}
|
||||
.layui-table-sort .layui-table-sort-asc{border-bottom-color:var(--lay-color-gray-8)}
|
||||
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color:var(--lay-color-gray-11)}
|
||||
.layui-table-sort .layui-table-sort-desc{border-top-color:var(--lay-color-gray-8)}
|
||||
.layui-table-sort .layui-table-sort-desc:hover{border-top-color:var(--lay-color-gray-11)}
|
||||
.layui-table-sort[lay-sort=asc] .layui-table-sort-asc{border-bottom-color:var(--lay-color-gray-13)}
|
||||
.layui-table-sort[lay-sort=desc] .layui-table-sort-desc{border-top-color:var(--lay-color-gray-13)}
|
||||
.layui-table-cell .layui-table-link{color: var(--lay-color-lightblue-5)}
|
||||
.layui-table-body .layui-none{color:var(--lay-color-gray-8)}
|
||||
.layui-table-fixed-l{box-shadow:1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-fixed-r{box-shadow:-1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-edit{box-shadow:var(--lay-shadow-1);background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-edit:focus{border-color:var(--lay-color-secondary)!important}
|
||||
select.layui-table-edit{border-color:var(--lay-color-border-2)}
|
||||
.layui-table-grid-down{background-color: var(--lay-color-bg-5);color:var(--lay-color-gray-8)}
|
||||
.layui-table-grid-down:hover{background-color:var(--lay-color-bg-5)}
|
||||
/* 单元格多行展开风格 */
|
||||
.layui-table-cell-c{background-color: var(--lay-color-gray-13);color: var(--lay-color-text-1); border-color: var(--lay-color-border-3);}
|
||||
.layui-table-cell-c:hover{border-color: var(--lay-color-secondary-hover);}
|
||||
/* 单元格 TIPS 展开风格 */
|
||||
body .layui-table-tips .layui-layer-content{box-shadow:var(--lay-shadow-3)}
|
||||
.layui-table-tips-main{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-3)}
|
||||
.layui-table-tips-c{background-color:var(--lay-color-gray-13);color: var(--lay-color-text-1)}
|
||||
.layui-table-tips-c:hover{background-color:var(--lay-color-gray-10)}
|
||||
/** 文件上传 **/
|
||||
.layui-upload-choose{color:var(--lay-color-gray-8)}
|
||||
.layui-upload-drag{border:1px dashed var( --lay-color-border-2);background-color: var(--lay-color-bg-4);color: var(--lay-color-text-2)}
|
||||
.layui-upload-drag .layui-icon{color: var(--lay-color-primary)}
|
||||
.layui-upload-drag[lay-over]{border-color: var(--lay-color-primary)}
|
||||
/* 基础菜单元素 */
|
||||
.layui-menu{background-color: var(--lay-color-bg-2)}
|
||||
.layui-menu li{color: var(--lay-color-text-1)}
|
||||
.layui-menu li:hover{background-color: var(--lay-color-bg-5)}
|
||||
.layui-menu li.layui-disabled,.layui-menu li.layui-disabled *{color:var(--lay-color-text-4)!important}
|
||||
.layui-menu .layui-menu-item-group>.layui-menu-body-title{color: var(--lay-color-text-3)}
|
||||
.layui-menu .layui-menu-item-none{color: var(--lay-color-text-3);}
|
||||
.layui-menu .layui-menu-item-divider{border-bottom:1px solid var(--lay-color-border-2)}
|
||||
.layui-menu .layui-menu-item-group:hover,
|
||||
.layui-menu .layui-menu-item-none:hover,
|
||||
.layui-menu .layui-menu-item-divider:hover{background: none;}
|
||||
.layui-menu .layui-menu-item-up>.layui-menu-body-title{color: var(--lay-color-text-1)}
|
||||
.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon,.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon{color: var(--lay-color-text-1)}
|
||||
.layui-menu .layui-menu-item-checked,.layui-menu .layui-menu-item-checked2{background-color:var(--lay-color-active)!important;color:var(--lay-color-secondary)}
|
||||
.layui-menu .layui-menu-item-checked a,.layui-menu .layui-menu-item-checked2 a{color:var(--lay-color-secondary)}
|
||||
.layui-menu .layui-menu-item-checked:after{border-right:3px solid var(--lay-color-secondary)}
|
||||
.layui-menu-body-title a{color: var(--lay-color-text-1)}
|
||||
.layui-menu-lg .layui-menu-body-title a:hover,.layui-menu-lg li:hover{color:var(--lay-color-secondary)}
|
||||
/* 下拉菜单 */
|
||||
.layui-dropdown{background-color: var(--lay-color-bg-5)}
|
||||
.layui-dropdown.layui-panel,.layui-dropdown .layui-panel{background-color: var(--lay-color-bg-5);box-shadow: var(--lay-shadow-2)}
|
||||
.layui-dropdown.layui-panel .layui-menu{background-color: var(--lay-color-bg-5)}
|
||||
/** 导航菜单 **/
|
||||
.layui-nav{background-color:var(--lay-color-black-6);color: var(--lay-color-white)}
|
||||
.layui-nav .layui-nav-item a{color: var(--lay-color-text-1);}
|
||||
.layui-nav .layui-this:after,.layui-nav-bar{background-color:var(--lay-color-secondary)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{color: var(--lay-color-text-1)}
|
||||
.layui-nav-child{box-shadow:var(--lay-shadow-2);border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5)}
|
||||
.layui-nav .layui-nav-child a{color: var(--lay-color-text-1)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-this>a:hover{background-color: var(--lay-color-primary);color: var(--lay-color-white)}
|
||||
.layui-nav-itemed>a,.layui-nav-tree .layui-nav-title a,.layui-nav-tree .layui-nav-title a:hover{color: var(--lay-color-white)!important}
|
||||
.layui-nav-tree .layui-nav-bar{background-color:var(--lay-color-primary)}
|
||||
.layui-nav-tree .layui-nav-child{background: none; background-color:rgba(0, 0, 0, .3); border: none; box-shadow: none;}
|
||||
.layui-nav-tree .layui-nav-child a{color: var(--lay-color-white);color: var(--lay-color-text-1)}
|
||||
.layui-nav-tree .layui-nav-child a:hover{background: none; color: var(--lay-color-white)}
|
||||
.layui-nav.layui-bg-gray,.layui-nav-tree.layui-bg-gray{background-color: var(--lay-color-bg-2) !important;color: var(--lay-color-text-1);}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child{background-color: rgba(0, 0, 0, .3) !important;}
|
||||
.layui-nav-tree.layui-bg-gray a,.layui-nav.layui-bg-gray .layui-nav-item a{color: var(--lay-color-text-1)}
|
||||
.layui-nav.layui-bg-gray .layui-nav-child{background-color: var(--lay-color-bg-5);}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: var(--lay-color-text-1)!important}
|
||||
.layui-nav.layui-bg-gray .layui-this a{color:var(--lay-color-secondary)}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a,.layui-nav-tree.layui-bg-gray .layui-this,.layui-nav-tree.layui-bg-gray .layui-this>a{color:var(--lay-color-secondary)!important}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-bar{background-color:var(--lay-color-secondary)}
|
||||
/** 面包屑 **/
|
||||
.layui-breadcrumb a{color:var(--lay-color-gray-7)!important}
|
||||
.layui-breadcrumb a:hover{color:var(--lay-color-secondary)!important}
|
||||
.layui-breadcrumb a cite{color:var(--lay-color-gray-8)}
|
||||
.layui-breadcrumb span[lay-separator]{color:var(--lay-color-gray-7)}
|
||||
/** Tab 选项卡 **/
|
||||
.layui-tab .layui-tab-title:after{border-bottom-color: var(--lay-color-border-1);}
|
||||
.layui-tab-title .layui-this{color: var(--lay-color-text-2)}
|
||||
.layui-tab-title .layui-this:after{border-bottom-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-bar{background-color: var(--lay-color-bg-3)}
|
||||
.layui-tab-more li.layui-this:after{border-bottom-color:var(--lay-color-border-1)}
|
||||
.layui-tab-title li .layui-tab-close{color:var(--lay-color-gray-8)}
|
||||
.layui-tab-title li .layui-tab-close:hover{background-color:var(--lay-color-danger);color: var(--lay-color-white)}
|
||||
.layui-tab-brief>.layui-tab-title .layui-this{color:var( --lay-color-primary)}
|
||||
.layui-tab-brief>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom:2px solid var(--lay-color-secondary)}
|
||||
.layui-tab-card{box-shadow: var(--lay-shadow-1)}
|
||||
.layui-tab-card>.layui-tab-title{background-color: var(--lay-color-bg-2)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this{background-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this:after{border-bottom-color: var(--lay-color-bg-1)}
|
||||
.layui-tab-card>.layui-tab-more .layui-this{color:var(--lay-color-secondary)}
|
||||
|
||||
/** tabs 标签页 **/
|
||||
.layui-tabs-header:after,
|
||||
.layui-tabs-scroll:after{border-bottom-color: var(--lay-color-border-1);}
|
||||
.layui-tabs-card>.layui-tabs-header .layui-this{background-color: transparent;}
|
||||
.layui-tabs-card>.layui-tabs-header .layui-this:after{border-color: var(--lay-color-border-1); border-bottom-color: var(--lay-color-bg-1);}
|
||||
.layui-tabs-card.layui-panel>.layui-tabs-header .layui-this:after{border-bottom-color: var(--lay-color-bg-2);}
|
||||
.layui-tabs-bar .layui-icon{background-color: var(--lay-color-bg-1); color: var(--lay-color-text-2); border-color: var(--lay-color-border-1); box-shadow: 2px 0 5px 0 rgb(0 0 0 / 32%);}
|
||||
.layui-tabs-bar .layui-icon-next{box-shadow: -2px 0 5px 0 rgb(0 0 0 / 32%);}
|
||||
|
||||
/*时间线*/
|
||||
.layui-timeline-axis{background-color: var(--lay-color-bg-4);color:var(--lay-color-secondary)}
|
||||
.layui-timeline-axis:hover{color:var(--lay-color-red-6)}
|
||||
.layui-timeline-item:before{background-color: var(--lay-color-bg-3)}
|
||||
/*徽章*/
|
||||
.layui-badge,.layui-badge-dot,.layui-badge-rim{background-color:var(--lay-color-red-6);color: var(--lay-color-white)}
|
||||
.layui-badge-rim{background-color: var(--lay-color-white);color:var(--lay-color-black-6)}
|
||||
/* carousel 轮播 */
|
||||
.layui-carousel{background-color:var(--lay-color-gray-2)}
|
||||
.layui-carousel>[carousel-item]:before{color:var(--lay-color-gray-8);-moz-osx-font-smoothing:grayscale}
|
||||
.layui-carousel>[carousel-item]>*{background-color:var(--lay-color-gray-2)}
|
||||
.layui-carousel-arrow{background-color:rgba(0,0,0,.2);color: var(--lay-color-white)}
|
||||
.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:var(--lay-color-black)}
|
||||
.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:var(--lay-color-black)}
|
||||
.layui-carousel-ind ul{background-color:rgba(0,0,0,.2)}
|
||||
.layui-carousel-ind ul li{background-color:var(--lay-color-gray-3);background-color: var(--lay-color-text-3)}
|
||||
.layui-carousel-ind ul li:hover{background-color: var(--lay-color-white)}
|
||||
.layui-carousel-ind ul li.layui-this{background-color: var(--lay-color-white)}
|
||||
/** fixbar **/
|
||||
.layui-fixbar li{background-color:var(--lay-color-black-5);color: var(--lay-color-text-1)}
|
||||
/** 表情面板 **/
|
||||
body .layui-util-face .layui-layer-content{background-color: var(--lay-color-bg-5);color:var(--lay-color-text-2)}
|
||||
.layui-util-face ul{border:1px solid var(--lay-color-border-3);background-color: var(--lay-color-bg-5);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-util-face ul li{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-util-face ul li:hover{border:1px solid var(--lay-color-red-7);background: var(--lay-color-text-1)}
|
||||
/** 代码文本修饰 **/
|
||||
.layui-code{border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-white);color: var(--lay-color-text-2)}
|
||||
/** 穿梭框 **/
|
||||
.layui-transfer-box,.layui-transfer-header,.layui-transfer-search{border-color: var(--lay-color-border-2)}
|
||||
.layui-transfer-box{background-color: var(--lay-color-bg-2)}
|
||||
.layui-transfer-search .layui-icon-search{color:var(--lay-color-gray-8)}
|
||||
.layui-transfer-active .layui-btn{background-color:var( --lay-color-secondary);border-color:var( --lay-color-secondary);color: var(--lay-color-white)}
|
||||
.layui-transfer-active .layui-btn-disabled{background-color:var(--lay-color-gray-2);border-color:var(--lay-color-gray-3);color:var(--lay-color-gray-8)}
|
||||
.layui-transfer-data li:hover{background-color:var(--lay-color-active)}
|
||||
/* chrome 105 */
|
||||
.layui-transfer-data li:hover:has([lay-filter="layTransferCheckbox"][disabled]){background-color:var(--lay-color-bg-2)}
|
||||
.layui-transfer-data .layui-none{color:var(--lay-color-gray-7)}
|
||||
/** 评分组件 **/
|
||||
.layui-rate li i.layui-icon{color:var(--lay-color-orange-6)}
|
||||
/** 颜色选择器 **/
|
||||
.layui-colorpicker{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-colorpicker:hover{border-color: var(--lay-color-border-2)}
|
||||
.layui-colorpicker-trigger-span{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-colorpicker-trigger-i{color: var(--lay-color-white)}
|
||||
.layui-colorpicker-trigger-i.layui-icon-close{color:var(--lay-color-black-7)}
|
||||
.layui-colorpicker-main{background: var(--lay-color-bg-2);border:1px solid var( --lay-color-border-2);box-shadow:var(--lay-shadow-2)}
|
||||
.layui-colorpicker-basis-white{background:linear-gradient(90deg, #fff,hsla(0,0%,100%,0))} /* danger: 勿改*/
|
||||
.layui-colorpicker-basis-black{background:linear-gradient(0deg,#000,transparent)} /* danger: 勿改*/
|
||||
.layui-colorpicker-basis-cursor{border:1px solid var(--lay-color-white)}
|
||||
.layui-colorpicker-side{background:linear-gradient(linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00))} /* danger: 勿改*/
|
||||
.layui-colorpicker-side-slider{box-shadow:var(--lay-shadow-1);background: var(--lay-color-white);border:1px solid var(--lay-color-gray-2)}
|
||||
.layui-colorpicker-alpha-slider{box-shadow:var(--lay-shadow-1);background: var(--lay-color-white);border:1px solid var(--lay-color-gray-2)}
|
||||
.layui-colorpicker-pre.layui-this{box-shadow:var(--lay-shadow-1)}
|
||||
.layui-colorpicker-pre.selected{box-shadow:var(--lay-shadow-1)}
|
||||
.layui-colorpicker-main-input input.layui-input{color: var(--lay-color-text-2)}
|
||||
/** 滑块 **/
|
||||
.layui-slider{background: var( --lay-color-bg-5)}
|
||||
.layui-slider-step{background: var(--lay-color-fill-4)}
|
||||
.layui-slider-wrap-btn{background: var(--lay-color-bg-4)}
|
||||
.layui-slider-tips{color: var(--lay-color-text-1);background:var(--lay-color-black);box-shadow: var(--lay-shadow-3)}
|
||||
.layui-slider-tips:after{border-color:var(--lay-color-black) transparent transparent transparent}
|
||||
.layui-slider-input{border:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn{border-left:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn i{color:var(--lay-color-gray-9)}
|
||||
.layui-slider-input-btn i:first-child{border-bottom:1px solid var(--lay-color-border-1)}
|
||||
.layui-slider-input-btn i:hover{color:var(--lay-color-primary)}
|
||||
/** 树组件 **/
|
||||
.layui-tree-line .layui-tree-set .layui-tree-set:after{border-top:1px dotted var(--lay-color-gray-7)}
|
||||
.layui-tree-entry:hover{background-color: var(--lay-color-bg-4)}
|
||||
.layui-tree-line .layui-tree-entry:hover{background-color:var(--lay-color-black)}
|
||||
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt{color:var(--lay-color-text-3)}
|
||||
.layui-tree-entry:hover:has(span.layui-tree-txt.layui-disabled){background-color: transparent !important}
|
||||
.layui-tree-line .layui-tree-set:before{border-left:1px dotted var(--lay-color-gray-7)}
|
||||
.layui-tree-iconClick{color:var(--lay-color-gray-7)}
|
||||
.layui-tree-icon{border:1px solid var(--lay-color-gray-8)}
|
||||
.layui-tree-icon .layui-icon{color:var(--lay-color-text-1)}
|
||||
.layui-tree-iconArrow:after{border-color:transparent transparent transparent var(--lay-color-gray-7)}
|
||||
.layui-tree-txt{color:var(--lay-color-text-2)}
|
||||
.layui-tree-search{color:var(--lay-color-black-7)}
|
||||
.layui-tree-btnGroup .layui-icon:hover{color:var(--lay-color-text-2)}
|
||||
.layui-tree-editInput{background-color:var(--lay-color-fill-2)}
|
||||
.layui-tree-emptyText{color:var(--lay-color-text-2)}
|
||||
/*code 不处理*/
|
||||
.layui-code-view{border:1px solid var(--lay-color-border-1);}
|
||||
.layui-code-view:not(.layui-code-hl){background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2);}
|
||||
.layui-code-header{border-bottom: 1px solid var(--lay-color-border-1); background-color: var(--lay-color-bg-2)}
|
||||
.layui-code-header > .layui-code-header-about{color: var(--lay-color-text-2);}
|
||||
.layui-code-view:not(.layui-code-hl) .layui-code-ln-side{border-color: var(--lay-color-border-1); background-color: var(--lay-color-bg-2);}
|
||||
.layui-code-nowrap > .layui-code-ln-side{background: none !important;}
|
||||
.layui-code-fixbar > span{color: var(--lay-color-text-3);}
|
||||
.layui-code-fixbar > span:hover{color: var(--lay-color-secondary-hover);}
|
||||
|
||||
.layui-code-theme-dark,
|
||||
.layui-code-theme-dark > .layui-code-header{border-color: rgb(126 122 122 / 15%); background-color: #1f1f1f;}
|
||||
.layui-code-theme-dark{border-width: 1px; color: #ccc;}
|
||||
.layui-code-theme-dark > .layui-code-ln-side{border-right-color: #2a2a2a; background: none; color: #6e7681;}
|
||||
|
||||
.layui-code-view.layui-code-hl > .layui-code-ln-side{background-color: transparent;}
|
||||
.layui-code-theme-dark.layui-code-hl,
|
||||
.layui-code-theme-dark.layui-code-hl > .layui-code-ln-side{border-color: rgb(126 122 122 / 15%);}
|
||||
|
||||
.layui-code-full{background-color: var(--lay-color-bg-1)}
|
||||
/*日期选择器*/
|
||||
.layui-laydate-header i{color:var(--lay-color-gray-8)}
|
||||
.laydate-day-holidays:before{color:var(--lay-color-red-6)}
|
||||
.layui-laydate .layui-this .laydate-day-holidays:before{color: var(--lay-color-white)}
|
||||
.layui-laydate-footer span{border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5)}
|
||||
.layui-laydate-footer span:hover{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-footer span.layui-laydate-preview{border-color:transparent!important;}
|
||||
.layui-laydate-footer span.layui-laydate-preview:hover{color:var(--lay-color-text-1) !important}
|
||||
.layui-laydate-shortcut+.layui-laydate-main{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate .layui-laydate-list{background-color: var(--lay-color-bg-5)}
|
||||
.layui-laydate-hint{color:var(--lay-color-danger)}
|
||||
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content,.layui-laydate-range .laydate-main-list-1 .layui-laydate-header{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate,.layui-laydate-hint{border-color: var(--lay-color-border-2);box-shadow:var(--lay-shadow-3);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-laydate{box-shadow: var(--lay-shadow-2)}
|
||||
.layui-laydate-hint{border-color:var(--lay-color-border-1)}
|
||||
.layui-laydate-header{border-bottom:1px solid var( --lay-color-border-2)}
|
||||
.layui-laydate-header i:hover,.layui-laydate-header span:hover{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-content th{color: var(--lay-color-text-1)}
|
||||
.layui-laydate-content td{color: var(--lay-color-text-1)}
|
||||
.layui-laydate-content td.laydate-day-now{color:var(--lay-color-secondary)}
|
||||
.layui-laydate-content td.laydate-day-now:after{border:1px solid var(--lay-color-secondary)}
|
||||
.layui-laydate-linkage .layui-laydate-content td.laydate-selected>div{background-color:var(--lay-color-green-8);}
|
||||
.layui-laydate-linkage .laydate-selected:hover>div{background-color:var(--lay-color-green-8)!important}
|
||||
.layui-laydate-content td>div:hover,.layui-laydate-list li:hover,.layui-laydate-shortcut>li:hover{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-2)}
|
||||
.layui-laydate-content td.laydate-disabled>div:hover{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-4)}
|
||||
.laydate-time-list li ol{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-time-list>li:hover{background: 0 0;}
|
||||
.layui-laydate-content .laydate-day-next,.layui-laydate-content .laydate-day-prev{color: var(--lay-color-text-3)}
|
||||
.layui-laydate-linkage .laydate-selected.laydate-day-next>div,.layui-laydate-linkage .laydate-selected.laydate-day-prev>div{background: none!important}
|
||||
.layui-laydate-footer{border-top:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate-hint{color:var(--lay-color-danger)}
|
||||
.laydate-day-mark::after{background-color:var(--lay-color-secondary)}
|
||||
.layui-laydate-footer span[lay-type=date]{color:var(--lay-color-secondary)}
|
||||
.layui-laydate .layui-this,.layui-laydate .layui-this>div{background-color:var(--lay-color-secondary)!important;color: var(--lay-color-white)!important}
|
||||
.layui-laydate .laydate-disabled,.layui-laydate .laydate-disabled:hover{color: var(--lay-color-text-4)!important}
|
||||
.layui-laydate .layui-this.laydate-disabled,.layui-laydate .layui-this.laydate-disabled>div{background-color: var(--lay-color-fill-1) !important;color: var(--lay-color-text-4) !important;}
|
||||
.laydate-theme-molv .layui-laydate-header{background-color:var(--lay-color-primary)}
|
||||
.laydate-theme-molv .layui-laydate-header i,.laydate-theme-molv .layui-laydate-header span{color:var(--lay-color-gray-2)}
|
||||
.laydate-theme-molv .layui-laydate-header i:hover,.laydate-theme-molv .layui-laydate-header span:hover{color: var(--lay-color-white)}
|
||||
.laydate-theme-molv .layui-laydate-content{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-theme-molv .layui-this, .laydate-theme-molv .layui-this>div{background-color: var(--lay-color-primary) !important;}
|
||||
.laydate-theme-molv .layui-laydate-footer{border:1px solid var(--lay-color-border-2)}
|
||||
.laydate-theme-grid .laydate-month-list>li,.laydate-theme-grid .laydate-year-list>li,.laydate-theme-grid .layui-laydate-content td,.laydate-theme-grid .layui-laydate-content thead{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-laydate-linkage.laydate-theme-grid .laydate-selected,.layui-laydate-linkage.laydate-theme-grid .laydate-selected:hover{background-color:var(--lay-color-gray-3)!important;color:var(--lay-color-primary)!important}
|
||||
.layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-next,.layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-prev{color:var(--lay-color-gray-6)!important}
|
||||
.layui-laydate.laydate-theme-circle .layui-laydate-content table td.layui-this{background-color:transparent!important}
|
||||
/*layer*/
|
||||
.layui-layer{background-color: var(--lay-color-bg-3);box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-border{border:1px solid var(--lay-color-border-2);box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-move{background-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-title{border-bottom:1px solid var(--lay-color-border-2);color: var(--lay-color-text-1)}
|
||||
.layui-layer-setwin span{color: var(--lay-color-text-1)}
|
||||
.layui-layer-setwin .layui-layer-min:before{border-bottom-color:var(--lay-color-text-1)}
|
||||
.layui-layer-setwin .layui-layer-min:hover:before{border-bottom-color:var(--lay-color-info-hover)}
|
||||
.layui-layer-setwin .layui-layer-max:after,.layui-layer-setwin .layui-layer-max:before{border:1px solid var(--lay-color-text-3)}
|
||||
.layui-layer-setwin .layui-layer-max:hover:after,.layui-layer-setwin .layui-layer-max:hover:before{border-color:var(--lay-color-info-hover)}
|
||||
.layui-layer-setwin .layui-layer-maxmin:after,.layui-layer-setwin .layui-layer-maxmin:before{background-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-setwin .layui-layer-close2{color:var(--lay-color-text-1);background-color:var(--lay-color-gray-10)}
|
||||
.layui-layer-setwin .layui-layer-close2:hover{background-color:var(--lay-color-normal)}
|
||||
.layui-layer-btn a{border:1px solid var(--lay-color-border-2);background-color: var( --lay-color-bg-3);color: var(--lay-color-text-2)}
|
||||
.layui-layer-btn .layui-layer-btn0{border-color: transparent;background-color: var(--lay-color-normal);color: var(--lay-color-text-1)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-layer-face{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-tips{color:var(--lay-color-warning)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-success{color: var(--lay-color-success)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-error{top: 19px; color: var(--lay-color-danger)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-question{color: var(--lay-color-warning);}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-lock{color: var(--lay-color-gray-10)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-face-cry{color:var(--lay-color-danger)}
|
||||
.layui-layer-dialog .layui-layer-content .layui-icon-face-smile{color:var(--lay-color-success)}
|
||||
.layui-layer-rim{border:6px solid var(--lay-color-gray-8);border:6px solid var(--lay-color-border-2)}
|
||||
.layui-layer-msg{border:1px solid var( --lay-color-border-1)}
|
||||
.layui-layer-hui{background-color: var(--lay-color-bg-3);color: var(--lay-color-text-1)}
|
||||
.layui-layer-hui .layui-layer-close{color: var(--lay-color-white)}
|
||||
.layui-layer-loading-icon{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-loading-2:after,.layui-layer-loading-2:before{border:3px solid var(--lay-color-gray-6)}
|
||||
.layui-layer-loading-2:after{border-color:transparent;border-left-color: var(--lay-color-normal)}
|
||||
.layui-layer-tips .layui-layer-content{box-shadow: var(--lay-shadow-3);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-tips i.layui-layer-TipsG{border-color:transparent}
|
||||
.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{border-right-color:var(--lay-color-black)}
|
||||
.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{border-bottom-color:var(--lay-color-black)}
|
||||
.layui-layer-lan .layui-layer-title{background:var(--lay-color-blue-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-lan .layui-layer-btn{border-top:1px solid var(--lay-color-border-3)}
|
||||
.layui-layer-lan .layui-layer-btn a{background: var(--lay-color-white);border-color:var(--lay-color-border-3);color: var(--lay-color-black-7)}
|
||||
.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background: var(--lay-color-gray-7)}
|
||||
.layui-layer-molv .layui-layer-title{background:var(--lay-color-layuigreen-6);color: var(--lay-color-text-1)}
|
||||
.layui-layer-molv .layui-layer-btn a{background:var(--lay-color-layuigreen-6);border-color:var(--lay-color-layuigreen-6)}
|
||||
.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:var(--lay-color-gray-7)}
|
||||
.layui-layer-win10{border-color: var(--lay-color-border-2)}
|
||||
.layui-layer-win10 .layui-layer-btn{background-color: var(--lay-color-bg-2);border-color: var(--lay-color-border-2)}
|
||||
.layui-layer-win10.layui-layer-dialog .layui-layer-content{color: var(--lay-color-blue-7)}
|
||||
.layui-layer-win10 .layui-layer-btn .layui-layer-btn0{border-color: var(--lay-color-blue-9);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-win10 .layui-layer-btn .layui-layer-btn1{border-color: var(--lay-color-border-2);background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-win10 .layui-layer-btn a:hover{background-color: var(--lay-color-blue-10);border-color: var(--lay-color-blue-8)}
|
||||
.layui-layer-prompt .layui-layer-input{border:1px solid var(--lay-color-border-2);color: var(--lay-color-text-2)}
|
||||
.layui-layer-tab{box-shadow:var(--lay-shadow-3)}
|
||||
.layui-layer-tab .layui-layer-title span.layui-this{border-left:1px solid var(--lay-color-border-2);border-right:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-3)}
|
||||
.layui-layer-photos{background: none; box-shadow: none;}
|
||||
.layui-layer-photos-prev,.layui-layer-photos-next{color:var(--lay-color-gray-9)}
|
||||
.layui-layer-photos-prev:hover,.layui-layer-photos-next:hover{color:var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar{background-color:#333;background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar *{color: var(--lay-color-text-1)}
|
||||
.layui-layer-photos-toolbar a:hover{color: var(--lay-color-text-2)}
|
||||
.layui-layer-photos-header > span:hover{background-color: var(--lay-color-fill-2)}
|
||||
.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{border-right-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{border-bottom-color: var(--lay-color-bg-5)}
|
||||
.layui-layer-prompt .layui-layer-input{border:1px solid var(--lay-color-border-2);color:var(--lay-color-text-1);background-color:var(--lay-color-black)}
|
||||
.layui-layer-prompt .layui-layer-input:focus{outline:0}
|
||||
|
||||
/*fix style*/
|
||||
.layui-layer-loading{background:0 0;box-shadow:0 0}
|
||||
.layui-btn-primary{border-color:transparent}
|
||||
.layui-btn-group .layui-btn:first-child{border-left:none}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-top-color:transparent; border-bottom-color: transparent;}
|
||||
.layui-menu li:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{background-color: var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-fill-2)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this:after{border-bottom-color:var(--lay-color-bg-1)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-laypage button{color:var(--lay-color-text-1)}
|
||||
.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-fill-4)}
|
||||
.layui-menu .layui-menu-item-checked,.layui-menu .layui-menu-item-checked2{background-color:var(--lay-color-fill-2)!important}
|
||||
.layui-input-split{background-color: var(--lay-color-bg-2);}
|
||||
.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 1px;}
|
||||
.layui-input-wrap .layui-input-split:has(+.layui-input:hover) {border-color: var(--lay-color-border-2);}
|
||||
.layui-input-wrap .layui-input-split:has(+.layui-input:focus) {border-color: var(--lay-color-secondary-hover);}
|
||||
.layui-layer-tab .layui-layer-title span:first-child{border-left: none !important;}
|
||||
.layui-slider-input.layui-input,
|
||||
.layui-slider-input .layui-input {background-color: var(--lay-color-bg-2);}
|
||||
240
web/static/tpl/theme.html
Normal file
240
web/static/tpl/theme.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<style>
|
||||
:root{
|
||||
--ms-color-bg: #FFF;
|
||||
}
|
||||
:root.dark{
|
||||
--ms-color-bg: #000;
|
||||
}
|
||||
.ms-color-palette{
|
||||
font-size:0;
|
||||
}
|
||||
.ms-color-palette .ms-color-gradient:nth-child(10n){
|
||||
margin-right: 20px;
|
||||
}
|
||||
.ms-color-palette .ms-color-gradient:nth-child(20n){
|
||||
display: table-column;
|
||||
}
|
||||
.ms-color-gradient{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height:20px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 5px;
|
||||
transition-duration:0.1s;
|
||||
}
|
||||
.ms-color-gradient:hover{
|
||||
transform:scale(1.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.ms-color-edit-picker>div{
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.ms-color-edit-picker i{
|
||||
display: none;
|
||||
}
|
||||
.ms-color-edit-picker span{
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
.ms-color-edit-picker .layui-colorpicker-trigger-bgcolor{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div style="padding: 20px;background-color: var(--ms-color-bg);">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="display: flex;" >
|
||||
<label style="display: flex; position: relative; top: 1px; margin-right: 10px;" title="降低饱和度，提高亮度，暗色下更舒适">
|
||||
深色色板
|
||||
<input name="colorpicker" type="checkbox" style="height: 20px; width: 20px;">
|
||||
</label>
|
||||
<label title="类名/属性名例如 .dark,[theme-mode='dark']">
|
||||
自定义主题类/属性选择器
|
||||
<input name="theme-prefix" type="input" style="height: 18px; width: 150px;">
|
||||
</label>
|
||||
<i id="theme-prefix-tips" class="layui-icon layui-icon-tips" style="position: relative; top: 3.5px;margin-left: 2px;"></i>
|
||||
</div>
|
||||
<div style="display: flex;" >
|
||||
<span title="重置"><i id="resetTheme" style="font-size: 23px;" class="layui-icon layui-icon-refresh"></i></span>
|
||||
<span title="下载"><i id="downloadCSS" style="font-size: 23px;margin-left: 10px;" class="layui-icon layui-icon-download-circle"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ms-color-palette">
|
||||
<!-- 色板 tpl 生成 -->
|
||||
</div>
|
||||
<div class="ms-color-edit">
|
||||
<!-- 编辑区 tpl 生成 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="tpl-color-palette">
|
||||
{{# layui.each(d.ColorPaletteLight, function(key, val){ }}
|
||||
<div class="ms-color-gradient" style="background-color: var({{- key }});" title="{{- key.replace('--lay-color-','') }}"></div>
|
||||
{{# }) }}
|
||||
</template>
|
||||
|
||||
<template id="tpl-color-editable">
|
||||
{{# layui.each(d.editable, function(key, val){ }}
|
||||
<div style="display: flex; align-items: center; height:30px">
|
||||
<div>{{= key }}</div>
|
||||
<div style="flex: 1 1 auto;"></div>
|
||||
<input type="text" name="color" value="{{= val }}" placeholder=""
|
||||
style="text-align: right;height:28px;width: 150px;background-color: transparent;border-color: transparent;">
|
||||
<div class="ms-color-edit-picker" lay-options="{color: '{{= val }}', format: '{{- /^rgb/.test(val) ? 'rgb':'hex' }}' }" data-key="{{= key}}"></div>
|
||||
</div>
|
||||
{{# }) }}
|
||||
</template>
|
||||
<template id="tpl-theme-prefix-example">
|
||||
<pre class="layui-code code-demo" lay-options="{}" style="margin: 0; padding: 0;">
|
||||
/** .dark，通过改变 html 标签的类名切换主题*/
|
||||
:root{ :root.dark{
|
||||
--color-bg: #000; --color-bg: #000;
|
||||
} ==> }
|
||||
.lay-card{ .dark .lay-card{}
|
||||
color: #FFF; color: #FFF;
|
||||
} }
|
||||
/** js */
|
||||
// 设置为暗色主题
|
||||
document.documentElement.classList.add('dark')
|
||||
// 恢复亮色主题
|
||||
document.documentElement.classList.remove('dark')
|
||||
// 切换亮/暗主题
|
||||
document.documentElement.classList.toggle('dark')
|
||||
----------------------------------------------------------
|
||||
/** [theme-mode='dark']，通过改变 html 标签上 theme-mode 的属性切换主题*/
|
||||
:root{ :root[theme-mode='dark']{
|
||||
--color-bg: #000; --color-bg: #000;
|
||||
} ==> }
|
||||
.lay-card{ [theme-mode='dark'] .lay-card{}
|
||||
color: #FFF; color: #FFF;
|
||||
} }
|
||||
/** js */
|
||||
// 设置为暗色主题
|
||||
document.documentElement.setAttribute('theme-mode', 'dark')
|
||||
// 恢复亮色主题
|
||||
document.documentElement.removeAttribute('theme-mode');
|
||||
</pre>
|
||||
</template>
|
||||
<script src="static/lib/less.js"></script>
|
||||
<script>
|
||||
layui.use(async ()=> {
|
||||
const {jquery:$,laytpl,colorpicker,layer} = layui;
|
||||
|
||||
const originalData=await (await fetch('./assets/themes.json')).json()
|
||||
let customTheme = {};
|
||||
|
||||
laytpl($('#tpl-color-palette').html()).render(originalData,function(str) {
|
||||
$('.ms-color-palette').html(str);
|
||||
});
|
||||
|
||||
laytpl($('#tpl-color-editable').html()).render(originalData,function(str) {
|
||||
$('.ms-color-edit').html(str);
|
||||
renderColorPicker();
|
||||
});
|
||||
|
||||
$('input[name=colorpicker]').on('click',function(){
|
||||
applyColorPalette(this.checked)
|
||||
})
|
||||
$('#resetTheme').on('click',function(){
|
||||
resetTheme()
|
||||
$('input[name=colorpicker]').prop('checked',false)
|
||||
})
|
||||
$('#downloadCSS').on('click',function(){
|
||||
dropdownCSS()
|
||||
})
|
||||
$('#theme-prefix-tips').hover(function(){
|
||||
layer.tips($('#tpl-theme-prefix-example').html(),this,{
|
||||
tips: 3,
|
||||
time: false,
|
||||
area: ['700px','auto'],
|
||||
success: function(layero){
|
||||
layui.code({elem: '.code-demo'});
|
||||
layero.find('.layui-layer-content').css({padding:0,margin:0})
|
||||
layero.css('top','50px') //阻止反转
|
||||
}
|
||||
});
|
||||
},function(){
|
||||
layer.closeLast('tips');
|
||||
})
|
||||
|
||||
function renderColorPicker(){
|
||||
colorpicker.render({
|
||||
elem: '.ms-color-edit-picker',
|
||||
alpha: true,
|
||||
change: function(color) {
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
},
|
||||
done: function(color) {
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
},
|
||||
close: function(color){
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetTheme() {
|
||||
customTheme={}
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
renderColorPicker()
|
||||
}
|
||||
|
||||
function applyTheme(key,val){
|
||||
customTheme = {...customTheme,...{[key]:val} }
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
}
|
||||
|
||||
function applyColorPalette(isDark=false){
|
||||
customTheme={...customTheme, ...originalData[isDark ? 'ColorPaletteDark' : 'ColorPaletteLight']}
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
}
|
||||
|
||||
function getCSS(cssVarsObj){
|
||||
return `:root {\n ${
|
||||
Object.entries(cssVarsObj)
|
||||
.map(([key,val])=> ` ${key}: ${val};`)
|
||||
.join('\n')
|
||||
}\n}`
|
||||
}
|
||||
|
||||
async function dropdownCSS(){
|
||||
const hasPrefix = $('input[name="theme-prefix"]').val()
|
||||
const overrideCSS = await(await fetch('./static/src/override.css')).text()
|
||||
const varsCSS = getCSS({...originalData.Default, ...customTheme})
|
||||
let finalCSS=`
|
||||
${hasPrefix
|
||||
? varsCSS.replace(':root',`:root${hasPrefix}`)
|
||||
: varsCSS}\n
|
||||
${hasPrefix
|
||||
? `${hasPrefix}{${overrideCSS}}`
|
||||
: overrideCSS}`;
|
||||
|
||||
// css-next 插件太大，暂时用 less
|
||||
finalCSS = (await window.less.render(finalCSS)).css
|
||||
const alink=document.createElement("a")
|
||||
alink.download='layui-theme-dark-custom.css'
|
||||
alink.href=URL.createObjectURL(new Blob([finalCSS]))
|
||||
document.body.appendChild(alink)
|
||||
alink.click()
|
||||
document.body.removeChild(alink)
|
||||
}
|
||||
|
||||
function addStyle(id,cssStr) {
|
||||
var el=document.getElementById(id)||document.createElement('style')
|
||||
if(!el.isConnected) {
|
||||
el.type='text/css';
|
||||
el.id=id;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent=cssStr;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user