---
title: "技能樹用 Theme"
tags: "Hackmd Theme"
description: "搭配技能樹使用的 Theme"
---

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

/* Docs background color */
#meta-title-tags {
background-color: none;
}

body, .ui-content,
#doc.markdown-body,
.ui-view-area,
.ui-comment-app .open-comments,
#meta-title-tags > .w-full {
background-color: var(--bg-color) !important;
}

/* Headline */
.markdown-body h1,
.markdown-body h2 {
border-bottom: 1px solid #dcdad8;
}

.markdown-body h1, .markdown-body h2,
.markdown-body h3 {
color: var(--text-primary);
}

.markdown-body h2{
margin-top: 84px;
}

.markdown-body h3{
margin-top: 60px;
}

.markdown-body h4,
.markdown-body h5{
margin-top: 48px;
}

.blockquote-center {
position: relative;
margin: 50px 0;
padding: 10px 0;
border-left: none;
text-align: center;
font-style: italic;
color: #686868;
font-size: 18px;
line-height: 32px;
}

.blockquote-center::before {
position: absolute;
content: ' ';
display: block;
width: 100%;
height: 24px;
opacity: 0.2;
background-repeat: no-repeat;
background-position: 0 -6px;
background-size: 22px 22px;
top: -20px;
background-image: url("https://raw.githubusercontent.com/CynthiaChuang/CynthiaChuang.github.io/c31a97ac060d0454356fa1d16ef3e0ccc36833ec/assets/images/quote-l.svg");
border-top: 1px solid #ccc;
}

.blockquote-center::after {
position: absolute;
content: ' ';
display: block;
width: 100%;
height: 24px;
opacity: 0.2;
background-repeat: no-repeat;
background-position: 0 -6px;
background-size: 22px 22px;
bottom: -20px;
background-image: url("https://raw.githubusercontent.com/CynthiaChuang/CynthiaChuang.github.io/c31a97ac060d0454356fa1d16ef3e0ccc36833ec/assets/images/quote-r.svg");
border-bottom: 1px solid #ccc;
background-position: 100% 8px;
}

:root[theme] [theme=light] .markdown-body mark {
background-color: transparent ;
background: linear-gradient(transparent 40%,rgba(255,255,255,0) 50%,#b9da7e 75%, #b9da7e 90%,transparent 95%);
padding: 2px 1px;
color: #333333;
border-radius: 5px;
font-weight: bold;
span{
color: #333333;
}
}

:root[theme] [theme=light] .markdown-body mark.warning {
background: linear-gradient(transparent 40%, rgba(255,255,255,0) 50%, #F5DEB3 75%, #F5DEB3 90%, transparent 95%);
}

:root[theme] [theme=light] .markdown-body mark.danger {
background: linear-gradient(transparent 40%, rgba(255,255,255,0) 50%, #FFB6C1 75%, #FFB6C1 90%, transparent 95%);
}

:root[theme] [theme=light] .markdown-body mark.danger {
background: linear-gradient(transparent 40%, rgba(255,255,255,0) 50%, #FFB6C1 75%, #FFB6C1 90%, transparent 95%);
}

:root[theme] [theme=light] .markdown-body mark.gray {
background: linear-gradient(transparent 40%, rgba(255,255,255,0) 50%, Gainsboro 75%, Gainsboro 90%, transparent 95%);
}

:root[theme] [theme=light] .markdown-body .illustration {
color:Gray;
text-align:center;
margin:30px 0px;
line-height:30px;
/* background-color:red; */
}

:root[theme] [theme=light] .markdown-body .illustration img {
display:block;
margin:auto auto 5px auto;
}

:root[theme] [theme=light] .markdown-body .illustration a{
color:Gray;
}

br.big {
display:block;
content:"";
margin-top:56px;
line-height:190%;
vertical-align:top;
}
</style>