tiangesecdark.css

@import "dark/dark.css";
@import "dark/code.css";

:root {
    --of-theme-color: #91ffc8;
    /* --of-theme-color-dark: #2a3139; */
    --of-theme-color-dark: #2a3932;
    
    --of-darkest-color: #101312;
    --of-darker-color: #151a17;
    --of-dark-color: #212b27;
    --of-dark-color2: #1c211f;
    --of-strong: white;
    --of-strong-code: #ff795e;
    --of-font-size: 16.5px; /*字体大小*/
    --of-selection: #4a89dc;
    --of-selection-text: white;
    --of-link-color: #91ffc8;

    --bg-color: var(--of-darker-color);
    --bg-color-megamenu: #15171a;
    /* 侧边栏颜色 */
    --side-bar-bg-color: var(--of-darkest-color);
    --text-color: white;
    /* 这才是文字颜色 */
    --text-color-main: white;
    /* 选中文字的颜色 */
    --select-text-bg-color: var(--of-selection);
    /* 被激活的目录背景 */
    --item-hover-bg-color:  var(--of-dark-color);
    --control-text-color: #b7b7b7;
    --control-text-hover-color: #fff;
    --window-border: 1px solid #333;
    /* 被激活的文件背景 */
    --active-file-bg-color: var(--of-dark-color);
    --active-file-border-color: var(--of-theme-color);
    --primary-color: var(--of-theme-color);
    --active-file-text-color: #fff;
    --item-hover-text-color: #fff;
    /* 编辑HTML文件 */
    --rawblock-edit-panel-bd: var(--of-dark-color);
    --search-select-bg-color: #3c3c3c;
    
    --code-bg-color:  var(--of-dark-color);
    /* --code-bg-color: #31302e; */
    --footer-bg-color: var(--side-bar-bg-color);
    --table-bg-darker-color:   var(--of-dark-color2);
    --table-bg-color:   var(--of-dark-color);
    --table-bg-color2:   var(--of-darkest-color);
    --table-thead-color: var(--of-darkest-color);
    --md-code-color: var(--of-strong-code);
    --table-edit-color: var(--of-darkest-color);
    --task-list-border-color: #ffffff;
    --task-list-black-border-color: #000000;
    /* --task-list-bg-color: rgb(176, 21, 21); */
    --task-list-checked-color: #00ffa6;
    /* 设置导航栏选中的背景颜色 */
    --nav-group-item-color: var(--of-theme-color-dark);
    --select-background: var(--of-theme-color-dark);
    --other-main-color: var(--of-theme-color);
    --hover-color: var(--of-dark-color2);
    /* 引用的背景颜色 */
    --blockquote-color: var(--of-dark-color);
    /* 源代码被激活的颜色 */
    --codemirror-color: var(--of-dark-color);
    /* 右键菜单按下 */
    --menu-item-container-btn-hover: var(--of-dark-color2);
    /* 右键菜单按钮边框 */
    --menu-item-container-btn: var(--of-theme-color-dark);
    /* 右键菜单和字数统计 */
    --context-menu-color: var(--of-darkest-color);
    /* tooltip颜色（右键菜单按按钮时显示提示的颜色） */
    --tooltip-color: var(--of-darkest-color);
    /* tooltip文字颜色*/
    --tooltip-text-color: white;
    /* 滚动条颜色 */
    --scrollbar-color: var(--of-theme-color-dark);
    /* 源代码模式光标 */
    --code-cursor-color: var(--of-theme-color);
    /* 返回按钮 */


}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 打印页面设置 */
/* @media print {
  * {
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact;
  }
  body {
    width: 21cm; 
    height: 29.7cm; 
    margin: 1cm; 
  }
  p {
    line-height: 1.5rem; 
  }
} */


/* 一级标题 */
#write h1 {
  font-size: 1.5rem;
  display: table;
  font-weight: bold;
  margin: 20px 0;
  padding: 0px 10px;
  border-radius: 8px;
  background-color: #19F39B;
  background: linear-gradient(to right, #29C1A8, #F743C8,#F94187);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: all ease-in-out 0.1s;
  font-family: "MiSans", sans-serif;
}

#write h1:hover {
  background-position: -100% -100%;
  transition: all ease-in-out 0.1s;
}

/* 一级标题内容 */
#write h1 .content {
}

/* 一级标题修饰 请参考有实例的主题 */
#write h1:after {
}

/* 二级标题 */
#write h2 {
  font-size: 1.3rem;
  border-bottom: 2px solid #145BEA;
  font-family: "MiSans", sans-serif;
  
}

/* 二级标题内容 */
#write h2 span {
	display: inline-block;
	font-weight: bold;
	background: linear-gradient(to right, #145BEA, #564FEB, #7C34CC);
	color: #F0F0F0;
	padding: 3px 10px 1px;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	margin-right: 3px;

}


/* 三级标题 */
#write h3 {
  font-size: 1.3rem;
  font-family: "MiSans", sans-serif;
}

/* 三级标题内容 */
#write h3 span {
	border-radius: 5px;
	background: #1DA4FF;
	color: #F0F0F0;
	padding: 3px 8px;
	margin-right: 4px;
	background: linear-gradient(to right, #3fb0cc, #3fcc98);
	transition: all ease-in-out 0.1s;
}


/* 四级标题 */
#write h4 {
  margin: 20px 0;
  font-size: 1.2rem;
  text-align: left;
  color: #3fccca;
  font-family: "MiSans", sans-serif;
}


/* 五级标题 */
#write h5 {
  margin: 23px 0;
  font-size: 1.1rem;
  text-align: left;
  color: #ff6b6b;
  font-family: "MiSans", sans-serif;
}


#write h6 {
  font-size: 1rem;
  color: #fff;
  font-family: "MiSans", sans-serif;
}


/* 有序列表 */
::marker {
    font-weight: bold;
    color: #06b256;
}

li.md-list-item {
    margin: 0.4rem 0;
}

#write ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}

#write em {
    padding: 0 3px 0 0;
}

#write ol {
    list-style-type: decimal;
}

#write li section {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.7rem;
    text-align: justify;
    color: var(--text-color);
    font-weight: 500;
}


/* 鼠标悬停时的样式 */
#write ol li:hover {
  background-color: transparent; /* 鼠标悬停时背景颜色保持透明 */
}

#write ol li:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #06b256; /* 鼠标悬停时在文本内容下方添加虚线 */
  opacity: 0.5; /* 降低虚线的透明度 */
}


/* 无序列表整体样式 */
#write ul {
	margin-top: 8px;
	margin-bottom: 8px;
	padding-left: 25px;
	font-size: 15px;
    color: #fff;
}


#write ul {
	list-style-type: disc;

}

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

#write li section {
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 1.7rem;
	text-align: justify;
	color: #06b256;
	font-weight: 500;
}

/* 鼠标悬停时的样式 */
#write ul li:hover {
  background-color: transparent; /* 鼠标悬停时背景颜色保持透明 */
}

#write ul li:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #06b256; /* 鼠标悬停时在文本内容下方添加虚线 */
  opacity: 0.5; /* 降低虚线的透明度 */
}


/* 任务列表样式 */
#write .md-task-list-item:before{
  content: none;
}

#write .md-task-list-item>input{
  margin: 0px;
  padding: 0px;
  width: 0px;
  height: 0px;
  line-height: 1.2rem;
}
#write .md-task-list-item>input:before {
  display: inline-block;
  content: '';
  width: 1rem;
  height: 1rem;
  text-align: center;
  vertical-align: middle;
  background-color: #564FEB;
  border: 2px solid #1DA4FF;
  border-radius: 20%;
}

#write .md-task-list-item>input[checked]:before{
  content: '✔';
  color:#fff ;
  -webkit-text-stroke: 1px #fff ;
  width: 1rem;
  height: 1rem;
  background-color: #1DA4FF;
  border: 2px solid #1DA4FF;
  border-radius: 30%;
  font-size: 0.75rem;
  line-height: 0.8rem;
}

#write input[type=checkbox] {
  position: absolute;
  top: 7px;
  left: -3px;
}

#write .md-task-list-item p{
  margin: 0px 1.8rem;
}



/* 引用 */
#write blockquote {
    display: block;
    font-size: 1.2em;
    overflow: auto;
    border-left: 3px solid #1ebbff;
    padding: 5px 10px 5px 10px;
    margin-bottom: 8px;
    margin-top: 8px;
    background: #4E5D6C;
}



/* 链接 */
#write  a {
  color: #f7f7f7;
  border-bottom: 1px solid #FE5CB1;
  text-decoration: none;
  transform: all linear 0.1s;
}

#write a:hover {
  font-weight: bolder;
  color: #FF89C7;
  border-bottom: 1px solid #FF89C7;
  transform: all linear 0.1s;
}

#write p a::before {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath  d='M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z'/%3E%3C/svg%3E");
  color: #FE6AB8;
  display: inline-block;
  width: 1em; 
  height: 1em; 
  margin-right: 0.2em; 
  vertical-align: sub; 
}

#write a.md-toc-inner::before {
  content: none;
}
#write sup a::before {
  content: none;
}
/* 加粗 */
#write strong {
  color: #1dd67a;
  font-weight: bold;
}

#write strong::after {
}

