From 682f2c62cbc6094f0868de5a448a7d5463bd0497 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 7 Nov 2023 18:40:37 +0800
Subject: [PATCH] style: update dashboard

---
 src/App.vue                          |  1 +
 src/styles/theme.scss                | 33 ++++++++++++++++++++++++++++
 src/views/dashboard/controls/Tab.vue |  2 +-
 src/views/dashboard/panel/Layout.vue |  2 +-
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3591a9e9..19b8887f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,5 +32,6 @@ limitations under the License. -->
     color: $font-color;
     height: 100%;
     overflow: hidden;
+    background-color: $layout-background;
   }
 </style>
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 5cb02e88..89caed87 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -27,6 +27,9 @@
   --border-color-primary: #eee;
   --layout-background: #f7f9fa;
   --el-switch-off: #999;
+  --el-input-bg-color: #fff;
+  --el-input-text-color: #3d444f;
+  --box-shadow-color: #ccc;
 }
 
 .dark {
@@ -41,6 +44,9 @@
   --border-color-primary: #4b4b52;
   --layout-background: #000;
   --el-switch-off: #999;
+  --el-input-bg-color: #212224;
+  --el-input-text-color: #fafbfc;
+  --box-shadow-color: #888;
 }
 
 .el-switch {
@@ -52,6 +58,33 @@
   --el-text-color-placeholder: var(--text-color-placeholder);
 }
 
+.el-input__inner {
+  background-color: var(--el-input-bg-color);
+  color: var(--el-input-text-color);
+}
+
+.el-select {
+  --el-select-input-color: var(--el-input-text-color);
+  --el-select-multiple-input-color: var(--el-input-text-color);
+}
+.el-input {
+  --el-input-bg-color: var(--el-input-bg-color);
+  color: var(--el-input-text-color);
+  // --el-input-text-color: var(--el-input-text-color);
+  //   --el-input-border: var(--el-border-base);
+  //   --el-input-hover-border: var(--el-border-color-hover);
+  //   --el-input-focus-border: var(--el-color-primary);
+  //   --el-input-transparent-border: 0 0 0 1px transparent inset;
+  //   --el-input-border-color: var(--el-border-color-base);
+  //   --el-input-border-radius: var(--el-border-radius-base);
+  //   --el-input-icon-color: var(--el-text-color-placeholder);
+  //   --el-input-placeholder-color: var(--el-text-color-placeholder);
+  //   --el-input-hover-border-color: var(--el-border-color-hover);
+  //   --el-input-clear-hover-color: var(--el-text-color-secondary);
+  //   --el-input-focus-border-color: var(--el-color-primary);
+}
+
+$box-shadow-color: var(--box-shadow-color);
 $border-color-primary: var(--border-color-primary);
 $layout-background: var(--layout-background);
 $border-color: var(--border-color);
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 39c52340..74f71b92 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -361,7 +361,7 @@ limitations under the License. -->
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }
 
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 1ca2fe1e..ec7e645f 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -86,7 +86,7 @@ limitations under the License. -->
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background-color: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }