From 3c7cdd70cc06b2104f40b795aa9f82e7e518c6f3 Mon Sep 17 00:00:00 2001
From: 16soundsofsilence <henning.flath@t-online.de>
Date: Sun, 9 May 2021 20:10:37 +0200
Subject: [PATCH] Changes to export settings on Windows, outline on macOS,
 headers and more

---
 src/gitbook-azure.css | 2160 +++++++++++++++++++++--------------------
 src/gitbook-slate.css |  160 ++-
 src/gitbook-teal.css  |  179 +++-
 3 files changed, 1367 insertions(+), 1132 deletions(-)
 mode change 100644 => 100755 src/gitbook-azure.css
 mode change 100644 => 100755 src/gitbook-slate.css
 mode change 100644 => 100755 src/gitbook-teal.css

diff --git a/src/gitbook-azure.css b/src/gitbook-azure.css
old mode 100644
new mode 100755
index eb998fa..972fb3b
--- a/src/gitbook-azure.css
+++ b/src/gitbook-azure.css
@@ -1,119 +1,120 @@
-@import "gitbook/fonts.css";
+@import 'gitbook/fonts.css';
 
 /*by 16soundsofsilence, yes this code is an absolute mess*/
 
 :root {
-    --bg-color: white;
-    --side-bar-bg-color: #f5f7f9;
-    --control-text-color: #3b454e;
-    --primary-color: #3884ff;
-    --primary-btn-border-color: #3884ff;
-    --active-file-bg-color: #e6ecf1;
-    --active-file-text-color: inherit;
-    --active-file-border-color: #3884ff;
-    --item-hover-text-color: #242a31;
-    --item-hover-bg-color: #f5f7f9;
-    --window-border: 1px solid #e6ecf1;
-    --select-text-font-color: white;
-    --select-text-bg-color: #1968e6;
-
-    --md-char-color: #9daab6;
-    --heading-char-color: #9daab6;
-    --meta-content-color: #3884ff;
-
-    --borders: #e6ecf1;
-    --table-border-color: #e6ecf1;
-    --boxes: #f5f7f9;
-    --boxes-darker: #d8e0e7;
-    --boxes-darker2: #bac2c9;
-    --boxes-darkest: #9daab6;
-    --drag-placeholder-color: #d8e0e7;
-
-    --text-color: #3b454e;
-    --heading-text-color: #242a31;
-    --light-text-color: #9daab6;
-    --light-text-color-darker: #74818d;
-    --codeboxes: #183055;
-    --codeboxes-lighter: #1c375f;
-    --rawblock-edit-panel-bd: transparent;
-
-    --primary-color-darkest: #001f50;
-    --primary-color-darker2: #00307c;
-    --primary-color-darker: #1968e6;
-    --focus-ring-color: #3884ff;
-
-    --danger-color: rgb(255, 70, 66);
-
-    --node-fill: #ececff;
-    --node-border: #ccccff;
-    --cluster-fill: #ffffde;
-    --cluster-border: #aaaa33;
-    --note-fill: #fff5ad;
-    --note-border: #aaaa33;
-
-    /*****************************/
-
-    --font-family: "Roboto", sans-serif;
-    --code-font-family: "Source Code Pro";
-    --monospace: "Source Code Pro";
+  --bg-color: white;
+  --side-bar-bg-color: #f5f7f9;
+  --control-text-color: #3b454e;
+  --primary-color: #3884ff;
+  --primary-btn-border-color: #3884ff;
+  --active-file-bg-color: #e6ecf1;
+  --active-file-text-color: inherit;
+  --active-file-border-color: #3884ff;
+  --item-hover-text-color: #242a31;
+  --item-hover-bg-color: #f5f7f9;
+  --window-border: 1px solid #e6ecf1;
+  --select-text-font-color: white;
+  --select-text-bg-color: #1968e6;
+
+  --md-char-color: #9daab6;
+  --heading-char-color: #9daab6;
+  --meta-content-color: #3884ff;
+
+  --borders: #e6ecf1;
+  --table-border-color: #e6ecf1;
+  --boxes: #f5f7f9;
+  --boxes-darker: #d8e0e7;
+  --boxes-darker2: #bac2c9;
+  --boxes-darkest: #9daab6;
+  --drag-placeholder-color: #d8e0e7;
+
+  --text-color: #3b454e;
+  --heading-text-color: #242a31;
+  --light-text-color: #9daab6;
+  --light-text-color-darker: #74818d;
+  --codeboxes: #183055;
+  --codeboxes-lighter: #1c375f;
+  --rawblock-edit-panel-bd: transparent;
+
+  --primary-color-darkest: #001f50;
+  --primary-color-darker2: #00307c;
+  --primary-color-darker: #1968e6;
+  --focus-ring-color: #3884ff;
+
+  --danger-color: rgb(255, 70, 66);
+
+  --node-fill: #ececff;
+  --node-border: #ccccff;
+  --cluster-fill: #ffffde;
+  --cluster-border: #aaaa33;
+  --note-fill: #fff5ad;
+  --note-border: #aaaa33;
+
+  /*****************************/
+
+  --font-family: 'Roboto', sans-serif;
+  --code-font-family: 'Source Code Pro';
+  --monospace: 'Source Code Pro';
 }
 
 html,
 .form-control,
 .modal {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 kbd {
-    font-family: var(--font-family);
+  font-family: var(--font-family);
 }
 
 body {
-    background: var(--bg-color);
-    font-family: var(--font-family);
-    font-weight: 400;
-    color: #3b454e;
-    line-height: 1.6rem;
-    height: 100%;
+  background: var(--bg-color);
+  font-family: var(--font-family);
+  font-weight: 400;
+  color: #3b454e;
+  line-height: 1.6rem;
+  height: 100%;
 }
 
 #write {
-    font-size: 0.95rem;
-    max-width: 850px;
-    margin: 0 auto;
-    padding: 30px;
-    padding-bottom: 100px;
-    position: static;
-    width: 100%;
+  font-size: 0.95rem;
+  max-width: 850px;
+  margin: 0 auto;
+  margin-top: 1rem;
+  padding: 30px;
+  padding-bottom: 100px;
+  position: static;
+  width: 100%;
 }
 
 #write > ul:first-child,
 #write > ol:first-child {
-    margin-top: 30px;
+  margin-top: 30px;
 }
 
 a {
-    color: var(--primary-color);
-    text-decoration: none !important;
-    transition-duration: 0.2s;
-    transition-property: color;
+  color: var(--primary-color);
+  text-decoration: none !important;
+  transition-duration: 0.2s;
+  transition-property: color;
 }
 
 a:hover {
-    color: var(--primary-color-darker);
+  color: var(--primary-color-darker);
 }
 
 mark a,
 mark .md-content.md-url {
-    color: var(--primary-color-darker2);
+  color: var(--primary-color-darker2);
 }
 
 mark a:hover {
-    color: var(--primary-color-darkest);
+  color: var(--primary-color-darkest);
 }
 
 .ty-preferences a {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 h1,
@@ -122,9 +123,9 @@ h3,
 h4,
 h5,
 h6 {
-    position: relative;
-    color: var(--heading-text-color);
-    cursor: text;
+  position: relative;
+  color: var(--heading-text-color);
+  cursor: text;
 }
 
 h1:hover a.anchor,
@@ -133,87 +134,87 @@ h3:hover a.anchor,
 h4:hover a.anchor,
 h5:hover a.anchor,
 h6:hover a.anchor {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 h1 tt,
 h1 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h2 tt,
 h2 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h3 tt,
 h3 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h4 tt,
 h4 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h5 tt,
 h5 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h6 tt,
 h6 code {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 h1 {
-    font-size: 1.9rem;
-    font-weight: 700;
-    line-height: 1.5;
-    margin-top: 3rem;
-    margin-bottom: 0.8rem;
-    padding-bottom: 0.2rem;
-    border-bottom: solid 1px var(--borders);
+  font-size: 2.2rem;
+  font-weight: 700;
+  line-height: 1.5;
+  margin-top: 3rem;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.2rem;
+  border-bottom: solid 1px var(--borders);
 }
 
 h2 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    line-height: 1.5;
-    margin-top: 2.5rem;
-    margin-bottom: 0.5rem;
+  font-size: 1.7rem;
+  font-weight: 700;
+  line-height: 1.5;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
 }
 
 h3 {
-    font-size: 1.2rem;
-    font-weight: 700;
-    line-height: 1.5;
-    margin-top: 2rem;
-    margin-bottom: 0.5rem;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 h4 {
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.5;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 h5 {
-    font-size: 0.9rem;
-    font-weight: 700;
-    line-height: 1.5;
-    margin-top: 1.3rem;
-    margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 h6 {
-    font-size: 0.9rem;
-    font-weight: 400;
-    line-height: 1.5;
-    margin-top: 1.3rem;
-    margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 400;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 #write > h1.md-focus:before,
@@ -222,49 +223,49 @@ h6 {
 #write > h4.md-focus:before,
 #write > h5.md-focus:before,
 #write > h6.md-focus:before {
-    color: var(--light-text-color);
-    border: none;
-    position: absolute;
-    font-size: 0.9rem;
-    font-weight: 500;
-    padding: 0px;
-    line-height: 1;
+  color: var(--light-text-color);
+  border: none;
+  position: absolute;
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 0px;
+  line-height: 1;
 }
 
 #write > h1.md-focus:before {
-    content: "h1";
-    top: 1.1rem;
-    left: -1.75rem;
+  content: 'h1';
+  top: 1.15rem;
+  left: -1.75rem;
 }
 
 #write > h2.md-focus:before {
-    content: "h2";
-    top: 0.73rem;
-    left: -1.75rem;
+  content: 'h2';
+  top: 0.75rem;
+  left: -1.75rem;
 }
 
 #write > h3.md-focus:before {
-    content: "h3";
-    top: 0.45rem;
-    left: -1.75rem;
+  content: 'h3';
+  top: 0.575rem;
+  left: -1.75rem;
 }
 
 #write > h4.md-focus:before {
-    content: "h4";
-    top: 0.3rem;
-    left: -1.75rem;
+  content: 'h4';
+  top: 0.4rem;
+  left: -1.75rem;
 }
 
 #write > h5.md-focus:before {
-    content: "h5";
-    top: 0.2rem;
-    left: -1.75rem;
+  content: 'h5';
+  top: 0.25rem;
+  left: -1.75rem;
 }
 
 #write > h6.md-focus:before {
-    content: "h6";
-    top: 0.2rem;
-    left: -1.75rem;
+  content: 'h6';
+  top: 0.25rem;
+  left: -1.75rem;
 }
 
 h1:first-child,
@@ -279,7 +280,7 @@ blockquote h3,
 blockquote h4,
 blockquote h5,
 blockquote h6 {
-    margin-top: 0rem;
+  margin-top: 0rem;
 }
 
 p,
