---
description:
- 頁面中使用 `{%hackmd Sy2vpo_Fkl %}` 即可套上樣式。
- 頁面中使用 `{%hackmd @debbylin/theme-matcha-book %}` 即可套上樣式
---

<style>
/* Colors */
body {
--text-primary: #80986a;
--text-primary-dark: #617a40;
--text-basic: #a2a2a2;

--bg-color: #f6f4f1;
--bg-gray: #efedea;
--bg-grren: #e1e3d9;

--border-gray: #e7e7e7;
}

.book-container {
border-left: 1px solid var(--border-gray);
box-shadow: none;
}

.book-container.open {
border-left: 1px solid var(--border-gray);
}

.summary {
border-right: none;
box-shadow: none;
background: var(--bg-color);
}

.summary #summary {
padding-left: 10px;
padding-right: 10px;
}
body.ui-book-mode-body {
background-color: var(--bg-color) !important;
}

/* Collapsible padding 📂 */
.summary h1, .summary h2,
.summary h3, .summary h4,
.summary h5, .summary h6 {
padding: 12px;
}

/* Collapsible icon 📂 */
.summary .heading-span:before ,
.summary .nav>li>a:before,
.summary h2:before, .summary h3:before,
.summary h4:before, .summary h5:before {
font-family: "FontAwesome";
font-size: 75%;
transition: .2s all;
transform: translatey(-8%);
display: inline-block;
margin-right: 5px;
opacity: .45;
}
.summary .heading-span:before {
content:"\f07b";
}
.summary .collapsible-icons {
margin-top: 0;
margin-left: .5rem;
}

.summary h2:not(.collapsible),
.summary h3:not(.collapsible),
.summary h4:not(.collapsible),
.summary h5:not(.collapsible) {
opacity: .8;
}

.summary h2:not(.collapsible):before,
.summary h3:not(.collapsible):before,
.summary h4:not(.collapsible):before,
.summary h5:not(.collapsible):before {
content: "\f078";
font-size: 60%;
transform: translatey(10%);
}

.summary h1.collapsible:not(:first-child),
.summary h2.collapsible:not(:first-child),
.summary h3.collapsible:not(:first-child),
.summary h4.collapsible:not(:first-child),
.summary h5.collapsible:not(:first-child),
.summary h6.collapsible:not(:first-child) {
border-top: none;
margin-bottom: 0px;
margin-top: 5px;
}

/* Collapsible 展開的樣式 📂 */
.summary h1.collapsible,
.summary h2.collapsible,
.summary h3.collapsible,
.summary h4.collapsible,
.summary h5.collapsible,
.summary h6.collapsible {
border-radius: 6px;
background-color: var(--bg-grren);
color: var(--text-primary);
margin-bottom: 0px;
}

/* Collapsible 收起的樣式 📂 */
.summary h1.collapsible.collapsed,
.summary h2.collapsible.collapsed,
.summary h3.collapsible.collapsed,
.summary h4.collapsible.collapsed,
.summary h5.collapsible.collapsed,
.summary h6.collapsible.collapsed {
background-color: var(--bg-grren);
color: var(--text-primary);
}

/* Collapsible hover 背景色 📂 */
.summary h1.collapsible:not(:first-child):hover,
.summary h2.collapsible:not(:first-child):hover,
.summary h3.collapsible:not(:first-child):hover,
.summary h4.collapsible:not(:first-child):hover,
.summary h5.collapsible:not(:first-child):hover,
.summary h6.collapsible:not(:first-child):hover {
transition: .1s all;
background-color: var(--bg-grren);
}

/* 移除收合 > */
.summary h1 .collapsible-icons,
.summary h2 .collapsible-icons,
.summary h3 .collapsible-icons,
.summary h4 .collapsible-icons,
.summary h5 .collapsible-icons,
.summary h6 .collapsible-icons {
display: none;
}

.summary h1+.nav,
.summary h2+.nav,
.summary h3+.nav,
.summary h4+.nav,
.summary h5+.nav,
.summary h6+.nav {
padding-left: 16px;
padding-right: 0px;
padding-top: 4px;

}

/* Page title */
.summary .nav>li>a {
display: block;
padding: 10px;
border-radius: 6px;
transition: .1s all;
color: var(--text-basic);
}

.summary h1, .summary h2,
.summary h3, .summary h4,
.summary h5, .summary h6 {
color: var(--text-basic);
}

/* 移除 Page title 左側線 */
.summary h1+.nav li, .summary h2+.nav li,
.summary h3+.nav li, .summary h4+.nav li,
.summary h5+.nav li, .summary h6+.nav li {
border: none;
}

/* Page icon */
.summary .nav>li>a:before {
content:"\f111";
font-size: 45%;
transform: translatey(-20%);
}

/* Page item hover 樣式*/
.summary .nav>li>a:focus,
.summary .nav>li>a:hover,
.summary .nav-pills>li.active>a,
.summary .nav-pills>li.active>a:focus,
.summary .nav-pills>li.active>a:hover {
background-color: var(--bg-gray);
color: var(--text-primary);
text-decoration: none;
border-radius: 6px;
}

/* Page item 正在瀏覽的樣式*/
.summary .nav-pills>li.active>a,
.summary .nav-pills>li.active>a:focus,
.summary .nav-pills>li.active>a:hover {
color: var(--text-primary);
}

.nav-stacked>li+li {
margin-top: 5px;
}

.summary h1+.nav>li+li,
.summary h2+.nav>li+li,
.summary h3+.nav>li+li,
.summary h4+.nav>li+li,
.summary h5+.nav>li+li,
.summary h6+.nav>li+li {
margin-bottom: 0px;
margin-top: 3px;
}

/* 外連 icon 樣式 */
.summary .nav>li>a.external {
justify-content: flex-start;
align-items: center;
}

.summary .nav>li>a.external span:last-child {
margin-left: .5rem;
}

/* book section text style */
.summary .nav>li>p {
position: relative;
display: block;
padding: 2px 7px;
border-radius: 3px;
margin-left: -15px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
color: #ffffff;
background: #6186a4;
}

/* Book 按鈕樣式 */
.btn.ui-summary-action {
color: var(--text-primary);
}
.btn.ui-summary-action:hover {
background-color: var( --bg-gray);
color: var(--text-primary);
}

/* Book 輸入框 樣式 */

input.ui-summary-search {
background-color: var(--bg-gray);
border: 1px solid #c0c0c0;
color: var(--text-primary);
}
input.ui-summary-search::placeholder {
color: #a1a1a1;
}
input.ui-summary-search.focus:focus,
.focus\:outline-none:focus {
border: 1px solid var(--text-primary);
}
</style>