Typora主题Purple

:root {
    --control-text-color: #777;
    --select-text-bg-color: rgba(223, 197, 223); 
    
    /* side bar */
    --side-bar-bg-color: rgb(255, 255, 255);
    --active-file-text-color: #8163bd;
    --active-file-bg-color: #E9E4F0;
    --item-hover-bg-color: #E9E4F0;
    --active-file-border-color: #8163bd;

    --title-color: #6c549c;
    --font-sans-serif: 'Ubuntu', 'Source Sans Pro', sans-serif !important;
    --font-monospace: 'Fira Code', 'Roboto Mono', monospace !important;
    --purple-1: #8163bd;
    --purple-2: #79589F;
    --purple-3: #fd5eb8;
    --purple-light-1: rgba(99, 99, 172, .05);
    --purple-light-2: rgba(99, 99, 172, .1);
    --purple-light-3: rgba(99, 99, 172, .2);
    --purple-light-4: rgba(129, 99, 189, .3);
    --purple-light-5: #E9E4F0;
    --purple-light-6: rgba(129, 99, 189, .8);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: initial;
}

body {
    font-family: var(--font-sans-serif);
    color: #34495e;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

/* 页边距 和 页面大小 */
#write {
    padding-left: 6ch;
    padding-right: 6ch;
    margin: 0 auto;
}

#write p {
    line-height: 1.6rem;
    word-spacing: .05rem;
}

#write ol li {
    padding-left: 0.5rem;
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

a {
    color: var(--purple-1);
    padding: 0 2px;
    text-decoration: none;
}
.md-content {
    color: var(--purple-light-6);
}
#write a {
    border-bottom: 1px solid var(--purple-1);
    color: var(--purple-1);
    text-decoration: none;
}




h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* font-weight: bold; */
    font-weight: 500 !important;
    line-height: 1.4;
    cursor: text;
    color: var(--title-color);
    font-family: var(--font-sans-serif);
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 tt,
h1 code {
    font-size: inherit !important;
}
h2 tt,
h2 code {
    font-size: inherit !important;
}
h3 tt,
h3 code {
    font-size: inherit !important;
}
h4 tt,
h4 code {
    font-size: inherit !important;
}
h5 tt,
h5 code {
    font-size: inherit !important;
}
h6 tt,
h6 code {
    font-size: inherit !important;
}


h1 {
    padding-bottom: .4rem;
    font-size: 2.2rem;
    line-height: 1.3;
    text-align: center;
    padding-bottom: 0.3em;
    font-size: 2.2em;
    line-height: 1.2;
    margin: 2.4em auto 1.2em;
}
h1:after {
    content: '';
    display: block;
    margin: 0.2em auto 0;
    width: 100px;
    height: 2px;
    border-bottom: 2px solid var(--title-color);
}

h2 {
    margin: 1.6em auto 0.5em;
    padding-left: 10px;
    line-height: 1.4;
    font-size: 1.8em;
    border-left: 9px solid var(--title-color);
    border-bottom: 1px solid var(--title-color);
}
h3 {
    font-size: 1.5rem;
    margin: 1.2em auto 0.5em;
}
h4 {
    font-size: 1.3rem;
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 1.1rem;
}

p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}

li > ol,
li > ul {
    margin: 0 0;
}

hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

li p.first {
    display: inline-block;
}

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

ul:first-child,
ol:first-child {
    margin-top: 0;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

/* 引用 */
blockquote {
    /* margin-left: 1rem; */
    border-left: 4px solid var(--purple-light-4);
    padding: 10px 15px;
    color: #777;
    background-color: var(--purple-light-1);
}

/* 表格 */
table {
    padding: 0;
    word-break: initial;
}

table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

/* 表格 背景色 */
table tr:nth-child(2n),
thead {
    background-color: var(--purple-light-1);
}
#write table thead th {
    background-color: var(--purple-light-2);
}

table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

/* 粗体 */
#write strong {
    padding: 0 2px;
    color: var(--purple-1);
}

/* 斜体 */
#write em {
    padding: 0 5px 0 2px;
    /* font-style: normal; */
    color: #42b983;
}

/* inline code */
#write code, tt {
    padding: 2px 4px;
    border-radius: 2px;
    font-family: var(--font-monospace);
    font-size: 0.92rem;
    color: var(--purple-3); 
    background-color: rgba(99, 99, 172, .05);
}

tt {
    margin: 0 2px;
}

#write .md-footnote {
    background-color: #f8f8f8;
    color: var(--purple-3);
}

/* heighlight. */
#write mark {
    background-color: #fbd3ea;
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
}

#write del {
    padding: 1px 2px;
}

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

@media print {
    html {
        font-size: 0.9rem;
    }

    table,
    pre {
        page-break-inside: avoid;
    }

    pre {
        word-wrap: break-word;
    }
}

#write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: .375rem;
}

/* 图片 */
.md-image > .md-meta {
    border-radius: 3px;
    font-family: var(--font-monospace);
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}
p .md-image:only-child{
    width: auto;
    text-align: left;
    margin-left: 2rem;
}
.md-tag {
    color: inherit;
}
/* 当 “![shadow-随便写]()”写时，会有阴影 */
.md-image img[alt|='shadow'] {
    /* box-shadow: 0 4px 24px -6px #ddd; */
    box-shadow:var(--purple-light-2) 0px 10px 15px;
}

