Built in Reader and Stylish

[cliffzilla]

Is there a way to use Stylish to adjust the layout in the Firefox built-in reader?
I can inspect the elements I want to adjust, but since the reader deals with every site there's no way to add a specific UR or domain.
I tried having it set to apply to "Everything", but that doesn't work.
Is this even possible?

[morat]

Is it possible to tweak "about:" protocol pages in Firefox Quantum using the Stylish extension? I doubt it.

Try this:

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("about:reader") {
  body {
    background-color: black !important;
    color: white !important;
  }
}

http://kb.mozillazine.org/UserContent.css

Reference...

view-source:about:reader
view-source:chrome://global/content/reader/aboutReader.html

[cliffzilla]

Thanks. I can't seem to find the right selector to do what I want. I'll keep investigating.
I see the area I want to adjust is in a file called aboutReader.css. I can change the file in the Inspector.
When I then save it it asks for a location. Where would this go? The Chrome folder? It deson't seem to exist any where now.

[morat]

Are you editing the aboutReader.css file directly in the developer tools and saving the result to a local file so that the changes persist? I never did that before.

If you wish to tweak test page 1, but not test page 2, then do something like...

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("about:reader?url=https%3A%2F%2Fwww.gnu.org%2Fgnu%2Fgnu.html") {
  body {
    background-color: black !important;
    color: white !important;
  }
  .reader-title {
    color: orange !important;
  }
}

Test page 1
https://www.gnu.org/gnu/gnu.html

Test page 2
https://www.gnu.org/licenses/licenses.html

Reference...

view-source:chrome://global/skin/aboutReader.css