@@ -287,250 +288,250 @@ blockquote,
 ul,
 ol,
 dl {
-    margin: 0.5rem 0rem 1.5rem 0rem;
+  margin: 0.5rem 0rem 1.5rem 0rem;
 }
 
 li > ol,
 li > ul {
-    margin: 0 0;
+  margin: 0 0;
 }
 
 hr {
-    height: 1px;
-    padding: 0;
-    margin: 16px 0;
-    background-color: var(--borders);
-    border: 0 none;
-    overflow: hidden;
-    box-sizing: content-box;
+  height: 1px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: var(--borders);
+  border: 0 none;
+  overflow: hidden;
+  box-sizing: content-box;
 }
 
 li p.first {
-    display: inline-block;
+  display: inline-block;
 }
 
 ul,
 ol {
-    padding-left: 30px;
+  padding-left: 30px;
 }
 
 ul:first-child,
 ol:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 ul:last-child,
 ol:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .md-blockmeta {
-    color: var(--md-char-color);
+  color: var(--md-char-color);
 }
 
 mark {
-    background-color: var(--primary-color);
-    color: white;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.2rem;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.2rem;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 /*BLOCKQUOTE*/
 
 blockquote {
-    width: 100%;
-    background-color: var(--boxes);
-    border-left: 4px solid var(--primary-color);
-    border-radius: 0.3rem;
-    padding: 1rem;
+  width: 100%;
+  background-color: var(--boxes);
+  border-left: 4px solid var(--primary-color);
+  border-radius: 0.3rem;
+  padding: 1rem;
 }
 
 blockquote blockquote {
-    padding-right: 0;
+  padding-right: 0;
 }
 
 /*TABLE*/
 
 table {
-    font-size: 0.875rem;
-    padding: 0;
-    margin: 1.5rem 0;
-    word-break: initial;
+  font-size: 0.875rem;
+  padding: 0;
+  margin: 1.5rem 0;
+  word-break: initial;
 }
 
 table tr {
-    border-top: 1px solid var(--borders);
-    border-bottom: 1px solid var(--borders);
-    margin: 0;
-    padding: 0;
+  border-top: 1px solid var(--borders);
+  border-bottom: 1px solid var(--borders);
+  margin: 0;
+  padding: 0;
 }
 
 table tr.md-end-block {
-    border-top: none;
+  border-top: none;
 }
 
 table tbody tr:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 table tr th {
-    font-weight: bold;
-    border: none;
-    border-bottom: solid 2px var(--borders);
-    margin: 0;
-    padding: 10px 16px;
-    transition-duration: 0.3s;
-    transition-property: background-color;
+  font-weight: bold;
+  border: none;
+  border-bottom: solid 2px var(--borders);
+  margin: 0;
+  padding: 10px 16px;
+  transition-duration: 0.3s;
+  transition-property: background-color;
 }
 
 table tr td {
-    border: none;
-    margin: 0;
-    padding: 10px 16px;
-    transition-duration: 0.3s;
-    transition-property: background-color;
+  border: none;
+  margin: 0;
+  padding: 10px 16px;
+  transition-duration: 0.3s;
+  transition-property: background-color;
 }
 
 #write table tr td:hover,
 #write table tr th:hover {
-    background-color: var(--boxes);
+  background-color: var(--boxes);
 }
 
 table tr th:first-child,
 table tr td:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 table tr th:last-child,
 table tr td:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 /*OTHER TABLE THINGS*/
 
 .ty-table-edit {
-    background-color: var(--boxes);
-    padding: 0.3rem;
-    border-radius: 0.3rem;
-    box-shadow: none;
-    transform: translateY(2.5rem);
-    transition-duration: 0.3s;
-    transition-property: opacity;
+  background-color: var(--boxes);
+  padding: 0.3rem;
+  border-radius: 0.3rem;
+  box-shadow: none;
+  transform: translateY(2.5rem);
+  transition-duration: 0.3s;
+  transition-property: opacity;
 }
 
 .ty-table-edit + .md-table {
-    margin-top: 3rem;
+  margin-top: 3rem;
 }
 
 .ty-table-edit:active,
 .ty-table-edit:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .popover,
 .popover:active,
 .popover:focus {
-    border: solid 1px var(--borders);
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-    border-radius: 0.3rem;
+  border: solid 1px var(--borders);
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  border-radius: 0.3rem;
 }
 
 .popover .arrow {
-    border-bottom-color: var(--borders);
+  border-bottom-color: var(--borders);
 }
 
 .md-grid-board a {
-    background-color: transparent;
-    border-color: var(--borders);
-    border-radius: 2px;
+  background-color: transparent;
+  border-color: var(--borders);
+  border-radius: 2px;
 }
 
 .md-grid-board .md-grid-ext {
-    background-color: var(--borders);
-    border-radius: 2px;
+  background-color: var(--borders);
+  border-radius: 2px;
 }
 
