autumnus-lless-light.css

@import "./autumnus/snippet/typo.css";
@import "./autumnus/snippet/l-ui-setting.css";
@import "./autumnus/snippet/aminations.css";
@import "./autumnus/snippet/SidebarContents.css";
@import "./autumnus/snippet/l-ResponsiveWeb.css";
@import "./autumnus/snippet/l-Print.css";
@import "./autumnus/snippet/mermaid.css";
@import "./autumnus/FONT/stylesheet.css";
@import "./autumnus/snippet/linkicons.css";

:root {
  --theme-color: hsl(0, 100%, 70%);
  --theme-color-weak: hsl(0, 100%, 80%);
  --theme-color-weaker: hsl(0, 100%, 90%);
  --opt-theme-color: hsl(240, 100%, 70%);
  --opt-theme-color-weak: #9999ff;
  --opt-theme-color-weaker: #ccccff;
  --optt-theme-color: #66ff66;
  --optt-theme-color-weak: #99ffdd;
  --optt-theme-color-weaker: #ccffee;
  --color-em: #111;
  --color-text: #333;
  --color-weak: #555;
  --color-weakest: #777;
  --bg-color-5:hsl(0, 0%, 91%);
  --bg-color-4:hsl(0, 0%, 93%);
  --bg-color-3:hsl(0, 0%, 95%);
  --bg-color-2:hsl(0, 0%, 97%);
  --bg-color-1:hsl(0, 0%, 99%);
  --shadow:#00000017 0px 3px 12px;
  --opt-shadow:#11111a0d 0px 4px 16px,#11111a0d 0px 8px 32px;
  --optt-shadow: #959da533 0px 8px 24px;

  --color-title: var(--color-em);
  --color-title-h1: var(--color-em);
  --color-title-h2: var(--color-em);
  --color-title-h3: var(--color-text);
  --color-title-h4: var(--color-text);
  --color-title-h5: var(--color-text);
  --color-title-h6: var(--color-text);

  --color-quote: var(--color-weak);
  --color-code: var(--color-weak);
  --color-link: var(--theme-color);
  --color-italic: var(--color-em);
  --color-strong: var(--color-em);
  --color-highlight: var(--color-text);
  --color-strike: var(--color-weakest);
  --color-footnote: var(--color-weakest);

  --thead-color: var(--color-em);
  --tbody-color: var(--color-text);
  --tbody-color-opt: var(--color-text);
  --color-thead-hover: var(--opt-theme-color);
  --color-tbody-hover: var(--opt-theme-color-weak);

  --link-hover-color: var(--opt-theme-color-weak);
  --link-hover-bg: none;

  /* background setting */
  --bg-contents: var(--bg-color-1);
  --bg-write: var(--bg-color-1);
  --bg-title: none;
  --bg-title-h1: none;
  --bg-title-h2: none;
  --bg-title-h3: none;
  --bg-title-h4: none;
  --bg-title-h5: none;
  --bg-title-h6: none;

  --bg-quote: var(--bg-color-4);
  --bg-code: var(--bg-color-3);
  --bg-code-block: var(--bg-color-3);
  --bg-link: none;
  --bg-italic: none;
  --bg-strong: none;
  --bg-highlight: #f2ff80;
  --bg-strike: none;
  --bg-footnote: none;

  --bg-thead: var(--bg-color-5);
  --bg-tbody-opt: var(--bg-color-3);
  --bg-tbody: var(--bg-color-1);
  --bg-thead-hover: var(--optt-theme-color-weak);
  --bg-tbody-hover: var(--optt-theme-color-weak);

  --focus-cont-bg:  var(--bg-color-3);
  --focus-para-bg:  var(--bg-color-1);

  --window-border: 1px solid var(--bg-color-3);
  --base-border: 1px solid var(--theme-color-weak);
  --base-borderl: 4px solid var(--theme-color-weak);
  --base-borderb: 1px dashed var(--theme-color-weak);
  --opt-borderb: 1px dashed var(--opt-theme-color);

  /* box-shadow */
  --text-shadow: none;
  --block-shadow: none;
  --img-shadow: var(--shadow);
  --focus-shadow: var(--opt-shadow);

  /* margin setting:top;right;bottom;left */
  --margin-h1: 2rem auto 3rem;
  --margin-h2: 2rem auto 1rem;
  --margin-h3: 2rem auto 1rem;
  --margin-h4: 2rem auto 1rem;
  --margin-h5: 2rem auto 1rem;
  --margin-h6: 2rem auto 1rem;

  --margin-text: 0.5rem auto;
  --margin-block: 1rem auto;

  /* padding-setting */
  --padding-text: 1px 4px;
  --padding-block: 1rem;

  --base-margin: 1rem auto;
  --base-padding: 1px 4px;
  --opt-padding: 1rem;

  --font-weight: 400;
  --font-size: 1rem;
  --line-height: 1.75rem;
  --font-family: var(--font-hei);

  --text-font: 300 1rem/1.5rem var(--font-hei);
  --text-font-size: 1rem;
  --font-title: var(--font-hei);
  --font-title-h1: 300 3rem/4.5rem var(--font-title);
  --font-title-h2: 300 2rem/3rem var(--font-title);
  --font-title-h3: 600 1.75rem/2.625rem var(--font-title);
  --font-title-h4: 600 1.5rem/2.25rem var(--font-hei);
  --font-title-h5: 600 1.25rem/1.875rem var(--font-hei);
  --font-title-h6: 600 1.25rem/1.875rem var(--font-hei);

  --font-quote: 400 1.2rem/1.8rem var(--font-kai);
  --font-code: 300 0.9rem/1.35rem var(--font-mono);
  --font-footnote: 400 1.1rem/1.65rem var(--font-kai);

  --font-hei: -apple-system, "Raleway Medium", "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  --font-song: "Lora", Georgia, "Nimbus Roman No9 L", "Noto Serif CJK SC", "Songti SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
  --font-kai: "EB Garamond", Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", curve, serif;
  --font-mono: "Cascadia code", Monaco, "Deja Vu Sans Mono", Consolas, "Lucida Console", "Andale Mono", Courier,"Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  --monospace: var(--font-mono);

  --mermaid-alt-font-family: var(--base-font) !important;
  --mermaid-font-family: var(--base-font) !important;
  --mermaid-arrow-color:var(--theme-color-weak);
  --md-char-color: var(--theme-color);
  --meta-content-color: var(--theme-color);

  --blur-text-color: hsl(0, 100%, 90%);
  --active-file-bg-color: var(--bg-color-5);
  /* 文件列表 当前文件激活 背景色*/
  --active-file-text-color: var(--theme-color);
  --active-file-border-color: var(--theme-color);
  /* 树形结构下文件激活边框色 */
  --side-bar-bg-color: var(--bg-color-3);
  /*文件 大纲 侧边栏 背景色*/
  --item-hover-bg-color: var(--bg-color-5);
  /* 打开文文件夹、正文菜单、最近使用 hover 效果 */
  --item-hover-text-color: var(--theme-color);
  --primary-color: var(--opt-theme-color);
  /* color of primary buttons */
  --primary-btn-border-color: var(--opt-theme-color);
  --primary-btn-text-color: var(--theme-color);
  --select-text-bg-color: var(--theme-color-weaker);
  --select-text-font-color: hsl(0, 0%, 100%);
  --active-bg: var(--bg-color-3);
  /* 右键菜单背景色 */
  --window-border: var(--bg-color-3);
  --control-text-color: var(--color-title);
  --control-text-hover-color: var(--color-text);
  /* 侧边栏默认字体颜色 */
  --rawblock-edit-panel-bd:var(--bg-color-5);
}

