onelight.css

:root {
    --bg-color: #f2f2f2;
    --code-bg-color: #282c34;
    --text-color: #333;
    --primary-btn-text-color: #fff;
    --window-border: 1px solid #eee;
    --active-file-bg-color: #eee;
    --active-file-text-color: inherit;
    --active-file-border-color: var(--main-red);
    --side-bar-bg-color: var(--bg-color);
    --item-hover-bg-color: hsla(0, 0%, 90%, .59);
    --item-hover-text-color: var(--main-red);
    --monospace: monospace;
    --select-text-bg-color: #3b3e4d;
    --main-blue: #166ff3;
    --main-red: #ff6b6b;
    --main-green: #2ed573;
    --main-purple: #c94ae9;
    --main-yellow: #f9b03d;
    --main-font-family: "Cascadia Code", "喵字果汁体", consolas, "微软雅黑", "PingFang SC", "Microsoft YaHei", sans-serif;
    --code--bg-color: #282c34;
    --code--bg-color-light: #3d404e;
    --item-bg-color-red: #f4433638;
    --item-bg-color-blue: #42a5f542;
    --box-shadow: 0px 4px 4px rgba(0, 0, 0, .1);
    --transition: box-shadow 0.3s ease, transform 0.3s ease
}

body {
    font-family: var(--main-font-family)
}

::-moz-selection {
    color: #fff
}

::-webkit-selection {
    background: #b981d1;
    color: #fff
}

#write {
    letter-spacing: 0;
    max-width: 914px;
    text-align: left
}

#write,
#write p {
    font-size: 16px
}

#write p {
    color: #000;
    line-height: 26px;
    margin: 0;
    padding-bottom: 8px;
    padding-top: 8px
}

#write input[type=checkbox] {
    left: -3px;
    margin-right: 5px;
    margin-top: calc(1em - 2px)
}

#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
    color: #000;
    font-weight: 700;
    margin: .72em 0;
    padding: 0
}

#write h2:before {
    bottom: .2rem;
    content: "H2"
}

#write h3:before {
    bottom: .2rem;
    content: "H3"
}

#write h4:before {
    bottom: .2rem;
    content: "H4"
}

#write h5:before {
    bottom: .2rem;
    content: "H5"
}

#write h6:before {
    bottom: .2rem;
    content: "H6"
}

#write h2:before,
#write h3:before,
#write h4:before,
#write h5:before,
#write h6:before {
    border-radius: 0;
    bottom: 0;
    color: #166ff36e;
    float: none;
    font-size: .9rem;
    font-variant: "small-caps";
    font-weight: 700;
    left: auto;
    line-height: 20px;
    padding: 0;
    position: absolute;
    right: calc(100% + 10px);
    vertical-align: baseline
}

#write h2 {
    font-size: 1.7rem;
    margin: 1em 0
}

#write h2 span {
    color: #136ef7;
    font-weight: 700;
    padding: 3px 10px 1px
}

#write h3 {
    font-size: 1.5rem
}

#write h4 {
    font-size: 1.25rem
}

#write h5,
#write h6 {
    font-size: 1rem
}

#write ol,
#write ul {
    color: var(--main-red);
    margin-bottom: 8px;
    margin-top: 8px;
    padding-left: 40px
}

#write ul {
    list-style-type: disclosure-closed
}

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

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

#write li section {
    font-size: 15px
}

#write strong {
    color: #136ef7;
    font-weight: 700
}

#write blockquote {
    background: #fff;
    border-bottom-right-radius: 10px;
    border-left: 5px solid var(--main-blue);
    border-top-right-radius: 10px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .2);
    color: #6a737d;
    font-size: .9em;
    margin-bottom: 16px;
    margin-top: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 10px 20px;
    transition: var(--transition)
}

#write blockquote:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
    transform: scale(1.01)
}

#write blockquote p {
    line-height: 26px
}

#write a {
    border-bottom: 2px solid #c94ae9;
    color: #c94ae9;
    font-weight: 700;
    text-decoration: none
}

