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

218 lines
5.9 KiB
CSS
Raw Normal View History

2024-04-12 06:35:37 +00:00
.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)
}