html,
body,
content,
#write {
  font-size: 16px;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-family: var(--font-family);
  line-height: var(--line-height);
  background: var(--bg-contents);
  color: var(--color-text);
  text-align: justify;
}

content {
  min-width: 400px;
}

#write {
  background: var(--bg-write);
  max-width: 914px;
  min-width: 400px;
  -webkit-font-smoothing: antialiased;
  min-height: calc(100vh - 6em);
  margin: 2rem auto;
  padding: 2rem;
}

#write * {
  -webkit-text-stroke: 0.25px;
}

/* title setting */

#write h1 *,
#write h2 *,
#write h3 *,
#write h4 *,
#write h5 *,
#write h6 * {
  color: var(--color-title) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

#write h1,
#write h2 {
  text-transform: uppercase;
}

#write h1 {
  background: var(--bg-title-h1);
  color: var(--color-title-h1);
  font: var(--font-title-h1);
  margin: var(--margin-h1);
}

#write h2 {
  background: var(--bg-title-h2);
  color: var(--color-title-h2);
  font: var(--font-title-h2);
  margin: var(--margin-h2);
}

#write h3 {
  background: var(--bg-title-h3);
  color: var(--color-title-h3);
  font: var(--font-title-h3);
  margin: var(--margin-h3);
}

#write h4 {
  background: var(--bg-title-h4);
  color: var(--color-title-h4);
  font: var(--font-title-h4);
  margin: var(--margin-h4);
}

