Bug 1383660 - Let speech bubble of onboarding icon clickable. r=mossop
MozReview-Commit-ID: Mmq5CZNdre
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -22,45 +22,47 @@
#onboarding-overlay.onboarding-opened {
display: block;
}
#onboarding-overlay-button {
padding: 0;
position: absolute;
cursor: pointer;
- top: 30px;
- offset-inline-start: 30px;
+ top: 34px;
+ offset-inline-start: 34px;
border: none;
/* Set to none so no grey contrast background in the high-contrast mode */
background: none;
}
#onboarding-overlay-button-icon {
width: 36px;
+ vertical-align: top;
}
#onboarding-notification-icon::after,
#onboarding-overlay-button::after {
background: #5ce6e6;
- position: absolute;
font-size: 12px;
border: 1px solid #fff;
text-align: center;
color: #10404a;
box-sizing: content-box;
}
#onboarding-overlay-button::after {
content: attr(aria-label);
- top: -6px;
+ display: inline-block;
offset-inline-start: 39px;
border-radius: 22px;
padding: 5px 8px;
- min-width: 100px;
+ width: 110px;
+ margin-inline-start: 3px;
+ margin-top: -5px;
}
#onboarding-overlay-dialog,
.onboarding-hidden {
display: none;
}
.onboarding-close-btn {
@@ -183,17 +185,16 @@
#onboarding-tour-list > li:hover {
color: #0A84FF;
/* With 1px transparent border, could see a border in the high-constrast mode */
border: 1px solid transparent;
/* Substract 1px for the 1px transparent or a 1px shift would happen */
padding-inline-start: calc(var(--padding-inline-start) - 1px);
padding-top: calc(var(--padding-top) - 1px);
padding-bottom: calc(var(--padding-bottom) - 1px);
- background-color: #fff;
}
/* Default browser tour */
#onboarding-tour-is-default-browser-msg {
font-size: 16px;
line-height: 21px;
float: inline-end;
margin-inline-end: 26px;
@@ -472,16 +473,17 @@
#onboarding-notification-icon:dir(rtl) {
background-position: right 34px center;
}
#onboarding-notification-icon::after {
--height: 22px;
--vpadding: 3px;
+ position: absolute;
content: attr(data-tooltip);
top: 0;
offset-inline-start: 73px;
line-height: calc(var(--height) - var(--vpadding) * 2);
border-radius: calc(var(--height) / 2);
padding: var(--vpadding) 10px;
}