summaryrefslogtreecommitdiffstats
path: root/browser/extensions/webcompat/injections/css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
commit2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
treeb80bf8bf13c3766139fbacc530efd0dd9d54394c /browser/extensions/webcompat/injections/css
parentInitial commit. (diff)
downloadfirefox-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')
-rw-r--r--browser/extensions/webcompat/injections/css/bug0000000-testbed-css-injection.css3
-rw-r--r--browser/extensions/webcompat/injections/css/bug1561371-mail.google.com-allow-horizontal-scrolling.css12
-rw-r--r--browser/extensions/webcompat/injections/css/bug1570119-teamcoco.com-scrollbar-width.css11
-rw-r--r--browser/extensions/webcompat/injections/css/bug1570328-developer-apple.com-transform-scale.css17
-rw-r--r--browser/extensions/webcompat/injections/css/bug1575000-apply.lloydsbank.co.uk-radio-buttons-fix.css11
-rw-r--r--browser/extensions/webcompat/injections/css/bug1605611-maps.google.com-directions-time.css24
-rw-r--r--browser/extensions/webcompat/injections/css/bug1610016-gaana.com-input-position-fix.css13
-rw-r--r--browser/extensions/webcompat/injections/css/bug1610344-directv.com.co-hide-unsupported-message.css13
-rw-r--r--browser/extensions/webcompat/injections/css/bug1644830-missingmail.usps.com-checkboxes-not-visible.css13
-rw-r--r--browser/extensions/webcompat/injections/css/bug1645064-s-kanava.fi-invisible-charts.css12
-rw-r--r--browser/extensions/webcompat/injections/css/bug1651917-teletrader.com.body-transform-origin.css14
-rw-r--r--browser/extensions/webcompat/injections/css/bug1653075-livescience.com-scrollbar-width.css14
-rw-r--r--browser/extensions/webcompat/injections/css/bug1654865-sports.ndtv.com-float-fix.css13
-rw-r--r--browser/extensions/webcompat/injections/css/bug1654877-preev.com-moz-appearance-fix.css15
-rw-r--r--browser/extensions/webcompat/injections/css/bug1654907-reactine.ca-hide-unsupported.css12
-rw-r--r--browser/extensions/webcompat/injections/css/bug1655049-dev.to-unclickable-button-fix.css12
-rw-r--r--browser/extensions/webcompat/injections/css/bug1666771-zilow-map-overdraw.css17
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;
+}