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

feat(theme): 更新主题定制器边框样式，优化视觉效果

Browse Source 
fix(locales): 修改英文和中文边框相关文本
style(app): 调整应用界面边框和阴影样式
This commit is contained in:
jxxghp
2026-06-30 18:42:39 +08:00
parent 3547c146a8
commit 7539fa26aa
7 changed files with 112 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/styles/common.scss
View File

@@ -80,10 +80,13 @@ html {
--app-field-radius: var(--app-vuetify-rounded-lg);
--app-control-radius: var(--app-vuetify-rounded);
--app-overlay-radius: var(--app-vuetify-rounded-lg);
--app-surface-border-width: 0;
--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: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
--app-card-light-border-width: var(--app-surface-border-width);
--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-light-border: var(--app-card-light-border-width) solid rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity));
--app-overlay-border: var(--app-surface-border);
--app-card-rest-shadow: var(--app-elevation-0);
--app-card-hover-shadow: var(--app-elevation-0);
--app-fab-shadow: var(--app-elevation-0);
@@ -101,7 +104,9 @@ html {
}
html[data-theme-skin='bordered'] {
--app-surface-border-width: 1px;
--app-surface-border-opacity: 0.1;
--app-card-light-border-width: 1px;
--app-card-light-border-opacity: 0.16;
}
@@ -179,11 +184,17 @@ html[data-theme-radius='extra'] {
.app-surface,
.v-card,
.v-sheet,
.v-list,
.v-expansion-panel {
border: var(--app-surface-border);
border-radius: var(--app-surface-radius) !important;
box-shadow: var(--app-surface-shadow) !important;
transition: border-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease;
transition: border-color 0.2s ease, border-radius 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease;
}
.v-list {
border-radius: var(--app-surface-radius) !important;
box-shadow: var(--app-surface-shadow) !important;
transition: border-radius 0.2s ease, box-shadow 0.2s ease;
}
.app-surface-static {
@@ -412,6 +423,7 @@ html[data-theme-radius='extra'] {
// 局部需要退出全局 surface 风格时使用这些工具类，避免再用 !important 抢优先级。
.app-surface-borderless {
--app-surface-border: 0 solid transparent;
--app-overlay-border: 0 solid transparent;
}
.app-surface-flat,
@@ -604,30 +616,6 @@ html[data-theme-radius='extra'] {
box-shadow: none !important;
}
// 主题定制器的 bordered 皮肤：保持原布局密度，只给非 Vuetify 外壳增加清晰边界。
html[data-theme-skin='bordered'] {
.layout-vertical-nav {
border: var(--app-surface-border);
}
.navbar-content-container {
border-block-end: var(--app-surface-border);
}
.layout-vertical-nav {
border-block: 0;
border-inline-start: 0;
}
.app-surface,
.v-card,
.v-sheet,
.v-list,
.v-expansion-panel {
border: var(--app-surface-border);
}
}
// 应用类信息卡片：固定右侧媒体槽位，避免图片被左侧文字挤压变形。
.app-card-shell {
position: relative;
@@ -658,7 +646,7 @@ html[data-theme-skin='bordered'] {
--app-card-hover-border-opacity: 0.16;
--app-card-stripe-opacity: 0.22;
--app-card-surface-opacity: 0.92;
--app-surface-border: 1px solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity));
--app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity));
--app-surface-hover-shadow: var(--app-card-hover-shadow);
--app-surface-shadow: var(--app-card-rest-shadow);
}
@@ -676,7 +664,7 @@ html[data-theme-skin='bordered'] {
}
.app-card-colorful:hover {
--app-surface-border: 1px solid rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity));
--app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity));
}
.app-card-colorful:focus-visible {
@@ -700,11 +688,11 @@ html[data-theme="transparent"] .app-card-colorful,
--app-card-accent-start-opacity: 0.018;
--app-card-accent-end-opacity: 0.01;
--app-card-border-opacity: 0;
--app-card-hover-border-opacity: 0;
--app-card-border-opacity: var(--app-surface-border-opacity);
--app-card-hover-border-opacity: var(--app-surface-border-opacity);
--app-card-stripe-opacity: 0.16;
--app-card-surface-opacity: var(--transparent-opacity-light, 0.2);
--app-surface-border: 0 solid transparent;
--app-surface-border: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity));
}
html[data-theme="transparent"].transparent-glass-lightweight .app-card-colorful,
@@ -1380,6 +1368,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
// 弹出层样式
.v-overlay__content .v-list{
border: var(--app-overlay-border);
border-radius: var(--app-surface-radius);
backdrop-filter: blur(6px);
background-color: rgb(var(--v-theme-surface), 0.9);
@@ -1388,6 +1377,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
}
.v-overlay__content .v-card:not(.bg-primary){
border: var(--app-overlay-border);
border-radius: var(--app-surface-radius);
backdrop-filter: blur(8px);
background-color: rgb(var(--v-theme-surface), 0.95);
@@ -1462,6 +1452,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,
.v-menu > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content > .v-list {
border: var(--app-overlay-border);
border-radius: var(--app-overlay-radius) !important;
box-shadow: var(--app-overlay-shadow) !important;
}