411 lines
7.8 KiB
PHP
411 lines
7.8 KiB
PHP
<?php
|
|
?>
|
|
<style type="text/css">
|
|
/* 文章详情样式 */
|
|
#articleContent h1::before, #articleContent h2::before, #articleContent h3::before, #articleContent h4::before, #articleContent h5::before, #articleContent h6::before {
|
|
display: block;
|
|
content: " ";
|
|
height: 100px;
|
|
margin-top: -100px;
|
|
visibility: hidden
|
|
}
|
|
|
|
#articleContent :focus {
|
|
outline: 0
|
|
}
|
|
|
|
.toc-fixed {
|
|
position: fixed;
|
|
top: 64px
|
|
}
|
|
|
|
.toc-widget {
|
|
width: 345px;
|
|
padding-left: 20px
|
|
}
|
|
|
|
.toc-widget .toc-title {
|
|
margin: 35px 0 15px 0;
|
|
padding-left: 17px;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.5rem
|
|
}
|
|
|
|
.toc-widget ol {
|
|
padding: 0;
|
|
list-style: none
|
|
}
|
|
|
|
#toc-content {
|
|
height: calc(100vh - 250px);
|
|
overflow: auto
|
|
}
|
|
|
|
#toc-content ol {
|
|
padding-left: 10px
|
|
}
|
|
|
|
#toc-content ol li {
|
|
padding-left: 10px
|
|
}
|
|
|
|
#toc-content .toc-link:hover {
|
|
color: #42b983;
|
|
font-weight: 700;
|
|
text-decoration: underline
|
|
}
|
|
|
|
#toc-content .toc-link::before {
|
|
background-color: transparent;
|
|
max-height: 25px
|
|
}
|
|
|
|
#toc-content .is-active-link {
|
|
color: #42b983
|
|
}
|
|
|
|
#toc-content .is-active-link::before {
|
|
background-color: #42b983
|
|
}
|
|
|
|
#floating-toc-btn {
|
|
position: fixed;
|
|
right: 15px;
|
|
bottom: 76px;
|
|
padding-top: 15px;
|
|
margin-bottom: 0;
|
|
z-index: 998
|
|
}
|
|
|
|
#floating-toc-btn .btn-floating {
|
|
width: 48px;
|
|
height: 48px
|
|
}
|
|
|
|
#floating-toc-btn .btn-floating i {
|
|
line-height: 48px;
|
|
font-size: 1.4rem
|
|
}
|
|
|
|
.valine-card {
|
|
margin: 1.5rem auto
|
|
}
|
|
|
|
.valine-card .card-content {
|
|
padding: 20px 20px 5px 20px
|
|
}
|
|
|
|
#vcomments textarea {
|
|
box-sizing: border-box;
|
|
background: url(<?php $this->options->themeUrl('static/medias/comment_bg.png'); ?>) 100% 100% no-repeat
|
|
}
|
|
|
|
#vcomments p {
|
|
margin: 2px 2px 10px;
|
|
font-size: 1.05rem;
|
|
line-height: 1.78rem
|
|
}
|
|
|
|
#vcomments blockquote p {
|
|
text-indent: .2rem
|
|
}
|
|
|
|
#vcomments a {
|
|
padding: 0 2px;
|
|
color: #4cbf30;
|
|
font-weight: 500;
|
|
text-decoration: none
|
|
}
|
|
|
|
#vcomments img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
cursor: pointer
|
|
}
|
|
|
|
#vcomments ol li {
|
|
list-style-type: decimal
|
|
}
|
|
|
|
#vcomments ol, ul {
|
|
display: block;
|
|
padding-left: 2em;
|
|
word-spacing: .05rem
|
|
}
|
|
|
|
#vcomments ul li, ol li {
|
|
display: list-item;
|
|
line-height: 1.8rem;
|
|
font-size: 1rem
|
|
}
|
|
|
|
#vcomments ul li {
|
|
list-style-type: disc
|
|
}
|
|
|
|
#vcomments ul ul li {
|
|
list-style-type: circle
|
|
}
|
|
|
|
#vcomments table, td, th {
|
|
padding: 12px 13px;
|
|
border: 1px solid #dfe2e5
|
|
}
|
|
|
|
#vcomments table, td, th {
|
|
border: 0
|
|
}
|
|
|
|
table tr:nth-child(2n), thead {
|
|
background-color: #fafafa
|
|
}
|
|
|
|
#vcomments table th {
|
|
background-color: #f2f2f2;
|
|
min-width: 80px
|
|
}
|
|
|
|
#vcomments table td {
|
|
min-width: 80px
|
|
}
|
|
|
|
#vcomments h1 {
|
|
font-size: 1.85rem;
|
|
font-weight: 700;
|
|
line-height: 2.2rem
|
|
}
|
|
|
|
#vcomments h2 {
|
|
font-size: 1.65rem;
|
|
font-weight: 700;
|
|
line-height: 1.9rem
|
|
}
|
|
|
|
#vcomments h3 {
|
|
font-size: 1.45rem;
|
|
font-weight: 700;
|
|
line-height: 1.7rem
|
|
}
|
|
|
|
#vcomments h4 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.5rem
|
|
}
|
|
|
|
#vcomments h5 {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
line-height: 1.4rem
|
|
}
|
|
|
|
#vcomments h6 {
|
|
font-size: 1rem;
|
|
line-height: 1.3rem
|
|
}
|
|
|
|
#vcomments p {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem
|
|
}
|
|
|
|
#vcomments hr {
|
|
margin: 12px 0;
|
|
border: 0;
|
|
border-top: 1px solid #ccc
|
|
}
|
|
|
|
#vcomments blockquote {
|
|
margin: 15px 0;
|
|
border-left: 5px solid #42b983;
|
|
padding: 1rem .8rem .3rem .8rem;
|
|
color: #666;
|
|
background-color: rgba(66, 185, 131, .1)
|
|
}
|
|
|
|
#vcomments pre {
|
|
font-family: monospace, monospace;
|
|
padding: 1.2em;
|
|
margin: .5em 0;
|
|
background: #272822;
|
|
overflow: auto;
|
|
border-radius: .3em;
|
|
tab-size: 4
|
|
}
|
|
|
|
#vcomments code {
|
|
font-family: monospace, monospace;
|
|
padding: 1px 3px;
|
|
font-size: .92rem;
|
|
color: #e96900;
|
|
background-color: #f8f8f8;d
|
|
border-radius: 2px
|
|
}
|
|
|
|
#vcomments pre code {
|
|
font-family: monospace, monospace;
|
|
padding: 0;
|
|
color: #e8eaf6;
|
|
background-color: #272822
|
|
}
|
|
|
|
#vcomments pre[class*=language-] {
|
|
padding: 1.2em;
|
|
margin: .5em 0
|
|
}
|
|
|
|
#vcomments code[class*=language-], pre[class*=language-] {
|
|
color: #e8eaf6
|
|
}
|
|
|
|
#vcomments [type=checkbox]:not(:checked), [type=checkbox]:checked {
|
|
position: inherit;
|
|
margin-left: -1.3rem;
|
|
margin-right: .4rem;
|
|
margin-top: -1px;
|
|
vertical-align: middle;
|
|
left: unset;
|
|
visibility: visible
|
|
}
|
|
|
|
#vcomments b, strong {
|
|
font-weight: 700
|
|
}
|
|
|
|
#vcomments dfn {
|
|
font-style: italic
|
|
}
|
|
|
|
#vcomments small {
|
|
font-size: 85%
|
|
}
|
|
|
|
#vcomments cite {
|
|
font-style: normal
|
|
}
|
|
|
|
#vcomments mark {
|
|
background-color: #fcf8e3;
|
|
padding: .2em
|
|
}
|
|
|
|
#vcomments table, td, th {
|
|
padding: 12px 13px;
|
|
border: 1px solid #dfe2e5
|
|
}
|
|
|
|
table tr:nth-child(2n), thead {
|
|
background-color: #fafafa
|
|
}
|
|
|
|
#vcomments table th {
|
|
background-color: #f2f2f2;
|
|
min-width: 80px
|
|
}
|
|
|
|
#vcomments table td {
|
|
min-width: 80px
|
|
}
|
|
|
|
#vcomments [type=checkbox]:not(:checked), [type=checkbox]:checked {
|
|
position: inherit;
|
|
margin-left: -1.3rem;
|
|
margin-right: .4rem;
|
|
margin-top: -1px;
|
|
vertical-align: middle;
|
|
left: unset;
|
|
visibility: visible
|
|
}
|
|
|
|
#reward {
|
|
margin: 40px 0;
|
|
text-align: center
|
|
}
|
|
|
|
#reward .reward-link {
|
|
font-size: 1.88rem
|
|
}
|
|
|
|
#reward .btn-floating:hover {
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 5px 15px rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
#rewardModal {
|
|
width: 320px;
|
|
height: 350px
|
|
}
|
|
|
|
#rewardModal .reward-title {
|
|
margin: 15px auto;
|
|
padding-bottom: 5px
|
|
}
|
|
|
|
#rewardModal .modal-content {
|
|
padding: 10px
|
|
}
|
|
|
|
#rewardModal .close {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
color: rgba(0, 0, 0, .5);
|
|
font-size: 1.3rem;
|
|
line-height: 20px;
|
|
cursor: pointer
|
|
}
|
|
|
|
#rewardModal .close:hover {
|
|
color: #ef5350;
|
|
transform: scale(1.3);
|
|
-moz-transform: scale(1.3);
|
|
-webkit-transform: scale(1.3);
|
|
-o-transform: scale(1.3)
|
|
}
|
|
|
|
#rewardModal .reward-tabs {
|
|
margin: 0 auto;
|
|
width: 210px
|
|
}
|
|
|
|
.reward-tabs .tabs {
|
|
height: 38px;
|
|
margin: 10px auto;
|
|
padding-left: 0
|
|
}
|
|
|
|
.reward-content ul {
|
|
padding-left: 0 !important
|
|
}
|
|
|
|
.reward-tabs .tabs .tab {
|
|
height: 38px;
|
|
line-height: 38px
|
|
}
|
|
|
|
.reward-tabs .tab a {
|
|
color: #fff;
|
|
background-color: #ccc
|
|
}
|
|
|
|
.reward-tabs .tab a:hover {
|
|
background-color: #ccc;
|
|
color: #fff
|
|
}
|
|
|
|
.reward-tabs .wechat-tab .active {
|
|
color: #fff !important;
|
|
background-color: #22ab38 !important
|
|
}
|
|
|
|
.reward-tabs .alipay-tab .active {
|
|
color: #fff !important;
|
|
background-color: #019fe8 !important
|
|
}
|
|
|
|
.reward-tabs .reward-img {
|
|
width: 210px;
|
|
height: 210px
|
|
}
|
|
</style>
|