style(NotificationTemplateEditorDialog): adjust overflow property and update min-block-size for template editor

style(SearchBarDialog): change search icon and adjust dropdown width
style(common.scss): refine hover effects and update shadow settings for card components
style(AccountSettingNotification): improve layout and spacing for notification settings
This commit is contained in:
jxxghp
2026-06-29 18:02:38 +08:00
parent f05eac0b93
commit a3810fb9e2
4 changed files with 150 additions and 44 deletions
@@ -105,9 +105,9 @@ function submitTemplate() {
<style scoped> <style scoped>
.notification-template-editor-dialog { .notification-template-editor-dialog {
display: flex; display: flex;
overflow: hidden;
flex-direction: column; flex-direction: column;
max-block-size: calc(100dvh - 2rem); max-block-size: calc(100dvh - 2rem);
overflow: hidden;
} }
.template-editor-header { .template-editor-header {
@@ -147,8 +147,8 @@ function submitTemplate() {
.template-ace-editor { .template-ace-editor {
flex: 1 1 auto; flex: 1 1 auto;
min-block-size: 0;
block-size: auto; block-size: auto;
min-block-size: 0;
} }
.template-editor-actions { .template-editor-actions {
+3 -4
View File
@@ -466,7 +466,7 @@ onMounted(() => {
<!-- 弹窗模式保留原有搜索输入区 --> <!-- 弹窗模式保留原有搜索输入区 -->
<div v-if="!display.mdAndUp.value" class="search-header"> <div v-if="!display.mdAndUp.value" class="search-header">
<div class="search-input-wrapper"> <div class="search-input-wrapper">
<VIcon icon="mdi-magnify" size="22" class="search-input-icon" /> <VIcon icon="mdi-text" size="22" class="search-input-icon" />
<input <input
ref="searchWordInput" ref="searchWordInput"
v-model="searchWord" v-model="searchWord"
@@ -795,7 +795,7 @@ onMounted(() => {
.search-dialog--dropdown { .search-dialog--dropdown {
border: 1px solid rgba(var(--v-theme-on-surface), 0.08); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
inline-size: min(40rem, calc(100vw - 2rem)); inline-size: min(32rem, calc(100vw - 2rem));
max-block-size: min(72vh, 42rem); max-block-size: min(72vh, 42rem);
} }
@@ -809,7 +809,6 @@ onMounted(() => {
border-color: rgba(var(--v-theme-on-surface), 0.12); border-color: rgba(var(--v-theme-on-surface), 0.12);
background: rgba(var(--v-theme-surface), 0.72); background: rgba(var(--v-theme-surface), 0.72);
block-size: 42px; block-size: 42px;
box-shadow: var(--app-surface-shadow);
padding-inline: 14px 8px; padding-inline: 14px 8px;
} }
@@ -849,7 +848,6 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
.search-input-wrapper:focus-within { .search-input-wrapper:focus-within {
border-color: rgb(var(--v-theme-primary)); border-color: rgb(var(--v-theme-primary));
box-shadow: var(--app-surface-shadow);
} }
.search-input-icon { .search-input-icon {
@@ -948,6 +946,7 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
.recent-searches-section { .recent-searches-section {
inline-size: 100%; inline-size: 100%;
padding-block-start: 1rem;
} }
.empty-hint { .empty-hint {
+127 -22
View File
@@ -202,8 +202,8 @@ html[data-theme-radius='extra'] {
} }
.app-hover-lift-card { .app-hover-lift-card {
transition: transform 0.3s ease, box-shadow 0.2s ease;
transform: translateZ(0); transform: translateZ(0);
transition: transform 0.3s ease, box-shadow 0.2s ease;
} }
.app-hover-lift-card--hovering { .app-hover-lift-card--hovering {
@@ -475,27 +475,133 @@ html[data-theme-radius='extra'] {
transition: box-shadow 0.2s ease, border-radius 0.2s ease; transition: box-shadow 0.2s ease, border-radius 0.2s ease;
} }
// 只给外层 surface 加边框和阴影,卡片内部的列表、表格等子组件保持平面,避免层级噪声 // 只给外层卡片和弹窗外壳保留阴影,内部 surface / control / elevation 工具类统一保持平面,避免多层阴影叠加
.v-card .v-list:not(.app-surface), .v-card :where(
.v-card .v-sheet:not(.app-surface), .app-surface,
.v-card .v-table:not(.app-surface), .app-surface-static,
.v-card .v-expansion-panel:not(.app-surface), .v-alert,
.v-card .v-window:not(.app-surface), .v-avatar,
.v-card .v-toolbar:not(.app-surface), .v-btn,
.v-card .v-navigation-drawer:not(.app-surface), .v-btn-group,
.v-card .v-stepper:not(.app-surface), .v-card,
.v-card .v-alert:not(.app-surface), .v-chip,
.v-card .v-avatar, .v-expansion-panel,
.v-card .v-chip { .v-expansion-panel__shadow,
.v-list,
.v-navigation-drawer,
.v-sheet,
.v-stepper,
.v-table,
.v-toolbar,
.v-window,
[class^='elevation-'],
[class*=' elevation-'],
[class^='shadow-'],
[class*=' shadow-']
),
.v-overlay__content > .v-card :where(
.app-surface,
.app-surface-static,
.v-alert,
.v-avatar,
.v-btn,
.v-btn-group,
.v-card,
.v-chip,
.v-expansion-panel,
.v-expansion-panel__shadow,
.v-list,
.v-navigation-drawer,
.v-sheet,
.v-stepper,
.v-table,
.v-toolbar,
.v-window,
[class^='elevation-'],
[class*=' elevation-'],
[class^='shadow-'],
[class*=' shadow-']
),
.v-overlay__content > .v-sheet :where(
.app-surface,
.app-surface-static,
.v-alert,
.v-avatar,
.v-btn,
.v-btn-group,
.v-card,
.v-chip,
.v-expansion-panel,
.v-expansion-panel__shadow,
.v-list,
.v-navigation-drawer,
.v-sheet,
.v-stepper,
.v-table,
.v-toolbar,
.v-window,
[class^='elevation-'],
[class*=' elevation-'],
[class^='shadow-'],
[class*=' shadow-']
),
.v-overlay__content > form > .v-card :where(
.app-surface,
.app-surface-static,
.v-alert,
.v-avatar,
.v-btn,
.v-btn-group,
.v-card,
.v-chip,
.v-expansion-panel,
.v-expansion-panel__shadow,
.v-list,
.v-navigation-drawer,
.v-sheet,
.v-stepper,
.v-table,
.v-toolbar,
.v-window,
[class^='elevation-'],
[class*=' elevation-'],
[class^='shadow-'],
[class*=' shadow-']
),
.v-overlay__content > form > .v-sheet :where(
.app-surface,
.app-surface-static,
.v-alert,
.v-avatar,
.v-btn,
.v-btn-group,
.v-card,
.v-chip,
.v-expansion-panel,
.v-expansion-panel__shadow,
.v-list,
.v-navigation-drawer,
.v-sheet,
.v-stepper,
.v-table,
.v-toolbar,
.v-window,
[class^='elevation-'],
[class*=' elevation-'],
[class^='shadow-'],
[class*=' shadow-']
) {
--app-card-hover-shadow: none;
--app-card-rest-shadow: none;
--app-fab-shadow: none;
--app-fab-shadow-active: none;
--app-fab-shadow-hover: none;
--app-fab-shadow-strong: none;
--app-fab-shadow-strong-hover: none;
--app-surface-hover-shadow: none; --app-surface-hover-shadow: none;
--app-surface-shadow: none; --app-surface-shadow: none;
}
// 弹窗内容里的嵌套卡片默认保持平面;弹窗自身仍由 overlay 规则控制阴影和圆角。 box-shadow: none !important;
.v-dialog > .v-overlay__content > .v-card :where(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel):not(.app-card-colorful),
.v-dialog > .v-overlay__content > .v-sheet :where(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel):not(.app-card-colorful) {
--app-surface-hover-shadow: none;
--app-surface-shadow: none;
} }
// 主题定制器的 bordered 皮肤:保持原布局密度,只给非 Vuetify 外壳增加清晰边界。 // 主题定制器的 bordered 皮肤:保持原布局密度,只给非 Vuetify 外壳增加清晰边界。
@@ -541,7 +647,6 @@ html[data-theme-skin='bordered'] {
rgba(var(--v-theme-surface), 0) 76% rgba(var(--v-theme-surface), 0) 76%
), ),
rgba(var(--v-theme-surface), var(--app-card-surface-opacity)); rgba(var(--v-theme-surface), var(--app-card-surface-opacity));
box-shadow: var(--app-surface-shadow);
color: rgb(var(--v-theme-on-surface)); color: rgb(var(--v-theme-on-surface));
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
@@ -1188,12 +1293,12 @@ html[data-theme="transparent"] .app-card-colorful,
} }
.v-dialog--fullscreen > .v-overlay__content { .v-dialog--fullscreen > .v-overlay__content {
display: flex;
justify-content: center;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
display: flex;
inline-size: 100%; inline-size: 100%;
inset-inline: 0 !important; inset-inline: 0 !important;
justify-content: center;
margin-inline: auto; margin-inline: auto;
} }
@@ -600,11 +600,11 @@ useSilentSettingRefresh(loadPageData, {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1rem;
cursor: pointer; cursor: pointer;
gap: 0.875rem; gap: 0.875rem;
inline-size: 100%; inline-size: 100%;
min-block-size: 5.25rem; min-block-size: 5.25rem;
padding: 1rem;
text-align: start; text-align: start;
} }
@@ -638,16 +638,18 @@ useSilentSettingRefresh(loadPageData, {
} }
.template-card-subtitle { .template-card-subtitle {
margin-block-start: 0.25rem;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.25; line-height: 1.25;
margin-block-start: 0.25rem;
} }
.template-card-arrow { .template-card-arrow {
flex: 0 0 auto; flex: 0 0 auto;
color: rgba(var(--v-theme-on-surface), 0.42); color: rgba(var(--v-theme-on-surface), 0.42);
transition: color 0.2s ease, transform 0.2s ease; transition:
color 0.2s ease,
transform 0.2s ease;
} }
.notification-template-card:hover .template-card-arrow { .notification-template-card:hover .template-card-arrow {
@@ -661,8 +663,8 @@ useSilentSettingRefresh(loadPageData, {
} }
.notification-template-card { .notification-template-card {
min-block-size: 4.75rem;
padding: 0.875rem; padding: 0.875rem;
min-block-size: 4.75rem;
} }
} }
</style> </style>