Last active
November 21, 2024 18:33
-
-
Save s-mage/b5ce48a23b04459b168ef3aadd15bfe2 to your computer and use it in GitHub Desktop.
css fixes for Firefox reader mode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
How to apply: | |
* Open about:support in the address bar | |
* Find "Profile Folder" there, open it | |
* Create chrome/userContent.css file there | |
* Put the content of this file there | |
* Open about:config | |
* Enable toolkit.legacyUserProfileCustomizations.stylesheets | |
* Reload the browser | |
Fixes: | |
- [v] Font Family as in settings | |
- [v] Blockquotes | |
- [v] Code blocks | |
- [v] Selection color | |
- [v] The line below header looks sharp | |
- [v] Remove <header> from content | |
*/ | |
.moz-reader-content { font-family: serif; } | |
.moz-reader-content blockquote { | |
border-radius: 0 !important; | |
border-inline-start-color: #717275 !important; | |
} | |
.moz-reader-content blockquote + blockquote { | |
margin-top: calc(8px + var(--line-height) * 0.8) !important; | |
} | |
.moz-reader-content pre code { | |
border: none !important; | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
margin-bottom: 0 !important; | |
font-size: 16px; | |
} | |
/* sometimes it puts code into tables :shrug: */ | |
.moz-reader-content table code, | |
.moz-reader-content table pre { | |
margin: 0 !important; | |
display: table-cell; | |
padding: 0 !important; | |
} | |
/* p inside table almost definitely means code */ | |
.moz-reader-content td div { | |
display: contents; | |
} | |
.moz-reader-content td p { | |
margin-bottom: 0 !important; | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
line-height: 2; | |
} | |
/* <pre> doesn't always come with <code> in it */ | |
.moz-reader-content pre { | |
font-family: monospace !important; | |
font-size: 16px; | |
background: var(--background-color-success); | |
} | |
.reader-header + hr { | |
border-width: 1px; | |
color: var(--primary-color); | |
} | |
/* no header in content */ | |
.moz-reader-content header { | |
display: none; | |
} | |
::selection { | |
background-color: #333333 !important; | |
color: white !important; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment