halo-theme-hao/templates/assets/css/read-mode.css

.read-mode {
    --font-color: #4c4948;
    --readmode-light-color: #fff;
    --white: #4c4948;
    --light-grey: #4c4948;
    --gray: #d6dbdf;
    --hr-border: #d6dbdf;
    --hr-before-color: #b9c2c9;
    --highlight-bg: #f7f7f7;
    --exit-btn-bg: #c0c0c0;
    --exit-btn-color: #fff;
    --exit-btn-hover: #8d8d8d;
    --pseudo-hover: none
}

[data-theme=dark] .read-mode {
    --font-color: rgba(255,255,255,0.7);
    --readmode-light-color: #0d0d0d;
    --white: rgba(255,255,255,0.9);
    --light-grey: rgba(255,255,255,0.7);
    --gray: rgba(255,255,255,0.7);
    --hr-border: rgba(255,255,255,0.5);
    --hr-before-color: rgba(255,255,255,0.7);
    --highlight-bg: #171717;
    --exit-btn-bg: #1f1f1f;
    --exit-btn-color: rgba(255,255,255,0.9);
    --exit-btn-hover: #525252
}

.read-mode {
    background: var(--readmode-light-color)
}

.read-mode .exit-readmode {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--exit-btn-bg);
    color: var(--exit-btn-color);
    font-size: 16px;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -o-transition: background .3s;
    -ms-transition: background .3s;
    transition: background .3s
}

@media screen and (max-width: 768px) {
    .read-mode .exit-readmode {
        top:initial;
        bottom: 30px
    }
}

.read-mode .exit-readmode:hover {
    background: var(--exit-btn-hover)
}

.read-mode #aside-content {
    display: none
}

.read-mode #page-header.post-bg {
    background-color: transparent;
    background-image: none!important
}

.read-mode #page-header.post-bg:before {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0)
}

.read-mode #page-header.post-bg>#post-info {
    text-align: center
}

.read-mode #post {
    margin: 0 auto;
    background: 0 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.read-mode #post:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

.read-mode>canvas {
    display: none!important
}

.read-mode #footer,.read-mode #nav,.read-mode #post>:not(#post-info):not(.post-content),.read-mode #rightside,.read-mode #web_bg,.read-mode .highlight-tools,.read-mode .not-top-img,.read-mode .post-outdate-notice {
    display: none!important
}

.read-mode #article-container a {
    color: #99a9bf
}

.read-mode #article-container .highlight:not(.js-file-line-container),.read-mode #article-container pre {
    background: var(--highlight-bg)!important
}

.read-mode #article-container .highlight:not(.js-file-line-container) *,.read-mode #article-container pre * {
    color: var(--font-color)!important
}

.read-mode #article-container figure.highlight {
    border-radius: 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.read-mode #article-container figure.highlight>:not(.highlight-tools) {
    display: block!important
}

.read-mode #article-container figure.highlight .line:before {
    color: var(--font-color)!important
}

.read-mode #article-container figure.highlight .hljs {
    background: var(-highlight-bg)!important
}

.read-mode #article-container h1,.read-mode #article-container h2,.read-mode #article-container h3,.read-mode #article-container h4,.read-mode #article-container h5,.read-mode #article-container h6 {
    padding: 0
}

.read-mode #article-container h1:before,.read-mode #article-container h2:before,.read-mode #article-container h3:before,.read-mode #article-container h4:before,.read-mode #article-container h5:before,.read-mode #article-container h6:before {
    content: ''
}

.read-mode #article-container h1:hover,.read-mode #article-container h2:hover,.read-mode #article-container h3:hover,.read-mode #article-container h4:hover,.read-mode #article-container h5:hover,.read-mode #article-container h6:hover {
    padding: 0
}

.read-mode #article-container li:hover:before,.read-mode #article-container ol:hover:before,.read-mode #article-container ul:hover:before {
    -webkit-transform: none!important;
    -moz-transform: none!important;
    -o-transform: none!important;
    -ms-transform: none!important;
    transform: none!important
}

.read-mode #article-container li:before,.read-mode #article-container ol:before {
    background: 0 0!important;
    color: var(--font-color)!important
}

.read-mode #article-container ul>li:before {
    border-color: var(--gray)!important
}

.read-mode #article-container .tabs {
    border: 2px solid var(--tab-border-color)
}

.read-mode #article-container .tabs>.nav-tabs {
    background: 0 0
}

.read-mode #article-container .tabs>.nav-tabs>.tab {
    border-top: none!important
}

.read-mode #article-container .tabs>.tab-contents .tab-item-content.active {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    animation: none
}

.read-mode #article-container code {
    color: var(--font-color)
}

.read-mode #article-container blockquote {
    border-color: var(--gray);
    background-color: var(--readmode-light-color)
}

.read-mode #article-container kbd {
    border: 1px solid var(--gray);
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--font-color)
}

.read-mode #article-container .hide-toggle {
    border: 1px solid var(--gray)!important
}

.read-mode #article-container .btn-anzhiyu,.read-mode #article-container .hide-button,.read-mode #article-container .hl-label {
    border: 1px solid var(--gray)!important;
    background: var(--readmode-light-color)!important;
    color: var(--font-color)!important
}

.read-mode #article-container .note {
    border: 2px solid var(--gray);
    border-left-color: var(--gray)!important;
    filter: none;
    background-color: var(--readmode-light-color)!important;
    color: var(--font-color)
}

.read-mode #article-container .note .note-icon,.read-mode #article-container .note:before {
    color: var(--font-color)
}