_DSContextFooter.scss (1670B)
1 .story-footer { 2 color: var(--newtab-text-secondary-color); 3 inset-inline-start: 0; 4 margin-block-start: var(--space-medium); 5 display: flex; 6 gap: var(--space-large); 7 position: relative; 8 pointer-events: none; 9 10 .story-sponsored-label span { 11 display: inline-block; 12 } 13 14 .story-sponsored-label, 15 .status-message { 16 -webkit-line-clamp: 1; 17 font-size: var(--font-size-small); 18 color: var(--newtab-text-secondary-color); 19 } 20 21 .status-message { 22 display: flex; 23 align-items: center; 24 height: 24px; 25 26 .story-badge-icon { 27 fill: var(--newtab-text-secondary-color); 28 height: 16px; 29 margin-inline-end: var(--space-small); 30 31 &.icon-bookmark-removed { 32 background-image: url('#{$image-path}icon-removed-bookmark.svg'); 33 } 34 } 35 36 .story-context-label { 37 color: var(--newtab-text-secondary-color); 38 flex-grow: 1; 39 font-size: var(--font-size-small); 40 overflow: hidden; 41 text-overflow: ellipsis; 42 white-space: nowrap; 43 } 44 } 45 } 46 47 .story-animate-enter { 48 opacity: 0; 49 } 50 51 .story-animate-enter-active { 52 opacity: 1; 53 transition: opacity 150ms ease-in 300ms; 54 55 .story-badge-icon, 56 .story-context-label { 57 animation: color 3s ease-out 0.3s; 58 59 @keyframes color { 60 0% { 61 color: var(--newtab-status-success); 62 fill: var(--newtab-status-success); 63 } 64 65 100% { 66 color: var(--newtab-text-secondary-color); 67 fill: var(--newtab-text-secondary-color); 68 } 69 } 70 } 71 } 72 73 .story-animate-exit { 74 position: absolute; 75 inset-block-start: 0; 76 opacity: 1; 77 } 78 79 .story-animate-exit-active { 80 opacity: 0; 81 transition: opacity 250ms ease-in; 82 }