/* 斜体 */
#write em {
  font-style: italic;
  color: #f7f7f7;
}
/* 高亮 */
#write mark {
  /* font-weight: bolder; */
  color: #000;
  background: #277da1;
}

/* 删除线 */
#write del {
  color: #f7f7f7;
}

/* 分隔线*/
#write hr {
  height: 1px;
  padding: 0;
  border: none;
  border-top: 2px solid #68b7f8;
}

/* 图片*/
#write img {
	border-radius: 5px;
	display: block;
	margin: 5px auto;
	object-fit: contain;
	border-left: none !important;
	border-right: none !important;

}

/* 图片描述文字 */
#write figcaption {
  display: block;
  font-size: 13px;
  color: #F2F5F5;
}

/* 行内代码 */
#write p code {
  color: #14dd53;
  font-family: MiSans, Cascadia Code, Fira Code, JetBrains Momo, Operator Mono, Consolas, Monaco, Menlo, monospace, MesloLGS NF, MesloLGM Nerd Font;
  letter-spacing: 0.2px;
  background: #7f7f7f;
  border-radius: 4px;
  padding: 0.1em 0.2em;
}
#write li code {
  color: #f7f7f7;
}



/*表格*/
#write table {
  display: table;
  text-align: left;
  color: #f7f7f7;
}
#write tbody {
  border: 0;
}
#write table tr {
  border: 0;
  border-top: 1px solid #4d4d4d;
  background-color: white;
}
#write table tr:nth-child(2n) {
  background-color: #454649;
}
#write table tr th,
#write table tr td {
  font-size: 1rem;
  background-color: #5F5F5F;
  border: 1px solid #F2F5F5;
  padding: 5px 10px;
  text-align: left;
}
#write table tr th {
  font-weight: bold;
  background-color: #454649;
}

/* 脚注文字 */
#write .footnote-word {
  font-weight: normal;
  color: #f7f7f7;
}

/* 脚注上标 */
#write .footnote-ref {
  font-weight: normal;
  color: #f7f7f7;
}

/*脚注链接样式*/
#write .footnote-item em {
  font-size: 14px;
  color: #f7f7f7;
  display: block;
  background: none;
}

/* 行间公式*/
#write .block-equation svg {
	color: #f7f7f7;
}

/* 行内公式
*/
#write .inline-equation svg {
	color: #f7f7f7;
}

/* 复选框 */

#write input[type=checkbox] {
    width: 0;
}

.task-list-item input::before {
    content: "";
    display: inline-block;
    width: 1.0125rem;
    height: 1.0125rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid var(--marker-color);
    border-radius: 1.2rem;
    background-color: #fdfdfd;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
    margin-top: -.6rem;
}

.task-list-item input:checked::before {
    content: '✓';
    font-weight: bold;
    -webkit-text-stroke: 1px var(--primary-color);
    color: var(--primary-color);
    background-color: var(--bg-color);
    font-size: 0.75rem;
    line-height: 0.8rem;
}

blockquote .task-list-item input::before {
    margin-top: .2rem;
}


/*
 * 滚动条
 */

#outline-content::-webkit-scrollbar {
    width: .5rem;
}

#file-library::-webkit-scrollbar {
    width: .5rem;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(179, 179, 179, 0.425);
}

::-webkit-scrollbar {
    width: 1rem;
}



.dropdown-menu .btn:hover,
.dropdown-menu .btn:focus,
.md-toc .btn:hover,
.md-toc .btn:focus {
    color: #3fcc98;
    background: black;
}

#toc-dropmenu {
    background:  var(--select-background);
    border: 1px solid rgba(253, 253, 253, 0.15);
}

#toc-dropmenu .divider {
    background-color: #9b9b9b;
}

.outline-expander:before {
    top: 2px;
}

/* 设置侧边栏 */
#typora-sidebar {
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    border-right: 1px dashed;
    border-right: none;
    background: #282c35 ;
    backdrop-filter: saturate(120%) blur(20px) brightness(0.85);
}

.sidebar-tabs {
    border-bottom:0;
}

#typora-sidebar:hover .outline-title-wrapper {
    border-left: 1px dashed;
}

.outline-title-wrapper .btn {
    color: inherit;
}

.outline-item:hover {
    border-color: #212b27;
    background-color: #212b27;
    color: white;
}


/* 侧边栏 */
.sidebar-menu {
  color: #3fcc98;
  background-color: #282c35;
}

/* 侧边阴影 */
#typora-sidebar,
.typora-node #typora-sidebar {
  box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
}


/* 侧边搜索与文件分割线颜色 */
.ty-sidebar-search-panel {
  border-color: #3fcc98;
}


/* 侧边中文菜单选项样式 */
.dropdown-menu > li > a {
  color: #fff;
}

