_ShortcutFeatureHighlight.scss (1418B)
1 // Default overrides from Feature Highlight 2 .shortcut-feature-highlight { 3 .feature-highlight-modal { 4 padding: var(--space-large); 5 width: auto; 6 7 p { 8 margin: 0; 9 padding-block-start: 0; 10 } 11 12 // Make sure the text is legible with dark wallpaper + light mode combo 13 p, p:hover { 14 color: inherit; 15 } 16 17 .message-icon { 18 display: none; 19 } 20 21 &.inset-block-end { 22 margin-block-start: var(--space-large); 23 inset-inline-end: var(--space-xlarge); 24 } 25 26 // The "Dismiss" button in the top right corner of the highlight needs to be in front of the image 27 >moz-button { 28 position: absolute; 29 inset-inline-end: var(--space-large); 30 inset-block-start: var(--space-large); 31 } 32 } 33 34 // Custom override for dismiss-contrast 35 &.is-inverted-dark-dismiss-button { 36 .feature-highlight-modal { 37 @media (prefers-color-scheme: dark) { 38 39 // override color so that it is visible on the image 40 >moz-button { 41 --button-icon-fill: var(--color-gray-70); 42 } 43 } 44 } 45 } 46 47 .shortcut-feature-highlight-content { 48 display: flex; 49 flex-direction: column; 50 gap: var(--space-medium); 51 } 52 53 .shortcut-feature-highlight-copy { 54 font-size: var(--font-size-small); 55 56 .title { 57 font-weight: var(--heading-font-weight); 58 margin-block-end: var(--space-xsmall); 59 text-align: inherit; 60 } 61 } 62 }