diff --git a/components/campaigns/campaign.vue b/components/campaigns/campaign.vue index 065b7e5..fe95ac4 100644 --- a/components/campaigns/campaign.vue +++ b/components/campaigns/campaign.vue @@ -100,18 +100,8 @@ const bannerSrc = (() => { height: 100%; display: flex; box-sizing: border-box; - padding: 4px; /* margin for drop shadow */ justify-content: center; align-items: center; - backdrop-filter: blur(1rem) saturate(70%) brightness(125%); -} - -.dark .campaign-overlay { - backdrop-filter: blur(1rem) saturate(70%) brightness(75%); -} - -.campaign.backdrop .campaign-overlay { - box-shadow: inset 0 0 5px var(--shadow-weak-20); } .campaign-banner { @@ -119,7 +109,21 @@ const bannerSrc = (() => { max-height: 100%; max-width: 100%; object-fit: contain; - filter: drop-shadow(0 0 2px var(--shadow-weak-20)); +} + +.backdrop { + .campaign-overlay { + padding: 4px; /* margin for drop shadow */ + backdrop-filter: blur(1rem) saturate(70%) brightness(125%); + } + + .dark .campaign-overlay { + backdrop-filter: blur(1rem) saturate(70%) brightness(75%); + } + + .campaign-banner { + filter: drop-shadow(0 0 2px var(--shadow-weak-20)); + } } .restricted {