|
|
@@ -70,11 +70,8 @@
|
|
|
|
|
|
/* Avoid adding ID selector rules in this style sheet, since they could
|
|
|
* inadvertently match elements in the article content. */
|
|
|
+
|
|
|
:root {
|
|
|
- --body-padding: 64px;
|
|
|
- --popup-border: rgba(0, 0, 0, 0.12);
|
|
|
- --opaque-popup-border: #e0e0e0;
|
|
|
- --popup-shadow: rgba(49, 49, 49, 0.3);
|
|
|
--grey-90-a10: rgba(12, 12, 13, 0.1);
|
|
|
--grey-90-a20: rgba(12, 12, 13, 0.2);
|
|
|
--grey-90-a30: rgba(12, 12, 13, 0.3);
|
|
|
@@ -83,30 +80,43 @@
|
|
|
--blue-40: #45a1ff;
|
|
|
--blue-40-a30: rgba(69, 161, 255, 0.3);
|
|
|
--blue-60: #0060df;
|
|
|
- --active-color: #0B83FF;
|
|
|
+ --body-padding: 64px;
|
|
|
--font-size: 12;
|
|
|
- --content-width: 30em;
|
|
|
+ --content-width: 70em;
|
|
|
--line-height: 1.6em;
|
|
|
- --tooltip-background: var(--grey-90-a80);
|
|
|
- --tooltip-foreground: white;
|
|
|
- --toolbar-button-hover: var(--grey-90-a10);
|
|
|
- --toolbar-button-active: var(--grey-90-a20);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
--main-background: #fff;
|
|
|
--main-foreground: #333;
|
|
|
+ --font-color: #000000;
|
|
|
+ --primary-color: #0B83FF;
|
|
|
--toolbar-border: var(--grey-90-a20);
|
|
|
+ --toolbar-transparent-border: transparent;
|
|
|
--toolbar-box-shadow: var(--grey-90-a10);
|
|
|
- --popup-button-hover: hsla(0,0%,70%,.4);
|
|
|
- --popup-button-active: hsla(240,5%,5%,.15);
|
|
|
- --popup-bgcolor: white;
|
|
|
- --popup-button: #edecf0;
|
|
|
+ --toolbar-button-background: transparent;
|
|
|
+ --toolbar-button-background-hover: var(--grey-90-a10);
|
|
|
+ --toolbar-button-foreground-hover: var(--font-color);
|
|
|
+ --toolbar-button-background-active: var(--grey-90-a20);
|
|
|
+ --toolbar-button-foreground-active: var(--primary-color);
|
|
|
+ --toolbar-button-border: transparent;
|
|
|
+ --toolbar-button-border-hover: transparent;
|
|
|
+ --toolbar-button-border-active: transparent;
|
|
|
+ --tooltip-background: var(--grey-90-a80);
|
|
|
+ --tooltip-foreground: white;
|
|
|
+ --tooltip-border: transparent;
|
|
|
+ --popup-background: white;
|
|
|
+ --popup-border: rgba(0, 0, 0, 0.12);
|
|
|
+ --opaque-popup-border: #e0e0e0;
|
|
|
+ --popup-line: var(--grey-30);
|
|
|
+ --popup-shadow: rgba(49, 49, 49, 0.3);
|
|
|
+ --popup-button-background: #edecf0;
|
|
|
+ --popup-button-background-hover: hsla(0,0%,70%,.4);
|
|
|
+ --popup-button-foreground-hover: var(--font-color);
|
|
|
+ --popup-button-background-active: hsla(240,5%,5%,.15);
|
|
|
--selected-background: var(--blue-40-a30);
|
|
|
--selected-border: var(--blue-40);
|
|
|
- --popup-line: var(--grey-30);
|
|
|
--font-value-border: var(--grey-30);
|
|
|
- --font-color: #000000;
|
|
|
--icon-fill: #3b3b3c;
|
|
|
--icon-disabled-fill: #8080807F;
|
|
|
--link-foreground: var(--blue-60);
|
|
|
@@ -124,28 +134,67 @@ body.sepia {
|
|
|
body.dark {
|
|
|
--main-background: rgb(28, 27, 34);
|
|
|
--main-foreground: #eee;
|
|
|
+ --font-color: #fff;
|
|
|
--toolbar-border: #4a4a4b;
|
|
|
--toolbar-box-shadow: black;
|
|
|
- --toolbar-button-hover: var(--grey-90-a30);
|
|
|
- --toolbar-button-active: var(--grey-90-a80);
|
|
|
- --popup-button-active: hsla(0,0%,70%,.6);
|
|
|
- --popup-bgcolor: rgb(66,65,77);
|
|
|
- --popup-button: #5c5c61;
|
|
|
+ --toolbar-button-background-hover: var(--grey-90-a30);
|
|
|
+ --toolbar-button-background-active: var(--grey-90-a80);
|
|
|
+ --tooltip-background: black;
|
|
|
+ --tooltip-foreground: white;
|
|
|
+ --popup-background: rgb(66,65,77);
|
|
|
+ --opaque-popup-border: #434146;
|
|
|
--popup-line: rgb(82, 82, 94);
|
|
|
+ --popup-button-background: #5c5c61;
|
|
|
+ --popup-button-background-active: hsla(0,0%,70%,.6);
|
|
|
--selected-background: #3E6D9A;
|
|
|
- --link-foreground: #45a1ff;
|
|
|
- --visited-link-foreground: #e675fd;
|
|
|
- --link-selected-foreground: #fff;
|
|
|
- --opaque-popup-border: #434146;
|
|
|
--font-value-border: #656468;
|
|
|
- --font-color: #fff;
|
|
|
--icon-fill: #fff;
|
|
|
--icon-disabled-fill: #ffffff66;
|
|
|
- --tooltip-background: black;
|
|
|
- --tooltip-foreground: white;
|
|
|
+ --link-foreground: #45a1ff;
|
|
|
+ --link-selected-foreground: #fff;
|
|
|
+ --visited-link-foreground: #e675fd;
|
|
|
/* dark colours */
|
|
|
}
|
|
|
|
|
|
+body.hcm {
|
|
|
+ --main-background: Canvas;
|
|
|
+ --main-foreground: CanvasText;
|
|
|
+ --font-color: CanvasText;
|
|
|
+ --primary-color: SelectedItem;
|
|
|
+ --toolbar-border: CanvasText;
|
|
|
+ /* We need a true transparent but in HCM this would compute to an actual color,
|
|
|
+ so select the page's background color instead: */
|
|
|
+ --toolbar-transparent-border: Canvas;
|
|
|
+ --toolbar-box-shadow: Canvas;
|
|
|
+ --toolbar-button-background: ButtonFace;
|
|
|
+ --toolbar-button-background-hover: ButtonText;
|
|
|
+ --toolbar-button-foreground-hover: ButtonFace;
|
|
|
+ --toolbar-button-background-active: SelectedItem;
|
|
|
+ --toolbar-button-foreground-active: SelectedItemText;
|
|
|
+ --toolbar-button-border: ButtonText;
|
|
|
+ --toolbar-button-border-hover: ButtonText;
|
|
|
+ --toolbar-button-border-active: ButtonText;
|
|
|
+ --tooltip-background: Canvas;
|
|
|
+ --tooltip-foreground: CanvasText;
|
|
|
+ --tooltip-border: CanvasText;
|
|
|
+ --popup-background: Canvas;
|
|
|
+ --popup-border: CanvasText;
|
|
|
+ --opaque-popup-border: CanvasText;
|
|
|
+ --popup-line: CanvasText;
|
|
|
+ --popup-button-background: ButtonFace;
|
|
|
+ --popup-button-background-hover: ButtonText;
|
|
|
+ --popup-button-foreground-hover: ButtonFace;
|
|
|
+ --popup-button-background-active: ButtonText;
|
|
|
+ --selected-background: Canvas;
|
|
|
+ --selected-border: SelectedItem;
|
|
|
+ --font-value-border: CanvasText;
|
|
|
+ --icon-fill: ButtonText;
|
|
|
+ --icon-disabled-fill: GrayText;
|
|
|
+ --link-foreground: LinkText;
|
|
|
+ --link-selected-foreground: ActiveText;
|
|
|
+ --visited-link-foreground: VisitedText;
|
|
|
+}
|
|
|
+
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: var(--body-padding);
|
|
|
@@ -175,13 +224,6 @@ body.serif .remove-button {
|
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
|
}
|
|
|
|
|
|
-.container {
|
|
|
- margin: 0 auto;
|
|
|
- font-size: var(--font-size);
|
|
|
- max-width: var(--content-width);
|
|
|
- line-height: var(--line-height);
|
|
|
-}
|
|
|
-
|
|
|
/* Override some controls and content styles based on color scheme */
|
|
|
|
|
|
body.light > .container > .header > .domain {
|
|
|
@@ -196,10 +238,6 @@ body.dark > .container > .header > .domain {
|
|
|
border-bottom-color: #eeeeee !important;
|
|
|
}
|
|
|
|
|
|
-body.sepia > .container > .footer {
|
|
|
- background-color: #dedad4 !important;
|
|
|
-}
|
|
|
-
|
|
|
body.light blockquote {
|
|
|
border-inline-start: 2px solid #333333 !important;
|
|
|
}
|
|
|
@@ -227,6 +265,24 @@ body.dark blockquote {
|
|
|
background-color: #f4ecd8;
|
|
|
}
|
|
|
|
|
|
+.auto-button {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .auto-button {
|
|
|
+ background-color: #1c1b22;
|
|
|
+ color: #eeeeee;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media not (prefers-color-scheme: dark) {
|
|
|
+ .auto-button {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/* Loading/error message */
|
|
|
|
|
|
.reader-message {
|
|
|
@@ -288,7 +344,7 @@ body.dark blockquote {
|
|
|
text-align: match-parent;
|
|
|
}
|
|
|
|
|
|
-/*======= Controls toolbar =======*/
|
|
|
+/* Controls toolbar */
|
|
|
|
|
|
.toolbar-container {
|
|
|
position: sticky;
|
|
|
@@ -302,7 +358,7 @@ body.dark blockquote {
|
|
|
*/
|
|
|
margin-inline-start: calc(-1 * var(--body-padding));
|
|
|
width: max(var(--body-padding), calc((100% - var(--content-width)) / 2 + var(--body-padding)));
|
|
|
- font-size: var(--font-size); /* Needed to ensure em units match, is reset for .reader-controls */
|
|
|
+ font-size: var(--font-size); /* Needed to ensure 'em' units match, is reset for .reader-controls */
|
|
|
}
|
|
|
|
|
|
.toolbar {
|
|
|
@@ -341,17 +397,17 @@ body.dark blockquote {
|
|
|
transition-duration: 250ms;
|
|
|
}
|
|
|
|
|
|
- .toolbar .button {
|
|
|
+ .toolbar .toolbar-button {
|
|
|
transition-property: opacity;
|
|
|
transition-duration: 250ms;
|
|
|
}
|
|
|
|
|
|
.toolbar-container.scrolled .toolbar:not(:hover, :focus-within) {
|
|
|
- border-color: transparent;
|
|
|
+ border-color: var(--toolbar-transparent-border);
|
|
|
box-shadow: 0 2px 8px transparent;
|
|
|
}
|
|
|
|
|
|
- .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) .button {
|
|
|
+ .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) .toolbar-button {
|
|
|
opacity: 0.6;
|
|
|
}
|
|
|
|
|
|
@@ -361,46 +417,62 @@ body.dark blockquote {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.toolbar-container.overlaps .button {
|
|
|
+.toolbar-container.overlaps .toolbar-button {
|
|
|
opacity: 0.1;
|
|
|
}
|
|
|
|
|
|
.dropdown-open .toolbar {
|
|
|
- border-color: transparent;
|
|
|
+ border-color: var(--toolbar-transparent-border);
|
|
|
box-shadow: 0 2px 8px transparent;
|
|
|
}
|
|
|
|
|
|
.reader-controls {
|
|
|
- /* We use ems above this node to get it to the right size. However,
|
|
|
+ /* We use 'em's above this node to get it to the right size. However,
|
|
|
* the UI inside the toolbar should use a fixed, smaller size. */
|
|
|
font-size: 11px;
|
|
|
}
|
|
|
|
|
|
-.button {
|
|
|
+button {
|
|
|
+ -moz-context-properties: fill;
|
|
|
+ color: var(--font-color);
|
|
|
+ fill: var(--icon-fill);
|
|
|
+}
|
|
|
+
|
|
|
+button:disabled {
|
|
|
+ fill: var(--icon-disabled-fill);
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar button::-moz-focus-inner {
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar-button {
|
|
|
position: relative;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
padding: 0;
|
|
|
- border: none;
|
|
|
+ border: 1px solid var(--toolbar-button-border);
|
|
|
border-radius: 4px;
|
|
|
margin: 4px 0;
|
|
|
- background-color: transparent;
|
|
|
+ background-color: var(--toolbar-button-background);
|
|
|
background-size: 16px 16px;
|
|
|
background-position: center;
|
|
|
background-repeat: no-repeat;
|
|
|
- color: var(--font-color);
|
|
|
}
|
|
|
|
|
|
-.button:hover,
|
|
|
-.button:-moz-focusring {
|
|
|
- background-color: var(--toolbar-button-hover);
|
|
|
+.toolbar-button:hover,
|
|
|
+.toolbar-button:focus-visible {
|
|
|
+ background-color: var(--toolbar-button-background-hover);
|
|
|
+ border-color: var(--toolbar-button-border-hover);
|
|
|
+ fill: var(--toolbar-button-foreground-hover);
|
|
|
}
|
|
|
|
|
|
-.open .button,
|
|
|
-.button:active {
|
|
|
- background-color: var(--toolbar-button-active);
|
|
|
- color: var(--active-color);
|
|
|
- fill: var(--active-color);
|
|
|
+.open .toolbar-button,
|
|
|
+.toolbar-button:hover:active {
|
|
|
+ background-color: var(--toolbar-button-background-active);
|
|
|
+ border-color: var(--toolbar-button-border-active);
|
|
|
+ color: var(--toolbar-button-foreground-active);
|
|
|
+ fill: var(--toolbar-button-foreground-active);
|
|
|
}
|
|
|
|
|
|
.hover-label {
|
|
|
@@ -412,6 +484,7 @@ body.dark blockquote {
|
|
|
background-color: var(--tooltip-background);
|
|
|
color: var(--tooltip-foreground);
|
|
|
padding: 4px 8px;
|
|
|
+ border: 1px solid var(--tooltip-border);
|
|
|
border-radius: 2px;
|
|
|
visibility: hidden;
|
|
|
pointer-events: none;
|
|
|
@@ -420,28 +493,14 @@ body.dark blockquote {
|
|
|
}
|
|
|
|
|
|
/* Show the hover tooltip on non-dropdown buttons. */
|
|
|
-.button:not(.dropdown-toggle):hover > .hover-label,
|
|
|
-.button:not(.dropdown-toggle):-moz-focusring > .hover-label,
|
|
|
+.toolbar-button:not(.dropdown-toggle):hover > .hover-label,
|
|
|
+.toolbar-button:not(.dropdown-toggle):focus-visible > .hover-label,
|
|
|
/* Show the hover tooltip for dropdown buttons unless its dropdown is open. */
|
|
|
:not(.open) > li > .dropdown-toggle:hover > .hover-label,
|
|
|
-:not(.open) > li > .dropdown-toggle:-moz-focusring > .hover-label {
|
|
|
+:not(.open) > li > .dropdown-toggle:focus-visible > .hover-label {
|
|
|
visibility: visible;
|
|
|
}
|
|
|
|
|
|
-button {
|
|
|
- -moz-context-properties: fill;
|
|
|
- color: var(--font-color);
|
|
|
- fill: var(--icon-fill);
|
|
|
-}
|
|
|
-
|
|
|
-button:disabled {
|
|
|
- fill: var(--icon-disabled-fill);
|
|
|
-}
|
|
|
-
|
|
|
-.toolbar button::-moz-focus-inner {
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-
|
|
|
.dropdown {
|
|
|
text-align: center;
|
|
|
list-style: none;
|
|
|
@@ -455,19 +514,18 @@ button:disabled {
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
-/*======= Popup =======*/
|
|
|
+/* Popup */
|
|
|
|
|
|
.dropdown .dropdown-popup {
|
|
|
text-align: start;
|
|
|
position: absolute;
|
|
|
inset-inline-start: 40px;
|
|
|
z-index: 1000;
|
|
|
- background-color: var(--popup-bgcolor);
|
|
|
+ background-color: var(--popup-background);
|
|
|
visibility: hidden;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid var(--popup-border);
|
|
|
- box-shadow: 0 0px 10px 0 var(--popup-shadow);
|
|
|
- border-bottom-width: 0;
|
|
|
+ box-shadow: 0 0 10px 0 var(--popup-shadow);
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
@@ -483,7 +541,7 @@ button:disabled {
|
|
|
background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
|
|
|
display: block;
|
|
|
-moz-context-properties: fill, stroke;
|
|
|
- fill: var(--popup-bgcolor);
|
|
|
+ fill: var(--popup-background);
|
|
|
stroke: var(--opaque-popup-border);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
@@ -497,7 +555,7 @@ button:disabled {
|
|
|
top: 7px;
|
|
|
}
|
|
|
|
|
|
-/*======= Font style popup =======*/
|
|
|
+/* Font style popup */
|
|
|
|
|
|
.radio-button {
|
|
|
/* We visually hide these, but we keep them around so they can be focused
|
|
|
@@ -512,6 +570,8 @@ button:disabled {
|
|
|
.radiorow,
|
|
|
.buttonrow {
|
|
|
display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.content-width-value,
|
|
|
@@ -519,15 +579,15 @@ button:disabled {
|
|
|
.line-height-value {
|
|
|
box-sizing: border-box;
|
|
|
width: 36px;
|
|
|
- height: 15px;
|
|
|
- line-height: 15px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-content: center;
|
|
|
margin: auto;
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid var(--font-value-border);
|
|
|
- background-color: var(--popup-button);
|
|
|
+ background-color: var(--popup-button-background);
|
|
|
}
|
|
|
|
|
|
.buttonrow > button {
|
|
|
@@ -540,12 +600,14 @@ button:disabled {
|
|
|
}
|
|
|
|
|
|
.buttonrow > button:enabled:hover,
|
|
|
-.buttonrow > button:enabled:-moz-focusring {
|
|
|
- background-color: var(--popup-button-hover);
|
|
|
+.buttonrow > button:enabled:focus-visible {
|
|
|
+ background-color: var(--popup-button-background-hover);
|
|
|
+ color: var(--popup-button-foreground-hover);
|
|
|
+ fill: var(--popup-button-foreground-hover);
|
|
|
}
|
|
|
|
|
|
-.buttonrow > button:enabled:active {
|
|
|
- background-color: var(--popup-button-active);
|
|
|
+.buttonrow > button:enabled:hover:active {
|
|
|
+ background-color: var(--popup-button-background-active);
|
|
|
}
|
|
|
|
|
|
.radiorow:not(:last-child),
|
|
|
@@ -553,6 +615,11 @@ button:disabled {
|
|
|
border-bottom: 1px solid var(--popup-line);
|
|
|
}
|
|
|
|
|
|
+body.hcm .buttonrow.line-height-buttons {
|
|
|
+ /* On HCM the .color-scheme-buttons row is hidden, so remove the border from the row above it */
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
.radiorow > label {
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
@@ -570,11 +637,11 @@ button:disabled {
|
|
|
* and give it a width of 100% (the content width) + 4px for the 2 * 2px
|
|
|
* border width.
|
|
|
*/
|
|
|
-.radiorow > input[type=radio]:-moz-focusring + label::after,
|
|
|
+.radiorow > input[type=radio]:focus-visible + label::after,
|
|
|
.radiorow > label:hover::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
- border-bottom: 2px solid var(--blue-40);
|
|
|
+ border-bottom: 2px solid var(--selected-border);
|
|
|
width: calc(100% + 4px);
|
|
|
position: absolute;
|
|
|
/* to skip the 2 * 2px border + 2px spacing. */
|
|
|
@@ -583,26 +650,6 @@ button:disabled {
|
|
|
inset-inline-start: -2px;
|
|
|
}
|
|
|
|
|
|
-.color-scheme-buttons > label {
|
|
|
- height: 34px;
|
|
|
- width: 70px;
|
|
|
- font-size: 12px;
|
|
|
- /* Center the labels horizontally as well as vertically */
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- /* We want 10px between items, but there's no margin collapsing in flexbox. */
|
|
|
- margin: 10px 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.color-scheme-buttons > input:first-child + label {
|
|
|
- margin-inline-start: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.color-scheme-buttons > label:last-child {
|
|
|
- margin-inline-end: 10px;
|
|
|
-}
|
|
|
-
|
|
|
.font-type-buttons > label {
|
|
|
height: 64px;
|
|
|
width: 105px;
|
|
|
@@ -613,7 +660,7 @@ button:disabled {
|
|
|
background-size: 63px 39px;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center 18px;
|
|
|
- background-color: var(--popup-button);
|
|
|
+ background-color: var(--popup-button-background);
|
|
|
fill: currentColor;
|
|
|
-moz-context-properties: fill;
|
|
|
/* This mostly matches baselines, but because of differences in font
|
|
|
@@ -641,10 +688,34 @@ button:disabled {
|
|
|
background-image: url("chrome://global/skin/reader/RM-Serif.svg");
|
|
|
}
|
|
|
|
|
|
-/*======= Toolbar icons =======*/
|
|
|
+body.hcm .color-scheme-buttons {
|
|
|
+ /* Disallow selecting themes when HCM is on. */
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.color-scheme-buttons > label {
|
|
|
+ padding: 12px;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 12px;
|
|
|
+ /* Center the labels horizontally as well as vertically */
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* We want 10px between items, but there's no margin collapsing in flexbox. */
|
|
|
+ margin: 10px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.color-scheme-buttons > input:first-child + label {
|
|
|
+ margin-inline-start: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.color-scheme-buttons > label:last-child {
|
|
|
+ margin-inline-end: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Toolbar icons */
|
|
|
|
|
|
.close-button {
|
|
|
- -moz-context-properties: fill;
|
|
|
background-image: url("chrome://global/skin/icons/close.svg");
|
|
|
}
|
|
|
|
|
|
@@ -694,12 +765,23 @@ button:disabled {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/*======= Article content =======*/
|
|
|
+/* Article content */
|
|
|
|
|
|
/* Note that any class names from the original article that we want to match on
|
|
|
* must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that
|
|
|
* Readability.js doesn't strip them out */
|
|
|
|
|
|
+.container {
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: var(--font-size);
|
|
|
+ max-width: var(--content-width);
|
|
|
+ line-height: var(--line-height);
|
|
|
+}
|
|
|
+
|
|
|
+pre {
|
|
|
+ font-family: inherit;
|
|
|
+}
|
|
|
+
|
|
|
.moz-reader-content {
|
|
|
display: none;
|
|
|
font-size: 1em;
|
|
|
@@ -804,7 +886,6 @@ button:disabled {
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
-.moz-reader-content code,
|
|
|
.moz-reader-content pre {
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
@@ -866,7 +947,7 @@ table {
|
|
|
.moz-reader-content img.emoji {
|
|
|
display: inline-block;
|
|
|
border-width: 0;
|
|
|
- /* height: auto is implied from .moz-reader-content * rule. */
|
|
|
+ /* height: auto is implied from '.moz-reader-content *' rule. */
|
|
|
width: 1em;
|
|
|
margin: 0 .07em;
|
|
|
padding: 0;
|
|
|
@@ -874,6 +955,23 @@ table {
|
|
|
|
|
|
.reader-show-element {
|
|
|
display: initial;
|
|
|
+}
|
|
|
+
|
|
|
+/* Provide extra spacing for images that may be aided with accompanying element such as <figcaption> */
|
|
|
+.moz-reader-block-img:not(:last-child) {
|
|
|
+ margin-block-end: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.moz-reader-wide-table {
|
|
|
+ overflow-x: auto;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+pre code {
|
|
|
+ background-color: var(--main-background);
|
|
|
+ border: 1px solid var(--font-color);
|
|
|
+ display: block;
|
|
|
+ overflow: auto;
|
|
|
}`;
|
|
|
|
|
|
let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
|