study/ClipboardManager
1
0
Fork 0
mirror of https://github.com/ZiuChen/ClipboardManager.git synced 2025-06-08 06:16:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 调整界面样式 增加动画效果

Browse Source
This commit is contained in:
ZiuChen 2022-08-25 22:06:33 +08:00
parent ffe1754479
commit 0c84471671
2 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/style/cpns/clip-item-list.less
View File

@ -3,16 +3,18 @@
.clip-item { .clip-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border: 0px solid @bg-color; margin: 0px 2px;
margin: 0px 5px;
/* 占用px 但是不显示(与背景同色) */ /* 占用px 但是不显示(与背景同色) */
border-width: 1px 1px 1px 1px; border-style: solid hidden hidden hidden;
border-color: @text-bg-color-lighter @bg-color @text-bg-color-lighter @bg-color; border-width: 1px 0px 0px 0px;
border-color: @text-bg-color-lighter @bg-color @bg-color @bg-color;
cursor: pointer; cursor: pointer;
&.active { &.active {
border: 0px solid @primary-color; border-style: hidden hidden hidden solid;
border-width: 1px 1px 1px 1px; border-width: 1px 0px 0px 6px;
border-color: @bg-color @bg-color @bg-color @primary-color;
background-color: @text-bg-color-lighter; background-color: @text-bg-color-lighter;
transition: all 0.15s;
} }
.clip-info { .clip-info {
display: flex; display: flex;
@ -34,7 +36,7 @@
background-color: @text-bg-color; background-color: @text-bg-color;
border-radius: 5px; border-radius: 5px;
min-width: 50px; min-width: 50px;
padding: 5px 10px 5px 10px; padding: 5px 7px 5px 7px;
} }
} }
.clip-data { .clip-data {
@ -50,9 +52,7 @@
// 此 class用于区分 file的 image // 此 class用于区分 file的 image
max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框 max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
max-width: 90%; max-width: 90%;
padding: 5px; box-shadow: 0px 0px 3px @text-color;
background-color: @bg-color;
border-radius: 5px;
} }
.clip-data-status { .clip-data-status {
position: absolute; position: absolute;
@ -60,11 +60,8 @@
color: @text-color; color: @text-color;
background-color: @primary-color-lighter; background-color: @primary-color-lighter;
border-radius: 5px; border-radius: 5px;
padding: 2px; padding: 5px;
font-size: 13px; font-size: 13px;
&.image {
margin: 10px;
}
} }
} }
} }

12
src/style/index.less
View File

@ -9,11 +9,11 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#app { #app {
@primary-color: #8a2be2; @primary-color: #3271ae;
@primary-color-lighter: #d3b8ec; @primary-color-lighter: #798ea4;
@text-color: #e8e6e3; @text-color: #e8e6e3;
@text-color-lighter: rgb(181, 181, 181); @text-color-lighter: rgb(181, 181, 181);
@text-bg-color: #7f7c83; @text-bg-color: #656565;
@text-bg-color-lighter: #4e4e4e; @text-bg-color-lighter: #4e4e4e;
@nav-bg-color: #222426; @nav-bg-color: #222426;
@nav-hover-bg-color: #2b2e30; @nav-hover-bg-color: #2b2e30;
@ -24,11 +24,11 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
#app { #app {
@primary-color: #8a2be2; @primary-color: #3271ae;
@primary-color-lighter: #d3b8ec; @primary-color-lighter: #798ea4;
@text-color: #333; @text-color: #333;
@text-color-lighter: rgb(138, 138, 138); @text-color-lighter: rgb(138, 138, 138);
@text-bg-color: #e3d9ec; @text-bg-color: #f2f2f2;
@text-bg-color-lighter: #eeeaf3; @text-bg-color-lighter: #eeeaf3;
@nav-bg-color: #eeeeee; @nav-bg-color: #eeeeee;
@nav-hover-bg-color: #dedede; @nav-hover-bg-color: #dedede;