master

分支 (1)

标签 (1)

管理

管理

master

v1.0.0

my-typora-theme
/
suture-monster.css

@import './suture-monster/font.css';

:root {
    --color1: #ff4e6a;
    --color1-bg: rgba(255, 78, 106, 0.15);

    --color2: #ff761e;
    --color2-bg: rgba(255, 158, 78, 0.15);

    --color3: #ffb900;
    --color3-bg: rgba(252, 255, 78, 0.15);

    --color4: #33d57a;
    --color4-bg: rgba(128, 255, 78, 0.15);

    --color5: #00dbff;
    --color5-bg: rgba(78, 169, 255, 0.35);

    --color6: #1a98ff;
    --color6-bg: rgba(78, 125, 255, 0.15);

    --color7: #9090ff;
    --color7-bg: rgba(161, 78, 255, 0.15);

    --primary-color: var(--color1);
    --primary-color-bg: var(--color1-bg);

    --text-color: #304455;
    --text-font: "Iosevka Curly", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, "Ubuntu Mono", Consolas, HYZhengYuan;

    /* 替换base.css选中文本时文本的背景颜色 */
    --select-text-bg-color: rgba(255, 175, 163, 0.9);

    /* 列表 */
    --list-line-height: 1.75rem;
    --list-line-padding: 1.5rem;
    --list-dot-diameter: 0.9rem;

    --checkbox-checked: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M425.984 726.016l384-384-59.99-61.995-324.01 324.011-152.021-152.021L213.973 512zm384-598.016q36.01 0 61.013 25.984T896 213.974v596.01q0 34.005-25.003 59.99t-61.013 25.983h-596.01q-36.011 0-61.014-25.984t-25.003-59.989v-596.01q0-34.006 25.003-59.99T213.973 128h596.011z' fill='%2365b73b'/%3E%3C/svg%3E");
    --checkbox-unchecked: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M810.667 213.333v597.334H213.333V213.333h597.334m0-85.333H213.333C166.4 128 128 166.4 128 213.333v597.334C128 857.6 166.4 896 213.333 896h597.334C857.6 896 896 857.6 896 810.667V213.333C896 166.4 857.6 128 810.667 128z' fill='%23333333'/%3E%3C/svg%3E");
}


/* --------------------------------------- PDF配置 --------------------------------------- */
@media print {
    @page {
        margin: 2mm 0mm;
    }

    html {
        font-size: 12px !important;
    }

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

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

/* --------------------------------------- 全局配置 --------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

#write {
    margin: 10px auto 10px;
    padding: 30px 36px 70px;
    font-family: var(--text-font);
    -webkit-font-feature-settings: "liga" on, "calt" on;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    color: var(--text-color);
    max-width: 1200px;
    text-align: justify;
    letter-spacing: 0px;
    /* 字距 */
    word-spacing: 0px;
    /* 词距 */
    word-break: initial;
    /* 使用默认的断行规则 */
    overflow-x: auto;
    /* 内容溢出块级元素显示滚动条 */
}

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


/* ---------------------------------------- YAML ----------------------------------------- */
pre.md-meta-block {
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 2px;
    color: #777777;
    margin-top: 0 !important;
}

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


/* ------------------------------------------ 目录 --------------------------------------- */
.md-toc {
    margin: 20px 0;
    padding: 10px;
    background-color: #fff;
    border: 2px solid var(--text-color);
    border-radius: 5px;
}

.md-tooltip-hide > span {
    /* 消除自带的"目录"二字 */
    display: none;
}

.md-toc:before {
    /* 自定义"目录"二字 */
    position: relative;
    left: 5px;
    bottom: 0px;
    display: inline-block;
    content: '目录';
    padding-bottom: 10px;
    font-weight: bold;
    color: var(--text-color);
}

#write div.md-toc-tooltip {
    /* 设置自带工具条 */
    position: absolute;
    top: -30px;
    border: none;
    background-color: transparent;
}

.md-toc-content,
.md-toc:focus .md-toc-content {
    margin: 0px;
    padding: 5px;
    border: none;
    border-top: 2px dashed var(--text-color);
    font-weight: normal;
}

.md-toc-h1 .md-toc-inner {
    text-indent: 0em;
}

.md-toc-h2 .md-toc-inner {
    text-indent: 2em;
}

.md-toc-h3 .md-toc-inner {
    text-indent: 4em;
}

.md-toc-h4 .md-toc-inner {
    text-indent: 6em;
}

.md-toc-h5 .md-toc-inner {
    text-indent: 8em;
}

.md-toc-h6 .md-toc-inner {
    text-indent: 10em;
}

