Bug 980220 - UITour: [Linux] Change the highlight style to have better fallback without an X compositor. r=Unfocused, ui-r=mmaslaney a=sylvestre
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -2228,16 +2228,29 @@ chatbox {
#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
width: 40px;
}
%include ../shared/UITour.inc.css
+#UITourHighlight {
+ /* Below are some fixes for people without an X compositor on Linux.
+ This is why we can't have nice things: */
+ /* Animations don't repaint properly without an X compositor. */
+ animation-name: none !important;
+ /* Opacity rounds to 0 or 1 on Linux without an X compositor so make the
+ background be transparent in that case by having all alpha values < 0.5 */
+ background-image: radial-gradient(50% 100%, rgba(0,149,220,0.3) 50%, rgba(0,149,220,0.49) 100%);
+ /* The highlight isn't anti-aliased without an X compositor so make it thicker.
+ Make it a darker color since we don't have the box-shadow in this case. */
+ border: 4px solid rgb(0,149,220);
+}
+
#UITourTooltipDescription {
font-size: 1.05rem;
}
#UITourTooltipClose {
-moz-margin-end: -4px;
height: 16px;
width: 16px;
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -13,17 +13,19 @@
/* This is a buffer to compensate for the movement in the "wobble" effect */
padding: 4px;
}
#UITourHighlight {
background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
border-radius: 40px;
border: 1px solid white;
- box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
+ /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
+ on Linux without an X compositor where opacity is either 0 or 1. */
+ box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
min-height: 32px;
min-width: 32px;
}
#UITourTooltipBody {
-moz-margin-end: 14px;
}