xiaoya.css

/*
* This typora theme was designed for xiaoya
*/
:root{
      /* 主题色雅紫 */
    --side-bar-bg-color: #FAF6FA;
    --control-text-color: #777;
    --select-text-bg-color: #E7D2F5;
    --active-file-text-color: #b481d9;
    --active-file-border-color: #9853cb;
    --font-color-1:#262626;
    --blockquote-font-color:#808080;
    --code-bg-color:rgba(241,237,243,0.2);
    --code-font-color:#8B3CC6;
    --heiglight-color:#9BE9B3;
    --hr-color:rgba(208,140,206,0.8);
    --img-outline-color:#B3AEB6;
    --main-color-1: #FCFAFC;
    --main-color-2: #ead3e4;
    --main-color-3: #D1C2D3;
    --main-color-4: #d5b9ea;
    --main-color-5: #c49ce1;
    --main-color-6: #b481d9;
    --main-color-7: #a569d2;
    --main-color-8: #9853cb;
    --main-color-9: #8C3FC5;
    --main-color-10: #7131a2;
    --main-color-11: #532476;

      /* 主题色月青 */
    /* --side-bar-bg-color: #F2FEFE;
    --control-text-color: #777;
    --select-text-bg-color: #b1f9f7;
    --active-file-text-color: #50f4f0;
    --active-file-border-color: #0dc8c4;
    --font-color-1:#262626;
    --blockquote-font-color:#808080;
    --code-bg-color:rgba(221,253,252,0.2);
    --code-font-color:#3CC9C6;
    --heiglight-color:#00ffff;
    --hr-color:rgba(12,180,176,0.8);
    --img-outline-color:#C0C8C8;
    --main-color-1: #F4FEFE;
    --main-color-2: #b5faf9;
    --main-color-3: #b1f9f7;
    --main-color-4: #A6F6F4;
    --main-color-5: #6ef6f3;
    --main-color-6: #50f4f0;
    --main-color-7: #32f2ed;
    --main-color-8: #0ededa;
    --main-color-9: #0dc8c4;
    --main-color-10: #0cb4b0;
    --main-color-11: #0BABAB; */
  }

/* 字体引入 */
/* 代码块字体 */

@font-face {
    font-family: 'LM Mono 10';
    font-style: normal;
    font-weight: normal;
    src: url("./Xiaoya/lmmono10-regular.otf") format('opentype');
  }

@font-face {
    font-family: 'LM Mono 10';
    font-style: italic;
    font-weight: normal;
    src: url("./Xiaoya/lmmono10-italic.otf") format('opentype');
  }

/* 链接字体 */

@font-face {
    font-family: 'Fangzheng MM';
    font-style: normal;
    font-weight: normal;
    src: url("./Xiaoya/方正喵鸣体.ttf") format('truetype');
  }

/* Helvetica Neue */

@font-face {
    font-family: 'HelveticaN';
    font-style: normal;
    font-weight: normal;
    src: url("./Xiaoya/HelveticaNeue.ttf") format('truetype');
  }

@font-face {
    font-family: 'HelveticaN';
    font-style: normal;
    font-weight: bold;
    src: url("./Xiaoya/HelveticaNeue-Bold.ttf") format('truetype');
  }

@font-face {
    font-family: 'HelveticaN';
    font-style: italic;
    font-weight: normal;
    src: url("./Xiaoya/HelveticaNeue-Italic.ttf") format('truetype');
  }

@font-face {
    font-family: 'HelveticaN';
    font-style: italic;
    font-weight: bold;
    src: url("./Xiaoya/HelveticaNeue-BoldItalic.ttf") format('truetype');
  }

/* 正文中文 */
@font-face {
    font-family: "玄宋45S";
    src        : url("./Xiaoya/HYXuanSong45S.woff2");
}


html,
body,
#write {
    font-family: "玄宋45S",'HelveticaN', Arial,"pingfangSC light", "microsoft yahei";
  }

