☰

¿Hay alguna forma de personalizar el CSS de la vista del lector de Firefox?

tag-icon • tag-icon firefox fonts css stylish
¿Hay alguna forma de personalizar el CSS de la vista del lector de Firefox?

Me encanta la vista del lector de Firefox. Pero no sus fuentes. Más específicamente, estas no son las mejores opciones:

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;
}

Prefiero tener esto:

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;
}

Ahora puedo aplicar estos cambios manualmente cada vez que abro la Vista de lector a través de las herramientas de desarrollador. ¿Pero hay alguna manera de automatizar esto?

Probé con Stylish, pero o podía codificarlo correctamente o Stylish no estaba a la altura de la tarea.

Respuesta1

En caso de que aún no hayas podido buscar esto, y/o para la posteridad, a partir de FF v60 la solución es:

  • Localice su carpeta de perfil (enumerada en about:support)
  • Allí, crea una carpeta llamada "chrome" si aún no existe.
  • en esa carpeta, cree un archivo llamado "userContent.css"

Luego necesitarás la regla CSS correcta y listo:

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

NB, también puedes diseñar la barra lateral y sus botones, lo que resulta útil para reducir el contraste de los temas oscuros:

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

información relacionada