增加黑色皮肤

app/admin/view/config/system.html

@@ -19,7 +19,7 @@
         <div class="layui-form-item">
             <div class="help-label label-required-prev"><b>后台默认主题</b>Theme</div>
             <div class="layui-input">
-                {foreach ['default'=>'默认主题','white'=>'简约白色'] as $k=>$v}
+                {foreach ['default'=>'默认主题','white'=>'简约白色','black'=>'精典黑色'] as $k=>$v}
                 <label class="think-radio">
                     {if sysconf('base.site_theme') eq $k}
                     <input name="site_theme" type="radio" value="{$k}" lay-ignore checked> {$v}

public/static/theme/css/_layout.less

@@ -172,6 +172,38 @@
       }
     }
 
+    .layui-side-target {
+      &:before {
+        content: "\e65b";
+        color: #FFF;
+        width: 100%;
+        height: 100%;
+        display: block;
+        line-height: 50px;
+        text-align: center;
+        font-family: layui-icon !important;
+        font-size: 10px;
+        font-style: normal;
+        transform: rotate(180deg);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      top: 50%;
+      right: 0;
+      color: #fff;
+      width: 12px;
+      height: 50px;
+      z-index: 99;
+      cursor: pointer;
+      display: block;
+      position: absolute;
+      margin-top: -25px;
+      background: rgba(0, 0, 0, 0.4);
+      border-top-left-radius: 100%;
+      border-bottom-left-radius: 100%;
+    }
+
     .layui-nav-bar {
       display: none !important;
     }

public/static/theme/css/_layout_black.less

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+@import "_config.less";
+
+.layui-layout-theme-black {
+  &.layui-layout-left-mini {
+    > .layui-side .layui-side-target:before {
+      transform: rotate(0deg);
+    }
+  }
+
+  > .layui-header {
+    background: #393D49 !important;
+
+    .layui-nav-item {
+      &.layui-this > a {
+        color: #ffffff !important;
+        background: #098 !important;
+      }
+
+      > a {
+        color: #fefefe !important;
+
+        &:hover {
+          color: #ffffff !important;
+        }
+      }
+    }
+  }
+
+  > .layui-body {
+    > .think-page-body > .layui-card > .layui-card-header {
+      box-sizing: border-box;
+      box-shadow: none !important;
+      border-bottom: @TopHeaderBottomLine;
+    }
+  }
+
+  .layui-side {
+
+    .layui-logo {
+      color: #fff;
+      box-shadow: none;
+      font-weight: bold;
+    }
+
+    .layui-side-scroll {
+      display: flex !important;
+      box-sizing: border-box;
+      border-right: @TopHeaderBottomLine;
+
+      .layui-side-icon {
+        width: 60px;
+        display: none;
+
+        a {
+          height: 60px;
+          display: block;
+          text-align: center;
+          line-height: 60px;
+        }
+
+        .layui-icon {
+          color: #fff;
+        }
+      }
+
+      .layui-side-tree {
+        flex: 1;
+
+        .layui-nav-item {
+          border-bottom-color: rgba(0, 0, 0, 0);
+
+          a {
+            color: #fff !important;
+            border-bottom: none !important;
+
+            &:hover {
+              color: #fff !important;
+            }
+          }
+
+          .layui-this, &.layui-this {
+            > a {
+              color: #fff !important;
+            }
+          }
+
+          &ed > a {
+            color: #fff !important;
+          }
+        }
+      }
+    }
+  }
+}

public/static/theme/css/_layout.white.less → public/static/theme/css/_layout_white.less

@@ -31,53 +31,15 @@
 
   > .layui-body {
     > .think-page-body > .layui-card > .layui-card-header {
-      //height: 50px;
-      //line-height: 50px;
       box-sizing: border-box;
       box-shadow: none !important;
       border-bottom: @TopHeaderBottomLine;
-
-      + .layui-card-body {
-        //top: 50px;
-      }
     }
   }
 
   .layui-side {
     background-color: #fff !important;
 
-    .layui-side-target {
-      &:before {
-        content: "\e65b";
-        color: #FFF;
-        width: 100%;
-        height: 100%;
-        display: block;
-        line-height: 50px;
-        text-align: center;
-        font-family: layui-icon !important;
-        font-size: 10px;
-        font-style: normal;
-        transform: rotate(180deg);
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-
-      top: 50%;
-      right: 0;
-      color: #fff;
-      width: 12px;
-      height: 50px;
-      z-index: 99;
-      cursor: pointer;
-      display: block;
-      position: absolute;
-      margin-top: -25px;
-      background: rgba(0, 0, 0, 0.4);
-      border-top-left-radius: 100%;
-      border-bottom-left-radius: 100%;
-    }
-
     .layui-logo {
       color: #333;
       box-shadow: none;

public/static/theme/css/console.css

@@ -1823,6 +1823,36 @@ fieldset legend {
   line-height: 9px;
   padding-left: 5px;
 }
+.layui-layout > .layui-side .layui-side-target {
+  top: 50%;
+  right: 0;
+  color: #fff;
+  width: 12px;
+  height: 50px;
+  z-index: 99;
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  margin-top: -25px;
+  background: rgba(0, 0, 0, 0.4);
+  border-top-left-radius: 100%;
+  border-bottom-left-radius: 100%;
+}
+.layui-layout > .layui-side .layui-side-target:before {
+  content: "\e65b";
+  color: #FFF;
+  width: 100%;
+  height: 100%;
+  display: block;
+  line-height: 50px;
+  text-align: center;
+  font-family: layui-icon !important;
+  font-size: 10px;
+  font-style: normal;
+  transform: rotate(180deg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .layui-layout > .layui-side .layui-nav-bar {
   display: none !important;
 }
@@ -2066,36 +2096,6 @@ fieldset legend {
 .layui-layout-theme-white .layui-side {
   background-color: #fff !important;
 }
-.layui-layout-theme-white .layui-side .layui-side-target {
-  top: 50%;
-  right: 0;
-  color: #fff;
-  width: 12px;
-  height: 50px;
-  z-index: 99;
-  cursor: pointer;
-  display: block;
-  position: absolute;
-  margin-top: -25px;
-  background: rgba(0, 0, 0, 0.4);
-  border-top-left-radius: 100%;
-  border-bottom-left-radius: 100%;
-}
-.layui-layout-theme-white .layui-side .layui-side-target:before {
-  content: "\e65b";
-  color: #FFF;
-  width: 100%;
-  height: 100%;
-  display: block;
-  line-height: 50px;
-  text-align: center;
-  font-family: layui-icon !important;
-  font-size: 10px;
-  font-style: normal;
-  transform: rotate(180deg);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 .layui-layout-theme-white .layui-side .layui-logo {
   color: #333;
   box-shadow: none;
@@ -2154,4 +2154,68 @@ fieldset legend {
 .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-itemed > a {
   color: #999 !important;
 }
+.layui-layout-theme-black.layui-layout-left-mini > .layui-side .layui-side-target:before {
+  transform: rotate(0deg);
+}
+.layui-layout-theme-black > .layui-header {
+  background: #393D49 !important;
+}
+.layui-layout-theme-black > .layui-header .layui-nav-item.layui-this > a {
+  color: #ffffff !important;
+  background: #098 !important;
+}
+.layui-layout-theme-black > .layui-header .layui-nav-item > a {
+  color: #fefefe !important;
+}
+.layui-layout-theme-black > .layui-header .layui-nav-item > a:hover {
+  color: #ffffff !important;
+}
+.layui-layout-theme-black > .layui-body > .think-page-body > .layui-card > .layui-card-header {
+  box-sizing: border-box;
+  box-shadow: none !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.layui-layout-theme-black .layui-side .layui-logo {
+  color: #fff;
+  box-shadow: none;
+  font-weight: bold;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll {
+  display: flex !important;
+  box-sizing: border-box;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-icon {
+  width: 60px;
+  display: none;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-icon a {
+  height: 60px;
+  display: block;
+  text-align: center;
+  line-height: 60px;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-icon .layui-icon {
+  color: #fff;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree {
+  flex: 1;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item {
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a {
+  color: #fff !important;
+  border-bottom: none !important;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a:hover {
+  color: #fff !important;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item .layui-this > a,
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item.layui-this > a {
+  color: #fff !important;
+}
+.layui-layout-theme-black .layui-side .layui-side-scroll .layui-side-tree .layui-nav-itemed > a {
+  color: #fff !important;
+}
 /*# sourceMappingURL=console.css.map */

public/static/theme/css/console.less

@@ -66,4 +66,5 @@ body {
 @import '_custom.less';
 @import '_display.less';
 @import '_layout.less';
-@import '_layout.white.less';
+@import '_layout_white.less';
+@import '_layout_black.less';