_WallpaperFeatureHighlight.scss (2119B)
1 // Default overrides from Feature Highlight 2 .wallpaper-feature-highlight { 3 .feature-highlight .feature-highlight-modal { 4 --arrow-size: 24px; 5 6 width: auto; 7 padding: var(--space-large); 8 9 .content-wrapper { 10 margin-block: 0; 11 } 12 13 .message-icon { 14 display: none; 15 } 16 17 &.inset-inline-end { 18 inset-inline-start: 0; 19 20 &::after { 21 inset-inline-start: 0; 22 } 23 } 24 25 &.inset-inline-start { 26 // Bug 1967304 - Large number (64px) 27 inset-inline-end: calc(var(--space-xxlarge) * 2); 28 29 &::after { 30 inset-inline-end: calc(calc(var(--arrow-size) / 2) * -1); 31 } 32 } 33 34 &.inset-block-end { 35 margin-block-start: 0; 36 37 &::after { 38 inset-block-start: 0; 39 } 40 } 41 42 &.inset-block-start { 43 inset-block-end: 0; 44 margin-block-end: calc(-4 * var(--space-xsmall)); // -20px; sit lower on the page 45 46 &::after { 47 // just a nudge (2px) lower than the arrow size to point directly at the Customize icon 48 inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall)); 49 } 50 } 51 52 .title { 53 font-weight: var(--heading-font-weight); 54 margin-block: var(--space-medium); 55 } 56 57 .subtitle { 58 margin-block: 0 var(--space-medium); 59 } 60 61 .button-wrapper { 62 display: block; 63 text-align: end; 64 } 65 66 // Message Arrow Pointer 67 &::after { 68 height: var(--arrow-size); 69 width: var(--arrow-size); 70 box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 15%); 71 pointer-events: none; 72 } 73 74 // The "Dismiss" button in the top right corner of the highlight needs to be in front of the image 75 > moz-button { 76 position: absolute; 77 inset-inline-end: var(--space-large); 78 inset-block-start: var(--space-large); 79 } 80 } 81 82 // Custom override for dismiss-contrast 83 &.is-inverted-dark-dismiss-button { 84 .feature-highlight-modal { 85 @media (prefers-color-scheme: dark) { 86 87 // override color so that it is visible on the image 88 > moz-button { 89 --button-icon-fill: var(--color-gray-70); 90 } 91 } 92 } 93 } 94 }