#write a.md-toc-inner {
    color: var(--text-color);
    background-color: #fff;
    border-bottom: none;
}

#write a.md-toc-inner:hover {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}

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


/* ----------------------------------------- 标题 ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
    border: none;
}

h1 {
    padding-bottom: 0.3em;
    margin: 2.4em auto 1.2em;
    font-size: 2.5em;
    text-align: center;
}

h1::after {
    display: block;
    width: 100px;
    height: 2px;
    margin: 0.2em auto 0;
    content: '';
    border-bottom: 3px dashed var(--primary-color);
}

h2 {
    margin: 1.9em 0px;
    padding: 0;
    font-size: 2em;
    font-weight: normal;
    display: block;
    text-align: left;
}

h2 span {
    border-bottom: 3px solid var(--primary-color);
}

h2:before {
    margin-right: 5px;
    content: "##";
    color: var(--primary-color);
    font-weight: bold;
}

h3 {
    font-size: 1.7em;
    padding-bottom: 10px;
}

h3:before {
    content: '';
    width: 100%;
    padding: 0px 24px;
    border-bottom: 1px solid #eee;
    position: absolute;
    bottom: -1px;
    left: -24px;
    box-sizing: unset;
}

h3:after {
    transition: all 0.5s ease-out;
    content: '';
    position: absolute;
    background: var(--primary-color);
    width: 1em;
    height: 5px;
    bottom: -3px;
    left: 0;
    border-radius: 10px;
}

h3:hover:after {
    width: 2em;
}

h4 {
    font-size: 1.4em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

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


/* ----------------------------------------- 引用块 -------------------------------------- */
blockquote {
    margin: 10px 0px;
    padding: 10px;
    border-left: 5px solid #a68bff;
    background-color: #f3f0ff;
}

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


/* ---------------------------------------- 注释 ----------------------------------------- */
.md-comment {
    color: #4e9452;
    opacity: 1;
}

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


/* ----------------------------------------- 超链接 --------------------------------------- */
#write a {
    margin: 2px 0px;
    padding: 0px;
    color: #61abff;
    text-decoration: none;
}

#write a:hover {
    color: #db524f;
    cursor: pointer !important;
}

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


/* ----------------------------------------- 高亮 ------------------------------------- */
#write span[md-inline="highlight"] mark {
    margin: 0px;
    padding: 2px 4px;
    background: #fbe598;
    border-radius: 2px;
}

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


/* ---------------------------------------- 脚注与链接引用 ----------------------------------------- */
/*footnotes mark*/
#write .md-footnote {
    background-color: inherit;
    font-size: 0.9rem;
    border-radius: 0.9rem;
    padding-left: 0;
}

#write .md-footnote:before {
    content: "[";
}

#write .md-footnote:after {
    content: "]";
}

/*footnotes content*/
.md-hover-tip .code-tooltip-content {
    border-radius: 2px;
}

/*footnotes title*/
span.md-def-name {
    padding-right: 3ch;
    padding-left: 0;
    position: relative;
    font-weight: normal;
}

/*footnotes desc*/
.footnotes {
    font-size: 1rem;
    font-weight: normal;
    color: var(--text-color);
    position: relative;
}

/*footnotes tooltip text*/
.code-tooltip-content .md-plain {
    font-size: 0.9rem;
    font-family: inherit;
}

.code-tooltip-content code {
    padding: 0 2px;
    font-family: inherit;
    background-color: inherit;
}

div.code-tooltip-content {
    box-shadow: 0 0 8px var(--text-color) 00045;
}

.footnotes {
    opacity: 1;
}

.md-def-name:after {
    content: ". ^";
    color: var(--text-color);
}

.md-def-footnote .md-def-name:before {
    content: "";
    color: var(--text-color);
    position: absolute;
}

.md-def-name:before {
    content: "";
    color: var(--text-color);
    position: absolute;
}

.md-content.md-url,
.md-def-content.md-def-url.md-auto-disp {
    text-decoration: none;
    border-bottom: .1rem solid var(--text-color);
}

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


/* --------------------------------------- 行内代码 --------------------------------------- */
#write code {
    margin: 0px;
    padding: 2px 4px;
    font-size: 0.9rem;
    font-family: var(--text-font);
    color: #4c4c4c;
    background-color: #edebeb;
    border-radius: 2px;
}

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