-.md-grid-board tr[row="1"] .md-grid-ext {
-    background: none;
-    border-radius: 6px;
+.md-grid-board tr[row='1'] .md-grid-ext {
+  background: none;
+  border-radius: 6px;
 }
 
-.md-grid-board tr[row="1"] .md-grid-ext a {
-    background-color: var(--boxes-darker2);
-    border-color: var(--boxes-darker2);
+.md-grid-board tr[row='1'] .md-grid-ext a {
+  background-color: var(--boxes-darker2);
+  border-color: var(--boxes-darker2);
 }
 
-.md-grid-board tr[row="1"] td {
-    background-color: var(--bg-color);
-    border-color: var(--borders);
+.md-grid-board tr[row='1'] td {
+  background-color: var(--bg-color);
+  border-color: var(--borders);
 }
 
 .md-grid-board a.md-active,
 .md-grid-board a:hover {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 
-.md-grid-board tr[row="1"] a.md-active,
-.md-grid-board tr[row="1"] a:hover {
-    background-color: var(--primary-color-darker);
-    border-color: var(--primary-color-darker);
+.md-grid-board tr[row='1'] a.md-active,
+.md-grid-board tr[row='1'] a:hover {
+  background-color: var(--primary-color-darker);
+  border-color: var(--primary-color-darker);
 }
 
 #md-grid-width,
 #md-grid-height {
-    border-radius: 0.3rem;
-    border-color: var(--borders);
-    transition-duration: 0.3s;
-    transition-property: border-color;
+  border-radius: 0.3rem;
+  border-color: var(--borders);
+  transition-duration: 0.3s;
+  transition-property: border-color;
 }
 
 #md-grid-width:focus,
 #md-grid-height:focus {
-    border-radius: 0.3rem;
-    border-color: var(--primary-color);
+  border-radius: 0.3rem;
+  border-color: var(--primary-color);
 }
 
 /*CODE*/
 
 .CodeMirror {
-    padding: 1rem;
-    font-family: "Source Code Pro", monospace;
+  padding: 1rem;
+  font-family: 'Source Code Pro', monospace;
 }
 
 .cm-s-inner .CodeMirror-gutters {
-    background-color: none;
-    border-right: none;
-    border-radius: 0px;
-    width: 2rem;
-    color: white;
-    height: 100%;
-    white-space: nowrap;
+  background-color: none;
+  border-right: none;
+  border-radius: 0px;
+  width: 2rem;
+  color: white;
+  height: 100%;
+  white-space: nowrap;
 }
 
 .cm-s-inner .CodeMirror-gutter-wrapper {
-    left: -2.75rem !important;
+  left: -2.75rem !important;
 }
 
 .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
-    border-left: solid 2px var(--light-text-color-darker);
+  border-left: solid 2px var(--light-text-color-darker);
 }
 
 .CodeMirror.cm-s-typora-default .CodeMirror-activeline-background {
-    background-color: var(--codeboxes-lighter);
+  background-color: var(--codeboxes-lighter);
 }
 
 .cm-s-inner .CodeMirror-cursor {
-    color: white;
-    border-left: solid 1px white;
+  color: white;
+  border-left: solid 1px white;
 }
 
 .CodeMirror-linenumber {
-    color: var(--bg-color);
-    opacity: 0.6;
-    width: 1.9532rem !important /*required*/;
+  color: var(--bg-color);
+  opacity: 0.6;
+  width: 1.9532rem !important /*required*/;
 }
 
 .cm-s-inner .CodeMirror-line::selection,
@@ -539,1074 +540,1095 @@ table tr td:last-child {
 .cm-s-inner .CodeMirror-line > span::-moz-selection,
 .cm-s-inner .CodeMirror-line > span > span::selection,
 .cm-s-inner .CodeMirror-line > span > span::-moz-selection {
-    background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .cm-error {
-    color: var(--danger-color);
+  color: var(--danger-color);
 }
 
 .cm-s-inner span.cm-comment,
 .cm-s-typora-default span.cm-comment,
 .cm-s-typora-default span.cm-code {
-    color: #9daab6;
+  color: #9daab6;
 }
 
 .cm-s-inner span.cm-string,
 .cm-s-inner span.cm-string-2 {
-    color: #71a7ff;
+  color: #71a7ff;
 }
 
 .cm-s-inner span.cm-number {
-    color: #ff9d3d;
+  color: #ff9d3d;
 }
 
 .cm-s-inner span.cm-variable,
 .cm-s-inner span.cm-variable-2 {
-    color: white;
+  color: white;
 }
 
 .cm-s-inner span.cm-def {
-    color: white;
+  color: white;
 }
 
 .cm-s-inner span.cm-operator {
-    color: #ff9d3d;
+  color: #ff9d3d;
 }
 
 .cm-s-inner span.cm-keyword {
-    color: #61e3a5;
+  color: #61e3a5;
 }
 
 .cm-s-inner span.cm-atom {
-    color: #bd93f9;
+  color: #bd93f9;
 }
 
 .cm-s-inner span.cm-meta {
-    color: #f8f8f2;
+  color: #f8f8f2;
 }
 
 .cm-s-inner span.cm-link,
 .cm-s-typora-default .cm-link {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .cm-s-inner span.cm-tag,
 .cm-s-inner .cm-header {
-    color: #b4f6d6;
+  color: #b4f6d6;
 }
 
 .cm-s-inner span.cm-attribute {
-    color: #ff9d3d;
+  color: #ff9d3d;
 }
 
 .cm-s-inner span.cm-qualifier,
 .cm-s-inner span.cm-type,
 .cm-s-inner span.cm-variable-3 {
-    color: #82ee9d;
+  color: #82ee9d;
 }
 
 .cm-s-inner span.cm-property {
-    color: #ffd6ad;
+  color: #ffd6ad;
 }
 
 .cm-s-inner span.cm-builtin {
-    color: #8ffaaa;
+  color: #8ffaaa;
 }
 
 .md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
-    background: none;
+  background: none;
 }
 
 .cm-s-inner .CodeMirror-selected,
 .cm-s-inner .CodeMirror-selectedtext {
-    background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .cm-s-typora-default .cm-header,
 .cm-s-typora-default .cm-property {
-    color: white;
-    font-weight: 400;
+  color: white;
+  font-weight: 400;
 }
 
 .md-fences .code-tooltip {
-    box-shadow: rgba(116, 129, 141, 0.08) 0px 2px 6px 0px;
-    border: solid 1px var(--borders);
-    border-radius: 0.3rem;
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    width: 15rem;
-    height: 2.5rem;
-    bottom: -3rem;
-    padding: 0.1875rem;
+  box-shadow: rgba(116, 129, 141, 0.08) 0px 2px 6px 0px;
+  border: solid 1px var(--borders);
+  border-radius: 0.3rem;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  width: 15rem;
+  height: 2.5rem;
+  bottom: -3rem;
+  padding: 0.1875rem;
 }
 
 .md-fences .code-tooltip .ty-input {
-    border: solid 1px var(--borders);
-    height: 2rem;
-    line-height: 2rem;
-    margin: 0rem;
-    padding-left: 0.5rem !important;
-    text-align: left;
-    display: block;
-    font-size: 0.8rem;
-    font-weight: 600;
-    font-family: var(--font-family);
-    transition-duration: 0.3s;
-    transition-property: border;
+  border: solid 1px var(--borders);
+  height: 2rem;
+  line-height: 2rem;
+  margin: 0rem;
+  padding-left: 0.5rem !important;
+  text-align: left;
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  font-family: var(--font-family);
+  transition-duration: 0.3s;
+  transition-property: border;
 }
 
 .md-fences .code-tooltip .ty-input:focus {
-    border-color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 
 .html-for-mac .ty-cm-lang-input:empty:after {
-    left: 0.5rem;
+  left: 0.5rem;
 }
 
 .autoComplt-list li,
 .fences-auto-suggest li {
-    font-weight: 500;
-    transition-duration: 0.3s;
-    transition-property: background-color, color;
+  font-weight: 500;
+  transition-duration: 0.3s;
+  transition-property: background-color, color;
 }
 
 .autoComplt-list li.active,
 .fences-auto-suggest li:hover {
-    background-color: var(--boxes);
-    color: var(--primary-color);
+  background-color: var(--boxes);
+  color: var(--primary-color);
 }
 
 .md-fences,
 tt {
-    border-radius: 0.3rem;
-    color: white;
-    padding: 1.5rem;
-    font-size: 0.8rem;
+  border-radius: 0.3rem;
+  color: white;
+  padding: 1.5rem;
+  font-size: 0.8rem;
 }
 
 code {
-    padding: 0.2rem 0.4rem;
-    background-color: var(--borders);
-    font-size: 0.9rem;
-    border-radius: 0.2rem;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
+  padding: 0.2rem 0.4rem;
+  background-color: var(--borders);
+  font-size: 0.9rem;
+  border-radius: 0.2rem;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 .md-fences div.CodeMirror-cursor,
 #typora-source div.CodeMirror-cursor {
-    border-left: solid 1px white;
+  border-left: solid 1px white;
 }
 
 .md-fences {
-    margin-bottom: 1.5rem;
-    margin-top: 1.5rem;
-    padding-top: 8px;
-    padding-bottom: 6px;
-    background-color: var(--codeboxes);
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
+  padding-top: 8px;
+  padding-bottom: 6px;
+  background-color: var(--codeboxes);
 }
 
 #typora-source {
-    background-color: var(--codeboxes);
-    color: white;
-    font-size: 0.9rem;
+  background-color: var(--codeboxes);
+  color: white;
+  font-size: 0.9rem;
 }
 
 /*DIAGRAMS*/
 
 .md-diagram-panel {
-    color: var(--text-color);
-    border: solid 1px var(--borders);
-    border-radius: 0.3rem;
+  color: var(--text-color);
+  border: solid 1px var(--borders);
+  border-radius: 0.3rem;
 }
 
 .md-diagram-panel text,
 .md-diagram-panel .label {
-    color: var(--text-color);
+  color: var(--text-color);
 }
 
 .md-diagram-panel text {
-    fill: var(--text-color) !important /*required*/;
+  fill: var(--text-color) !important /*required*/;
 }
 
 .md-diagram-panel-error {
-    color: var(--danger-color);
+  color: var(--danger-color);
 }
 
 /*CHECKBOXES*/
 
 .md-task-list-item > input:before,
-input[type="checkbox"]:before {
-    border-radius: 0.2rem;
-    margin-top: -0.08rem;
-    margin-left: -0.1rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--borders);
-    content: " ";
-    display: block;
-    transition-duration: 0.3s;
-    transition-property: background-color;
+input[type='checkbox']:before {
+  border-radius: 0.2rem;
+  margin-top: -0.08rem;
+  margin-left: -0.1rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--borders);
+  content: ' ';
+  display: block;
+  transition-duration: 0.3s;
+  transition-property: background-color;
 }
 
 .md-task-list-item:hover > input:before,
-input[type="checkbox"]:hover:before {
-    background-color: var(--boxes-darker);
+input[type='checkbox']:hover:before {
+  background-color: var(--boxes-darker);
 }
 
 .md-task-list-item > input:checked:before,
 .md-task-list-item > input[checked]:before,
-input[type="checkbox"]:checked:before {
-    background-color: var(--primary-color);
+input[type='checkbox']:checked:before {
+  background-color: var(--primary-color);
 }
 
 .md-task-list-item:hover > input:checked:before,
 .md-task-list-item:hover > input[checked]:before,
-input[type="checkbox"]:hover:checked:before {
-    background-color: var(--primary-color-darker);
+input[type='checkbox']:hover:checked:before {
+  background-color: var(--primary-color-darker);
 }
 
 .md-task-list-item > input:after,
 .md-task-list-item > input:after,
-input[type="checkbox"]:after {
-    transform: rotate(-45deg);
-    position: absolute;
-    border: 2px solid white;
-    border-top: 0;
-    border-right: 0;
-    top: 0.16rem;
-    left: 0.1rem;
-    width: 0.6rem;
-    height: 0.375rem;
-    content: " ";
-    opacity: 0;
-    transition-duration: 0.3s;
-    transition-property: opacity;
+input[type='checkbox']:after {
+  transform: rotate(-45deg);
+  position: absolute;
+  border: 2px solid white;
+  border-top: 0;
+  border-right: 0;
+  top: 0.16rem;
+  left: 0.1rem;
+  width: 0.6rem;
+  height: 0.375rem;
+  content: ' ';
+  opacity: 0;
+  transition-duration: 0.3s;
+  transition-property: opacity;
 }
 
 .md-task-list-item > input:checked:after,
 .md-task-list-item > input[checked]:after,
-input[type="checkbox"]:checked:after {
-    opacity: 1;
+input[type='checkbox']:checked:after {
+  opacity: 1;
 }
 
-.ty-preferences input[type="checkbox"]:before {
-    width: 1.2rem;
-    height: 1.2rem;
+.ty-preferences input[type='checkbox']:before {
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
-.ty-preferences input[type="checkbox"]:after {
-    width: 0.5rem;
-    height: 0.32rem;
-    top: 0.19rem;
-    left: 0.14rem;
+.ty-preferences input[type='checkbox']:after {
+  width: 0.5rem;
+  height: 0.32rem;
+  top: 0.19rem;
+  left: 0.14rem;
 }
 
 @media print {
-    html {
-        font-size: 13px;
-    }
+  html {
+    font-size: 13px;
+  }
 
-    table,
-    pre {
-        page-break-inside: avoid;
-    }
+  table,
+  pre {
+    page-break-inside: avoid;
+  }
 
-    pre {
-        word-wrap: break-word;
-    }
+  pre {
+    word-wrap: break-word;
+  }
 }
 
 #write pre.md-meta-block {
-    padding: 1rem;
-    line-height: 1.45;
-    background-color: var(--boxes);
-    border: 0;
-    border-radius: 0.3rem;
-    color: var(--text-color);
-    border-left: solid 4px var(--boxes-darkest);
+  padding: 1rem;
+  line-height: 1.45;
+  background-color: var(--boxes);
+  border: 0;
+  border-radius: 0.3rem;
+  color: var(--text-color);
+  border-left: solid 4px var(--boxes-darkest);
 }
 
 #write pre.md-meta-block:empty:before {
-    color: var(--light-text-color);
+  color: var(--light-text-color);
 }
 
 .md-image > .md-meta {
-    border-radius: 3px;
-    padding: 2px 0px 0px 4px;
-    font-size: 0.9em;
-    color: inherit;
+  border-radius: 3px;
+  padding: 2px 0px 0px 4px;
+  font-size: 0.9em;
+  color: inherit;
 }
 
 .md-tag {
-    color: var(--md-char-color);
-    opacity: 1;
+  color: var(--md-char-color);
+  opacity: 1;
 }
 
 /*TOC*/
 
 .md-toc {
-    margin: 1.5rem 0rem;
+  margin: 1.5rem 0rem;
 }
 
 .md-toc:focus .md-toc-content {
-    border: none;
+  border: none;
 }
 
 #write div.md-toc-tooltip {
-    background-color: var(--boxes);
-    line-height: 1.6rem;
-    padding: 0.3rem 0.75rem;
-    border-top: none;
-    border-radius: 0.3rem;
+  background-color: var(--boxes);
+  line-height: 1.6rem;
+  padding: 0.3rem 0.75rem;
+  border-top: none;
+  border-radius: 0.3rem;
 }
 
 .md-toc.md-focus {
-    margin-top: 4.5rem;
+  margin-top: 4.5rem;
 }
 
 #write div.md-toc-tooltip + .md-toc-content {
-    padding-top: 1rem;
+  padding-top: 1rem;
 }
 
 .md-delete-toc {
-    padding: 0px;
+  padding: 0px;
 }
 
 /*MATH*/
 
 .md-rawblock-container {
-    padding: 1rem;
-    border-radius: 0.3rem;
-    cursor: pointer;
-    transition-duration: 0.2s;
+  padding: 1rem;
+  border-radius: 0.3rem;
+  cursor: pointer;
+  transition-duration: 0.2s;
 }
 
 .md-rawblock:hover .md-rawblock-container {
-    background-color: var(--boxes);
+  background-color: var(--boxes);
 }
 
 .md-rawblock:active .md-rawblock-container {
-    background-color: var(--boxes-darker);
+  background-color: var(--boxes-darker);
 }
 
 .MathJax_SVG:focus {
-    outline: none;
+  outline: none;
 }
 
 .md-rawblock-panel,
 .md-rawblock-control:not(.md-rawblock-tooltip) {
-    border-radius: 0.3rem;
-    background-color: var(--boxes);
+  border-radius: 0.3rem;
+  background-color: var(--boxes);
 }
 
 .md-rawblock-panel .code-tooltip {
-    box-shadow: none;
-    border-bottom-left-radius: 0.3rem;
-    border-bottom-right-radius: 0.3rem;
+  box-shadow: none;
+  border-bottom-left-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
 }
 
 .md-rawblock-panel .CodeMirror-linenumber {
-    color: var(--light-text-color);
-    opacity: 1;
+  color: var(--light-text-color);
+  opacity: 1;
 }
 
 .md-rawblock-panel .CodeMirror div.CodeMirror-cursor {
-    border-left: solid 1px var(--text-color);
+  border-left: solid 1px var(--text-color);
 }
 
 .md-mathblock-panel .md-mathjax-preview,
 .mathjax-candidate {
-    border-top: solid 1px var(--borders);
+  border-top: solid 1px var(--borders);
 }
 
 .md-rawblock-after,
 .md-rawblock-before {
-    cursor: default;
-    color: var(--light-text-color);
-    user-select: none;
-    -webkit-user-select: none;
+  cursor: default;
+  color: var(--light-text-color);
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .md-rawblock-tooltip-name {
-    font-size: 13px;
-    color: var(--light-text-color);
-    opacity: 1;
+  font-size: 13px;
+  color: var(--light-text-color);
+  opacity: 1;
 }
 
 .md-rawblock-on-edit > .md-rawblock-tooltip {
-    padding-right: 0px;
+  padding-right: 0px;
 }
 
 .md-rawblock-input span.cm-tag {
-    color: #0bb6ad;
+  color: #0bb6ad;
 }
 
 .md-rawblock-input span.cm-atom,
 .md-inline-math script {
-    color: #b61ed4;
+  color: #b61ed4;
 }
 
 .md-rawblock-input span.cm-number {
-    color: #ec7200;
+  color: #ec7200;
 }
 
 .md-rawblock-input span.cm-keyword {
-    color: #156db6;
+  color: #156db6;
 }
 
 .md-rawblock-input span.cm-bracket {
-    color: var(--light-text-color);
+  color: var(--light-text-color);
 }
 
 #math-inline-preview.code-tooltip {
-    border-radius: 0.3rem;
-    background-color: var(--bg-color);
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-    color: var(--text-color);
-    opacity: 1;
+  border-radius: 0.3rem;
+  background-color: var(--bg-color);
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  color: var(--text-color);
+  opacity: 1;
 }
 
 #math-inline-preview.code-tooltip .code-tooltip-content {
-    border: solid 1px var(--borders);
+  border: solid 1px var(--borders);
 }
 
 #math-inline-preview.code-tooltip .md-arrow:after {
-    background-color: var(--bg-color);
-    border: solid 1px var(--borders);
-    box-shadow: none;
+  background-color: var(--bg-color);
+  border: solid 1px var(--borders);
+  box-shadow: none;
 }
 
 /*FOOTER*/
 
 footer.ty-footer {
-    border: none;
+  border: none;
 }
 
 .footer-item {
-    opacity: 1 !important;
-    color: var(--light-text-color);
-    transition: 0.3s;
+  opacity: 1 !important;
+  color: var(--light-text-color);
+  transition: 0.3s;
 }
 
 .footer-item:hover {
-    color: var(--light-text-color-darker) !important;
+  color: var(--light-text-color-darker) !important;
 }
 
 #outline-btn:hover {
-    color: var(--light-text-color-darker) !important;
+  color: var(--light-text-color-darker) !important;
 }
 
 /*SIDEBAR*/
 
 #typora-sidebar {
-    border-right: solid 1px var(--borders);
+  border-right: solid 1px var(--borders);
 }
 
 .info-panel-tab {
-    opacity: 1;
+  opacity: 1;
 }
 
 .info-panel-tab-border {
-    color: var(--primary-color);
-    border-radius: 2px;
+  color: var(--primary-color);
+  border-radius: 2px;
 }
 
 .sidebar-tab {
-    font-weight: 500;
-    color: var(--light-text-color);
+  text-transform: capitalize;
+  color: var(--light-text-color);
 }
 
 #ty-sidebar-search-back-btn {
-    margin: auto;
+  margin: auto;
 }
 
 .ty-show-outline-filter #file-library-search,
 .ty-show-search #file-library-search {
-    height: 4rem;
+  height: 4rem;
 }
 
 #file-library-search-input {
-    height: 2rem;
+  height: 2rem;
 }
 
 #file-library-search-panel input {
-    margin-top: 8px !important;
+  margin-top: 8px !important;
 }
 
 .ty-sidebar-search-panel .searchpanel-search-option-btn,
 #ty-sidebar-search-tabs .searchpanel-search-option-btn {
-    top: 15px;
+  top: 15px;
 }
 
 #typora-sidebar #filesearch-case-ion-btn,
 #typora-sidebar #filesearch-word-ion-btn {
-    background: none;
-    margin-top: 0.45rem;
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  background: none;
+  margin-top: 0.45rem;
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 #typora-sidebar #filesearch-case-ion-btn:hover,
 #typora-sidebar #filesearch-word-ion-btn:hover {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 /*sidebar loading*/
 
 #typora-sidebar #sidebar-loading-template {
-    padding: 0px;
+  padding: 0px;
 }
 
 #typora-sidebar #sidebar-loading-template .typora-search-spinner {
-    opacity: 1;
-    color: var(--light-text-color-darker);
+  opacity: 1;
+  color: var(--light-text-color-darker);
 }
 
 #typora-sidebar #sidebar-loading-template .typora-quick-open-info {
-    color: var(--light-text-color-darker);
-    font-size: 0.9rem;
-    font-weight: 500;
+  color: var(--light-text-color-darker);
+  font-size: 0.9rem;
+  font-weight: 500;
 }
 
 /*sidebar outline*/
 
 #close-outline-filter-btn {
