From 51fccb699ac7252719201556f809537da4f3237d Mon Sep 17 00:00:00 2001
From: buvta <12312540+buvta@users.noreply.github.com>
Date: Wed, 18 Nov 2020 23:42:38 +0800
Subject: [PATCH] =?UTF-8?q?Play=E9=A2=91=E9=81=93=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss       | 10 ++++++++++
 src/assets/scss/theme/dark.scss  | 24 ++++++++++++++++++++++++
 src/assets/scss/theme/green.scss | 24 ++++++++++++++++++++++++
 src/assets/scss/theme/light.scss | 24 ++++++++++++++++++++++++
 src/assets/scss/theme/pink.scss  | 24 ++++++++++++++++++++++++
 5 files changed, 106 insertions(+)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index de5482b..21f42ec 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -111,6 +111,16 @@
   }
 }
 
+.play{
+  .popper {
+    font-size: 1rem;;
+    border: none;
+    li {
+      font-size: 1rem;
+      border: none;
+    }
+  }
+}
 // Page of list using el-table
 .listpage{
   position: absolute;
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 5fce3b9..398c029 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -301,6 +301,30 @@
     box-shadow: var(--d-bsc);
   }
 
+  .play{
+    .el-input{
+      input{
+        background-color: var(--d-bgc-1);
+        border: 1px solid var(--d-bgc-1);
+        color: var(--d-fc-2);
+      }
+    }
+    .popper {
+      color: var(--d-fc-1);
+      background-color: var(--d-bgc-1);
+      box-shadow: var(--d-bsc);
+      li {
+        color: var(--d-fc-1);
+        background-color: var(--d-bgc-1);
+        &:hover{
+          background-color: var(--d-bgc-2);
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--d-bgc-1);
+      }
+    }
+  }
   // Page of list using table and picture
   .listpage{
     color: var(--d-fc-2);
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index 176da2e..ad4f05f 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -301,6 +301,30 @@
     box-shadow: var(--g-bsc);
   }
 
+  .play{
+    .el-input{
+      input{
+        background-color: var(--g-bgc-1);
+        border: 1px solid var(--g-bgc-1);
+        color: var(--g-fc-2);
+      }
+    }
+    .popper {
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
+      box-shadow: var(--g-bsc);
+      li {
+        color: var(--g-fc-1);
+        background-color: var(--g-bgc-1);
+        &:hover{
+          background-color: var(--g-bgc-2);
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--g-bgc-1);
+      }
+    }
+  }
   // Page of list using table and picture
   .listpage{
     color: var(--g-fc-2);
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index c7b07d8..8880668 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -301,6 +301,30 @@
     box-shadow: var(--l-bsc);
   }
 
+  .play{
+    .el-input{
+      input{
+        background-color: var(--l-bgc-1);
+        border: 1px solid var(--l-bgc-1);
+        color: var(--l-fc-2);
+      }
+    }
+    .popper {
+      color: var(--l-fc-1);
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc);
+      li {
+        color: var(--l-fc-1);
+        background-color: var(--l-bgc-1);
+        &:hover{
+          background-color: var(--l-bgc-2);
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--l-bgc-1);
+      }
+    }
+  }
   // Page of list using table and picture
   .listpage{
     color: var(--l-fc-2);
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index 398c2a9..6ad7645 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -301,6 +301,30 @@
     box-shadow: var(--p-bsc);
   }
 
+  .play{
+    .el-input{
+      input{
+        background-color: var(--p-bgc-1);
+        border: 1px solid var(--p-bgc-1);
+        color: var(--p-fc-2);
+      }
+    }
+    .popper {
+      color: var(--p-fc-1);
+      background-color: var(--p-bgc-1);
+      box-shadow: var(--p-bsc);
+      li {
+        color: var(--p-fc-1);
+        background-color: var(--p-bgc-1);
+        &:hover{
+          background-color: var(--p-bgc-2);
+        }
+      }
+      .popper__arrow, .popper__arrow::after{
+        border-bottom-color: var(--p-bgc-1);
+      }
+    }
+  }
   // Page of list using table and picture
   .listpage{
     color: var(--p-fc-2);