fix(placeholder): adjust css

spring-media · Apr 19, 2022 · d846e4e · d846e4e
1 parent a67948c
commit d846e4e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 36 deletions.
diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -215,33 +215,18 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 }
 
 @media (min-width: 0) and (max-width: 599.99px) {
-  .a-teaser.embed-placeholder__container {
+  :not(.nobp) .a-teaser.embed-placeholder__container {
     aspect-ratio: auto;
   }
 
-  .embed-placeholder__header {
+  :not(.nobp) .embed-placeholder__header {
     display: none;
   }
 }
 
 @media (max-width: 399.99px) {
-  .quad.embed-placeholder__container {
+  :not(.nobp) .quad.embed-placeholder__container {
     aspect-ratio: auto;
   }
 }
-
-/* workaround nobp class */
-@media (min-width: 1024px) {
-  .a-teaser.embed-placeholder__container {
-    aspect-ratio: 16 / 9;
-  }
-
-  .quad.embed-placeholder__container {
-    aspect-ratio: 1 / 1;
-  }
-
-  .embed-placeholder__header {
-    display: flex;
-  }
-}
 </style>
diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -188,33 +188,18 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 }
 
 @media (min-width: 0) and (max-width: 1023.99px) {
-  .a-teaser > .embed-placeholder__header--pur {
+  :not(.nobp) .a-teaser > .embed-placeholder__header--pur {
     display: none;
   }
 
-  .double-a-teaser > .embed-placeholder__header--pur {
+  :not(.nobp) .double-a-teaser > .embed-placeholder__header--pur {
     display: none;
   }
 }
 
 @media (min-width: 0) and (max-width: 599.99px) {
-  .embed-placeholder__header--pur {
+  :not(.nobp) .embed-placeholder__header--pur {
     display: none;
   }
 }
-
-/* workaround nobp class */
-@media (min-width: 1024px) {
-  .a-teaser > .embed-placeholder__header--pur {
-    display: flex;
-  }
-
-  .double-a-teaser > .embed-placeholder__header--pur {
-    display: flex;
-  }
-
-  .embed-placeholder__header--pur {
-    display: flex;
-  }
-}
 </style>