-    top: 15px;
-    opacity: 1;
-    color: var(--light-text-color) !important;
+  top: 15px;
+  opacity: 1;
+  color: var(--light-text-color) !important;
 }
 
 #close-outline-filter-btn:hover {
-    color: var(--primary-color) !important;
-    background-color: transparent !important;
+  color: var(--primary-color) !important;
+  background-color: transparent !important;
 }
 
 #close-outline-filter-btn:active {
-    background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 #outline-content {
-    padding-right: 0px;
-    line-height: 1rem;
+  padding-right: 0px;
+  line-height: 1rem;
 }
 
 .outline-item {
-    display: flex;
-    padding-top: 0px;
-    padding-bottom: 0px;
+  display: flex;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 .outline-item .outline-label {
-    display: block;
-    width: 100%;
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
-    border-right: solid 2px transparent;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--light-text-color-darker);
-    transition-duration: 0.3s;
-    transition-property: color;
+  display: block;
+  width: 100%;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  border-right: solid 2px transparent;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--light-text-color-darker);
+  transition-duration: 0.3s;
+  transition-property: color;
 }
 
 .outline-item:hover {
-    background: none;
+  background: none;
 }
 
 .outline-item:hover .outline-label {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .outline-label:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .outline-active.outline-label {
-    border-right: solid 2px var(--primary-color);
-    font-weight: 500;
-    color: var(--primary-color);
+  border-right: solid 2px var(--primary-color);
+  font-weight: 500;
+  color: var(--primary-color);
 }
 
 .outline-expander {
-    padding-top: 0.4rem;
-    padding-right: 0.5rem;
+  padding-top: 0.4rem;
+  padding-right: 0.5rem;
+}
+
+#toc-dropmenu .outline-label {
+  line-height: 1rem;
+}
+
+#toc .outline-title {
+  margin-top: 9px;
+  font-size: 1rem;
+  font-weight: 500;
+  user-select: none;
+}
+
+#pin-outline-btn {
+  padding: 14px 18px 0px 0px;
 }
 
 /*sidebar file-list and search results*/
 
-#file-library-list[data-state="complete"] #sidebar-loading-template {
-    padding: 0rem;
+#file-library-list[data-state='complete'] #sidebar-loading-template {
+  padding: 0rem;
 }
 
 #typora-sidebar .file-list-item,
 .ty-search-item {
-    border: none;
-    transition-duration: 0.3s !important;
-    transition-property: background-color, border, color, height !important;
-    padding: 1rem;
+  border: none;
+  transition-duration: 0.3s !important;
+  transition-property: background-color, border, color, height !important;
+  padding: 1rem;
 }
 
 #typora-sidebar .file-list-item:hover,
 .ty-search-item:hover {
-    background: var(--borders);
+  background: var(--borders);
 }
 
 #typora-sidebar .ty-search-item-line {
-    font-family: var(--font-family);
-    font-size: 0.8rem;
-    font-weight: 400;
-    padding: 0.3rem;
-    border-radius: 0.3rem;
-    margin-left: 24px;
-    transition-duration: 0.2s;
+  font-family: var(--font-family);
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.3rem;
+  border-radius: 0.3rem;
+  margin-left: 24px;
+  transition-duration: 0.2s;
 }
 
 #typora-sidebar .ty-search-item-line * {
-    opacity: 1;
+  opacity: 1;
 }
 
 #typora-sidebar .ty-search-item .ty-search-item-line:hover,
 #typora-sidebar .ty-search-item-line.active {
-    background-color: transparent;
-    color: var(--primary-color);
+  background-color: transparent;
+  color: var(--primary-color);
 }
 
 #typora-sidebar .file-list-item-file-name {
-    font-weight: 800;
-    font-size: 0.9rem;
-    margin-bottom: 0rem;
-    line-height: 1.8rem;
-    float: right;
+  font-weight: 800;
+  font-size: 0.9rem;
+  margin-bottom: 0rem;
+  line-height: 1.8rem;
+  float: right;
 }
 
 #typora-sidebar .file-list-item-file-ext-part {
-    font-weight: 800;
-    opacity: 0.5;
+  font-weight: 800;
+  opacity: 0.5;
 }
 
 #typora-sidebar .file-list-item-parent-loc,
 #typora-sidebar .file-list-item-time {
-    font-family: var(--font-family);
-    font-weight: 400;
-    opacity: 0.5;
-    display: block;
+  font-family: var(--font-family);
+  font-weight: 400;
+  opacity: 0.5;
+  display: block;
 }
 
 #typora-sidebar .file-list-item-summary {
-    float: left;
-    font-size: 0.8rem;
-    opacity: 0.9;
+  float: left;
+  font-size: 0.8rem;
+  opacity: 0.9;
 }
 
 #typora-sidebar .file-list-item-count {
-    font-size: 0.75rem;
-    background-color: var(--primary-color);
-    color: white;
-    border-radius: 0.2rem;
-    min-width: 1.25rem;
-    height: 1.25rem;
-    text-align: center;
-    line-height: 1.25rem;
-    position: relative;
-    top: 0.3rem;
+  font-size: 0.75rem;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 0.2rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  text-align: center;
+  line-height: 1.25rem;
+  position: relative;
+  top: 0.3rem;
 }
 
 #typora-sidebar input.file-list-item-file-name {
-    margin: 0.5rem 0rem 0.5rem 0.7rem;
-    padding: 0.4rem !important;
-    line-height: 1rem;
-    float: right;
-    border-radius: 0.3rem;
-    font-weight: 500;
-    background-color: white !important;
+  margin: 0.5rem 0rem 0.5rem 0.7rem;
+  padding: 0.4rem !important;
+  line-height: 1rem;
+  float: right;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  background-color: white !important;
 }
 
 #typora-sidebar .file-list-item.file-library-file-node {
-    border: none;
+  border: none;
 }
 
 #typora-sidebar .file-tree-node.active .file-node-background,
 #typora-sidebar .file-list-item.active,
 #typora-sidebar .ty-search-item.active {
-    background-color: white;
-    outline: 1px solid var(--borders);
-    border: none;
-    color: var(--primary-color) !important;
+  background-color: white;
+  outline: 1px solid var(--borders);
+  border: none;
+  color: var(--primary-color) !important;
 }
 
 #typora-sidebar .file-tree-node.active .file-node-content {
-    color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
 }
 
 #typora-sidebar .file-tree-node {
-    padding: 0rem;
-    font-weight: 500;
-    font-size: 0.9rem;
-    margin-left: 0.8rem;
+  padding: 0rem;
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin-left: 0.8rem;
 }
 
 #typora-sidebar .file-tree-node .file-node-content {
-    padding: 0rem;
-    line-height: 2.2rem;
-    height: 2.2rem;
-    background: none;
-    margin-bottom: 0px;
+  padding: 0rem;
+  line-height: 2.2rem;
+  height: 2.2rem;
+  background: none;
+  margin-bottom: 0px;
 }
 
 #typora-sidebar .file-tree-node .file-node-background {
-    padding: 0rem;
-    height: 2.2rem;
+  padding: 0rem;
+  height: 2.2rem;
 }
 
 #typora-sidebar .file-tree-node .file-node-icon {
-    margin-right: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 #typora-sidebar .file-tree-node .file-node-icon.fa-file-text-o {
-    margin-top: 0.33rem;
+  margin-top: 0.33rem;
 }
 
 #typora-sidebar .file-tree-node .file-node-icon.fa-folder {
-    margin-top: 0.36rem;
+  margin-top: 0.36rem;
 }
 
 #typora-sidebar .file-tree-node .fa-caret-down,
 #typora-sidebar .file-tree-node .fa-caret-right {
-    position: relative;
-    top: 5px;
+  position: relative;
+  top: 5px;
 }
 
 #typora-sidebar .file-tree-node .file-tree-rename-input {
-    height: 2.2rem;
-    background: none;
-    border: none;
-    font-size: 0.9rem;
-    font-weight: 500;
-    margin: 0rem;
-    padding-left: 0rem;
+  height: 2.2rem;
+  background: none;
+  border: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin: 0rem;
+  padding-left: 0rem;
 }
 
 #typora-sidebar .ty-search-item-collapse-icon {
-    top: 9px;
+  top: 9px;
 }
 
 /*no left border*/
 #typora-sidebar .file-tree-node.active > .file-node-background {
-    border: none;
+  border: none;
 }
 
 /*no dotted highlighting*/
 .file-library-node:not(.file-node-root):focus > .file-node-content {
-    outline: none;
+  outline: none;
 }
 
 #typora-sidebar #sidebar-files-menu {
-    border: solid 1px var(--borders);
-    border-radius: 0.3rem;
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  border: solid 1px var(--borders);
+  border-radius: 0.3rem;
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
 }
 
 #typora-sidebar #ty-sidebar-footer {
-    background-color: var(--bg-color);
-    border-top: solid 1px var(--borders);
-    font-weight: 500;
+  background-color: var(--bg-color);
+  border-top: solid 1px var(--borders);
+  font-weight: 500;
 }
 
 #typora-sidebar #ty-sidebar-footer li {
-    transition-duration: 0.2s;
-    transition-property: background-color, color;
+  transition-duration: 0.2s;
+  transition-property: background-color, color;
 }
 
 #typora-sidebar
-    #ty-sidebar-footer
-    li:not(.file-sort-item):not(:first-child):hover {
-    color: var(--primary-color);
-    background-color: var(--boxes);
+  #ty-sidebar-footer
+  li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover {
+  color: var(--primary-color);
+  background-color: var(--boxes);
 }
 
-#typora-sidebar
-    #ty-sidebar-footer
-    .file-action-item.file-sort-item
-    > span:first-of-type {
-    line-height: 2rem;
+#typora-sidebar #ty-sidebar-footer .file-action-item.file-sort-item > span:first-of-type {
+  line-height: 2rem;
 }
 
 /*cursor*/
 .file-node-content:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
-.file-tree-node:not(.file-node-root):not(.file-node-expanded)
-    .file-node-background {
-    transition-duration: 0.2s;
-    transition-property: background-color;
+.file-tree-node:not(.file-node-root):not(.file-node-expanded) .file-node-background {
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
-.file-tree-node:not(.file-node-root):not(.file-node-expanded):hover
-    .file-node-background {
-    background-color: var(--borders);
+.file-tree-node:not(.file-node-root):not(.file-node-expanded):hover .file-node-background {
+  background-color: var(--borders);
 }
 
 #typora-sidebar .sidebar-footer-item {
-    transition-duration: 0.2s;
-    transition-property: background-color, color;
-    font-weight: 700;
+  transition-duration: 0.2s;
+  transition-property: background-color, color;
+  font-weight: 700;
 }
 
 #typora-sidebar .sidebar-footer-item:hover {
-    color: var(--primary-color);
-    background-color: var(--boxes);
+  color: var(--primary-color);
+  background-color: var(--boxes);
 }
 
 #typora-quick-open {
-    background-color: white;
-    border: 1px solid var(--borders);
-    border-radius: 0.3rem;
-    padding: 0rem;
-    box-shadow: rgba(116, 129, 141, 0.15) 0px 3px 16px 0px;
-    overflow: hidden;
+  background-color: white;
+  border: 1px solid var(--borders);
+  border-radius: 0.3rem;
+  padding: 0rem;
+  box-shadow: rgba(116, 129, 141, 0.15) 0px 3px 16px 0px;
+  overflow: hidden;
 }
 
 #typora-quick-open-input {
-    margin-right: 20px;
+  margin-right: 20px;
 }
 
 #typora-quick-open-input .input {