#write code {
    background-color: #f0f0f0;
    color: #eb4c37;
    font-family: var(--main-font-family);
    font-size: 14px
}

#write li code,
#write p code,
#write span code {
    border-radius: 4px;
    margin: 0 2px;
    padding: 2px 4px;
    word-break: break-all;
    word-wrap: break-word
}

#write img {
    border: 0;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    transition: var(--transition);
    width: auto
}

#write img:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
    transform: scale(1.02)
}

#write table tr {
    background-color: #fff;
    border: 0;
    border-top: 1px solid #ccc
}

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

#write table tr td,
#write table tr th {
    border: 1px solid #ccc;
    font-size: 16px;
    line-height: 1.5;
    padding: 5px 10px;
    text-align: left
}

#write table tr th {
    background-color: #42a5f53d;
    color: var(--main-blue);
    font-weight: 700
}

#write .md-def-name {
    padding-right: 2.3vw
}

#write .md-def-name:before {
    color: #000;
    content: "["
}

#write .md-def-name:after {
    color: #000
}

.md-fences,
code {
    border-radius: 5px;
    margin-left: .2em;
    margin-right: .2em;
    padding: .1em
}

.md-fences {
    background-color: var(--code-bg-color);
    box-shadow: 0 4px 10px gray;
    color: #ececec;
    margin: 0 0 20px;
    padding: .4em 1em .3em;
    transition: var(--transition)
}

.md-fences:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
    transform: scale(1.005)
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid #26ed91;
    z-index: 5
}

.cm-s-inner div.CodeMirror-selected {
    background: rgba(113, 124, 180, .2)
}

.cm-s-inner .cm-keyword {
    color: var(--main-purple)
}

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

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

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

.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: #ff8c00
}

.cm-s-inner .cm-string {
    color: #00ad47
}

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

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

.cm-s-inner .cm-variable {
    color: #42a5f5
}

.cm-s-inner .cm-meta {
    color: var(--main-red)
}

.cm-s-inner .cm-attribute {
    color: #ad31ff
}

.cm-s-inner .cm-property,
.cm-s-inner .cm-qualifier {
    color: var(--main-red)
}

.cm-s-inner .cm-error {
    background-color: #e9405c;
    color: #fff
}

pre[lang=flow],
pre[lang=mermaid],
pre[lang=sequence] {
    background: #fff;
    color: #333
}

mark {
    background: #0070ff00;
    color: var(--main-red);
    font-weight: 700
}

#write pre {
    font-family: var(--main-font-family)
}

.CodeMirror-selected,
.CodeMirror-selectedtext {
    background: hsla(0, 100%, 75%, .1) !important;
    color: inherit !important;
    text-shadow: none
}

.md-fences-adv-panel,
.md-math-container,
.md-mathjax-preview {
    font-family: fantasy
}

.searchpanel-search-option-btn.active {
    animation: colorChange 1s infinite;
    color: var(--main-blue)
}

span#filesearch-case-option-btn:active {
    color: var(--main-blue)
}

.md-inline-math-container mjx-container {
    zoom: 1
}

.md-expand.md-img-loaded>.md-meta>span,
.md-image>.md-meta {
    color: var(--main-blue);
    font-family: var(--main-font-family)
}

.outline-item-active {
    background: var(--item-bg-color-blue);
    border-left: 28px solid transparent;
    margin-left: -28px;
    margin-right: -28px
}

.pin-outline #outline-content .outline-active strong,
.pin-outline .outline-active {
    color: var(--main-blue);
    font-weight: 700
}

.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    background-color: var(--main-blue)
}

.ion-close-round:before {
    color: var(--main-red)
}

#md-searchpanel .btn label {
    color: var(--main-blue);
    font-weight: 700
}

#write .md-footnote {
    color: var(--main-red);
    font-weight: 700
}

.cm-search-hit.CodeMirror-selectedtext,
.md-search-hit.md-search-select,
.md-search-select {
    background: #ff0;
    color: red;
    font-weight: 700
}

.md-search-hit {
    background-color: hsla(0, 0%, 100%, .123);
    contain: style;
    transform: translateZ(0)
}

