📝 修复暗黑模式下商店物品显示对比度不高的问题

This commit is contained in:
snowykami 2024-08-31 22:06:04 +08:00
parent ae34ff622d
commit c3072e93c7
3 changed files with 43 additions and 63 deletions

View File

@ -7,11 +7,16 @@
--vp-home-hero-image-background-image: linear-gradient(-45deg, #d0e9ff 50%, #a2d8f4 50%);
--vp-home-hero-image-filter: blur(44px);
--vp-c-gray-1: #eee;
--vp-c-gray-2: #aaa;
}
.dark {
--vp-home-hero-image-background-image: linear-gradient(-45deg, #004785 50%, #0374ad 50%);
--vp-c-gray-1: #333;
--vp-c-gray-2: #666;
}
.tab-buttons {
@ -51,10 +56,37 @@
.item-card {
position: relative;
border-radius: 15px;
background-color: #99999922;
background-color: var(--vp-c-gray-1);
height: 160px;
padding: 16px;
margin: 10px;
box-sizing: border-box;
transition: background 0.3s ease;
}
.item-name {
font-size: 20px;
margin-bottom: 10px;
}
.item-description {
color: var(--vp-c-gray-2);
font-size: 13px;
white-space: pre-wrap;
}
.author-info {
display: flex;
justify-content: left;
align-items: center;
}
.author-name {
font-size: 15px;
font-weight: normal;
}
.avatar {
border-radius: 50%;
margin: 0 10px;
}

View File

@ -14,7 +14,7 @@
</svg>
</a>
<!-- <button class="copy-btn btn"><div @click="copyToClipboard">安装</div></button> 点击后把安装命令写入剪贴板-->
<!-- <button class="copy-btn btn"><div @click="copyToClipboard">安装</div></button> 点击后把安装命令写入剪贴板-->
<button class="btn copy-btn" @click="copyToClipboard">复制安装命令</button>
<div class="btn">
@ -82,42 +82,11 @@ button {
color: #666;
}
.copy-btn:hover {
color: #111;
}
.item-name {
color: #111;
font-size: 20px;
margin-bottom: 10px;
}
.item-description {
color: #333;
font-size: 12px;
white-space: pre-wrap;
}
.icon {
width: 20px;
height: 20px;
}
.author-info {
display: flex;
justify-content: left;
align-items: center;
}
.author-name {
font-size: 15px;
font-weight: normal;
}
.avatar {
border-radius: 50%;
margin: 0 10px;
}
.item-bar {
position: absolute;
@ -132,7 +101,7 @@ button {
.tag {
display: inline-block;
padding: 0px 5px;
padding: 0 5px;
margin-right: 5px;
border-radius: 5px;
font-size: 12px;

View File

@ -29,16 +29,7 @@ const props = defineProps({
<style scoped>
.item-name {
font-size: 20px;
margin-bottom: 10px;
}
.item-description {
color: #333;
font-size: 15px;
white-space: pre-wrap;
}
.icon {
width: 20px;
@ -46,21 +37,9 @@ const props = defineProps({
color: $themeColor;
}
.author-info {
display: flex;
justify-content: left;
align-items: center;
}
.author-name {
font-size: 15px;
font-weight: normal;
}
.avatar {
border-radius: 50%;
margin: 0 10px;
}
.item-bar {
position: absolute;