Bug 1378168 - Ensure overlay notification icon sizing. r=mossop
MozReview-Commit-ID: BNHxuSK2B5R
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -367,28 +367,29 @@
}
#onboarding-notification-icon:dir(rtl) {
background-position: right 34px center;
}
#onboarding-notification-icon::after {
--height: 22px;
+ --vpadding: 3px;
content: attr(data-tooltip);
background: #5ce6e6;
position: absolute;
top: 0;
offset-inline-start: 68px;
color: #10404a;
font-size: 12px;
- min-height: var(--height);
- line-height: var(--height);
+ line-height: calc(var(--height) - var(--vpadding) * 2);
+ max-width: 90px;
border-radius: calc(var(--height) / 2);
border: 1px solid #fff;
- padding: 0 10px;
+ padding: var(--vpadding) 10px;
text-align: center;
}
#onboarding-notification-close-btn {
background-color: rgba(255, 255, 255, 0.97);
border: none;
position: absolute;
offset-block-start: 50%;
@@ -421,17 +422,17 @@
font-size: 13px
}
#onboarding-notification-tour-title {
margin: 0;
}
#onboarding-notification-tour-icon {
- width: 64px;
+ min-width: 64px;
height: 64px;
background-size: 64px;
background-repeat: no-repeat;
}
#onboarding-notification-action-btn {
background: #0d96ff;
border: none;