#write h1 {
    font-size: 50px;
    text-align: center
}

#write .ol .li,
#write .ul .li,
#write ol li,
#write ul li {
    list-style-type: none;
    margin-bottom: 7px;
    margin-top: 7px
}

#write .ul>.li:not(.tab):before,
#write ul>li:not(.tab):before {
    border: .1em solid var(--main-blue);
    border-radius: .31em;
    content: "";
    height: .62em;
    line-height: .42em;
    margin-left: -22px;
    margin-top: 15px;
    width: .62em
}

#write .ol .li:before,
#write .ul .li:before,
#write ol li:before,
#write ul li:before {
    background: var(--main-blue);
    color: var(--olfore-color);
    cursor: pointer;
    position: absolute;
    transition: all .3s ease-out
}

#write .ol .li:first-child,
#write ol li:first-child {
    counter-reset: li
}

#write .ol .li:hover:before,
#write .ul .li:hover:before,
#write ol li:hover:before,
#write ul li:hover:before {
    transform: rotate(1turn)
}

#write .ul>.li:not(.tab):hover:before,
#write ul>li:not(.tab):hover:before {
    background-color: var(--main-red);
    border-color: var(--focus-color)
}

#write .ol>.li:before,
#write ol>li:before {
    border-radius: .825em;
    color: #fff;
    content: counter(li);
    counter-increment: li;
    font-size: .65em;
    height: 1.65em;
    line-height: 1.7em;
    margin-left: -25px;
    margin-top: 12px;
    text-align: center;
    width: 1.65em
}

#write .ol .li input,
#write .ul .li input,
#write ol li input,
#write ul li input {
    margin-bottom: 0;
    margin-top: 0
}

table tr:hover {
    background-color: #65666841
}

.md-fences:not(.md-focus) .CodeMirror-code>:hover {
    background-color: var(--code--bg-color-light)
}

hr {
    background-color: transparent;
    border-top: 2px dashed var(--main-blue);
    height: 2px
}

kbd {
    font-family: cascadia code;
    font-weight: 700
}

p.md-toc-content {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow)
}

#write>pre.md-meta-block.md-end-block {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    padding: 10px;
    transition: var(--transition)
}

#write>pre.md-meta-block.md-end-block:hover {
    box-shadow: var(--box-shadow);
    transform: scale(1.01)
}

.info-panel-tab-title:hover,
.outline-label:hover {
    color: var(--main-blue)
}

.ty-show-search #info-panel-tab-search .info-panel-tab-border {
    background-color: var(--main-blue)
}

.md-notification-content {
    background: #ff00001a
}

.md-task-list-item.task-list-done span {
    color: #999;
    text-decoration: line-through
}

.file-library-node.file-tree-node.file-library-file-node.active,
.file-node-content:hover {
    color: var(--main-blue)
}

.md-rawblock-after,
.md-rawblock-before,
code,
pre,
samp,
tt {
    font-family: var(--main-font-family)
}

.fa-folder:before,
.md-image-btn:before {
    color: var(--main-yellow)
}

.md-image-btn:before {
    font-family: var(--main-font-family)
}

.md-image-btn,
.modal-content {
    background: #fff
}

.modal-content,
video {
    border-radius: 10px
}

video {
    box-shadow: 11px 10px 12px rgba(0, 0, 0, .5)
}


/* github警告框 */
.md-alert {
    background: #fff;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    transition: var(--transition)
}

.md-alert:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
    transform: scale(1.01)
}

.md-alert.md-alert-warning {
    border-left-color: #faad14
}

.md-alert-text-warning {
    color: #faad14
}

.md-blockmeta {
    color: #777
}

figure.md-table-fig.table-figure {
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    transition: var(--transition)
}

figure.md-table-fig.table-figure:hover {
    box-shadow: var(--box-shadow);
    transform: scale(1.01)
}

.ty-on-outline-filter .ty-outline-hit {
    background: #ff0;
    color: red;
    font-weight: 700
}

#file-library-search-input,
#md-searchpanel input {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: hsla(0, 0%, 100%, .3);
    border-radius: 5px;
    box-shadow: unset
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: var(--main-blue)
}

