search

openstyles / stylus

Stylus - Userstyles Manager
https://add0n.com/stylus.html
GNU General Public License v3.0
5.5k stars 306 forks source link

Styling Wayback Machine's header (aka toolbar) #962

Closed Gitoffthelawn closed 4 years ago

Gitoffthelawn commented 4 years ago

Using Stylus, I have not been able to style the Wayback Machine's header (aka toolbar). My code works fine using Firefox's userContent.css.

Example URL:
https://web.archive.org/web/20200617063000/https://github.com/openstyles/stylus

Example CSS code:

#wm-ipp-base, #wm-ipp, #wm-ipp-inside, #wm-ipp-inside * { 
   background: blue !important;
   color: yellow !important; }
tophf commented 4 years ago

The header's contents is inside shadowDOM, Stylus doesn't support it yet, see #739.

Gitoffthelawn commented 4 years ago

@tophf Thank you!

decembre commented 1 year ago

I can style it with the help of an userscript: ShadowRoot Hook Here in Chrome (i don't see their top banner in Waterfox Classic): WayBackMachine - ShadowDOM - without style - 2022-12-18_143933

And after i style it: WayBakMachine - Shadow DOM - GIF 18-12-2022 14-37-26

As you can see i can remove the top banner. Normally it's not possible to do. I tested to remove it with Ublock Origin: Not possible too. My usertles using it: Web Archive Mini Top ToolBar

Request: It should be possible to have this possibility directly in Stylus (without the need to use an userscript) ? Note: For Shodow DOM, the effect on an edit in stylus is not visible without an refresh of the table..