_DSImage.scss (1393B)
1 .ds-image { 2 display: block; 3 position: relative; 4 opacity: 0; 5 6 &.use-transition { 7 transition: opacity 0.8s; 8 } 9 10 &.loaded { 11 opacity: 1; 12 } 13 14 img, 15 .placeholder-image, 16 .broken-image { 17 background-color: var(--newtab-element-secondary-color); 18 position: absolute; 19 inset-block-start: 0; 20 width: 100%; 21 height: 100%; 22 object-fit: cover; 23 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 24 } 25 26 .placeholder-image { 27 overflow: hidden; 28 background-color: var(--placeholderBackgroundColor); 29 30 &::before { 31 content: ''; 32 background-image: url('chrome://newtab/content/data/content/assets/pocket-swoosh.svg'); 33 background-repeat: no-repeat; 34 background-position: center; 35 transform: rotate(var(--placeholderBackgroundRotation)); 36 position: absolute; 37 inset-block-start: -50%; 38 inset-inline-start: -50%; 39 width: 200%; 40 height: 200%; 41 // We use margin-left over margin-inline-start on purpose. 42 // This is because we are using it to offset an image's content, 43 // and the image content is the same in ltr and rtl. 44 margin-inline-start: var(--placeholderBackgroundOffsetx); // stylelint-disable-line property-disallowed-list 45 margin-block-start: var(--placeholderBackgroundOffsety); 46 background-size: var(--placeholderBackgroundScale); 47 } 48 } 49 }