侧边栏添加一套深蓝色主题

ruoyi-admin/src/main/resources/static/css/skins.css

@@ -103,11 +103,6 @@
 	border-left: none;
 }
 
-.skin-blue .nav>li>.treeview-menu {
-	margin: 0 1px;
-	background: #2c3b41
-}
-
 .skin-blue .sidebar a {
 	color: #b8c7ce
 }
@@ -116,15 +111,6 @@
 	text-decoration: none
 }
 
-.skin-blue .treeview-menu>li>a {
-	color: #8aa4af
-}
-
-.skin-blue .treeview-menu>li.active>a,
-.skin-blue .treeview-menu>li>a:hover {
-	color: #fff
-}
-
 .skin-blue .sidebar-form {
 	border-radius: 3px;
 	border: 1px solid #374850;
@@ -292,11 +278,6 @@
 	border-left: none;
 }
 
-.skin-green .nav>li>.treeview-menu {
-	margin: 0 1px;
-	background: #2c3b41
-}
-
 .skin-green .sidebar a {
 	color: #b8c7ce
 }
@@ -305,15 +286,6 @@
 	text-decoration: none
 }
 
-.skin-green .treeview-menu>li>a {
-	color: #8aa4af
-}
-
-.skin-green .treeview-menu>li.active>a,
-.skin-green .treeview-menu>li>a:hover {
-	color: #fff
-}
-
 .skin-green .sidebar-form {
 	border-radius: 3px;
 	border: 1px solid #374850;
@@ -457,11 +429,6 @@
 	border-bottom: 1px solid #e5e5e5;
 }
 
-.skin-red .nav>li>.treeview-menu {
-	margin: 0 1px;
-	background: #2c3b41
-}
-
 .skin-red .sidebar a {
 	color: #b8c7ce
 }
@@ -470,15 +437,6 @@
 	text-decoration: none
 }
 
-.skin-red .treeview-menu>li>a {
-	color: #8aa4af
-}
-
-.skin-red .treeview-menu>li.active>a,
-.skin-red .treeview-menu>li>a:hover {
-	color: #fff
-}
-
 .skin-red .sidebar-form {
 	border-radius: 3px;
 	border: 1px solid #374850;
@@ -622,11 +580,6 @@
 	 border-bottom: 1px solid #e5e5e5;
 }
 
-.skin-yellow .nav>li>.treeview-menu {
-	margin: 0 1px;
-	background: #2c3b41
-}
-
 .skin-yellow .sidebar a {
 	color: #b8c7ce
 }
@@ -635,15 +588,6 @@
 	text-decoration: none
 }
 
-.skin-yellow .treeview-menu>li>a {
-	color: #8aa4af
-}
-
-.skin-yellow .treeview-menu>li.active>a,
-.skin-yellow .treeview-menu>li>a:hover {
-	color: #fff
-}
-
 .skin-yellow .sidebar-form {
 	border-radius: 3px;
 	border: 1px solid #374850;
@@ -787,11 +731,6 @@
 	 border-bottom: 1px solid #e5e5e5;
 }
 
-.skin-purple .nav>li>.treeview-menu {
-	margin: 0 1px;
-	background: #2c3b41
-}
-
 .skin-purple .sidebar a {
 	color: #b8c7ce
 }
@@ -800,15 +739,6 @@
 	text-decoration: none
 }
 
-.skin-purple .treeview-menu>li>a {
-	color: #8aa4af
-}
-
-.skin-purple .treeview-menu>li.active>a,
-.skin-purple .treeview-menu>li>a:hover {
-	color: #fff
-}
-
 .skin-purple .sidebar-form {
 	border-radius: 3px;
 	border: 1px solid #374850;
@@ -855,7 +785,7 @@
  *   NAME - .theme-dark/theme-light
  *
 */
-/** 深色主题 .theme-dark **/
+/** 深黑主题 .theme-dark **/
 .theme-dark .user-panel>.info>p, .theme-dark .user-panel>.info, .theme-dark .user-panel>.info>a{
 	color: #fff
 }
@@ -962,3 +892,93 @@
     background-color: #f9fafc;
 }
 