-    box-shadow: none;
-    border: none;
-    margin: 0.5rem;
-    margin-left: 0.8rem;
+  box-shadow: none;
+  border: none;
+  margin: 0.5rem;
+  margin-left: 0.8rem;
 }
 
 .typora-quick-open-item {
-    background-color: white;
-    border: none;
-    font-weight: 500;
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  background-color: white;
+  border: none;
+  font-weight: 500;
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 .typora-quick-open-item:hover {
-    background-color: var(--boxes);
-    color: var(--primary-color);
+  background-color: var(--boxes);
+  color: var(--primary-color);
 }
 
 .typora-quick-open-item.active {
-    background-color: var(--boxes);
-    border: none;
+  background-color: var(--boxes);
+  border: none;
+}
+
+.typora-quick-open-item-path {
+  opacity: 1;
+  color: var(--light-text-color);
+}
+
+.typora-quick-open-item:hover .typora-quick-open-item-path {
+  opacity: 0.7;
+  color: var(--primary-color);
 }
 
 .ty-quick-open-category-title {
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 1.2px;
-    text-transform: uppercase;
-    opacity: 1;
-    color: var(--light-text-color);
-    line-height: 32px;
-    padding-top: 6px;
-    height: 32px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  opacity: 1;
+  color: var(--light-text-color);
+  line-height: 32px;
+  padding-top: 6px;
+  height: 32px;
 }
 
 /** focus mode */
 .on-focus-mode blockquote {
-    border-left-color: rgba(85, 85, 85, 0.12);
+  border-left-color: rgba(85, 85, 85, 0.12);
 }
 
 .md-lang {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 /*NOTIFICATION*/
 
 #md-notification {
-    border-bottom: solid 1px var(--borders);
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  border-bottom: solid 1px var(--borders);
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
 }
 
 #md-notifcation .btn {
-    border: 0;
+  border: 0;
 }
 
 /*PREFERENCES*/
 
 .ty-preferences {
-    font-family: var(--font-family);
+  font-family: var(--font-family);
 }
 
 .ty-preferences .window-header {
-    justify-content: space-between;
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-    border-bottom: solid 1px var(--borders);
+  justify-content: space-between;
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  border-bottom: solid 1px var(--borders);
 }
 
 .ty-preferences .window-header-content {
-    background-color: white;
-    margin: 0rem;
+  background-color: white;
+  margin: 0rem;
 }
 
 .ty-preferences .window-header h2 {
-    font-weight: 600;
-    font-size: 1.5rem;
-    margin: 0rem;
-    margin-left: 1rem;
+  font-weight: 600;
+  font-size: 1.5rem;
+  margin: 0rem;
+  margin-left: 1rem;
 }
 
 .unibody-window .ty-preferences .window-header h2 {
-    margin-left: 1rem !important;
+  margin-left: 1rem !important;
 }
 
 .ty-preferences .window-header-back {
-    margin-left: 1.2rem;
+  margin-left: 1.2rem;
 }
 
 .ty-preferences .window-header-back .icon {
-    border-right: none;
+  border-right: none;
 }
 
 /*preferences sidebar*/
 .ty-preferences .window-content {
-    background-color: white;
+  background-color: white;
 }
 
 .ty-preferences .nav-group-item {
-    color: var(--text-color);
-    height: 2.5rem;
-    line-height: 2.6rem;
-    font-weight: 500;
-    padding: 0px 0px 0px 2rem;
-    font-size: 1rem;
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  color: var(--text-color);
+  height: 2.5rem;
+  line-height: 2.6rem;
+  font-weight: 500;
+  padding: 0px 0px 0px 2rem;
+  font-size: 1rem;
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 .ty-preferences .nav-group-item:hover {
-    background-color: var(--borders);
-    border-radius: 0px;
+  background-color: var(--borders);
+  border-radius: 0px;
 }
 
 .ty-preferences .nav-group-item.active {
-    border-radius: 0rem;
-    border: none;
-    outline: 1px solid var(--borders);
-    background-color: white;
-    color: var(--primary-color);
+  border-radius: 0rem;
+  border: none;
+  outline: 1px solid var(--borders);
+  background-color: white;
+  color: var(--primary-color);
 }
 
 .ty-preferences .pane-sm {
-    background: var(--boxes);
-    flex-basis: 240px;
-    flex-grow: 0;
-    justify-content: center;
-    border-right: 1px solid var(--borders);
-    margin: 0rem;
-    padding: 0rem;
+  background: var(--boxes);
+  flex-basis: 240px;
+  flex-grow: 0;
+  justify-content: center;
+  border-right: 1px solid var(--borders);
+  margin: 0rem;
+  padding: 0rem;
 }
 
 .ty-preferences .pane-sm .list-group {
-    width: 100%;
-    max-width: 30rem;
+  width: 100%;
+  max-width: 30rem;
 }
 
 .ty-preferences .list-group-header {
-    display: flex;
-    justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 .ty-preferences .list-group-header div {
-    width: 100%;
-    margin-right: 18px;
-    margin-left: 18px;
+  width: 100%;
+  margin-right: 18px;
+  margin-left: 18px;
 }
 
 .ty-preferences .pane-sm .search-input {
-    margin: 0rem !important;
-    width: 100%;
-    font-size: 1rem !important;
-    height: 2.75rem;
+  margin: 0rem !important;
+  width: 100%;
+  font-size: 1rem !important;
+  height: 2.75rem;
 }
 
 .ty-preferences .pane-sm .search-input:active,
 .ty-preferences .pane-sm .search-input:focus {
-    border: solid 1px var(--primary-color) !important;
-    outline: none;
+  border: solid 1px var(--primary-color) !important;
+  outline: none;
 }
 
 /*preferences main*/
 .ty-preferences .panel-header {
-    font-weight: 600;
-    font-size: 1.6rem;
+  font-weight: 600;
+  font-size: 1.6rem;
 }
 
 /*preferences stuff*/
 .ty-preferences .dropdown-menu > li,
 .dropdown-item {
-    font-weight: 500;
-    font-size: 1rem;
-    transition-duration: 0.2s;
-    transition-property: all;
+  font-weight: 500;
+  font-size: 1rem;
+  transition-duration: 0.2s;
+  transition-property: all;
 }
 
 .ty-preferences .dropdown-menu .active,
 .ty-preferences .dropdown-menu li:hover,
 .dropdown-item:hover {
-    background-color: var(--boxes);
-    color: var(--primary-color);
+  background-color: var(--boxes);
+  color: var(--primary-color);
 }
 
 #ty-spell-check-dict-missing-secondary-btn:hover {
-    color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
 }
 
 .header-close .icon {
-    border: none !important;
+  border: none !important;
 }
 
 /*preferences export*/
 
 .export-detail {
-    background-color: transparent !important /*required*/;
+  background-color: transparent !important /*required*/;
 }
 
 .export-items-list .separator {
-    margin: 0.4rem;
-    border-top: 1px solid var(--borders);
+  margin: 0.4rem;
+  border-top: 1px solid var(--borders);
 }
 
 .export-items-list-control {
-    background-color: var(--boxes) !important /*required*/;
+  background-color: var(--boxes) !important /*required*/;
 }
 
 .export-item {
-    padding: 0.4rem !important /*required*/;
-    color: var(--light-text-color-darker);
-    font-weight: 500;
+  padding: 0.4rem !important /*required*/;
+  color: var(--light-text-color-darker);
+  font-weight: 500;
+  cursor: pointer;
 }
 
 .export-item.active {
-    background-color: transparent !important /*required*/;
-    color: var(--primary-color);
-    font-weight: 500 !important /*required*/;
+  background-color: transparent !important /*required*/;
+  color: var(--primary-color);
+  font-weight: 500 !important /*required*/;
 }
 
 /*DROPDOWN*/
 
 .dropdown-menu:not(.megamenu-menu-list),
 .auto-suggest-container {
-    background-color: var(--bg-color);
-    border: solid 1px var(--borders) !important;
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-    user-select: none;
+  background-color: var(--bg-color);
+  border: solid 1px var(--borders) !important;
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  user-select: none;
 }
 
 .dropdown-menu > li > a,
 .auto-suggest-container li {
-    font-weight: 500;
-    font-size: 0.8rem;
-    transition-duration: 0.2s;
-    transition-property: all;
+  font-weight: 500;
+  font-size: 0.8rem;
+  transition-duration: 0.2s;
+  transition-property: all;
 }
 
 .dropdown-menu > .active > a,
@@ -1616,111 +1638,112 @@ footer.ty-footer {
 .context-menu.dropdown-menu > li > a:hover,
 .auto-suggest-container li:hover,
 .auto-suggest-container li.active {
-    color: var(--primary-color);
-    background-color: var(--boxes);
+  color: var(--primary-color);
+  background-color: var(--boxes);
 }
 
 .menu-style-btn {
-    color: var(--text-color);
-    border: none;
-    transition-duration: 0.2s;
-    transition-property: all;
+  color: var(--text-color);
+  border: none;
+  transition-duration: 0.2s;
+  transition-property: all;
 }
 
 .menu-style-btn:hover {
-    color: var(--primary-color);
-    background-color: var(--boxes);
-    border: none;
+  color: var(--primary-color);
+  background-color: var(--boxes);
+  border: none;
 }
 
 header .menu-style-btn:hover {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .menu-item-container {
-    padding: 0 12px 0 4px;
+  padding: 0 12px 0 4px;
 }
 
 .menu-item-container a.menu-style-btn {
-    padding: 0.3rem 0.6rem;
-    margin: 0;
+  padding: 0.3rem 0.6rem;
+  margin: 0;
 }
 
 .dropdown-menu .divider {
-    border-color: var(--borders);
+  border-color: var(--borders);
+  opacity: 1;
 }
 
 /*BUTTON*/
 
 .btn,
 button {
-    border: none !important;
-    border-radius: 0.3rem !important;
-    color: var(--text-color) !important;
-    transition-duration: 0.2s;
-    transition-property: all;
-    font-size: 0.9rem !important;
-    font-weight: 500;
-    outline: none;
+  border: none !important;
+  border-radius: 0.3rem !important;
+  color: var(--text-color) !important;
+  transition-duration: 0.2s;
+  transition-property: all;
+  font-size: 0.9rem !important;
+  font-weight: 500;
+  outline: none;
 }
 
 .btn-default {
-    border: none !important;
-    border-radius: 0.3rem !important;
-    background-color: var(--boxes) !important;
+  border: none !important;
+  border-radius: 0.3rem !important;
+  background-color: var(--boxes) !important;
 }
 
 .btn:hover,
 .button-hover {
-    border: none;
-    border-radius: 0.3rem;
-    background-color: var(--borders) !important;
-    color: var(--text-color);
+  border: none;
+  border-radius: 0.3rem;
+  background-color: var(--borders) !important;
+  color: var(--text-color);
 }
 
 button:active,
 button.active,
 .btn:active,
 .btn-default:active {
-    border: none;
-    border-radius: 0.3rem;
-    background-color: var(--boxes-darker) !important;
-    box-shadow: none;
-    outline: none;
-    color: var(--text-color);
+  border: none;
+  border-radius: 0.3rem;
+  background-color: var(--boxes-darker) !important;
+  box-shadow: none;
+  outline: none;
+  color: var(--text-color);
 }
 
 .btn:focus {
-    border: none !important;
-    outline: none !important;
-    background-color: var(--boxes-darker);
+  border: none !important;
+  outline: none !important;
+  background-color: var(--boxes-darker);
 }
 
 .btn-primary {
-    border: none;
-    border-radius: 0.3rem;
-    background-color: var(--primary-color);
-    color: white !important;
+  border: none;
+  border-radius: 0.3rem;
+  background-color: var(--primary-color);
+  color: white !important;
 }
 
 .btn-primary:hover,
 .btn-primary:focus {
-    color: white;
-    background-color: var(--primary-color-darker) !important;
+  color: white;
+  background-color: var(--primary-color-darker) !important;
 }
 
 .btn.dropdown-toggle-split,
 .btn.dropdown-toggle-split:hover {
-    border-radius: 0rem 0.3rem 0.3rem 0rem !important;
+  border-radius: 0rem 0.3rem 0.3rem 0rem !important;
 }
 
 #ty-spell-check-dict-missing-primary-btn {
-    border-radius: 0.3rem 0rem 0rem 0.3rem !important;
+  border-radius: 0.3rem 0rem 0rem 0.3rem !important;
 }
 
 .open > .dropdown-toggle.btn-primary {
-    background-color: var(--primary-color);
-    border-color: transparent;
+  background-color: var(--primary-color);
+  border-color: transparent;
 }
 
 /*GHOST BUTTON*/
@@ -1736,11 +1759,11 @@ button.active,
 #md-searchpanel .input-group-addon.btn,
 #pin-outline-btn,
 .icon-button {
-    background-color: transparent !important;
-    color: var(--light-text-color) !important;
-    opacity: 1 !important;
-    transition-duration: 0.2s;
-    transition-property: color;
+  background-color: transparent !important;
+  color: var(--light-text-color) !important;
+  opacity: 1 !important;
+  transition-duration: 0.2s;
+  transition-property: color;
 }
 
 .window-header button:hover,
@@ -1765,44 +1788,44 @@ button.active,
 #pin-outline-btn:focus,
 .icon-button:hover,
 .icon-button:focus {
-    color: var(--primary-color) !important;
-    background: none !important;
+  color: var(--primary-color) !important;
+  background: none !important;
 }
 
 .ty-table-edit .btn.active {
-    color: var(--primary-color) !important;
-    box-shadow: none;
+  color: var(--primary-color) !important;
+  box-shadow: none;
 }
 
 /*IMAGE BUTTON*/
 
 .md-image-btn {
-    background-color: var(--boxes);
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  background-color: var(--boxes);
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 .md-image-btn:before {
-    color: var(--text-color);
-    transition-duration: 0.2s;
-    transition-property: color;
+  color: var(--text-color);
+  transition-duration: 0.2s;
+  transition-property: color;
 }
 
 .md-image-btn:hover {
-    background-color: var(--borders);
+  background-color: var(--borders);
 }
 
 .md-image-btn:hover:before {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .md-image-input-src-btn {
-    border-radius: 0.3rem 0rem 0rem 0.3rem !important;
+  border-radius: 0.3rem 0rem 0rem 0.3rem !important;
 }
 
 .md-image-pick-file-btn {
-    border-left: none;
-    border-radius: 0rem 0.3rem 0.3rem 0rem !important;
+  border-left: none;
+  border-radius: 0rem 0.3rem 0.3rem 0rem !important;
 }
 
 /*SEARCH-INPUTS*/
@@ -1811,49 +1834,49 @@ button.active,
 .search,
 .form-control,
 #file-library-search-input {
-    background-color: transparent !important;
-    border-radius: 0.3rem !important;
-    border: solid 1px var(--boxes-darker) !important;
-    box-shadow: none !important;
-    color: var(---heading-text-color) !important;
-    font-size: 0.9rem !important;
-    font-weight: 400;
-    padding: 0.7rem !important;
-    height: 2rem;
-    transition-duration: 0.2s;
-    transition-property: border, box-shadow;
+  background-color: transparent !important;
+  border-radius: 0.3rem !important;
+  border: solid 1px var(--boxes-darker) !important;
+  box-shadow: none !important;
+  color: var(---heading-text-color) !important;
+  font-size: 0.9rem !important;
+  font-weight: 400;
+  padding: 0.7rem !important;
+  height: 2rem;
+  transition-duration: 0.2s;
+  transition-property: border, box-shadow;
 }
 
 .search-input:hover,
 .search:hover,
 .form-control:hover,
 #file-library-search-input:hover {
-    border: solid 1px var(--boxes-darker2) !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+  border: solid 1px var(--boxes-darker2) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
 }
 
 .search-input:focus,
 .search:focus,
 .form-control:focus,
 #file-library-search-input:focus {
-    background-color: transparent !important;
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
-    color: var(--heading-text-color) !important;
-    font-size: 0.9rem !important;
-    padding: 0.7rem !important;
+  background-color: transparent !important;
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+  color: var(--heading-text-color) !important;
+  font-size: 0.9rem !important;
+  padding: 0.7rem !important;
 }
 
 .search-input::placeholder,
 .search::placeholder,
 .form-control::placeholder,
 #file-library-search-input::placeholder {
-    color: var(--light-text-color-darker) !important;
+  color: var(--light-text-color-darker) !important;
 }
 
 .clear-btn-icon {
-    top: 9px !important /*required*/;
-    right: 9px !important /*required*/;
+  top: 9px !important /*required*/;
+  right: 9px !important /*required*/;
 }
 
 .content tr.search-hit,
