From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../DSImage/_DSImage.scss                          | 48 ++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss

(limited to 'browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss')

diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss
new file mode 100644
index 0000000000..b11bcdcf55
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss
@@ -0,0 +1,48 @@
+.ds-image {
+  display: block;
+  position: relative;
+  opacity: 0;
+
+  &.use-transition {
+    transition: opacity 0.8s;
+  }
+
+  &.loaded {
+    opacity: 1;
+  }
+
+  img,
+  .placeholder-image,
+  .broken-image {
+    background-color: var(--newtab-element-secondary-color);
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .placeholder-image {
+    overflow: hidden;
+    background-color: var(--placeholderBackgroundColor);
+
+    &::before {
+      content: '';
+      background-image: url('chrome://activity-stream/content/data/content/assets/pocket-swoosh.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      transform: rotate(var(--placeholderBackgroundRotation));
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      // We use margin-left over margin-inline-start on purpose.
+      // This is because we are using it to offset an image's content,
+      // and the image content is the same in ltr and rtl.
+      margin-left: var(--placeholderBackgroundOffsetx); // stylelint-disable-line property-disallowed-list
+      margin-top: var(--placeholderBackgroundOffsety);
+      background-size: var(--placeholderBackgroundScale);
+    }
+  }
+}
-- 
cgit v1.2.3