Add custom scrollbar CSS to embedded lyrics popup

Musish · Aug 1, 2020 · 0fb2fab · 0fb2fab
1 parent 9785523
commit 0fb2fab
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/app/components/Common/Player/Lyrics/Lyrics.tsx b/src/app/components/Common/Player/Lyrics/Lyrics.tsx
@@ -4,15 +4,30 @@ import translate from '../../../../utils/translations/Translations';
 import Loader from '../../Loader/Loader';
 import classes from './LyricsModal.scss';
 
+// It is not possible to assign CSS dynamically by traversing the DOM in Javascript, the iframe's child elements cannot be accessed.
+// It is also not possible to use the embedded content's class-names and assign properties to them in our own CSS files - these will not be applied.
+// Our only option seems to be to compile and enter CSS dynamically into the below variable.
+// Consider: "https://sass-lang.com/documentation/js-api"
 const iframeCss = `
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
 <style>
   body, html {
       margin: 0;
       padding: 0;
       font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
+      scrollbar-color: #d4d4d4 #eee;
   }
   
+  ::-webkit-scrollbar {
+    width: 9px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #eee;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #d4d4d4;
+  }
+
   .rg_embed_body * {
     background: none !important;
     color: #000 !important;