Update foliate-js: use Shadow DOM

Also make header and footer use system UI font
johnfactotum · May 15, 2023 · dde59e2 · dde59e2
1 parent a893796
commit dde59e2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 18 deletions.
diff --git a/src/foliate-js b/src/foliate-js
diff --git a/src/reader/reader.html b/src/reader/reader.html
@@ -14,23 +14,13 @@
     .invert {
         background: #000;
     }
-    .invert .foliate-filter {
+    .invert foliate-view::part(filter) {
         filter: invert(1) hue-rotate(180deg);
     }
 }
-.foliate-header > *, .foliate-footer > * {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-    text-align: center;
-    font-size: .75em;
-    opacity: .6;
-}
-.foliate-header > * > *, .foliate-footer > * > * {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+foliate-view::part(head), foliate-view::part(foot) {
+    font-family: system-ui;
+    font-size: 9pt;
 }
 #ribbon {
     visibility: hidden;

diff --git a/src/reader/reader.js b/src/reader/reader.js
@@ -1,9 +1,7 @@
-import { View } from '../foliate-js/view.js'
+import '../foliate-js/view.js'
 import { Overlayer } from '../foliate-js/overlayer.js'
 import { toPangoMarkup } from './markup.js'
 
-customElements.define('foliate-view', View)
-
 // TODO: make this translatable
 const format = {
     loc: (a, b) => `Loc ${a} of ${b}`,