Finetune fretboard css

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

Author: Yukaii

public/js/extra.js

@@ -502,6 +502,7 @@ export function finishView (view) {
     try {
       const $ele = $(value).parent().parent()
       $ele.html(renderFretBoard($value.text(), params))
+      $ele.addClass('fretboard')
     } catch (err) {
       $value.unwrap()
       $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)

public/js/lib/renderer/fretboard/css/i.css

@@ -1,8 +1,8 @@
 /* -- GENERAL TYPOGRAPHY -- */
 .fretTitle {
   color: #555;
+  text-align: center;
   font-family: "Helvetica Neue", sans-serif;
-  background: #eee;
   line-height: 1.4;
   font-size: 1.6em;
   margin: 10px 0 10px 0;
@@ -20,14 +20,19 @@ section {
 }
 
 /* Fretboard Container/Wrapper */
+
+.fretContainer, .fretContainer_h {
+  outline: solid 1px #eeee;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+
 .fretContainer {
   width: 320px;
-  margin: 0 auto;
 }
 
 .fretContainer_h {
   max-width: 400px;
-  margin: 0 auto;
 }
 
 @media all and (max-width: 400px) {
@@ -59,7 +64,6 @@ section {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
 }
 
 .svg_wrapper.v4 {
@@ -181,3 +185,7 @@ section {
 }
 
 /*# sourceMappingURL=i.css.map */
+
+.markdown-body pre.fretboard {
+  background-color: transparent;
+}