html {
    font-size: 20px;
  }

body {
    color: var(--font-color-1);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: var(--main-color-1);
  }

/* 笔记页面设置 */

#write {
    position: static;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 100px;
    transform: none;
    /* 为页面设置图片背景 */
    /* background-image: url("./xiaoya/Pio.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 20% bottom;
    background-attachment: fixed;  */
  }

/* 打开空白笔记展示笔记封面 */

#write > p:first-child:not(:only-child)::before, #write > p:only-child::before {
    background: url("./xiaoya/xiaoya.png") no-repeat 55% 90% transparent;
    background-size: cover;
  }

  #write > p:first-child:empty {
    position: static;
  }

#write > p:only-child:empty::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("./xiaoya/xiaoya.png") no-repeat 45% 90% transparent;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }


#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;
  }

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

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

/* 段落 */

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

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

#write h2,
#write h3,
#write h4,
#write h5,
#write h6{
    font-family: 'times new roman', Arial, "simsun", "pingfangSC light", "microsoft yahei";
    /* font-weight: normal !important; */
  }

/* 一级标题 */

h1 {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 2.8rem auto 2.2rem;
    color: var(--main-color-11);
  }

/* h1 span {
    display: inline-block;
    border-bottom: 2px solid var(--main-color-9);
    padding: 0 1rem;
  }

h1:after {
    content: '';
    display: block;
    margin: 0.1rem auto 0;
    width: 200px;
    height: 2px;
    border-bottom: 2px solid var(--main-color-9);
  } */

/* 二级标题 */

h2 {
    text-align: left;
    /* padding-bottom: -1rem; */
    font-size: 1.6rem;
    /* line-height: 1.2; */
    margin: 2rem auto 1.6rem;
    /* color: var(--main-color-5); */
    color: var(--font-color-1);
  }

h2 span {
    display: inline-block;
    border-bottom: 5px double var(--main-color-9);
    /* border-radius: 2px; */
    padding: .2rem .3rem;
  }

/* 三级标题 */

h3 {
    text-align: left;
    font-size: 1.4rem;
    margin: 1.8rem auto 1.4rem;
    border-left: 5px solid var(--main-color-9);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    color: var(--font-color-1);
  }

#write h3::before {
  content: '> ';
  color: var(--main-color-9);
  /* margin-left: -5.9rem; */
}

#write h3 {
  margin: 1.4rem auto 1rem;
  font-size: 1.4rem;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid var(--main-color-9);
  margin: 1.8rem auto 1.4rem;
  padding: .2rem .1rem;
  color: var(--font-color-1);
}

h3.md-focus:before {
  content: 'h3' !important;
}

/* 四级标题 */

h4 {
  /* text-align: left; */
  font-size: 1.2rem;
  margin: 1.6rem auto 1.2rem;
  /* color: var(--main-color-5); */
  border-left: 5px solid var(--main-color-9);
  border-radius: 3px;
  padding: .1rem .3rem;
  color: var(--font-color-1);
}

h4.md-focus:before {
  content: 'h4' !important;
}

#write>h3.md-focus:before,
#write>h4.md-focus:before {
    width: auto;
    height: auto;
    background-color: var(--main-color-1);
    color: var(--main-color-9);
  }

#write h5::before,
#write h6::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--main-color-9);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: 'small-caps';
    white-space: nowrap;
    /* 文本强制不换行 */
    border: 0;
  }

/* 五级标题 */

#write h5::before {
    content: 'H5';
    top: 0.18rem;
  }

#write h5 {
    /* margin-left: 2em; */
    font-size: 1rem;
    color: var(--main-color-9);
    margin: 1.2em auto 1rem;
  }

/* 六级标题 */

#write h6::before {
    content: 'H6';
    top: 0.18rem;
  }

