Merge pull request #854 from vorth/style-link

Support external style overrides for vzome-viewer
vZome · Apr 8, 2024 · 4dbc565 · 4dbc565
2 parents 9875c99 + 323058e
commit 4dbc565
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/online/public/test/vzome-viewer-styles.css b/online/public/test/vzome-viewer-styles.css
@@ -0,0 +1,5 @@
+
+/* .select__listbox {
+  margin-block: 0;
+  padding: 4px;
+} */
diff --git a/online/src/viewer/index.jsx b/online/src/viewer/index.jsx
@@ -177,6 +177,12 @@ const renderViewer = ( workerClient, container, config ) =>
   }
 
   container .appendChild( document.createElement("style") ).textContent = urlViewerCSS;
+  // Apply external override styles to the shadow dom
+  const linkElem = document.createElement("link");
+  linkElem .setAttribute("rel", "stylesheet");
+  linkElem .setAttribute("href", "./vzome-viewer-styles.css");
+  container .appendChild( linkElem );
+
   render( bindComponent, container );
 }
 

diff --git a/online/src/viewer/urlviewer.css.js b/online/src/viewer/urlviewer.css.js
@@ -74,7 +74,8 @@ export const urlViewerCSS = `
 .select__listbox {
   overflow-y: auto;
   max-height: 360px;
-  padding: 8px;
+  margin-block: 0;
+  padding: 4px;
 }
 .select__item {
   font-size: 16px;