refactor: btn style

src/btn.css

@@ -0,0 +1,46 @@
+div {
+  flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  font-family: 'Open Sans', 'Roboto', 'Helvetica neue', Helvetica, sans-serif;
+}
+
+button {
+  width: 205px !important;
+  height: 38px;
+
+  color: #fff;
+  background: #1f74bd;
+
+  cursor: pointer;
+
+  margin-bottom: 4px;
+  margin-right: 4px;
+  padding: 4px 12px;
+
+  justify-content: start;
+  align-self: center;
+
+  font-size: 16px;
+  border-radius: 2px;
+  border: 0;
+
+  display: inline-flex;
+  position: relative;
+
+  font-family: inherit;
+}
+
+svg {
+  display: inline-block;
+  margin-right: 5px;
+  width: 20px;
+  height: 20px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+span {
+  margin-top: auto;
+  margin-bottom: auto;
+}

src/btn.ts

@@ -1,6 +1,8 @@
 
 import { loadMscore, WebMscore } from './mscore'
 import i18n from './i18n'
+// @ts-ignore
+import btnListCss from './btn.css'
 
 type BtnElement = HTMLButtonElement
 
@@ -85,10 +87,10 @@ export class BtnList {
       : document.createElement('div')
     const shadow = parent.attachShadow({ mode: 'closed' })
 
-    // style the shadow DOM from outside css
+    // style the shadow DOM
-    document.head.querySelectorAll('style').forEach(s => {
+    const style = document.createElement('style')
-      shadow.append(s.cloneNode(true))
+    style.innerText = btnListCss
-    })
+    shadow.append(style)
 
     // hide buttons using the shadow DOM
     const newParent = btnParent.cloneNode(false) as HTMLDivElement