mirror of
https://github.com/skyle1995/NetworkAuth.git
synced 2026-05-25 02:24:05 +08:00
241 lines
7.7 KiB
HTML
241 lines
7.7 KiB
HTML
<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>
|