userContent/reader: make reader view adaptive (MR 19)

Picked from MR 20, with lint fixes.
2021-11-29 17:00:33 -05:00 · 2021-11-29 17:00:33 -05:00 · f3bd649619
commit f3bd649619
parent d55bd0431d
1 changed files with 55 additions and 0 deletions
--- a/src/userContent/reader.css
+++ b/src/userContent/reader.css
@ -0,0 +1,55 @@
+/* Copyright 2021 Tim Magee
+ * SPDX-License-Identifier: GPL-3.0-or-later */
+
+@-moz-document url-prefix("about:reader") {
+    @media (max-width: 800px) {
+        .toolbar-container {
+            margin-inline-start: 0px !important;
+            position: fixed !important;
+            top: 0px !important;
+            height: 74px !important;
+            width: 100% !important;
+            left: 0px !important;
+            background-color: rgba(255,255,255,1);
+        }
+
+        .dark .toolbar-container {
+            background-color: rgba(3,3,3,1);
+        }
+
+        .sepia .toolbar-container {
+            background-color: rgba(244,236,216,1);
+        }
+
+        .toolbar {
+            margin-inline-start: unset !important;
+            width: unset !important;
+        }
+
+        .dropdown li {
+            display: inline !important;
+        }
+
+        .dropdown {
+            display: inline;
+        }
+
+        body {
+            padding: 74px 0px !important;
+            margin: 15px 15px 0px !important;
+            --content-width: unset !important;
+        }
+
+        .header > h1 {
+            margin: 10px 0 !important;
+        }
+
+        .header > .meta-data {
+            margin: 0 0 5px !important;
+        }
+
+        .header > .credits {
+            margin: 0 0 5px !important;
+        }
+    }
+}