/* ----------------------------------------- 代码块 --------------------------------------- */
.md-fences,
.md-fences:active {
    background-color: #303233;
    border-radius: 6px;
    padding: 8px 4px 8px 4px !important;
    margin-top: 15px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.md-fences .code-tooltip {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    background-color: #fff;
}

.md-fences.md-focus .code-tooltip {
    opacity: 1;
    visibility: visible;
}

.CodeMirror-lines {
    padding-left: 4px;
    color: #e6e6e6;
    font-size: 1rem;
    font-family: var(--text-font);
}

.CodeMirror-cursor {
    border-color: #fff !important;
}

.CodeMirror-gutters {
    border: none;
}

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

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

.cm-s-inner .cm-variable-2 {
    color: #eeffff;
}

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

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

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

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

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

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

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

.cm-s-inner .cm-comment {
    /*color: #676e95;*/
    color: #7e85b4;
}

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

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

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

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

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

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

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

.cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1);
    background-color: #ff5370;
}

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

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


/* --------------------------------------- 有序列表 --------------------------------------- */
ol {
    padding: 0 0 0 2.5em;
    margin-top: 0;
    list-style-type: none;
    counter-reset: item;
}

ol > li {
    position: relative;
    padding: 0.4rem 0;
    line-height: var(--list-line-height);
}


ol > li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: calc(var(--list-line-height) / 2 - 0.4rem);
    left: -2.5em;
    height: 1.6rem;
    width: 1.6rem;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    line-height: 1.6rem;
    background-color: var(--primary-color-bg);
    color: var(--primary-color);
}


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


/* --------------------------------------- 无序列表 --------------------------------------- */
ul {
    padding: 0 0 0 2em;
    margin-top: 0;
    list-style: none;
    padding-left: 0 !important;
}

#write > ul > li {
    position: relative;
    padding-left: var(--list-line-padding);
    line-height: var(--list-line-height);
}

#write > ul > li::before {
    content: '';
    width: var(--list-dot-diameter);
    height: var(--list-dot-diameter);
    background: var(--primary-color);
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    border: 3px solid #fff;
    z-index: 100;
    position: absolute;
    top: calc((var(--list-line-height) - var(--list-dot-diameter)) / 2);
    left: -2px;
}

#write > ul > li::after {
    content: '';
    height: calc(100% + 5px);
    width: 2px;
    background: var(--primary-color-bg);
    position: absolute;
    z-index: 1;
    left: calc(var(--list-dot-diameter) / 2 - 3px);
    top: 1.1rem;
}

#write > ul > li:last-child:after {
    display: none;
}

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


/* ------------------------------------- 次级无序列表 ------------------------------------- */
.ul-list .ul-list {
    padding-left: 2rem;
}

.ul-list .ul-list .md-list-item,
.ol-list .ul-list .md-list-item {
    padding-left: var(--list-line-padding);
}

.ul-list > .md-list-item > .ul-list .md-list-item::before,
.ol-list > .md-list-item > .ul-list .md-list-item::before {
    content: '';
    width: var(--list-dot-diameter);
    height: var(--list-dot-diameter);
    background: var(--color7);
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #fff;
    z-index: 100;
    position: absolute;
    left: -2px;
    top: calc((var(--list-line-height) - var(--list-dot-diameter)) / 2);
}

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


/* ---------------------------------------- 任务列表 ------------------------------------- */
.task-list-item p {
    line-height: var(--list-line-height);
}

#write input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0 !important;
    top: calc((var(--list-line-height) - 1.4rem) / 2);
    left: 1.2rem;
    z-index: 999;
    cursor: pointer;
}

#write .ul-list li.md-task-list-item.task-list-done::before,
#write .ul-list li.md-task-list-item.task-list-not-done::before {
    border: none;
    position: absolute;
    content: "";
    background-size: 100%;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    top: calc((var(--list-line-height) - 1.3rem) / 2);
    left: -0.1rem;
}

#write .ul-list li.md-task-list-item.task-list-done::before {
    background: var(--checkbox-checked) 0 0 no-repeat;
    background-size: 100%;
}

#write .ul-list li.md-task-list-item.task-list-not-done::before {
    background: var(--checkbox-unchecked) 0 0 no-repeat;
    background-size: 100%;
}

#write .ul-list li.md-task-list-item::after {
    display: none;
}

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


/* ------------------------------------- 图片 ------------------------------------------ */
.md-image img {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    text-align: center;
}

#write {
    counter-reset: imgNum;
}

.md-image:after {
    margin-top: 10px;
    display: block;
    text-align: center;
    font-size: 1rem;
    counter-increment: imgNum;
}

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


/* ---------------------------------------- 表格 --------------------------------------- */
.table-figure{
    overflow: hidden;
}

table {
    width: 100%;
    padding: 0;
    word-break: initial;
}

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

table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}

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

table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}

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

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

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