css fixes for Firefox reader mode

userContent.css

/*
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
*/

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


.reader-header + hr {
  border-width: 1px;
  color: var(--primary-color);
}

::selection {
  background-color: #333333 !important;
  color: white !important;
}