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

style(workflow): adapt card headers to material themes

Browse Source
This commit is contained in:
jxxghp
2026-08-04 10:12:32 +08:00
parent 14a4d9dc9c
commit 7e46428721
4 changed files with 102 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/WorkflowTaskCard.vue
+14 -11
View File
@@ -541,6 +541,14 @@ const executionStatus = computed(() => {
.workflow-task-card {
--workflow-status-rgb: var(--v-theme-info);
--workflow-status-on-rgb: var(--v-theme-on-info);
--workflow-card-header-content-rgb: var(--workflow-status-on-rgb);
--workflow-card-header-background: linear-gradient(
118deg,
color-mix(in srgb, rgb(var(--workflow-status-rgb)) 88%, rgb(var(--v-theme-on-surface)) 12%) 0%,
rgb(var(--workflow-status-rgb)) 52%,
color-mix(in srgb, rgb(var(--workflow-status-rgb)) 78%, rgb(var(--v-theme-surface)) 22%) 100%
);
--workflow-card-header-shadow: none;
display: flex;
min-block-size: 226px;
@@ -581,25 +589,20 @@ const executionStatus = computed(() => {
.workflow-task-card__header {
flex: 0 0 auto;
padding: 6px 10px !important;
border-block-end: 1px solid rgba(var(--workflow-status-on-rgb), 0.18);
background: linear-gradient(
118deg,
color-mix(in srgb, rgb(var(--workflow-status-rgb)) 88%, rgb(var(--v-theme-on-surface)) 12%) 0%,
rgb(var(--workflow-status-rgb)) 52%,
color-mix(in srgb, rgb(var(--workflow-status-rgb)) 78%, rgb(var(--v-theme-surface)) 22%) 100%
);
background: var(--workflow-card-header-background);
box-shadow: var(--workflow-card-header-shadow);
}
.workflow-task-card__trigger-icon {
flex: 0 0 auto;
color: rgb(var(--workflow-status-on-rgb)) !important;
color: rgb(var(--workflow-card-header-content-rgb)) !important;
}
.workflow-task-card__title {
display: -webkit-box;
min-inline-size: 0;
overflow: hidden;
color: rgb(var(--workflow-status-on-rgb));
color: rgb(var(--workflow-card-header-content-rgb));
font-weight: 500;
line-height: 20px !important;
letter-spacing: 0;
@@ -613,7 +616,7 @@ const executionStatus = computed(() => {
min-inline-size: 0;
margin-block-start: 1px;
overflow: hidden;
color: rgba(var(--workflow-status-on-rgb), 0.78);
color: rgba(var(--workflow-card-header-content-rgb), 0.78);
font-size: 0.75rem;
letter-spacing: 0;
line-height: 16px !important;
@@ -623,7 +626,7 @@ const executionStatus = computed(() => {
.workflow-task-card__menu {
flex: 0 0 auto;
color: rgb(var(--workflow-status-on-rgb)) !important;
color: rgb(var(--workflow-card-header-content-rgb)) !important;
}
.workflow-task-card__body {
src/components/cards/__tests__/WorkflowTaskCard.spec.ts
+12
View File
@@ -167,6 +167,8 @@ describe('WorkflowTaskCard redesign', () => {
it('derives all custom card colors and geometry from global theme tokens', () => {
const source = readFileSync('src/components/cards/WorkflowTaskCard.vue', 'utf8')
const transparentTheme = readFileSync('src/styles/themes/transparent.scss', 'utf8')
const glassTheme = readFileSync('src/styles/themes/glass.scss', 'utf8')
expect(source).toContain('var(--v-theme-primary)')
expect(source).toContain('var(--v-theme-info)')
@@ -176,6 +178,16 @@ describe('WorkflowTaskCard redesign', () => {
expect(source).toContain('var(--v-theme-on-surface)')
expect(source).toContain('var(--app-control-radius)')
expect(source).toContain('linear-gradient(')
expect(source).toContain('var(--workflow-card-header-background)')
expect(source).not.toContain('--workflow-card-header-border')
expect(source).not.toMatch(/#[\da-f]{3,8}\b/i)
expect(transparentTheme).toContain('.workflow-task-card')
expect(transparentTheme).toContain('var(--transparent-opacity-heavy)')
expect(transparentTheme).not.toContain('--workflow-card-header-border')
expect(glassTheme).toContain('var(--glass-sheen)')
expect(glassTheme).toContain("&[data-glass-appearance='frosted'] .workflow-task-card")
expect(glassTheme).toContain("&[data-glass-appearance='tinted'] .workflow-task-card")
expect(glassTheme).not.toContain('--workflow-card-header-border')
})
})