调整后台样式，增加 less 变量

.gitignore

@@ -13,7 +13,9 @@
 /public/static/theme/css/package-lock.json
 /public/static/theme/css/console.custom.css
 /public/static/theme/css/console.custom.css.map
+/public/static/theme/css/console.dynamic.css
+/public/static/theme/css/console.dynamic.css.map
 /public/static/theme/css/console.layout.css
 /public/static/theme/css/console.layout.css.map
 /public/static/theme/css/console.layui.css
-/public/static/theme/css/console.layui.css.map
+/public/static/theme/css/console.layui.css.map

app/admin/view/config/index.html

@@ -3,7 +3,7 @@
 {block name="button"}
 <!--{if session('user.username') eq 'admin'}-->
 <a class="layui-btn layui-btn-sm layui-btn-primary" data-queue="{:url('admin/api.plugs/optimize')}">优化数据库</a>
-<a class="layui-btn layui-btn-sm layui-btn-primary" data-load="{:url('admin/api.plugs/clearConfig')}">清理重复配置</a>
+<a class="layui-btn layui-btn-sm layui-btn-primary" data-load="{:url('admin/api.plugs/clearConfig')}">清理无效参数</a>
 <!--{/if}-->
 <!--{if auth('system')}-->
 <a class="layui-btn layui-btn-sm layui-btn-primary" data-modal="{:url('system')}">修改系统参数</a>
@@ -18,7 +18,7 @@
         <b>运行模式</b><span class="color-desc font-s12 padding-left-5">Run Mode</span>
     </div>
     <div class="layui-card-body">
-        <div class="layui-btn-group nowrap">
+        <div class="layui-btn-group shadow-mini nowrap">
             {if $app->isDebug()}
             <a class="layui-btn layui-btn-sm layui-btn-active">以开发模式运行</a>
             <a class="layui-btn layui-btn-sm layui-btn-primary" data-load="{:url('admin/api.plugs/debug')}?state=1">以生产模式运行</a>
@@ -40,7 +40,7 @@
         <b>存储引擎</b><span class="color-desc font-s12 padding-left-5">Storage Engine</span>
     </div>
     <div class="layui-card-body">
-        <div class="layui-btn-group nowrap">
+        <div class="layui-btn-group shadow-mini nowrap">
             {foreach ['local' => '本地服务器存储','qiniu' => '七牛云对象存储','alioss' => '阿里云OSS存储'] as $k => $v} {if sysconf('storage.type') eq $k}
             {if auth('storage')}<a data-title="配置{$v}" data-modal="{:url('storage')}?type={$k}" class="layui-btn layui-btn-sm layui-btn-active">{$v}</a>{else}<a class="layui-btn layui-btn-sm layui-btn-active">{$v}</a>{/if}
             {else}

public/static/theme/css/console.custom.less