@@ -1862,474 +1885,515 @@ button.active,
 .md-search-hit.md-search-select,
 .md-search-select,
 .ty-file-search-match-text {
-    background-color: var(--boxes-darkest);
-    color: white;
-    padding: 0.2rem 0.1rem;
-    border-radius: 0.2rem;
+  background-color: var(--boxes-darkest);
+  color: white;
+  padding: 0.2rem 0.1rem;
+  border-radius: 0.2rem;
 }
 
 /*ZOOM HINT*/
 
 #zoom-hint {
-    border-radius: 0.3rem;
-    border: solid 1px var(--borders);
-    user-select: none;
-    box-shadow: rgba(116, 129, 141, 0.08) 0px 2px 6px 0px;
+  border-radius: 0.3rem;
+  border: solid 1px var(--borders);
+  user-select: none;
+  box-shadow: rgba(116, 129, 141, 0.08) 0px 2px 6px 0px;
 }
 
 #zoom-hint #zoom-hint-reset {
-    border-left: none;
-    font-weight: 600;
+  border-left: none;
+  font-weight: 600;
 }
 
 /*SEARCHPANEL*/
 
 #md-searchpanel {
-    border-bottom: 1px solid var(--borders);
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-    max-height: 46px;
+  border-bottom: 1px solid var(--borders);
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  max-height: 46px;
 }
 
 .mac-seamless-mode #md-searchpanel {
-    max-height: 70px;
+  max-height: 70px;
 }
 
 #md-searchpanel.searchpanel-replace-mode {
-    max-height: 84px;
+  max-height: 84px;
 }
 
 .mac-seamless-mode #md-searchpanel.searchpanel-replace-mode {
-    max-height: 108px;
+  max-height: 108px;
 }
 
 #md-searchpanel input {
-    height: 2rem;
-    margin: 0rem !important;
-    padding: 6px 12px !important;
-    font-size: 12px !important;
+  height: 2rem;
+  margin: 0rem !important;
+  padding: 6px 12px !important;
+  font-size: 12px !important;
 }
 
 #md-searchpanel .input-group-addon {
-    height: 2rem;
+  height: 2rem;
 }
 
 #md-searchpanel .input-group-addon.close-btn {
-    padding-left: 8px;
+  padding-left: 8px;
 }
 
 .unibody-window #md-searchpanel .btn {
-    line-height: 2rem;
+  line-height: 2rem;
 }
 
 .searchpanel-search-option-btn {
-    top: 9px;
-    border: none;
-    color: var(--light-text-color-darker) !important /*required*/;
-    transition-duration: 0.3s;
+  top: 9px;
+  border: none;
+  color: var(--light-text-color-darker) !important /*required*/;
+  transition-duration: 0.3s;
 }
 
 .searchpanel-search-option-btn:hover {
-    color: var(--primary-color) !important /*required*/;
-    background-color: transparent !important /*required*/;
+  color: var(--primary-color) !important /*required*/;
+  background-color: transparent !important /*required*/;
 }
 
 .searchpanel-search-option-btn.select,
 .searchpanel-search-option-btn.active {
-    color: white !important;
-    background-color: var(--primary-color) !important;
+  color: white !important;
+  background-color: var(--primary-color) !important;
 }
 
 #searchpanel-case-option-btn {
-    right: 33px;
+  right: 33px;
 }
 
 #searchpanel-word-option-btn {
-    right: 9px;
+  right: 9px;
 }
 
 #searchpanel-word-option-btn,
 #searchpanel-case-option-btn {
-    background: none;
+  background: none;
 }
 
 #md-searchpanel .btn:not(.close-btn):hover {
-    box-shadow: none;
+  box-shadow: none;
+}
+
+/*SELECT*/
+/*TEXT INPUT*/
+/*NUMBER INPUT*/
+
+html select,
+html input[type='text'],
+html input[type='number'] {
+  background-color: var(--bg-color) !important;
+  border-radius: 0.3rem !important;
+  border: solid 1px var(--boxes-darker) !important;
+  box-shadow: none !important;
+  color: var(--text-color) !important;
+  font-size: 0.9rem !important;
+  font-weight: 500 !important;
+  padding: 0.3rem !important;
+  height: 2.1rem !important;
+  transition-duration: 0.2s;
+  transition-property: border;
 }
 
-/*NUMBER-INPUT*/
-input[type="number"] {
-    background-color: var(--boxes) !important;
-    border: none !important;
-    border-radius: 0.3rem;
+select {
+  cursor: pointer !important;
 }
 
-input[type="number"]:focus {
-    background-color: var(--item-hover-bg-color) !important;
+input[type='text'],
+input[type='number'] {
+  cursor: text;
 }
 
-/*SELECTS*/
+html select:hover,
+html input[type='text']:hover,
+html input[type='number']:hover {
+  background-color: var(--bg-color) !important;
+  border-radius: 0.3rem !important;
+  border-color: var(--boxes-darker2) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+  color: var(--text-color) !important;
+  font-size: 0.9rem !important;
+}
 
-select {
-    background-color: var(--bg-color) !important;
-    border-radius: 0.3rem !important;
-    border: solid 1px var(--boxes-darker2) !important;
-    box-shadow: none !important;
-    color: var(---heading-text-color) !important;
-    font-size: 0.9rem !important;
-    font-weight: 500 !important;
-    padding: 0.3rem !important;
-    height: 2.1rem;
-    transition-duration: 0.2s;
-    transition-property: border;
-}
-
-select:hover {
-    background-color: var(--bg-color) !important;
-    border-radius: 0r3em !important;
-    border-color: var(--primary-color) !important;
-    box-shadow: none !important;
-    color: var(--heading-text-color) !important;
-    font-size: 0.9rem !important;
+html select:focus,
+html input[type='text']:focus,
+html input[type='number']:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+}
+
+input[type='text']::placeholder,
+input[type='number']::placeholder {
+  color: var(--light-text-color-brighter) !important;
+}
+
+input[disabled],
+input[disabled]:hover,
+input[disabled]:focus {
+  cursor: not-allowed;
+}
+
+/*TEXTAREA*/
+
+textarea {
+  background-color: transparent;
+  border: solid 1px var(--boxes-darker);
+  border-radius: 0.3rem;
+  transition-duration: 0.2s;
+}
+
+textarea:hover {
+  border-color: var(--boxes-darker2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  outline: none;
 }
 
 /*MODAL*/
 
 .modal-header,
 #common-dialog .modal-header {
-    border-bottom: solid 1px var(--borders);
-    padding-bottom: 15px;
+  border-bottom: solid 1px var(--borders);
+  padding-bottom: 15px;
 }
 
 .modal-title {
-    font-size: 1.25rem;
-    font-weight: 500;
-    user-select: none;
+  font-size: 1.25rem;
+  font-weight: 500;
+  user-select: none;
 }
 
 .modal-body {
-    font-size: 0.9rem;
-    color: var(--light-text-color-darker);
-    user-select: none;
+  font-size: 0.9rem;
+  color: var(--light-text-color-darker);
+  user-select: none;
 }
 
 .modal-content {
-    box-shadow: rgba(116, 129, 141, 0.15) 0px 3px 10px 0px;
-    border: solid 1px var(--boxes-darker);
-    border-radius: 0.3rem;
+  box-shadow: rgba(116, 129, 141, 0.15) 0px 3px 10px 0px;
+  border: solid 1px var(--boxes-darker);
+  border-radius: 0.3rem;
 }
 
 .modal-footer {
-    border-top: solid 1px var(--borders);
+  border-top: solid 1px var(--borders);
 }
 
 .modal-open .modal.fade.in {
-    background: none;
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
+  background: none;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 }
 
 /*LANGS*/
 
 .ty-spell-check-panel-item {
-    font-weight: 500;
-    transition-duration: 0.2s;
-    transition-property: background-color, color;
+  font-weight: 500;
+  transition-duration: 0.2s;
+  transition-property: background-color, color;
 }
 
 .ty-spell-check-panel-item:hover {
-    color: var(--primary-color);
-    background-color: var(--boxes);
+  color: var(--primary-color);
+  background-color: var(--boxes);
 }
 
 .ty-spell-check-panel-item.ty-active {
-    background-color: var(--boxes);
+  background-color: var(--boxes);
 }
 
 /*TOOLTIP*/
 
 .ty-tooltip {
-    background-color: var(--bg-color) !important;
-    border-radius: 0.3rem !important;
-    border: 1px solid var(--borders) !important;
-    -webkit-filter: none !important;
-    filter: none;
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+  background-color: var(--bg-color) !important;
+  border-radius: 0.3rem !important;
+  border: 1px solid var(--borders) !important;
+  -webkit-filter: none !important;
+  filter: none;
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
 }
 
 /*FOOTER*/
 
 .footer-item:hover {
-    background-color: var(--boxes) !important;
+  background-color: var(--boxes) !important;
 }
 
 #footer-word-count-info {
-    padding: 4px 0;
+  padding: 4px 0;
 }
 
 .footer-word-count-info-line {
-    padding: 0.25rem;
-    line-height: 1.6rem;
+  padding: 0.25rem;
+  line-height: 1.6rem;
 }
 
 #footer-word-count-info tr {
-    font-weight: 500;
-    font-size: 0.8rem;
-    transition-duration: 0.2s;
-    transition-property: all;
+  font-weight: 500;
+  font-size: 0.8rem;
+  transition-duration: 0.2s;
+  transition-property: all;
 }
 
 #footer-word-count-info tr td:nth-child(1) {
-    padding: 0rem;
-    padding-right: 1rem;
+  padding: 0rem;
+  padding-right: 1rem;
 }
 
 #footer-word-count-info .ty-footer-word-count-all tr:hover {