/* 侧边中文菜单悬停样式 */
.dropdown-menu > li > a:hover {
  background-color: #212b27;
  color: #3fcc98;
}


/* 侧边栏底部样式 */
.sidebar-footer {
  border: 0px;
  box-shadow: 0 -4px 10px -5px rgba(0, 0, 0, 0.5);
}



/** quick open **/
.auto-suggest-container {
    border: 0px;
    background-color: #2a3932;
}

#typora-quick-open {
    background-color: #2a3932;
}

#typora-quick-open input{
    background-color: #2a3932;
    border: 0;
    border-bottom: 1px solid grey;
}

.typora-quick-open-item {
    background-color: inherit;
    color: inherit;
}

.typora-quick-open-item.active,
.typora-quick-open-item:hover {
    background-color: #91ffc8;
    color: white;
}

.typora-quick-open-item:hover {
    background-color:  #2a3932;
}

.typora-search-spinner > div {
  background-color: #fff;
}


/* 右键菜单和字数统计 */

.context-menu,
#footer-word-count-info,
#spell-check-panel {
    backdrop-filter: saturate(120%) blur(20px) brightness(0.85);
    background: none;
    border-radius: 8px;
}

.context-menu.dropdown-menu .divider,
.dropdown-menu .divider {
    background-color: #777777;
    opacity: 1;
}

/* 右键菜单按钮 */
.menu-item-container a.menu-style-btn {
    background: none;
    border: 1px solid;
    border-color: #2a3932;
    border-radius: 5px;
}

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

.md-mathjax-midline {
    background-color:  #2a3932;
    border-bottom: none;
}

footer.ty-footer {
    border-color: #2a3932;
}

.ty-preferences .btn-default {
    background: transparent;
}
.ty-preferences .btn-default:hover {
    background: #2a3932;
}

.ty-preferences select {
    border: 1px solid #9a9a9a;
    height: 21px;
}

.ty-preferences .nav-group-item.active,
.export-item.active,
.export-items-list-control,
.export-detail {
    background: #212b27;
}

.ty-preferences input[type="search"] {
    border-color: #212b27;
    background: #212b27;
    line-height: 22px;
    border-radius: 6px;
    color: white;
}

.ty-preferences input[type="search"]:focus {
    box-shadow: none;
}

[data-is-directory="true"] .file-node-content {
    margin-bottom: 0;
}

.file-node-title {
    line-height: 22px;
}

.html-for-mac .file-node-open-state, .html-for-mac .file-node-icon {
    line-height: 26px;
}


/* 页尾模糊 */

footer {
    backdrop-filter: saturate(120%) blur(20px) brightness(0.85);
    border: none !important;
    background: none;
}
/* footer {
    color: inherit;
} */

@media (max-width: 1000px) {
    footer {
        border-top: none;
    }
    footer:hover {
        color: inherit;
    }
}

#file-info-file-path .file-info-field-value:hover {
    background-color: #555;
    color: #dedede;
}

.megamenu-content,
.megamenu-opened header {
    background: #15171a;
}

.megamenu-menu-panel h2,
.megamenu-menu-panel h1,
.long-btn {
    color: inherit;
}

.megamenu-menu-panel input[type='text'] {
    background: inherit;
    border: 0;
    border-bottom: 1px solid;
}

#recent-file-panel {
    padding: 10px;
  }

#recent-file-panel-action-btn {
    background: inherit;
    border: 1px grey solid;
}

#recent-file-panel tbody {
    background: none;
    backdrop-filter: saturate(120%) blur(20px) brightness(0.85);
}

#recent-file-panel tbody tr:nth-child(2n) {
    background: none;
}

#recent-file-panel tbody tr:nth-child(2n + 1) {
    background: none;
}

.modal-footer .btn-default, 
.modal-footer .btn-primary,
.modal-footer .btn-default:not(:hover) {
    border: 1px solid;
    border-color: transparent;
}


/* 导出HTML的样式 */
body.typora-export{
  padding-left: 0px
}
.typora-export-content .outline-content::before {
  content: "目录";
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 22px;
  left: 6px;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: -1;
}

.typora-export-sidebar .outline-content{
  height: 100%;

  border-right: 1px solid #d2d2d2;
}

.typora-export-content .typora-export-content{

  padding-left: 0px;
}


.typora-export-content .outline-expander{
  width: 0;
}

.typora-export-content .outline-item-active>.outline-item::after{

  content: "";
  position: relative;
  width: 11px;
  height: 8px;
  background: #ffc840;
  float: right;
  right: 5px;
  top: -14px;
  z-index: 100;
  border-radius: 40% 20% 20% 40%;
}
.typora-export-content .outline-label{
  max-width: 250px;
  white-space: nowrap;  
  overflow: hidden;         
  text-overflow: ellipsis; 
}