# 在Typora中使用“霞骛文楷”字体

- 连结：https://blog.guohao.asia/typora%e4%b8%ad%e4%bd%bf%e7%94%a8%e9%9c%9e%e9%aa%9b%e6%96%87%e6%a5%b7%e5%ad%97%e4%bd%93-2.html
- 发布时间：2023-10-27T14:55:49+08:00
- 作者：null

中文   英文   韩语   日语

一直非常喜欢 [ 霞骛文楷 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9naXRodWIuY29tL2x4Z3cvTHhnd1dlbkthaQ==)
的字体，这个站点为了使用这个字体甚至不惜牺牲了加载速度。现在终于找到了在 Typora 
中使用这个字体的方法。

步骤如下：

 * 在 Typora 的主题文件夹中新建一个 ==xiawu.css== 文件；
 * 将以下代码复制到文件中保存；
 * 主题选择 ==xiawu==

    ```language-default
    :root {
      /* dark color for background*/
      /* default color */
      --bg-color1: hsl(220, 13%, 18%);
      /* for most panel, context, header, etc */
      --bg-color2: rgb(33, 37, 43);
      /* for toc and table edit panel */
      --bg-color3: rgba(16, 17, 20, 0.5);
      /* for tips */
      --bg-color4: black;
      /* for blockquote, codeblock, input, etc */
      --bg-color5: rgb(29, 31, 35);
      /* light color for text and icon*/
      /* default color */
      --text-color1: hsl(220, 6%, 71%);
      /* for text on panel */
      --text-color2: rgb(220, 220, 220);
      /* for checkbox and radio */
      --text-color3: hsl(192, 6%, 40%);
      /* for tips */
      --text-color4: white;
      /* for focus mode */
      --text-color5: rgba(170, 178, 180, 0.5);
      /* link color */
      --link-color: rgb(197, 202, 210);
      /* table color */
      --table-border-color: rgb(100, 104, 116);
      --table-thead-color: rgb(31, 35, 40);
      --table-bg-color: rgb(40, 44, 52);
      --table-bg-darker-color: rgb(35, 40, 46);
      /* hover color */
      /* default hover background color */
      --hover-bg-color1: rgb(62, 66, 73);
      /* for input item */
      --hover-bg-color2: hsl(220, 9%, 14%);
      /* for button on toc and table edit panel */
      --hover-bg-color3: rgba(62, 66, 73, 0.8);
      /* default hover text color */
      --hover-text-color: white;
      /* active color */
      --active-color: var(--hover-bg-color1);
      /* input color */
      --input-color: rgb(29, 31, 35);
      /* menu divider color */
      /*   --menu-divider-color: rgb(95, 97, 101); */
      --menu-divider-color: hsl(220, 5%, 40%);
      /* scrollbar color */
      --scrollbar-thumb-color: var(--menu-divider-color);
      --scrollbar-track-color: rgba(95, 97, 101, 0.3);
      /* theme select color */
      --theme-select-color: rgba(255, 255, 255, 0.5);
      --button-color: rgb(62, 66, 73);
      --select-color: rgb(33, 37, 43);
      /* focus color */
      --focus-color: rgba(100, 100, 100, 0.8);
      --focus-ring-color: var(--focus-color);
      /* codeblock color */
      --code-red-color: hsl(355, 65%, 65%);
      --code-yellow-color: hsl(39, 67%, 69%);
      --code-cyan-color: hsl(187, 47%, 55%);
      --code-blue-color: hsl(207, 82%, 66%);
      --code-purple-color: hsl(286, 60%, 67%);
      --code-orange-color: hsl(29, 54%, 61%);
      --code-green-color: hsl(95, 38%, 62%);
      --code-grey-color: hsl(220, 9%, 55%);

      --code-select-bg-color: rgb(59,68,84);
      --code-cursor-color: hsl(220, 100%, 66%);
      /* implicit selecttion text bg color */
      --select-text-bg-color: rgb(64,72,89);
      /* implicit button color */
      --primary-color: var(--button-color);
      --primary-btn-border-color: transparent;
      --primary-btn-text-color: var(--text-color2);
      /* implicit sidebar color */
      --side-bar-bg-color: var(--bg-color2);
      --control-text-color: var(--text-color2);
      /* implicit text color */
      --text-color: var(--text-color1);
      /* implicit background color for setting menu */
      --bg-color: var(--bg-color1);
      /* implicit hover color */
      --item-hover-bg-color: var(--hover-bg-color1);
      --item-hover-text-color: var(--hover-text-color);
      /* implicit active color */
      --active-file-bg-color: var(--hover-bg-color);
      /* implicit mathjax edit panel background color */
      --rawblock-edit-panel-bd: var(--bg-color5);
      /* implicit focus mode color */
      --blur-text-color: var(--text-color5);
      /* implicit search result select color */
      --search-select-bg-color: rgb(56, 71, 95);

      --control-text-hover-color: var(--hover-text-color);
      /* implicit active file color in sidebar file menu treeview */
      --active-file-text-color: var(--hover-text-color);
      --active-file-border-color: var(--hover-text-color);

      --node-border: var(--menu-divider-color);
      --node-fill: var(--bg-color2);
      /* implicit border color in export menu of setting */
      --border-color: var(--menu-divider-color);
    }

    /* font */
    @font-face {
      font-family: "霞骛文楷","LXGW WenKai GB Screen", sans-serif;;
      font-style: normal;
      font-weight: normal;
      src: local("Open Sans Regular"), url("./onedark/400.woff") format("woff");
    }

    @font-face {
      font-family: "霞骛文楷","LXGW WenKai GB Screen", sans-serif;;
      font-style: italic;
      font-weight: normal;
      src: local("Open Sans Italic"), url("./onedark/400i.woff") format("woff");
    }

    @font-face {
      font-family: "霞骛文楷","LXGW WenKai GB Screen", sans-serif;;
      font-style: normal;
      font-weight: bold;
      src: local("Open Sans Bold"), url("./onedark/700.woff") format("woff");
    }

    @font-face {
      font-family: "霞骛文楷","LXGW WenKai GB Screen", sans-serif;;
      font-style: italic;
      font-weight: bold;
      src: local("Open Sans Bold Italic"), url("./onedark/700i.woff") format("woff");
    }

    /* basic style */
    html {font-size: 16px;}

    body {
      font-family: "霞骛文楷","LXGW WenKai GB Screen", sans-serif;, "Clear Sans", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
      color: var(--text-color1);
      background: var(--bg-color1);
      line-height: 1.6;
    }

    /* text selection background color */
    .in-text-selection {background-color: --select-text-bg-color;}

    /* link */
    #write a:not([role="menuitem"]) {color: var(--link-color) !important;
    }

    #write a:not([role="menuitem"]):hover {color: var(--hover-text-color) !important;
    }

    /* h1-h6 */
    #write h1,
    #write h2,
    #write h3,
    #write h4,
    #write h5,
    #write h6 {
      margin-top: 0.5em;
      margin-bottom: 0em;
      line-height: 1em;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
      padding-top: 0.3em;
    }

    #write h1 {
      font-size: 2.5em;
      padding-bottom: 0.5em;
      border-bottom: 3px double var(--text-color5);

    }

    /* #write h1:before {content: "\00A7";}
     */
    #write h2 {
      font-size: 2em;
      padding-bottom: 0.5em;
      border-bottom: 3px double var(--text-color5);
    }

    /* #write h2:before {content: "\00A7";}
     */
    #write h3 {
      font-size: 1.75em;
      padding-bottom: 0.5em;
      border-bottom: 1px solid var(--text-color5);
    }

    #write h4 {font-size: 1.55em;}

    #write h5 {font-size: 1.35em;}

    #write h6 {font-size: 1.2em;}

    /* horizontal divider */
    hr {
      height: 1px;
      background-color: var(--text-color5);
      border: 0px;
    }

    /* list */
    ul,
    ol {padding-left: 30px;}

    /* blockquote */
    blockquote {border-left: 4px solid var(--text-color1);
      padding: 4px 15px;
      color: var(--text-color1);
      background-color: var(--bg-color5);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    blockquote blockquote {padding-right: 0em;}

    /* table */
    .md-rawblock > .md-rawblock-container table,
    .md-table-fig,
    .md-table-fig:active {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    table thead tr {background-color: var(--table-thead-color);
    }

    table tr th {
      font-weight: bold;
      border-left: 1px solid var(--table-border-color);
      border-right: 1px solid var(--table-border-color);
      text-align: left;
      margin: 0;
      padding: 6px 13px;
    }

    table tbody tr {border-top: 1px solid var(--table-border-color);
      margin: 0;
      padding: 0;
    }

    table tbody tr:nth-child(2n) {background-color: var(--table-bg-darker-color);
    }

    table tbody tr:nth-child(2n + 1) {background-color: var(--table-bg-color);
    }

    table tr td {border-left: 1px solid var(--table-border-color);
      border-right: 1px solid var(--table-border-color);
      text-align: left;
      margin: 0;
      padding: 6px 13px;
    }

    table tr th:first-child,
    table tr td:first-child {border-left-width: 0px;}

    table tr th:last-child,
    table tr td:last-child {border-right-width: 0px;}

    /* table edit panel */
    .ty-table-edit {background-color: var(--bg-color3);
      border: 0px;
      border-radius: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 6px;
      padding-right: 6px;
      margin-top: -29px !important;
    }

    /* button on table edit panel */
    .ty-table-edit button {
      background-color: transparent;
      color: var(--text-color2);
      border: 0px;
      margin-left: 0px !important;
    }

    /* button hover on table edit panel */
    .ty-table-edit button:hover {background-color: var(--hover-bg-color3);
      color: var(--hover-text-color);
    }

    /* adjusting table panel */
    .popover {background-color: var(--bg-color2);
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    }

    /* arrow of adjusting table panel */
    .popover.bottom > .arrow:after {border-bottom-color: var(--bg-color2);
    }

    /* divider in adjust table panel */
    .md-grid-board-wrap .popover-title {border-top-color: var(--menu-divider-color);
    }

    /* grid size */
    .md-grid-board a {
      width: 15px;
      height: 15px;
    }

    /* existing thread grid */
    .md-grid-board tr[row="1"] .md-grid-ext {background-color: rgb(60, 60, 60);
    }

    /* not existing thread grid */
    .md-grid-board tr[row="1"] {background-color: rgb(220, 220, 220);
    }

    /* existing grid */
    .md-grid-board .md-grid-ext {background-color: rgb(120, 120, 120);
    }

    /* selected thread grid */
    .md-grid-board tr[row="1"] a.md-active,
    .md-grid-board tr[row="1"] a:hover {background-color: rgb(60, 60, 60);
    }

    /* selected grid */
    .md-grid-board a.md-active,
    .md-grid-board a:hover {border-color: var(--menu-divider-color);
      background-color: rgb(120, 120, 120);
    }

    /* task */
    .md-task-list-item > input {margin-left: -1.3em;}

    /* footnote */
    sup.md-footnote {color: var(--text-color1);
      background-color: var(--bg-color2);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* mathjax */
    /* .mathjax-block>.code-tooltip {bottom: .375rem;}
    .md-mathjax-midline {background: #fafafa;} */
    .md-inline-math script {color: var(--text-color1);
    }

    .on-focus-mode #write svg {opacity: 1;}

    .md-rawblock > .md-rawblock-container {transition: 0.5s;}

    .md-rawblock > .md-rawblock-tooltip {
      transition: 0.5s;
      display: block;
      visibility: hidden;
      opacity: 0;
    }

    .md-rawblock:hover > .md-rawblock-tooltip {
      transition: 0.5s;
      visibility: visible;
      opacity: 1;
      animation: none;
    }

    /* meta information of image */
    .md-image > .md-meta {
      border: 0px;
      padding: 2px 0px 0px 4px;
      font-size: 0.9em;
      color: var(--text-color1);
    }

    /* input */
    input {background-color: var(--input-color) !important;
      border: 0px !important;
      border-radius: 6px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* input hover */
    /* input:hover {background-color: var(--hover-bg-color2) !important;
    } */
    /* checkbox */
    input[type="checkbox"]:before {
      content: "";
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      vertical-align: middle;
      text-align: center;
      border: 0px;
      border-radius: 3px;
      background-color: var(--input-color);
      margin-top: -0.5rem;
      margin-left: -0.2rem;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* checkbox hover */
    input[type="checkbox"]:not([disabled]):not(:checked):hover:before {
      content: "\2713";
      font-size: 0.9rem;
      line-height: 1.2rem;
      color: var(--text-color3);
    }

    /* checkbox checked*/
    input[type="checkbox"]:checked:before {
      content: "\2713";
      font-size: 0.9rem;
      line-height: 1.2rem;
      color: var(--text-color2);
    }

    /* checkbox checked hover*/
    input[type="checkbox"]:checked:hover:before {
      content: "\2713";
      font-size: 0.9rem;
      line-height: 1.2rem;
      color: var(--hover-text-color);
    }

    /* radio */
    input[type="radio"]:before {
      content: "";
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      vertical-align: middle;
      text-align: center;
      border: 0px;
      border-radius: 0.55rem;
      background-color: var(--input-color);
      margin-top: -0.4rem;
      margin-left: -0.1rem;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* radio hover */
    input[type="radio"]:not([disabled]):not(:checked):hover:before {
      content: "\25CF";
      font-size: 1rem;
      line-height: 1rem;
      color: var(--text-color3);
    }

    /* radio checked */
    input[type="radio"]:checked:before {
      content: "\25CF";
      font-size: 1rem;
      line-height: 1rem;
      color: var(--text-color2);
    }

    /* radio checked hover*/
    input[type="radio"]:checked:before {
      content: "\25CF";
      font-size: 1rem;
      line-height: 1rem;
      color: var(--hover-text-color);
    }

    /* default focus style */
    :focus {outline-color: var(--focus-color);
    }

    /* exit source view button */
    .typora-sourceview-on #toggle-sourceview-btn {background-color: var(--bg-color2);
    }

    .typora-sourceview-on #toggle-sourceview-btn:hover {background-color: var(--hover-bg-color1);
    }

    /* shadow for image item*/
    .md-image img {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* toc */
    .md-toc {background-color: var(--bg-color3);
      border-radius: 6px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      border: 0px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* toc content */
    .md-toc-content {
      padding-top: 5px;
      padding-bottom: 8px;
      margin-top: 15px;
      margin-bottom: 0px;
    }

    /* remove outline when toc is selected */
    .md-toc:focus .md-toc-content {
      border: 0px;
      margin: 0px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* toc item */
    .md-toc-item {margin: 2px;}

    /* toc edit panel */
    #write div.md-toc-tooltip {
      border: 0px;
      padding-left: 10px;
      padding-right: 10px;
      background-color: var(--bg-color3);
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      opacity: 0;
      visibility: hidden;
      display: block !important;
      transition: 0.3s;
    }

    #write .md-toc:focus div.md-toc-tooltip {
      visibility: visible;
      opacity: 1;
    }

    #write .md-toc:focus {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }

    /* toc delete button */
    .md-delete-toc {background-color: transparent;}

    /* html block */
    .md-htmlblock:hover .md-htmlblock-container {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      border-top-right-radius: 0px;
    }

    /* search panel */
    #md-searchpanel {background-color: var(--bg-color2);
      color: var(--text-color2);
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    }

    /* ignore case button and find whole word button */
    .searchpanel-search-option-btn {border: 0px;}

    /* button on search panel */
    #md-searchpanel .btn:hover {color: var(--hover-text-color);
      background-color: var(--hover-bg-color1) !important;
    }

    /* remove shadow around input in search panel*/
    #md-searchpanel input {box-shadow: none;}

    /* search option button hover */
    .searchpanel-search-option-btn:not(.active):hover {color: var(--hover-text-color);
      background-color: var(--hover-bg-color1);
    }

    /* close button in search panel */
    #md-searchpanel .input-group-addon.close-btn {
      padding-left: 16px;
      padding-right: 16px;
    }

    /* replaceall button */
    .ty-replace-panel-row #search-panel-replaceall-btn {
      padding-left: 8px;
      padding-right: 6px !important;
    }

    /* replace button */
    .ty-replace-panel-row #search-panel-replace-btn {
      padding-left: 16px;
      padding-right: 16px;
    }

    /* sidebar */
    .sidebar-menu {color: var(--text-color2);
    }

    /* sidebar shadow */
    #typora-sidebar,
    .typora-node #typora-sidebar {box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    }

    /* divider between file item and search */
    .ty-sidebar-search-panel {border-color: var(--menu-divider-color);
    }

    /* file item in sidebar */
    #file-library .file-list-item {
      border-bottom: 0px;
      opacity: 1;
      border-left: 4px solid;
      border-color: var(--bg-color2);
    }

    /* file item hover */
    #file-library .file-list-item:hover {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
      border-color: var(--hover-bg-color1);
    }

    /* file item active */
    #file-library .file-list-item.active {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
      border-color: var(--hover-text-color);
    }

    /* suffix of file item*/
    .file-list-item-file-ext-part {opacity: 0.8;}

    /* sidebar file menu */
    #sidebar-files-menu {
      border: 0px;
      box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.5);
    }

    /* sidebar file menu item */
    .dropdown-menu > li > a {color: var(--text-color2);
    }

    .dropdown-menu > li > a:hover {color: var(--hover-text-color);
    }

    /* sidebar file menu close button */
    #close-sidebar-menu-btn:hover {color: var(--hover-text-color);
    }

    /* sidebar file nemu divider */
    #sidebar-files-menu > .show + .menuitem-group-label.show {border-color: var(--menu-divider-color);
    }

    /* sidebar osx tab */
    .html-for-mac .sidebar-osx-tab > .sidebar-tabs {
      border: 0px;
      box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.5);
    }

    .html-for-mac .sidebar-content {z-index: -1; /* so that the background doesn't overlap with the shadow */}

    /* sidebar footer */
    .sidebar-footer {
      border: 0px;
      box-shadow: 0 -4px 10px -5px rgba(0, 0, 0, 0.5);
    }

    /* remove outline when file item in treeview is selected*/
    .file-library-node:not(.file-node-root):focus > .file-node-content {outline: none;}

    /* sort button on sidebar file menu */
    .ty-side-sort-btn.active,
    .ty-side-sort-btn:hover {color: var(--hover-text-color);
    }

    /* setting */
    /* header in setting */
    .window-header {box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5) !important;
    }

    /* sidebar in setting */
    .sidebar {background-color: var(--bg-color2) !important;
      box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    }

    .list-group-content {margin-left: 10px !important;}

    /* sidebar button in setting menu */
    .nav-group-item {color: var(--text-color2) !important;
      border-top-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }

    /* sidebar button hover in setting menu */
    .nav-group-item:hover,
    .nav-group-item:active,
    .nav-group-item.active {background-color: var(--hover-bg-color1) !important;
      color: var(--hover-text-color) !important;
    }

    /* remove up and down button from number type input*/
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none !important;}

    /* the indent example in setting.editor */
    div[data-index="2"] .label-input-group td:last-child div {
      border: 0px !important;
      border-radius: 6px;
      background-color: var(--bg-color5);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      margin: 10px !important;
    }

    /* button in setting menu */
    .ty-preferences button.btn-default {
      border: 0px;
      background-color: var(--bg-color5);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
    }

    /* button hover in setting menu */
    .ty-preferences .btn-default:not([disabled]):hover {background-color: var(--hover-bg-color1) !important;
    }

    /* return button in setting menu */
    .window-header button:hover {color: var(--text-color2) !important;
    }

    /* search input in setting menu */
    .search-input {
      border-top-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      margin-left: 10px !important;
    }

    .search-input:focus {
      border: none !important;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) !important;
    }

    /* select item (mostly in setting menu) */
    select {
      border: 0px;
      border-radius: 6px;
      background-color: var(--input-color) !important;
      padding-top: 5px !important;
      padding-bottom: 5px !important;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* enabled select item hover */
    select:not([disabled]):hover {color: var(--text-color2);
      opacity: 1;
    }

    /* disabled select item hover */
    select[disabled]:hover {opacity: 0.5;}

    /* mega menu */
    .megamenu-content,
    .megamenu-opened header {background: var(--bg-color1);
    }

    .megamenu-content {
      display: block;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
    }

    .megamenu-opened .megamenu-content {
      visibility: visible;
      opacity: 1;
      animation: none;
    }

    /* mega menu sidebar*/
    .megamenu-menu {background-color: var(--bg-color2);
      box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    }

    /* return button in mega menu */
    #megamenu-menu-sidebar .menu-style-btn {border: 0px;}

    /* remove divider in mega menu */
    .megamenu-menu-header {border-color: var(--menu-divider-color);
    }

    /* return button color in mega menu */
    .megamenu-menu-header #megamenu-menu-header-title {color: var(--text-color2);
    }

    /* return button hover in mega menu */
    .megamenu-menu-header:hover {background-color: var(--hover-bg-color1);
    }

    /* return button hover in mega menu */
    .megamenu-menu-header:hover #megamenu-menu-header-title {color: var(--hover-text-color);
    }

    /* long button in mega menu */
    .long-btn {
      border: 0px;
      background-color: var(--bg-color5);
      color: var(--text-color1);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
      margin-left: 10px;
    }

    /* recent file in mega menu */
    #recent-file-panel {padding: 10px;}

    #recent-document-table {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    #recent-file-panel-action-btn {background: var(--bg-color5);
      border: 0px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    #recent-file-panel thead tr {background-color: var(--table-thead-color);
    }

    #recent-file-panel tbody tr:nth-child(2n) {background-color: var(--table-bg-darker-color);
    }

    #recent-file-panel tbody tr:nth-child(2n + 1) {background-color: var(--table-bg-color);
    }

    #recent-file-panel-action-btn:hover {background-color: var(--hover-bg-color1);
      color: var(--text-color2);
    }

    /* theme preview */
    .theme-preview-div {box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.8);
    }

    /* theme preview hover */
    .theme-preview-div:hover {border-color: var(--theme-select-color);
    }

    /* context menu and spell check panel */
    .dropdown-menu:not(.megamenu-menu-list) {background-color: var(--bg-color2);
      color: var(--text-color2);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }

    /* divider in context menu and spell check panel */
    .dropdown-menu .divider {border-color: var(--menu-divider-color);
    }

    /* remove divider outline */
    .dropdown-menu {border: 0px;}

    /* footer */
    footer.ty-footer {
      border-top: 0px !important;
      background-color: var(--bg-color2) !important;
      /*     color: var(--text-color2); */
      box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.5);
    }

    /* footer item */
    .footer-item,
    #outline-btn,
    #footer-word-count {color: var(--text-color2);
      opacity: 1;
    }

    /* footer item hover */
    .footer-item:hover,
    #outline-btn:hover {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
    }

    /* button on some panel */
    .btn {
      border: 0px;
      outline-width: 0px !important;
    }

    .btn:hover {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
    }

    /* traffic button hover */
    #top-titlebar .toolbar-icon.btn:hover {color: var(--text-color2);
      background-color: var(--hover-bg-color1);
    }

    /* traffic button hover */
    #top-titlebar #w-close:hover {background-color: #e81123 !important;}

    /* adjust maxmize restore button height */
    .typora-maxmized #w-restore {height: 24px;}

    /* left upper button hover */
    .ty-menu-btn-area:hover .ty-menu-btn-area-sub {color: var(--text-color2) !important;
    }

    /* scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      padding-right: 10px;
      background-color: rgba(0, 0, 0, 0);
    }

    /* scrollbar track */
    ::-webkit-scrollbar-track:hover {background-color: var(--scrollbar-track-color) !important;
      border-radius: 4px;
    }

    /* scrollbar thumb */
    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:active {background-color: var(--scrollbar-thumb-color) !important;
      border-radius: 4px;
    }

    /* tip when hover on a button */
    #ty-tooltip {background-color: var(--bg-color4);
      color: var(--text-color4);
    }

    /* item container hover in context menu */
    .menu-item-container:hover {background-color: var(--bg-color2);
    }

    /* item in context menu */
    .menu-item-container .menu-style-btn {border-color: var(--menu-divider-color);
    }

    /* mathjax edit panel*/
    .md-rawblock-before {border-top-left-radius: 6px;}

    .md-rawblock-after {
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }

    /* mathjax focus */
    .MathJax_SVG:focus {
      outline: none;
      background-color: transparent;
    }

    /* notification panel */
    #md-notification {background-color: var(--bg-color2) !important;
      color: var(--text-color2);
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    }

    #ty-surpress-mode-warning-close-btn {
      float: unset !important;
      margin: 0px !important;
    }

    .unibody-window #md-notification p {bottom: -4px !important;}

    /* inline codeblock */
    code {
      font-size: 0.9em;
      background-color: var(--bg-color5);
      border-radius: 6px;
      padding: 4px 4px 4px 4px;
      margin: 0px 0px 0px 0px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* codeblock */
    .md-fences,
    .md-fences:active {background-color: var(--bg-color5);
      border-radius: 6px;
      padding: 8px 4px 8px 4px !important;
      margin-top: 15px;
      margin-bottom: 15px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    .md-fences .code-tooltip {
      display: block !important;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
      background-color: var(--bg-color3);
    }

    .md-fences.md-focus .code-tooltip {
      opacity: 1;
      visibility: visible;
    }

    .CodeMirror-lines {padding-left: 4px;}

    /* selected text and cursor */
    .CodeMirror-selected,
    .CodeMirror-selectedtext {background: var(--code-select-bg-color) !important;
    }

    .CodeMirror div.CodeMirror-cursor {border-left: 2px solid var(--code-cursor-color);
      z-index: 3;
    }

    .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {border-left: 3px solid var(--code-cursor-color);
    }

    /* highlight */
    .cm-s-inner .cm-property {color: var(--code-blue-color) !important;
    }

    .cm-s-inner .cm-operator {color: var(--code-cyan-color) !important;
    }

    .cm-s-inner .cm-keyword {color: var(--code-purple-color) !important;
    }

    .cm-s-inner .cm-tag {color: var(--code-red-color) !important;
    }

    .cm-s-inner .cm-attribute {color: var(--code-orange-color) !important;
    }

    .cm-s-inner .cm-string {color: var(--code-green-color) !important;
    }

    .cm-s-inner .cm-comment,
    .cm-s-inner.cm-comment {/*     color: var(--code-orange-color) !important; */
      color: var(--code-grey-color) !important;
      font-style: italic;
    }

    .cm-s-inner .cm-header,
    .cm-s-inner .cm-def,
    .cm-s-inner.cm-header,
    .cm-s-inner.cm-def {/*     color: var(--code-red-color) !important; */
      color: var(--code-blue-color) !important;
    }

    .cm-s-inner .cm-meta,
    .cm-s-inner .cm-qualifier {color: var(--code-red-color) !important;
    }

    .cm-s-inner .cm-builtin {/*     color: var(--code-blue-color) !important; */
      color: var(--code-cyan-color) !important;
    }

    .cm-s-inner .cm-bracket {color: var(--text-color1) !important;
    }

    .cm-s-inner .cm-number {color: var(--code-orange-color) !important;
    }

    .cm-s-inner .cm-variable {color: var(--text-color1) !important;
    }

    .cm-s-inner .cm-variable-2 {/*     color: var(--code-blue-color) !important; */
      color: var(--code-yellow-color) !important;
    }

    .cm-s-typora-default .cm-header,
    .cm-s-typora-default .cm-property {color: var(--code-red-color) !important;
    }

    .cm-s-typora-default .cm-string {/*     color: var(--code-blue-color); */
      color: var(--code-purple-color);
    }

    .cm-s-typora-default .cm-atom {color: var(--code-grey-color);
      font-style: italic;
    }

    .cm-s-typora-default .cm-number {color: var(--code-orange-color);
      font-style: normal !important;
    }

    .cm-s-typora-default .cm-link {color: var(--code-blue-color);
    }

    .cm-s-typora-default .CodeMirror-activeline-background {background: var(--hover-bg-color1);
    }

    .cm-s-typora-default .cm-comment,
    .cm-s-typora-default .cm-code {color: var(--code-purple-color);
    }

    .cm-s-typora-default .cm-tag {/*     color: var(--code-red-color); */
      color: var(--code-blue-color);
    }

    .cm-s-typora-default .cm-strong,
    .cm-s-typora-default .cm-em,
    .cm-s-typora-default .cm-del {/*     color: var(--code-green-color); */
      color: var(--code-orange-color);
    }

    .cm-s-typora-default .cm-block-start.cm-variable-2 {/*     color: var(--code-orange-color); */
      color: var(--code-red-color);
    }

    .cm-formatting-task .cm-formatting-task {color: var(--code-red-color);
    }

    /* math formula tag */
    .cm-s-inner .cm-atom,
    .cm-s-inner.cm-atom {color: var(--code-blue-color);
    }

    /* inline codeblock in source mode */
    .cm-s-typora-default .cm-comment {color: var(--code-green-color);
    }

    /* horizontal divider when language is markdown */
    .cm-s-inner .cm-hr {color: var(--text-color1);
    }

    /* variable type when language is c/cpp */
    .cm-s-inner .cm-variable-3 {color: var(--code-purple-color);
    }

    /* in pie chart and flowchart */
    .cm-s-inner .cm-quote,
    .cm-s-inner.cm-quote {color: var(--code-green-color);
    }

    /* unknown highlight keyword */
    .cm-s-inner .cm-link {color: var(--code-blue-color);
    }

    .cm-s-inner .cm-negative {color: #d95050;}

    .cm-s-inner .cm-positive {color: #50e650;}

    .cm-s-inner .cm-string-2 {color: #f50;}

    .CodeMirror-gutters {border-right: none;}

    /* focus mode */
    .on-focus-mode .md-end-block:not(.md-focus) .md-toc-item {opacity: 0.5;}

    .on-focus-mode #write h1:not(.md-focus):before {opacity: 0.5;}

    .on-focus-mode #write h2:not(.md-focus):before {opacity: 0.5;}

    .on-focus-mode #write h1:not(.md-focus) {border-color: var(--text-color5);
    }

    .on-focus-mode #write h2:not(.md-focus) {border-color: var(--text-color5);
    }

    .on-focus-mode #write h3:not(.md-focus) {border-color: var(--text-color5);
    }

    /* YAML block */
    pre.md-meta-block,
    pre.md-meta-block:active {background-color: var(--bg-color5);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      padding: 10px;
      padding-left: 20px;
      padding-right: 20px;
    }

    /* switch between different mode */
    #typora-source {
      display: block !important;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
    }

    .typora-sourceview-on #typora-source {
      visibility: visible;
      opacity: 1;
    }

    #typora-source .CodeMirror-lines {
      max-width: 1200px;
      padding-left: 70px;
      padding-right: 70px;
    }

    #write {
      display: block !important;
      visibility: visible;
      opacity: 1;
      transition: 0.3s;
      max-width: 1200px;
      padding-left: 70px;
      padding-right: 70px;
    }

    .typora-sourceview-on #write {
      visibility: hidden;
      opacity: 0;
    }

    /* #md-searchpanel {
        visibility: hidden;
        opacity: 0;
        transition: 0.3s !important;
    }

    .on-search-panel-open #md-searchpanel {
        visibility: visible;
        opacity: 1;
    } */

    .uni-preference-panel {
      display: block;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
    }

    .show-preference-panel .uni-preference-panel {
      visibility: visible;
      opacity: 1;
    }

    /* quick open menu */
    .typora-quick-open-item:hover {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
    }

    /* insert table panel */
    .modal-content {
      border: 0px !important;
      border-radius: 6px !important;
    }

    .modal-content .btn-primary {
      background-color: transparent;
      color: var(--text-color1);
      outline-width: 0px;
      border: none;
      border-radius: 3px;
    }

    .modal-content .btn-default {background-color: var(--hover-bg-color1);
      border: none;
      border-radius: 3px;
    }

    .modal-content .btn-primary:hover {color: var(--hover-text-color);
      background-color: var(--hover-bg-color1);
    }

    .modal-content .form-control,
    .modal-content .form-control:focus {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    /* zoom  */
    #zoom-hint #zoom-hint-reset {color: var(--text-color1);
    }

    #zoom-hint .zoom-hint-button:hover {color: var(--hover-text-color) !important;
    }

    /* word count */
    #footer-word-count-info {
      display: block;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
    }

    .ty-show-word-count #footer-word-count-info {
      visibility: visible;
      opacity: 1;
    }

    /* spell check */
    #spell-check-panel {
      display: block;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s;
    }

    .ty-show-spell-check #spell-check-panel {
      visibility: visible;
      opacity: 1;
    }

    /* search result */
    .md-search-select {border: 2px solid rgb(69, 125, 255);
      box-sizing: content-box;
      color: var(--text-color1) !important;
    }

    .md-search-hit {background-color: var(--search-select-bg-color);
    }

    /* search panel message */
    #searchpanel-msg {background-color: var(--bg-color2);
      color: var(--text-color2);
    }

    .searchpanel-msg-btn:hover {background-color: var(--hover-bg-color1);
      color: var(--hover-text-color);
    }

    /* language selection for codeblock */
    .auto-suggest-container {
      border: 0px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      background-color: var(--bg-color2);
    }

    /* sidebar outline item hover and active */
    .outline-item:hover {color: var(--hover-text-color);
    }

    .outline-label:hover {text-decoration: none;}

    .pin-outline .outline-active {color: var(--hover-text-color);
    }

    /* sidebar title hover */
    .info-panel-tab:hover {color: var(--hover-text-color) !important;
    }

    /* active file in sidebar file menu treeview */
    .file-tree-node.active > .file-node-background {background-color: var(--hover-bg-color1);
    }

    /* hover file in sidebar file menu treeview */
    .file-node-content:hover {cursor: pointer;}

    /* saved button in megamenu */
    #m-saved:hover {background-color: var(--bg-color2);
      color: var(--text-color2);
      cursor: default;
    }

    /* mermaid flowchart */
    .node rect,
    .node circle,
    .node ellipse,
    .node polygon,
    .node path {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .edgePath .path {stroke: var(--menu-divider-color) !important;
    }

    .edgePath .arrowheadPath {fill: var(--menu-divider-color) !important;
    }

    .label {color: var(--text-color1) !important;
    }

    .edgeLabel rect {fill: transparent !important;}

    .cluster rect {fill: var(--bg-color5) !important;
      stroke: var(--menu-divider-color) !important;
    }

    /* mermaid sequence*/
    rect.actor {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    text.actor tspan {fill: var(--text-color1) !important;
    }

    #crosshead path{fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
    }

    #arrowhead path{fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .messageLine0,
    .messageLine1 {stroke: var(--menu-divider-color) !important;
    }

    .messageText {fill: var(--text-color1) !important;
    }

    rect[class*="activation"] {fill: var(--bg-color2) !important;
    }

    .actor-line {stroke-width: 1px !important;}

    .labelBox {fill: var(--bg-color2) !important;
      stroke: rgb(150, 150, 150) !important;
    }

    .labelText {fill: var(--text-color1) !important;
    }

    .loopText,
    .loopText tspan
    {fill: var(--text-color1) !important;
    }

    .loopLine {stroke: rgb(180, 180, 180) !important;
    }

    .note {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .noteText tspan {fill: var(--text-color1) !important;
    }

    rect.rect {fill: var(--bg-color3);
    }

    /* mermaid class */
    g.classGroup text {fill: var(--text-color1) !important;
    }

    g.classGroup rect {stroke: var(--menu-divider-color) !important;
      fill: var(--bg-color2) !important;
    }

    g.classGroup line {stroke: var(--menu-divider-color) !important;
    }

    .classLabel .label {fill: var(--text-color1) !important;
    }

    .relation {stroke: var(--menu-divider-color) !important;
    }

    #compositionStart path,
    #compositionEnd path,
    #aggregationStart path,
    #aggregationEnd path,
    #dependencyStart path,
    #dependencyStart path,
    #extensionStart path,
    #extensionEnd path{fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .cardinality text {fill: var(--text-color1) !important;
    }

    .classLabel rect {fill: var(--bg-color3) !important;
    }

    /* mermaid state v1 */
    .stateGroup rect,
    .stateGroup line {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .stateGroup text {fill: var(--text-color1) !important;
    }

    .stateGroup circle {fill: var(--bg-color4) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .stateGroup .composit {/*   fill: rgb(36,40,47) !important; */
      fill: hsl(218, 13%, 17%) !important;
    }

    .stateGroup .alt-composit {/*   fill: rgb(36,40,47) !important; */
      fill: hsl(218, 13%, 16.5%) !important;
    }

    .state-note rect {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .state-note text {fill: var(--text-color1) !important;
    }

    .stateLabel text {fill: var(--text-color1) !important;
    }

    .stateLabel rect {fill: var(--bg-color3) !important;
    }

    #dependencyEnd {fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
    }

    /* mermaid state v2 */
    circle.state-start {fill: var(--bg-color4) !important;
      stroke: var(--menu-divider-color) !important;
    }

    circle.state-end {stroke: var(--menu-divider-color) !important;
      fill: var(--bg-color4) !important;
    }

    .divider {stroke: var(--menu-divider-color) !important;
      fill: var(--bg-color5) !important;
      fill: hsl(218, 13%, 13.5%) !important;
    }

    rect.fork-join {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .title-state {fill: var(--bg-color2) !important;
    }

    .statediagram-cluster .outer {fill: var(--bg-color3) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .cluster-label span {color: var(--text-color1);
    }

    .statediagram-cluster .inner {/*   fill: var(--bg-color2) !important; */
      fill: hsl(218, 13%, 16.5%) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .statediagram-cluster-alt .inner {/*   fill: var(--bg-color5) !important; */
      fill: hsl(218, 13%, 16%) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .transition {stroke: var(--menu-divider-color) !important;
    }

    #statediagram-barbEnd {fill: var(--menu-divider-color) !important;
    }

    /* mermaid erDiagram */
    rect.er.entityBox {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    text.er.entityLabel {fill: var(--text-color1) !important;
    }

    #ONLY_ONE_START path,
    #ONLY_ONE_END path,
    #ZERO_OR_ONE_START path,
    #ZERO_OR_ONE_END path,
    #ONE_OR_MORE_START path,
    #ONE_OR_MORE_END path,
    #ZERO_OR_MORE_START path,
    #ZERO_OR_MORE_END path {stroke: var(--menu-divider-color) !important;
    }

    #ZERO_OR_ONE_START circle,
    #ZERO_OR_ONE_END circle,
    #ZERO_OR_MORE_START circle,
    #ZERO_OR_MORE_END circle {fill: var(--bg-color) !important;
    }

    path.er.relationshipLine {stroke: var(--menu-divider-color) !important;
    }

    rect.er.relationshipLabelBox {fill: var(--bg-color3) !important;
    }

    text.er.relationshipLabel {fill: var(--text-color1) !important;
    }

    /* mermaid journey */
    .journey-section {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
    }

    .task {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
      stroke-width: 1px !important;
    }

    #arrowhead {fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
      stroke-width: 0.3px !important;
    }

    text.legend {fill: var(--text-color1) !important;
    }

    pre[mermaid-type="journey"] svg > line {stroke: var(--menu-divider-color) !important;
      stroke-width: 2px !important;
    }

    pre[mermaid-type="journey"] svg > text {fill: var(--text-color1) !important;
    }

    .task-line {stroke: var(--menu-divider-color) !important;
    }

    circle.face {fill: var(--bg-color1) !important;
      stroke: var(--text-color1) !important;
    }

    circle.face + g > circle {fill: var(--text-color1) !important;
      stroke: var(--text-color1) !important;
    }

    path.mouth,
    line.mouth {stroke: var(--text-color1) !important;
    }

    /* mermaid gantt */
    text.sectionTitle tspan{fill: var(--text-color1) !important;
    }

    .section0,
    .section2 {fill: var(--bg-color4) !important;
    }

    .section1,
    .section3 {fill: var(--table-bg-color) !important;
    }

    .task0,
    .task1,
    .task2,
    .task3 {fill: rgb(80, 84, 90) !important;
      stroke: rgb(80, 84, 90) !important;
    }

    taskText0,
    .taskText1,
    .taskText2,
    .taskText3 {fill: var(--text-color2) !important;
    }

    .active0,
    .active1,
    .active2,
    .active3 {fill: rgb(100, 104, 110) !important;
      stroke: rgb(100, 104, 110) !important;
    }

    .activeText0,
    .activeText1,
    .activeText2,
    .activeText3 {fill: var(--text-color2) !important;
    }

    .done0,
    .done1,
    .done2,
    .done3 {fill: rgb(48, 51, 58) !important;
      stroke: rgb(48, 51, 58) !important;
    }

    .crit0,
    .crit1,
    .crit2,
    .crit3 {fill: rgb(150, 150, 150) !important;
      stroke: var(--text-color1) !important;
    }

    .activeCrit0,
    .activeCrit1,
    .activeCrit2,
    .activeCrit3 {fill: rgb(100, 104, 110) !important;
      stroke: var(--text-color1) !important;
    }

    .doneCrit0,
    .doneCrit1,
    .doneCrit2,
    .doneCrit3 {fill: rgb(48, 51, 58) !important;
      stroke: var(--text-color1) !important;
    }

    .taskTextOutside0,
    .taskTextOutside1,
    .taskTextOutside2,
    .taskTextOutside3 {fill: var(--text-color1) !important;
    }

    .grid text {fill: var(--text-color1) !important;
    }

    .today {stroke: var(--text-color1) !important;
    }

    /* mermaid pie chart */
    .pieTitleText {fill: var(--text-color1) !important;
    }


    g.legend > text {fill: var(--text-color1) !important;
    }

    g.legend > rect {stroke: var(--bg-color) !important;
    }

    g > path {stroke: var(--bg-color) !important;
    }

    g > text.slice {fill: var(--bg-color) !important;
    }

    /* flow diagram */
    .md-fences[lang="flow"] .md-diagram-panel-preview rect {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
      stroke-width: 1.2 !important;
    }

    .md-fences[lang="flow"] .md-diagram-panel-preview path {stroke: var(--menu-divider-color) !important;
      stroke-width: 1.2 !important;
    }

    .md-fences[lang="flow"] #cond {fill: var(--bg-color2) !important;
    }

    /* sequence diagram */
    .md-fences[lang="sequence"] .md-diagram-panel-preview rect:not([fill="none"]) {fill: var(--bg-color2) !important;
      stroke: var(--menu-divider-color) !important;
      stroke-width: 1.2 !important;
    }

    .md-fences[lang="sequence"] .md-diagram-panel-preview path {fill: var(--menu-divider-color) !important;
      stroke: var(--menu-divider-color) !important;
      stroke-width: 1.2 !important;
    }

    .md-fences[lang="sequence"] text,
    .md-fences[lang="flow"] text {font-family: "Consolas" !important;}

    /* remove box shadow when not edit graph */
    .md-fences[lang="sequence"]:not(.md-focus),
    .md-fences[lang="mermaid"]:not(.md-focus),
    .md-fences[lang="flow"]:not(.md-focus) {box-shadow: none;}

    /* remove border when edit graph */
    .md-diagram-panel {border: none !important;}

    kbd {background: var(--bg-color5);
      color: var(--text-color1);
      font-family: "Lucida Console";
      border-color: var(--menu-divider-color);
      box-shadow: 0 2px 0 var(--menu-divider-color);
    }

    /* new export menu in setting */
    .export-detail {color: var(--text-color1) !important;
      background: transparent !important;
    }

    .export-item.active {background: var(--hover-bg-color1) !important;
      border-radius: 6px !important;
    }

    .export-detail textarea{background: var(--bg-color5);
      border: none;
      border-radius: 6px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    .export-items-list-control {background: var(--bg-color2) !important;
      border-radius: 6px !important;
    }

    .icon-dot-3:before {color: var(--text-color1);
      z-index: 1;
    }

    .row.text-input select {width: 510px !important;}
    ```