-    color: var(--primary-color) !important;
-    background-color: var(--boxes) !important;
+  color: var(--primary-color) !important;
+  background-color: var(--boxes) !important;
 }
 
 /*MEGAMENU*/
 
 .megamenu-menu {
-    box-shadow: none;
-    background-color: var(--boxes);
-    border-right: 1px solid var(--borders);
+  box-shadow: none;
+  background-color: var(--boxes);
+  border-right: 1px solid var(--borders);
 }
 
 .megamenu-opened .megamenu-menu {
-    left: 0px;
+  left: 0px;
 }
 
 #megamenu-content {
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
 #megamenu-menu-list {
-    box-shadow: none;
-    border: none;
-    background-color: transparent;
+  box-shadow: none;
+  border: none;
+  background-color: transparent;
 }
 
 #megamenu-menu-list li a {
-    color: var(--text-color);
-    height: 2rem;
-    line-height: 1.8rem;
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  color: var(--text-color);
+  height: 2rem;
+  line-height: 1.8rem;
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 #megamenu-menu-list li a:hover {
-    background-color: var(--borders);
+  background-color: var(--borders);
 }
 
 #megamenu-menu-list li a.active {
-    color: var(--primary-color);
-    background-color: white;
-    outline: solid 1px var(--borders);
+  color: var(--primary-color);
+  background-color: white;
+  outline: solid 1px var(--borders);
 }
 
 #megamenu-menu-list .divider {
-    background-color: var(--borders);
-    margin: 16px 0 0 0;
+  background-color: var(--borders);
+  margin: 16px 0 0 0;
 }
 
 .megamenu-menu-list .saved #m-saved {
-    cursor: default;
+  cursor: default;
 }
 
 .megamenu-menu-list .saved #m-saved .fa {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .megamenu-menu-list .saved #m-saved:hover {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .megamenu-menu-list #m-close:hover {
-    color: var(--danger-color);
+  color: var(--danger-color);
 }
 
 .megamenu-menu-header {
-    border-bottom: solid 1px var(--borders);
-    margin-bottom: 1.2rem;
-    height: 74px;
-    transition-duration: 0.3s;
+  border-bottom: solid 1px var(--borders);
+  margin-bottom: 1.2rem;
+  height: 74px;
+  transition-duration: 0.3s;
 }
 
 .megamenu-menu-header:hover {
-    background-color: var(--borders);
+  background-color: var(--borders);
 }
 
 .megamenu-menu-header #megamenu-menu-header-title {
-    color: var(--text-color);
-    font-weight: 700;
-    font-size: 16px;
-    left: 56px;
-    top: 24px;
+  color: var(--text-color);
+  font-weight: 700;
+  font-size: 16px;
+  left: 56px;
+  top: 24px;
 }
 
 #megamenu-back-btn {
-    color: var(--text-color);
-    font-size: 16px;
-    left: 24px;
-    top: 24px;
+  color: var(--text-color);
+  font-size: 16px;
+  left: 24px;
+  top: 24px;
 }
 
 .megamenu-opened header {
-    background-color: var(--bg-color);
-    background-image: none;
+  background-color: var(--bg-color);
+  background-image: none;
 }
 
 .megamenu-content {
-    background-color: var(--bg-color);
-    background-image: none;
+  background-color: var(--bg-color);
+  background-image: none;
 }
 
 .megamenu-menu-panel:not(:first-of-type) {
-    margin-top: 2rem;
+  margin-top: 2rem;
 }
 
 .megamenu-menu-panel h1 {
-    font-weight: 900;
-    font-size: 1.8rem;
-    margin: 1rem 0rem 0.4rem 0rem;
+  font-weight: 900;
+  font-size: 1.8rem;
+  margin: 1rem 0rem 0.4rem 0rem;
 }
 
 .megamenu-menu-panel h2 {
-    font-weight: 800;
-    font-size: 1.3rem;
-    margin: 1rem 0rem 0.4rem 0rem;
+  font-weight: 800;
+  font-size: 1.3rem;
+  margin: 1rem 0rem 0.4rem 0rem;
 }
 
 /*recent files*/
 
 #recent-file-panel tbody tr {
-    font-weight: 600;
-    transition-duration: 0.4s;
+  font-weight: 600;
+  transition-duration: 0.4s;
 }
 
 #recent-file-panel tbody tr:hover,
 .megamenu-menu-panel tbody tr:hover td:nth-child(1) {
-    color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 #recent-file-panel tbody tr:nth-child(2n-1) {
-    background-color: var(--boxes);
+  background-color: var(--boxes);
 }
 
 /*about help*/
 
 .about-content-slogon {
-    color: var(--light-text-color);
+  color: var(--light-text-color);
 }
 
 /*for the god himself*/
 .about-content-slogon span {
-    color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
 }
 
 #about-content tbody tr {
-    font-weight: 500;
-    transition-duration: 0.4s;
+  font-weight: 500;
+  transition-duration: 0.4s;
 }
 
 #about-content tbody tr:hover {
-    color: var(--primary-color);
-    background-color: var(--boxes) !important /*required important*/;
+  color: var(--primary-color);
+  background-color: var(--boxes) !important /*required important*/;
 }
 
 .long-btn {
-    margin-bottom: 12px;
-    margin-left: 2px;
-    box-shadow: rgba(116, 129, 141, 0.1) 2px 2px 6px;
-    background-color: white;
-    border: 1px solid var(--borders);
-    border-radius: 0.3rem;
-    padding: 1rem;
+  margin-bottom: 12px;
+  margin-left: 2px;
+  box-shadow: rgba(116, 129, 141, 0.1) 2px 2px 6px;
+  background-color: white;
+  border: 1px solid var(--borders);
+  border-radius: 0.3rem;
+  padding: 1rem;
 
-    font-weight: 700;
-    font-size: 1rem;
+  font-weight: 700;
+  font-size: 1rem;
 
-    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
 }
 
 .long-btn:hover {
-    background-color: var(--primary-color);
-    border: 1px solid transparent;
-    color: white !important /*important required*/;
-    box-shadow: rgba(116, 129, 141, 0.1) 2px 2px 6px,
-        rgba(56, 132, 255, 0.2) 0px 0px 10px;
+  background-color: var(--primary-color);
+  border: 1px solid transparent;
+  color: white !important /*important required*/;
+  box-shadow: rgba(116, 129, 141, 0.1) 2px 2px 6px, rgba(56, 132, 255, 0.2) 0px 0px 10px;
 }
 
 #m-import-local:hover .preference-item-hint {
-    color: white;
-    opacity: 0.7;
+  color: white;
+  opacity: 0.7;
 }
 
 #recent-file-panel-action-btn {
-    height: 34px;
-    border: none;
-    background-color: var(--boxes);
+  height: 34px;
+  border: none;
+  background-color: var(--boxes);
 }
 
 #theme-preview-grid {
-    max-width: none;
-    padding: 1.5rem;
-    background-color: var(--boxes);
-    border-radius: 0rem;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 1.5rem;
+  max-width: none;
+  padding: 1.5rem;
+  background-color: var(--boxes);
+  border-radius: 0rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 1.5rem;
 }
 
 .theme-preview-div {
-    border: none;
-    border-radius: 0.4rem;
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 0px 15px;
-    margin: 0rem;
-    transition-duration: 0.3s;
+  border: none;
+  border-radius: 0.4rem;
+  box-shadow: rgba(116, 129, 141, 0.1) 0px 0px 15px;
+  margin: 0rem;
+  transition-duration: 0.3s;
 }
 
 .theme-preview-div:hover {
-    box-shadow: rgba(116, 129, 141, 0.5) 3px 8px 15px;
-    cursor: pointer;
-    transform: rotate3d(1, -0.2, 0.2, 15deg);
+  box-shadow: rgba(116, 129, 141, 0.5) 3px 8px 15px;
+  cursor: pointer;
+  transform: rotate3d(1, -0.2, 0.2, 15deg);
 }
 
 .theme-preview-content {
-    width: 100%;
-    height: 100%;
-    border-radius: 0.4rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.4rem;
 }
 
 .theme-preview-content html {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .theme-preview-div.active .fa {
-    color: var(--primary-color);
-    bottom: 4px;
-    left: 4px;
+  color: var(--primary-color);
+  bottom: 4px;
+  left: 4px;
 }
 
 .theme-preview-div .fa-check-circle:before {
-    background-color: var(--bg-color);
-    padding: 0px 2px;
-    border-radius: 1rem;
+  background-color: var(--bg-color);
+  padding: 0px 2px;
+  border-radius: 1rem;
 }
 
 .megamenu-menu-panel tbody tr {
-    border-radius: 0.3rem;
-    transition-duration: 0.2s;
-    transition-property: background-color;
+  border-radius: 0.3rem;
+  transition-duration: 0.2s;
+  transition-property: background-color;
 }
 
 .megamenu-menu-panel tbody tr:hover {
-    background-color: var(--borders) !important /*required important*/;
+  background-color: var(--borders) !important /*required important*/;
 }
 
 /*MIN MAX CLOSE*/
@@ -2337,56 +2401,54 @@ select:hover {
 #w-max,
 #w-restore,
 #w-close {
-    border-radius: 0px !important;
-    font-size: 10px !important;
-    width: 46px !important;
-    height: 29px !important;
+  border-radius: 0px !important;
+  font-size: 10px !important;
+  width: 46px !important;
+  height: 29px !important;
 }
 
 .btn.toolbar-icon svg,
 .btn.toolbar-icon .ty-icon {
-    position: relative;
-    top: 2px;
+  position: relative;
+  top: 2px;
 }
 
 #w-close.btn.toolbar-icon .ty-icon {
-    left: 1px;
+  left: 1px;
 }
 
 #w-close:hover {
-    background-color: var(--danger-color) !important;
-    color: white !important;
+  background-color: var(--danger-color) !important;
+  color: white !important;
 }
 
 /*EXTRA STUFF*/
 
-a[type="page-link"] {
-    display: block;
-    background-color: white;
-    box-shadow: rgba(116, 129, 141, 0.2) 0px 3px 8px 0px;
-    border: 1px solid var(--borders);
-    border-radius: 0.3rem;
-    padding: 1rem;
+a[type='page-link'] {
+  display: block;
+  background-color: white;
+  box-shadow: rgba(116, 129, 141, 0.2) 0px 3px 8px 0px;
+  border: 1px solid var(--borders);
+  border-radius: 0.3rem;
+  padding: 1rem;
 
-    font-weight: 600;
+  font-weight: 600;
 
-    transition-duration: 0.2s;
-    transition-property: border, box-shadow;
+  transition-duration: 0.2s;
+  transition-property: border, box-shadow;
 }
 
-a[type="page-link"]:hover {
-    box-shadow: rgba(116, 129, 161, 0.1) 0px 3px 8px 0px;
-    border: 1px solid var(--primary-color);
+a[type='page-link']:hover {
+  box-shadow: rgba(116, 129, 161, 0.1) 0px 3px 8px 0px;
+  border: 1px solid var(--primary-color);
 }
 
-p[type="description"] {
-    color: var(--light-text-color);
-    margin: 0rem;
-    margin-bottom: 1rem;
+p[type='description'] {
+  color: var(--light-text-color);
 }
 
 /*kbd*/
 
 kbd {
-    font-family: var(--font-family);
+  font-family: var(--font-family);
 }
diff --git a/src/gitbook-slate.css b/src/gitbook-slate.css
old mode 100644
new mode 100755
index b153775..fc8af9b
--- a/src/gitbook-slate.css
+++ b/src/gitbook-slate.css
@@ -22,6 +22,7 @@ body {
   font-size: 0.95rem;
   max-width: 850px;
   margin: 0 auto;
+  margin-top: 1rem;
   padding: 30px;
   padding-bottom: 100px;
   position: static;
@@ -108,33 +109,33 @@ h6 code {
 }
 
 h1 {
-  font-size: 1.9rem;
+  font-size: 2.2rem;
   font-weight: 700;
   line-height: 1.5;
   margin-top: 3rem;
-  margin-bottom: 0.8rem;
+  margin-bottom: 0.5rem;
   padding-bottom: 0.2rem;
   border-bottom: solid 1px var(--borders);
 }
 
 h2 {
-  font-size: 1.5rem;
+  font-size: 1.7rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 2.5rem;
+  margin-top: 2rem;
   margin-bottom: 0.5rem;
 }
 
 h3 {
-  font-size: 1.2rem;
+  font-size: 1.375rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 2rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 h4 {
-  font-size: 1rem;
+  font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.5;
   margin-top: 1.5rem;
@@ -142,18 +143,18 @@ h4 {
 }
 
 h5 {
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 1.3rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 h6 {
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.5;
-  margin-top: 1.3rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
@@ -174,37 +175,37 @@ h6 {
 
 #write > h1.md-focus:before {
   content: 'h1';
-  top: 1.1rem;
+  top: 1.15rem;
   left: -1.75rem;
 }
 
 #write > h2.md-focus:before {
   content: 'h2';
-  top: 0.73rem;
+  top: 0.75rem;
   left: -1.75rem;
 }
 
 #write > h3.md-focus:before {
   content: 'h3';
-  top: 0.45rem;
+  top: 0.575rem;
   left: -1.75rem;
 }
 
 #write > h4.md-focus:before {
   content: 'h4';
-  top: 0.3rem;
+  top: 0.4rem;
   left: -1.75rem;
 }
 
 #write > h5.md-focus:before {
   content: 'h5';
-  top: 0.2rem;
+  top: 0.25rem;
   left: -1.75rem;
 }
 
 #write > h6.md-focus:before {
   content: 'h6';
-  top: 0.2rem;
+  top: 0.25rem;
   left: -1.75rem;
 }
 
@@ -947,7 +948,7 @@ input[type='checkbox']:checked:after {
 }
 
 .sidebar-tab {
-  font-weight: 500;
+  text-transform: capitalize;
   color: var(--light-text-color);
 }
 
@@ -1072,6 +1073,21 @@ input[type='checkbox']:checked:after {
   padding-right: 0.5rem;
 }
 
+#toc-dropmenu .outline-label {
+  line-height: 1rem;
+}
+
+#toc .outline-title {
+  margin-top: 9px;
+  font-size: 1rem;
+  font-weight: 500;
+  user-select: none;
+}
+
+#pin-outline-btn {
+  padding: 14px 18px 0px 0px;
+}
+
 /*sidebar file-list and search results*/
 
 #file-library-list[data-state='complete'] #sidebar-loading-template {
