diff --git a/src/styles/__tests__/glassOverlayMaterial.spec.ts b/src/styles/__tests__/glassOverlayMaterial.spec.ts index eda379ee..d4cffd47 100644 --- a/src/styles/__tests__/glassOverlayMaterial.spec.ts +++ b/src/styles/__tests__/glassOverlayMaterial.spec.ts @@ -107,6 +107,26 @@ describe('glass overlay material styles', () => { expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/) }) + it('keeps media source links and episode group cards on glass material tokens', () => { + const mediaDetail = readFileSync(resolve(cwd(), 'src/views/discover/MediaDetailView.vue'), 'utf8') + const mediaSourceRule = mediaDetail.match( + /\.media-detail-glass \.media-source-link-chip\s*\{(?[\s\S]*?)\n\}/u, + )?.groups?.declarations + const episodeGroupRule = mediaDetail.match( + /\.media-detail-glass \.episode-group-option\s*\{(?[\s\S]*?)\n\}/u, + )?.groups?.declarations + + expect(mediaDetail.match(/media-source-link-chip/g)).toHaveLength(8) + expect(mediaSourceRule).toContain('var(--glass-chip-backdrop-filter)') + expect(mediaSourceRule).toContain('var(--glass-button-surface)') + expect(mediaSourceRule).toContain('var(--glass-chip-sheen)') + expect(mediaSourceRule).toContain('var(--glass-control-shadow)') + expect(episodeGroupRule).toContain('var(--glass-surface-backdrop-filter)') + expect(episodeGroupRule).toContain('var(--glass-surface)') + expect(episodeGroupRule).toContain('var(--glass-sheen)') + expect(episodeGroupRule).toContain('var(--glass-control-shadow)') + }) + it('keeps workflow share gradients as colored glass in every appearance', () => { const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8') const card = readFileSync(resolve(cwd(), 'src/components/cards/WorkflowShareCard.vue'), 'utf8') diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue index 3ce99040..be84e71f 100644 --- a/src/views/discover/MediaDetailView.vue +++ b/src/views/discover/MediaDetailView.vue @@ -942,7 +942,7 @@ onUnmounted(() => { target="_blank" >
TheMovieDb @@ -950,7 +950,7 @@ onUnmounted(() => {
豆瓣 @@ -958,7 +958,7 @@ onUnmounted(() => {
IMDb @@ -966,7 +966,7 @@ onUnmounted(() => {
TheTvDb @@ -979,7 +979,7 @@ onUnmounted(() => { target="_blank" >
Bangumi @@ -992,7 +992,7 @@ onUnmounted(() => { target="_blank" >
AniList @@ -1570,6 +1570,22 @@ a.crew-name { font-weight: 400; } +.media-detail-glass .media-source-link-chip { + border: 1px solid var(--glass-border); + -webkit-backdrop-filter: var(--glass-chip-backdrop-filter); + backdrop-filter: var(--glass-chip-backdrop-filter); + background-color: var(--glass-button-surface); + background-image: var(--glass-chip-sheen); + box-shadow: var(--glass-control-shadow); + color: rgb(var(--v-theme-on-surface)); +} + +.media-detail-glass .media-source-link-chip:hover { + border-color: var(--glass-border-hover); + background-color: var(--glass-button-surface-hover); + box-shadow: var(--glass-control-shadow-hover); +} + .media-status { margin-block-end: 0.5rem; } @@ -1838,6 +1854,30 @@ a.crew-name { background: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5)); } +.media-detail-glass .episode-group-option { + -webkit-backdrop-filter: var(--glass-surface-backdrop-filter); + backdrop-filter: var(--glass-surface-backdrop-filter); + border-color: var(--glass-border); + background-color: var(--glass-surface); + background-image: var(--glass-sheen); + box-shadow: var(--glass-control-shadow); +} + +.media-detail-glass .episode-group-option:hover { + border-color: var(--glass-border-hover); + background-color: var(--glass-surface-soft); + box-shadow: var(--glass-control-shadow-hover); +} + +.media-detail-glass .episode-group-option--active { + border-color: rgba(var(--v-theme-primary), 0.7); + background-color: rgba(var(--v-theme-primary), 0.22); +} + +.media-detail-glass .episode-group-option--active:hover { + background-color: rgba(var(--v-theme-primary), 0.28); +} + @media (width <= 640px) { .episode-group-option { flex-basis: 9.75rem;