#write h6 {
    /* margin-left: 2.5em; */
    font-size: 1rem;
    color: var(--font-color-1);
    margin: 1.2em auto 1rem;
  }

/* 引用 */
/*雅紫的引用*/
blockquote {
    border: 1px dashed #86648B;
    border-radius: 6px;
    margin: 2rem auto;
    padding: 1.5rem 1rem;
    color: var(--blockquote-font-color) !important;
    box-shadow: 4px 4px 8px 2px #B2B2B2;
    font-family: 'HelveticaN', Arial, "kaiti","pingfangSC light", "microsoft yahei" !important;
  }

  /*月青的引用*/
  /* blockquote p:first-of-type::before{
    content: "☽";
    position: relative;
    font-size: 3em;
    padding: 0 .5rem;
    color: var(--main-color-9);
    font-family: Arial, serif;
    line-height: 1em;
    font-weight: 700;
  } */

/* blockquote {
    border: 2px double var(--main-color-10);
    border-radius: 6px;
    margin: 3rem auto;
    padding: 10px 15px 26px;
    color: var(--blockquote-font-color) !important;
    font-family: 'HelveticaN', Arial, "kaiti","pingfangSC light", "microsoft yahei" !important;
  } */

/* 列表 */

#write ol,
#write ul {
    padding-left: 25px;
    margin: .5rem 0;
  }

#write ol>li,
#write ul>li {
    color: var(--main-color-11);
    /* font-weight: bold; */
  }

#write ol>li>*,
#write ul>li>* {
    color: #333;
    font-weight: normal;
  }

#write ul {
      list-style-type: circle;
  }

#write ul ul,
#write ol ul{
    list-style-type: disc;
  }

#write ul ul ul,
#write ol ul ul,
#write ol ol ul,
#write ul ol ul{
    list-style-type: square;
  }

#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: 0.375rem;
  }

/* 行内代码 */

#write code,
tt{
    color: var(--code-font-color);
    background-color: var(--code-bg-color);
    font-family: 'LM Mono 10','Times New Roman',Arial, simsun, 'pingfangSC light', sans-serif;
    font-size: 0.875rem;
    box-sizing: border-box;
    margin: 0 4px;
    padding: 0 2px;
    border-radius: 2px;
    box-shadow: 0 0 .8px .8px var(--main-color-2);
  }

/* 流程图块 */

#write .md-diagram-panel {
  position: relative;
  margin: 24px auto;
}

#write .md-focus .md-diagram-panel {
  border: 1px solid grey;
  border-radius: 4px;
}

/* 链接 */

#write a {
    color: var(--main-color-9);
    font-family: 'HelveticaN', arial, "Fangzheng MM", simsun, 'microsoft yahei';
    text-decoration: none;
    padding:0 .2rem;
  }

#write a:hover {
    color: var(--main-color-9);
    font-family:  'HelveticaN', arial, "Fangzheng MM", simsun, 'microsoft yahei';
    text-decoration: underline;
  }

/* 斜体 */

#write em {
    padding: 0 3px;
  }

/* 删除线 */

#write del {
    padding: 1px 2px;
    text-decoration: line-through #f0504a;
    color:var(--blockquote-font-color)
  }

/* 加粗 */

#write strong {
    padding: 0 2px;
    color: var(--main-color-10);
    font-weight: 700;
  }

/* 加粗斜体 这里为渐变字效果 */

#write em strong{
  background: -webkit-linear-gradient(left, rgb(218, 92, 92), var(--main-color-10));
  background: -o-linear-gradient(right, rgb(218, 92, 92), var(--main-color-10));
  background: -moz-linear-gradient(right, rgb(218, 92, 92), var(--main-color-10));
  background: linear-gradient(to right, rgb(218, 92, 92), var(--main-color-10));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style:normal;
}

/* 月青的渐变字效果 */