@@ -1253,7 +1269,9 @@ input[type='checkbox']:checked:after {
   transition-property: background-color, color;
 }
 
-#typora-sidebar #ty-sidebar-footer li:not(.file-sort-item):not(:first-child):hover {
+#typora-sidebar
+  #ty-sidebar-footer
+  li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover {
   color: var(--primary-color);
   background-color: var(--boxes);
 }
@@ -1330,6 +1348,16 @@ input[type='checkbox']:checked:after {
   border: none;
 }
 
+.typora-quick-open-item-path {
+  opacity: 1;
+  color: var(--light-text-color);
+}
+
+.typora-quick-open-item:hover .typora-quick-open-item-path {
+  opacity: 0.7;
+  color: var(--primary-color);
+}
+
 .ty-quick-open-category-title {
   font-size: 10px;
   font-weight: 700;
@@ -1515,6 +1543,7 @@ input[type='checkbox']:checked:after {
   padding: 0.4rem !important /*required*/;
   color: var(--light-text-color-darker);
   font-weight: 500;
+  cursor: pointer;
 }
 
 .export-item.active {
@@ -1580,6 +1609,7 @@ header .menu-style-btn:hover {
 
 .dropdown-menu .divider {
   border-color: var(--borders);
+  opacity: 1;
 }
 
 /*BUTTON*/
@@ -1886,47 +1916,85 @@ button.active,
   box-shadow: none;
 }
 
-/*NUMBER-INPUT*/
-
-input[type='text']::placeholder {
-  color: var(--light-text-color-brighter) !important;
-}
+/*SELECT*/
+/*TEXT INPUT*/
+/*NUMBER INPUT*/
 
-input[type='number'] {
-  background-color: var(--boxes) !important;
-  border: none !important;
-  border-radius: 0.3rem;
-}
-
-input[type='number']:focus {
-  background-color: var(--item-hover-bg-color) !important;
-}
-
-/*SELECTS*/
-
-select {
+html select,
+html input[type='text'],
+html input[type='number'] {
   background-color: var(--bg-color) !important;
   border-radius: 0.3rem !important;
-  border: solid 1px var(--boxes-darker2) !important;
+  border: solid 1px var(--boxes-darker) !important;
   box-shadow: none !important;
-  color: var(---heading-text-color) !important;
+  color: var(--text-color) !important;
   font-size: 0.9rem !important;
   font-weight: 500 !important;
   padding: 0.3rem !important;
-  height: 2.1rem;
+  height: 2.1rem !important;
   transition-duration: 0.2s;
   transition-property: border;
+  cursor: text;
+}
+
+select {
+  cursor: pointer !important;
 }
 
-select:hover {
+input[type='text'],
+input[type='number'] {
+  cursor: text;
+}
+
+html select:hover,
+html input[type='text']:hover,
+html input[type='number']:hover {
   background-color: var(--bg-color) !important;
-  border-radius: 0r3em !important;
-  border-color: var(--primary-color) !important;
-  box-shadow: none !important;
-  color: var(--heading-text-color) !important;
+  border-radius: 0.3rem !important;
+  border-color: var(--boxes-darker2) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+  color: var(--text-color) !important;
   font-size: 0.9rem !important;
 }
 
+html select:focus,
+html input[type='text']:focus,
+html input[type='number']:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+}
+
+input[type='text']::placeholder,
+input[type='number']::placeholder {
+  color: var(--light-text-color-brighter) !important;
+}
+
+input[disabled],
+input[disabled]:hover,
+input[disabled]:focus {
+  cursor: not-allowed;
+}
+
+/*TEXTAREA*/
+
+textarea {
+  background-color: transparent;
+  border: solid 1px var(--boxes-darker);
+  border-radius: 0.3rem;
+  transition-duration: 0.2s;
+}
+
+textarea:hover {
+  border-color: var(--boxes-darker2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  outline: none;
+}
+
 /*MODAL*/
 
 .modal-header,
@@ -2320,8 +2388,6 @@ a[type='page-link']:hover {
 
 p[type='description'] {
   color: var(--light-text-color);
-  margin: 0rem;
-  margin-bottom: 1rem;
 }
 
 /*kbd*/
diff --git a/src/gitbook-teal.css b/src/gitbook-teal.css
old mode 100644
new mode 100755
index 8a9856e..d8323bd
--- a/src/gitbook-teal.css
+++ b/src/gitbook-teal.css
@@ -77,6 +77,7 @@ body {
   font-size: 0.95rem;
   max-width: 850px;
   margin: 0 auto;
+  margin-top: 1rem;
   padding: 30px;
   padding-bottom: 100px;
   position: static;
@@ -163,33 +164,33 @@ h6 code {
 }
 
 h1 {
-  font-size: 1.9rem;
+  font-size: 2.2rem;
   font-weight: 700;
   line-height: 1.5;
   margin-top: 3rem;
-  margin-bottom: 0.8rem;
+  margin-bottom: 0.5rem;
   padding-bottom: 0.2rem;
   border-bottom: solid 1px var(--borders);
 }
 
 h2 {
-  font-size: 1.5rem;
+  font-size: 1.7rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 2.5rem;
+  margin-top: 2rem;
   margin-bottom: 0.5rem;
 }
 
 h3 {
-  font-size: 1.2rem;
+  font-size: 1.375rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 2rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 h4 {
-  font-size: 1rem;
+  font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.5;
   margin-top: 1.5rem;
@@ -197,21 +198,57 @@ h4 {
 }
 
 h5 {
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   font-weight: 700;
   line-height: 1.5;
-  margin-top: 1.3rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 h6 {
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.5;
-  margin-top: 1.3rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
+#write > h1.md-focus:before {
+  content: 'h1';
+  top: 1.15rem;
+  left: -1.75rem;
+}
+
+#write > h2.md-focus:before {
+  content: 'h2';
+  top: 0.75rem;
+  left: -1.75rem;
+}
+
+#write > h3.md-focus:before {
+  content: 'h3';
+  top: 0.575rem;
+  left: -1.75rem;
+}
+
+#write > h4.md-focus:before {
+  content: 'h4';
+  top: 0.4rem;
+  left: -1.75rem;
+}
+
+#write > h5.md-focus:before {
+  content: 'h5';
+  top: 0.25rem;
+  left: -1.75rem;
+}
+
+#write > h6.md-focus:before {
+  content: 'h6';
+  top: 0.25rem;
+  left: -1.75rem;
+}
+
 #write > h1.md-focus:before,
 #write > h2.md-focus:before,
 #write > h3.md-focus:before,
@@ -969,7 +1006,7 @@ footer.ty-footer {
 }
 
 .sidebar-tab {
-  font-weight: 500;
+  text-transform: capitalize;
   color: var(--light-text-color);
 }
 
@@ -1094,6 +1131,21 @@ footer.ty-footer {
   padding-right: 0.5rem;
 }
 
+#toc-dropmenu .outline-label {
+  line-height: 1rem;
+}
+
+#toc .outline-title {
+  margin-top: 9px;
+  font-size: 1rem;
+  font-weight: 500;
+  user-select: none;
+}
+
+#pin-outline-btn {
+  padding: 14px 18px 0px 0px;
+}
+
 /*sidebar file-list and search results*/
 
 #file-library-list[data-state='complete'] #sidebar-loading-template {
@@ -1279,7 +1331,9 @@ footer.ty-footer {
   transition-property: background-color, color;
 }
 
-#typora-sidebar #ty-sidebar-footer li:not(.file-sort-item):not(:first-child):hover {
+#typora-sidebar
+  #ty-sidebar-footer
+  li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover {
   color: var(--primary-color);
   background-color: var(--boxes);
 }
@@ -1351,6 +1405,16 @@ footer.ty-footer {
   border: none;
 }
 
+.typora-quick-open-item-path {
+  opacity: 1;
+  color: var(--light-text-color);
+}
+
+.typora-quick-open-item:hover .typora-quick-open-item-path {
+  opacity: 0.7;
+  color: var(--primary-color);
+}
+
 .ty-quick-open-category-title {
   font-size: 10px;
   font-weight: 700;
@@ -1536,6 +1600,7 @@ footer.ty-footer {
   padding: 0.4rem !important /*required*/;
   color: var(--light-text-color-darker);
   font-weight: 500;
+  cursor: pointer;
 }
 
 .export-item.active {
@@ -1601,6 +1666,7 @@ header .menu-style-btn:hover {
 
 .dropdown-menu .divider {
   border-color: var(--borders);
+  opacity: 1;
 }
 
 /*BUTTON*/
@@ -1909,42 +1975,85 @@ button.active,
   box-shadow: none;
 }
 
-/*NUMBER-INPUT*/
-input[type='number'] {
-  background-color: var(--boxes) !important;
-  border: none !important;
-  border-radius: 0.3rem;
-}
-
-input[type='number']:focus {
-  background-color: var(--item-hover-bg-color) !important;
-}
-
-/*SELECTS*/
+/*SELECT*/
+/*TEXT INPUT*/
+/*NUMBER INPUT*/
 
-select {
+html select,
+html input[type='text'],
+html input[type='number'] {
   background-color: var(--bg-color) !important;
   border-radius: 0.3rem !important;
-  border: solid 1px var(--boxes-darker2) !important;
+  border: solid 1px var(--boxes-darker) !important;
   box-shadow: none !important;
-  color: var(---heading-text-color) !important;
+  color: var(--text-color) !important;
   font-size: 0.9rem !important;
   font-weight: 500 !important;
   padding: 0.3rem !important;
-  height: 2.1rem;
+  height: 2.1rem !important;
   transition-duration: 0.2s;
   transition-property: border;
+  cursor: text;
 }
 
-select:hover {
+select {
+  cursor: pointer !important;
+}
+
+input[type='text'],
+input[type='number'] {
+  cursor: text;
+}
+
+html select:hover,
+html input[type='text']:hover,
+html input[type='number']:hover {
   background-color: var(--bg-color) !important;
-  border-radius: 0r3em !important;
-  border-color: var(--primary-color) !important;
-  box-shadow: none !important;
-  color: var(--heading-text-color) !important;
+  border-radius: 0.3rem !important;
+  border-color: var(--boxes-darker2) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+  color: var(--text-color) !important;
   font-size: 0.9rem !important;
 }
 
+html select:focus,
+html input[type='text']:focus,
+html input[type='number']:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+}
+
+input[type='text']::placeholder,
+input[type='number']::placeholder {
+  color: var(--light-text-color-brighter) !important;
+}
+
+input[disabled],
+input[disabled]:hover,
+input[disabled]:focus {
+  cursor: not-allowed;
+}
+
+/*TEXTAREA*/
+
+textarea {
+  background-color: transparent;
+  border: solid 1px var(--boxes-darker);
+  border-radius: 0.3rem;
+  transition-duration: 0.2s;
+}
+
+textarea:hover {
+  border-color: var(--boxes-darker2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  outline: none;
+}
+
 /*MODAL*/
 
 .modal-header,
@@ -2333,8 +2442,6 @@ a[type='page-link']:hover {
 
 p[type='description'] {
   color: var(--light-text-color);
-  margin: 0rem;
-  margin-bottom: 1rem;
 }
 
 /*kbd*/