mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 16:56:40 +08:00
Refine card hover borders across subtitle and torrent cards
This commit is contained in:
@@ -208,15 +208,12 @@ watch(
|
|||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle-card-hover-area:hover .subtitle-card {
|
|
||||||
transform: translate3d(0, -0.25rem, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle-card {
|
.subtitle-card {
|
||||||
border: 1px solid transparent;
|
border: var(--app-card-light-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle-card-hover-area:hover .subtitle-card {
|
.subtitle-card-hover-area:hover .subtitle-card {
|
||||||
border-color: rgba(var(--v-theme-primary), 0.3);
|
border-color: rgba(var(--v-theme-primary), 0.3);
|
||||||
|
transform: translate3d(0, -0.25rem, 0);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -211,15 +211,12 @@ watch(
|
|||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle-item-hover-area:hover .subtitle-item {
|
|
||||||
transform: translate3d(0, -0.25rem, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle-item {
|
.subtitle-item {
|
||||||
border: 1px solid transparent;
|
border: var(--app-card-light-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle-item-hover-area:hover .subtitle-item {
|
.subtitle-item-hover-area:hover .subtitle-item {
|
||||||
border-color: rgba(var(--v-theme-primary), 0.3);
|
border-color: rgba(var(--v-theme-primary), 0.3);
|
||||||
|
transform: translate3d(0, -0.25rem, 0);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -321,17 +321,14 @@ watch(
|
|||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.torrent-card-hover-area:hover .torrent-card {
|
|
||||||
transform: translate3d(0, -0.25rem, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 卡片悬停效果 */
|
/* 卡片悬停效果 */
|
||||||
.torrent-card {
|
.torrent-card {
|
||||||
border: 1px solid transparent;
|
border: var(--app-card-light-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.torrent-card-hover-area:hover .torrent-card {
|
.torrent-card-hover-area:hover .torrent-card {
|
||||||
border-color: rgba(var(--v-theme-primary), 0.3);
|
border-color: rgba(var(--v-theme-primary), 0.3);
|
||||||
|
transform: translate3d(0, -0.25rem, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 优惠标签样式 */
|
/* 优惠标签样式 */
|
||||||
|
|||||||
@@ -267,16 +267,13 @@ watch(
|
|||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.torrent-item-hover-area:hover .torrent-item {
|
|
||||||
transform: translate3d(0, -0.25rem, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.torrent-item {
|
.torrent-item {
|
||||||
border: 1px solid transparent;
|
border: var(--app-card-light-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.torrent-item-hover-area:hover .torrent-item {
|
.torrent-item-hover-area:hover .torrent-item {
|
||||||
border-color: rgba(var(--v-theme-primary), 0.3);
|
border-color: rgba(var(--v-theme-primary), 0.3);
|
||||||
|
transform: translate3d(0, -0.25rem, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip-season {
|
.chip-season {
|
||||||
|
|||||||
@@ -82,6 +82,8 @@ html {
|
|||||||
--app-overlay-radius: var(--app-vuetify-rounded-lg);
|
--app-overlay-radius: var(--app-vuetify-rounded-lg);
|
||||||
--app-surface-border-opacity: 0.06;
|
--app-surface-border-opacity: 0.06;
|
||||||
--app-surface-border: 1px solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
|
--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-rest-shadow: var(--app-elevation-0);
|
||||||
--app-card-hover-shadow: var(--app-elevation-0);
|
--app-card-hover-shadow: var(--app-elevation-0);
|
||||||
--app-fab-shadow: var(--app-elevation-0);
|
--app-fab-shadow: var(--app-elevation-0);
|
||||||
@@ -100,6 +102,7 @@ html {
|
|||||||
|
|
||||||
html[data-theme-skin='bordered'] {
|
html[data-theme-skin='bordered'] {
|
||||||
--app-surface-border-opacity: 0.1;
|
--app-surface-border-opacity: 0.1;
|
||||||
|
--app-card-light-border-opacity: 0.16;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 默认档位保留按钮等 control 的 Vuetify 原始圆角,同时让卡片、列表、弹窗和输入区使用更舒展的大圆角。
|
// 默认档位保留按钮等 control 的 Vuetify 原始圆角,同时让卡片、列表、弹窗和输入区使用更舒展的大圆角。
|
||||||
@@ -193,6 +196,11 @@ html[data-theme-radius='extra'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 统一卡片上浮反馈;hover 命中区域应放在静止外层,避免上浮后底边反复触发 mouseleave。
|
// 统一卡片上浮反馈;hover 命中区域应放在静止外层,避免上浮后底边反复触发 mouseleave。
|
||||||
|
.v-card.app-hover-lift-card,
|
||||||
|
.subscribe-card-shell {
|
||||||
|
border: var(--app-card-light-border);
|
||||||
|
}
|
||||||
|
|
||||||
.app-hover-lift-card {
|
.app-hover-lift-card {
|
||||||
transition: transform 0.3s ease, box-shadow 0.2s ease;
|
transition: transform 0.3s ease, box-shadow 0.2s ease;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
@@ -517,6 +525,7 @@ html[data-theme-skin='bordered'] {
|
|||||||
// 应用类信息卡片:固定右侧媒体槽位,避免图片被左侧文字挤压变形。
|
// 应用类信息卡片:固定右侧媒体槽位,避免图片被左侧文字挤压变形。
|
||||||
.app-card-shell {
|
.app-card-shell {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border: var(--app-card-light-border);
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user