/* #write em strong{
  background: -webkit-linear-gradient(left, var(--main-color-11), #416165);
  background: -o-linear-gradient(right, var(--main-color-11), #416165);
  background: -moz-linear-gradient(right, var(--main-color-11), #416165);
  background: linear-gradient(to right, var(--main-color-11), #416165);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style:normal;
} */

/* 高亮 */

#write mark {
    background-color: var(--heiglight-color);
    padding: 2px 4px;
    margin: 0 2px;
  }

/* 分割线 */

#write hr{
    height:1px;
    padding:0;
    border:none;
    text-align:center;
    background-image:linear-gradient(to right,rgba(255,255,255,0),var(--hr-color),rgba(255,255,255,0));
    margin: 2rem auto;
  }

/* 脚注上标 */

#write .md-footnote {
  /* font-weight: bold; */
    color: var(--main-color-7);
    font-family: arial;
  }
 #write .md-footnote > .md-text:before {
    content: '['
  }
 #write .md-footnote > .md-text:after {
    content: ']'
  }

 /* 脚注 */

 #write .md-def-name {
    font-size: 1rem;
    margin-left: -1rem;
    margin-right: -1.2rem;
    color: var(--main-color-7);
  }

 #write .md-def-name:before {
    content: '';
    color: var(--font-color-1);
  }

 #write .md-def-name:after {
    color: var(--font-color-1);
    content: '';
  }

/* 代码块 */
/* 代码块外框 */

#write .md-fences {
  border: 1px solid #7a7a7a;
  -webkit-font-smoothing: initial;
  padding: 3px 5px;
  font-family: 'Roboto Mono', 'simsun', 'microsoft yahei' !important;
  line-height: 1.55rem;
  border-radius: 2px;
  font-size: 0.9rem;
  word-wrap: normal;
  font-style: normal;
}

/* #write.enable-diagrams>[mermaid-type=gantt].md-fences:not(.md-focus) {
  border: none !important;
 } */

.code-tooltip .ty-input:focus, input:focus {
    outline: 0;
    box-shadow: none;
    border-color: var(--main-color-7);
    font-size: 14px;
    color:#f22f27
  }

/*
*  代码块高亮主题
*  本主题主要参考了 material-ocean
*  更多其它代码块主题请参考https://codemirror.net/
*  也可在https://github.com/codemirror/codemirror下的theme文件查看不同主题的源码
*/

.cm-s-inner.CodeMirror {
    background: transparent;
    color: #8F93A2;
  }

.cm-s-inner div.CodeMirror-selected {
    background: #38566F;
  }

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection {
    background: rgba(56, 86, 111, 0.99);
  }

.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
    background: rgba(56, 86, 111, 0.99);
  }

.cm-s-inner .CodeMirror-gutters {
    background: transparent;
    border-right: 1px solid var(--main-color-7);
  }

.cm-s-inner .CodeMirror-guttermarker {
    color: white;
  }

.cm-s-inner .CodeMirror-guttermarker-subtle {
    color: #3E7087;
  }

.cm-s-inner .CodeMirror-linenumber {
    color: var(--main-color-5);
  }

.cm-s-inner .CodeMirror-cursor {
    border-left: 1px solid #FFCC00;
  }

.cm-s-inner span.cm-comment {
    color: #fbb32f;
    font-style:normal;
  }

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

.cm-s-inner span.cm-numbe {
    color: #FF5370;
  }

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

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

.cm-s-inner span.cm-string {
    color: #C3E88D;
  }

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

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

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

.cm-s-inner span.cm-variable-3{
    color: #DECB6B;
  }

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

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

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

.cm-s-inner span.cm-type {
    color: #DECB6B;
  }

  .cm-s-inner span.cm-def{
    color: #82AAFF;
  }


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

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

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

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

.cm-s-inner span.cm-special{
    color:#0aa;
  }

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

.cm-s-inner span.cm-error {
    color: rgba(255, 255, 255, 1.0);
    background-color: #FF5370;
  }