@@ -1,3 +1,5 @@
+@import "console.dynamic.less";
+
 .notdata {
   padding: 15px;
   display: block;
@@ -6,9 +8,9 @@
   line-height: 22px;
   border-radius: 5px;
   letter-spacing: 6px;
-  border: 1px solid #DCDCDC;
+  border: 1px solid @borderColor;
   background-color: #f2f2f2;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: @minShadow;
 }
 
 .notselect {
@@ -46,7 +48,11 @@
 }
 
 .shadow {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+  box-shadow: @maxShadow;
+}
+
+.shadow-mini {
+  box-shadow: @minShadow;
 }
 
 .noshadow {
@@ -204,11 +210,11 @@
   }
 
   &-line {
-    border: 1px solid #DCDCDC;
+    border: 1px solid @borderColor;
   }
 
   &-bottom-line {
-    border-bottom: 1px solid #DCDCDC;
+    border-bottom: 1px solid @borderColor;
   }
 
   &-top-0 {
@@ -866,14 +872,14 @@
   background-size: cover;
 
   span.layui-icon {
-    display: none;
+    right: 0;
+    color: #fff;
     width: 20px;
     height: 20px;
+    display: none;
+    position: absolute;
     text-align: center;
     line-height: 22px;
-    color: #fff;
-    right: 0;
-    position: absolute;
     background: rgba(0, 0, 0, .5)
   }
 
@@ -916,25 +922,27 @@
   margin-bottom: 10px;
   letter-spacing: 1px;
 
-  .portal-block-icon {
-    top: 45%;
-    right: 8%;
-    font-size: 65px;
-    position: absolute;
-    color: rgba(255, 255, 255, 0.4);
-  }
+  .portal-block {
+    &-icon {
+      top: 45%;
+      right: 8%;
+      font-size: 65px;
+      position: absolute;
+      color: rgba(255, 255, 255, 0.4);
+    }
 
-  .portal-block-item {
-    color: #fff;
-    padding: 15px 25px;
-    position: relative;
-    line-height: 3em;
-    border-radius: 5px;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
+    &-item {
+      color: #fff;
+      padding: 15px 25px;
+      position: relative;
+      line-height: 3em;
+      border-radius: 5px;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
 
-    > div:nth-child(2) {
-      font-size: 46px;
-      line-height: 46px;
+      > div:nth-child(2) {
+        font-size: 46px;
+        line-height: 46px;
+      }
     }
   }
 }
@@ -952,10 +960,10 @@
   }
 
   > ul {
-    margin: 0;
-    padding: 0;
     float: right;
     height: 30px;
+    margin: 0;
+    padding: 0;
     display: inline-block;
 
     > li:last-child, > li:first-child {
@@ -985,7 +993,7 @@
         color: #333;
         width: 30px;
         height: 30px;
-        border: 1px solid #DCDCDC;
+        border: 1px solid @borderColor;
         overflow: hidden;
         font-size: 12px;
         text-align: center;
@@ -1016,7 +1024,8 @@
   height: 580px;
   position: relative;
   background: url(../img/wechat/mobile_head.png) no-repeat 0 0;
-  border-radius: 5px;
+  box-shadow: @minShadow;
+  border-radius: @borderRadus;
 
   .mobile-header {
     color: #fff;
@@ -1045,7 +1054,7 @@
     position: absolute;
     background: #f5f5f5;
     border-radius: 0 0 5px 5px;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+    //  box-shadow: @minShadow;
 
     iframe {
       width: 100%;

public/static/theme/css/console.dynamic.less

@@ -0,0 +1,4 @@
+@minShadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+@maxShadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
+@borderRadus: 5px;
+@borderColor: #DCDCDC;

public/static/theme/css/console.layout.less

@@ -1,3 +1,5 @@
+@import "console.dynamic.less";
+
 .layui-layout {
   > .layui-side {
     top: 50px;
@@ -24,7 +26,7 @@
         position: absolute;
         background: #fff;
         line-height: 50px;
-        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: @maxShadow;
       }
 
       > .layui-card-header + .layui-card-body {
@@ -43,7 +45,7 @@
 
         .layui-tab.layui-tab-card {
           border: none;
-          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: @maxShadow;
         }
 
         .layui-tab.layui-tab-card > .layui-tab-content.think-box-shadow {
@@ -98,38 +100,38 @@
 
     .layui-nav-child {
       top: 49px;
+      border: 0;
       padding: 0;
-      border: none;
+      background: #eef;
       line-height: 45px;
-      background: #eaedf1;
 
       + a {
-        padding-right: 35px
-      }
+        padding-right: 35px;
 
-      + a img {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%
+        img {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%
+        }
       }
 
       &.layui-show + a {
-        background: #fff
-      }
+        background: #fff;
 
-      &.layui-show + a span {
-        color: #333
+        span {
+          color: #333
+        }
       }
 
       dd {
         background: #fff;
-      }
 
-      dd a {
-        padding: 0;
-        color: #333;
-        margin-top: 1px;
-        text-align: center;
+        a {
+          padding: 0;
+          color: #333;
+          margin-top: 1px;
+          text-align: center;
+        }
       }
     }
   }
@@ -171,12 +173,13 @@
           background: hsla(0, 0%, 39%, .2) !important
         }
       }
-    }
 
-    .layui-nav-itemed {
-      border-bottom: none !important
+      &ed {
+        border-bottom: none !important;
+      }
     }
 
+
     .layui-nav-tree-top a {
       height: 28px !important;
       line-height: 28px !important
@@ -274,4 +277,4 @@
       -webkit-transform: rotate(180deg)
     }
   }
-}
+}

public/static/theme/css/console.layui.less

@@ -1,10 +1,12 @@
+@import "console.dynamic.less";
+
 fieldset {
   margin: 0 0 10px 0;
-  border: 1px solid #DCDCDC;
+  border: 1px solid @borderColor;
   padding: 10px 20px 5px 20px;
   background: #fff;
-  border-radius: 5px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: @minShadow;
+  border-radius: @borderRadus;
 
   legend {
     color: #666;
@@ -14,13 +16,13 @@ fieldset {
 }
 
 .layui-code {
-  border-radius: 5px;
+  border-radius: @borderRadus;
 }
 
 .layui-tab, .layui-card {
   overflow: hidden;
-  border-radius: 5px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: @minShadow;
+  border-radius: @borderRadus;
 
   .layui-card-header {
     padding: 0 20px;
@@ -36,6 +38,12 @@ fieldset {
   }
 }
 
+.layui-body > .layui-card > .layui-card-body {
+  > .layui-tab, > .layui-card {
+    box-shadow: @maxShadow;
+  }
+}
+
 .layui-btn {
   border: 1px solid #009688;
 
@@ -52,7 +60,7 @@ fieldset {
   }
 
   &-disabled {
-    border: 1px solid #DCDCDC;
+    border: 1px solid @borderColor;
   }
 
   & + .layui-btn {
@@ -62,7 +70,7 @@ fieldset {
   &-group {
     overflow: hidden;
     line-height: 28px;
-    border-radius: 5px;
+    border-radius: @borderRadus;
     background: #009688;
     border: 1px solid #009688 !important;
 
@@ -88,7 +96,7 @@ fieldset {
 
 .layui-badge {
   margin-right: 5px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: @minShadow;
 
   &-middle {
     width: 1em;
@@ -100,7 +108,6 @@ fieldset {
   }
 }
 
-
 /*! 搜索表单样式 */
 .form-search {
   .layui-btn {
@@ -172,18 +179,18 @@ fieldset {
 .think-box-shadow {
   padding: 20px !important;
   background: #fff !important;
-  border-radius: 5px;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
+  box-shadow: @maxShadow;
+  border-radius: @borderRadus;
 }
 
 /** checkbox & radio */
 label.think-radio, label.think-checkbox {
+  cursor: pointer;
   margin-right: 10px;
   display: inline-block;
 }
 
 .think-radio, .think-checkbox {
-  cursor: pointer;
   margin-top: 10px;
   font-weight: 400;
   line-height: 18px;
@@ -191,7 +198,8 @@ label.think-radio, label.think-checkbox {
   input[type=radio], input[type=checkbox] {
     width: 18px;
     height: 18px;
-    border: 1px solid #DCDCDC;
+    cursor: pointer;
+    border: 1px solid @borderColor;
     position: relative;
     background: #fff;
     margin-right: 5px;
@@ -207,6 +215,12 @@ label.think-radio, label.think-checkbox {
       &:after {
         display: block;
         position: relative;
+        animation-duration: .3s;
+        -webkit-animation-duration: .3s;
+        animation-fill-mode: both;
+        -webkit-animation-fill-mode: both;
+        animation-name: layui-scale-spring;
+        -webkit-animation-name: layui-scale-spring;
       }
     }
   }
@@ -219,9 +233,10 @@ label.think-radio, label.think-checkbox {
       left: 4px;
       width: 8px;
       height: 8px;
+      cursor: pointer;
       content: '';
       background: #009688;
-      border-radius: 1em
+      border-radius: 1em;
     }
   }
 
@@ -230,6 +245,7 @@ label.think-radio, label.think-checkbox {
 
     &:checked:after {
       color: #009688;
+      cursor: pointer;
       padding: 2px;
       content: "\e605";
       font-size: 12px;
@@ -278,10 +294,10 @@ label.think-radio, label.think-checkbox {
 .layui-table {
   overflow: hidden;
   border-width: 0;
-  border-color: #DCDCDC;
-  border-radius: 5px;
+  box-shadow: @minShadow;
+  border-color: @borderColor;
+  border-radius: @borderRadus;
   border-collapse: separate;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
 
   &[lay-skin='nob'] {
     tr {
@@ -293,7 +309,7 @@ label.think-radio, label.think-checkbox {
 
   &[lay-skin='line'] {
     border-width: 0;
-    border-color: #DCDCDC;
+    border-color: @borderColor;
 
     tr {
       td:first-child, th:first-child {
@@ -311,7 +327,7 @@ label.think-radio, label.think-checkbox {
   tr {
     td, th {
       font-size: 12px;
-      border-color: #DCDCDC;
+      border-color: @borderColor;
       border-width: 0 0 1px 1px;
 
       .text-explode {
@@ -406,7 +422,7 @@ label.think-radio, label.think-checkbox {
       color: #666;
       padding: 2px;
       font-size: 9pt;
-      border: 1px solid #DCDCDC;
+      border: 1px solid @borderColor;
       text-align: center;
       line-height: 18px
     }

public/static/theme/css/console.less

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-
+@import "console.dynamic.less";
 // +----------------------------------------------------------------------
 // | ThinkAdmin
 // +----------------------------------------------------------------------