.form-control:focus {
    border-color: #c2c2c2;
    outline: 0
}

.code-tooltip .ty-input:focus,
input:focus {
    border-color: unset;
    box-shadow: unset
}

::-moz-selection {
    background: #42a5f554
}

::selection {
    background: #42a5f554
}

.megamenu-menu-list li a.active,
.megamenu-menu-list:not(.saved) li a:hover {
    background-color: var(--item-hover-bg-color);
    color: var(--main-blue)
}

.megamenu-menu {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: var(--bg-color);
    color: #000
}

.typora-node.pin-outline #md-searchpanel,
.typora-node.pin-outline .md-notification-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: hsla(0, 0%, 100%, .3)
}

.dropdown-menu {
    background: var(--bg-color)
}

.dropdown-menu,
.menu-item-container a.menu-style-btn {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.menu-item-container a.menu-style-btn {
    background: transparent
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
    color: #fff
}

.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
    color: var(--main-blue)
}

.outline-item:hover {
    background: var(--item-bg-color-red);
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    margin-left: -28px;
    margin-right: -28px
}

.file-library-node.file-tree-node.file-library-file-node:hover {
    background: var(--item-bg-color-blue)
}

.context-menu.dropdown-menu>.active>a,
.context-menu.dropdown-menu>li>a:hover,
.menu-style-btn.active {
    background: var(--item-bg-color-blue);
    color: var(--main-blue)
}

script,
text {
    font-family: var(--main-font-family)
}

span[alt=highlight] {
    background: #ff0;
    color: red;
    font-weight: 700
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .1);
    width: 5px
}

content {
    background-color: transparent;
    background-image: url('./onelight/img/bg.gif');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100px auto;
    transition: background-image .5s ease-in-out, background-size .5s ease-in-out
}

::-moz-selection {
    background: var(--item-bg-color-blue)
}

.in-text-selection,
::selection {
    background: var(--item-bg-color-blue)
}

.CodeMirror-gutters {
    border-right: unset
}

.megamenu-menu-header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #2e2e2e;
    border-bottom: unset;
    height: 90px;
    position: relative;
    text-align: center
}

.ion-android-arrow-back:before {
    content: "<-";
    font-family: cascadia code, fira code, var(--main-font-family)
}

a#megamenu-back-btn:hover {
    color: var(--main-blue)
}

#megamenu-back-btn {
    border: 0;
    font-size: 25px
}

footer.ty-footer {
    border-top: 0
}

pre.md-fences-advanced.md-focus .md-fences-adv-panel {
    border: 0
}

#typora-source .CodeMirror-lines {
    background: #fff;
    border-radius: 10px;
    max-width: 90%
}

#typora-source .CodeMirror-lines,
.CodeMirror-wrap .CodeMirror-code pre {
    font-family: var(--main-font-family)
}

.cm-s-typora-default .cm-code,
.cm-s-typora-default .cm-comment {
    color: green;
    font-family: var(--main-font-family)
}

.cm-s-inner .cm-tag {
    color: var(--main-blue)
}

.cm-s-typora-default .cm-overlay {
    font-family: var(--main-font-family)
}

.cm-s-typora-default .CodeMirror-activeline-background {
    background: hsla(0, 0%, 60%, .2);
    left: -60px;
    right: -30px
}

.cm-s-typora-default .cm-atom,
.cm-s-typora-default .cm-number {
    color: var(--main-blue)
}

#typora-source .CodeMirror-activeline .CodeMirror-linenumber,
#typora-source .CodeMirror-linenumber.CodeMirror-linenumber-show {
    color: var(--main-blue);
    font-family: var(--main-font-family)
}

.md-html-inline .md-meta,
.md-ruby .md-meta {
    font-family: var(--main-font-family)
}

#write table tr:hover {
    background: hsla(0, 0%, 100%, .34)
}

.cm-s-typora-default .cm-tag {
    color: #ff7800
}

.cm-s-typora-default .cm-link {
    color: #cd00dc;
    font-style: italic;
    text-decoration: underline
}