.cm-s-inner .CodeMirror-activeline-background {
      background: none;
    }

#write .CodeMirror-cursors .CodeMirror-cursor {
      border-left: 2px solid var(--main-color-6);
    }

/* 行内公式 */

[md-inline='inline_math'] {
    /* color: var(--main-color-7); */
    font-size: 1.1rem;
    margin:0 .2rem;
  }

/* 行间公式 */

#write [mdtype="math_block"] {
    font-size: 1.1rem;
  }

/* 目录 */

#write a.md-toc-inner {
    font-size: 1.1rem;
    color:var(--font-color-1);
    line-height: 1.8;
    white-space: pre-line;
    font-family:'HelveticaN',"pingfangSC light", "microsoft yahei", Arial;
    border-bottom: none;
  }

#write a:hover.md-toc-inner {
    color: var(--main-color-9);
    text-decoration: underline;
  }

/* 图片 */

#write img {
    max-width: 90% ;
    /* border-radius: 8px; */
    margin:1.2rem auto;
  }

/* 当 “![shadow](url)”写时，图片会有圆角阴影效果 */

.md-image img[alt|='shadow'] {
    border-radius: 6px;
    box-shadow: 2px 3px 6px 2px #8C8C8C;
    border: none !important;
  }

/* 当 “![frame](url)”写时，图片会有边框效果 */

.md-image img[alt|='frame'] {
    border-radius: none !important;
    border: 10px solid #ffffff;
    outline: 1px solid var(--img-outline-color);
  }

/* 任务列表 */

.md-task-list-item > input {
    margin-left: -1.3em;
    margin-top: 0.3rem;
    -webkit-appearance: none;
  }

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

#write .md-task-list-item > input:hover {
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    vertical-align: middle;
    background: var(--main-color-2);
  }

.md-task-list-item > input:before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    text-align: center;
    font-size: 0.8rem;
    color: var(--mid-1);
    border-radius: 2px;
    border: 1px solid var(--main-color-5);
    margin-top: -0.35rem;
    transition: all 0.2s linear;
  }

.md-task-list-item > input:checked:before,
.md-task-list-item > input[checked]:before {
    content: '\2714';
    font-size: 0.625rem;
    color: var(--main-color-1);
    border: 1px solid var(--main-color-6);
    background-color: var(--main-color-6);
  }

#write .md-task-list-item.task-list-done > p {
    color: var(--blockquote-font-color);
    text-decoration: line-through;
  }

/* 表格 */

table {
    padding: 0;
    word-break: initial;
  }

#write table tr th {
    border: 1px solid var(--main-color-7);
    /* background-color: var(--main-color-2); */
    color: var(--main-color-9);
    border-bottom: 0;
    padding: 5px 8px;
  }

#write table tr td {
    border: 1px solid var(--main-color-7);
    padding: 5px 8px;
  }

/* #write table tr:nth-child(2n) {
    background-color: #f8f8f8;
} */

/* 侧边栏 */

.file-list-item.active {
    color: var(--active-file-text-color);
    background-color: var(--side-bar-bg-color);
    border-left: 4px solid var(--active-file-border-color);
  }

.file-tree-node.active > .file-node-background {
    background-color: var(--main-color-1);
    font-weight: normal;
    border-left: 4px solid var(--active-file-border-color);
  }

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

.info-panel-tab-border {
    color: var(--active-file-border-color);
  }

/* YAML块 */

pre.md-meta-block,
pre.md-meta-block:active {
    background-color: var(--side-bar-bg-color);
    border:1px solid grey;
    border-radius: 3px;
    padding: 10px;
  }

/* 大纲视图 */

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

/* emoji */

.md-emoji {
    padding: 0 3px;
  }

@media print {
    .typora-export * {
      -webkit-print-color-adjust: exact;
  }
    html {
        font-size: 13px;
    }

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

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