#write h5 {
  background: var(--bg-title-h5);
  color: var(--color-title-h5);
  font: var(--font-title-h5);
  margin: var(--margin-h5);
}

#write h6 {
  background: var(--bg-title-h6);
  color: var(--color-title-h6);
  font: var(--font-title-h6);
  margin: var(--margin-h6);
}

#write h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--theme-color-weak);
  position: relative;
  top: 1rem;
  width: 50%;
}

#write h2 span.md-plain:hover {
  background: linear-gradient(to bottom, transparent 60%, hsl(0, 100%, 95%) 0) no-repeat;
}

h3,
h4,
h5,
h6 {
  position: relative;
}

#write h3:hover::before {
  content: "H3";
}

#write h4:hover::before {
  content: "H4";
}

#write h5:hover::before {
  content: "H5";
}

#write h6:hover::before {
  content: "H6";
}

#write h3:hover::before,
#write h4:hover::before,
#write h5:hover::before,
#write h6:hover::before {
  position: absolute;
  left: -2rem;
  font-size: 0.9rem !important;
  text-align: center;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 5px;
  color: var(--theme-color);
}


/* block-element setting */

blockquote,
pre.md-fences,
figure>table,
#write img {
  margin: var(--margin-block);
  padding: var(--padding-block);
  border-radius: 5px;
}

p+p {
  margin: var(--margin-text);
  line-height: var(--line-height);
}

ul,
ol {
  margin: var(--base-margin);
  padding-left: 2rem;
}

/* blockquote setting */

blockquote {
  background: var(--bg-quote);
  font: var(--font-quote);
  color: var(--color-quote);
  font-size: 1.2rem;
  box-shadow: var(--block-shadow);
  border: none;
}

blockquote blockquote {
  padding: 0;
  padding-left: 1rem;
  border-left: var(--base-borderl);
  border-radius: 0;
  box-shadow: none;
}

blockquote pre.md-fences {
  box-shadow: none;
}

blockquote p {
  font: var(--font-quote);
  color: var(--color-quote);
  line-height: var(--line-height);
}

blockquote h6 {
  padding-left: 1rem;
  margin: 1rem auto !important;
}

blockquote h6:before {
  top: -15px;
  content: "" !important;
  position: absolute;
  width: 4px;
  height: 60px;
  background: var(--theme-color);
  left: -15px;
}

blockquote h6 span:first-child:before {
  content: "!";
  position: absolute;
  left: -25px;
  top: 2px;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background: var(--theme-color);
  display: block;
  text-align: center;
  font-family: Poppins, sans-serif;
  color: white;
  font-size: large;
  font-weight: 600;
}

blockquote h6 span[md-inline="strong"]:first-child:before {
  content: "i";
  z-index: 1;
  background: var(--opt-theme-color);
}

/* list setting */

ul li::marker,
ol li::marker {
  color: var(--theme-color);
}

ul {
  list-style: disc;
}

ul ul {
  list-style: circle;
}

ol {
  list-style: decimal-leading-zero;
}

ol ol {
  list-style: lower-roman;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-top: 0.5rem;
}

/* todo list */

.task-list-item input:before {
  content: "";
  position: relative;
  top: -1px;
  left: -5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border: var(--base-border);
  background-color: var(--bg-write);
  margin-left: 0;
  margin-top: -0.5rem;
  border-radius: 50%;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.task-list-item input::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -2px;
  width: 1rem;
  height: 0.5rem;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}

.task-list-item input:checked::before {
  background: var(--theme-color) !important;
  border: none;
}

.task-list-item input:checked::after {
  opacity: 1;
}

.task-list-item {
  list-style: none;
}

.task-list-item p {
  text-indent: 5px !important;
}

.task-list-item input:checked:before,
.task-list-item input[checked]:before {
  content: " ";
}

.md-task-list-item.task-list-done {
  text-decoration: line-through;
  color: var(--color-footnote);
}

blockquote .task-list-item input::before {
  top: -3px;
}

