GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-13 08:22:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refine card hover borders across subtitle and torrent cards

Browse Source
This commit is contained in:
jxxghp
2026-06-28 21:39:29 +08:00
parent d02e98736f
commit fd9c314d55
5 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/cards/SubtitleCard.vue
View File

@@ -208,15 +208,12 @@ watch(
inline-size: 100%;
}
.subtitle-card-hover-area:hover .subtitle-card {
transform: translate3d(0, -0.25rem, 0);
}
.subtitle-card {
border: 1px solid transparent;
border: var(--app-card-light-border);
}
.subtitle-card-hover-area:hover .subtitle-card {
border-color: rgba(var(--v-theme-primary), 0.3);
transform: translate3d(0, -0.25rem, 0);
}
</style>

7
src/components/cards/SubtitleItem.vue
View File

@@ -211,15 +211,12 @@ watch(
inline-size: 100%;
}
.subtitle-item-hover-area:hover .subtitle-item {
transform: translate3d(0, -0.25rem, 0);
}
.subtitle-item {
border: 1px solid transparent;
border: var(--app-card-light-border);
}
.subtitle-item-hover-area:hover .subtitle-item {
border-color: rgba(var(--v-theme-primary), 0.3);
transform: translate3d(0, -0.25rem, 0);
}
</style>

7
src/components/cards/TorrentCard.vue
View File

@@ -321,17 +321,14 @@ watch(
inline-size: 100%;
}
.torrent-card-hover-area:hover .torrent-card {
transform: translate3d(0, -0.25rem, 0);
}
/* 卡片悬停效果 */
.torrent-card {
border: 1px solid transparent;
border: var(--app-card-light-border);
}
.torrent-card-hover-area:hover .torrent-card {
border-color: rgba(var(--v-theme-primary), 0.3);
transform: translate3d(0, -0.25rem, 0);
}
/* 优惠标签样式 */

7
src/components/cards/TorrentItem.vue
View File

@@ -267,16 +267,13 @@ watch(
inline-size: 100%;
}
.torrent-item-hover-area:hover .torrent-item {
transform: translate3d(0, -0.25rem, 0);
}
.torrent-item {
border: 1px solid transparent;
border: var(--app-card-light-border);
}
.torrent-item-hover-area:hover .torrent-item {
border-color: rgba(var(--v-theme-primary), 0.3);
transform: translate3d(0, -0.25rem, 0);
}
.chip-season {

9
src/styles/common.scss
View File

@@ -82,6 +82,8 @@ html {
--app-overlay-radius: var(--app-vuetify-rounded-lg);
--app-surface-border-opacity: 0.06;
--app-surface-border: 1px solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
--app-card-light-border-opacity: 0.12;
--app-card-light-border: 1px solid rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity));
--app-card-rest-shadow: var(--app-elevation-0);
--app-card-hover-shadow: var(--app-elevation-0);
--app-fab-shadow: var(--app-elevation-0);
@@ -100,6 +102,7 @@ html {
html[data-theme-skin='bordered'] {
--app-surface-border-opacity: 0.1;
--app-card-light-border-opacity: 0.16;
}
// 默认档位保留按钮等 control 的 Vuetify 原始圆角，同时让卡片、列表、弹窗和输入区使用更舒展的大圆角。
@@ -193,6 +196,11 @@ html[data-theme-radius='extra'] {
}
// 统一卡片上浮反馈；hover 命中区域应放在静止外层，避免上浮后底边反复触发 mouseleave。
.v-card.app-hover-lift-card,
.subscribe-card-shell {
border: var(--app-card-light-border);
}
.app-hover-lift-card {
transition: transform 0.3s ease, box-shadow 0.2s ease;
transform: translateZ(0);
@@ -517,6 +525,7 @@ html[data-theme-skin='bordered'] {
// 应用类信息卡片：固定右侧媒体槽位，避免图片被左侧文字挤压变形。
.app-card-shell {
position: relative;
border: var(--app-card-light-border);
block-size: 100%;
}