+/** 深蓝主题 theme-light **/
+/**
+.skin-blue.theme-blue .logo, .skin-white.theme-blue .logo {
+	background-color: rgba(15,41,80,1) !important;
+	color: #fff;
+}
+**/
+.theme-blue .user-panel>.info>p, .theme-blue .user-panel>.info, .theme-blue .user-panel>.info>a{
+	color: #a3b1cc
+}
+
+.theme-blue .nav>li.active{
+	background-color: rgba(15,41,80,1);
+}
+
+.theme-blue .navbar-static-side {
+	background-color: rgba(15,41,80,1);
+	box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
+}
+
+.theme-blue .user-panel {
+	background-color: rgba(15,41,80,1);
+}
+
+.theme-blue .navbar-default .nav>li>a {
+	color: #a3b1cc;
+}
+
+.theme-blue.skin-blue .navbar-default .nav>li.active>a {
+	color: #1890ff;
+}
+
+.theme-blue.skin-blue .navbar-default .nav>li.selected>a,
+.theme-blue.skin-blue .navbar-default .nav>li.selected>a:focus {
+	background-color: #1890ff;
+}
+
+.theme-blue.skin-green .navbar-default .nav>li.active>a {
+	color: #52c41a;
+}
+
+.theme-blue.skin-green .navbar-default .nav>li.selected>a,
+.theme-blue.skin-green .navbar-default .nav>li.selected>a:focus {
+	background-color: #52c41a;
+    color: rgba(255,255,255,1);
+}
+
+.theme-blue.skin-purple .navbar-default .nav>li.active>a {
+	color: rgb(114, 46, 209);
+}
+
+.theme-blue.skin-purple .navbar-default .nav>li.selected>a,
+.theme-blue.skin-purple .navbar-default .nav>li.selected>a:focus {
+	background-color: #722ed1;
+    color: rgba(255,255,255,1);
+}
+
+.theme-blue.skin-red .navbar-default .nav>li.active>a {
+	color: rgb(245, 34, 45);
+}
+
+.theme-blue.skin-red .navbar-default .nav>li.selected>a,
+.theme-blue.skin-red .navbar-default .nav>li.selected>a:focus {
+	background-color: #f5222d;
+    color: rgba(255,255,255,1);
+}
+
+.theme-blue.skin-yellow .navbar-default .nav>li.active>a {
+	color: rgb(250, 173, 20);
+}
+
+.theme-blue.skin-yellow .navbar-default .nav>li.selected>a,
+.theme-blue.skin-yellow .navbar-default .nav>li.selected>a:focus {
+	background-color: #faad14;
+    color: rgba(255,255,255,1);
+}
+
+.theme-blue .navbar-default .nav>li>a:hover,
+.theme-blue .navbar-default .nav>li>a:focus {
+	background-color: rgba(15,41,80,1);
+	box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
+}
+
+.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>a> span.nav-label {
+    background-color: rgba(15,41,80,1);
+}
+
+.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>.nav-second-level {
+    background-color: rgba(15,41,80,1);
+}

ruoyi-admin/src/main/resources/templates/skin.html

@@ -118,6 +118,25 @@
 		</a>
 		<p class="text-center">黄灰</p>
 	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-blue|theme-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
+			<span style="width: 20%; float: left; height: 30px; background: rgba(15,41,80,1)"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">蓝浅（新）</p>
+	</li>
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-green|theme-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
+			<span style="width: 20%; float: left; height: 30px; background: rgba(15,41,80,1)"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">绿浅（新）</p>
+	</li>
 </ul>
 </body>
 <script th:src="@{/js/jquery.min.js}"></script>
@@ -127,7 +146,7 @@
 var skins = ["skin-blue", "skin-green", "skin-purple", "skin-red", "skin-yellow"];
 
 // 主题样式列表
-var themes = ["theme-dark", "theme-light"];
+var themes = ["theme-dark", "theme-light", "theme-blue"];
 
 $("[data-skin]").on('click',
 function(e) {

sql/ry_20191122.sql

@@ -530,7 +530,7 @@ create table sys_config (
 
 insert into sys_config values(1, '主框架页-默认皮肤样式名称', 'sys.index.skinName',     'skin-blue',     'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '蓝色 skin-blue、绿色 skin-green、紫色 skin-purple、红色 skin-red、黄色 skin-yellow' );
 insert into sys_config values(2, '用户管理-账号初始密码',     'sys.user.initPassword',  '123456',        'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '初始化密码 123456' );
-insert into sys_config values(3, '主框架页-侧边栏主题',       'sys.index.sideTheme',    'theme-dark',    'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '深色主题theme-dark，浅色主题theme-light' );
+insert into sys_config values(3, '主框架页-侧边栏主题',       'sys.index.sideTheme',    'theme-dark',    'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '深黑主题theme-dark，浅色主题theme-light，深蓝主题theme-blue' );
 
 
 -- ----------------------------