#write img {
  padding: 0;
  box-shadow: var(--img-shadow);
}

img[alt|="no-shadow"] {
  box-shadow: none !important;
}

img[alt|="normal"] {
  margin: 0 !important;
  box-shadow: none !important;
}

hr {
  border: none;
  border-bottom: var(--base-border);
  margin: 3rem auto;
  height: 1px;
  width: 50%;
}

hr .pb {
  page-break-after: always;
  border-bottom: none;
}

/* inline-element setting */

code,
mark,
kbd,
samp,
tt,
var,
#write a,
strong,
em {
  padding: var(--padding-text);
}

a,
ins {
  background-color: var(--bg-link);
  color: var(--color-link);
}

#write a,
#write ins {
  text-decoration: none;
  border-bottom: var(--base-borderb);
}

#write a:hover,
#write ins:hover {
  border-bottom-color: var(--color-link);
  color: var(--link-hover-color);
  text-decoration: none;
}

#write strong {
  background: var(--bg-strong);
  color: var(--color-strong);
}

#write em {
  background: var(--bg-italic);
  color: var(--color-italic);
  border-bottom: var(--opt-borderb);
}

em,
strong,
em strong,
strong em {
  font-size: inherit;
}

em strong,
strong em {
  font-weight: 800 !important;
}

del {
  color: var(--color-strike);
  background: var(--bg-strike);
}

#write mark {
  background: var(--bg-highlight);
  color: var(--color-highlight);
}

/* code & code-block setting */

#write pre.md-meta-block,
#write pre.md-fences,
code,
kbd,
samp,
tt,
var {
  font: var(--font-code);
  background: var(--bg-code);
  color: var(--color-code);
  border-radius: 5px;
}

/* 代码块下的标题颜色过深。修改为浅蓝 */
.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
  color: var(--opt-theme-color-weak);
}

.cm-s-inner .CodeMirror-cursors,
.CodeMirror div.CodeMirror-cursor {
  background-color: var(--opt-theme-color) !important;
  border-left: 2px solid var(--opt-theme-color) !important;
  width: 2px !important;
}

/* code-block setting */

#write pre.md-meta-block,
#write pre.md-fences {
  font: var(--font-code);
  border-radius: 5px;
  background: var(--bg-code-block);
  color: var(--color-code);
}

pre.md-meta-block {
  min-height: 30px;
  position: sticky;
  margin-top: -1.5rem;
  margin-bottom: 2rem;
}

pre {
  white-space: pre;
}

pre.md-fences {
  display: block;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--block-shadow);
  white-space: pre;
}

code {
  background-color: var(--bg-code);
  color: var(--color-code);
}

details {
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1rem;
  background: var(--bg-quote);
}

/* table setting */

figure.md-table-fig {
  margin-top: 28px;
}

figure>table {
  width: 98%;
}

table th,
table td {
  padding: 0.5rem 1rem;
}

table thead tr {
  background: var(--bg-thead) !important;
}

table th {
  font-weight: 800;
}

table thead tr:hover {
  background: var(--bg-thead-hover) !important;
  color: var(--color-thead-hover);
}

table caption {
  border-bottom: none;
}

table tr {
  background: var(--bg-tbody);
  color: var(--tbody-color);
  border: 1px solid var(--bg-thead);
}

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

table tr:hover {
  background: var(--bg-tbody-hover);
  color: var(--color-tbody-hover);
}

table tr,
#write table td,
#write table th {
  border: 1px solid var(--theme-color-weak);
}

/*表格大小设置输入框(数字居中)*/
#write .md-grid-board-wrap input {
  text-align: center !important;
}

/*表格大小设置面板中的方框*/
#write .md-grid-board.md-reset>tbody>tr>td>a {
  border: 1px solid;
  margin: 0px;
}

sup.md-footnote {
  padding: var(--base-padding);
  color: var(--color-footnote);
  cursor: pointer;
  font-size: 0.75rem;
}

.md-meta {
  font-family: var(--font-code);
  color: var(--md-char-color);
}

.md-expand .md-meta.md-before,
.md-expand .md-meta.md-after {
  padding-left: 5px;
  padding-right: 5px;
}

.md-image>.md-meta {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: var(--meta-content-color);
}

.md-image>.md-meta:first-of-type:before {
  padding-left: 4px;
}

.md-image>img {
  margin-top: 2px;
}