diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss')
-rw-r--r-- | browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss | 48 |
1 files changed, 48 insertions, 0 deletions
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); + } + } +} |