#write a.md-toc-inner {
    line-height: 1.6;
    white-space: pre-line;
    border-bottom: none;
    font-size: 0.9rem;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: var(--font-sans-serif);
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}

/* 代码框 */
/* CodeMirror 3024 Day theme */

/* 代码段 背景 */
pre {
    --select-text-bg-color: rgba(223, 197, 223) !important;
}

/* 边框 */
.md-fences {
    border: 1px solid #e7eaed;
    border-radius: 3px;
}

.cm-s-inner {
  padding: .25rem;
  border-radius: .25rem;
}

.cm-s-inner.CodeMirror, .cm-s-inner .CodeMirror-gutters {
  background-color: #f8f8f8 !important;
  color: #3a3432 !important;
  border: none;
}

.cm-s-inner .CodeMirror-gutters {
  color: #6d8a88;
}

.cm-s-inner .CodeMirror-cursor {
  border-left: solid thin #5c5855 !important;
}

.cm-s-inner .CodeMirror-linenumber {
  color: #807d7c;
}

.cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::selection,
.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: var(--purple-light-2);
}

.cm-s-inner span.cm-comment {
  color: #cdab53;
}

.cm-s-inner span.cm-string, .cm-s-inner span.cm-string-2 {
  color: #f2b01d;
}

.cm-s-inner span.cm-number {
  color: #a34e8f;
}

.cm-s-inner span.cm-variable {
  color: #01a252;
}

.cm-s-inner span.cm-variable-2 {
  color: #01a0e4;
}

.cm-s-inner span.cm-def {
  /* color: #e8bbd0; */
  color: #e2287f;
}

.cm-s-inner span.cm-operator {
  color: #ff79c6;
}

.cm-s-inner span.cm-keyword {
  color: #db2d20;
}

.cm-s-inner span.cm-atom {
  color: #a34e8f;
}

.cm-s-inner span.cm-meta {
  color: inherit;
}

.cm-s-inner span.cm-tag {
  color: #db2d20;
}

.cm-s-inner span.cm-attribute {
  color: #01a252;
}

.cm-s-inner span.cm-qualifier {
  color: #388aa3;
}

.cm-s-inner span.cm-property {
  color: #01a252;
}

.cm-s-inner span.cm-builtin {
  color: #388aa3;
}

.cm-s-inner span.cm-variable-3, .cm-s-inner span.cm-type {
  color: #ffb86c;
}

.cm-s-inner span.cm-bracket {
  color: #3a3432;
}

.cm-s-inner span.cm-link {
  color: #a34e8f;
}

.cm-s-inner span.cm-error {
  background: #db2d20;
  color: #5c5855;
}

/* .md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
  background: var(--purple-light-2);
} */

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #a34e8f !important;
}

#fences-auto-suggest .active {
  background: #ddd;
}

#write .code-tooltip {
  bottom: initial;
  top: calc(100% - 1px);
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-top: 0;
}

.auto-suggest-container {
  border-color: #b4b4b4;
}

.auto-suggest-container .autoComplt-hint.active {
  background: #b4b4b4;
  color: inherit;
}

/* task list */
#write .md-task-list-item > input {
  -webkit-appearance: initial;
  display: block;
  position: absolute;
  border: 1px solid #b4b4b4;
  border-radius: .25rem;
  margin-top: .1rem;
  margin-left: -1.8rem;
  height: 1.2rem;
  width: 1.2rem;
  transition: background 0.3s;
}

#write .md-task-list-item > input:focus {
  outline: none;
  box-shadow: none;
}

#write .md-task-list-item > input:hover {
  background: #ddd;
}

#write .md-task-list-item > input[checked]::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  height: 60%;
  width: 2px;
  transform: rotate(40deg);
  background: #333;
}

#write .md-task-list-item > input[checked]::after {
  content: '';
  position: absolute;
  top: 46%;
  left: 25%;
  height: 30%;
  width: 2px;
  transform: rotate(-40deg);
  background: #333;
}

#write .md-task-list-item > p {
  transition: color 0.3s, opacity 0.3s;
}

#write .md-task-list-item.task-list-done > p {
  color: #b4b4b4;
  text-decoration: line-through;
}

#write .md-task-list-item.task-list-done > p > .md-emoji {
  opacity: .5;
}

#write .md-task-list-item.task-list-done > p > .md-link > a {
  opacity: .6;
}

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

.file-list-item {
    border-bottom: 1px solid;
    border-color: var(--purple-light-5);
}

.file-list-item-summary {
    font-weight: 400;
}

.file-list-item.active {
    color: var(--active-file-text-color);
    background-color: var(--purple-light-5);
}

.file-tree-node.active>.file-node-background {
    background-color: var(--purple-light-5);
    font-weight: 700;
} 

.file-tree-node.active>.file-node-content {
    color: var(--active-file-text-color);
    font-weight: 700;
}

.file-node-content {
    color: #5e676d;
}

.sidebar-tabs {
    border-bottom: none;
}
.sidebar-tab.active {
    font-weight: 400;
}

.sidebar-content-content {
    font-size: 0.9rem;
}