Bug 619636 - Chrome scrollbars have 1px black borders on the sides on devices [r=mfinkle]
--- a/mobile/chrome/content/content.css
+++ b/mobile/chrome/content/content.css
@@ -43,79 +43,99 @@
* > *:not(embed):focus, * > *:focus > font {
outline: 2px solid #8db8d8 !important;
/*
XXX How do I preserve mac focusring without blowing focus color on other platforms?
outline-color: -moz-mac-focusring !important;
*/
}
-*:link:focus, *:visited:focus {
+*:-moz-any-link:focus {
outline-offset: -2px;
}
/* Style the scrollbars */
+html xul|scrollbar {
+ display: none;
+}
+
+xul|window xul|scrollbar {
+ display: block;
+}
+
xul|scrollbar[orient="vertical"] {
-moz-appearance: none !important;
opacity: 0;
position: relative;
margin-left: -8px;
min-width: 8px;
background-color: transparent !important;
background-image: none !important;
+ border: 0px solid transparent !important;
+}
+
+xul|scrollbar[orient="vertical"] xul|thumb {
+ max-width: 6px !important;
+ min-width: 6px !important;
}
xul|scrollbar[orient="horizontal"] {
-moz-appearance: none !important;
opacity: 0;
position: relative;
min-height: 8px;
margin-top: -8px;
background-color: transparent !important;
background-image: none !important;
+ border: 0px solid transparent !important;
+}
+
+xul|scrollbar[orient="horizontal"] xul|thumb {
+ max-height: 6px !important;
+ min-height: 6px !important;
}
xul|*[panning="true"] xul|scrollbar {
opacity: 1;
}
-
-xul|scrollbar[orient="vertical"] xul|thumb {
- max-width: 6px !important;
-}
-
-xul|scrollbar[orient="horizontal"] xul|thumb {
- max-height: 6px !important;
-}
-
xul|scrollbox {
overflow-y: scroll;
overflow-x: scroll;
}
xul|scrollbarbutton {
+ min-height: 8px !important;
+ min-width: 8px !important;
-moz-appearance: none !important;
- display: none !important;
+ visibility: hidden;
+}
+
+xul|scrollbarbutton[sbattr="scrollbar-up-top"],
+xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] {
+ display: none;
}
xul|thumb {
background-color: rgba(0, 0, 0, 0.4) !important;
-moz-border-top-colors: none !important;
-moz-border-bottom-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-left-colors: none !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
-moz-border-radius: 3px;
}
select:not([size]):not([multiple]) > xul|scrollbar,
select[size="1"] > xul|scrollbar,
select:not([size]):not([multiple]) xul|scrollbarbutton,
select[size="1"] xul|scrollbarbutton {
- display: block !important;
+ display: block;
+ margin-left: 0;
+ min-width: 16px;
}
/* Override inverse OS themes */
select,
textarea,
button,
xul|button,
* > input:not([type="image"]) {