☰

Existe uma maneira de personalizar o CSS do Firefox Reader View?

tag-icon • tag-icon firefox fonts css stylish
Existe uma maneira de personalizar o CSS do Firefox Reader View?

Eu adoro o Firefox Reader View. Mas não suas fontes. Mais especificamente, estas não são as melhores escolhas:

body.serif, body.serif .remove-button {
    font-family: Georgia, "Times New Roman", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: Helvetica, Arial, sans-serif;
}

Eu prefiro isso:

body.serif, body.serif .remove-button {
    font-family: "Cambria", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: "Open Sans", "Segoe UI", "Tahoma", "Calibri", sans-serif;
}

Agora posso aplicar essas alterações manualmente sempre que abrir o Reader View por meio das ferramentas do desenvolvedor. Mas existe uma maneira de automatizar isso?

Tentei o Stylish, mas consegui codificá-lo corretamente ou o Stylish não estava à altura da tarefa.

Responder1

Caso você ainda não tenha conseguido descobrir isso, e/ou para a posteridade, a partir do FF v60 a solução é:

  • localize a pasta do seu perfil (listada em about:support)
  • lá dentro, crie uma pasta chamada "chrome" se ela ainda não existir
  • nessa pasta, crie um arquivo chamado "userContent.css"

Então você precisará da regra CSS correta e pronto:

@-moz-document url-prefix("about:reader") {
    body.serif {
        font-family: 'Besley*' !important;
    }
}

Observação: você também pode estilizar a barra lateral e seus botões, o que é útil para reduzir o contraste em temas escuros:

.toolbar {
    background-color: #333 !important;
    border-right: 1px solid #444 !important;
}
.button {
    color: #ccc !important;
    background-color: #444 !important;
}

informação relacionada