Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

Inverts images on page

About: Dark Google Calendar (2019) Good rating
edited November 2017 in Style Reviews Chrome
Needs .gb_Lc, .gb_Za in Reverse Inversion filter.

Comments

  • Hey Shem,
    I guess you are talking about the navigation bar. On my side, the images are fine, so I don't see the point of reversing the inversion.

    If you can, please elaborate on that problem and I will see what I can do.

  • I've come across this as well, and have linked a couple of screenshots of, in particular, the user switcher, along with the following tweak which seems to fix this:

    *:before,img {
        filter: invert(100%) hue-rotate(180deg)!important;
    }
    

    Basically, reverse the invert, and re-rotate the hue by another 180deg, which takes it back to normal. (this 100% invert may not be the best as the theme only natively inverts by 90%, though inverting by 90% results in washed out colours)

    Screenshots:
    Before: https://imgur.com/WcpwUgw
    After: https://imgur.com/zpiaVuP

    Hope this helps :)

  • ^^This code works wonders!
  • Thanks @"Aaron Moorley"!

    This is the fix I was looking for.
    I've applied it in the latest update. :)
  • Updated as I realised that the + in the "Create" button (top-left) is also affected by this -

    *:before,img,svg {
        filter:invert(100%) hue-rotate(180deg)!important;
    }
    
  • Right, I think it looks better with the + affected.

    The only downside is the white bar on the left side of the date selection panel that I cannot get rid of.

  • edited January 5 [?]

    No best exlude imgage by :not() - but this should must use similar code too:

    body *:not(img):not(svg) {
        -webkit-filter: invert(90%) hue-rotate(180deg)!important;
        filter: invert(90%) hue-rotate(180deg)!important;
    }
    

    ?

    If unless there is an even greater lags on the page and works in this method.

  • I've already checked that before and it's not so convenient to work with :not selector.
  • Found a solution to the white bar!

    Turns out, each of the date elements in the date picker have a :before with a background colour. The global invert changes it to black, and the :before selector on the fix I posted above was flipping it back to white.

    Updated code is as follows:

    *:not([data-date]):before, img, svg {
        filter: invert(100%) hue-rotate(180deg) brightness(1.1) contrast(105%)!important;
    }
    

    Basically just look for all the :before elements, except the ones in the date picker. Seems to work all right from my (limited) testing :)

  • Thank you, @"Aaron Moorley"!

    It works perfectly.
    I've included the fix in the latest update and as before expressed my gratitude to you in the description.

  • Not a problem at all - glad to be of assistance :)

Sign In or Register to comment.