1280 lines
45 KiB
HTML
1280 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>EasyWeb主题生成器</title>
|
||
<meta name="Keywords" content="eleadmin,easyweb,layui,element ui,vue,admin,后台模板,后台管理模版,后台框架,管理系统"/>
|
||
<meta name="description" content="EleAdmin及EasyWeb是一套通用型后台管理模板，界面美观、开箱即用，拥有丰富的扩展组件和模板页面，适合各类中后台应用。"/>
|
||
|
||
<link href="./assets/images/favicon.ico" rel="icon">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="./assets/libs/layui/css/layui.css"/>
|
||
<script type="text/javascript" src="./assets/libs/layui/layui.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="left-part">
|
||
<iframe src="/#/console/workplace" onload="leftOk()"></iframe>
|
||
</div>
|
||
<div class="right-part">
|
||
<div class="right-title">EasyWeb主题生成器</div>
|
||
<div class="layui-form" lay-filter="theme-form">
|
||
<div class="item-hr"><span>header</span></div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Logo背景颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="logo_bg" class="layui-input" value="#191a23" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Logo文字颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="logo_color" class="layui-input" value="#dddddd" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Logo阴影</label>
|
||
<div class="layui-input-block">
|
||
<select name="logo_shadow" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="0">无</option>
|
||
<option value="1" selected>轻</option>
|
||
<option value="2">重</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">header背景颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="header_bg" class="layui-input" value="#ffffff" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">header文字颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="header_color" class="layui-input" value="#595959" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">header选中线条</label>
|
||
<div class="layui-input-block">
|
||
<input name="header_bar" class="layui-input" value="#191a23" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">header阴影</label>
|
||
<div class="layui-input-block">
|
||
<select name="header_shadow" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="0">无</option>
|
||
<option value="1" selected>轻</option>
|
||
<option value="2">重</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">header高度</label>
|
||
<div class="layui-input-block">
|
||
<input class="layui-input" name="header_height" type="number" placeholder="默认50(px)"/>
|
||
</div>
|
||
</div>
|
||
<div class="item-hr"><span>side</span></div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">侧边栏颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="side_bg" class="layui-input" value="#191a23" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">侧边栏阴影</label>
|
||
<div class="layui-input-block">
|
||
<select name="side_shadow" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="0">无</option>
|
||
<option value="1" selected>轻</option>
|
||
<option value="2">重</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">侧边栏风格</label>
|
||
<div class="layui-input-block">
|
||
<select name="side_style" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="dark">暗色系</option>
|
||
<option value="light">亮色系</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">侧边栏图标</label>
|
||
<div class="layui-input-block">
|
||
<select name="side_icon" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="default">默认</option>
|
||
<option value="colorful" selected>colorful</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">侧边栏宽度</label>
|
||
<div class="layui-input-block">
|
||
<input class="layui-input" name="side_width" type="number" placeholder="默认235(px)"/>
|
||
</div>
|
||
</div>
|
||
<div class="item-hr"><span>body</span></div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">选项卡风格</label>
|
||
<div class="layui-input-block">
|
||
<select name="tab_style" lay-vertype="tips" lay-verify="required" required>
|
||
<option value="default">默认</option>
|
||
<option value="card">卡片式</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">选项卡线条</label>
|
||
<div class="layui-input-block">
|
||
<input name="tab_bar" class="layui-input" value="#191a23" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">弹窗标题背景</label>
|
||
<div class="layui-input-block">
|
||
<input name="dialog_bg" class="layui-input" value="#191a23" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">弹窗标题颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="dialog_color" class="layui-input" value="#ffffff" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">弹窗标题高度</label>
|
||
<div class="layui-input-block">
|
||
<select name="dialog_title_height">
|
||
<option value="">50px(默认)</option>
|
||
<option value="47px,15px">47px</option>
|
||
<option value="45px,14px">45px</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="item-hr"><span>other</span></div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">input风格</label>
|
||
<div class="layui-input-block">
|
||
<select name="input_style">
|
||
<option value="">默认</option>
|
||
<option value="border">focus加边框</option>
|
||
<option value="focus">focus加边框+发光</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">input高度</label>
|
||
<div class="layui-input-block">
|
||
<select name="input_height">
|
||
<option value="">38px(默认)</option>
|
||
<option value="36px,4px,8px,4px,34px">36px</option>
|
||
<option value="32px,4px,6px,2px,30px">32px</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">主题颜色</label>
|
||
<div class="layui-input-block">
|
||
<input name="primary_color" class="layui-input" value="#009688" color-picker
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label lay-tips="主题补丁解决v3.1.7之前版本的主题对穿梭框、圆角按钮、按钮组、复选框、分页组件输入框、其他颜色按钮等组件的影响"
|
||
lay-offset="3px,45px" lay-direction="4" class="layui-form-label">
|
||
<i class="layui-icon layui-icon-tips" style="font-size: 12px;"></i> 主题补丁</label>
|
||
<div class="layui-input-block">
|
||
<select name="theme_patch">
|
||
<option value="">不需要</option>
|
||
<option value="need">需要</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">主题名称</label>
|
||
<div class="layui-input-block">
|
||
<input name="theme_name" class="layui-input" value="theme-my"
|
||
lay-vertype="tips" lay-verify="required" required/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">缩略图</label>
|
||
<div class="layui-input-block">
|
||
<div style="transform: scale(0.96);transform-origin: 0 0;">
|
||
<canvas id="preCanvas" width="160" height="100" class="pre-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i lay-filter="submit-theme" lay-submit class="layui-hide"></i>
|
||
</div>
|
||
<div class="right-btn-group">
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnPreview">预览</button>
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnDownload">下载</button>
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnImport">导入</button>
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnExport">导出</button>
|
||
</div>
|
||
</div>
|
||
<i class="layui-icon layui-icon-close ew-theme-btn-setting"></i>
|
||
<div class="layui-form" id="import-from" style="display: none;padding:20px 35px 0 0;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">系统主题</label>
|
||
<div class="layui-input-block">
|
||
<select name="tab_style" lay-filter="sel-sys-theme">
|
||
<option value="">自定义</option>
|
||
<option value="cyan">藏青主题</option>
|
||
<option value="white">白色主题</option>
|
||
<option value="colorful">colorful主题</option>
|
||
<option value="blue">蓝色主题</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">主题配置</label>
|
||
<div class="layui-input-block">
|
||
<textarea class="layui-textarea" id="edt-import"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('x 1f=2l;2R.2S=7(){B(1f){H.1u.2D();H.1e("#1n").13("I")}1S{1f=E}};H.2q(["1u","1a","2B"],7(){x e=H.1e;x f=H.1u;x c=H.1a;x i=H.2B;x a=E;7 b(){e(".U-11-2J").2F();e("[U-11]").47(7(k){x l=e(1c);l.33("3C",E);l.3T().2s(\'<48 4a="U-11-2J" 2k="U-11\'+k+\'">\');i.2e({14:"#U-11"+k,U:l.G(),3f:E,3s:7(m){e(1c.14).2a().G(m)},41:7(m){e(1c.14).2a().G(m)}})})}b();e("#1n").I(7(){a=E;e(\'[P-1K="1h-A"]\').13("I")});e("#4m").I(7(){a=2l;e(\'[P-1K="1h-A"]\').13("I")});c.1r("1h(1h-A)",7(o){g(o.z);o.z.3l=j(o.z.N,".3L");o.z.3M=j(o.z.N,".2");o.z.3Y=j(o.z.N,".1");o.z.43=j(o.z.N,".5");x l=o.z.10.1Q(",");o.z.4b=l[0]||"";o.z.4h=l[1]||"";o.z.4i=l[2]||"";o.z.4j=l[3]||"";o.z.4p=l[4]||"";x k=o.z.17.1Q(",");o.z.2U=k[0]||"";o.z.32=k[1]||"";x m=d(e("#3c-A").1Z(),o.z);x p=e(".28-3y>3z")[0].3A;p.H.1e("#A-2A").2F();p.H.1e("3H").2s(\'<2x 2k="A-2A">\'+m+"</2x>");x n=p.H.1e("2w");n.3X(n.2u("A"));n.3Z(o.z.Y);n.2u("A",o.z.Y);B(!a){f.2y({1Y:"请根据开发文档说明把下面1q放在指定位置",2m:2,1s:m,1N:["4g","1P"],1t:0.1,1j:[]})}});e("#4k").I(7(){f.2y({1Y:"保存下面内容可用于以后导入",2m:2,1N:["1P","4l"],1s:1k.2p(c.G("A-1a")),1t:0.1,1j:[]})});e("#4v").I(7(){e("#1l-1g").G("");e(\'[P-1K="2C-27-A"]\').G("");c.2e("29");f.35({1Y:"导入配置",37:1,1t:0.1,1N:"1P",2b:e("#1g-3d"),1j:["确定","取消"],2f:7(k,l){e(k).3g(".H-1u-2b").1q("3h","3i")},3j:7(m,k){x l=e("#1l-1g").G();B(!l){f.2i("请填写主题配置",{2j:2,3x:6});C}c.G("A-1a",1k.1m(l));g(1k.1m(l));b();e("#1n").13("I");f.2n(m)}})});c.1r("29(2C-27-A)",7(k){B(!k.1s){e("#1l-1g").G("")}1S{e("#1l-1g").G(1k.2p(h[k.1s]))}});B(1f){e("#1n").13("I")}1S{1f=E;f.2i("稍等片刻，马上就好...",{2j:16,1t:0.3I,1T:0})}7 g(k){x l=2t.3O("3R");x m=l.3S("2d");m.3U(0,0,l.3V,l.3W);m.J=k.1d;m.M();m.K(0,0,40,20);m.L();m.O();m.J=k.19;m.M();m.K(0,20,40,4c);m.L();m.O();m.J=k.18;m.M();m.K(40,0,4f,20);m.L();m.O();m.J=k.N;m.M();m.K(2g,30,8,8);m.T(2g,34,4,0,R.Q*2,E);m.T(4o,34,4,0,R.Q*2,E);m.K(2o,30,8,8);m.T(2o,34,4,0,R.Q*2,E);m.T(4q,34,4,0,R.Q*2,E);m.L();m.O();m.J="#4r";m.M();m.K(1o,45,4y,5);m.K(1o,2M,2N,5);m.K(1o,2O,2P,5);m.K(1o,2Q,49,5);m.L();m.O();B("1U"===k.1b){m.J="#2T";m.M();m.T(12,30,4,0,R.Q*2,E);m.L();m.O();m.J="#2V";m.M();m.T(12,46,4,0,R.Q*2,E);m.L();m.O();m.J="#2W";m.M();m.T(12,2X,4,0,R.Q*2,E);m.L();m.O();m.J="#2Y";m.M();m.T(12,2Z,4,0,R.Q*2,E);m.L();m.O()}}g(c.G("A-1a"));7 j(o,n){B(o.31("#")===0){o=o.1p(1,o.1W-1)}B(o.1W===3){o=o[0]+o[0]+o[1]+o[1]+o[2]+o[2]}x m=1X(o.1p(0,2),16);x l=1X(o.1p(2,2),16);x k=1X(o.1p(4,2),16);C"36("+m+","+l+","+k+","+n+")"}7 d(m,n,k,o){B(m===2L||m===38||3a m!=="3b"){C m}B(!n){n={}}B(!k){k="{{"}B(!o){o="}}"}x l={F:7(p){C 2z 3e(p,"g")},1I:7(r,p,s){x q=["#([\\\\s\\\\S])+?","([^{#}])*?"][r||0];C l.F((p||"")+k+q+o+(s||""))},2E:7(p){C 3k(p||"").y(/&(?!#?[a-3m-3n-9]+;)/g,"&3o;").y(/</g,"&3p;").y(/>/g,"&3q;").y(/\'/g,"'").y(/"/g,"&3r;")},1J:7(q,p){3t.1J("3u 3v："+q+"\\n"+(p||""))},1m:7(q,r){x p=q;3w{x t=l.F("^"+k+"#"),u=l.F(o+"$");q=q.y(l.F(k+"#"),k+"# ").y(l.F(o+"}"),"} "+o).y(/\\\\/g,"\\\\\\\\").y(l.F(k+"!(.+?)!"+o),7(v){v=v.y(l.F("^"+k+"!"),"").y(l.F("!"+o),"").y(l.F(k+"|"+o),7(w){C w.y(/(.)/g,"\\\\$1")});C v}).y(/(?="|\')/g,"\\\\").y(l.1I(),7(v){v=v.y(t,"").y(u,"");C\'";\'+v.y(/\\\\/g,"")+\';1L+="\'}).y(l.1I(1),7(v){x w=\'"+(\';B(v.y(/\\s/g,"")===k+o){C""}v=v.y(l.F(k+"|"+o),"");B(/^=/.3B(v)){v=v.y(/^=/,"");w=\'"+2c(\'}C w+v.y(/\\\\/g,"")+\')+"\'}).y(/\\r\\n/g,\'\\\\r\\\\n" + "\').y(/\\n/g,\'\\\\n" + "\').y(/\\r/g,\'\\\\r" + "\');q=\'"2q 3D";x 1L = "\'+q+\'";C 1L;\';q=2z 3E("d, 2c",q);C q(r,l.2E)}3F(s){l.1J(s,p);C p}}};C l.1m(m,n)}e(2t).1r("3G","*[P-V]",7(){x l=e(1c);7 k(m){f.V(m.1Z,m.14,{V:[m.1M||1,m.3J||"#3K"],1T:m.1T||-1,2f:7(n){B(!m.1v){C}x q=m.1v.1Q(",");x p=q[0],o=q.1W>1?q[1]:2L;B(p){e(n).1q("2h-3N",p)}B(o){e(n).1q("2h-28",o)}}})}k({14:1c,1Z:l.1O("P-V"),1M:l.1O("P-1M"),1v:l.1O("P-1v")})}).1r("3P","*[P-V]",7(){f.2D("V")});x h={3Q:{1w:"#D",1x:"#1R",1y:"#1z",18:"#D",1A:"#1V",1B:"1",1d:"#1z",1C:"#42",1D:"1",N:"#44",19:"#1z",1b:"Z",1E:"1",1F:"2v",1G:"#1z",1H:"Z",Y:"A-4e",17:"21,22",1i:"23",10:"24,W,25,W,26"},4n:{1w:"#D",1x:"#1R",1y:"#X",18:"#D",1A:"#1V",1B:"2",1d:"#D",1C:"#2G",1D:"2",N:"#X",19:"#D",1b:"Z",1E:"2",1F:"2H",1G:"#X",1H:"2I",Y:"A-4s",17:"21,22",1i:"23",10:"24,W,25,W,26"},1U:{1w:"#D",1x:"#1R",1y:"#X",18:"#D",1A:"#1V",1B:"2",1d:"#D",1C:"#2G",1D:"2",N:"#X",19:"#D",1b:"1U",1E:"2",1F:"2H",1G:"#X",1H:"2I",Y:"A-4t",17:"21,22",1i:"23",10:"24,W,25,W,26"},4u:{1w:"#15",1x:"#D",1y:"#D",18:"#15",1A:"#D",1B:"1",1d:"#15",1C:"#D",1D:"0",N:"#15",19:"#4w",1b:"Z",1E:"1",1F:"2v",1G:"#15",1H:"Z",Y:"A-4x",17:"",1i:"",10:""}};e(".2K-A-1j-2r").I(7(){e("2w").4d("2K-A-2n-2r")})});',62,283,'|||||||function||||||||||||||||||||||||||var|replace|field|theme|if|return|ffffff|true|exp|val|layui|click|fillStyle|fillRect|closePath|beginPath|primary_color|fill|lay|PI|Math||arc|color|tips|4px|2d8cf0|theme_name|default|input_height|picker||trigger|elem|3C8DBC||dialog_title_height|header_bg|side_bg|form|side_icon|this|logo_bg|jquery|isFirstOk|import|submit|input_style|btn|JSON|edt|parse|btnPreview|50|substr|css|on|value|shade|layer|offset|dialog_bg|dialog_color|header_bar|001529|header_color|header_shadow|logo_color|logo_shadow|side_shadow|side_style|tab_bar|tab_style|query|error|filter|view|direction|area|attr|400px|split|333333|else|time|colorful|393d49|length|parseInt|title|text||47px|15px|border|36px|8px|34px|sys|left|select|prev|content|_escape_||render|success|138|margin|msg|icon|id|false|formType|close|117|stringify|use|setting|append|document|data|dark|body|style|prompt|new|preview|colorpicker|sel|closeAll|escape|remove|262626|light|card|group|ew|undefined|57|79|69|64|81|window|leftOk|61B2FC|dialog_title_height_0|7DD733|32A2D4|62|2BCCCE|78||indexOf|dialog_title_height_1|prop||open|rgba|type|null||typeof|string|tpl|from|RegExp|predefine|children|overflow|visible|yes|String|side_active_bg|zA|Z0|amp|lt|gt|quot|done|console|Laytpl|Error|try|anim|part|iframe|contentWindow|test|readonly|strict|Function|catch|mouseenter|head|01|bg|303133|07|input_shadow_color|top|getElementById|mouseleave|cyan|preCanvas|getContext|parent|clearRect|width|height|removeClass|laydate_sel_color|addClass||change|dddddd|steps_light_color|1890ff|||each|div||class|input_height_0|80|toggleClass|cyan2|120|450px|input_height_1|input_height_2|input_height_3|btnExport|200px|btnDownload|white|146|input_height_4|125|e8eaec|white2|colorful2|blue|btnImport|222D32|blue2|94'.split('|'),0,{}))
|
||
</script>
|
||
<style>
|
||
body {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left-part, .left-part > iframe, .right-part {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.left-part {
|
||
left: 0;
|
||
right: 320px;
|
||
}
|
||
|
||
.left-part > iframe {
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.right-part {
|
||
right: 0;
|
||
width: 320px;
|
||
background-color: #fff;
|
||
box-shadow: -1px 0 4px rgba(0, 21, 41, .08);
|
||
}
|
||
|
||
.right-btn-group {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.right-title {
|
||
padding: 15px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.right-part > .layui-form {
|
||
padding: 20px 25px 10px 0;
|
||
position: absolute;
|
||
top: 54px;
|
||
bottom: 60px;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: auto;
|
||
border-top: 1px solid #f6f6f6;
|
||
border-bottom: 1px solid #f6f6f6;
|
||
}
|
||
|
||
.right-part > .layui-form .layui-form-label {
|
||
width: 100px;
|
||
}
|
||
|
||
.right-part > .layui-form .layui-input-block {
|
||
margin-left: 130px;
|
||
}
|
||
|
||
.color-picker-group {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.pre-canvas {
|
||
background: #f5f7f9;
|
||
border: 1px solid #eeeeee;
|
||
}
|
||
|
||
.item-hr {
|
||
color: #aaa;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
position: relative;
|
||
margin: 0 0 15px 20px;
|
||
}
|
||
|
||
.item-hr span {
|
||
z-index: 1;
|
||
padding: 0 10px;
|
||
position: relative;
|
||
display: inline-block;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.item-hr:before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 100%;
|
||
border-top: 1px dashed #ccc;
|
||
}
|
||
|
||
.ew-theme-btn-setting {
|
||
position: fixed;
|
||
top: 50%;
|
||
right: 320px;
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-top: -20px;
|
||
color: #fff;
|
||
background-color: #1E9FFF;
|
||
border-top-left-radius: 4px;
|
||
border-bottom-left-radius: 4px;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||
transition: all .3s;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ew-theme-close-setting .ew-theme-btn-setting {
|
||
right: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ew-theme-close-setting .ew-theme-btn-setting:before {
|
||
content: "\e714";
|
||
}
|
||
|
||
.ew-theme-close-setting .right-part {
|
||
right: -320px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ew-theme-close-setting .left-part {
|
||
right: 0;
|
||
}
|
||
|
||
@media screen and (max-width: 700px) {
|
||
.left-part {
|
||
right: 0 !important;
|
||
}
|
||
|
||
.right-part {
|
||
right: -320px;
|
||
box-shadow: none;
|
||
z-index: 999;
|
||
}
|
||
|
||
.ew-theme-btn-setting {
|
||
right: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.ew-theme-btn-setting:before {
|
||
content: "\e714";
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ew-theme-close-setting .ew-theme-btn-setting {
|
||
right: 320px;
|
||
}
|
||
|
||
.ew-theme-close-setting .ew-theme-btn-setting:before {
|
||
content: "\1006";
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ew-theme-close-setting .right-part {
|
||
right: 0;
|
||
box-shadow: -1px 0 4px rgba(0, 21, 41, .08);
|
||
}
|
||
|
||
.ew-theme-close-setting .left-part:before {
|
||
content: "";
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 998;
|
||
background-color: rgba(0, 0, 0, .25);
|
||
}
|
||
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 4px;
|
||
background-color: #C1C1C1;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: #A8A8A8;
|
||
}
|
||
</style>
|
||
<pre id="tpl-theme" style="display: none;">
|
||
/** ---------------------------{{ d.theme_name }}主题start----------------------------------- */
|
||
/* logo */
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-logo {
|
||
color: {{ d.logo_color }};
|
||
background-color: {{ d.logo_bg }};
|
||
{{# if(d.logo_shadow=='0'){ }}
|
||
box-shadow: none;
|
||
{{# }else if(d.logo_shadow=='2'){ }}
|
||
box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, .05);
|
||
{{# } }}
|
||
}
|
||
|
||
/* header */
|
||
{{# if(d.header_shadow=='0'){ }}
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header {
|
||
box-shadow: none;
|
||
}
|
||
{{# }else if(d.header_shadow=='2'){ }}
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header {
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||
}
|
||
{{# } }}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header {
|
||
background-color: {{ d.header_bg }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header a {
|
||
color: {{ d.header_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header a:hover {
|
||
color: {{ d.header_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav-child a {
|
||
color: #595959;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
|
||
border-color: {{ d.header_color }} transparent transparent;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
|
||
border-color: transparent transparent {{ d.header_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-this:after,
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav-bar {
|
||
background-color: {{ d.header_bar }};
|
||
}
|
||
|
||
{{# if(d.header_height){ }}
|
||
/* header height */
|
||
.{{ d.theme_name }} .layui-header {
|
||
height: {{ d.header_height }}px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-header .layui-logo,
|
||
.{{ d.theme_name }} .layui-header .layui-nav .layui-nav-item {
|
||
line-height: {{ d.header_height }}px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-body,
|
||
.{{ d.theme_name }} .layui-side {
|
||
top: {{ d.header_height }}px;
|
||
}
|
||
{{# } }}
|
||
|
||
/* side */
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-side {
|
||
background-color: {{ d.side_bg }};
|
||
{{# if(d.side_shadow=='0'){ }}
|
||
box-shadow: none;
|
||
{{# }else if(d.side_shadow=='2'){ }}
|
||
box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, .05);
|
||
{{# } }}
|
||
}
|
||
|
||
{{# if(d.side_style=='light'){ }}
|
||
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a {
|
||
color: #595959;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a:hover {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-itemed > a,
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-title a,
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-title a:hover {
|
||
color: #595959 !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-itemed > a:hover {
|
||
color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-this > a,
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-this > a:hover {
|
||
color: {{ d.primary_color }};
|
||
background: {{ d.side_active_bg }};
|
||
border-right: 2px solid {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-item .layui-nav-child {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav li.layui-nav-itemed > a {
|
||
background: {{ d.side_active_bg }};
|
||
color: {{ d.primary_color }} !important;
|
||
}
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-nav-tree > .layui-nav-item > a:before {
|
||
display: none;
|
||
}
|
||
|
||
/* side arrow */
|
||
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-more {
|
||
border-color: rgba(89, 89, 89, .7) transparent transparent;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-mored,
|
||
.{{ d.theme_name }} .layui-side .layui-nav-itemed > a .layui-nav-more {
|
||
border-color: transparent transparent rgba(89, 89, 89, .7);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-tree.arrow3 .layui-nav-itemed > a > .layui-nav-more:before {
|
||
background-color: rgba(89, 89, 89, .7);
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .admin-nav-hover > .layui-nav-child > dd > a .layui-nav-more {
|
||
border-color: transparent transparent transparent rgba(89, 89, 89, .7);
|
||
}
|
||
}
|
||
{{# }else{ }}
|
||
.{{ d.theme_name }} .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||
.{{ d.theme_name }} .layui-nav-tree .layui-this > a,
|
||
.{{ d.theme_name }} .layui-nav-tree .layui-this > a:hover {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-nav-tree > .layui-nav-item > a:before {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
{{# } }}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .admin-nav-hover > .layui-nav-child:before {
|
||
background: {{ d.side_bg }} !important;
|
||
}
|
||
|
||
{{# if(d.side_width){ }}
|
||
/* side width */
|
||
.{{ d.theme_name }} .layui-header .layui-logo,
|
||
.{{ d.theme_name }} .layui-side,
|
||
.{{ d.theme_name }} .layui-side .layui-nav {
|
||
width: {{ d.side_width }}px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-side-scroll {
|
||
width: {{ parseInt(d.side_width)+20 }}px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-body,
|
||
.{{ d.theme_name }} .layui-footer {
|
||
left: {{ d.side_width }}px;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.{{ d.theme_name }} .layui-layout-admin {
|
||
left: -{{ d.side_width }}px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .site-mobile-shade {
|
||
left: {{ d.side_width }}px;
|
||
}
|
||
|
||
body .layui-layout-admin.admin-nav-mini {
|
||
left: 0;
|
||
}
|
||
}
|
||
{{# } }}
|
||
|
||
{{# if(d.side_icon=='colorful'){ }}
|
||
/* side icon */
|
||
.{{ d.theme_name }} .layui-side .layui-nav-item > a > .layui-icon {
|
||
color: #fff;
|
||
width: 28px;
|
||
height: 28px;
|
||
font-size: 12px !important;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
background-color: #61B2FC;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(even) > a > .layui-icon {
|
||
background-color: #7DD733;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(3) > a > .layui-icon {
|
||
background-color: #32A2D4;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(4) > a > .layui-icon {
|
||
background-color: #2BCCCE;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(5) > a > .layui-icon {
|
||
background-color: #7383CF;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
.{{ d.theme_name }} .admin-nav-mini .layui-side .layui-nav-item > a {
|
||
padding-left: 16px;
|
||
}
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child a {
|
||
padding-left: 63px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child a {
|
||
padding-left: 83px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||
padding-left: 103px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||
padding-left: 123px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a cite {
|
||
vertical-align: middle;
|
||
}
|
||
{{# } }}
|
||
|
||
/* body tab */
|
||
{{# if('card'==d.tab_style){ }}
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title {
|
||
top: 8px;
|
||
right: 8px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
box-shadow: -4px 4px 0 #f5f7f9;
|
||
padding-right: 70px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-content {
|
||
top: 40px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li {
|
||
border: none;
|
||
margin-right: 6px;
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
line-height: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this {
|
||
color: {{ d.tab_bar }};
|
||
background-color: #fff;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li:hover {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this:after {
|
||
display: none;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li .layui-tab-close,
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li .layui-tab-close:hover {
|
||
top: 8px;
|
||
color: #8c8c8c;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control,
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control:hover {
|
||
top: 8px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
background-color: #f5f7f9;
|
||
border: none;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-down {
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
width: 32px;
|
||
right: 8px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .admin-tabs-control > .layui-nav .layui-nav-item {
|
||
line-height: 32px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .admin-tabs-control > .layui-nav .layui-nav-item > a {
|
||
height: 32px;
|
||
width: 32px;
|
||
padding: 0;
|
||
}
|
||
|
||
.{{ d.theme_name }} .admin-tabs-control > .layui-nav .layui-nav-child {
|
||
top: 36px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-prev:before {
|
||
content: "\e603";
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-next:before {
|
||
content: "\e602";
|
||
}
|
||
{{# }else{ }}
|
||
.{{ d.theme_name }} .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this:after {
|
||
background-color: {{ d.tab_bar }};
|
||
{{# if(d.header_bg!='#fff'&&d.header_bg!='#ffffff'){ }}
|
||
top: 38px;
|
||
{{# } }}
|
||
}
|
||
{{# } }}
|
||
|
||
/* body title */
|
||
.{{ d.theme_name }} .layui-body-header-title {
|
||
border-left-color: {{ d.primary_color }};
|
||
}
|
||
|
||
{{# if('0'==d.header_shadow){ }}
|
||
.{{ d.theme_name }} .layui-body-header {
|
||
box-shadow: none;
|
||
}
|
||
{{# }else if('2'==d.header_shadow){ }}
|
||
.{{ d.theme_name }} .layui-body-header {
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||
}
|
||
{{# } }}
|
||
|
||
/* admin dialog */
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-title {
|
||
color: {{ d.dialog_color }};
|
||
background-color: {{ d.dialog_bg }};
|
||
{{# if('border'==d.input_style||'focus'==d.input_style){ }}
|
||
border-top-left-radius: 4px;
|
||
border-top-right-radius: 4px;
|
||
{{# } }}
|
||
{{# if('#fff'==d.dialog_bg||'#ffffff'==d.dialog_bg){ }}
|
||
font-size: 16px;
|
||
padding-left: 23px;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
{{# } }}
|
||
}
|
||
|
||
{{# if('#fff'==d.dialog_bg||'#ffffff'==d.dialog_bg){ }}
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin a {
|
||
color: #8c8c8c;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-min cite {
|
||
background-color: #8c8c8c;
|
||
}
|
||
{{# } }}
|
||
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn .layui-layer-btn0 {
|
||
border-color: {{ d.primary_color }};
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
{{# if('border'==d.input_style||'focus'==d.input_style){ }}
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a {
|
||
box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin {
|
||
border-radius: 4px;
|
||
}
|
||
{{# } }}
|
||
|
||
{{# if(d.dialog_title_height){ }}
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-title {
|
||
height: {{ d.dialog_title_height_0 }};
|
||
line-height: {{ d.dialog_title_height_0 }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin {
|
||
top: {{ d.dialog_title_height_1 }};
|
||
}
|
||
{{# } }}
|
||
|
||
/* other */
|
||
.{{ d.theme_name }} .more-theme-item:hover,
|
||
.{{ d.theme_name }} .more-theme-item.active {
|
||
border-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .btn-circle {
|
||
background: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .ball-loader > span,
|
||
.{{ d.theme_name }} .signal-loader > span {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .text-primary,
|
||
.{{ d.theme_name }} .layui-link {
|
||
color: {{ d.primary_color }} !important;;
|
||
}
|
||
|
||
{{# if(d.tab_style=='card'){ }}
|
||
.{{ d.theme_name }} .layui-card {
|
||
border-radius: 4px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-fluid {
|
||
padding-top: 10px;
|
||
}
|
||
{{# } }}
|
||
|
||
/* button */
|
||
.{{ d.theme_name }} .layui-btn {
|
||
background-color: {{ d.primary_color }};
|
||
{{# if('border'==d.input_style||'focus'==d.input_style){ }}
|
||
box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
|
||
{{# } }}
|
||
}
|
||
|
||
{{# if('border'==d.input_style||'focus'==d.input_style){ }}
|
||
/* input */
|
||
.{{ d.theme_name }} .layui-input:focus,
|
||
.{{ d.theme_name }} .layui-textarea:focus,
|
||
.{{ d.theme_name }} xm-select:hover {
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
{{# if('focus'==d.input_style){ }}
|
||
.{{ d.theme_name }} .layui-input:focus,
|
||
.{{ d.theme_name }} .layui-textarea:focus,
|
||
.{{ d.theme_name }} .layui-btn:active,
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a:focus,
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a:active,
|
||
.{{ d.theme_name }} xm-select:active {
|
||
box-shadow: 0 0 0 2px {{ d.input_shadow_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-form-danger:focus,
|
||
.{{ d.theme_name }} .layui-form-danger + .layui-form-select .layui-input {
|
||
box-shadow: 0 0 0 2px rgba(237, 64, 20, .2);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-normal:focus,
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-normal:active {
|
||
box-shadow-color: rgba(20, 159, 255, .2);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-warm:active {
|
||
box-shadow: 0 0 0 2px rgba(255, 184, 0, .2);
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-danger:active {
|
||
box-shadow: 0 0 0 2px rgba(255, 87, 34, .2);
|
||
}
|
||
{{# } }}
|
||
{{# } }}
|
||
|
||
{{# if(d.input_height){ }}
|
||
/* input、button height */
|
||
/* button */
|
||
.{{ d.theme_name }} .layui-btn {
|
||
height: {{ d.input_height_0 }};
|
||
line-height: {{ d.input_height_0 }};
|
||
border-radius: {{ d.input_height_1 }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a {
|
||
height: {{ d.input_height_4 }};
|
||
line-height: {{ d.input_height_4 }};
|
||
border-radius: {{ d.input_height_1 }};
|
||
}
|
||
|
||
/* input */
|
||
.{{ d.theme_name }} .layui-input,
|
||
.{{ d.theme_name }} .layui-select,
|
||
.{{ d.theme_name }} .layui-textarea,
|
||
.{{ d.theme_name }} xm-select {
|
||
height: {{ d.input_height_0 }};
|
||
border-radius: {{ d.input_height_1 }};
|
||
}
|
||
|
||
/* form */
|
||
.{{ d.theme_name }} .layui-form-label,
|
||
.{{ d.theme_name }} .layui-form-mid {
|
||
padding-top: {{ d.input_height_2 }};
|
||
padding-bottom: {{ d.input_height_2 }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-input-block {
|
||
min-height: {{ d.input_height_0 }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-form-radio {
|
||
margin-top: {{ d.input_height_3 }};
|
||
}
|
||
|
||
/* button lg sm */
|
||
.{{ d.theme_name }} .layui-btn-lg {
|
||
height: 42px;
|
||
line-height: 42px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-sm {
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-btn.layui-btn-xs {
|
||
height: 22px;
|
||
line-height: 22px;
|
||
}
|
||
{{# } }}
|
||
|
||
/* switch */
|
||
.{{ d.theme_name }} .layui-form-onswitch {
|
||
border-color: {{ d.primary_color }};
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* radio */
|
||
.{{ d.theme_name }} .layui-form-radio > i:hover,
|
||
.{{ d.theme_name }} .layui-form-radioed > i,
|
||
.{{ d.theme_name }} .layui-form-checked i,
|
||
.{{ d.theme_name }} .layui-form-checked:hover i {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* checkbox */
|
||
.{{ d.theme_name }} .layui-form-checked[lay-skin=primary] i,
|
||
.{{ d.theme_name }} .layui-form-checked span,
|
||
.{{ d.theme_name }} .layui-form-checked:hover span {
|
||
border-color: {{ d.primary_color }} !important;
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-form-checkbox[lay-skin=primary] i:hover,
|
||
.{{ d.theme_name }} .layui-form-checkbox[lay-skin=primary]:hover i {
|
||
border-color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* select */
|
||
.{{ d.theme_name }} .layui-form-select dl dd.layui-this {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* laypage */
|
||
.{{ d.theme_name }} .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-laypage input:focus,
|
||
.{{ d.theme_name }} select:focus {
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-laypage a:hover {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* tab */
|
||
.{{ d.theme_name }} .layui-tab-brief > .layui-tab-title .layui-this {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab-brief > .layui-tab-more li.layui-this:after,
|
||
.{{ d.theme_name }} .layui-tab-brief > .layui-tab-title .layui-this:after {
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-tab-vertical > .layui-tab-title > li.layui-this {
|
||
border-color: {{ d.primary_color }};
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* breadcrumb */
|
||
.{{ d.theme_name }} .layui-breadcrumb a:hover {
|
||
color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
/* laydate */
|
||
.{{ d.theme_name }} .layui-laydate-footer span:hover,
|
||
.{{ d.theme_name }} .layui-laydate-header i:hover,
|
||
.{{ d.theme_name }} .layui-laydate-header span:hover {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-laydate .layui-this {
|
||
background-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-laydate-content td.laydate-selected {
|
||
background-color: {{ d.laydate_sel_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .laydate-selected:hover {
|
||
background-color: {{ d.laydate_sel_color }} !important;
|
||
}
|
||
|
||
/* timeline */
|
||
.{{ d.theme_name }} .layui-timeline-axis {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* transfer */
|
||
.{{ d.theme_name }} .layui-transfer-active .layui-btn {
|
||
background-color: {{ d.primary_color }} !important;
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
/* progress-bar */
|
||
.{{ d.theme_name }} .layui-progress-bar {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* slider */
|
||
.{{ d.theme_name }} .layui-slider-bar {
|
||
background-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.theme-colorful .layui-slider-wrap-btn {
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
/* steps */
|
||
.{{ d.theme_name }} .layui-tab.layui-steps > .layui-tab-title > li > .layui-icon {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps > .layui-tab-title > li > .layui-icon.layui-icon-ok,
|
||
.{{ d.theme_name }} .layui-elem-quote {
|
||
border-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps > .layui-tab-title > li:before,
|
||
.{{ d.theme_name }} .layui-tab.layui-steps > .layui-tab-title > li.layui-this > .layui-icon.layui-icon-ok {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li {
|
||
background-color: {{ d.steps_light_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this {
|
||
background-color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li:after {
|
||
border-left-color: {{ d.steps_light_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple > .layui-tab-title > li.layui-this + li:after {
|
||
border-left-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
/* xmSelect */
|
||
.{{ d.theme_name }} xm-select .xm-body .xm-option .xm-option-icon {
|
||
border-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} xm-select .xm-body .xm-option.selected .xm-option-icon,
|
||
.{{ d.theme_name }} xm-select > .xm-body .xm-toolbar .toolbar-tag:hover,
|
||
.{{ d.theme_name }} .ew-xmselect-tree xm-select .xm-body .xm-option.selected .xm-option-content {
|
||
color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} xm-select .xm-label .xm-label-block,
|
||
.{{ d.theme_name }} xm-select > .xm-body .xm-option.hide-icon.selected {
|
||
background-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
/* tagsinput */
|
||
.{{ d.theme_name }} div.tagsinput span.tag {
|
||
background: {{ d.primary_color }};
|
||
}
|
||
|
||
/* cascader */
|
||
.{{ d.theme_name }} .ew-cascader-dropdown-list-item.active,
|
||
.{{ d.theme_name }} .ew-cascader-dropdown-list-item.active .ew-icon-right {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
/* city-select */
|
||
.{{ d.theme_name }} .city-select a.active {
|
||
color: #fff !important;
|
||
background-color: {{ d.primary_color }} !important;
|
||
}
|
||
|
||
.{{ d.theme_name }} .city-select a:hover,
|
||
.{{ d.theme_name }} .city-select a:focus {
|
||
background-color: {{ d.side_active_bg }};
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .city-picker-span > .title > span:hover {
|
||
background-color: {{ d.side_active_bg }};
|
||
}
|
||
|
||
.{{ d.theme_name }} .city-select-tab > a.active {
|
||
color: {{ d.primary_color }};
|
||
}
|
||
|
||
{{# if(d.theme_patch){ }}
|
||
/* theme patch */
|
||
/* checkbox */
|
||
body .layui-form-checked[lay-skin=primary] i,
|
||
body .layui-form-checked[lay-skin=primary]:hover i {
|
||
color: #fff;
|
||
}
|
||
|
||
body .layui-form-checkbox[lay-skin=primary] span,
|
||
body .layui-form-checkbox[lay-skin=primary]:hover span {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* form danger */
|
||
body .layui-form-danger + .layui-form-select .layui-input,
|
||
body .layui-input.layui-form-danger:focus,
|
||
body .layui-textarea.layui-form-danger:focus {
|
||
border-color: #FF5722 !important;
|
||
}
|
||
|
||
/* laypage */
|
||
body .layui-laypage input.layui-input {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
body .layui-table-page .layui-laypage input.layui-input {
|
||
height: 26px;
|
||
line-height: 26px;
|
||
}
|
||
|
||
/* button */
|
||
body .layui-btn.layui-btn-radius {
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.layui-btn-primary:hover, .layui-btn-group .layui-btn-primary:hover {
|
||
color: #262626;
|
||
border-color: #e6e6e6;
|
||
}
|
||
|
||
.layui-btn-group .layui-btn-primary:first-child {
|
||
border-left: 1px solid #e6e6e6;
|
||
}
|
||
|
||
body .layui-btn.layui-btn-disabled,
|
||
body .layui-transfer-active .layui-btn.layui-btn-disabled {
|
||
background-color: #FBFBFB !important;
|
||
border-color: #e6e6e6 !important;
|
||
color: #C9C9C9 !important;
|
||
}
|
||
|
||
body .layui-btn.layui-btn-primary {
|
||
background-color: #fff;
|
||
}
|
||
|
||
body .layui-btn.layui-btn-normal {
|
||
background-color: #1E9FFF;
|
||
}
|
||
|
||
body .layui-btn.layui-btn-warm {
|
||
background-color: #FFB800;
|
||
}
|
||
|
||
body .layui-btn.layui-btn-danger {
|
||
background-color: #FF5722;
|
||
}
|
||
|
||
.layui-btn-group > .layui-btn + .layui-btn {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.layui-btn-group > .layui-btn:last-child {
|
||
border-top-right-radius: 2px;
|
||
border-bottom-right-radius: 2px;
|
||
}
|
||
|
||
.layui-transfer-active .layui-btn {
|
||
background-color: #5FB878 !important;
|
||
border-color: #5FB878 !important;
|
||
color: #fff !important;
|
||
}
|
||
{{# } }}
|
||
/** ---------------------------{{ d.theme_name }}主题end----------------------------------- */
|
||
</pre>
|
||
</body>
|
||
</html> |