Customise appearance of Firefox's reader mode

readermode_userContent.css

@-moz-document url-prefix("about:reader") {
    /* 
   Auto-hide reader sidebar (it re-appears only when hovering over it)
   
   source:
   https://www.reddit.com/r/firefox/comments/39tcie/how_do_i_hide_the_sidebar_in_reader_view/cs6dmqb
   */

    .reader-toolbar,.reader-toolbar .button:not(:hover) {
        background-color:transparent !important;
        border:none!important;
    }
    .reader-toolbar:not(:hover)>*:not([open]){
        visibility:hidden;
    }

    /* Make dark background darker */

    body.dark {
        background-color: #080808 !important;
    }

    body {
        text-align: justify;
    }

    /* Would be nice if the color only applied if we were in dark mode, but that's not possible. */
    /* I obtained the dark color by "darkening" Ubuntu's default orange
   scrollbars, to maintain some degree of consistency. */
    html {
        scrollbar-color: #663C2C black; /* #663C2C is orange-ish, but darkened */
        scrollbar-width: thin;
    }
}

screenshot_1.png

screenshot_2_hover_over_toolbar.png

screenshot_3_open_controls.png