mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-06 21:34:08 +08:00
feat: 深色模式
This commit is contained in:
parent
de5ac3476e
commit
69a0498be4
@ -31,5 +31,5 @@ const onOverlayClick = () => emit('onOverlayClick')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-full-data.less';
|
||||
@import '../style';
|
||||
</style>
|
||||
|
@ -56,5 +56,5 @@ const onDataChange = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-item-list.less';
|
||||
@import '../style';
|
||||
</style>
|
||||
|
@ -18,5 +18,5 @@ watch(filterText, (val) => emit('update:modelValue', val))
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-search.less';
|
||||
@import '../style';
|
||||
</style>
|
||||
|
@ -38,5 +38,5 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-switch.less';
|
||||
@import '../style';
|
||||
</style>
|
||||
|
@ -19,5 +19,5 @@ const getIcon = (path) => window.getIcon(path)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/file-list.less';
|
||||
@import '../style';
|
||||
</style>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
37
src/style/index.less
Normal file
37
src/style/index.less
Normal file
@ -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();
|
||||
}
|
||||
}
|
@ -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;
|
@ -152,7 +152,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/variable.less';
|
||||
@import '../style';
|
||||
.clip-restore {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -168,7 +168,7 @@ onMounted(() => {
|
||||
background-color: rgb(232, 232, 232);
|
||||
user-select: none;
|
||||
&:hover {
|
||||
background-color: @primary-color;
|
||||
// background-color: @primary-color;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user