From 30e16841a554f288612e83f67875c5e6fdb76ab6 Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 17 Jun 2022 11:22:18 +0200
Subject: [PATCH] Adjust ad design

---
 ui/scss/component/_ads.scss | 28 ++++++++++++++++++++++++++--
 ui/scss/themes/dark.scss    |  2 +-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss
index 8916f2392..5b5eb9eb0 100644
--- a/ui/scss/component/_ads.scss
+++ b/ui/scss/component/_ads.scss
@@ -324,14 +324,38 @@
 // ****************************************************************************
 
 .OUTBRAIN {
-  border-radius: var(--border-radius) 0 0 0 !important;
+  // border-radius: var(--border-radius) 0 0 0 !important;
   height: unset !important;
+  background-color: var(--color-ads-background);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  padding: var(--spacing-xxs);
 
   .ob-widget .ob-unit.ob-rec-text {
     font-size: 12px !important;
   }
 
-  background-color: var(--color-ads-background);
+  &:not(.banner-ad__container) {
+    border-radius: var(--border-radius) !important;
+    overflow: hidden;
+
+    .ob-rec-image-container {
+      border: unset !important;
+      .ob-rec-image {
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+    }
+    .ob-sub-units {
+      margin-left: 0 !important;
+    }
+
+    .AR_28.ob-widget {
+      .ob-unit.ob-rec-text {
+        font-size: var(--font-xxsmall) !important;
+      }
+    }
+  }
 }
 
 .closeButton {
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index f89ebd7e3..fbebd8a1e 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -152,7 +152,7 @@
   --color-editor-hr-preview: #a0a0a0;
 
   // Ads
-  --color-ads-background: rgba(var(--color-secondary-dynamic), 0.1);
+  --color-ads-background: var(--color-header-background);
   --color-ads-text: var(--color-secondary-contrast);
   --color-ads-link: var(--color-secondary);