mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-09 15:34:04 +08:00
feat: 各个Item之间分割线在深色模式下的样式 #6
This commit is contained in:
parent
d132342f29
commit
54a6c69a7a
@ -26,7 +26,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template v-if="item.type === 'image'">
|
<template v-if="item.type === 'image'">
|
||||||
<img class="clip-data-image" :src="item.data" alt="Image" />
|
<img class="clip-data-image" :src="item.data" alt="Image" />
|
||||||
<div class="clip-data-status">{{ item.size }}</div>
|
<div class="clip-data-status image">{{ item.size }}</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.type === 'file'">
|
<template v-if="item.type === 'file'">
|
||||||
<div
|
<div
|
||||||
|
@ -4,13 +4,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border: 0px solid @bg-color;
|
border: 0px solid @bg-color;
|
||||||
/* 有上边框占用px 但是不显示(与背景同色) */
|
margin: 0px 5px;
|
||||||
border-width: 1px 0px 1px 0px;
|
/* 占用px 但是不显示(与背景同色) */
|
||||||
border-color: @bg-color @bg-color #eee @bg-color;
|
border-width: 1px 1px 1px 1px;
|
||||||
|
border-color: @text-bg-color-lighter @bg-color @text-bg-color-lighter @bg-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&.active {
|
&.active {
|
||||||
border: 0px solid @primary-color;
|
border: 0px solid @primary-color;
|
||||||
border-width: 1px 0px 1px 0px;
|
border-width: 1px 1px 1px 1px;
|
||||||
background-color: @text-bg-color-lighter;
|
background-color: @text-bg-color-lighter;
|
||||||
}
|
}
|
||||||
.clip-info {
|
.clip-info {
|
||||||
@ -46,19 +47,24 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
img.clip-data-image {
|
img.clip-data-image {
|
||||||
|
// 此 class用于区分 file的 image
|
||||||
max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
|
max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: @text-color-lighter;
|
background-color: @bg-color;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.clip-data-status {
|
.clip-data-status {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
color: @bg-color;
|
color: @text-color;
|
||||||
background-color: @text-color-lighter;
|
background-color: @primary-color-lighter;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 3px;
|
padding: 2px;
|
||||||
|
font-size: 13px;
|
||||||
|
&.image {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -168,7 +168,7 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.clip-break {
|
.clip-break {
|
||||||
height: 55px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
.clip-empty-status {
|
.clip-empty-status {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user