From 69a0498be4c93062b66c16e017169554383b9081 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Mon, 15 Aug 2022 16:07:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/cpns/ClipFullData.vue | 2 +-
src/cpns/ClipItemList.vue | 2 +-
src/cpns/ClipSearch.vue | 2 +-
src/cpns/ClipSwitch.vue | 2 +-
src/cpns/FileList.vue | 2 +-
src/style/cpns/clip-full-data.less | 2 +-
src/style/cpns/clip-item-list.less | 129 +++++++++++++++--------------
src/style/cpns/clip-search.less | 3 +-
src/style/cpns/clip-switch.less | 8 +-
src/style/index.less | 37 +++++++++
src/style/variable.less | 6 --
src/views/Main.vue | 4 +-
12 files changed, 116 insertions(+), 83 deletions(-)
create mode 100644 src/style/index.less
delete mode 100644 src/style/variable.less
diff --git a/src/cpns/ClipFullData.vue b/src/cpns/ClipFullData.vue
index 4bd7e65..66fb6d8 100644
--- a/src/cpns/ClipFullData.vue
+++ b/src/cpns/ClipFullData.vue
@@ -31,5 +31,5 @@ const onOverlayClick = () => emit('onOverlayClick')
diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index df40884..0335ec9 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -56,5 +56,5 @@ const onDataChange = (item) => {
diff --git a/src/cpns/ClipSearch.vue b/src/cpns/ClipSearch.vue
index 832c338..87e559c 100644
--- a/src/cpns/ClipSearch.vue
+++ b/src/cpns/ClipSearch.vue
@@ -18,5 +18,5 @@ watch(filterText, (val) => emit('update:modelValue', val))
diff --git a/src/cpns/ClipSwitch.vue b/src/cpns/ClipSwitch.vue
index 5387199..1962b39 100644
--- a/src/cpns/ClipSwitch.vue
+++ b/src/cpns/ClipSwitch.vue
@@ -38,5 +38,5 @@ defineExpose({
diff --git a/src/cpns/FileList.vue b/src/cpns/FileList.vue
index 75a74ef..217c16b 100644
--- a/src/cpns/FileList.vue
+++ b/src/cpns/FileList.vue
@@ -19,5 +19,5 @@ const getIcon = (path) => window.getIcon(path)
diff --git a/src/style/cpns/clip-full-data.less b/src/style/cpns/clip-full-data.less
index e8cf64c..1f7065d 100644
--- a/src/style/cpns/clip-full-data.less
+++ b/src/style/cpns/clip-full-data.less
@@ -4,7 +4,7 @@
top: 0;
height: 100%;
width: 60%;
- background: white;
+ background: @bg-color;
padding: 0px 20px 0px 20px;
overflow-y: scroll;
word-break: break-all;
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index 0860769..43632c4 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -1,76 +1,79 @@
-@import '../variable.less';
-.clip-item {
- display: flex;
- justify-content: space-between;
- border: 0px solid #eee;
- border-width: 0px 0px 1px 0px;
- cursor: pointer;
- &:hover {
- background-color: @text-bg-color-lighter;
- transition: all 0.15s;
- }
- .clip-info {
+.clip-item-list {
+ background: @bg-color;
+ .clip-item {
display: flex;
- justify-content: center;
- align-items: center;
- font-size: 14px;
- padding: 10px;
- .clip-time {
+ justify-content: space-between;
+ border: 0px solid #eee;
+ border-width: 0px 0px 1px 0px;
+ cursor: pointer;
+ &:hover {
+ background-color: @text-bg-color-lighter;
+ transition: all 0.15s;
+ }
+ .clip-info {
display: flex;
justify-content: center;
align-items: center;
- min-width: 100px;
- span {
+ font-size: 14px;
+ padding: 10px;
+ .clip-time {
display: flex;
justify-content: center;
align-items: center;
- font-size: 13px;
- color: @text-color-lighter;
- background-color: @text-bg-color;
- border-radius: 5px;
- min-width: 50px;
- padding: 5px 10px 5px 10px;
+ min-width: 100px;
+ span {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 13px;
+ color: @text-color-lighter;
+ background-color: @text-bg-color;
+ border-radius: 5px;
+ min-width: 50px;
+ padding: 5px 10px 5px 10px;
+ }
}
- }
- .clip-data {
- display: flex;
- overflow: hidden;
- word-break: break-all;
- max-height: 150px;
- padding: 5px;
- white-space: pre-wrap;
- flex-direction: column;
- background-color: white;
- img {
+ .clip-data {
+ display: flex;
+ overflow: hidden;
+ word-break: break-all;
max-height: 150px;
- }
- .clip-image-size {
- position: absolute;
- background-color: white;
+ padding: 5px;
+ white-space: pre-wrap;
+ flex-direction: column;
+ color: @text-color;
+ background-color: @bg-color;
+ img {
+ max-height: 150px;
+ }
+ .clip-image-size {
+ position: absolute;
+ background-color: @bg-color;
+ }
}
}
- }
- .clip-count {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 50px;
- padding: 10px;
- font-size: 13px;
- color: @text-color-lighter;
- padding: 10px;
- }
- .clip-more {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px;
- font-size: 13px;
- cursor: pointer;
- border-radius: 0px 5px 5px 0px;
- }
- .clip-more:hover {
- background-color: @text-bg-color;
- transition: all 0.15s;
+ .clip-count {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 50px;
+ padding: 10px;
+ font-size: 13px;
+ color: @text-color-lighter;
+ padding: 10px;
+ }
+ .clip-more {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ font-size: 13px;
+ cursor: pointer;
+ border-radius: 0px 5px 5px 0px;
+ }
+ .clip-more:hover {
+ background-color: @text-bg-color;
+ transition: all 0.15s;
+ }
}
}
diff --git a/src/style/cpns/clip-search.less b/src/style/cpns/clip-search.less
index 86910c2..0338c49 100644
--- a/src/style/cpns/clip-search.less
+++ b/src/style/cpns/clip-search.less
@@ -1,4 +1,3 @@
-@import '../variable.less';
.clip-search {
width: 40%;
margin-right: 30px;
@@ -10,7 +9,7 @@
border: none;
/* custom */
color: @text-color;
- background-color: white;
+ background-color: @bg-color;
height: fit-content;
font-size: 15px;
padding: 10px;
diff --git a/src/style/cpns/clip-switch.less b/src/style/cpns/clip-switch.less
index 9ab2f50..2ff6386 100644
--- a/src/style/cpns/clip-switch.less
+++ b/src/style/cpns/clip-switch.less
@@ -1,4 +1,3 @@
-@import '../variable.less';
.clip-switch {
z-index: 999;
position: fixed;
@@ -8,10 +7,11 @@
align-items: center;
flex-direction: row;
width: 100%;
- background-color: #eeeeee;
+ color: @text-color;
+ background-color: @nav-bg-color;
.active {
color: @primary-color;
- background-color: white;
+ background-color: @bg-color;
transition: all 0.15s ease-in-out;
}
.clip-switch-items {
@@ -26,7 +26,7 @@
border-radius: 5px;
font-size: 14px;
&:hover {
- background-color: rgb(222, 222, 222);
+ background-color: @nav-hover-bg-color;
transition: all 0.15s ease-in-out;
}
}
diff --git a/src/style/index.less b/src/style/index.less
new file mode 100644
index 0000000..fbda60f
--- /dev/null
+++ b/src/style/index.less
@@ -0,0 +1,37 @@
+.import() {
+ @import (multiple) './cpns/clip-full-data.less';
+ @import (multiple) './cpns/clip-item-list.less';
+ @import (multiple) './cpns/clip-search.less';
+ @import (multiple) './cpns/clip-switch.less';
+ @import (multiple) './cpns/file-list.less';
+}
+
+@media (prefers-color-scheme: dark) {
+ #app {
+ @primary-color: #8a2be2;
+ @primary-color-lighter: #d3b8ec;
+ @text-color: #e8e6e3;
+ @text-color-lighter: rgb(207, 207, 207);
+ @text-bg-color: #7f7c83;
+ @text-bg-color-lighter: #4e4e4e;
+ @nav-bg-color: #222426;
+ @nav-hover-bg-color: #2b2e30;
+ @bg-color: #181a1b;
+ .import();
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ #app {
+ @primary-color: #8a2be2;
+ @primary-color-lighter: #d3b8ec;
+ @text-color: #333;
+ @text-color-lighter: rgb(138, 138, 138);
+ @text-bg-color: #e3d9ec;
+ @text-bg-color-lighter: #eeeaf3;
+ @nav-bg-color: #eeeeee;
+ @nav-hover-bg-color: #dedede;
+ @bg-color: #fff;
+ .import();
+ }
+}
diff --git a/src/style/variable.less b/src/style/variable.less
deleted file mode 100644
index be5159d..0000000
--- a/src/style/variable.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@primary-color: #8a2be2;
-@primary-color-lighter: #d3b8ec;
-@text-color: #333;
-@text-color-lighter: rgb(138, 138, 138);
-@text-bg-color: #e3d9ec;
-@text-bg-color-lighter: #eeeaf3;
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 96acf5f..d982333 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -152,7 +152,7 @@ onMounted(() => {