From 12b8f09d52d4383225361dbf9079f71f19743cbc Mon Sep 17 00:00:00 2001
From: Yukai Huang <yukaihuangtw@gmail.com>
Date: Wed, 12 Aug 2020 17:21:21 +0800
Subject: [PATCH] Finetune fretboard css

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>
---
 public/js/extra.js                         |  1 +
 public/js/lib/renderer/fretboard/css/i.css | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/js/extra.js b/public/js/extra.js
index 954a161c..9a7c8f8d 100644
--- a/public/js/extra.js
+++ b/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>`)
diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css
index 86e15080..4ce53366 100644
--- a/public/js/lib/renderer/fretboard/css/i.css
+++ b/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;
+}