Greasy Fork

How to Stop a Code from Blocking Elements in Google

I got a user script code that renders google in a dark background on my Android phone. But it blocks certain elements. For example, when I google "apple store nyc" the code blocks the mini google map and the addresses below the map.

I attached 2 pics showing the userstyle with dark background and another with no userstyle loaded. The code is below also. I think the culprit is: *:not([class*='overlay']). How do I fix this?


// ==UserScript==
// @name DARK
// @author Tommy Smith
// @description
// @version 0.3
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #444444 !important; } a:visited { color: yellow !important;} a { color: aqua !important; };"
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

Is it reproducible? more screenshots, if so.

imho, using * selector in css is not a good idea to use here.

chrome uses a simple <span> html tag to join the image with the map with another image with the positions overlay. using * selector, you set the background-color to the span, hiding both images.

try to replace this line:

css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #444444 !important; } a:visited { color: yellow !important;} a { color: aqua !important; };"

with this one:

css.innerHTML = "*,div.msfi { color: white !important; background-color: transparent!important; } body { background-color: #444444 !important; } a:visited { color: yellow !important;} a { color: aqua !important; };"