diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /browser/extensions/webcompat/injections/css | |
parent | Initial commit. (diff) | |
download | firefox-upstream.tar.xz firefox-upstream.zip |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/extensions/webcompat/injections/css')
17 files changed, 226 insertions, 0 deletions
diff --git a/browser/extensions/webcompat/injections/css/bug0000000-testbed-css-injection.css b/browser/extensions/webcompat/injections/css/bug0000000-testbed-css-injection.css new file mode 100644 index 0000000000..1e82ee9722 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug0000000-testbed-css-injection.css @@ -0,0 +1,3 @@ +#css-injection.red { + background-color: #0f0; +} diff --git a/browser/extensions/webcompat/injections/css/bug1561371-mail.google.com-allow-horizontal-scrolling.css b/browser/extensions/webcompat/injections/css/bug1561371-mail.google.com-allow-horizontal-scrolling.css new file mode 100644 index 0000000000..15a7fe1484 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1561371-mail.google.com-allow-horizontal-scrolling.css @@ -0,0 +1,12 @@ +/** + * mail.google.com - The HTML email view does not allow horizontal scrolling + * on Firefox mobile due to a missing CSS rule which is only served to Chrome. + * Bug #1561371 - https://bugzilla.mozilla.org/show_bug.cgi?id=1561371 + * + * HTML emails may sometimes contain content that does not wrap, yet the + * CSS served to Firefox Mobile does not permit scrolling horizontally. + * To prevent this UX frustration, we enable horizontal scrolling. + */ +body > #views { + overflow: auto; +} diff --git a/browser/extensions/webcompat/injections/css/bug1570119-teamcoco.com-scrollbar-width.css b/browser/extensions/webcompat/injections/css/bug1570119-teamcoco.com-scrollbar-width.css new file mode 100644 index 0000000000..7a6c2c07c2 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1570119-teamcoco.com-scrollbar-width.css @@ -0,0 +1,11 @@ +/** + * teamcoco.com - a scrollbar at the top covering navigation menu + * Bug #1570119 - https://bugzilla.mozilla.org/show_bug.cgi?id=1570119 + * + * The scrollbar is covering navigation items making them unusable. + * There are ::-webkit-scrollbar css rules already applied to the scrollbar, + * hiding it in Chrome. Adding the scrollbar-width: none fixes the issue in Firefox. + */ +.css-bdnz85 { + scrollbar-width: none; +} diff --git a/browser/extensions/webcompat/injections/css/bug1570328-developer-apple.com-transform-scale.css b/browser/extensions/webcompat/injections/css/bug1570328-developer-apple.com-transform-scale.css new file mode 100644 index 0000000000..2ffd45a361 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1570328-developer-apple.com-transform-scale.css @@ -0,0 +1,17 @@ +/** + * developer.apple.com - content of the page is shifted to the left + * Bug #1570328 - https://bugzilla.mozilla.org/show_bug.cgi?id=1570328 + * WebCompat issue #4070 - https://webcompat.com/issues/4070 + * + * The site is relying on zoom property which is not supported by Mozilla, + * see https://bugzilla.mozilla.org/show_bug.cgi?id=390936. Adding a combination + * of transform: scale(1.4), transform-origin and width fixes the issue + */ +@media only screen and (min-device-width: 320px) and (max-device-width: 980px), + (min-device-width: 1024px) and (max-device-width: 1024px) and (min-device-height: 1366px) and (max-device-height: 1366px) and (min-width: 320px) and (max-width: 980px) { + #tocContainer { + transform-origin: 0 0; + transform: scale(1.4); + width: 71.4%; + } +} diff --git a/browser/extensions/webcompat/injections/css/bug1575000-apply.lloydsbank.co.uk-radio-buttons-fix.css b/browser/extensions/webcompat/injections/css/bug1575000-apply.lloydsbank.co.uk-radio-buttons-fix.css new file mode 100644 index 0000000000..d6c7e82e26 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1575000-apply.lloydsbank.co.uk-radio-buttons-fix.css @@ -0,0 +1,11 @@ +/** + * apply.lloydsbank.co.uk - radio buttons are misplaced + * Bug #1575000 - https://bugzilla.mozilla.org/show_bug.cgi?id=1575000 + * WebCompat issue #34969 - https://webcompat.com/issues/34969 + * + * Radio buttons are displaced to the left due to positioning issue of ::before + * pseudo element, adding position relative to it's parent fixes the issue. + */ +.radio-content-field .radio.inline label span.text { + position: relative; +} diff --git a/browser/extensions/webcompat/injections/css/bug1605611-maps.google.com-directions-time.css b/browser/extensions/webcompat/injections/css/bug1605611-maps.google.com-directions-time.css new file mode 100644 index 0000000000..c0f4fae1f5 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1605611-maps.google.com-directions-time.css @@ -0,0 +1,24 @@ +/** + * Bug 1605611 - Cannot change Departure/arrival dates in Google Maps on Android + * + * This is step 3 - see injections/js/bug1605611-maps.google.com-directions-time.js. + * Google Maps calls .click() on a datetime-local input element, with the intent + * to show the native date picker. But the native date picker does not appear, + * because that only happens when a user initiated the click. + * To fix the problem of the date picker not appearing in Google Maps, alter the + * styles of the datetime-local input element, to be rendered on top of the + * usual UI (i.e. the icon and date/time text). This allows the user to summon + * the native date picker when they tap on the relevant UI in Google Maps. + */ + +.ml-route-options-picker-content-button + > #ml-route-options-time-selector-time-input { + z-index: 1; /* overrides -5000, to show on top of the icon AND the rendered date */ + opacity: 0; /* let the input element be fully transparent */ + width: 100vw; /* render over the rendered date from Maps' dialog */ + /* position this (absolute) element to fully cover the parent container */ + left: 0; + bottom: 0; + top: 0; + height: 100%; +} diff --git a/browser/extensions/webcompat/injections/css/bug1610016-gaana.com-input-position-fix.css b/browser/extensions/webcompat/injections/css/bug1610016-gaana.com-input-position-fix.css new file mode 100644 index 0000000000..258841fdda --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1610016-gaana.com-input-position-fix.css @@ -0,0 +1,13 @@ +/** + * gaana.com - unable to accept T&C and Privacy Policy + * Bug #1610016 - https://bugzilla.mozilla.org/show_bug.cgi?id=1610016 + * WebCompat issue #29886 - https://webcompat.com/issues/29886 + * + * Unable to click on checkboxes due to input element floating to the right. + * More info https://bugzilla.mozilla.org/show_bug.cgi?id=997189. Adding explicit + * positioning to the input fixes the issue + */ +.agree_btns input { + top: 0; + left: 0; +} diff --git a/browser/extensions/webcompat/injections/css/bug1610344-directv.com.co-hide-unsupported-message.css b/browser/extensions/webcompat/injections/css/bug1610344-directv.com.co-hide-unsupported-message.css new file mode 100644 index 0000000000..80f94aa306 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1610344-directv.com.co-hide-unsupported-message.css @@ -0,0 +1,13 @@ +/** + * directv.com.co - Browser is not supported message + * Bug #1610344 - https://bugzilla.mozilla.org/show_bug.cgi?id=1610344 + * WebCompat issue #41822 - https://webcompat.com/issues/41822 + * + * directv.com.co is showing a "This browser is not supported" message in + * Firefox. Our tests indicated that everything is working just fine, and our + * previous contact attempts have not been successful. This intervention + * hides the large red unsupported banner. + */ +.browser-compatible.compatible.incompatible { + display: none; +} diff --git a/browser/extensions/webcompat/injections/css/bug1644830-missingmail.usps.com-checkboxes-not-visible.css b/browser/extensions/webcompat/injections/css/bug1644830-missingmail.usps.com-checkboxes-not-visible.css new file mode 100644 index 0000000000..191985b691 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1644830-missingmail.usps.com-checkboxes-not-visible.css @@ -0,0 +1,13 @@ +/** + * missingmail.usps.com - Unable to mark the check-boxes from "Disclaimer and + * Terms and Conditions" section + * Bug #1644830 - https://bugzilla.mozilla.org/show_bug.cgi?id=1644830 + * WebCompat issue #53950 - https://webcompat.com/issues/53950 + * + * missingmail.usps.com runs into a case of bug 997189, where an absolutely + * positioned inline-block element with floating siblings is shifter to the + * right, and thus invisible. + */ +.mrc-custom-checkbox-container input { + margin-left: -3rem; +} diff --git a/browser/extensions/webcompat/injections/css/bug1645064-s-kanava.fi-invisible-charts.css b/browser/extensions/webcompat/injections/css/bug1645064-s-kanava.fi-invisible-charts.css new file mode 100644 index 0000000000..d5c348ad25 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1645064-s-kanava.fi-invisible-charts.css @@ -0,0 +1,12 @@ +/** + * s-kanava.fi - The tables carousel is missing + * Bug #1645064 - https://bugzilla.mozilla.org/show_bug.cgi?id=1645064 + * WebCompat issue #53584 - https://webcompat.com/issues/53584 + * + * This site runs into a known Flex issue, see bug 1469649. However, the issue + * is easy to workaround in this case by explicitly specifying the width of + * the flex container. + */ +.carousel .slider-wrapper.axis-horizontal .slider .slide { + max-width: 100%; +} diff --git a/browser/extensions/webcompat/injections/css/bug1651917-teletrader.com.body-transform-origin.css b/browser/extensions/webcompat/injections/css/bug1651917-teletrader.com.body-transform-origin.css new file mode 100644 index 0000000000..e7a44a93d7 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1651917-teletrader.com.body-transform-origin.css @@ -0,0 +1,14 @@ +/** + * teletrader.com - content is shifted down and right + * Bug #1651917 - https://bugzilla.mozilla.org/show_bug.cgi?id=1651917 + * WebCompat issue #55217 - https://webcompat.com/issues/55217 + * + * The content is shifted down and right, because they use webkit prefixes + * for scaling and redefining the origin. Firefox doesn't support + * -webkit-transform-origin-x/y + * This is the object of https://bugzilla.mozilla.org/show_bug.cgi?id=1584881 + * Adding transform-origin: 0 0; to body fixes the issue + */ +body { + transform-origin: 0 0; +} diff --git a/browser/extensions/webcompat/injections/css/bug1653075-livescience.com-scrollbar-width.css b/browser/extensions/webcompat/injections/css/bug1653075-livescience.com-scrollbar-width.css new file mode 100644 index 0000000000..3d7a069676 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1653075-livescience.com-scrollbar-width.css @@ -0,0 +1,14 @@ +/** + * livescience.com - a scrollbar covering navigation menu + * Bug #1653075 - https://bugzilla.mozilla.org/show_bug.cgi?id=1653075 + * + * The scrollbar is covering navigation items and that makes them half hidden. + * There are some ::-webkit-scrollbar css rules applied to the scrollbar, + * making it thinner. Adding similar rules for Firefox fixes the issue. + */ +@media screen and (max-width: 900px) { + .trending-wrapper .trending-items { + scrollbar-width: thin; + scrollbar-color: #f9ae3b #f5f5f5; + } +} diff --git a/browser/extensions/webcompat/injections/css/bug1654865-sports.ndtv.com-float-fix.css b/browser/extensions/webcompat/injections/css/bug1654865-sports.ndtv.com-float-fix.css new file mode 100644 index 0000000000..f9edefb735 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1654865-sports.ndtv.com-float-fix.css @@ -0,0 +1,13 @@ +/** + * sports.ndtv.com - content is of the articles is not displayed + * Bug #1654865 - https://bugzilla.mozilla.org/show_bug.cgi?id=1654865 + * WebCompat issue #55377 - https://webcompat.com/issues/55377 + * + * The content has width:0, due to uncleared float and negative margin combination, + * which is https://bugzilla.mozilla.org/show_bug.cgi?id=1400958 + * Adding clear: both; to the element located above the affected div + * the fixes the issue + */ +.t-brd { + clear: both; +} diff --git a/browser/extensions/webcompat/injections/css/bug1654877-preev.com-moz-appearance-fix.css b/browser/extensions/webcompat/injections/css/bug1654877-preev.com-moz-appearance-fix.css new file mode 100644 index 0000000000..111ec522df --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1654877-preev.com-moz-appearance-fix.css @@ -0,0 +1,15 @@ +/** + * preev.com - typed numbers are not fully visible + * Bug #1654877 - https://bugzilla.mozilla.org/show_bug.cgi?id=1654877 + * WebCompat issue #55099 - https://webcompat.com/issues/55099 + * + * It's hard to see the entered number because the spin button is + * taking too much space. While there is -moz-appearance: textfield, + * -webkit-appearance: none; underneath supersedes it, + * leaving the spin button visible. Adding -moz-appearance: textfield; + * as a separate rule fixes the issue + */ +input[type="number"], +input[type="text"] { + -moz-appearance: textfield; +} diff --git a/browser/extensions/webcompat/injections/css/bug1654907-reactine.ca-hide-unsupported.css b/browser/extensions/webcompat/injections/css/bug1654907-reactine.ca-hide-unsupported.css new file mode 100644 index 0000000000..2893e873ed --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1654907-reactine.ca-hide-unsupported.css @@ -0,0 +1,12 @@ +/** + * reactine.ca - Unsupported browser message + * Bug #1654907 - https://bugzilla.mozilla.org/show_bug.cgi?id=1654907 + * WebCompat issue #55481 - https://webcompat.com/issues/55481 + * + * reactine.ca is showing "Sorry this browser is not supported." + * message if Firefox for Android based on UA detection. Site seems + * to be working fine, so this intervention is to hide this message + */ +#browser-alert { + display: none !important; +} diff --git a/browser/extensions/webcompat/injections/css/bug1655049-dev.to-unclickable-button-fix.css b/browser/extensions/webcompat/injections/css/bug1655049-dev.to-unclickable-button-fix.css new file mode 100644 index 0000000000..2e40f14955 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1655049-dev.to-unclickable-button-fix.css @@ -0,0 +1,12 @@ +/** + * dev.to - not possible to open social buttons menu + * Bug #1655049 - https://bugzilla.mozilla.org/show_bug.cgi?id=1655049 + * WebCompat issue #55782 - https://webcompat.com/issues/55782 + * + * Social buttons menu is not opening due to svg receiving the click + * instead of the button. See https://bugzilla.mozilla.org/show_bug.cgi?id=1654934. + * Adding pointer-events: none to the svg allows to open the menu + */ +#article-show-more-button > * { + pointer-events: none; +} diff --git a/browser/extensions/webcompat/injections/css/bug1666771-zilow-map-overdraw.css b/browser/extensions/webcompat/injections/css/bug1666771-zilow-map-overdraw.css new file mode 100644 index 0000000000..382ed99b50 --- /dev/null +++ b/browser/extensions/webcompat/injections/css/bug1666771-zilow-map-overdraw.css @@ -0,0 +1,17 @@ +/** + * zillow.com - Zillow using massive amounts of memory. + * Bug #1666771 - https://bugzilla.mozilla.org/show_bug.cgi?id=1666771 + * Bug #1662297 - https://bugzilla.mozilla.org/show_bug.cgi?id=1662297 + * + * Zillow's map is using a lot of memory, caused by large amounts of overdraw + * inside the map while rendering object boundaries. Setting `overflow: hidden` + * is a workaround until Zillow addressed this in a more permanent way. + * + * Note that this override is not without side effects: some lines in the map + * may/will be cut off. There is no side-effect free solution to this, and + * not intervening means the browser just freezes. + */ + +.zillow-map-layer svg.full-boundary-svg { + overflow: hidden !important; +} |