Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
solo-1
Project overview
Project overview
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
solo-1
Commits
c113deb8
Unverified
Commit
c113deb8
authored
Apr 18, 2020
by
Liang Ding
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/dev' into dev
parents
d2dad771
98c46095
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
10 additions
and
7 deletions
+10
-7
src/main/resources/js/page.js
src/main/resources/js/page.js
+1
-1
src/main/resources/js/page.min.js
src/main/resources/js/page.min.js
+1
-1
src/main/resources/scss/admin.css
src/main/resources/scss/admin.css
+1
-1
src/main/resources/scss/admin.scss
src/main/resources/scss/admin.scss
+1
-0
src/main/resources/skins/Casper/css/base.css
src/main/resources/skins/Casper/css/base.css
+1
-1
src/main/resources/skins/Casper/css/base.scss
src/main/resources/skins/Casper/css/base.scss
+2
-1
src/main/resources/skins/Casper/js/common.js
src/main/resources/skins/Casper/js/common.js
+2
-1
src/main/resources/skins/Casper/js/common.min.js
src/main/resources/skins/Casper/js/common.min.js
+1
-1
No files found.
src/main/resources/js/page.js
View file @
c113deb8
...
@@ -95,7 +95,7 @@ $.extend(Page.prototype, {
...
@@ -95,7 +95,7 @@ $.extend(Page.prototype, {
value
:
shareURL
,
value
:
shareURL
,
size
:
99
,
size
:
99
,
})
})
$qrCode
.
css
(
'
background-image
'
,
`url(
${
qr
.
toDataURL
(
'
image/jpeg
'
)}
)`
)
$qrCode
.
css
(
'
background-image
'
,
`url(
${
qr
.
toDataURL
(
'
image/jpeg
'
)}
)`
)
.
show
()
}
else
{
}
else
{
$qrCode
.
slideToggle
()
$qrCode
.
slideToggle
()
}
}
...
...
src/main/resources/js/page.min.js
View file @
c113deb8
!
function
(
e
){
var
t
=
{};
function
o
(
n
){
if
(
t
[
n
])
return
t
[
n
].
exports
;
var
r
=
t
[
n
]
=
{
i
:
n
,
l
:
!
1
,
exports
:{}};
return
e
[
n
].
call
(
r
.
exports
,
r
,
r
.
exports
,
o
),
r
.
l
=!
0
,
r
.
exports
}
o
.
m
=
e
,
o
.
c
=
t
,
o
.
d
=
function
(
e
,
t
,
n
){
o
.
o
(
e
,
t
)
||
Object
.
defineProperty
(
e
,
t
,{
enumerable
:
!
0
,
get
:
n
})},
o
.
r
=
function
(
e
){
"
undefined
"
!=
typeof
Symbol
&&
Symbol
.
toStringTag
&&
Object
.
defineProperty
(
e
,
Symbol
.
toStringTag
,{
value
:
"
Module
"
}),
Object
.
defineProperty
(
e
,
"
__esModule
"
,{
value
:
!
0
})},
o
.
t
=
function
(
e
,
t
){
if
(
1
&
t
&&
(
e
=
o
(
e
)),
8
&
t
)
return
e
;
if
(
4
&
t
&&
"
object
"
==
typeof
e
&&
e
&&
e
.
__esModule
)
return
e
;
var
n
=
Object
.
create
(
null
);
if
(
o
.
r
(
n
),
Object
.
defineProperty
(
n
,
"
default
"
,{
enumerable
:
!
0
,
value
:
e
}),
2
&
t
&&
"
string
"
!=
typeof
e
)
for
(
var
r
in
e
)
o
.
d
(
n
,
r
,
function
(
t
){
return
e
[
t
]}.
bind
(
null
,
r
));
return
n
},
o
.
n
=
function
(
e
){
var
t
=
e
&&
e
.
__esModule
?
function
(){
return
e
.
default
}:
function
(){
return
e
};
return
o
.
d
(
t
,
"
a
"
,
t
),
t
},
o
.
o
=
function
(
e
,
t
){
return
Object
.
prototype
.
hasOwnProperty
.
call
(
e
,
t
)},
o
.
p
=
""
,
o
(
o
.
s
=
60
)}({
60
:
function
(
e
,
t
){
window
.
Page
=
function
(
e
){
this
.
currentCommentId
=
""
,
this
.
tips
=
e
},
$
.
extend
(
Page
.
prototype
,{
vcomment
:
function
(){
var
e
=
$
(
"
#vcomment
"
);
if
(
0
!==
e
.
length
){
var
t
=
new
Vcomment
({
id
:
"
vcomment
"
,
postId
:
e
.
data
(
"
postid
"
),
url
:
"
https://hacpai.com
"
,
userName
:
e
.
data
(
"
name
"
),
currentPage
:
1
,
vditor
:{
lineNumber
:
Label
.
showCodeBlockLn
,
hljsEnable
:
!
Label
.
luteAvailable
,
hljsStyle
:
Label
.
hljsStyle
},
error
:
function
(){
e
.
remove
(),
$
(
"
#soloComments
"
).
show
()}});
t
.
render
()}},
share
:
function
(){
var
e
=
$
(
"
.article__share
"
);
if
(
0
!==
e
.
length
){
var
t
=
e
.
find
(
"
.item__qr
"
),
o
=
e
.
data
(
"
url
"
),
n
=
e
.
data
(
"
avatar
"
),
r
=
encodeURIComponent
(
e
.
data
(
"
title
"
)
+
"
-
"
+
e
.
data
(
"
blogtitle
"
)),
i
=
encodeURIComponent
(
o
),
l
=
{};
l
.
tencent
=
"
http://share.v.t.qq.com/index.php?c=share&a=index&title=
"
+
r
+
"
&url=
"
+
i
+
"
&pic=
"
+
n
,
l
.
weibo
=
"
http://v.t.sina.com.cn/share/share.php?title=
"
+
r
+
"
&url=
"
+
i
+
"
&pic=
"
+
n
,
l
.
qqz
=
"
https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=
"
+
i
+
"
&sharesource=qzone&title=
"
+
r
+
"
&pics=
"
+
n
,
l
.
twitter
=
"
https://twitter.com/intent/tweet?status=
"
+
r
+
"
"
+
i
,
e
.
find
(
"
span
"
).
click
((
function
(){
var
e
=
$
(
this
).
data
(
"
type
"
);
if
(
e
){
if
(
"
wechat
"
===
e
){
if
(
"
undefined
"
==
typeof
QRious
&&
Util
.
addScript
(
Label
.
staticServePath
+
"
/js/lib/qrious.min.js
"
,
"
qriousScript
"
),
"
none
"
===
t
.
css
(
"
background-image
"
)){
var
n
=
new
QRious
({
padding
:
0
,
element
:
t
[
0
],
value
:
o
,
size
:
99
});
t
.
css
(
"
background-image
"
,
"
url(
"
.
concat
(
n
.
toDataURL
(
"
image/jpeg
"
),
"
)
"
))}
else
t
.
slideToggle
();
return
!
1
}
window
.
open
(
l
[
e
],
"
_blank
"
,
"
top=100,left=200,width=648,height=618
"
)}}))}},
load
:
function
(){
var
e
=
this
;
$
(
"
#comment
"
).
click
((
function
(){
e
.
toggleEditor
()})).
attr
(
"
readonly
"
,
"
readonly
"
),
$
(
"
#soloEditorCancel
"
).
click
((
function
(){
e
.
toggleEditor
()})),
$
(
"
#soloEditorAdd
"
).
click
((
function
(){
e
.
submitComment
()})),
e
.
vcomment
()},
toggleEditor
:
function
(
e
,
t
){
var
o
=
$
(
"
#soloEditor
"
);
if
(
0
!==
o
.
length
){
if
(
!
$
(
"
#soloEditorComment
"
).
hasClass
(
"
vditor
"
)){
var
n
=
[
"
emoji
"
,
"
headings
"
,
"
bold
"
,
"
italic
"
,
"
strike
"
,
"
link
"
,
"
|
"
,
"
list
"
,
"
ordered-list
"
,
"
check
"
,
"
outdent
"
,
"
indent
"
,
"
|
"
,
"
quote
"
,
"
line
"
,
"
code
"
,
"
inline-code
"
,
"
table
"
,
"
insert-before
"
,
"
insert-after
"
,
"
|
"
,
"
undo
"
,
"
redo
"
,
"
|
"
,
"
edit-mode
"
,
"
both
"
,
"
preview
"
,
"
format
"
,
"
|
"
,
"
fullscreen
"
,
"
devtools
"
,
"
info
"
,
"
help
"
],
r
=!
0
;
$
(
window
).
width
()
<
768
&&
(
n
=
[
"
emoji
"
,
"
link
"
,
"
upload
"
,
"
insert-after
"
,
"
edit-mode
"
,
"
preview
"
,
"
fullscreen
"
],
r
=!
1
),
window
.
vditor
=
new
Vditor
(
"
soloEditorComment
"
,{
placeholder
:
this
.
tips
.
commentContentCannotEmptyLabel
,
height
:
180
,
tab
:
"
\t
"
,
esc
:
function
(){
$
(
"
#soloEditorCancel
"
).
click
()},
ctrlEnter
:
function
(){
$
(
"
#soloEditorAdd
"
).
click
()},
preview
:{
delay
:
500
,
mode
:
"
editor
"
,
url
:
Label
.
servePath
+
"
/console/markdown/2html
"
,
hljs
:{
enable
:
!
Label
.
luteAvailable
,
style
:
Label
.
hljsStyle
},
parse
:
function
(
e
){
"
none
"
!==
e
.
style
.
display
&&
Util
.
parseMarkdown
()}},
counter
:{
enable
:
!
0
,
max
:
500
},
resize
:{
enable
:
r
,
position
:
"
top
"
},
lang
:
Label
.
langLabel
,
toolbar
:
n
,
after
:
function
(){
vditor
.
focus
()}})}
"
-300px
"
===
o
.
css
(
"
bottom
"
)
||
e
?(
$
(
"
#soloEditorError
"
).
text
(
""
),
$
(
window
).
width
()
<
768
?
o
.
css
({
top
:
"
0
"
,
bottom
:
"
auto
"
,
opacity
:
1
}):
o
.
css
({
bottom
:
"
0
"
,
top
:
"
auto
"
,
opacity
:
1
}),
this
.
currentCommentId
=
e
,
$
(
"
#soloEditorReplyTarget
"
).
text
(
t
?
"
@
"
+
t
:
""
),
"
undefined
"
!=
typeof
vditor
&&
vditor
.
vditor
.
wysiwyg
&&
vditor
.
focus
()):
o
.
css
({
bottom
:
"
-300px
"
,
top
:
"
auto
"
,
opacity
:
0
})}
else
location
.
href
=
Label
.
servePath
+
"
/start
"
},
loadRandomArticles
:
function
(
e
){
var
t
=
this
.
tips
.
randomArticles1Label
;
$
.
ajax
({
url
:
Label
.
servePath
+
"
/articles/random
"
,
type
:
"
POST
"
,
success
:
function
(
o
,
n
){
var
r
=
o
.
randomArticles
;
if
(
r
&&
0
!==
r
.
length
){
for
(
var
i
=
""
,
l
=
0
;
l
<
r
.
length
;
l
++
){
var
a
=
r
[
l
],
s
=
a
.
articleTitle
;
i
+=
"
<li><a rel='nofollow' title='
"
+
s
+
"
' href='
"
+
Label
.
servePath
+
a
.
articlePermalink
+
"
'>
"
+
s
+
"
</a></li>
"
}
var
c
=
(
e
||
"
<h4>
"
+
t
+
"
</h4>
"
)
+
"
<ul>
"
+
i
+
"
</ul>
"
;
$
(
"
#randomArticles
"
).
append
(
c
)}
else
$
(
"
#randomArticles
"
).
remove
()}})},
loadRelevantArticles
:
function
(
e
,
t
){
$
.
ajax
({
url
:
Label
.
servePath
+
"
/article/id/
"
+
e
+
"
/relevant/articles
"
,
type
:
"
GET
"
,
success
:
function
(
e
,
o
){
var
n
=
e
.
relevantArticles
;
if
(
n
&&
0
!==
n
.
length
){
for
(
var
r
=
""
,
i
=
0
;
i
<
n
.
length
;
i
++
){
var
l
=
n
[
i
],
a
=
l
.
articleTitle
;
r
+=
"
<li><a rel='nofollow' title='
"
+
a
+
"
' href='
"
+
Label
.
servePath
+
l
.
articlePermalink
+
"
'>
"
+
a
+
"
</a></li>
"
}
var
s
=
t
+
"
<ul>
"
+
r
+
"
</ul>
"
;
$
(
"
#relevantArticles
"
).
append
(
s
)}
else
$
(
"
#relevantArticles
"
).
remove
()},
error
:
function
(){
$
(
"
#relevantArticles
"
).
remove
()}})},
loadExternalRelevantArticles
:
function
(
e
,
t
){
var
o
=
this
.
tips
;
try
{
$
.
ajax
({
url
:
"
https://rhythm.b3log.org/get-articles-by-tags.do?tags=
"
+
e
+
"
&blogHost=
"
+
o
.
blogHost
+
"
&paginationPageSize=
"
+
o
.
externalRelevantArticlesDisplayCount
,
type
:
"
GET
"
,
cache
:
!
0
,
dataType
:
"
jsonp
"
,
error
:
function
(){
$
(
"
#externalRelevantArticles
"
).
remove
()},
success
:
function
(
e
,
n
){
var
r
=
e
.
articles
;
if
(
r
&&
0
!==
r
.
length
){
for
(
var
i
=
""
,
l
=
0
;
l
<
r
.
length
;
l
++
){
var
a
=
r
[
l
],
s
=
a
.
articleTitle
;
i
+=
"
<li><a rel='nofollow' title='
"
+
s
+
"
' target='_blank' href='
"
+
a
.
articlePermalink
+
"
'>
"
+
s
+
"
</a></li>
"
}
var
c
=
(
t
||
"
<h4>
"
+
o
.
externalRelevantArticles1Label
+
"
</h4>
"
)
+
"
<ul>
"
+
i
+
"
</ul>
"
;
$
(
"
#externalRelevantArticles
"
).
append
(
c
)}
else
$
(
"
#externalRelevantArticles
"
).
remove
()}})}
catch
(
e
){}},
submitComment
:
function
(){
var
e
=
this
,
t
=
this
.
tips
;
if
(
vditor
.
getValue
().
length
>
1
&&
vditor
.
getValue
().
length
<
500
){
$
(
"
#soloEditorAdd
"
).
attr
(
"
disabled
"
,
"
disabled
"
);
var
o
=
{
oId
:
t
.
oId
,
commentContent
:
vditor
.
getValue
()};
this
.
currentCommentId
&&
(
o
.
commentOriginalCommentId
=
this
.
currentCommentId
),
$
.
ajax
({
type
:
"
POST
"
,
url
:
Label
.
servePath
+
"
/article/comments
"
,
cache
:
!
1
,
contentType
:
"
application/json
"
,
data
:
JSON
.
stringify
(
o
),
success
:
function
(
t
){
$
(
"
#soloEditorAdd
"
).
removeAttr
(
"
disabled
"
),
t
.
sc
?(
e
.
toggleEditor
(),
vditor
.
setValue
(
""
),
e
.
addCommentAjax
(
t
.
cmtTpl
)):
$
(
"
#soloEditorError
"
).
html
(
t
.
msg
)}})}
else
$
(
"
#soloEditorError
"
).
text
(
e
.
tips
.
commentContentCannotEmptyLabel
)},
hideComment
:
function
(
e
){
$
(
"
#commentRef
"
+
e
).
hide
()},
showComment
:
function
(
e
,
t
,
o
,
n
){
var
r
=
parseInt
(
$
(
e
).
position
().
top
);
if
(
n
&&
(
r
=
parseInt
(
$
(
e
).
parents
(
n
).
position
().
top
)),
$
(
"
#commentRef
"
+
t
).
length
>
0
)
$
(
"
#commentRef
"
+
t
).
show
().
css
(
"
top
"
,
r
+
o
+
"
px
"
);
else
{
var
i
=
$
(
"
#
"
+
t
).
clone
();
i
.
addClass
(
"
comment-body-ref
"
).
attr
(
"
id
"
,
"
commentRef
"
+
t
),
i
.
find
(
"
#replyForm
"
).
remove
(),
$
(
"
#comments
"
).
append
(
i
),
$
(
"
#commentRef
"
+
t
).
css
(
"
top
"
,
r
+
o
+
"
px
"
)}},
addCommentAjax
:
function
(
e
){
$
(
"
#comments
"
).
children
().
length
>
0
?
$
(
$
(
"
#comments
"
).
children
()[
0
]).
before
(
e
):
$
(
"
#comments
"
).
html
(
e
),
Util
.
parseMarkdown
(),
window
.
location
.
hash
=
"
#comments
"
}})}});
!
function
(
e
){
var
t
=
{};
function
o
(
n
){
if
(
t
[
n
])
return
t
[
n
].
exports
;
var
r
=
t
[
n
]
=
{
i
:
n
,
l
:
!
1
,
exports
:{}};
return
e
[
n
].
call
(
r
.
exports
,
r
,
r
.
exports
,
o
),
r
.
l
=!
0
,
r
.
exports
}
o
.
m
=
e
,
o
.
c
=
t
,
o
.
d
=
function
(
e
,
t
,
n
){
o
.
o
(
e
,
t
)
||
Object
.
defineProperty
(
e
,
t
,{
enumerable
:
!
0
,
get
:
n
})},
o
.
r
=
function
(
e
){
"
undefined
"
!=
typeof
Symbol
&&
Symbol
.
toStringTag
&&
Object
.
defineProperty
(
e
,
Symbol
.
toStringTag
,{
value
:
"
Module
"
}),
Object
.
defineProperty
(
e
,
"
__esModule
"
,{
value
:
!
0
})},
o
.
t
=
function
(
e
,
t
){
if
(
1
&
t
&&
(
e
=
o
(
e
)),
8
&
t
)
return
e
;
if
(
4
&
t
&&
"
object
"
==
typeof
e
&&
e
&&
e
.
__esModule
)
return
e
;
var
n
=
Object
.
create
(
null
);
if
(
o
.
r
(
n
),
Object
.
defineProperty
(
n
,
"
default
"
,{
enumerable
:
!
0
,
value
:
e
}),
2
&
t
&&
"
string
"
!=
typeof
e
)
for
(
var
r
in
e
)
o
.
d
(
n
,
r
,
function
(
t
){
return
e
[
t
]}.
bind
(
null
,
r
));
return
n
},
o
.
n
=
function
(
e
){
var
t
=
e
&&
e
.
__esModule
?
function
(){
return
e
.
default
}:
function
(){
return
e
};
return
o
.
d
(
t
,
"
a
"
,
t
),
t
},
o
.
o
=
function
(
e
,
t
){
return
Object
.
prototype
.
hasOwnProperty
.
call
(
e
,
t
)},
o
.
p
=
""
,
o
(
o
.
s
=
60
)}({
60
:
function
(
e
,
t
){
window
.
Page
=
function
(
e
){
this
.
currentCommentId
=
""
,
this
.
tips
=
e
},
$
.
extend
(
Page
.
prototype
,{
vcomment
:
function
(){
var
e
=
$
(
"
#vcomment
"
);
if
(
0
!==
e
.
length
){
var
t
=
new
Vcomment
({
id
:
"
vcomment
"
,
postId
:
e
.
data
(
"
postid
"
),
url
:
"
https://hacpai.com
"
,
userName
:
e
.
data
(
"
name
"
),
currentPage
:
1
,
vditor
:{
lineNumber
:
Label
.
showCodeBlockLn
,
hljsEnable
:
!
Label
.
luteAvailable
,
hljsStyle
:
Label
.
hljsStyle
},
error
:
function
(){
e
.
remove
(),
$
(
"
#soloComments
"
).
show
()}});
t
.
render
()}},
share
:
function
(){
var
e
=
$
(
"
.article__share
"
);
if
(
0
!==
e
.
length
){
var
t
=
e
.
find
(
"
.item__qr
"
),
o
=
e
.
data
(
"
url
"
),
n
=
e
.
data
(
"
avatar
"
),
r
=
encodeURIComponent
(
e
.
data
(
"
title
"
)
+
"
-
"
+
e
.
data
(
"
blogtitle
"
)),
i
=
encodeURIComponent
(
o
),
l
=
{};
l
.
tencent
=
"
http://share.v.t.qq.com/index.php?c=share&a=index&title=
"
+
r
+
"
&url=
"
+
i
+
"
&pic=
"
+
n
,
l
.
weibo
=
"
http://v.t.sina.com.cn/share/share.php?title=
"
+
r
+
"
&url=
"
+
i
+
"
&pic=
"
+
n
,
l
.
qqz
=
"
https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=
"
+
i
+
"
&sharesource=qzone&title=
"
+
r
+
"
&pics=
"
+
n
,
l
.
twitter
=
"
https://twitter.com/intent/tweet?status=
"
+
r
+
"
"
+
i
,
e
.
find
(
"
span
"
).
click
((
function
(){
var
e
=
$
(
this
).
data
(
"
type
"
);
if
(
e
){
if
(
"
wechat
"
===
e
){
if
(
"
undefined
"
==
typeof
QRious
&&
Util
.
addScript
(
Label
.
staticServePath
+
"
/js/lib/qrious.min.js
"
,
"
qriousScript
"
),
"
none
"
===
t
.
css
(
"
background-image
"
)){
var
n
=
new
QRious
({
padding
:
0
,
element
:
t
[
0
],
value
:
o
,
size
:
99
});
t
.
css
(
"
background-image
"
,
"
url(
"
.
concat
(
n
.
toDataURL
(
"
image/jpeg
"
),
"
)
"
)).
show
()}
else
t
.
slideToggle
();
return
!
1
}
window
.
open
(
l
[
e
],
"
_blank
"
,
"
top=100,left=200,width=648,height=618
"
)}}))}},
load
:
function
(){
var
e
=
this
;
$
(
"
#comment
"
).
click
((
function
(){
e
.
toggleEditor
()})).
attr
(
"
readonly
"
,
"
readonly
"
),
$
(
"
#soloEditorCancel
"
).
click
((
function
(){
e
.
toggleEditor
()})),
$
(
"
#soloEditorAdd
"
).
click
((
function
(){
e
.
submitComment
()})),
e
.
vcomment
()},
toggleEditor
:
function
(
e
,
t
){
var
o
=
$
(
"
#soloEditor
"
);
if
(
0
!==
o
.
length
){
if
(
!
$
(
"
#soloEditorComment
"
).
hasClass
(
"
vditor
"
)){
var
n
=
[
"
emoji
"
,
"
headings
"
,
"
bold
"
,
"
italic
"
,
"
strike
"
,
"
link
"
,
"
|
"
,
"
list
"
,
"
ordered-list
"
,
"
check
"
,
"
outdent
"
,
"
indent
"
,
"
|
"
,
"
quote
"
,
"
line
"
,
"
code
"
,
"
inline-code
"
,
"
table
"
,
"
insert-before
"
,
"
insert-after
"
,
"
|
"
,
"
undo
"
,
"
redo
"
,
"
|
"
,
"
edit-mode
"
,
"
both
"
,
"
preview
"
,
"
format
"
,
"
|
"
,
"
fullscreen
"
,
"
devtools
"
,
"
info
"
,
"
help
"
],
r
=!
0
;
$
(
window
).
width
()
<
768
&&
(
n
=
[
"
emoji
"
,
"
link
"
,
"
upload
"
,
"
insert-after
"
,
"
edit-mode
"
,
"
preview
"
,
"
fullscreen
"
],
r
=!
1
),
window
.
vditor
=
new
Vditor
(
"
soloEditorComment
"
,{
placeholder
:
this
.
tips
.
commentContentCannotEmptyLabel
,
height
:
180
,
tab
:
"
\t
"
,
esc
:
function
(){
$
(
"
#soloEditorCancel
"
).
click
()},
ctrlEnter
:
function
(){
$
(
"
#soloEditorAdd
"
).
click
()},
preview
:{
delay
:
500
,
mode
:
"
editor
"
,
url
:
Label
.
servePath
+
"
/console/markdown/2html
"
,
hljs
:{
enable
:
!
Label
.
luteAvailable
,
style
:
Label
.
hljsStyle
},
parse
:
function
(
e
){
"
none
"
!==
e
.
style
.
display
&&
Util
.
parseMarkdown
()}},
counter
:{
enable
:
!
0
,
max
:
500
},
resize
:{
enable
:
r
,
position
:
"
top
"
},
lang
:
Label
.
langLabel
,
toolbar
:
n
,
after
:
function
(){
vditor
.
focus
()}})}
"
-300px
"
===
o
.
css
(
"
bottom
"
)
||
e
?(
$
(
"
#soloEditorError
"
).
text
(
""
),
$
(
window
).
width
()
<
768
?
o
.
css
({
top
:
"
0
"
,
bottom
:
"
auto
"
,
opacity
:
1
}):
o
.
css
({
bottom
:
"
0
"
,
top
:
"
auto
"
,
opacity
:
1
}),
this
.
currentCommentId
=
e
,
$
(
"
#soloEditorReplyTarget
"
).
text
(
t
?
"
@
"
+
t
:
""
),
"
undefined
"
!=
typeof
vditor
&&
vditor
.
vditor
.
wysiwyg
&&
vditor
.
focus
()):
o
.
css
({
bottom
:
"
-300px
"
,
top
:
"
auto
"
,
opacity
:
0
})}
else
location
.
href
=
Label
.
servePath
+
"
/start
"
},
loadRandomArticles
:
function
(
e
){
var
t
=
this
.
tips
.
randomArticles1Label
;
$
.
ajax
({
url
:
Label
.
servePath
+
"
/articles/random
"
,
type
:
"
POST
"
,
success
:
function
(
o
,
n
){
var
r
=
o
.
randomArticles
;
if
(
r
&&
0
!==
r
.
length
){
for
(
var
i
=
""
,
l
=
0
;
l
<
r
.
length
;
l
++
){
var
a
=
r
[
l
],
s
=
a
.
articleTitle
;
i
+=
"
<li><a rel='nofollow' title='
"
+
s
+
"
' href='
"
+
Label
.
servePath
+
a
.
articlePermalink
+
"
'>
"
+
s
+
"
</a></li>
"
}
var
c
=
(
e
||
"
<h4>
"
+
t
+
"
</h4>
"
)
+
"
<ul>
"
+
i
+
"
</ul>
"
;
$
(
"
#randomArticles
"
).
append
(
c
)}
else
$
(
"
#randomArticles
"
).
remove
()}})},
loadRelevantArticles
:
function
(
e
,
t
){
$
.
ajax
({
url
:
Label
.
servePath
+
"
/article/id/
"
+
e
+
"
/relevant/articles
"
,
type
:
"
GET
"
,
success
:
function
(
e
,
o
){
var
n
=
e
.
relevantArticles
;
if
(
n
&&
0
!==
n
.
length
){
for
(
var
r
=
""
,
i
=
0
;
i
<
n
.
length
;
i
++
){
var
l
=
n
[
i
],
a
=
l
.
articleTitle
;
r
+=
"
<li><a rel='nofollow' title='
"
+
a
+
"
' href='
"
+
Label
.
servePath
+
l
.
articlePermalink
+
"
'>
"
+
a
+
"
</a></li>
"
}
var
s
=
t
+
"
<ul>
"
+
r
+
"
</ul>
"
;
$
(
"
#relevantArticles
"
).
append
(
s
)}
else
$
(
"
#relevantArticles
"
).
remove
()},
error
:
function
(){
$
(
"
#relevantArticles
"
).
remove
()}})},
loadExternalRelevantArticles
:
function
(
e
,
t
){
var
o
=
this
.
tips
;
try
{
$
.
ajax
({
url
:
"
https://rhythm.b3log.org/get-articles-by-tags.do?tags=
"
+
e
+
"
&blogHost=
"
+
o
.
blogHost
+
"
&paginationPageSize=
"
+
o
.
externalRelevantArticlesDisplayCount
,
type
:
"
GET
"
,
cache
:
!
0
,
dataType
:
"
jsonp
"
,
error
:
function
(){
$
(
"
#externalRelevantArticles
"
).
remove
()},
success
:
function
(
e
,
n
){
var
r
=
e
.
articles
;
if
(
r
&&
0
!==
r
.
length
){
for
(
var
i
=
""
,
l
=
0
;
l
<
r
.
length
;
l
++
){
var
a
=
r
[
l
],
s
=
a
.
articleTitle
;
i
+=
"
<li><a rel='nofollow' title='
"
+
s
+
"
' target='_blank' href='
"
+
a
.
articlePermalink
+
"
'>
"
+
s
+
"
</a></li>
"
}
var
c
=
(
t
||
"
<h4>
"
+
o
.
externalRelevantArticles1Label
+
"
</h4>
"
)
+
"
<ul>
"
+
i
+
"
</ul>
"
;
$
(
"
#externalRelevantArticles
"
).
append
(
c
)}
else
$
(
"
#externalRelevantArticles
"
).
remove
()}})}
catch
(
e
){}},
submitComment
:
function
(){
var
e
=
this
,
t
=
this
.
tips
;
if
(
vditor
.
getValue
().
length
>
1
&&
vditor
.
getValue
().
length
<
500
){
$
(
"
#soloEditorAdd
"
).
attr
(
"
disabled
"
,
"
disabled
"
);
var
o
=
{
oId
:
t
.
oId
,
commentContent
:
vditor
.
getValue
()};
this
.
currentCommentId
&&
(
o
.
commentOriginalCommentId
=
this
.
currentCommentId
),
$
.
ajax
({
type
:
"
POST
"
,
url
:
Label
.
servePath
+
"
/article/comments
"
,
cache
:
!
1
,
contentType
:
"
application/json
"
,
data
:
JSON
.
stringify
(
o
),
success
:
function
(
t
){
$
(
"
#soloEditorAdd
"
).
removeAttr
(
"
disabled
"
),
t
.
sc
?(
e
.
toggleEditor
(),
vditor
.
setValue
(
""
),
e
.
addCommentAjax
(
t
.
cmtTpl
)):
$
(
"
#soloEditorError
"
).
html
(
t
.
msg
)}})}
else
$
(
"
#soloEditorError
"
).
text
(
e
.
tips
.
commentContentCannotEmptyLabel
)},
hideComment
:
function
(
e
){
$
(
"
#commentRef
"
+
e
).
hide
()},
showComment
:
function
(
e
,
t
,
o
,
n
){
var
r
=
parseInt
(
$
(
e
).
position
().
top
);
if
(
n
&&
(
r
=
parseInt
(
$
(
e
).
parents
(
n
).
position
().
top
)),
$
(
"
#commentRef
"
+
t
).
length
>
0
)
$
(
"
#commentRef
"
+
t
).
show
().
css
(
"
top
"
,
r
+
o
+
"
px
"
);
else
{
var
i
=
$
(
"
#
"
+
t
).
clone
();
i
.
addClass
(
"
comment-body-ref
"
).
attr
(
"
id
"
,
"
commentRef
"
+
t
),
i
.
find
(
"
#replyForm
"
).
remove
(),
$
(
"
#comments
"
).
append
(
i
),
$
(
"
#commentRef
"
+
t
).
css
(
"
top
"
,
r
+
o
+
"
px
"
)}},
addCommentAjax
:
function
(
e
){
$
(
"
#comments
"
).
children
().
length
>
0
?
$
(
$
(
"
#comments
"
).
children
()[
0
]).
before
(
e
):
$
(
"
#comments
"
).
html
(
e
),
Util
.
parseMarkdown
(),
window
.
location
.
hash
=
"
#comments
"
}})}});
\ No newline at end of file
\ No newline at end of file
src/main/resources/scss/admin.css
View file @
c113deb8
html
{
-webkit-text-size-adjust
:
100%
;
-ms-text-size-adjust
:
100%
;
height
:
100%
}
body
{
margin
:
0
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
font-size
:
14px
;
background-color
:
#fff
;
-webkit-font-smoothing
:
antialiased
;
-webkit-overflow-scrolling
:
touch
}
::-moz-selection
{
text-shadow
:
none
;
background
:
rgba
(
65
,
131
,
196
,
.4
)}
::selection
{
text-shadow
:
none
;
background
:
rgba
(
66
,
133
,
244
,
.4
)}
ol
,
ul
{
padding
:
0
}
dd
,
dl
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
ol
,
p
,
ul
{
margin
:
0
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
nav
,
section
{
display
:
block
}
audio
,
canvas
,
video
{
display
:
inline-block
}
audio
:not
([
controls
])
{
display
:
none
}
a
{
outline
:
0
}
sub
,
sup
{
position
:
relative
;
font-size
:
75%
;
line-height
:
0
;
vertical-align
:
baseline
}
sup
{
top
:
-.5em
}
sub
{
bottom
:
-.25em
}
img
{
max-width
:
100%
;
vertical-align
:
middle
;
border
:
0
;
height
:
auto
;
-ms-interpolation-mode
:
bicubic
;
overflow
:
hidden
;
font-size
:
12px
}
button
,
input
,
select
,
textarea
{
margin
:
0
;
font-size
:
100%
;
vertical-align
:
middle
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
outline
:
none
}
button
,
input
{
line-height
:
normal
}
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
padding
:
0
;
border
:
0
}
button
,
input
[
type
=
button
],
input
[
type
=
reset
],
input
[
type
=
submit
]
{
cursor
:
pointer
;
-webkit-appearance
:
button
}
input
[
type
=
search
]
{
box-sizing
:
content-box
;
-webkit-appearance
:
textfield
}
input
[
type
=
search
]
::-webkit-search-cancel-button
,
input
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
textarea
{
overflow
:
auto
;
resize
:
vertical
}
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
14px
;
height
:
14px
}
blockquote
{
margin
:
0
}
.fn__flex
{
display
:
-webkit-box
;
display
:
flex
}
.fn__flex-center
{
-ms-grid-row-align
:
center
;
align-self
:
center
}
.fn__flex-inline
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.fn__flex-1
{
-webkit-box-flex
:
1
;
flex
:
1
;
min-width
:
1px
}
.fn__flex-column
{
min-height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
}
.fn__pointer
{
cursor
:
pointer
}
.fn__clear
:after
,
.fn__clear
:before
{
display
:
table
;
content
:
""
}
.fn__clear
:after
{
clear
:
both
}
.fn__left
{
float
:
left
}
.fn__right
{
float
:
right
}
.fn__none
{
display
:
none
}
.fn__hidden
{
visibility
:
hidden
}
.fn__ellipsis
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-wrap
:
normal
}
.ft__13
{
font-size
:
13px
}
.ft__smaller
{
font-size
:
12px
}
.ft__center
{
text-align
:
center
}
.ft__nowrap
{
white-space
:
nowrap
}
.vditor
,
.vditor-reset
{
--border-color
:
#d1d5da
;
--second-color
:
rgba
(
88
,
96
,
105
,
0.36
);
--panel-background-color
:
#fff
;
--toolbar-background-color
:
#f6f8fa
;
--toolbar-icon-color
:
#586069
;
--toolbar-icon-hover-color
:
#4285f4
;
--textarea-background-color
:
#fafbfc
;
--textarea-text-color
:
#24292e
;
--resize-icon-color
:
var
(
--toolbar-icon-color
);
--resize-background-color
:
var
(
--toolbar-background-color
);
--resize-hover-icon-color
:
var
(
--panel-background-color
);
--resize-hover-background-color
:
var
(
--toolbar-icon-hover-color
);
--code-background-color
:
rgba
(
27
,
31
,
35
,
0.05
);
--preview-background-color
:
rgba
(
27
,
31
,
35
,
0.02
);
--heading-border-color
:
#eaecef
;
--blockquote-color
:
#6a737d
;
--ir-heading-color
:
#660e7a
;
--ir-title-color
:
grey
;
--ir-bi-color
:
navy
;
--ir-link-color
:
green
;
--ir-bracket-color
:
#00f
;
--ir-paren-color
:
green
}
.vditor--dark
,
.vditor-reset--dark
{
--border-color
:
#141414
;
--second-color
:
hsla
(
0
,
0%
,
72.5%
,
0.36
);
--panel-background-color
:
#24292e
;
--toolbar-background-color
:
#1d2125
;
--toolbar-icon-color
:
#b9b9b9
;
--toolbar-icon-hover-color
:
#fff
;
--textarea-background-color
:
#2f363d
;
--textarea-text-color
:
#d1d5da
;
--resize-icon-color
:
var
(
--border-color
);
--resize-background-color
:
var
(
--second-color
);
--resize-hover-icon-color
:
var
(
--toolbar-icon-hover-color
);
--resize-hover-background-color
:
hsla
(
0
,
0%
,
72.5%
,
0.86
);
--code-background-color
:
rgba
(
66
,
133
,
244
,
0.36
);
--preview-background-color
:
rgba
(
120
,
146
,
190
,
0.55
);
--heading-border-color
:
var
(
--textarea-text-color
);
--blockquote-color
:
var
(
--toolbar-icon-color
);
--ir-heading-color
:
#9876aa
;
--ir-title-color
:
grey
;
--ir-bi-color
:
#cc7832
;
--ir-link-color
:
#ffc66d
;
--ir-bracket-color
:
#287bde
;
--ir-paren-color
:
#6a8759
}
@-webkit-keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
.vditor-tooltipped
{
position
:
relative
;
cursor
:
pointer
}
.vditor-tooltipped
:after
{
z-index
:
1000000
;
padding
:
5px
8px
;
font-size
:
11px
;
font-weight
:
400
;
-webkit-font-smoothing
:
subpixel-antialiased
;
color
:
#fff
;
text-align
:
center
;
text-decoration
:
none
;
text-shadow
:
none
;
text-transform
:
none
;
letter-spacing
:
normal
;
word-wrap
:
break-word
;
white-space
:
pre
;
content
:
attr
(
aria-label
);
background
:
#3b3e43
;
border-radius
:
3px
;
line-height
:
16px
}
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
position
:
absolute
;
display
:
none
;
pointer-events
:
none
;
opacity
:
0
}
.vditor-tooltipped
:before
{
z-index
:
1000001
;
width
:
0
;
height
:
0
;
color
:
#3b3e43
;
content
:
""
;
border
:
5px
solid
transparent
}
.vditor-tooltipped--hover
:after
,
.vditor-tooltipped--hover
:before
,
.vditor-tooltipped
:active:after
,
.vditor-tooltipped
:active:before
,
.vditor-tooltipped
:focus:after
,
.vditor-tooltipped
:focus:before
,
.vditor-tooltipped
:hover:after
,
.vditor-tooltipped
:hover:before
{
display
:
inline-block
;
text-decoration
:
none
;
-webkit-animation-name
:
tooltip-appear
;
animation-name
:
tooltip-appear
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
.vditor-tooltipped__s
:after
,
.vditor-tooltipped__se
:after
,
.vditor-tooltipped__sw
:after
{
top
:
100%
;
right
:
50%
;
margin-top
:
5px
}
.vditor-tooltipped__s
:before
,
.vditor-tooltipped__se
:before
,
.vditor-tooltipped__sw
:before
{
top
:
auto
;
right
:
50%
;
bottom
:
-5px
;
margin-right
:
-5px
;
border-bottom-color
:
#3b3e43
}
.vditor-tooltipped__se
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__sw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__ne
:after
,
.vditor-tooltipped__nw
:after
{
right
:
50%
;
bottom
:
100%
;
margin-bottom
:
5px
}
.vditor-tooltipped__n
:before
,
.vditor-tooltipped__ne
:before
,
.vditor-tooltipped__nw
:before
{
top
:
-5px
;
right
:
50%
;
bottom
:
auto
;
margin-right
:
-5px
;
border-top-color
:
#3b3e43
}
.vditor-tooltipped__ne
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__nw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__s
:after
{
-webkit-transform
:
translateX
(
50%
);
transform
:
translateX
(
50%
)}
.vditor-tooltipped__w
:after
{
right
:
100%
;
bottom
:
50%
;
margin-right
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__w
:before
{
top
:
50%
;
bottom
:
50%
;
left
:
-5px
;
margin-top
:
-5px
;
border-left-color
:
#3b3e43
}
.vditor-tooltipped__e
:after
{
bottom
:
50%
;
left
:
100%
;
margin-left
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__e
:before
{
top
:
50%
;
right
:
-5px
;
bottom
:
50%
;
margin-top
:
-5px
;
border-right-color
:
#3b3e43
}
@media
screen
and
(
max-width
:
520px
){
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
content
:
none
}}
@-webkit-keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
.vditor-panel
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
;
z-index
:
3
;
font-size
:
14px
;
display
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
max-width
:
320px
;
min-width
:
80px
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-name
:
scale-in
;
animation-name
:
scale-in
;
-webkit-animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
color
:
var
(
--toolbar-icon-color
)}
.vditor-panel--none
{
padding
:
0
;
-webkit-animation
:
none
;
animation
:
none
;
min-width
:
auto
;
max-width
:
none
;
white-space
:
nowrap
}
.vditor-input
{
border
:
0
;
padding
:
3px
5px
;
background-color
:
var
(
--panel-background-color
);
font-size
:
12px
;
color
:
var
(
--textarea-text-color
)}
.vditor-input
:focus
{
background-color
:
var
(
--toolbar-background-color
);
outline
:
none
}
.vditor-icon
{
color
:
var
(
--toolbar-icon-color
);
cursor
:
pointer
;
float
:
left
;
padding
:
4px
5px
;
height
:
21px
;
width
:
23px
;
background-color
:
transparent
;
border
:
0
;
box-sizing
:
border-box
}
.vditor-icon--current
,
.vditor-icon
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
transparent
}
.vditor-icon
:focus
{
outline
:
none
}
.vditor-icon
svg
{
height
:
13px
!important
;
width
:
13px
!important
;
float
:
left
;
fill
:
currentColor
;
pointer-events
:
none
}
.vditor-toolbar
{
background-color
:
var
(
--toolbar-background-color
);
border-bottom
:
1px
solid
var
(
--border-color
);
padding
:
0
5px
;
line-height
:
1
}
.vditor-toolbar--pin
{
position
:
-webkit-sticky
;
position
:
sticky
;
top
:
0
;
z-index
:
1
}
.vditor-toolbar--hide
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
height
:
5px
;
overflow
:
hidden
}
.vditor-toolbar--hide
:hover
{
background-color
:
var
(
--toolbar-background-color
);
height
:
auto
;
overflow
:
visible
}
.vditor-toolbar__item
{
float
:
left
;
position
:
relative
}
.vditor-toolbar__item
.vditor-tooltipped
{
color
:
var
(
--toolbar-icon-color
);
border
:
0
;
padding
:
10px
5px
;
background-color
:
transparent
;
height
:
35px
;
width
:
25px
;
box-sizing
:
border-box
}
.vditor-toolbar__item
.vditor-tooltipped
:focus
{
outline
:
none
}
.vditor-toolbar__item
.vditor-tooltipped
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-toolbar__item
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
15px
;
height
:
15px
}
.vditor-toolbar__item
input
{
position
:
absolute
;
width
:
25px
;
height
:
35px
;
top
:
0
;
left
:
0
;
cursor
:
pointer
;
opacity
:
.001
;
overflow
:
hidden
}
.vditor-toolbar__divider
{
float
:
left
;
width
:
16px
;
height
:
35px
}
.vditor-toolbar__br
{
width
:
100%
;
padding
:
0
!important
;
height
:
0
!important
}
.vditor-menu--current
svg
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-menu--disabled
svg
{
color
:
var
(
--second-color
);
cursor
:
not-allowed
}
.vditor-emojis
{
display
:
inline-block
;
overflow
:
auto
}
.vditor-emojis
::-webkit-scrollbar
{
display
:
none
}
.vditor-emojis__tip
{
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
200px
;
margin-right
:
10px
;
color
:
var
(
--toolbar-icon-color
);
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
}
.vditor-emojis__tail
{
margin-top
:
5px
;
font-size
:
12px
;
color
:
var
(
--toolbar-icon-color
);
display
:
-webkit-box
;
display
:
flex
}
.vditor-emojis__tail
a
{
text-decoration
:
none
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-emojis__tail
a
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-emojis
button
{
cursor
:
pointer
;
border-radius
:
3px
;
float
:
left
;
height
:
30px
;
width
:
30px
;
text-align
:
center
;
line-height
:
26px
;
padding
:
3px
;
box-sizing
:
border-box
;
font-size
:
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
border
:
0
;
margin
:
0
;
background-color
:
transparent
;
overflow
:
hidden
}
.vditor-emojis
button
:focus
{
outline
:
none
}
.vditor-emojis
button
:hover
.vditor-emojis__icon
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.vditor-emojis
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin
:
3px
0
0
3px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-toolbar__item
.vditor-tooltipped
{
padding
:
10px
8px
;
width
:
31px
;
margin
:
0
4px
}}
@-webkit-keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.vditor
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-sizing
:
border-box
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
}
.vditor--fullscreen
{
position
:
fixed
;
top
:
0
;
width
:
100%
!important
;
left
:
0
;
height
:
100vh
!important
;
z-index
:
90
;
border-radius
:
0
}
.vditor-content
{
display
:
-webkit-box
;
display
:
flex
;
min-height
:
60px
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
{
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
margin
:
0
1px
0
0
;
height
:
100%
;
overflow
:
auto
;
width
:
100%
;
-webkit-box-flex
:
1
;
flex
:
1
;
border
:
0
;
resize
:
none
;
padding
:
10px
9px
10px
10px
;
box-sizing
:
border-box
;
background-color
:
var
(
--panel-background-color
);
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
var
(
--textarea-text-color
);
border-radius
:
0
0
3px
3px
;
font-variant-ligatures
:
no-common-ligatures
;
white-space
:
pre-wrap
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.vditor-textarea
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-textarea
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-textarea
:focus
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-preview
{
-webkit-box-flex
:
1
;
flex
:
1
;
overflow
:
auto
;
margin-left
:
-1px
;
border-left
:
1px
solid
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
background-color
:
var
(
--textarea-background-color
);
padding
:
10px
}
.vditor-preview
>
div
::-webkit-scrollbar
{
display
:
none
}
.vditor-preview
>
.vditor-reset
{
margin
:
0
auto
}
.vditor-devtools
{
display
:
none
;
background-color
:
var
(
--textarea-background-color
);
overflow
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
;
box-shadow
:
inset
1px
0
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
padding
:
10px
}
.vditor-counter
{
padding
:
3px
;
color
:
var
(
--toolbar-icon-color
);
background-color
:
var
(
--code-background-color
);
border-radius
:
3px
;
font-size
:
12px
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
float
:
right
;
margin
:
8px
3px
0
0
}
.vditor-counter--error
{
color
:
#d23f31
;
background-color
:
rgba
(
210
,
63
,
49
,
.1
)}
.vditor-resize
{
padding
:
3px
0
;
cursor
:
row-resize
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
position
:
absolute
;
width
:
100%
}
.vditor-resize--top
{
top
:
-3px
}
.vditor-resize--bottom
{
bottom
:
-3px
}
.vditor-resize
>
div
{
height
:
3px
;
background-color
:
var
(
--resize-background-color
);
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-resize--selected
>
div
,
.vditor-resize
:hover
>
div
{
background-color
:
var
(
--resize-hover-background-color
)}
.vditor-resize--selected
svg
,
.vditor-resize
:hover
svg
{
color
:
var
(
--resize-hover-icon-color
)}
.vditor-resize
svg
{
fill
:
currentColor
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
13px
;
height
:
3px
;
display
:
block
;
margin
:
0
auto
;
color
:
var
(
--resize-icon-color
)}
.vditor-upload
{
position
:
absolute
;
height
:
3px
;
left
:
0
;
top
:
-2px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
background-color
:
#4285f4
}
.vditor-tip
{
position
:
absolute
;
font-size
:
12px
;
top
:
10px
;
color
:
var
(
--toolbar-icon-color
);
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
left
:
50%
}
.vditor-tip--show
{
display
:
block
;
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
}
.vditor-tip__content
{
text-align
:
left
;
display
:
inline-block
;
line-height
:
16px
;
padding
:
3px
10px
;
border-radius
:
3px
;
background
:
var
(
--toolbar-icon-color
);
position
:
relative
;
margin-left
:
-50%
;
color
:
var
(
--toolbar-background-color
)}
.vditor-tip__content
ul
{
margin
:
2px
0
;
padding
:
0
0
0
18px
}
.vditor-tip__close
{
position
:
absolute
;
color
:
var
(
--toolbar-icon-color
);
top
:
-7px
;
right
:
-15px
;
font-weight
:
700
;
cursor
:
pointer
}
.vditor-tip__close
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-arrow
:before
{
position
:
absolute
;
width
:
0
;
height
:
0
;
pointer-events
:
none
;
content
:
" "
;
top
:
-14px
;
left
:
5px
;
border
:
7px
solid
transparent
;
border-bottom
:
7px
solid
var
(
--panel-background-color
)}
.vditor-outline
{
min-width
:
250px
;
width
:
250px
;
border-right
:
1px
solid
var
(
--border-color
);
background-color
:
var
(
--panel-background-color
);
display
:
none
}
.vditor-outline__item
{
padding
:
5px
10px
;
cursor
:
pointer
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.vditor-outline__item
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
var
(
--toolbar-background-color
)}
.vditor-outline__panel
{
position
:
-webkit-sticky
;
position
:
sticky
;
overflow
:
auto
;
top
:
35px
;
padding-bottom
:
10px
;
color
:
var
(
--textarea-text-color
);
box-sizing
:
border-box
}
.vditor-outline__panel
::-webkit-scrollbar
{
display
:
none
}
.vditor-outline__title
{
border-bottom
:
1px
dashed
var
(
--border-color
);
padding
:
5px
10px
;
color
:
var
(
--toolbar-icon-color
);
font-size
:
12px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-arrow
:before
{
left
:
12px
}}
.vditor-hint
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
0
;
z-index
:
4
;
line-height
:
20px
;
list-style
:
none
;
font-size
:
12px
;
margin
:
0
;
max-width
:
250px
;
min-width
:
80px
;
display
:
none
}
.vditor-hint
button
{
color
:
var
(
--toolbar-icon-color
);
display
:
block
;
padding
:
3px
10px
;
border
:
0
;
border-radius
:
0
;
border-bottom
:
1px
solid
var
(
--border-color
);
line-height
:
20px
;
width
:
100%
;
box-sizing
:
border-box
;
text-align
:
left
;
margin
:
0
;
background-color
:
transparent
;
cursor
:
pointer
;
white-space
:
nowrap
}
.vditor-hint
button
:last-child
{
border-bottom
:
0
}
.vditor-hint
button
:focus
{
outline
:
none
}
.vditor-hint--current
,
.vditor-hint
button
:hover
{
background-color
:
var
(
--toolbar-background-color
)
!important
;
color
:
var
(
--toolbar-icon-hover-color
)
!important
}
.vditor-hint__emoji
{
font-size
:
16px
;
float
:
left
;
margin-right
:
3px
}
.vditor-hint
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin-right
:
3px
}
.vditor-reset
{
color
:
var
(
--textarea-text-color
);
font-variant-ligatures
:
no-common-ligatures
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-wrap
:
break-word
;
overflow
:
auto
;
line-height
:
1.5
;
font-size
:
16px
;
word-break
:
break-word
}
.vditor-reset--anchor
{
padding-left
:
20px
}
.vditor-reset--error
{
color
:
#d23f31
;
font-size
:
12px
;
display
:
block
;
line-height
:
16px
}
.vditor-reset--dark
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-reset--dark
a
{
color
:
#4285f4
}
.vditor-reset
ul
ul
ul
{
list-style-type
:
square
}
.vditor-reset
ul
ul
{
list-style-type
:
circle
}
.vditor-reset
ul
{
list-style-type
:
disc
}
.vditor-reset
ol
,
.vditor-reset
ul
{
padding-left
:
2em
;
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
li
+
li
{
margin-top
:
.25em
}
.vditor-reset
audio
{
max-width
:
100%
}
.vditor-reset
audio
:focus
{
outline
:
none
}
.vditor-reset
video
{
max-height
:
90vh
;
max-width
:
100%
}
.vditor-reset
img
{
max-width
:
100%
}
.vditor-reset
img
.emoji
{
cursor
:
auto
;
max-width
:
20px
;
vertical-align
:
sub
}
.vditor-reset
h1
,
.vditor-reset
h2
,
.vditor-reset
h3
,
.vditor-reset
h4
,
.vditor-reset
h5
,
.vditor-reset
h6
{
margin-top
:
24px
;
margin-bottom
:
16px
;
font-weight
:
600
;
line-height
:
1.25
}
.vditor-reset
h1
:hover
.vditor-anchor
svg
,
.vditor-reset
h2
:hover
.vditor-anchor
svg
,
.vditor-reset
h3
:hover
.vditor-anchor
svg
,
.vditor-reset
h4
:hover
.vditor-anchor
svg
,
.vditor-reset
h5
:hover
.vditor-anchor
svg
,
.vditor-reset
h6
:hover
.vditor-anchor
svg
{
visibility
:
visible
}
.vditor-reset
h1
{
font-size
:
1.7em
}
.vditor-reset
h1
,
.vditor-reset
h2
{
padding-bottom
:
.3em
;
border-bottom
:
1px
solid
var
(
--heading-border-color
)}
.vditor-reset
h2
{
font-size
:
1.5em
}
.vditor-reset
h3
{
font-size
:
1.25em
}
.vditor-reset
h4
{
font-size
:
1em
}
.vditor-reset
h5
{
font-size
:
.875em
}
.vditor-reset
h6
{
font-size
:
.85em
}
.vditor-reset
hr
{
height
:
2px
;
padding
:
0
;
margin
:
24px
0
;
background-color
:
var
(
--heading-border-color
);
border
:
0
}
.vditor-reset
p
{
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
blockquote
{
padding
:
0
1em
;
color
:
var
(
--blockquote-color
);
border-left
:
.25em
solid
var
(
--heading-border-color
);
margin
:
0
0
16px
}
.vditor-reset
blockquote
>
:first-child
{
margin-top
:
0
}
.vditor-reset
blockquote
>
:last-child
{
margin-bottom
:
0
}
.vditor-reset
ins
>
iframe
{
border
:
0
}
.vditor-reset
iframe
{
border
:
1px
solid
var
(
--border-color
);
max-width
:
100%
;
box-sizing
:
border-box
}
.vditor-reset
iframe
.iframe__video
{
min-width
:
80%
;
min-height
:
36vh
}
.vditor-reset
table
{
border-collapse
:
collapse
;
empty-cells
:
show
;
margin-bottom
:
16px
;
overflow
:
auto
;
border-spacing
:
0
}
.vditor-reset
table
tr
{
background-color
:
var
(
--textarea-background-color
);
border-top
:
1px
solid
#c6cbd1
}
.vditor-reset
table
td
,
.vditor-reset
table
th
{
padding
:
6px
13px
;
border
:
1px
solid
#dfe2e5
;
word-break
:
normal
}
.vditor-reset
table
th
{
font-weight
:
600
}
.vditor-reset
table
tbody
tr
:nth-child
(
2n
)
{
background-color
:
var
(
--panel-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
padding
:
.2em
.4em
;
margin
:
0
;
font-size
:
85%
;
border-radius
:
3px
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-break
:
break-word
;
background-size
:
20px
20px
;
white-space
:
pre-wrap
;
background-color
:
var
(
--code-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-echarts
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-graphviz
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-math
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-mermaid
{
background-color
:
var
(
--preview-background-color
)}
.vditor-reset
pre
>
code
{
margin
:
0
;
font-size
:
85%
;
padding
:
.5em
;
border-radius
:
5px
;
display
:
block
;
overflow
:
auto
;
white-space
:
pre
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
background-size
:
20px
20px
;
background-image
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)
;
word-break
:
normal
;
word-wrap
:
normal
}
.vditor-reset
pre
:hover
div
.vditor-copy
{
display
:
block
}
.vditor-reset
kbd
{
display
:
inline-block
;
padding
:
3px
5px
;
font
:
11px
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
;
line-height
:
10px
;
color
:
var
(
--textarea-text-color
);
vertical-align
:
middle
;
background-color
:
var
(
--textarea-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-shadow
:
inset
0
-1px
0
var
(
--border-color
)}
.vditor-reset
summary
{
cursor
:
pointer
}
.vditor-reset
summary
:focus
{
outline
:
none
}
.vditor-reset
svg
{
height
:
auto
;
width
:
auto
;
stroke-width
:
initial
}
.vditor-reset
blockquote
:last-child
,
.vditor-reset
hr
:last-child
,
.vditor-reset
ol
:last-child
,
.vditor-reset
p
:last-child
,
.vditor-reset
pre
:last-child
,
.vditor-reset
ul
:last-child
{
margin-bottom
:
0
}
.vditor-reset
.language-echarts
{
overflow
:
hidden
;
height
:
420px
}
.vditor-reset
.language-graphviz
polygon
{
fill
:
transparent
}
.vditor-task
{
list-style
:
none
}
.vditor-task
input
{
margin
:
0
.2em
.25em
-1.6em
;
font-size
:
12px
;
vertical-align
:
middle
}
.vditor-copy
{
position
:
relative
;
display
:
none
;
z-index
:
1
}
.vditor-copy
textarea
{
position
:
absolute
;
left
:
-100000px
;
height
:
10px
}
.vditor-copy
span
{
cursor
:
pointer
;
position
:
absolute
;
right
:
.5em
;
top
:
.5em
}
.vditor-copy
svg
{
color
:
var
(
--toolbar-icon-color
);
height
:
14px
;
width
:
14px
!important
;
display
:
block
;
fill
:
currentColor
}
.vditor-linenumber
{
padding-left
:
4em
!important
;
position
:
relative
}
.vditor-linenumber__rows
{
position
:
absolute
;
pointer-events
:
none
;
top
:
.2em
;
left
:
0
;
width
:
3em
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
counter-reset
:
linenumber
}
.vditor-linenumber__rows
>
span
{
pointer-events
:
none
;
display
:
block
}
.vditor-linenumber__rows
>
span
:before
{
counter-increment
:
linenumber
;
content
:
counter
(
linenumber
);
color
:
hsla
(
0
,
4%
,
60.4%
,
.38
);
display
:
block
;
padding-right
:
1em
;
text-align
:
right
}
.vditor-speech
{
position
:
absolute
;
display
:
none
;
background-color
:
var
(
--toolbar-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
padding
:
3px
;
cursor
:
pointer
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-speech--current
,
.vditor-speech
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-speech
svg
{
height
:
14px
;
width
:
14px
;
fill
:
currentColor
;
display
:
block
;
stroke-width
:
0
;
stroke
:
currentColor
}
.vditor-anchor
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-20px
}
.vditor-anchor
svg
{
visibility
:
hidden
}
.vditor-anchor
:hover
svg
{
visibility
:
visible
}
.vditor-anchor
:focus
{
outline
:
none
}
.vditor-linkcard
{
margin
:
31px
auto
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
cursor
:
pointer
;
max-width
:
768px
;
padding
:
0
10px
}
.vditor-linkcard
a
{
border-radius
:
3px
;
background-color
:
var
(
--toolbar-background-color
);
overflow
:
hidden
;
max-height
:
250px
;
display
:
-webkit-box
;
display
:
flex
;
text-decoration
:
none
;
flex-wrap
:
wrap-reverse
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.vditor-linkcard
a
:hover
{
box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.13
),
0
3px
6px
rgba
(
0
,
0
,
0
,
.26
);
text-decoration
:
none
}
.vditor-linkcard
a
:visited
.vditor-linkcard__abstract
{
color
:
var
(
--second-color
)}
.vditor-linkcard__info
{
padding
:
10px
;
min-width
:
200px
;
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
}
.vditor-linkcard__title
{
font-size
:
14px
;
font-weight
:
400
;
color
:
var
(
--textarea-text-color
);
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.vditor-linkcard__title
img
{
cursor
:
pointer
;
height
:
20px
;
width
:
20px
;
border-radius
:
3px
;
flex-shrink
:
0
;
margin-right
:
5px
}
.vditor-linkcard__abstract
{
word-wrap
:
break-word
;
word-break
:
break-all
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
-webkit-box-orient
:
vertical
;
display
:
-webkit-box
;
font-size
:
13px
;
color
:
var
(
--toolbar-icon-color
);
margin
:
5px
0
}
.vditor-linkcard__site
{
font-size
:
12px
;
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-linkcard__image
{
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
max-width
:
250px
;
min-width
:
126px
;
cursor
:
pointer
;
background-color
:
var
(
--second-color
)}
.vditor-math
mjx-container
:focus
{
outline
:
none
;
cursor
:
context-menu
}
.vditor-footnotes__goto-ref
{
text-decoration
:
none
}
.vditor-toc
{
margin-bottom
:
16px
}
.vditor-wysiwyg
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-wysiwyg
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-wysiwyg
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-wysiwyg
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-wysiwyg
blockquote
:empty:before
,
.vditor-wysiwyg
h1
:empty:after
,
.vditor-wysiwyg
h2
:empty:after
,
.vditor-wysiwyg
h3
:empty:after
,
.vditor-wysiwyg
h4
:empty:after
,
.vditor-wysiwyg
h5
:empty:after
,
.vditor-wysiwyg
h6
:empty:after
,
.vditor-wysiwyg
p
:empty:before
,
.vditor-wysiwyg
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-wysiwyg
code
[
data-marker
=
"`"
]
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.vditor-wysiwyg__block
pre
:first-child
{
margin-bottom
:
-1em
}
.vditor-wysiwyg__block
pre
:first-child
code
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-wysiwyg__block
pre
:last-child
{
margin-bottom
:
1em
}
.vditor-wysiwyg__preview
{
cursor
:
pointer
;
white-space
:
normal
;
min-height
:
27px
}
.vditor-wysiwyg__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-wysiwyg
.vditor-toc
:before
,
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
,
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-wysiwyg
h1
:before
,
.vditor-wysiwyg
h2
:before
,
.vditor-wysiwyg
h3
:before
,
.vditor-wysiwyg
h4
:before
,
.vditor-wysiwyg
h5
:before
,
.vditor-wysiwyg
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
h2
:before
{
content
:
"H2"
}
.vditor-wysiwyg
h3
:before
{
content
:
"H3"
}
.vditor-wysiwyg
h4
:before
{
content
:
"H4"
}
.vditor-wysiwyg
h5
:before
{
content
:
"H5"
}
.vditor-wysiwyg
h6
:before
{
content
:
"H6"
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
{
content
:
"</>"
}
.vditor-wysiwyg
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-wysiwyg
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-wysiwyg
details
{
white-space
:
normal
}
.vditor-wysiwyg
span
[
data-type
=
backslash
]>
span
{
display
:
none
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
span
[
data-type
=
link-ref
],
.vditor-wysiwyg
sup
[
data-type
=
footnotes-ref
]
{
color
:
#4285f4
}
.vditor-wysiwyg
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-ir__block
[
data-type
=
html-block
]
pre
{
margin
:
1em
0
!important
}
.vditor-ir__node
[
data-type
=
code-block
]
:after
,
.vditor-ir__node
[
data-type
=
code-block
]
:before
,
.vditor-ir__node
[
data-type
=
math-block
]
:after
,
.vditor-ir__node
[
data-type
=
math-block
]
:before
{
content
:
" "
;
color
:
var
(
--second-color
)}
.vditor-ir__node
:not
(
.vditor-ir__node--expand
)
.vditor-ir__marker
{
padding
:
0
!important
}
.vditor-ir__node
[
data-type
=
footnotes-ref
],
.vditor-ir__node
[
data-type
=
link-ref
]
{
color
:
#4285f4
}
.vditor-ir__node
.vditor-ir__marker
{
width
:
0
;
overflow
:
hidden
;
display
:
inline-block
;
height
:
0
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-ir__node
.vditor-ir__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-ir__node--expand
.vditor-ir__marker
{
color
:
var
(
--second-color
);
display
:
inline
;
height
:
auto
;
width
:
auto
}
.vditor-ir__node--expand
.vditor-ir__marker--hide
{
display
:
none
}
.vditor-ir__node--expand
.vditor-ir__marker--heading
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bi
{
color
:
var
(
--ir-bi-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--link
{
color
:
var
(
--ir-link-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--title
{
color
:
var
(
--ir-title-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bracket
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir__node--expand
.vditor-ir__marker--paren
{
color
:
var
(
--ir-paren-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--info
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
{
color
:
var
(
--textarea-text-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-echarts
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-graphviz
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-math
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-mermaid
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-ir__node--expand
[
data-type
=
code-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
code-block
]
:before
{
content
:
"```"
}
.vditor-ir__node--expand
[
data-type
=
math-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
math-block
]
:before
{
content
:
"$$"
}
.vditor-ir__node
span
[
data-type
=
code-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
code-block-open-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-open-marker
]
{
display
:
none
}
.vditor-ir__link
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-ir
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-ir
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-ir
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-ir
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-ir
pre
.vditor-reset
pre
{
margin
:
0
}
.vditor-ir
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-ir
blockquote
:empty:before
,
.vditor-ir
h1
:empty:after
,
.vditor-ir
h2
:empty:after
,
.vditor-ir
h3
:empty:after
,
.vditor-ir
h4
:empty:after
,
.vditor-ir
h5
:empty:after
,
.vditor-ir
h6
:empty:after
,
.vditor-ir
p
:empty:before
,
.vditor-ir
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-ir
.vditor-toc
:before
,
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-ir
h1
:before
,
.vditor-ir
h2
:before
,
.vditor-ir
h3
:before
,
.vditor-ir
h4
:before
,
.vditor-ir
h5
:before
,
.vditor-ir
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-ir
h2
:before
{
content
:
"H2"
}
.vditor-ir
h3
:before
{
content
:
"H3"
}
.vditor-ir
h4
:before
{
content
:
"H4"
}
.vditor-ir
h5
:before
{
content
:
"H5"
}
.vditor-ir
h6
:before
{
content
:
"H6"
}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-ir
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-ir
.vditor-toc
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
body
{
color
:
#767676
;
background
:
#f1f2f7
;
font-size
:
13px
}
a
{
color
:
#4183c4
;
text-decoration
:
none
}
a
:visited
{
color
:
#7ba9d6
}
a
:active
{
color
:
#2c5d8d
}
a
:hover
{
text-decoration
:
underline
}
.completed-ck
span
,
button
{
padding
:
6px
12px
;
margin-bottom
:
0
;
font-size
:
14px
;
font-weight
:
400
;
text-align
:
center
;
white-space
:
nowrap
;
vertical-align
:
baseline
;
cursor
:
pointer
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
background-image
:
none
;
border
:
1px
solid
#1fb5ad
;
border-radius
:
4px
;
background-color
:
#1fb5ad
;
color
:
#fff
;
height
:
auto
;
outline
:
none
;
line-height
:
18px
}
.completed-ck
span
.small
,
button
.small
{
padding
:
3px
6px
;
font-size
:
12px
}
button
:hover
{
background-color
:
#1ca59e
;
border-color
:
#1ca59e
}
.fn__margin12
{
margin
:
12px
}
@font-face
{
font-family
:
icomoon
;
src
:
url(fonts/icomoon.eot?2e0ylc)
;
src
:
url(fonts/icomoon.eot?2e0ylc#iefix)
format
(
"embedded-opentype"
),
url(fonts/icomoon.ttf?2e0ylc)
format
(
"truetype"
),
url(fonts/icomoon.woff?2e0ylc)
format
(
"woff"
),
url(fonts/icomoon.svg?2e0ylc#icomoon)
format
(
"svg"
);
font-weight
:
400
;
font-style
:
normal
;
font-display
:
block
}
[
class
*=
" icon-"
],[
class
^=
icon-
]
{
font-family
:
icomoon
!important
;
speak
:
none
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
text-transform
:
none
;
line-height
:
1
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.icon-github
:before
{
content
:
"\e900"
}
.icon-hacpai
:before
{
content
:
"\e901"
}
.icon-close
:before
{
content
:
"\e909"
}
.icon-move-down
:before
{
content
:
"\e90a"
}
.icon-move-up
:before
{
content
:
"\e90b"
}
.icon-unordered-list
:before
{
content
:
"\e004"
}
.icon-info
:before
{
content
:
"\e00d"
}
.icon-article
:before
{
content
:
"\e61d"
}
.icon-setting
:before
{
content
:
"\e604"
}
.icon-cmts
:before
{
content
:
"\e60a"
}
.icon-refresh
:before
{
content
:
"\e60b"
}
.icon-chevron-down
:before
{
content
:
"\e618"
}
.icon-chevron-up
:before
{
content
:
"\e619"
}
a
[
class
*=
" icon-"
],
a
[
class
^=
icon-
]
{
color
:
#333
}
a
[
class
*=
" icon-"
]
:hover
,
a
[
class
^=
icon-
]
:hover
{
text-decoration
:
none
;
color
:
#4183c4
}
.aboutIcon
{
background-position
:
-16px
-48px
}
.icon-move-down
,
.icon-move-up
{
cursor
:
pointer
}
#allPanel
{
height
:
auto
;
min-height
:
100%
;
position
:
relative
}
#tabsPanel
{
margin
:
50px
0
0
240px
;
padding
:
15px
;
min-height
:
100px
}
#tabsPanel
>
div
{
padding-bottom
:
36px
}
#tabsPanel_article-list
,
#tabsPanel_category-list
>
div
:first-child
,
#tabsPanel_comment-list
,
#tabsPanel_draft-list
,
#tabsPanel_link-list
>
div
:first-child
,
#tabsPanel_page-list
>
div
:first-child
,
#tabsPanel_plugin-list
,
#tabsPanel_user-list
>
div
:first-child
{
background-color
:
#fff
;
border-radius
:
4px
;
margin-bottom
:
40px
;
overflow
:
hidden
}
.tip
{
font-weight
:
700
;
margin
:
0
auto
;
overflow
:
hidden
;
padding
:
2px
0
;
position
:
fixed
;
text-align
:
center
;
top
:
3px
;
left
:
255px
;
z-index
:
1001
}
#loadMsg
,
#tipMsg
{
color
:
#31708f
;
background-color
:
#d9edf7
;
border-radius
:
4px
;
line-height
:
40px
;
display
:
inline-block
}
.footer
{
bottom
:
12px
;
position
:
absolute
;
text-align
:
center
;
width
:
100%
;
padding-left
:
240px
;
box-sizing
:
border-box
}
#top
{
height
:
50px
;
position
:
fixed
;
box-shadow
:
1px
0
3px
rgba
(
0
,
0
,
0
,
.15
);
width
:
100%
;
top
:
0
;
background-color
:
#fff
;
z-index
:
80
}
#top
>
a
{
background
:
#1fb5ad
;
float
:
left
;
width
:
240px
;
height
:
50px
;
position
:
relative
;
color
:
#f7f7f7
;
text-align
:
center
;
text-decoration
:
none
;
font-size
:
20px
;
line-height
:
50px
}
#top
>
.fn__right
a
{
color
:
#555
;
line-height
:
32px
;
margin
:
8px
10px
;
border
:
1px
solid
#f6f6f6
;
background-color
:
#f6f6f6
;
border-radius
:
100px
;
padding
:
0
10px
;
text-decoration
:
none
;
display
:
inline-block
}
#top
>
.fn__right
a
:hover
{
color
:
#333
}
#top
.avatar
{
height
:
25px
;
width
:
25px
;
border-radius
:
20px
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
float
:
left
;
margin
:
3px
6px
0
0
}
#tabs
{
height
:
100%
;
width
:
240px
;
margin-top
:
50px
;
position
:
fixed
;
top
:
0
;
background-color
:
#32323a
;
overflow
:
auto
}
#tabs
::-webkit-scrollbar
{
display
:
none
}
#tabs
ul
{
list-style
:
none
}
#tabs
li
{
margin-left
:
0
;
border-bottom
:
1px
solid
hsla
(
0
,
0%
,
100%
,
.05
)}
#tabs
#tabArticleTitle
,
#tabs
#tabToolsTitle
,
#tabs
li
>
div
>
a
{
color
:
#aeb2b7
;
display
:
block
;
text-decoration
:
none
;
letter-spacing
:
1px
;
padding
:
18px
0
18px
25px
;
line-height
:
18px
;
height
:
18px
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
cursor
:
pointer
}
#tabs
#tabArticleTitle
.tab-current
,
#tabs
#tabArticleTitle
:hover
,
#tabs
#tabToolsTitle
.tab-current
,
#tabs
#tabToolsTitle
:hover
,
#tabs
a
.tab-current
,
#tabs
a
:hover
{
background-color
:
#28282e
;
color
:
#1fb5ad
}
#tabs
li
li
{
border-bottom
:
0
}
#tabs
li
li
>
div
>
a
{
padding
:
13px
0
13px
46px
;
line-height
:
15px
;
height
:
15px
;
background-color
:
#28282e
}
#tabs
li
li
>
div
>
a
.tab-current
,
#tabs
li
li
>
div
>
a
:hover
{
background-color
:
#202025
}
#tabs
.aboutIcon
,
#tabs
.commentIcon
,
#tabs
.postIcon
,
#tabs
.preferenceIcon
,
#tabs
.usersIcon
{
display
:
none
}
#tabs
.icon-chevron-down
,
#tabs
.icon-chevron-up
{
margin-right
:
10px
}
.sub-tabs
{
background-color
:
#e0e1e7
;
border-radius
:
4px
4px
0
0
;
overflow
:
hidden
}
.sub-tabs
ul
{
float
:
left
;
list-style
:
none
outside
none
;
margin-right
:
24px
}
.sub-tabs
li
{
float
:
left
;
margin
:
0
}
.sub-tabs
li
a
{
border-right
:
1px
solid
#e0e1e7
;
color
:
#898989
;
display
:
block
;
line-height
:
18px
;
padding
:
20px
15px
;
text-decoration
:
none
}
.sub-tabs
.tab-current
,
.sub-tabs
.tab-current
:hover
,
.sub-tabs
a
:hover
{
background-color
:
#fff
;
color
:
#1fb5ad
}
.sub-tabs-main
{
background-color
:
#fff
;
padding
:
15px
;
border-radius
:
0
0
4px
4px
}
.form
>
div
{
margin
:
15px
0
}
.form
label
{
margin-bottom
:
10px
;
display
:
inline-block
}
.form
label
.checkbox
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
margin
:
11px
0
}
.form
label
.checkbox
input
{
height
:
auto
}
.form
input
[
type
=
password
],
.form
input
[
type
=
text
],
.form
select
,
.form
textarea
{
font-size
:
14px
;
outline
:
medium
none
;
width
:
100%
;
padding
:
6px
12px
;
height
:
34px
;
box-sizing
:
border-box
;
border
:
1px
solid
#e2e2e4
;
color
:
#333
;
border-radius
:
4px
;
-webkit-transition
:
border-color
.15s
ease-in-out
,
box-shadow
.15s
ease-in-out
;
transition
:
border-color
.15s
ease-in-out
,
box-shadow
.15s
ease-in-out
;
background-color
:
#fff
}
.form
textarea
{
height
:
auto
}
.form
input
[
type
=
password
]
:focus
,
.form
input
[
type
=
radio
]
:focus
,
.form
input
[
type
=
text
]
:focus
,
.form
textarea
:focus
{
box-shadow
:
none
;
border-color
:
#1fb5ad
}
table
.form
label
{
margin
:
10px
0
0
}
table
.form
th
{
vertical-align
:
initial
}
.module-panel
{
border-radius
:
4px
;
background-color
:
#fff
;
margin-bottom
:
20px
;
min-height
:
160px
}
.module-header
{
background
:
#fafafa
;
padding
:
15px
;
border-bottom
:
1px
solid
#eff2f7
;
border-top-left-radius
:
3px
;
border-top-right-radius
:
3px
}
.module-header
h2
{
font-size
:
13px
;
font-weight
:
400
}
.module-header
a
{
color
:
#767676
;
text-decoration
:
none
}
.module-header
a
:hover
{
color
:
#1fb5ad
}
.module-panel
.module-body
{
padding
:
15px
}
.module-panel
.module-body
li
{
padding
:
10px
;
line-height
:
18px
;
border-bottom
:
1px
solid
#ddd
}
.module-panel
.module-body
li
:hover
{
background-color
:
#fafafa
}
.module-panel
.module-body
li
a
:hover
{
text-decoration
:
none
}
.comment-title
{
background-color
:
#ececec
;
border-bottom
:
1px
solid
#dfdfdf
;
border-top
:
1px
solid
#f9f9f9
;
padding
:
3px
6px
3px
12px
;
line-height
:
24px
}
#comments
{
height
:
462px
;
overflow
:
auto
}
.article__thumbnail
{
margin
:
10px
auto
20px
;
display
:
none
;
text-align
:
center
}
.article__thumbnail
.thumbnail__img
{
background-color
:
rgba
(
0
,
0
,
0
,
.02
);
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
height
:
432px
;
width
:
768px
;
margin
:
0
auto
}
.article__thumbnail
button
{
margin-top
:
10px
}
button
#submitArticle
{
background-color
:
#fa8564
;
border-color
:
#fa8564
}
button
#submitArticle
:hover
{
background-color
:
#ec6459
;
border-color
:
#ec6459
}
#skinsPanel
{
min-width
:
328px
;
width
:
99%
}
.skinPreview
{
height
:
160px
;
width
:
280px
}
.skinItem
{
background-color
:
#fafafa
;
border-radius
:
3px
;
box-shadow
:
0
0
1px
rgba
(
0
,
0
,
0
,
.3
);
font-size
:
16px
;
line-height
:
24px
;
margin
:
10px
;
text-align
:
center
}
.skinItem
button
:first-child
{
margin-left
:
10px
}
#skinMain
.skinItem.selected
,
.skinItem
:hover
{
background-color
:
#1fb5ad
;
box-shadow
:
0
0
6px
rgba
(
0
,
0
,
0
,
.3
)}
.error-msg
,
.f-blue
{
color
:
#36c
}
.signs
button
{
margin
:
0
12px
}
.small-head
{
height
:
25px
;
width
:
25px
;
border-radius
:
20px
;
margin-right
:
5px
}
#commentTable
.table-main
td
{
vertical-align
:
top
}
.about-logo
{
margin
:
0
40px
0
20px
;
-ms-grid-row-align
:
center
;
align-self
:
center
}
.about-margin
{
font-size
:
18px
;
margin
:
20px
0
}
.about__panel
.about-list
li
{
border
:
0
;
padding
:
0
;
margin-left
:
24px
}
.about__panel
.about-list
li
:hover
{
background-color
:
#fff
;
text-decoration
:
underline
}
.ft__fade
{
color
:
rgba
(
0
,
0
,
0
,
.38
)}
.ft__green
{
color
:
#569e3d
}
.tag__select
{
position
:
relative
;
display
:
block
}
.tag__select
button
{
position
:
absolute
;
right
:
0
;
top
:
1px
;
border-radius
:
0
4px
4px
0
}
.completed-panel
{
background-color
:
#fff
;
border
:
1px
solid
#ddd
;
color
:
#00c
;
display
:
none
;
overflow
:
auto
;
padding
:
2px
;
position
:
absolute
;
z-index
:
10
;
width
:
50%
;
border-top
:
0
}
.completed-panel
a
{
display
:
block
;
text-decoration
:
none
;
line-height
:
26px
;
padding
:
0
5px
}
.completed-panel
a
.selected
{
background-color
:
#fafafa
;
color
:
#fa8564
}
.completed-ck
{
margin-top
:
9px
}
.completed-ck
span
,
.signs
button
,
.skinItem
button
{
margin
:
5px
10px
5px
0
;
display
:
inline-block
;
background-color
:
#c7cbd6
;
border-color
:
#c7cbd6
}
.completed-ck
span
:hover
,
.signs
button
:hover
,
.skinItem
button
:hover
{
background-color
:
#b0b5b9
;
border-color
:
#b0b5b9
}
.completed-ck
span
.selected
,
.signs
button
.selected
{
background-color
:
#1ca59e
;
border-color
:
#1ca59e
;
color
:
#fff
}
.dialog-background
{
background-color
:
#000
;
display
:
none
;
filter
:
alpha
(
opacity
=
30
);
height
:
100%
;
left
:
0
;
opacity
:
.3
;
position
:
fixed
;
top
:
0
;
width
:
100%
;
z-index
:
90
}
.dialog-panel
{
display
:
none
;
position
:
fixed
;
z-index
:
100
}
.dialog-title
{
color
:
#fff
;
float
:
left
;
font-size
:
12px
;
margin-left
:
12px
}
.dialog-header-bg
{
background
:
#32323a
;
border-radius
:
6px
6px
0
0
;
cursor
:
move
;
height
:
34px
;
line-height
:
34px
}
.dialog-header-bg
.icon-close
{
cursor
:
pointer
;
float
:
right
;
height
:
18px
;
margin-top
:
6px
;
padding
:
3px
;
width
:
22px
;
color
:
#1fb5ad
}
.dialog-header-bg
.icon-close
:hover
{
color
:
#1ca59e
}
.dialog-main
{
background-color
:
#fff
;
border
:
1px
solid
#d9d9d9
;
border-top
:
0
solid
silver
;
padding
:
12px
}
.paginate-pageCount
,
.paginate-paginate
a
,
.paginate-paginate
div
.button.paginate-page
,
.pagination-pages
{
border
:
1px
solid
#eff2f7
;
padding
:
6px
12px
;
cursor
:
pointer
;
float
:
left
;
line-height
:
18px
;
background
:
#eee
;
height
:
18px
;
margin-left
:
1px
;
border-radius
:
0
;
text-decoration
:
none
;
color
:
#333
}
.paginate-pageCount
,
.pagination-current-page
{
cursor
:
auto
}
.paginate-pageCount
{
margin-left
:
10px
}
.paginate-paginate
a
:hover
,
.paginate-paginate
div
.button.paginate-page
:hover
,
.pagination-current-page
,
.pagination-pages
:hover
{
border-color
:
#2eb4ad
;
background-color
:
#2eb4ad
;
color
:
#fff
}
.paginate-paginate
div
.button
{
padding
:
0
;
float
:
left
;
border
:
0
;
background
:
none
}
.paginate-inputPage
{
height
:
26px
;
width
:
24px
;
margin
:
0
5px
}
.table-main
{
margin
:
0
;
padding
:
0
;
position
:
relative
}
.table-main
table
{
word-break
:
break-all
;
word-wrap
:
break-word
;
table-layout
:
fixed
}
.table-header
{
border-bottom
:
1px
solid
#ddd
;
background-color
:
#fafafa
;
padding
:
15px
0
}
.table-header
th
{
line-height
:
18px
;
text-align
:
left
;
text-indent
:
6px
;
font-weight
:
400
}
.table-main
td
{
border-bottom
:
1px
solid
#ddd
;
color
:
#767676
;
padding
:
10px
0
}
.table-lineHover
.table-hasExpend
td
{
border-bottom
:
0
}
.table-hasExpend
a
{
color
:
#3b3e43
}
.table-hasExpend
a
:hover
{
text-decoration
:
none
;
color
:
#1fb5ad
}
.table-heiglight
td
,
.table-lineHover
td
{
background-color
:
#fafafa
;
border-right-color
:
#fafafa
}
.table-expendRow
td
{
padding
:
0
0
5px
36px
}
.table-expendRow
td
span
{
margin-left
:
60px
}
.table-expendRow
td
a
{
padding
:
1px
5px
;
font-size
:
12px
;
line-height
:
1.5
;
border-radius
:
3px
;
text-decoration
:
none
;
color
:
#fff
;
background-color
:
#c7cbd6
;
border-color
:
#c7cbd6
}
.table-expendRow
td
a
:hover
{
background-color
:
#b0b5b9
;
border-color
:
#b0b5b9
}
.table-center
{
margin
:
0
auto
}
.table-tag
{
color
:
#d54121
;
font-size
:
12px
;
font-style
:
italic
;
margin-left
:
10px
}
.navigation-icon
{
height
:
18px
;
width
:
18px
;
float
:
left
;
margin
:
-1px
10px
0
0
}
#preferenceSignButton1
,
#preferenceSignButton2
,
#preferenceSignButton3
{
margin
:
10px
0
}
#tabPreferencePanel_setting
label
,
#tabPreferencePanel
label
,
.form__no-table
label
{
width
:
100%
;
margin-top
:
10px
;
font-weight
:
700
}
.page-list__label
{
width
:
100%
}
.search-btn
{
position
:
absolute
;
top
:
28px
;
right
:
27px
;
border-radius
:
0
4px
4px
0
}
.vditor-toolbar
label
{
margin-bottom
:
0
}
.vditor
.vditor-textarea
{
border
:
0
;
resize
:
none
;
padding
:
10px
;
box-sizing
:
border-box
;
background-color
:
#fafbfc
;
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
#24292e
;
border-radius
:
0
0
3px
3px
}
@media
(
max-width
:
768px
){
#top
>
a
{
display
:
none
}
#tabsPanel
{
margin-left
:
0
}
.footer
{
padding-left
:
0
}
.skinPreview
{
width
:
100%
;
height
:
auto
;
margin
:
0
}
.tip
{
left
:
12px
}
#tabs
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
left
:
-240px
;
z-index
:
100
}
.top__menu
{
font-size
:
22px
;
margin
:
12px
;
float
:
left
}
.fn__flex
,
.top__menu
{
display
:
block
}
#permalink
{
margin
:
0
!important
}
.permalink__label
{
margin-bottom
:
10px
!important
}
.article-commentable__panel
,
.viewpwd__panel
{
float
:
none
}
#viewPwd
{
width
:
100%
!important
}
.viewpwd__panel
label
{
margin-top
:
20px
}
.signs
label
{
width
:
100%
}
.table-expendRow
td
{
padding-left
:
10px
}
.about-margin
{
margin-bottom
:
10px
}
.about__iframe
{
margin
:
0
0
20px
!important
}
.about-logo
{
margin
:
0
auto
;
display
:
block
;
float
:
none
;
width
:
128px
}
.about__panel
{
margin-left
:
0
!important
}
.dialog-panel
{
left
:
0
!important
;
top
:
0
!important
;
padding
:
10px
!important
;
box-sizing
:
border-box
!important
;
width
:
100%
!important
}
.tabs__bg
{
display
:
none
;
width
:
100vw
;
height
:
100vh
;
background-color
:
rgba
(
0
,
0
,
0
,
.4
);
position
:
fixed
;
top
:
0
;
z-index
:
78
}}
html
{
-webkit-text-size-adjust
:
100%
;
-ms-text-size-adjust
:
100%
;
height
:
100%
}
body
{
margin
:
0
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
font-size
:
14px
;
background-color
:
#fff
;
-webkit-font-smoothing
:
antialiased
;
-webkit-overflow-scrolling
:
touch
}
::-moz-selection
{
text-shadow
:
none
;
background
:
rgba
(
65
,
131
,
196
,
.4
)}
::selection
{
text-shadow
:
none
;
background
:
rgba
(
66
,
133
,
244
,
.4
)}
ol
,
ul
{
padding
:
0
}
dd
,
dl
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
ol
,
p
,
ul
{
margin
:
0
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
nav
,
section
{
display
:
block
}
audio
,
canvas
,
video
{
display
:
inline-block
}
audio
:not
([
controls
])
{
display
:
none
}
a
{
outline
:
0
}
sub
,
sup
{
position
:
relative
;
font-size
:
75%
;
line-height
:
0
;
vertical-align
:
baseline
}
sup
{
top
:
-.5em
}
sub
{
bottom
:
-.25em
}
img
{
max-width
:
100%
;
vertical-align
:
middle
;
border
:
0
;
height
:
auto
;
-ms-interpolation-mode
:
bicubic
;
overflow
:
hidden
;
font-size
:
12px
}
button
,
input
,
select
,
textarea
{
margin
:
0
;
font-size
:
100%
;
vertical-align
:
middle
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
outline
:
none
}
button
,
input
{
line-height
:
normal
}
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
padding
:
0
;
border
:
0
}
button
,
input
[
type
=
button
],
input
[
type
=
reset
],
input
[
type
=
submit
]
{
cursor
:
pointer
;
-webkit-appearance
:
button
}
input
[
type
=
search
]
{
box-sizing
:
content-box
;
-webkit-appearance
:
textfield
}
input
[
type
=
search
]
::-webkit-search-cancel-button
,
input
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
textarea
{
overflow
:
auto
;
resize
:
vertical
}
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
14px
;
height
:
14px
}
blockquote
{
margin
:
0
}
.fn__flex
{
display
:
-webkit-box
;
display
:
flex
}
.fn__flex-center
{
-ms-grid-row-align
:
center
;
align-self
:
center
}
.fn__flex-inline
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.fn__flex-1
{
-webkit-box-flex
:
1
;
flex
:
1
;
min-width
:
1px
}
.fn__flex-column
{
min-height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
}
.fn__pointer
{
cursor
:
pointer
}
.fn__clear
:after
,
.fn__clear
:before
{
display
:
table
;
content
:
""
}
.fn__clear
:after
{
clear
:
both
}
.fn__left
{
float
:
left
}
.fn__right
{
float
:
right
}
.fn__none
{
display
:
none
}
.fn__hidden
{
visibility
:
hidden
}
.fn__ellipsis
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-wrap
:
normal
}
.ft__13
{
font-size
:
13px
}
.ft__smaller
{
font-size
:
12px
}
.ft__center
{
text-align
:
center
}
.ft__nowrap
{
white-space
:
nowrap
}
.vditor
,
.vditor-reset
{
--border-color
:
#d1d5da
;
--second-color
:
rgba
(
88
,
96
,
105
,
0.36
);
--panel-background-color
:
#fff
;
--toolbar-background-color
:
#f6f8fa
;
--toolbar-icon-color
:
#586069
;
--toolbar-icon-hover-color
:
#4285f4
;
--textarea-background-color
:
#fafbfc
;
--textarea-text-color
:
#24292e
;
--resize-icon-color
:
var
(
--toolbar-icon-color
);
--resize-background-color
:
var
(
--toolbar-background-color
);
--resize-hover-icon-color
:
var
(
--panel-background-color
);
--resize-hover-background-color
:
var
(
--toolbar-icon-hover-color
);
--code-background-color
:
rgba
(
27
,
31
,
35
,
0.05
);
--preview-background-color
:
rgba
(
27
,
31
,
35
,
0.02
);
--heading-border-color
:
#eaecef
;
--blockquote-color
:
#6a737d
;
--ir-heading-color
:
#660e7a
;
--ir-title-color
:
grey
;
--ir-bi-color
:
navy
;
--ir-link-color
:
green
;
--ir-bracket-color
:
#00f
;
--ir-paren-color
:
green
}
.vditor--dark
,
.vditor-reset--dark
{
--border-color
:
#141414
;
--second-color
:
hsla
(
0
,
0%
,
72.5%
,
0.36
);
--panel-background-color
:
#24292e
;
--toolbar-background-color
:
#1d2125
;
--toolbar-icon-color
:
#b9b9b9
;
--toolbar-icon-hover-color
:
#fff
;
--textarea-background-color
:
#2f363d
;
--textarea-text-color
:
#d1d5da
;
--resize-icon-color
:
var
(
--border-color
);
--resize-background-color
:
var
(
--second-color
);
--resize-hover-icon-color
:
var
(
--toolbar-icon-hover-color
);
--resize-hover-background-color
:
hsla
(
0
,
0%
,
72.5%
,
0.86
);
--code-background-color
:
rgba
(
66
,
133
,
244
,
0.36
);
--preview-background-color
:
rgba
(
120
,
146
,
190
,
0.55
);
--heading-border-color
:
var
(
--textarea-text-color
);
--blockquote-color
:
var
(
--toolbar-icon-color
);
--ir-heading-color
:
#9876aa
;
--ir-title-color
:
grey
;
--ir-bi-color
:
#cc7832
;
--ir-link-color
:
#ffc66d
;
--ir-bracket-color
:
#287bde
;
--ir-paren-color
:
#6a8759
}
@-webkit-keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
.vditor-tooltipped
{
position
:
relative
;
cursor
:
pointer
}
.vditor-tooltipped
:after
{
z-index
:
1000000
;
padding
:
5px
8px
;
font-size
:
11px
;
font-weight
:
400
;
-webkit-font-smoothing
:
subpixel-antialiased
;
color
:
#fff
;
text-align
:
center
;
text-decoration
:
none
;
text-shadow
:
none
;
text-transform
:
none
;
letter-spacing
:
normal
;
word-wrap
:
break-word
;
white-space
:
pre
;
content
:
attr
(
aria-label
);
background
:
#3b3e43
;
border-radius
:
3px
;
line-height
:
16px
}
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
position
:
absolute
;
display
:
none
;
pointer-events
:
none
;
opacity
:
0
}
.vditor-tooltipped
:before
{
z-index
:
1000001
;
width
:
0
;
height
:
0
;
color
:
#3b3e43
;
content
:
""
;
border
:
5px
solid
transparent
}
.vditor-tooltipped--hover
:after
,
.vditor-tooltipped--hover
:before
,
.vditor-tooltipped
:active:after
,
.vditor-tooltipped
:active:before
,
.vditor-tooltipped
:focus:after
,
.vditor-tooltipped
:focus:before
,
.vditor-tooltipped
:hover:after
,
.vditor-tooltipped
:hover:before
{
display
:
inline-block
;
text-decoration
:
none
;
-webkit-animation-name
:
tooltip-appear
;
animation-name
:
tooltip-appear
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
.vditor-tooltipped__s
:after
,
.vditor-tooltipped__se
:after
,
.vditor-tooltipped__sw
:after
{
top
:
100%
;
right
:
50%
;
margin-top
:
5px
}
.vditor-tooltipped__s
:before
,
.vditor-tooltipped__se
:before
,
.vditor-tooltipped__sw
:before
{
top
:
auto
;
right
:
50%
;
bottom
:
-5px
;
margin-right
:
-5px
;
border-bottom-color
:
#3b3e43
}
.vditor-tooltipped__se
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__sw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__ne
:after
,
.vditor-tooltipped__nw
:after
{
right
:
50%
;
bottom
:
100%
;
margin-bottom
:
5px
}
.vditor-tooltipped__n
:before
,
.vditor-tooltipped__ne
:before
,
.vditor-tooltipped__nw
:before
{
top
:
-5px
;
right
:
50%
;
bottom
:
auto
;
margin-right
:
-5px
;
border-top-color
:
#3b3e43
}
.vditor-tooltipped__ne
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__nw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__s
:after
{
-webkit-transform
:
translateX
(
50%
);
transform
:
translateX
(
50%
)}
.vditor-tooltipped__w
:after
{
right
:
100%
;
bottom
:
50%
;
margin-right
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__w
:before
{
top
:
50%
;
bottom
:
50%
;
left
:
-5px
;
margin-top
:
-5px
;
border-left-color
:
#3b3e43
}
.vditor-tooltipped__e
:after
{
bottom
:
50%
;
left
:
100%
;
margin-left
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__e
:before
{
top
:
50%
;
right
:
-5px
;
bottom
:
50%
;
margin-top
:
-5px
;
border-right-color
:
#3b3e43
}
@media
screen
and
(
max-width
:
520px
){
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
content
:
none
}}
@-webkit-keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
.vditor-panel
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
;
z-index
:
3
;
font-size
:
14px
;
display
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
max-width
:
320px
;
min-width
:
80px
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-name
:
scale-in
;
animation-name
:
scale-in
;
-webkit-animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
color
:
var
(
--toolbar-icon-color
)}
.vditor-panel--none
{
padding
:
0
;
-webkit-animation
:
none
;
animation
:
none
;
min-width
:
auto
;
max-width
:
none
;
white-space
:
nowrap
}
.vditor-input
{
border
:
0
;
padding
:
3px
5px
;
background-color
:
var
(
--panel-background-color
);
font-size
:
12px
;
color
:
var
(
--textarea-text-color
)}
.vditor-input
:focus
{
background-color
:
var
(
--toolbar-background-color
);
outline
:
none
}
.vditor-icon
{
color
:
var
(
--toolbar-icon-color
);
cursor
:
pointer
;
float
:
left
;
padding
:
4px
5px
;
height
:
21px
;
width
:
23px
;
background-color
:
transparent
;
border
:
0
;
box-sizing
:
border-box
}
.vditor-icon--current
,
.vditor-icon
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
transparent
}
.vditor-icon
:focus
{
outline
:
none
}
.vditor-icon
svg
{
height
:
13px
!important
;
width
:
13px
!important
;
float
:
left
;
fill
:
currentColor
;
pointer-events
:
none
}
.vditor-toolbar
{
background-color
:
var
(
--toolbar-background-color
);
border-bottom
:
1px
solid
var
(
--border-color
);
padding
:
0
5px
;
line-height
:
1
}
.vditor-toolbar--pin
{
position
:
-webkit-sticky
;
position
:
sticky
;
top
:
0
;
z-index
:
1
}
.vditor-toolbar--hide
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
height
:
5px
;
overflow
:
hidden
}
.vditor-toolbar--hide
:hover
{
background-color
:
var
(
--toolbar-background-color
);
height
:
auto
;
overflow
:
visible
}
.vditor-toolbar__item
{
float
:
left
;
position
:
relative
}
.vditor-toolbar__item
.vditor-tooltipped
{
color
:
var
(
--toolbar-icon-color
);
border
:
0
;
padding
:
10px
5px
;
background-color
:
transparent
;
height
:
35px
;
width
:
25px
;
box-sizing
:
border-box
}
.vditor-toolbar__item
.vditor-tooltipped
:focus
{
outline
:
none
}
.vditor-toolbar__item
.vditor-tooltipped
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-toolbar__item
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
15px
;
height
:
15px
}
.vditor-toolbar__item
input
{
position
:
absolute
;
width
:
25px
;
height
:
35px
;
top
:
0
;
left
:
0
;
cursor
:
pointer
;
opacity
:
.001
;
overflow
:
hidden
}
.vditor-toolbar__divider
{
float
:
left
;
width
:
16px
;
height
:
35px
}
.vditor-toolbar__br
{
width
:
100%
;
padding
:
0
!important
;
height
:
0
!important
}
.vditor-menu--current
svg
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-menu--disabled
svg
{
color
:
var
(
--second-color
);
cursor
:
not-allowed
}
.vditor-emojis
{
display
:
inline-block
;
overflow
:
auto
}
.vditor-emojis
::-webkit-scrollbar
{
display
:
none
}
.vditor-emojis__tip
{
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
200px
;
margin-right
:
10px
;
color
:
var
(
--toolbar-icon-color
);
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
}
.vditor-emojis__tail
{
margin-top
:
5px
;
font-size
:
12px
;
color
:
var
(
--toolbar-icon-color
);
display
:
-webkit-box
;
display
:
flex
}
.vditor-emojis__tail
a
{
text-decoration
:
none
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-emojis__tail
a
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-emojis
button
{
cursor
:
pointer
;
border-radius
:
3px
;
float
:
left
;
height
:
30px
;
width
:
30px
;
text-align
:
center
;
line-height
:
26px
;
padding
:
3px
;
box-sizing
:
border-box
;
font-size
:
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
border
:
0
;
margin
:
0
;
background-color
:
transparent
;
overflow
:
hidden
}
.vditor-emojis
button
:focus
{
outline
:
none
}
.vditor-emojis
button
:hover
.vditor-emojis__icon
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.vditor-emojis
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin
:
3px
0
0
3px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-toolbar__item
.vditor-tooltipped
{
padding
:
10px
8px
;
width
:
31px
;
margin
:
0
4px
}}
@-webkit-keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.vditor
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-sizing
:
border-box
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
}
.vditor--fullscreen
{
position
:
fixed
;
top
:
0
;
width
:
100%
!important
;
left
:
0
;
height
:
100vh
!important
;
z-index
:
90
;
border-radius
:
0
}
.vditor-content
{
display
:
-webkit-box
;
display
:
flex
;
min-height
:
60px
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
{
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
margin
:
0
1px
0
0
;
height
:
100%
;
overflow
:
auto
;
width
:
100%
;
-webkit-box-flex
:
1
;
flex
:
1
;
border
:
0
;
resize
:
none
;
padding
:
10px
9px
10px
10px
;
box-sizing
:
border-box
;
background-color
:
var
(
--panel-background-color
);
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
var
(
--textarea-text-color
);
border-radius
:
0
0
3px
3px
;
font-variant-ligatures
:
no-common-ligatures
;
white-space
:
pre-wrap
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.vditor-textarea
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-textarea
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-textarea
:focus
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-preview
{
-webkit-box-flex
:
1
;
flex
:
1
;
overflow
:
auto
;
margin-left
:
-1px
;
border-left
:
1px
solid
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
background-color
:
var
(
--textarea-background-color
);
padding
:
10px
}
.vditor-preview
>
div
::-webkit-scrollbar
{
display
:
none
}
.vditor-preview
>
.vditor-reset
{
margin
:
0
auto
}
.vditor-devtools
{
display
:
none
;
background-color
:
var
(
--textarea-background-color
);
overflow
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
;
box-shadow
:
inset
1px
0
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
padding
:
10px
}
.vditor-counter
{
padding
:
3px
;
color
:
var
(
--toolbar-icon-color
);
background-color
:
var
(
--code-background-color
);
border-radius
:
3px
;
font-size
:
12px
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
float
:
right
;
margin
:
8px
3px
0
0
}
.vditor-counter--error
{
color
:
#d23f31
;
background-color
:
rgba
(
210
,
63
,
49
,
.1
)}
.vditor-resize
{
padding
:
3px
0
;
cursor
:
row-resize
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
position
:
absolute
;
width
:
100%
}
.vditor-resize--top
{
top
:
-3px
}
.vditor-resize--bottom
{
bottom
:
-3px
}
.vditor-resize
>
div
{
height
:
3px
;
background-color
:
var
(
--resize-background-color
);
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-resize--selected
>
div
,
.vditor-resize
:hover
>
div
{
background-color
:
var
(
--resize-hover-background-color
)}
.vditor-resize--selected
svg
,
.vditor-resize
:hover
svg
{
color
:
var
(
--resize-hover-icon-color
)}
.vditor-resize
svg
{
fill
:
currentColor
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
13px
;
height
:
3px
;
display
:
block
;
margin
:
0
auto
;
color
:
var
(
--resize-icon-color
)}
.vditor-upload
{
position
:
absolute
;
height
:
3px
;
left
:
0
;
top
:
-2px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
background-color
:
#4285f4
}
.vditor-tip
{
position
:
absolute
;
font-size
:
12px
;
top
:
10px
;
color
:
var
(
--toolbar-icon-color
);
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
left
:
50%
}
.vditor-tip--show
{
display
:
block
;
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
}
.vditor-tip__content
{
text-align
:
left
;
display
:
inline-block
;
line-height
:
16px
;
padding
:
3px
10px
;
border-radius
:
3px
;
background
:
var
(
--toolbar-icon-color
);
position
:
relative
;
margin-left
:
-50%
;
color
:
var
(
--toolbar-background-color
)}
.vditor-tip__content
ul
{
margin
:
2px
0
;
padding
:
0
0
0
18px
}
.vditor-tip__close
{
position
:
absolute
;
color
:
var
(
--toolbar-icon-color
);
top
:
-7px
;
right
:
-15px
;
font-weight
:
700
;
cursor
:
pointer
}
.vditor-tip__close
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-arrow
:before
{
position
:
absolute
;
width
:
0
;
height
:
0
;
pointer-events
:
none
;
content
:
" "
;
top
:
-14px
;
left
:
5px
;
border
:
7px
solid
transparent
;
border-bottom
:
7px
solid
var
(
--panel-background-color
)}
.vditor-outline
{
min-width
:
250px
;
width
:
250px
;
border-right
:
1px
solid
var
(
--border-color
);
background-color
:
var
(
--panel-background-color
);
display
:
none
}
.vditor-outline__item
{
padding
:
5px
10px
;
cursor
:
pointer
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.vditor-outline__item
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
var
(
--toolbar-background-color
)}
.vditor-outline__panel
{
position
:
-webkit-sticky
;
position
:
sticky
;
overflow
:
auto
;
top
:
35px
;
padding-bottom
:
10px
;
color
:
var
(
--textarea-text-color
);
box-sizing
:
border-box
}
.vditor-outline__panel
::-webkit-scrollbar
{
display
:
none
}
.vditor-outline__title
{
border-bottom
:
1px
dashed
var
(
--border-color
);
padding
:
5px
10px
;
color
:
var
(
--toolbar-icon-color
);
font-size
:
12px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-arrow
:before
{
left
:
12px
}}
.vditor-hint
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
0
;
z-index
:
4
;
line-height
:
20px
;
list-style
:
none
;
font-size
:
12px
;
margin
:
0
;
max-width
:
250px
;
min-width
:
80px
;
display
:
none
}
.vditor-hint
button
{
color
:
var
(
--toolbar-icon-color
);
display
:
block
;
padding
:
3px
10px
;
border
:
0
;
border-radius
:
0
;
border-bottom
:
1px
solid
var
(
--border-color
);
line-height
:
20px
;
width
:
100%
;
box-sizing
:
border-box
;
text-align
:
left
;
margin
:
0
;
background-color
:
transparent
;
cursor
:
pointer
;
white-space
:
nowrap
}
.vditor-hint
button
:last-child
{
border-bottom
:
0
}
.vditor-hint
button
:focus
{
outline
:
none
}
.vditor-hint--current
,
.vditor-hint
button
:hover
{
background-color
:
var
(
--toolbar-background-color
)
!important
;
color
:
var
(
--toolbar-icon-hover-color
)
!important
}
.vditor-hint__emoji
{
font-size
:
16px
;
float
:
left
;
margin-right
:
3px
}
.vditor-hint
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin-right
:
3px
}
.vditor-reset
{
color
:
var
(
--textarea-text-color
);
font-variant-ligatures
:
no-common-ligatures
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-wrap
:
break-word
;
overflow
:
auto
;
line-height
:
1.5
;
font-size
:
16px
;
word-break
:
break-word
}
.vditor-reset--anchor
{
padding-left
:
20px
}
.vditor-reset--error
{
color
:
#d23f31
;
font-size
:
12px
;
display
:
block
;
line-height
:
16px
}
.vditor-reset--dark
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-reset--dark
a
{
color
:
#4285f4
}
.vditor-reset
ul
ul
ul
{
list-style-type
:
square
}
.vditor-reset
ul
ul
{
list-style-type
:
circle
}
.vditor-reset
ul
{
list-style-type
:
disc
}
.vditor-reset
ol
,
.vditor-reset
ul
{
padding-left
:
2em
;
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
li
+
li
{
margin-top
:
.25em
}
.vditor-reset
audio
{
max-width
:
100%
}
.vditor-reset
audio
:focus
{
outline
:
none
}
.vditor-reset
video
{
max-height
:
90vh
;
max-width
:
100%
}
.vditor-reset
img
{
max-width
:
100%
}
.vditor-reset
img
.emoji
{
cursor
:
auto
;
max-width
:
20px
;
vertical-align
:
sub
}
.vditor-reset
h1
,
.vditor-reset
h2
,
.vditor-reset
h3
,
.vditor-reset
h4
,
.vditor-reset
h5
,
.vditor-reset
h6
{
margin-top
:
24px
;
margin-bottom
:
16px
;
font-weight
:
600
;
line-height
:
1.25
}
.vditor-reset
h1
:hover
.vditor-anchor
svg
,
.vditor-reset
h2
:hover
.vditor-anchor
svg
,
.vditor-reset
h3
:hover
.vditor-anchor
svg
,
.vditor-reset
h4
:hover
.vditor-anchor
svg
,
.vditor-reset
h5
:hover
.vditor-anchor
svg
,
.vditor-reset
h6
:hover
.vditor-anchor
svg
{
visibility
:
visible
}
.vditor-reset
h1
{
font-size
:
1.7em
}
.vditor-reset
h1
,
.vditor-reset
h2
{
padding-bottom
:
.3em
;
border-bottom
:
1px
solid
var
(
--heading-border-color
)}
.vditor-reset
h2
{
font-size
:
1.5em
}
.vditor-reset
h3
{
font-size
:
1.25em
}
.vditor-reset
h4
{
font-size
:
1em
}
.vditor-reset
h5
{
font-size
:
.875em
}
.vditor-reset
h6
{
font-size
:
.85em
}
.vditor-reset
hr
{
height
:
2px
;
padding
:
0
;
margin
:
24px
0
;
background-color
:
var
(
--heading-border-color
);
border
:
0
}
.vditor-reset
p
{
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
blockquote
{
padding
:
0
1em
;
color
:
var
(
--blockquote-color
);
border-left
:
.25em
solid
var
(
--heading-border-color
);
margin
:
0
0
16px
}
.vditor-reset
blockquote
>
:first-child
{
margin-top
:
0
}
.vditor-reset
blockquote
>
:last-child
{
margin-bottom
:
0
}
.vditor-reset
ins
>
iframe
{
border
:
0
}
.vditor-reset
iframe
{
border
:
1px
solid
var
(
--border-color
);
max-width
:
100%
;
box-sizing
:
border-box
}
.vditor-reset
iframe
.iframe__video
{
min-width
:
80%
;
min-height
:
36vh
}
.vditor-reset
table
{
border-collapse
:
collapse
;
empty-cells
:
show
;
margin-bottom
:
16px
;
overflow
:
auto
;
border-spacing
:
0
}
.vditor-reset
table
tr
{
background-color
:
var
(
--textarea-background-color
);
border-top
:
1px
solid
#c6cbd1
}
.vditor-reset
table
td
,
.vditor-reset
table
th
{
padding
:
6px
13px
;
border
:
1px
solid
#dfe2e5
;
word-break
:
normal
}
.vditor-reset
table
th
{
font-weight
:
600
}
.vditor-reset
table
tbody
tr
:nth-child
(
2n
)
{
background-color
:
var
(
--panel-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
padding
:
.2em
.4em
;
margin
:
0
;
font-size
:
85%
;
border-radius
:
3px
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-break
:
break-word
;
background-size
:
20px
20px
;
white-space
:
pre-wrap
;
background-color
:
var
(
--code-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-echarts
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-graphviz
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-math
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-mermaid
{
background-color
:
var
(
--preview-background-color
)}
.vditor-reset
pre
>
code
{
margin
:
0
;
font-size
:
85%
;
padding
:
.5em
;
border-radius
:
5px
;
display
:
block
;
overflow
:
auto
;
white-space
:
pre
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
background-size
:
20px
20px
;
background-image
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)
;
word-break
:
normal
;
word-wrap
:
normal
}
.vditor-reset
pre
:hover
div
.vditor-copy
{
display
:
block
}
.vditor-reset
kbd
{
display
:
inline-block
;
padding
:
3px
5px
;
font
:
11px
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
;
line-height
:
10px
;
color
:
var
(
--textarea-text-color
);
vertical-align
:
middle
;
background-color
:
var
(
--textarea-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-shadow
:
inset
0
-1px
0
var
(
--border-color
)}
.vditor-reset
summary
{
cursor
:
pointer
}
.vditor-reset
summary
:focus
{
outline
:
none
}
.vditor-reset
svg
{
height
:
auto
;
width
:
auto
;
stroke-width
:
initial
}
.vditor-reset
blockquote
:last-child
,
.vditor-reset
hr
:last-child
,
.vditor-reset
ol
:last-child
,
.vditor-reset
p
:last-child
,
.vditor-reset
pre
:last-child
,
.vditor-reset
ul
:last-child
{
margin-bottom
:
0
}
.vditor-reset
.language-echarts
{
overflow
:
hidden
;
height
:
420px
}
.vditor-reset
.language-graphviz
polygon
{
fill
:
transparent
}
.vditor-task
{
list-style
:
none
}
.vditor-task
input
{
margin
:
0
.2em
.25em
-1.6em
;
font-size
:
12px
;
vertical-align
:
middle
}
.vditor-copy
{
position
:
relative
;
display
:
none
;
z-index
:
1
}
.vditor-copy
textarea
{
position
:
absolute
;
left
:
-100000px
;
height
:
10px
}
.vditor-copy
span
{
cursor
:
pointer
;
position
:
absolute
;
right
:
.5em
;
top
:
.5em
}
.vditor-copy
svg
{
color
:
var
(
--toolbar-icon-color
);
height
:
14px
;
width
:
14px
!important
;
display
:
block
;
fill
:
currentColor
}
.vditor-linenumber
{
padding-left
:
4em
!important
;
position
:
relative
}
.vditor-linenumber__rows
{
position
:
absolute
;
pointer-events
:
none
;
top
:
.2em
;
left
:
0
;
width
:
3em
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
counter-reset
:
linenumber
}
.vditor-linenumber__rows
>
span
{
pointer-events
:
none
;
display
:
block
}
.vditor-linenumber__rows
>
span
:before
{
counter-increment
:
linenumber
;
content
:
counter
(
linenumber
);
color
:
hsla
(
0
,
4%
,
60.4%
,
.38
);
display
:
block
;
padding-right
:
1em
;
text-align
:
right
}
.vditor-speech
{
position
:
absolute
;
display
:
none
;
background-color
:
var
(
--toolbar-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
padding
:
3px
;
cursor
:
pointer
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-speech--current
,
.vditor-speech
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-speech
svg
{
height
:
14px
;
width
:
14px
;
fill
:
currentColor
;
display
:
block
;
stroke-width
:
0
;
stroke
:
currentColor
}
.vditor-anchor
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-20px
}
.vditor-anchor
svg
{
visibility
:
hidden
}
.vditor-anchor
:hover
svg
{
visibility
:
visible
}
.vditor-anchor
:focus
{
outline
:
none
}
.vditor-linkcard
{
margin
:
31px
auto
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
cursor
:
pointer
;
max-width
:
768px
;
padding
:
0
10px
}
.vditor-linkcard
a
{
border-radius
:
3px
;
background-color
:
var
(
--toolbar-background-color
);
overflow
:
hidden
;
max-height
:
250px
;
display
:
-webkit-box
;
display
:
flex
;
text-decoration
:
none
;
flex-wrap
:
wrap-reverse
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.vditor-linkcard
a
:hover
{
box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.13
),
0
3px
6px
rgba
(
0
,
0
,
0
,
.26
);
text-decoration
:
none
}
.vditor-linkcard
a
:visited
.vditor-linkcard__abstract
{
color
:
var
(
--second-color
)}
.vditor-linkcard__info
{
padding
:
10px
;
min-width
:
200px
;
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
}
.vditor-linkcard__title
{
font-size
:
14px
;
font-weight
:
400
;
color
:
var
(
--textarea-text-color
);
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.vditor-linkcard__title
img
{
cursor
:
pointer
;
height
:
20px
;
width
:
20px
;
border-radius
:
3px
;
flex-shrink
:
0
;
margin-right
:
5px
}
.vditor-linkcard__abstract
{
word-wrap
:
break-word
;
word-break
:
break-all
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
-webkit-box-orient
:
vertical
;
display
:
-webkit-box
;
font-size
:
13px
;
color
:
var
(
--toolbar-icon-color
);
margin
:
5px
0
}
.vditor-linkcard__site
{
font-size
:
12px
;
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-linkcard__image
{
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
max-width
:
250px
;
min-width
:
126px
;
cursor
:
pointer
;
background-color
:
var
(
--second-color
)}
.vditor-math
mjx-container
:focus
{
outline
:
none
;
cursor
:
context-menu
}
.vditor-footnotes__goto-ref
{
text-decoration
:
none
}
.vditor-toc
{
margin-bottom
:
16px
}
.vditor-wysiwyg
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-wysiwyg
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-wysiwyg
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-wysiwyg
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-wysiwyg
blockquote
:empty:before
,
.vditor-wysiwyg
h1
:empty:after
,
.vditor-wysiwyg
h2
:empty:after
,
.vditor-wysiwyg
h3
:empty:after
,
.vditor-wysiwyg
h4
:empty:after
,
.vditor-wysiwyg
h5
:empty:after
,
.vditor-wysiwyg
h6
:empty:after
,
.vditor-wysiwyg
p
:empty:before
,
.vditor-wysiwyg
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-wysiwyg
code
[
data-marker
=
"`"
]
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.vditor-wysiwyg__block
pre
:first-child
{
margin-bottom
:
-1em
}
.vditor-wysiwyg__block
pre
:first-child
code
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-wysiwyg__block
pre
:last-child
{
margin-bottom
:
1em
}
.vditor-wysiwyg__preview
{
cursor
:
pointer
;
white-space
:
normal
;
min-height
:
27px
}
.vditor-wysiwyg__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-wysiwyg
.vditor-toc
:before
,
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
,
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-wysiwyg
h1
:before
,
.vditor-wysiwyg
h2
:before
,
.vditor-wysiwyg
h3
:before
,
.vditor-wysiwyg
h4
:before
,
.vditor-wysiwyg
h5
:before
,
.vditor-wysiwyg
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
h2
:before
{
content
:
"H2"
}
.vditor-wysiwyg
h3
:before
{
content
:
"H3"
}
.vditor-wysiwyg
h4
:before
{
content
:
"H4"
}
.vditor-wysiwyg
h5
:before
{
content
:
"H5"
}
.vditor-wysiwyg
h6
:before
{
content
:
"H6"
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
{
content
:
"</>"
}
.vditor-wysiwyg
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-wysiwyg
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-wysiwyg
details
{
white-space
:
normal
}
.vditor-wysiwyg
span
[
data-type
=
backslash
]>
span
{
display
:
none
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
span
[
data-type
=
link-ref
],
.vditor-wysiwyg
sup
[
data-type
=
footnotes-ref
]
{
color
:
#4285f4
}
.vditor-wysiwyg
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-ir__block
[
data-type
=
html-block
]
pre
{
margin
:
1em
0
!important
}
.vditor-ir__node
[
data-type
=
code-block
]
:after
,
.vditor-ir__node
[
data-type
=
code-block
]
:before
,
.vditor-ir__node
[
data-type
=
math-block
]
:after
,
.vditor-ir__node
[
data-type
=
math-block
]
:before
{
content
:
" "
;
color
:
var
(
--second-color
)}
.vditor-ir__node
:not
(
.vditor-ir__node--expand
)
.vditor-ir__marker
{
padding
:
0
!important
}
.vditor-ir__node
[
data-type
=
footnotes-ref
],
.vditor-ir__node
[
data-type
=
link-ref
]
{
color
:
#4285f4
}
.vditor-ir__node
.vditor-ir__marker
{
width
:
0
;
overflow
:
hidden
;
display
:
inline-block
;
height
:
0
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-ir__node
.vditor-ir__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-ir__node--expand
.vditor-ir__marker
{
color
:
var
(
--second-color
);
display
:
inline
;
height
:
auto
;
width
:
auto
}
.vditor-ir__node--expand
.vditor-ir__marker--hide
{
display
:
none
}
.vditor-ir__node--expand
.vditor-ir__marker--heading
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bi
{
color
:
var
(
--ir-bi-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--link
{
color
:
var
(
--ir-link-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--title
{
color
:
var
(
--ir-title-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bracket
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir__node--expand
.vditor-ir__marker--paren
{
color
:
var
(
--ir-paren-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--info
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
{
color
:
var
(
--textarea-text-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-echarts
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-graphviz
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-math
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-mermaid
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-ir__node--expand
[
data-type
=
code-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
code-block
]
:before
{
content
:
"```"
}
.vditor-ir__node--expand
[
data-type
=
math-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
math-block
]
:before
{
content
:
"$$"
}
.vditor-ir__node
span
[
data-type
=
code-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
code-block-open-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-open-marker
]
{
display
:
none
}
.vditor-ir__link
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-ir
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-ir
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-ir
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-ir
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-ir
pre
.vditor-reset
pre
{
margin
:
0
}
.vditor-ir
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-ir
blockquote
:empty:before
,
.vditor-ir
h1
:empty:after
,
.vditor-ir
h2
:empty:after
,
.vditor-ir
h3
:empty:after
,
.vditor-ir
h4
:empty:after
,
.vditor-ir
h5
:empty:after
,
.vditor-ir
h6
:empty:after
,
.vditor-ir
p
:empty:before
,
.vditor-ir
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-ir
.vditor-toc
:before
,
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-ir
h1
:before
,
.vditor-ir
h2
:before
,
.vditor-ir
h3
:before
,
.vditor-ir
h4
:before
,
.vditor-ir
h5
:before
,
.vditor-ir
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-ir
h2
:before
{
content
:
"H2"
}
.vditor-ir
h3
:before
{
content
:
"H3"
}
.vditor-ir
h4
:before
{
content
:
"H4"
}
.vditor-ir
h5
:before
{
content
:
"H5"
}
.vditor-ir
h6
:before
{
content
:
"H6"
}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-ir
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-ir
.vditor-toc
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
body
{
color
:
#767676
;
background
:
#f1f2f7
;
font-size
:
13px
}
a
{
color
:
#4183c4
;
text-decoration
:
none
}
a
:visited
{
color
:
#7ba9d6
}
a
:active
{
color
:
#2c5d8d
}
a
:hover
{
text-decoration
:
underline
}
.completed-ck
span
,
button
{
padding
:
6px
12px
;
margin-bottom
:
0
;
font-size
:
14px
;
font-weight
:
400
;
text-align
:
center
;
white-space
:
nowrap
;
vertical-align
:
baseline
;
cursor
:
pointer
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
background-image
:
none
;
border
:
1px
solid
#1fb5ad
;
border-radius
:
4px
;
background-color
:
#1fb5ad
;
color
:
#fff
;
height
:
auto
;
outline
:
none
;
line-height
:
18px
}
.completed-ck
span
.small
,
button
.small
{
padding
:
3px
6px
;
font-size
:
12px
}
button
:hover
{
background-color
:
#1ca59e
;
border-color
:
#1ca59e
}
.fn__margin12
{
margin
:
12px
}
@font-face
{
font-family
:
icomoon
;
src
:
url(fonts/icomoon.eot?2e0ylc)
;
src
:
url(fonts/icomoon.eot?2e0ylc#iefix)
format
(
"embedded-opentype"
),
url(fonts/icomoon.ttf?2e0ylc)
format
(
"truetype"
),
url(fonts/icomoon.woff?2e0ylc)
format
(
"woff"
),
url(fonts/icomoon.svg?2e0ylc#icomoon)
format
(
"svg"
);
font-weight
:
400
;
font-style
:
normal
;
font-display
:
block
}
[
class
*=
" icon-"
],[
class
^=
icon-
]
{
font-family
:
icomoon
!important
;
speak
:
none
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
text-transform
:
none
;
line-height
:
1
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.icon-github
:before
{
content
:
"\e900"
}
.icon-hacpai
:before
{
content
:
"\e901"
}
.icon-close
:before
{
content
:
"\e909"
}
.icon-move-down
:before
{
content
:
"\e90a"
}
.icon-move-up
:before
{
content
:
"\e90b"
}
.icon-unordered-list
:before
{
content
:
"\e004"
}
.icon-info
:before
{
content
:
"\e00d"
}
.icon-article
:before
{
content
:
"\e61d"
}
.icon-setting
:before
{
content
:
"\e604"
}
.icon-cmts
:before
{
content
:
"\e60a"
}
.icon-refresh
:before
{
content
:
"\e60b"
}
.icon-chevron-down
:before
{
content
:
"\e618"
}
.icon-chevron-up
:before
{
content
:
"\e619"
}
a
[
class
*=
" icon-"
],
a
[
class
^=
icon-
]
{
color
:
#333
}
a
[
class
*=
" icon-"
]
:hover
,
a
[
class
^=
icon-
]
:hover
{
text-decoration
:
none
;
color
:
#4183c4
}
.aboutIcon
{
background-position
:
-16px
-48px
}
.icon-move-down
,
.icon-move-up
{
cursor
:
pointer
}
#allPanel
{
height
:
auto
;
min-height
:
100%
;
position
:
relative
}
#tabsPanel
{
margin
:
50px
0
0
240px
;
padding
:
15px
;
min-height
:
100px
}
#tabsPanel
>
div
{
padding-bottom
:
36px
}
#tabsPanel_article-list
,
#tabsPanel_category-list
>
div
:first-child
,
#tabsPanel_comment-list
,
#tabsPanel_draft-list
,
#tabsPanel_link-list
>
div
:first-child
,
#tabsPanel_page-list
>
div
:first-child
,
#tabsPanel_plugin-list
,
#tabsPanel_user-list
>
div
:first-child
{
background-color
:
#fff
;
border-radius
:
4px
;
margin-bottom
:
40px
;
overflow
:
hidden
}
.tip
{
font-weight
:
700
;
margin
:
0
auto
;
overflow
:
hidden
;
padding
:
2px
0
;
position
:
fixed
;
text-align
:
center
;
top
:
3px
;
left
:
255px
;
z-index
:
1001
}
#loadMsg
,
#tipMsg
{
color
:
#31708f
;
background-color
:
#d9edf7
;
border-radius
:
4px
;
line-height
:
40px
;
display
:
inline-block
}
.footer
{
bottom
:
12px
;
position
:
absolute
;
text-align
:
center
;
width
:
100%
;
padding-left
:
240px
;
box-sizing
:
border-box
}
#top
{
height
:
50px
;
position
:
fixed
;
box-shadow
:
1px
0
3px
rgba
(
0
,
0
,
0
,
.15
);
width
:
100%
;
top
:
0
;
background-color
:
#fff
;
z-index
:
80
}
#top
>
a
{
background
:
#1fb5ad
;
float
:
left
;
width
:
240px
;
height
:
50px
;
position
:
relative
;
color
:
#f7f7f7
;
text-align
:
center
;
text-decoration
:
none
;
font-size
:
20px
;
line-height
:
50px
}
#top
>
.fn__right
a
{
color
:
#555
;
line-height
:
32px
;
margin
:
8px
10px
;
border
:
1px
solid
#f6f6f6
;
background-color
:
#f6f6f6
;
border-radius
:
100px
;
padding
:
0
10px
;
text-decoration
:
none
;
display
:
inline-block
}
#top
>
.fn__right
a
:hover
{
color
:
#333
}
#top
.avatar
{
height
:
25px
;
width
:
25px
;
border-radius
:
20px
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
float
:
left
;
margin
:
3px
6px
0
0
}
#tabs
{
height
:
100%
;
width
:
240px
;
margin-top
:
50px
;
position
:
fixed
;
top
:
0
;
background-color
:
#32323a
;
overflow
:
auto
;
z-index
:
1
}
#tabs
::-webkit-scrollbar
{
display
:
none
}
#tabs
ul
{
list-style
:
none
}
#tabs
li
{
margin-left
:
0
;
border-bottom
:
1px
solid
hsla
(
0
,
0%
,
100%
,
.05
)}
#tabs
#tabArticleTitle
,
#tabs
#tabToolsTitle
,
#tabs
li
>
div
>
a
{
color
:
#aeb2b7
;
display
:
block
;
text-decoration
:
none
;
letter-spacing
:
1px
;
padding
:
18px
0
18px
25px
;
line-height
:
18px
;
height
:
18px
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
cursor
:
pointer
}
#tabs
#tabArticleTitle
.tab-current
,
#tabs
#tabArticleTitle
:hover
,
#tabs
#tabToolsTitle
.tab-current
,
#tabs
#tabToolsTitle
:hover
,
#tabs
a
.tab-current
,
#tabs
a
:hover
{
background-color
:
#28282e
;
color
:
#1fb5ad
}
#tabs
li
li
{
border-bottom
:
0
}
#tabs
li
li
>
div
>
a
{
padding
:
13px
0
13px
46px
;
line-height
:
15px
;
height
:
15px
;
background-color
:
#28282e
}
#tabs
li
li
>
div
>
a
.tab-current
,
#tabs
li
li
>
div
>
a
:hover
{
background-color
:
#202025
}
#tabs
.aboutIcon
,
#tabs
.commentIcon
,
#tabs
.postIcon
,
#tabs
.preferenceIcon
,
#tabs
.usersIcon
{
display
:
none
}
#tabs
.icon-chevron-down
,
#tabs
.icon-chevron-up
{
margin-right
:
10px
}
.sub-tabs
{
background-color
:
#e0e1e7
;
border-radius
:
4px
4px
0
0
;
overflow
:
hidden
}
.sub-tabs
ul
{
float
:
left
;
list-style
:
none
outside
none
;
margin-right
:
24px
}
.sub-tabs
li
{
float
:
left
;
margin
:
0
}
.sub-tabs
li
a
{
border-right
:
1px
solid
#e0e1e7
;
color
:
#898989
;
display
:
block
;
line-height
:
18px
;
padding
:
20px
15px
;
text-decoration
:
none
}
.sub-tabs
.tab-current
,
.sub-tabs
.tab-current
:hover
,
.sub-tabs
a
:hover
{
background-color
:
#fff
;
color
:
#1fb5ad
}
.sub-tabs-main
{
background-color
:
#fff
;
padding
:
15px
;
border-radius
:
0
0
4px
4px
}
.form
>
div
{
margin
:
15px
0
}
.form
label
{
margin-bottom
:
10px
;
display
:
inline-block
}
.form
label
.checkbox
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
;
margin
:
11px
0
}
.form
label
.checkbox
input
{
height
:
auto
}
.form
input
[
type
=
password
],
.form
input
[
type
=
text
],
.form
select
,
.form
textarea
{
font-size
:
14px
;
outline
:
medium
none
;
width
:
100%
;
padding
:
6px
12px
;
height
:
34px
;
box-sizing
:
border-box
;
border
:
1px
solid
#e2e2e4
;
color
:
#333
;
border-radius
:
4px
;
-webkit-transition
:
border-color
.15s
ease-in-out
,
box-shadow
.15s
ease-in-out
;
transition
:
border-color
.15s
ease-in-out
,
box-shadow
.15s
ease-in-out
;
background-color
:
#fff
}
.form
textarea
{
height
:
auto
}
.form
input
[
type
=
password
]
:focus
,
.form
input
[
type
=
radio
]
:focus
,
.form
input
[
type
=
text
]
:focus
,
.form
textarea
:focus
{
box-shadow
:
none
;
border-color
:
#1fb5ad
}
table
.form
label
{
margin
:
10px
0
0
}
table
.form
th
{
vertical-align
:
initial
}
.module-panel
{
border-radius
:
4px
;
background-color
:
#fff
;
margin-bottom
:
20px
;
min-height
:
160px
}
.module-header
{
background
:
#fafafa
;
padding
:
15px
;
border-bottom
:
1px
solid
#eff2f7
;
border-top-left-radius
:
3px
;
border-top-right-radius
:
3px
}
.module-header
h2
{
font-size
:
13px
;
font-weight
:
400
}
.module-header
a
{
color
:
#767676
;
text-decoration
:
none
}
.module-header
a
:hover
{
color
:
#1fb5ad
}
.module-panel
.module-body
{
padding
:
15px
}
.module-panel
.module-body
li
{
padding
:
10px
;
line-height
:
18px
;
border-bottom
:
1px
solid
#ddd
}
.module-panel
.module-body
li
:hover
{
background-color
:
#fafafa
}
.module-panel
.module-body
li
a
:hover
{
text-decoration
:
none
}
.comment-title
{
background-color
:
#ececec
;
border-bottom
:
1px
solid
#dfdfdf
;
border-top
:
1px
solid
#f9f9f9
;
padding
:
3px
6px
3px
12px
;
line-height
:
24px
}
#comments
{
height
:
462px
;
overflow
:
auto
}
.article__thumbnail
{
margin
:
10px
auto
20px
;
display
:
none
;
text-align
:
center
}
.article__thumbnail
.thumbnail__img
{
background-color
:
rgba
(
0
,
0
,
0
,
.02
);
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
height
:
432px
;
width
:
768px
;
margin
:
0
auto
}
.article__thumbnail
button
{
margin-top
:
10px
}
button
#submitArticle
{
background-color
:
#fa8564
;
border-color
:
#fa8564
}
button
#submitArticle
:hover
{
background-color
:
#ec6459
;
border-color
:
#ec6459
}
#skinsPanel
{
min-width
:
328px
;
width
:
99%
}
.skinPreview
{
height
:
160px
;
width
:
280px
}
.skinItem
{
background-color
:
#fafafa
;
border-radius
:
3px
;
box-shadow
:
0
0
1px
rgba
(
0
,
0
,
0
,
.3
);
font-size
:
16px
;
line-height
:
24px
;
margin
:
10px
;
text-align
:
center
}
.skinItem
button
:first-child
{
margin-left
:
10px
}
#skinMain
.skinItem.selected
,
.skinItem
:hover
{
background-color
:
#1fb5ad
;
box-shadow
:
0
0
6px
rgba
(
0
,
0
,
0
,
.3
)}
.error-msg
,
.f-blue
{
color
:
#36c
}
.signs
button
{
margin
:
0
12px
}
.small-head
{
height
:
25px
;
width
:
25px
;
border-radius
:
20px
;
margin-right
:
5px
}
#commentTable
.table-main
td
{
vertical-align
:
top
}
.about-logo
{
margin
:
0
40px
0
20px
;
-ms-grid-row-align
:
center
;
align-self
:
center
}
.about-margin
{
font-size
:
18px
;
margin
:
20px
0
}
.about__panel
.about-list
li
{
border
:
0
;
padding
:
0
;
margin-left
:
24px
}
.about__panel
.about-list
li
:hover
{
background-color
:
#fff
;
text-decoration
:
underline
}
.ft__fade
{
color
:
rgba
(
0
,
0
,
0
,
.38
)}
.ft__green
{
color
:
#569e3d
}
.tag__select
{
position
:
relative
;
display
:
block
}
.tag__select
button
{
position
:
absolute
;
right
:
0
;
top
:
1px
;
border-radius
:
0
4px
4px
0
}
.completed-panel
{
background-color
:
#fff
;
border
:
1px
solid
#ddd
;
color
:
#00c
;
display
:
none
;
overflow
:
auto
;
padding
:
2px
;
position
:
absolute
;
z-index
:
10
;
width
:
50%
;
border-top
:
0
}
.completed-panel
a
{
display
:
block
;
text-decoration
:
none
;
line-height
:
26px
;
padding
:
0
5px
}
.completed-panel
a
.selected
{
background-color
:
#fafafa
;
color
:
#fa8564
}
.completed-ck
{
margin-top
:
9px
}
.completed-ck
span
,
.signs
button
,
.skinItem
button
{
margin
:
5px
10px
5px
0
;
display
:
inline-block
;
background-color
:
#c7cbd6
;
border-color
:
#c7cbd6
}
.completed-ck
span
:hover
,
.signs
button
:hover
,
.skinItem
button
:hover
{
background-color
:
#b0b5b9
;
border-color
:
#b0b5b9
}
.completed-ck
span
.selected
,
.signs
button
.selected
{
background-color
:
#1ca59e
;
border-color
:
#1ca59e
;
color
:
#fff
}
.dialog-background
{
background-color
:
#000
;
display
:
none
;
filter
:
alpha
(
opacity
=
30
);
height
:
100%
;
left
:
0
;
opacity
:
.3
;
position
:
fixed
;
top
:
0
;
width
:
100%
;
z-index
:
90
}
.dialog-panel
{
display
:
none
;
position
:
fixed
;
z-index
:
100
}
.dialog-title
{
color
:
#fff
;
float
:
left
;
font-size
:
12px
;
margin-left
:
12px
}
.dialog-header-bg
{
background
:
#32323a
;
border-radius
:
6px
6px
0
0
;
cursor
:
move
;
height
:
34px
;
line-height
:
34px
}
.dialog-header-bg
.icon-close
{
cursor
:
pointer
;
float
:
right
;
height
:
18px
;
margin-top
:
6px
;
padding
:
3px
;
width
:
22px
;
color
:
#1fb5ad
}
.dialog-header-bg
.icon-close
:hover
{
color
:
#1ca59e
}
.dialog-main
{
background-color
:
#fff
;
border
:
1px
solid
#d9d9d9
;
border-top
:
0
solid
silver
;
padding
:
12px
}
.paginate-pageCount
,
.paginate-paginate
a
,
.paginate-paginate
div
.button.paginate-page
,
.pagination-pages
{
border
:
1px
solid
#eff2f7
;
padding
:
6px
12px
;
cursor
:
pointer
;
float
:
left
;
line-height
:
18px
;
background
:
#eee
;
height
:
18px
;
margin-left
:
1px
;
border-radius
:
0
;
text-decoration
:
none
;
color
:
#333
}
.paginate-pageCount
,
.pagination-current-page
{
cursor
:
auto
}
.paginate-pageCount
{
margin-left
:
10px
}
.paginate-paginate
a
:hover
,
.paginate-paginate
div
.button.paginate-page
:hover
,
.pagination-current-page
,
.pagination-pages
:hover
{
border-color
:
#2eb4ad
;
background-color
:
#2eb4ad
;
color
:
#fff
}
.paginate-paginate
div
.button
{
padding
:
0
;
float
:
left
;
border
:
0
;
background
:
none
}
.paginate-inputPage
{
height
:
26px
;
width
:
24px
;
margin
:
0
5px
}
.table-main
{
margin
:
0
;
padding
:
0
;
position
:
relative
}
.table-main
table
{
word-break
:
break-all
;
word-wrap
:
break-word
;
table-layout
:
fixed
}
.table-header
{
border-bottom
:
1px
solid
#ddd
;
background-color
:
#fafafa
;
padding
:
15px
0
}
.table-header
th
{
line-height
:
18px
;
text-align
:
left
;
text-indent
:
6px
;
font-weight
:
400
}
.table-main
td
{
border-bottom
:
1px
solid
#ddd
;
color
:
#767676
;
padding
:
10px
0
}
.table-lineHover
.table-hasExpend
td
{
border-bottom
:
0
}
.table-hasExpend
a
{
color
:
#3b3e43
}
.table-hasExpend
a
:hover
{
text-decoration
:
none
;
color
:
#1fb5ad
}
.table-heiglight
td
,
.table-lineHover
td
{
background-color
:
#fafafa
;
border-right-color
:
#fafafa
}
.table-expendRow
td
{
padding
:
0
0
5px
36px
}
.table-expendRow
td
span
{
margin-left
:
60px
}
.table-expendRow
td
a
{
padding
:
1px
5px
;
font-size
:
12px
;
line-height
:
1.5
;
border-radius
:
3px
;
text-decoration
:
none
;
color
:
#fff
;
background-color
:
#c7cbd6
;
border-color
:
#c7cbd6
}
.table-expendRow
td
a
:hover
{
background-color
:
#b0b5b9
;
border-color
:
#b0b5b9
}
.table-center
{
margin
:
0
auto
}
.table-tag
{
color
:
#d54121
;
font-size
:
12px
;
font-style
:
italic
;
margin-left
:
10px
}
.navigation-icon
{
height
:
18px
;
width
:
18px
;
float
:
left
;
margin
:
-1px
10px
0
0
}
#preferenceSignButton1
,
#preferenceSignButton2
,
#preferenceSignButton3
{
margin
:
10px
0
}
#tabPreferencePanel_setting
label
,
#tabPreferencePanel
label
,
.form__no-table
label
{
width
:
100%
;
margin-top
:
10px
;
font-weight
:
700
}
.page-list__label
{
width
:
100%
}
.search-btn
{
position
:
absolute
;
top
:
28px
;
right
:
27px
;
border-radius
:
0
4px
4px
0
}
.vditor-toolbar
label
{
margin-bottom
:
0
}
.vditor
.vditor-textarea
{
border
:
0
;
resize
:
none
;
padding
:
10px
;
box-sizing
:
border-box
;
background-color
:
#fafbfc
;
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
#24292e
;
border-radius
:
0
0
3px
3px
}
@media
(
max-width
:
768px
){
#top
>
a
{
display
:
none
}
#tabsPanel
{
margin-left
:
0
}
.footer
{
padding-left
:
0
}
.skinPreview
{
width
:
100%
;
height
:
auto
;
margin
:
0
}
.tip
{
left
:
12px
}
#tabs
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
left
:
-240px
;
z-index
:
100
}
.top__menu
{
font-size
:
22px
;
margin
:
12px
;
float
:
left
}
.fn__flex
,
.top__menu
{
display
:
block
}
#permalink
{
margin
:
0
!important
}
.permalink__label
{
margin-bottom
:
10px
!important
}
.article-commentable__panel
,
.viewpwd__panel
{
float
:
none
}
#viewPwd
{
width
:
100%
!important
}
.viewpwd__panel
label
{
margin-top
:
20px
}
.signs
label
{
width
:
100%
}
.table-expendRow
td
{
padding-left
:
10px
}
.about-margin
{
margin-bottom
:
10px
}
.about__iframe
{
margin
:
0
0
20px
!important
}
.about-logo
{
margin
:
0
auto
;
display
:
block
;
float
:
none
;
width
:
128px
}
.about__panel
{
margin-left
:
0
!important
}
.dialog-panel
{
left
:
0
!important
;
top
:
0
!important
;
padding
:
10px
!important
;
box-sizing
:
border-box
!important
;
width
:
100%
!important
}
.tabs__bg
{
display
:
none
;
width
:
100vw
;
height
:
100vh
;
background-color
:
rgba
(
0
,
0
,
0
,
.4
);
position
:
fixed
;
top
:
0
;
z-index
:
78
}}
\ No newline at end of file
\ No newline at end of file
src/main/resources/scss/admin.scss
View file @
c113deb8
...
@@ -304,6 +304,7 @@ a[class*=" icon-"]:hover {
...
@@ -304,6 +304,7 @@ a[class*=" icon-"]:hover {
top
:
0
;
top
:
0
;
background-color
:
#32323a
;
background-color
:
#32323a
;
overflow
:
auto
;
overflow
:
auto
;
z-index
:
1
;
&
:
:-
webkit-scrollbar
{
&
:
:-
webkit-scrollbar
{
display
:
none
;
display
:
none
;
}
}
...
...
src/main/resources/skins/Casper/css/base.css
View file @
c113deb8
html
{
-webkit-text-size-adjust
:
100%
;
-ms-text-size-adjust
:
100%
;
height
:
100%
}
body
{
margin
:
0
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
font-size
:
14px
;
background-color
:
#fff
;
-webkit-font-smoothing
:
antialiased
;
-webkit-overflow-scrolling
:
touch
}
::-moz-selection
{
background
:
rgba
(
65
,
131
,
196
,
.4
)}
::selection
{
background
:
rgba
(
66
,
133
,
244
,
.4
)}
ol
,
ul
{
padding
:
0
}
dd
,
dl
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
ol
,
p
,
ul
{
margin
:
0
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
nav
,
section
{
display
:
block
}
audio
,
canvas
,
video
{
display
:
inline-block
}
audio
:not
([
controls
])
{
display
:
none
}
a
{
outline
:
0
;
text-decoration
:
none
}
a
:hover
{
text-decoration
:
underline
}
sub
,
sup
{
position
:
relative
;
font-size
:
75%
;
line-height
:
0
;
vertical-align
:
baseline
}
sup
{
top
:
-.5em
}
sub
{
bottom
:
-.25em
}
img
{
max-width
:
100%
;
vertical-align
:
middle
;
border
:
0
;
height
:
auto
;
-ms-interpolation-mode
:
bicubic
;
overflow
:
hidden
;
font-size
:
12px
}
button
,
input
,
select
,
textarea
{
margin
:
0
;
font-size
:
100%
;
vertical-align
:
middle
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
outline
:
none
}
button
,
input
{
line-height
:
normal
}
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
padding
:
0
;
border
:
0
}
button
,
input
[
type
=
button
],
input
[
type
=
reset
],
input
[
type
=
submit
]
{
cursor
:
pointer
;
-webkit-appearance
:
button
}
input
[
type
=
search
]
{
box-sizing
:
content-box
;
-webkit-appearance
:
textfield
}
input
[
type
=
search
]
::-webkit-search-cancel-button
,
input
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
textarea
{
overflow
:
auto
;
resize
:
vertical
}
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
14px
;
height
:
14px
}
blockquote
{
margin
:
0
}
.user__site
:hover
{
text-decoration
:
none
}
.article__toc
{
overflow
:
auto
}
.article__toc
::-webkit-scrollbar
{
display
:
none
}
.article__toc
li
{
list-style-type
:
none
}
.article__toc
li
a
{
padding-left
:
10px
;
display
:
block
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.article__toc
li
a
:hover
{
text-decoration
:
none
}
.article__toc
li
.toc__h3
a
{
padding-left
:
20px
}
.article__toc
li
.toc__h4
a
{
padding-left
:
30px
}
.article__toc
li
.toc__h5
a
{
padding-left
:
40px
}
.fn__flex
{
display
:
-webkit-box
;
display
:
flex
}
.fn__flex-center
{
-ms-grid-row-align
:
center
;
align-self
:
center
}
.fn__flex-inline
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.fn__flex-1
{
-webkit-box-flex
:
1
;
flex
:
1
;
min-width
:
1px
}
.fn__flex-column
{
min-height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
}
.fn__pointer
{
cursor
:
pointer
}
.fn__clear
:after
,
.fn__clear
:before
{
display
:
table
;
content
:
""
}
.fn__clear
:after
{
clear
:
both
}
.fn__left
{
float
:
left
}
.fn__right
{
float
:
right
}
.fn__none
{
display
:
none
}
.fn__hidden
{
visibility
:
hidden
}
.fn__ellipsis
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-wrap
:
normal
}
.ft__13
{
font-size
:
13px
}
.ft__smaller
{
font-size
:
12px
}
.ft__center
{
text-align
:
center
}
.ft__nowrap
{
white-space
:
nowrap
}
#nprogress
{
pointer-events
:
none
}
#nprogress
.bar
{
background
:
#d23f31
;
position
:
fixed
;
z-index
:
1031
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
2px
}
#nprogress
.peg
{
display
:
block
;
position
:
absolute
;
right
:
0
;
width
:
100px
;
height
:
100%
;
box-shadow
:
0
0
10px
#d23f31
,
0
0
5px
#d23f31
;
opacity
:
1
;
-webkit-transform
:
rotate
(
3deg
)
translateY
(
-4px
);
-ms-transform
:
rotate
(
3deg
)
translateY
(
-4px
);
transform
:
rotate
(
3deg
)
translateY
(
-4px
)}
#nprogress
.spinner
{
display
:
block
;
position
:
fixed
;
z-index
:
1031
;
top
:
15px
;
right
:
15px
}
#nprogress
.spinner-icon
{
width
:
18px
;
height
:
18px
;
box-sizing
:
border-box
;
border-color
:
#d23f31
transparent
transparent
#d23f31
;
border-style
:
solid
;
border-width
:
2px
;
border-radius
:
50%
;
-webkit-animation
:
nprogress-spinner
.4s
linear
infinite
;
animation
:
nprogress-spinner
.4s
linear
infinite
}
.nprogress-custom-parent
{
overflow
:
hidden
;
position
:
relative
}
.nprogress-custom-parent
#nprogress
.bar
,
.nprogress-custom-parent
#nprogress
.spinner
{
position
:
absolute
}
@-webkit-keyframes
nprogress-spinner
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
1turn
)}}
@keyframes
nprogress-spinner
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
1turn
);
transform
:
rotate
(
1turn
)}}
.vditor
,
.vditor-reset
{
--border-color
:
#d1d5da
;
--second-color
:
rgba
(
88
,
96
,
105
,
0.36
);
--panel-background-color
:
#fff
;
--toolbar-background-color
:
#f6f8fa
;
--toolbar-icon-color
:
#586069
;
--toolbar-icon-hover-color
:
#4285f4
;
--textarea-background-color
:
#fafbfc
;
--textarea-text-color
:
#24292e
;
--resize-icon-color
:
var
(
--toolbar-icon-color
);
--resize-background-color
:
var
(
--toolbar-background-color
);
--resize-hover-icon-color
:
var
(
--panel-background-color
);
--resize-hover-background-color
:
var
(
--toolbar-icon-hover-color
);
--code-background-color
:
rgba
(
27
,
31
,
35
,
0.05
);
--preview-background-color
:
rgba
(
27
,
31
,
35
,
0.02
);
--heading-border-color
:
#eaecef
;
--blockquote-color
:
#6a737d
;
--ir-heading-color
:
#660e7a
;
--ir-title-color
:
grey
;
--ir-bi-color
:
navy
;
--ir-link-color
:
green
;
--ir-bracket-color
:
#00f
;
--ir-paren-color
:
green
}
.vditor--dark
,
.vditor-reset--dark
{
--border-color
:
#141414
;
--second-color
:
hsla
(
0
,
0%
,
72.5%
,
0.36
);
--panel-background-color
:
#24292e
;
--toolbar-background-color
:
#1d2125
;
--toolbar-icon-color
:
#b9b9b9
;
--toolbar-icon-hover-color
:
#fff
;
--textarea-background-color
:
#2f363d
;
--textarea-text-color
:
#d1d5da
;
--resize-icon-color
:
var
(
--border-color
);
--resize-background-color
:
var
(
--second-color
);
--resize-hover-icon-color
:
var
(
--toolbar-icon-hover-color
);
--resize-hover-background-color
:
hsla
(
0
,
0%
,
72.5%
,
0.86
);
--code-background-color
:
rgba
(
66
,
133
,
244
,
0.36
);
--preview-background-color
:
rgba
(
120
,
146
,
190
,
0.55
);
--heading-border-color
:
var
(
--textarea-text-color
);
--blockquote-color
:
var
(
--toolbar-icon-color
);
--ir-heading-color
:
#9876aa
;
--ir-title-color
:
grey
;
--ir-bi-color
:
#cc7832
;
--ir-link-color
:
#ffc66d
;
--ir-bracket-color
:
#287bde
;
--ir-paren-color
:
#6a8759
}
@-webkit-keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
.vditor-tooltipped
{
position
:
relative
;
cursor
:
pointer
}
.vditor-tooltipped
:after
{
z-index
:
1000000
;
padding
:
5px
8px
;
font-size
:
11px
;
font-weight
:
400
;
-webkit-font-smoothing
:
subpixel-antialiased
;
color
:
#fff
;
text-align
:
center
;
text-decoration
:
none
;
text-shadow
:
none
;
text-transform
:
none
;
letter-spacing
:
normal
;
word-wrap
:
break-word
;
white-space
:
pre
;
content
:
attr
(
aria-label
);
background
:
#3b3e43
;
border-radius
:
3px
;
line-height
:
16px
}
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
position
:
absolute
;
display
:
none
;
pointer-events
:
none
;
opacity
:
0
}
.vditor-tooltipped
:before
{
z-index
:
1000001
;
width
:
0
;
height
:
0
;
color
:
#3b3e43
;
content
:
""
;
border
:
5px
solid
transparent
}
.vditor-tooltipped--hover
:after
,
.vditor-tooltipped--hover
:before
,
.vditor-tooltipped
:active:after
,
.vditor-tooltipped
:active:before
,
.vditor-tooltipped
:focus:after
,
.vditor-tooltipped
:focus:before
,
.vditor-tooltipped
:hover:after
,
.vditor-tooltipped
:hover:before
{
display
:
inline-block
;
text-decoration
:
none
;
-webkit-animation-name
:
tooltip-appear
;
animation-name
:
tooltip-appear
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
.vditor-tooltipped__s
:after
,
.vditor-tooltipped__se
:after
,
.vditor-tooltipped__sw
:after
{
top
:
100%
;
right
:
50%
;
margin-top
:
5px
}
.vditor-tooltipped__s
:before
,
.vditor-tooltipped__se
:before
,
.vditor-tooltipped__sw
:before
{
top
:
auto
;
right
:
50%
;
bottom
:
-5px
;
margin-right
:
-5px
;
border-bottom-color
:
#3b3e43
}
.vditor-tooltipped__se
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__sw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__ne
:after
,
.vditor-tooltipped__nw
:after
{
right
:
50%
;
bottom
:
100%
;
margin-bottom
:
5px
}
.vditor-tooltipped__n
:before
,
.vditor-tooltipped__ne
:before
,
.vditor-tooltipped__nw
:before
{
top
:
-5px
;
right
:
50%
;
bottom
:
auto
;
margin-right
:
-5px
;
border-top-color
:
#3b3e43
}
.vditor-tooltipped__ne
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__nw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__s
:after
{
-webkit-transform
:
translateX
(
50%
);
transform
:
translateX
(
50%
)}
.vditor-tooltipped__w
:after
{
right
:
100%
;
bottom
:
50%
;
margin-right
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__w
:before
{
top
:
50%
;
bottom
:
50%
;
left
:
-5px
;
margin-top
:
-5px
;
border-left-color
:
#3b3e43
}
.vditor-tooltipped__e
:after
{
bottom
:
50%
;
left
:
100%
;
margin-left
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__e
:before
{
top
:
50%
;
right
:
-5px
;
bottom
:
50%
;
margin-top
:
-5px
;
border-right-color
:
#3b3e43
}
@media
screen
and
(
max-width
:
520px
){
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
content
:
none
}}
@-webkit-keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
.vditor-panel
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
;
z-index
:
3
;
font-size
:
14px
;
display
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
max-width
:
320px
;
min-width
:
80px
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-name
:
scale-in
;
animation-name
:
scale-in
;
-webkit-animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
color
:
var
(
--toolbar-icon-color
)}
.vditor-panel--none
{
padding
:
0
;
-webkit-animation
:
none
;
animation
:
none
;
min-width
:
auto
;
max-width
:
none
;
white-space
:
nowrap
}
.vditor-input
{
border
:
0
;
padding
:
3px
5px
;
background-color
:
var
(
--panel-background-color
);
font-size
:
12px
;
color
:
var
(
--textarea-text-color
)}
.vditor-input
:focus
{
background-color
:
var
(
--toolbar-background-color
);
outline
:
none
}
.vditor-icon
{
color
:
var
(
--toolbar-icon-color
);
cursor
:
pointer
;
float
:
left
;
padding
:
4px
5px
;
height
:
21px
;
width
:
23px
;
background-color
:
transparent
;
border
:
0
;
box-sizing
:
border-box
}
.vditor-icon--current
,
.vditor-icon
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
transparent
}
.vditor-icon
:focus
{
outline
:
none
}
.vditor-icon
svg
{
height
:
13px
!important
;
width
:
13px
!important
;
float
:
left
;
fill
:
currentColor
;
pointer-events
:
none
}
.vditor-toolbar
{
background-color
:
var
(
--toolbar-background-color
);
border-bottom
:
1px
solid
var
(
--border-color
);
padding
:
0
5px
;
line-height
:
1
}
.vditor-toolbar--pin
{
position
:
-webkit-sticky
;
position
:
sticky
;
top
:
0
;
z-index
:
1
}
.vditor-toolbar--hide
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
height
:
5px
;
overflow
:
hidden
}
.vditor-toolbar--hide
:hover
{
background-color
:
var
(
--toolbar-background-color
);
height
:
auto
;
overflow
:
visible
}
.vditor-toolbar__item
{
float
:
left
;
position
:
relative
}
.vditor-toolbar__item
.vditor-tooltipped
{
color
:
var
(
--toolbar-icon-color
);
border
:
0
;
padding
:
10px
5px
;
background-color
:
transparent
;
height
:
35px
;
width
:
25px
;
box-sizing
:
border-box
}
.vditor-toolbar__item
.vditor-tooltipped
:focus
{
outline
:
none
}
.vditor-toolbar__item
.vditor-tooltipped
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-toolbar__item
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
15px
;
height
:
15px
}
.vditor-toolbar__item
input
{
position
:
absolute
;
width
:
25px
;
height
:
35px
;
top
:
0
;
left
:
0
;
cursor
:
pointer
;
opacity
:
.001
;
overflow
:
hidden
}
.vditor-toolbar__divider
{
float
:
left
;
width
:
16px
;
height
:
35px
}
.vditor-toolbar__br
{
width
:
100%
;
padding
:
0
!important
;
height
:
0
!important
}
.vditor-menu--current
svg
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-menu--disabled
svg
{
color
:
var
(
--second-color
);
cursor
:
not-allowed
}
.vditor-emojis
{
display
:
inline-block
;
overflow
:
auto
}
.vditor-emojis
::-webkit-scrollbar
{
display
:
none
}
.vditor-emojis__tip
{
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
200px
;
margin-right
:
10px
;
color
:
var
(
--toolbar-icon-color
);
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
}
.vditor-emojis__tail
{
margin-top
:
5px
;
font-size
:
12px
;
color
:
var
(
--toolbar-icon-color
);
display
:
-webkit-box
;
display
:
flex
}
.vditor-emojis__tail
a
{
text-decoration
:
none
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-emojis__tail
a
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-emojis
button
{
cursor
:
pointer
;
border-radius
:
3px
;
float
:
left
;
height
:
30px
;
width
:
30px
;
text-align
:
center
;
line-height
:
26px
;
padding
:
3px
;
box-sizing
:
border-box
;
font-size
:
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
border
:
0
;
margin
:
0
;
background-color
:
transparent
;
overflow
:
hidden
}
.vditor-emojis
button
:focus
{
outline
:
none
}
.vditor-emojis
button
:hover
.vditor-emojis__icon
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.vditor-emojis
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin
:
3px
0
0
3px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-toolbar__item
.vditor-tooltipped
{
padding
:
10px
8px
;
width
:
31px
;
margin
:
0
4px
}}
@-webkit-keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.vditor
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-sizing
:
border-box
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
}
.vditor--fullscreen
{
position
:
fixed
;
top
:
0
;
width
:
100%
!important
;
left
:
0
;
height
:
100vh
!important
;
z-index
:
90
;
border-radius
:
0
}
.vditor-content
{
display
:
-webkit-box
;
display
:
flex
;
min-height
:
60px
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
{
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
margin
:
0
1px
0
0
;
height
:
100%
;
overflow
:
auto
;
width
:
100%
;
-webkit-box-flex
:
1
;
flex
:
1
;
border
:
0
;
resize
:
none
;
padding
:
10px
9px
10px
10px
;
box-sizing
:
border-box
;
background-color
:
var
(
--panel-background-color
);
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
var
(
--textarea-text-color
);
border-radius
:
0
0
3px
3px
;
font-variant-ligatures
:
no-common-ligatures
;
white-space
:
pre-wrap
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.vditor-textarea
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-textarea
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-textarea
:focus
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-preview
{
-webkit-box-flex
:
1
;
flex
:
1
;
overflow
:
auto
;
margin-left
:
-1px
;
border-left
:
1px
solid
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
background-color
:
var
(
--textarea-background-color
);
padding
:
10px
}
.vditor-preview
>
div
::-webkit-scrollbar
{
display
:
none
}
.vditor-preview
>
.vditor-reset
{
margin
:
0
auto
}
.vditor-devtools
{
display
:
none
;
background-color
:
var
(
--textarea-background-color
);
overflow
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
;
box-shadow
:
inset
1px
0
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
padding
:
10px
}
.vditor-counter
{
padding
:
3px
;
color
:
var
(
--toolbar-icon-color
);
background-color
:
var
(
--code-background-color
);
border-radius
:
3px
;
font-size
:
12px
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
float
:
right
;
margin
:
8px
3px
0
0
}
.vditor-counter--error
{
color
:
#d23f31
;
background-color
:
rgba
(
210
,
63
,
49
,
.1
)}
.vditor-resize
{
padding
:
3px
0
;
cursor
:
row-resize
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
position
:
absolute
;
width
:
100%
}
.vditor-resize--top
{
top
:
-3px
}
.vditor-resize--bottom
{
bottom
:
-3px
}
.vditor-resize
>
div
{
height
:
3px
;
background-color
:
var
(
--resize-background-color
);
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-resize--selected
>
div
,
.vditor-resize
:hover
>
div
{
background-color
:
var
(
--resize-hover-background-color
)}
.vditor-resize--selected
svg
,
.vditor-resize
:hover
svg
{
color
:
var
(
--resize-hover-icon-color
)}
.vditor-resize
svg
{
fill
:
currentColor
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
13px
;
height
:
3px
;
display
:
block
;
margin
:
0
auto
;
color
:
var
(
--resize-icon-color
)}
.vditor-upload
{
position
:
absolute
;
height
:
3px
;
left
:
0
;
top
:
-2px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
background-color
:
#4285f4
}
.vditor-tip
{
position
:
absolute
;
font-size
:
12px
;
top
:
10px
;
color
:
var
(
--toolbar-icon-color
);
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
left
:
50%
}
.vditor-tip--show
{
display
:
block
;
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
}
.vditor-tip__content
{
text-align
:
left
;
display
:
inline-block
;
line-height
:
16px
;
padding
:
3px
10px
;
border-radius
:
3px
;
background
:
var
(
--toolbar-icon-color
);
position
:
relative
;
margin-left
:
-50%
;
color
:
var
(
--toolbar-background-color
)}
.vditor-tip__content
ul
{
margin
:
2px
0
;
padding
:
0
0
0
18px
}
.vditor-tip__close
{
position
:
absolute
;
color
:
var
(
--toolbar-icon-color
);
top
:
-7px
;
right
:
-15px
;
font-weight
:
700
;
cursor
:
pointer
}
.vditor-tip__close
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-arrow
:before
{
position
:
absolute
;
width
:
0
;
height
:
0
;
pointer-events
:
none
;
content
:
" "
;
top
:
-14px
;
left
:
5px
;
border
:
7px
solid
transparent
;
border-bottom
:
7px
solid
var
(
--panel-background-color
)}
.vditor-outline
{
min-width
:
250px
;
width
:
250px
;
border-right
:
1px
solid
var
(
--border-color
);
background-color
:
var
(
--panel-background-color
);
display
:
none
}
.vditor-outline__item
{
padding
:
5px
10px
;
cursor
:
pointer
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.vditor-outline__item
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
var
(
--toolbar-background-color
)}
.vditor-outline__panel
{
position
:
-webkit-sticky
;
position
:
sticky
;
overflow
:
auto
;
top
:
35px
;
padding-bottom
:
10px
;
color
:
var
(
--textarea-text-color
);
box-sizing
:
border-box
}
.vditor-outline__panel
::-webkit-scrollbar
{
display
:
none
}
.vditor-outline__title
{
border-bottom
:
1px
dashed
var
(
--border-color
);
padding
:
5px
10px
;
color
:
var
(
--toolbar-icon-color
);
font-size
:
12px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-arrow
:before
{
left
:
12px
}}
.vditor-hint
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
0
;
z-index
:
4
;
line-height
:
20px
;
list-style
:
none
;
font-size
:
12px
;
margin
:
0
;
max-width
:
250px
;
min-width
:
80px
;
display
:
none
}
.vditor-hint
button
{
color
:
var
(
--toolbar-icon-color
);
display
:
block
;
padding
:
3px
10px
;
border
:
0
;
border-radius
:
0
;
border-bottom
:
1px
solid
var
(
--border-color
);
line-height
:
20px
;
width
:
100%
;
box-sizing
:
border-box
;
text-align
:
left
;
margin
:
0
;
background-color
:
transparent
;
cursor
:
pointer
;
white-space
:
nowrap
}
.vditor-hint
button
:last-child
{
border-bottom
:
0
}
.vditor-hint
button
:focus
{
outline
:
none
}
.vditor-hint--current
,
.vditor-hint
button
:hover
{
background-color
:
var
(
--toolbar-background-color
)
!important
;
color
:
var
(
--toolbar-icon-hover-color
)
!important
}
.vditor-hint__emoji
{
font-size
:
16px
;
float
:
left
;
margin-right
:
3px
}
.vditor-hint
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin-right
:
3px
}
.vditor-reset
{
color
:
var
(
--textarea-text-color
);
font-variant-ligatures
:
no-common-ligatures
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-wrap
:
break-word
;
overflow
:
auto
;
line-height
:
1.5
;
font-size
:
16px
;
word-break
:
break-word
}
.vditor-reset--anchor
{
padding-left
:
20px
}
.vditor-reset--error
{
color
:
#d23f31
;
font-size
:
12px
;
display
:
block
;
line-height
:
16px
}
.vditor-reset--dark
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-reset--dark
a
{
color
:
#4285f4
}
.vditor-reset
ul
ul
ul
{
list-style-type
:
square
}
.vditor-reset
ul
ul
{
list-style-type
:
circle
}
.vditor-reset
ul
{
list-style-type
:
disc
}
.vditor-reset
ol
,
.vditor-reset
ul
{
padding-left
:
2em
;
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
li
+
li
{
margin-top
:
.25em
}
.vditor-reset
audio
{
max-width
:
100%
}
.vditor-reset
audio
:focus
{
outline
:
none
}
.vditor-reset
video
{
max-height
:
90vh
;
max-width
:
100%
}
.vditor-reset
img
{
max-width
:
100%
}
.vditor-reset
img
.emoji
{
cursor
:
auto
;
max-width
:
20px
;
vertical-align
:
sub
}
.vditor-reset
h1
,
.vditor-reset
h2
,
.vditor-reset
h3
,
.vditor-reset
h4
,
.vditor-reset
h5
,
.vditor-reset
h6
{
margin-top
:
24px
;
margin-bottom
:
16px
;
font-weight
:
600
;
line-height
:
1.25
}
.vditor-reset
h1
:hover
.vditor-anchor
svg
,
.vditor-reset
h2
:hover
.vditor-anchor
svg
,
.vditor-reset
h3
:hover
.vditor-anchor
svg
,
.vditor-reset
h4
:hover
.vditor-anchor
svg
,
.vditor-reset
h5
:hover
.vditor-anchor
svg
,
.vditor-reset
h6
:hover
.vditor-anchor
svg
{
visibility
:
visible
}
.vditor-reset
h1
{
font-size
:
1.7em
}
.vditor-reset
h1
,
.vditor-reset
h2
{
padding-bottom
:
.3em
;
border-bottom
:
1px
solid
var
(
--heading-border-color
)}
.vditor-reset
h2
{
font-size
:
1.5em
}
.vditor-reset
h3
{
font-size
:
1.25em
}
.vditor-reset
h4
{
font-size
:
1em
}
.vditor-reset
h5
{
font-size
:
.875em
}
.vditor-reset
h6
{
font-size
:
.85em
}
.vditor-reset
hr
{
height
:
2px
;
padding
:
0
;
margin
:
24px
0
;
background-color
:
var
(
--heading-border-color
);
border
:
0
}
.vditor-reset
p
{
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
blockquote
{
padding
:
0
1em
;
color
:
var
(
--blockquote-color
);
border-left
:
.25em
solid
var
(
--heading-border-color
);
margin
:
0
0
16px
}
.vditor-reset
blockquote
>
:first-child
{
margin-top
:
0
}
.vditor-reset
blockquote
>
:last-child
{
margin-bottom
:
0
}
.vditor-reset
ins
>
iframe
{
border
:
0
}
.vditor-reset
iframe
{
border
:
1px
solid
var
(
--border-color
);
max-width
:
100%
;
box-sizing
:
border-box
}
.vditor-reset
iframe
.iframe__video
{
min-width
:
80%
;
min-height
:
36vh
}
.vditor-reset
table
{
border-collapse
:
collapse
;
empty-cells
:
show
;
margin-bottom
:
16px
;
overflow
:
auto
;
border-spacing
:
0
}
.vditor-reset
table
tr
{
background-color
:
var
(
--textarea-background-color
);
border-top
:
1px
solid
#c6cbd1
}
.vditor-reset
table
td
,
.vditor-reset
table
th
{
padding
:
6px
13px
;
border
:
1px
solid
#dfe2e5
;
word-break
:
normal
}
.vditor-reset
table
th
{
font-weight
:
600
}
.vditor-reset
table
tbody
tr
:nth-child
(
2n
)
{
background-color
:
var
(
--panel-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
padding
:
.2em
.4em
;
margin
:
0
;
font-size
:
85%
;
border-radius
:
3px
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-break
:
break-word
;
background-size
:
20px
20px
;
white-space
:
pre-wrap
;
background-color
:
var
(
--code-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-echarts
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-graphviz
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-math
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-mermaid
{
background-color
:
var
(
--preview-background-color
)}
.vditor-reset
pre
>
code
{
margin
:
0
;
font-size
:
85%
;
padding
:
.5em
;
border-radius
:
5px
;
display
:
block
;
overflow
:
auto
;
white-space
:
pre
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
background-size
:
20px
20px
;
background-image
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)
;
word-break
:
normal
;
word-wrap
:
normal
}
.vditor-reset
pre
:hover
div
.vditor-copy
{
display
:
block
}
.vditor-reset
kbd
{
display
:
inline-block
;
padding
:
3px
5px
;
font
:
11px
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
;
line-height
:
10px
;
color
:
var
(
--textarea-text-color
);
vertical-align
:
middle
;
background-color
:
var
(
--textarea-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-shadow
:
inset
0
-1px
0
var
(
--border-color
)}
.vditor-reset
summary
{
cursor
:
pointer
}
.vditor-reset
summary
:focus
{
outline
:
none
}
.vditor-reset
svg
{
height
:
auto
;
width
:
auto
;
stroke-width
:
initial
}
.vditor-reset
blockquote
:last-child
,
.vditor-reset
hr
:last-child
,
.vditor-reset
ol
:last-child
,
.vditor-reset
p
:last-child
,
.vditor-reset
pre
:last-child
,
.vditor-reset
ul
:last-child
{
margin-bottom
:
0
}
.vditor-reset
.language-echarts
{
overflow
:
hidden
;
height
:
420px
}
.vditor-reset
.language-graphviz
polygon
{
fill
:
transparent
}
.vditor-task
{
list-style
:
none
}
.vditor-task
input
{
margin
:
0
.2em
.25em
-1.6em
;
font-size
:
12px
;
vertical-align
:
middle
}
.vditor-copy
{
position
:
relative
;
display
:
none
;
z-index
:
1
}
.vditor-copy
textarea
{
position
:
absolute
;
left
:
-100000px
;
height
:
10px
}
.vditor-copy
span
{
cursor
:
pointer
;
position
:
absolute
;
right
:
.5em
;
top
:
.5em
}
.vditor-copy
svg
{
color
:
var
(
--toolbar-icon-color
);
height
:
14px
;
width
:
14px
!important
;
display
:
block
;
fill
:
currentColor
}
.vditor-linenumber
{
padding-left
:
4em
!important
;
position
:
relative
}
.vditor-linenumber__rows
{
position
:
absolute
;
pointer-events
:
none
;
top
:
.2em
;
left
:
0
;
width
:
3em
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
counter-reset
:
linenumber
}
.vditor-linenumber__rows
>
span
{
pointer-events
:
none
;
display
:
block
}
.vditor-linenumber__rows
>
span
:before
{
counter-increment
:
linenumber
;
content
:
counter
(
linenumber
);
color
:
hsla
(
0
,
4%
,
60.4%
,
.38
);
display
:
block
;
padding-right
:
1em
;
text-align
:
right
}
.vditor-speech
{
position
:
absolute
;
display
:
none
;
background-color
:
var
(
--toolbar-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
padding
:
3px
;
cursor
:
pointer
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-speech--current
,
.vditor-speech
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-speech
svg
{
height
:
14px
;
width
:
14px
;
fill
:
currentColor
;
display
:
block
;
stroke-width
:
0
;
stroke
:
currentColor
}
.vditor-anchor
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-20px
}
.vditor-anchor
svg
{
visibility
:
hidden
}
.vditor-anchor
:hover
svg
{
visibility
:
visible
}
.vditor-anchor
:focus
{
outline
:
none
}
.vditor-linkcard
{
margin
:
31px
auto
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
cursor
:
pointer
;
max-width
:
768px
;
padding
:
0
10px
}
.vditor-linkcard
a
{
border-radius
:
3px
;
background-color
:
var
(
--toolbar-background-color
);
overflow
:
hidden
;
max-height
:
250px
;
display
:
-webkit-box
;
display
:
flex
;
text-decoration
:
none
;
flex-wrap
:
wrap-reverse
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.vditor-linkcard
a
:hover
{
box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.13
),
0
3px
6px
rgba
(
0
,
0
,
0
,
.26
);
text-decoration
:
none
}
.vditor-linkcard
a
:visited
.vditor-linkcard__abstract
{
color
:
var
(
--second-color
)}
.vditor-linkcard__info
{
padding
:
10px
;
min-width
:
200px
;
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
}
.vditor-linkcard__title
{
font-size
:
14px
;
font-weight
:
400
;
color
:
var
(
--textarea-text-color
);
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.vditor-linkcard__title
img
{
cursor
:
pointer
;
height
:
20px
;
width
:
20px
;
border-radius
:
3px
;
flex-shrink
:
0
;
margin-right
:
5px
}
.vditor-linkcard__abstract
{
word-wrap
:
break-word
;
word-break
:
break-all
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
-webkit-box-orient
:
vertical
;
display
:
-webkit-box
;
font-size
:
13px
;
color
:
var
(
--toolbar-icon-color
);
margin
:
5px
0
}
.vditor-linkcard__site
{
font-size
:
12px
;
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-linkcard__image
{
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
max-width
:
250px
;
min-width
:
126px
;
cursor
:
pointer
;
background-color
:
var
(
--second-color
)}
.vditor-math
mjx-container
:focus
{
outline
:
none
;
cursor
:
context-menu
}
.vditor-footnotes__goto-ref
{
text-decoration
:
none
}
.vditor-toc
{
margin-bottom
:
16px
}
.vditor-wysiwyg
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-wysiwyg
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-wysiwyg
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-wysiwyg
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-wysiwyg
blockquote
:empty:before
,
.vditor-wysiwyg
h1
:empty:after
,
.vditor-wysiwyg
h2
:empty:after
,
.vditor-wysiwyg
h3
:empty:after
,
.vditor-wysiwyg
h4
:empty:after
,
.vditor-wysiwyg
h5
:empty:after
,
.vditor-wysiwyg
h6
:empty:after
,
.vditor-wysiwyg
p
:empty:before
,
.vditor-wysiwyg
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-wysiwyg
code
[
data-marker
=
"`"
]
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.vditor-wysiwyg__block
pre
:first-child
{
margin-bottom
:
-1em
}
.vditor-wysiwyg__block
pre
:first-child
code
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-wysiwyg__block
pre
:last-child
{
margin-bottom
:
1em
}
.vditor-wysiwyg__preview
{
cursor
:
pointer
;
white-space
:
normal
;
min-height
:
27px
}
.vditor-wysiwyg__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-wysiwyg
.vditor-toc
:before
,
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
,
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-wysiwyg
h1
:before
,
.vditor-wysiwyg
h2
:before
,
.vditor-wysiwyg
h3
:before
,
.vditor-wysiwyg
h4
:before
,
.vditor-wysiwyg
h5
:before
,
.vditor-wysiwyg
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
h2
:before
{
content
:
"H2"
}
.vditor-wysiwyg
h3
:before
{
content
:
"H3"
}
.vditor-wysiwyg
h4
:before
{
content
:
"H4"
}
.vditor-wysiwyg
h5
:before
{
content
:
"H5"
}
.vditor-wysiwyg
h6
:before
{
content
:
"H6"
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
{
content
:
"</>"
}
.vditor-wysiwyg
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-wysiwyg
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-wysiwyg
details
{
white-space
:
normal
}
.vditor-wysiwyg
span
[
data-type
=
backslash
]>
span
{
display
:
none
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
span
[
data-type
=
link-ref
],
.vditor-wysiwyg
sup
[
data-type
=
footnotes-ref
]
{
color
:
#4285f4
}
.vditor-wysiwyg
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-ir__block
[
data-type
=
html-block
]
pre
{
margin
:
1em
0
!important
}
.vditor-ir__node
[
data-type
=
code-block
]
:after
,
.vditor-ir__node
[
data-type
=
code-block
]
:before
,
.vditor-ir__node
[
data-type
=
math-block
]
:after
,
.vditor-ir__node
[
data-type
=
math-block
]
:before
{
content
:
" "
;
color
:
var
(
--second-color
)}
.vditor-ir__node
:not
(
.vditor-ir__node--expand
)
.vditor-ir__marker
{
padding
:
0
!important
}
.vditor-ir__node
[
data-type
=
footnotes-ref
],
.vditor-ir__node
[
data-type
=
link-ref
]
{
color
:
#4285f4
}
.vditor-ir__node
.vditor-ir__marker
{
width
:
0
;
overflow
:
hidden
;
display
:
inline-block
;
height
:
0
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-ir__node
.vditor-ir__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-ir__node--expand
.vditor-ir__marker
{
color
:
var
(
--second-color
);
display
:
inline
;
height
:
auto
;
width
:
auto
}
.vditor-ir__node--expand
.vditor-ir__marker--hide
{
display
:
none
}
.vditor-ir__node--expand
.vditor-ir__marker--heading
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bi
{
color
:
var
(
--ir-bi-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--link
{
color
:
var
(
--ir-link-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--title
{
color
:
var
(
--ir-title-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bracket
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir__node--expand
.vditor-ir__marker--paren
{
color
:
var
(
--ir-paren-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--info
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
{
color
:
var
(
--textarea-text-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-echarts
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-graphviz
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-math
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-mermaid
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-ir__node--expand
[
data-type
=
code-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
code-block
]
:before
{
content
:
"```"
}
.vditor-ir__node--expand
[
data-type
=
math-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
math-block
]
:before
{
content
:
"$$"
}
.vditor-ir__node
span
[
data-type
=
code-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
code-block-open-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-open-marker
]
{
display
:
none
}
.vditor-ir__link
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-ir
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-ir
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-ir
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-ir
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-ir
pre
.vditor-reset
pre
{
margin
:
0
}
.vditor-ir
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-ir
blockquote
:empty:before
,
.vditor-ir
h1
:empty:after
,
.vditor-ir
h2
:empty:after
,
.vditor-ir
h3
:empty:after
,
.vditor-ir
h4
:empty:after
,
.vditor-ir
h5
:empty:after
,
.vditor-ir
h6
:empty:after
,
.vditor-ir
p
:empty:before
,
.vditor-ir
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-ir
.vditor-toc
:before
,
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-ir
h1
:before
,
.vditor-ir
h2
:before
,
.vditor-ir
h3
:before
,
.vditor-ir
h4
:before
,
.vditor-ir
h5
:before
,
.vditor-ir
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-ir
h2
:before
{
content
:
"H2"
}
.vditor-ir
h3
:before
{
content
:
"H3"
}
.vditor-ir
h4
:before
{
content
:
"H4"
}
.vditor-ir
h5
:before
{
content
:
"H5"
}
.vditor-ir
h6
:before
{
content
:
"H6"
}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-ir
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-ir
.vditor-toc
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
body
{
background-color
:
#f4f8fb
}
::-moz-selection
{
text-shadow
:
none
;
background-color
:
#cbeafb
}
::selection
{
text-shadow
:
none
;
background-color
:
#cbeafb
}
a
{
color
:
#26a8ed
}
.ft__a
{
color
:
#738a94
}
.ft__a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.wrapper
{
max-width
:
1040px
;
margin
:
0
auto
;
padding
:
0
10px
}
.header
{
color
:
#fff
;
position
:
relative
}
.header--index
:before
{
content
:
""
;
height
:
100%
;
position
:
absolute
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
width
:
100%
;
top
:
0
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.header--article
{
background-color
:
#090a0b
;
height
:
64px
}
.header--article
.header__title
{
display
:
none
}
.header--article
.header__nav
a
{
margin-bottom
:
0
;
line-height
:
64px
}
.header--other
{
height
:
407px
}
.header--other
.header__title
{
display
:
none
}
.header--other
:before
{
content
:
""
;
height
:
100%
;
position
:
absolute
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
width
:
100%
;
top
:
0
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.header--other
.header__nav
a
{
margin-bottom
:
0
;
line-height
:
64px
}
.header__title
{
position
:
relative
;
text-align
:
center
}
.header__h1
{
font-size
:
30px
;
padding-top
:
140px
;
font-weight
:
400
}
.header__h1
img
{
height
:
32px
;
width
:
32px
;
margin-right
:
10px
}
.header__h1
a
{
color
:
#fff
}
.header__h1
a
:hover
{
text-decoration
:
none
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
)}
.header__h2
{
font-size
:
20px
;
font-weight
:
300
;
margin
:
5px
0
70px
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
);
line-height
:
24px
}
.header__nav
{
position
:
relative
}
.header__nav
a
{
font-size
:
13px
;
float
:
left
;
line-height
:
24px
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
);
margin
:
0
20px
90px
0
}
.header__nav
a
:hover
{
color
:
#fff
;
text-decoration
:
none
}
.header__nav
img
{
height
:
14px
;
width
:
14px
;
margin-right
:
5px
}
.header__nav
svg
{
margin-top
:
5px
}
.footer
{
font-size
:
13px
;
padding
:
20px
0
;
background-color
:
#090a0b
;
color
:
#fff
}
.footer
a
{
color
:
hsla
(
0
,
0%
,
100%
,
.8
)}
.footer
a
:hover
{
text-decoration
:
none
;
color
:
#fff
}
.footer
.fn__right
{
text-align
:
right
}
.articles
{
top
:
-70px
;
position
:
relative
;
flex-wrap
:
wrap
;
margin
:
0
-20px
}
.articles
,
.articles
.item
{
display
:
-webkit-box
;
display
:
flex
}
.articles
.item
{
flex
:
1
1
300px
;
overflow
:
hidden
;
margin
:
0
20px
40px
;
min-height
:
300px
;
border-radius
:
5px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
-webkit-box-orient
:
vertical
;
flex-direction
:
column
;
background-color
:
#fff
}
.articles
.item
,
.articles
.item--large
{
-webkit-box-flex
:
1
;
-webkit-box-direction
:
normal
}
.articles
.item--large
{
-webkit-box-orient
:
horizontal
;
flex-direction
:
row
;
flex
:
1
1
100%
}
.articles
.item--large
.item__cover
{
-webkit-box-flex
:
1
;
flex
:
1
;
height
:
auto
}
.articles
.item--large
.item__main
{
padding
:
30px
40px
;
width
:
357px
;
-webkit-box-flex
:
unset
;
flex
:
unset
}
.articles
.item
:hover
{
box-shadow
:
8px
28px
50px
rgba
(
39
,
44
,
49
,
.07
),
1px
6px
12px
rgba
(
39
,
44
,
49
,
.04
);
-webkit-transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
);
transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
)}
.articles
.item__cover
{
background-size
:
cover
;
background-position
:
50%
;
font-size
:
0
;
height
:
200px
}
.articles
.item__main
{
padding
:
25px
;
box-sizing
:
border-box
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-box-flex
:
1
;
flex
:
1
}
.articles
.item__tag
{
display
:
inline-block
;
margin-bottom
:
4px
;
color
:
#738a94
;
font-size
:
12px
;
line-height
:
14px
;
font-weight
:
500
;
letter-spacing
:
.5px
;
text-transform
:
uppercase
}
.articles
.item__tag
:hover
{
text-decoration
:
none
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__title
{
margin-bottom
:
10px
}
.articles
.item__title
>
a
{
color
:
#15171a
;
font-size
:
18px
;
line-height
:
24px
}
.articles
.item__title
>
a
:hover
{
text-decoration
:
none
;
color
:
rgba
(
21
,
23
,
26
,
.8
)}
.articles
.item__title
sup
{
font-size
:
12px
;
font-weight
:
400
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__title
sup
a
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
cursor
:
text
}
.articles
.item__title
sup
a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
text-decoration
:
none
}
.articles
.item__title
sup
a
:visited
{
color
:
#fff
}
.articles
.item__abstract
{
line-height
:
24px
;
color
:
#15171a
;
-webkit-box-flex
:
1
;
flex
:
1
}
.articles
.item__abstract
:hover
{
text-decoration
:
none
;
color
:
rgba
(
21
,
23
,
26
,
.8
)}
.articles
.item__meta
{
float
:
right
;
margin-top
:
18px
;
color
:
#738a94
}
.articles
.item__meta
:hover
{
text-decoration
:
none
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__avatar
{
margin-top
:
10px
;
float
:
left
}
.articles
.item__avatar
img
{
height
:
32px
;
width
:
32px
}
.pagination
{
text-align
:
center
;
margin-top
:
-70px
}
.pagination__item
{
width
:
30px
;
height
:
30px
;
background
:
#15171a
;
border-radius
:
50%
;
display
:
inline-block
;
color
:
#fff
;
line-height
:
30px
;
font-size
:
12px
;
margin
:
0
5px
40px
}
.pagination__item--active
,
.pagination__item
:hover
{
opacity
:
.68
;
text-decoration
:
none
}
.pagination__item--omit
{
background-color
:
transparent
;
color
:
#15171a
}
.article
,
.article__bottom
{
background-color
:
#fff
}
.article__bottom
{
position
:
relative
}
.article__bottom
.fn__flex
{
flex-wrap
:
wrap
;
margin
:
0
-20px
}
.article__bottom
.item
{
position
:
relative
;
-webkit-box-flex
:
1
;
flex
:
1
1
300px
;
margin
:
40px
20px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
border-radius
:
5px
;
padding
:
40px
;
overflow
:
hidden
;
text-align
:
center
;
box-sizing
:
border-box
}
.article__bottom
.item
:before
{
content
:
""
;
position
:
absolute
;
height
:
100%
;
top
:
0
;
left
:
0
;
width
:
100%
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.article__bottom
.item
h3
{
color
:
#fff
;
position
:
relative
;
margin-bottom
:
20px
}
.article__bottom
.item
ul
{
padding-left
:
0
;
position
:
relative
;
list-style
:
none
}
.article__bottom
.item
a
{
display
:
block
;
border-bottom
:
1px
solid
rgba
(
115
,
138
,
148
,
.8
);
padding
:
10px
0
;
color
:
#fff
;
margin
:
0
20px
}
.article__top
{
position
:
fixed
;
width
:
100%
;
top
:
-61px
;
background-color
:
hsla
(
0
,
0%
,
100%
,
.9
);
border-bottom
:
1px
solid
rgba
(
115
,
138
,
148
,
.1
);
height
:
60px
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
z-index
:
1
}
.article__top
.title
{
float
:
left
;
margin-left
:
20px
;
line-height
:
60px
;
font-size
:
22px
}
.article__share
{
float
:
right
;
position
:
relative
}
.article__share
.item
{
height
:
60px
;
width
:
60px
;
float
:
left
;
text-align
:
center
;
padding
:
20px
0
;
box-sizing
:
border-box
;
color
:
#fdc200
;
cursor
:
pointer
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
}
.article__share
.item
svg
{
height
:
20px
;
width
:
20px
}
.article__share
.item
[
data-type
=
wechat
]
{
color
:
#3caf36
}
.article__share
.item
[
data-type
=
wechat
]
:hover
{
background-color
:
#3caf36
}
.article__share
.item
[
data-type
=
twitter
]
{
color
:
#18a3fa
}
.article__share
.item
[
data-type
=
twitter
]
:hover
{
background-color
:
#18a3fa
}
.article__share
.item
[
data-type
=
weibo
]
{
color
:
#f93
}
.article__share
.item
[
data-type
=
weibo
]
:hover
{
background-color
:
#f93
}
.article__share
.item
:hover
{
color
:
#fff
;
background-color
:
#fdc200
}
.article__share
.item__qr
{
position
:
absolute
;
top
:
61px
;
left
:
60px
;
height
:
99px
;
width
:
99px
}
.article__progress
{
position
:
absolute
;
right
:
0
;
bottom
:
-1px
;
left
:
0
;
width
:
100%
;
height
:
2px
;
border
:
none
;
background
:
transparent
;
-webkit-appearance
:
none
}
.article__progress
::-webkit-progress-value
{
background-color
:
#26a8ed
}
.article__progress
::-webkit-progress-bar
{
background-color
:
transparent
}
.article
.item__meta
{
padding-top
:
76px
;
font-size
:
14px
;
text-transform
:
uppercase
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.article
.item__meta
a
{
color
:
#738a94
}
.article
.item__title
{
font-size
:
28px
;
margin-bottom
:
40px
}
.article
.item__title
sup
{
font-size
:
14px
;
font-weight
:
400
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.article
.item__cover
{
height
:
800px
;
background-size
:
cover
;
background-position
:
50%
;
max-width
:
1404px
;
margin
:
0
auto
;
border-radius
:
5px
;
-webkit-filter
:
sepia
(
.2
)
contrast
(
1.3
)
opacity
(
.86
);
filter
:
sepia
(
.2
)
contrast
(
1.3
)
opacity
(
.86
)}
.article
.item__content
{
padding
:
70px
100px
0
;
box-sizing
:
border-box
;
background-color
:
#fff
}
.article
.item__content--article
{
margin-top
:
-164px
;
position
:
relative
;
padding-bottom
:
30px
}
.article
.item__content--article
::-webkit-scrollbar
{
display
:
none
}
.article
.item__tip
{
margin-bottom
:
40px
;
border-radius
:
5px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
padding
:
20px
0
;
text-align
:
center
;
background
:
#f4f8fb
;
cursor
:
pointer
;
font-size
:
18px
}
.article
.item__tip
:hover
{
box-shadow
:
8px
28px
50px
rgba
(
39
,
44
,
49
,
.07
),
1px
6px
12px
rgba
(
39
,
44
,
49
,
.04
);
-webkit-transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
);
transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
)}
.post__toc
{
display
:
none
;
position
:
fixed
;
top
:
84px
;
bottom
:
80px
;
overflow
:
auto
;
padding-left
:
3px
}
.post__toc
::-webkit-scrollbar
{
display
:
none
}
.post__toc
.article__toc
{
overflow
:
initial
;
border-left
:
1px
solid
rgba
(
115
,
138
,
148
,
.28
);
margin
:
0
;
font-size
:
14px
;
line-height
:
24px
}
.post__toc
.article__toc
a
:hover
,
.post__toc
.article__toc
li
.current
a
{
color
:
#26a8ed
}
.post__toc
.article__toc
a
{
display
:
block
;
margin-top
:
-24px
;
color
:
#738a94
}
.post__toc
li
:before
{
position
:
relative
;
top
:
-2px
;
left
:
-4px
;
display
:
inline-block
;
width
:
7px
;
height
:
7px
;
content
:
""
;
border-radius
:
50%
}
.post__toc
li
.current
:before
{
background-color
:
#26a8ed
}
.comment
{
background-color
:
#f4f8fb
;
position
:
relative
}
.comment__wrapper
{
margin
:
0
auto
;
padding
:
0
100px
.1px
;
box-sizing
:
border-box
}
.comment-body-ref
{
position
:
absolute
;
left
:
80px
;
width
:
76%
}
.comment__title
{
text-align
:
center
;
padding
:
40px
0
;
color
:
#738a94
}
.comment
.item
{
margin-bottom
:
40px
;
border
:
1px
solid
hsla
(
0
,
0%
,
100%
,
.8
);
border-radius
:
5px
;
background
:
#fff
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
.04
);
list-style
:
none
;
padding
:
20px
}
.comment
.item__meta
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
font-size
:
12px
}
.comment
.item__avatar
{
float
:
left
;
height
:
40px
;
width
:
40px
;
border-radius
:
20px
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
.04
);
margin
:
0
20px
20px
0
;
background-size
:
cover
;
background-position
:
50%
}
.comment
.item__name
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
float
:
left
;
line-height
:
40px
}
.comment
.item__name
a
{
color
:
#738a94
}
.comment
.item__name
a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.comment
.item
:hover
.item__reply
{
display
:
block
}
.comment
#comments
{
position
:
relative
}
.comment
#comment
{
position
:
relative
;
margin-bottom
:
30px
;
padding
:
20px
;
border-radius
:
3px
;
background
:
#fff
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
.04
);
border
:
0
;
resize
:
none
;
cursor
:
pointer
;
width
:
100%
;
box-sizing
:
border-box
}
.other
{
position
:
relative
}
.other__title
{
margin
:
-220px
0
5px
;
font-size
:
28px
;
font-weight
:
400
}
.other__meta
,
.other__title
{
color
:
#fff
;
text-align
:
center
}
.other__meta
{
font-size
:
14px
}
.other__meta--list
{
margin-bottom
:
154px
}
.other__content
{
background-color
:
#fff
;
padding
:
70px
100px
;
margin
:
77px
auto
40px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
border-radius
:
5px
}
.other__item
{
line-height
:
20px
;
margin
:
10px
;
white-space
:
nowrap
;
display
:
block
}
.other__item--archive
{
width
:
187px
;
display
:
inline-block
}
.other__item
div
,
.other__item
span
{
color
:
#738a94
;
font-size
:
12px
;
word-break
:
break-all
;
white-space
:
normal
}
@media
(
max-width
:
768px
){
.header
{
padding
:
10px
0
}
.header__h1
{
padding-top
:
60px
}
.header__h2
{
margin-bottom
:
40px
}
.header__nav
.fn__right
{
float
:
none
}
.header__nav
a
{
margin
:
0
10px
0
0
}
.header--article
{
height
:
auto
}
.header--article
.header__nav
a
{
line-height
:
24px
}
.header--other
{
height
:
360px
}
.header--other
.header__nav
a
{
line-height
:
24px
}
.articles
{
position
:
static
;
margin
:
10px
-5px
0
}
.articles
.item
{
margin
:
0
5px
10px
}
.articles
.item--large
{
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-box-flex
:
1
;
flex
:
1
1
300px
}
.articles
.item--large
.item__cover
{
height
:
200px
}
.articles
.item--large
.item__main
{
padding
:
25px
;
width
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
}
.pagination
{
margin-top
:
0
}
.pagination
,
.pagination__item
{
margin-bottom
:
5px
}
.footer
.fn__left
,
.footer
.fn__right
{
float
:
none
;
text-align
:
center
}
.article__top
{
height
:
40px
}
.article__top
.title
{
display
:
none
}
.article__top
.toc
{
display
:
block
;
float
:
left
;
line-height
:
40px
;
padding
:
0
10px
;
cursor
:
pointer
}
.article__share
.item
{
height
:
40px
;
width
:
40px
;
padding
:
10px
0
}
.article
.item__meta
{
padding-top
:
40px
}
.article
.item__cover
{
display
:
none
}
.article
.item__content
{
padding
:
10px
10px
0
}
.article
.item__content--article
{
margin-top
:
-20px
}
.article__bottom
.fn__flex
{
margin
:
0
0
10px
}
.article__bottom
.item
{
margin
:
10px
0
0
}
.comment__title
{
padding
:
10px
0
}
.comment__wrapper
{
padding
:
0
10px
.1px
}
.comment
#comment
,
.comment
.item
{
margin-bottom
:
10px
;
padding
:
10px
}
.comment
#comment__avatar
,
.comment
.item__avatar
{
margin-bottom
:
10px
}
.other__title
{
margin-top
:
-280px
}
.other__content
{
padding
:
20px
;
margin
:
40px
auto
10px
}
.other__meta--list
{
margin-bottom
:
40px
}
.post__toc
{
left
:
0
;
background-color
:
#fff
;
width
:
100%
;
top
:
41px
;
bottom
:
0
}}
html
{
-webkit-text-size-adjust
:
100%
;
-ms-text-size-adjust
:
100%
;
height
:
100%
}
body
{
margin
:
0
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
font-size
:
14px
;
background-color
:
#fff
;
-webkit-font-smoothing
:
antialiased
;
-webkit-overflow-scrolling
:
touch
}
::-moz-selection
{
background
:
rgba
(
65
,
131
,
196
,
.4
)}
::selection
{
background
:
rgba
(
66
,
133
,
244
,
.4
)}
ol
,
ul
{
padding
:
0
}
dd
,
dl
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
ol
,
p
,
ul
{
margin
:
0
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
nav
,
section
{
display
:
block
}
audio
,
canvas
,
video
{
display
:
inline-block
}
audio
:not
([
controls
])
{
display
:
none
}
a
{
outline
:
0
;
text-decoration
:
none
}
a
:hover
{
text-decoration
:
underline
}
sub
,
sup
{
position
:
relative
;
font-size
:
75%
;
line-height
:
0
;
vertical-align
:
baseline
}
sup
{
top
:
-.5em
}
sub
{
bottom
:
-.25em
}
img
{
max-width
:
100%
;
vertical-align
:
middle
;
border
:
0
;
height
:
auto
;
-ms-interpolation-mode
:
bicubic
;
overflow
:
hidden
;
font-size
:
12px
}
button
,
input
,
select
,
textarea
{
margin
:
0
;
font-size
:
100%
;
vertical-align
:
middle
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
;
outline
:
none
}
button
,
input
{
line-height
:
normal
}
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
padding
:
0
;
border
:
0
}
button
,
input
[
type
=
button
],
input
[
type
=
reset
],
input
[
type
=
submit
]
{
cursor
:
pointer
;
-webkit-appearance
:
button
}
input
[
type
=
search
]
{
box-sizing
:
content-box
;
-webkit-appearance
:
textfield
}
input
[
type
=
search
]
::-webkit-search-cancel-button
,
input
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
textarea
{
overflow
:
auto
;
resize
:
vertical
}
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
14px
;
height
:
14px
}
blockquote
{
margin
:
0
}
.user__site
:hover
{
text-decoration
:
none
}
.article__toc
{
overflow
:
auto
}
.article__toc
::-webkit-scrollbar
{
display
:
none
}
.article__toc
li
{
list-style-type
:
none
}
.article__toc
li
a
{
padding-left
:
10px
;
display
:
block
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.article__toc
li
a
:hover
{
text-decoration
:
none
}
.article__toc
li
.toc__h3
a
{
padding-left
:
20px
}
.article__toc
li
.toc__h4
a
{
padding-left
:
30px
}
.article__toc
li
.toc__h5
a
{
padding-left
:
40px
}
.fn__flex
{
display
:
-webkit-box
;
display
:
flex
}
.fn__flex-center
{
-ms-grid-row-align
:
center
;
align-self
:
center
}
.fn__flex-inline
{
display
:
-webkit-inline-box
;
display
:
inline-flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.fn__flex-1
{
-webkit-box-flex
:
1
;
flex
:
1
;
min-width
:
1px
}
.fn__flex-column
{
min-height
:
100%
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
}
.fn__pointer
{
cursor
:
pointer
}
.fn__clear
:after
,
.fn__clear
:before
{
display
:
table
;
content
:
""
}
.fn__clear
:after
{
clear
:
both
}
.fn__left
{
float
:
left
}
.fn__right
{
float
:
right
}
.fn__none
{
display
:
none
}
.fn__hidden
{
visibility
:
hidden
}
.fn__ellipsis
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-wrap
:
normal
}
.ft__13
{
font-size
:
13px
}
.ft__smaller
{
font-size
:
12px
}
.ft__center
{
text-align
:
center
}
.ft__nowrap
{
white-space
:
nowrap
}
#nprogress
{
pointer-events
:
none
}
#nprogress
.bar
{
background
:
#d23f31
;
position
:
fixed
;
z-index
:
1031
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
2px
}
#nprogress
.peg
{
display
:
block
;
position
:
absolute
;
right
:
0
;
width
:
100px
;
height
:
100%
;
box-shadow
:
0
0
10px
#d23f31
,
0
0
5px
#d23f31
;
opacity
:
1
;
-webkit-transform
:
rotate
(
3deg
)
translateY
(
-4px
);
-ms-transform
:
rotate
(
3deg
)
translateY
(
-4px
);
transform
:
rotate
(
3deg
)
translateY
(
-4px
)}
#nprogress
.spinner
{
display
:
block
;
position
:
fixed
;
z-index
:
1031
;
top
:
15px
;
right
:
15px
}
#nprogress
.spinner-icon
{
width
:
18px
;
height
:
18px
;
box-sizing
:
border-box
;
border-color
:
#d23f31
transparent
transparent
#d23f31
;
border-style
:
solid
;
border-width
:
2px
;
border-radius
:
50%
;
-webkit-animation
:
nprogress-spinner
.4s
linear
infinite
;
animation
:
nprogress-spinner
.4s
linear
infinite
}
.nprogress-custom-parent
{
overflow
:
hidden
;
position
:
relative
}
.nprogress-custom-parent
#nprogress
.bar
,
.nprogress-custom-parent
#nprogress
.spinner
{
position
:
absolute
}
@-webkit-keyframes
nprogress-spinner
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
1turn
)}}
@keyframes
nprogress-spinner
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
1turn
);
transform
:
rotate
(
1turn
)}}
.vditor
,
.vditor-reset
{
--border-color
:
#d1d5da
;
--second-color
:
rgba
(
88
,
96
,
105
,
0.36
);
--panel-background-color
:
#fff
;
--toolbar-background-color
:
#f6f8fa
;
--toolbar-icon-color
:
#586069
;
--toolbar-icon-hover-color
:
#4285f4
;
--textarea-background-color
:
#fafbfc
;
--textarea-text-color
:
#24292e
;
--resize-icon-color
:
var
(
--toolbar-icon-color
);
--resize-background-color
:
var
(
--toolbar-background-color
);
--resize-hover-icon-color
:
var
(
--panel-background-color
);
--resize-hover-background-color
:
var
(
--toolbar-icon-hover-color
);
--code-background-color
:
rgba
(
27
,
31
,
35
,
0.05
);
--preview-background-color
:
rgba
(
27
,
31
,
35
,
0.02
);
--heading-border-color
:
#eaecef
;
--blockquote-color
:
#6a737d
;
--ir-heading-color
:
#660e7a
;
--ir-title-color
:
grey
;
--ir-bi-color
:
navy
;
--ir-link-color
:
green
;
--ir-bracket-color
:
#00f
;
--ir-paren-color
:
green
}
.vditor--dark
,
.vditor-reset--dark
{
--border-color
:
#141414
;
--second-color
:
hsla
(
0
,
0%
,
72.5%
,
0.36
);
--panel-background-color
:
#24292e
;
--toolbar-background-color
:
#1d2125
;
--toolbar-icon-color
:
#b9b9b9
;
--toolbar-icon-hover-color
:
#fff
;
--textarea-background-color
:
#2f363d
;
--textarea-text-color
:
#d1d5da
;
--resize-icon-color
:
var
(
--border-color
);
--resize-background-color
:
var
(
--second-color
);
--resize-hover-icon-color
:
var
(
--toolbar-icon-hover-color
);
--resize-hover-background-color
:
hsla
(
0
,
0%
,
72.5%
,
0.86
);
--code-background-color
:
rgba
(
66
,
133
,
244
,
0.36
);
--preview-background-color
:
rgba
(
120
,
146
,
190
,
0.55
);
--heading-border-color
:
var
(
--textarea-text-color
);
--blockquote-color
:
var
(
--toolbar-icon-color
);
--ir-heading-color
:
#9876aa
;
--ir-title-color
:
grey
;
--ir-bi-color
:
#cc7832
;
--ir-link-color
:
#ffc66d
;
--ir-bracket-color
:
#287bde
;
--ir-paren-color
:
#6a8759
}
@-webkit-keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
tooltip-appear
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
.vditor-tooltipped
{
position
:
relative
;
cursor
:
pointer
}
.vditor-tooltipped
:after
{
z-index
:
1000000
;
padding
:
5px
8px
;
font-size
:
11px
;
font-weight
:
400
;
-webkit-font-smoothing
:
subpixel-antialiased
;
color
:
#fff
;
text-align
:
center
;
text-decoration
:
none
;
text-shadow
:
none
;
text-transform
:
none
;
letter-spacing
:
normal
;
word-wrap
:
break-word
;
white-space
:
pre
;
content
:
attr
(
aria-label
);
background
:
#3b3e43
;
border-radius
:
3px
;
line-height
:
16px
}
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
position
:
absolute
;
display
:
none
;
pointer-events
:
none
;
opacity
:
0
}
.vditor-tooltipped
:before
{
z-index
:
1000001
;
width
:
0
;
height
:
0
;
color
:
#3b3e43
;
content
:
""
;
border
:
5px
solid
transparent
}
.vditor-tooltipped--hover
:after
,
.vditor-tooltipped--hover
:before
,
.vditor-tooltipped
:active:after
,
.vditor-tooltipped
:active:before
,
.vditor-tooltipped
:focus:after
,
.vditor-tooltipped
:focus:before
,
.vditor-tooltipped
:hover:after
,
.vditor-tooltipped
:hover:before
{
display
:
inline-block
;
text-decoration
:
none
;
-webkit-animation-name
:
tooltip-appear
;
animation-name
:
tooltip-appear
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
-webkit-animation-timing-function
:
ease-in
;
animation-timing-function
:
ease-in
}
.vditor-tooltipped__s
:after
,
.vditor-tooltipped__se
:after
,
.vditor-tooltipped__sw
:after
{
top
:
100%
;
right
:
50%
;
margin-top
:
5px
}
.vditor-tooltipped__s
:before
,
.vditor-tooltipped__se
:before
,
.vditor-tooltipped__sw
:before
{
top
:
auto
;
right
:
50%
;
bottom
:
-5px
;
margin-right
:
-5px
;
border-bottom-color
:
#3b3e43
}
.vditor-tooltipped__se
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__sw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__ne
:after
,
.vditor-tooltipped__nw
:after
{
right
:
50%
;
bottom
:
100%
;
margin-bottom
:
5px
}
.vditor-tooltipped__n
:before
,
.vditor-tooltipped__ne
:before
,
.vditor-tooltipped__nw
:before
{
top
:
-5px
;
right
:
50%
;
bottom
:
auto
;
margin-right
:
-5px
;
border-top-color
:
#3b3e43
}
.vditor-tooltipped__ne
:after
{
right
:
auto
;
left
:
50%
;
margin-left
:
-15px
}
.vditor-tooltipped__nw
:after
{
margin-right
:
-15px
}
.vditor-tooltipped__n
:after
,
.vditor-tooltipped__s
:after
{
-webkit-transform
:
translateX
(
50%
);
transform
:
translateX
(
50%
)}
.vditor-tooltipped__w
:after
{
right
:
100%
;
bottom
:
50%
;
margin-right
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__w
:before
{
top
:
50%
;
bottom
:
50%
;
left
:
-5px
;
margin-top
:
-5px
;
border-left-color
:
#3b3e43
}
.vditor-tooltipped__e
:after
{
bottom
:
50%
;
left
:
100%
;
margin-left
:
5px
;
-webkit-transform
:
translateY
(
50%
);
transform
:
translateY
(
50%
)}
.vditor-tooltipped__e
:before
{
top
:
50%
;
right
:
-5px
;
bottom
:
50%
;
margin-top
:
-5px
;
border-right-color
:
#3b3e43
}
@media
screen
and
(
max-width
:
520px
){
.vditor-tooltipped
:after
,
.vditor-tooltipped
:before
{
content
:
none
}}
@-webkit-keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
scale-in
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.5
);
transform
:
scale
(
.5
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
.vditor-panel
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
;
z-index
:
3
;
font-size
:
14px
;
display
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
max-width
:
320px
;
min-width
:
80px
;
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-name
:
scale-in
;
animation-name
:
scale-in
;
-webkit-animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
animation-timing-function
:
cubic-bezier
(
.2
,
0
,
.13
,
1.5
);
color
:
var
(
--toolbar-icon-color
)}
.vditor-panel--none
{
padding
:
0
;
-webkit-animation
:
none
;
animation
:
none
;
min-width
:
auto
;
max-width
:
none
;
white-space
:
nowrap
}
.vditor-input
{
border
:
0
;
padding
:
3px
5px
;
background-color
:
var
(
--panel-background-color
);
font-size
:
12px
;
color
:
var
(
--textarea-text-color
)}
.vditor-input
:focus
{
background-color
:
var
(
--toolbar-background-color
);
outline
:
none
}
.vditor-icon
{
color
:
var
(
--toolbar-icon-color
);
cursor
:
pointer
;
float
:
left
;
padding
:
4px
5px
;
height
:
21px
;
width
:
23px
;
background-color
:
transparent
;
border
:
0
;
box-sizing
:
border-box
}
.vditor-icon--current
,
.vditor-icon
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
transparent
}
.vditor-icon
:focus
{
outline
:
none
}
.vditor-icon
svg
{
height
:
13px
!important
;
width
:
13px
!important
;
float
:
left
;
fill
:
currentColor
;
pointer-events
:
none
}
.vditor-toolbar
{
background-color
:
var
(
--toolbar-background-color
);
border-bottom
:
1px
solid
var
(
--border-color
);
padding
:
0
5px
;
line-height
:
1
}
.vditor-toolbar--pin
{
position
:
-webkit-sticky
;
position
:
sticky
;
top
:
0
;
z-index
:
1
}
.vditor-toolbar--hide
{
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
height
:
5px
;
overflow
:
hidden
}
.vditor-toolbar--hide
:hover
{
background-color
:
var
(
--toolbar-background-color
);
height
:
auto
;
overflow
:
visible
}
.vditor-toolbar__item
{
float
:
left
;
position
:
relative
}
.vditor-toolbar__item
.vditor-tooltipped
{
color
:
var
(
--toolbar-icon-color
);
border
:
0
;
padding
:
10px
5px
;
background-color
:
transparent
;
height
:
35px
;
width
:
25px
;
box-sizing
:
border-box
}
.vditor-toolbar__item
.vditor-tooltipped
:focus
{
outline
:
none
}
.vditor-toolbar__item
.vditor-tooltipped
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-toolbar__item
svg
{
fill
:
currentColor
;
display
:
inline-block
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
15px
;
height
:
15px
}
.vditor-toolbar__item
input
{
position
:
absolute
;
width
:
25px
;
height
:
35px
;
top
:
0
;
left
:
0
;
cursor
:
pointer
;
opacity
:
.001
;
overflow
:
hidden
}
.vditor-toolbar__divider
{
float
:
left
;
width
:
16px
;
height
:
35px
}
.vditor-toolbar__br
{
width
:
100%
;
padding
:
0
!important
;
height
:
0
!important
}
.vditor-menu--current
svg
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-menu--disabled
svg
{
color
:
var
(
--second-color
);
cursor
:
not-allowed
}
.vditor-emojis
{
display
:
inline-block
;
overflow
:
auto
}
.vditor-emojis
::-webkit-scrollbar
{
display
:
none
}
.vditor-emojis__tip
{
-webkit-box-flex
:
1
;
flex
:
1
;
width
:
200px
;
margin-right
:
10px
;
color
:
var
(
--toolbar-icon-color
);
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
}
.vditor-emojis__tail
{
margin-top
:
5px
;
font-size
:
12px
;
color
:
var
(
--toolbar-icon-color
);
display
:
-webkit-box
;
display
:
flex
}
.vditor-emojis__tail
a
{
text-decoration
:
none
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-emojis__tail
a
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-emojis
button
{
cursor
:
pointer
;
border-radius
:
3px
;
float
:
left
;
height
:
30px
;
width
:
30px
;
text-align
:
center
;
line-height
:
26px
;
padding
:
3px
;
box-sizing
:
border-box
;
font-size
:
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
border
:
0
;
margin
:
0
;
background-color
:
transparent
;
overflow
:
hidden
}
.vditor-emojis
button
:focus
{
outline
:
none
}
.vditor-emojis
button
:hover
.vditor-emojis__icon
{
display
:
inline-block
;
-webkit-transform
:
scale
(
1.2
);
transform
:
scale
(
1.2
)}
.vditor-emojis
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin
:
3px
0
0
3px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-toolbar__item
.vditor-tooltipped
{
padding
:
10px
8px
;
width
:
31px
;
margin
:
0
4px
}}
@-webkit-keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
@keyframes
slideInDown
{
0
%
{
-webkit-transform
:
translate3d
(
0
,
-100%
,
0
);
transform
:
translate3d
(
0
,
-100%
,
0
);
visibility
:
visible
}
to
{
-webkit-transform
:
translateZ
(
0
);
transform
:
translateZ
(
0
)}}
.vditor
{
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-sizing
:
border-box
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
}
.vditor--fullscreen
{
position
:
fixed
;
top
:
0
;
width
:
100%
!important
;
left
:
0
;
height
:
100vh
!important
;
z-index
:
90
;
border-radius
:
0
}
.vditor-content
{
display
:
-webkit-box
;
display
:
flex
;
min-height
:
60px
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
{
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
margin
:
0
1px
0
0
;
height
:
100%
;
overflow
:
auto
;
width
:
100%
;
-webkit-box-flex
:
1
;
flex
:
1
;
border
:
0
;
resize
:
none
;
padding
:
10px
9px
10px
10px
;
box-sizing
:
border-box
;
background-color
:
var
(
--panel-background-color
);
outline
:
0
none
;
font-size
:
16px
;
line-height
:
22px
;
color
:
var
(
--textarea-text-color
);
border-radius
:
0
0
3px
3px
;
font-variant-ligatures
:
no-common-ligatures
;
white-space
:
pre-wrap
;
word-break
:
break-word
;
word-wrap
:
break-word
}
.vditor-textarea
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-textarea
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-textarea
:focus
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-textarea
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-preview
{
-webkit-box-flex
:
1
;
flex
:
1
;
overflow
:
auto
;
margin-left
:
-1px
;
border-left
:
1px
solid
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
background-color
:
var
(
--textarea-background-color
);
padding
:
10px
}
.vditor-preview
>
div
::-webkit-scrollbar
{
display
:
none
}
.vditor-preview
>
.vditor-reset
{
margin
:
0
auto
}
.vditor-devtools
{
display
:
none
;
background-color
:
var
(
--textarea-background-color
);
overflow
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
;
box-shadow
:
inset
1px
0
var
(
--border-color
);
box-sizing
:
border-box
;
border-radius
:
0
0
3px
0
;
padding
:
10px
}
.vditor-counter
{
padding
:
3px
;
color
:
var
(
--toolbar-icon-color
);
background-color
:
var
(
--code-background-color
);
border-radius
:
3px
;
font-size
:
12px
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
float
:
right
;
margin
:
8px
3px
0
0
}
.vditor-counter--error
{
color
:
#d23f31
;
background-color
:
rgba
(
210
,
63
,
49
,
.1
)}
.vditor-resize
{
padding
:
3px
0
;
cursor
:
row-resize
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
position
:
absolute
;
width
:
100%
}
.vditor-resize--top
{
top
:
-3px
}
.vditor-resize--bottom
{
bottom
:
-3px
}
.vditor-resize
>
div
{
height
:
3px
;
background-color
:
var
(
--resize-background-color
);
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-resize--selected
>
div
,
.vditor-resize
:hover
>
div
{
background-color
:
var
(
--resize-hover-background-color
)}
.vditor-resize--selected
svg
,
.vditor-resize
:hover
svg
{
color
:
var
(
--resize-hover-icon-color
)}
.vditor-resize
svg
{
fill
:
currentColor
;
stroke-width
:
0
;
stroke
:
currentColor
;
width
:
13px
;
height
:
3px
;
display
:
block
;
margin
:
0
auto
;
color
:
var
(
--resize-icon-color
)}
.vditor-upload
{
position
:
absolute
;
height
:
3px
;
left
:
0
;
top
:
-2px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
background-color
:
#4285f4
}
.vditor-tip
{
position
:
absolute
;
font-size
:
12px
;
top
:
10px
;
color
:
var
(
--toolbar-icon-color
);
-webkit-animation-duration
:
.15s
;
animation-duration
:
.15s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
left
:
50%
}
.vditor-tip--show
{
display
:
block
;
-webkit-animation-name
:
slideInDown
;
animation-name
:
slideInDown
}
.vditor-tip__content
{
text-align
:
left
;
display
:
inline-block
;
line-height
:
16px
;
padding
:
3px
10px
;
border-radius
:
3px
;
background
:
var
(
--toolbar-icon-color
);
position
:
relative
;
margin-left
:
-50%
;
color
:
var
(
--toolbar-background-color
)}
.vditor-tip__content
ul
{
margin
:
2px
0
;
padding
:
0
0
0
18px
}
.vditor-tip__close
{
position
:
absolute
;
color
:
var
(
--toolbar-icon-color
);
top
:
-7px
;
right
:
-15px
;
font-weight
:
700
;
cursor
:
pointer
}
.vditor-tip__close
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-arrow
:before
{
position
:
absolute
;
width
:
0
;
height
:
0
;
pointer-events
:
none
;
content
:
" "
;
top
:
-14px
;
left
:
5px
;
border
:
7px
solid
transparent
;
border-bottom
:
7px
solid
var
(
--panel-background-color
)}
.vditor-outline
{
min-width
:
250px
;
width
:
250px
;
border-right
:
1px
solid
var
(
--border-color
);
background-color
:
var
(
--panel-background-color
);
display
:
none
}
.vditor-outline__item
{
padding
:
5px
10px
;
cursor
:
pointer
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
}
.vditor-outline__item
:hover
{
color
:
var
(
--toolbar-icon-hover-color
);
background-color
:
var
(
--toolbar-background-color
)}
.vditor-outline__panel
{
position
:
-webkit-sticky
;
position
:
sticky
;
overflow
:
auto
;
top
:
35px
;
padding-bottom
:
10px
;
color
:
var
(
--textarea-text-color
);
box-sizing
:
border-box
}
.vditor-outline__panel
::-webkit-scrollbar
{
display
:
none
}
.vditor-outline__title
{
border-bottom
:
1px
dashed
var
(
--border-color
);
padding
:
5px
10px
;
color
:
var
(
--toolbar-icon-color
);
font-size
:
12px
}
@media
screen
and
(
max-width
:
520px
){
.vditor-arrow
:before
{
left
:
12px
}}
.vditor-hint
{
background-color
:
var
(
--panel-background-color
);
position
:
absolute
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
);
border-radius
:
3px
;
padding
:
5px
0
;
z-index
:
4
;
line-height
:
20px
;
list-style
:
none
;
font-size
:
12px
;
margin
:
0
;
max-width
:
250px
;
min-width
:
80px
;
display
:
none
}
.vditor-hint
button
{
color
:
var
(
--toolbar-icon-color
);
display
:
block
;
padding
:
3px
10px
;
border
:
0
;
border-radius
:
0
;
border-bottom
:
1px
solid
var
(
--border-color
);
line-height
:
20px
;
width
:
100%
;
box-sizing
:
border-box
;
text-align
:
left
;
margin
:
0
;
background-color
:
transparent
;
cursor
:
pointer
;
white-space
:
nowrap
}
.vditor-hint
button
:last-child
{
border-bottom
:
0
}
.vditor-hint
button
:focus
{
outline
:
none
}
.vditor-hint--current
,
.vditor-hint
button
:hover
{
background-color
:
var
(
--toolbar-background-color
)
!important
;
color
:
var
(
--toolbar-icon-hover-color
)
!important
}
.vditor-hint__emoji
{
font-size
:
16px
;
float
:
left
;
margin-right
:
3px
}
.vditor-hint
img
{
height
:
20px
;
width
:
20px
;
float
:
left
;
margin-right
:
3px
}
.vditor-reset
{
color
:
var
(
--textarea-text-color
);
font-variant-ligatures
:
no-common-ligatures
;
font-family
:
Helvetica
Neue
,
Luxi
Sans
,
DejaVu
Sans
,
Tahoma
,
Hiragino
Sans
GB
,
Microsoft
Yahei
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-wrap
:
break-word
;
overflow
:
auto
;
line-height
:
1.5
;
font-size
:
16px
;
word-break
:
break-word
}
.vditor-reset--anchor
{
padding-left
:
20px
}
.vditor-reset--error
{
color
:
#d23f31
;
font-size
:
12px
;
display
:
block
;
line-height
:
16px
}
.vditor-reset--dark
{
background-color
:
var
(
--textarea-background-color
)}
.vditor-reset--dark
a
{
color
:
#4285f4
}
.vditor-reset
ul
ul
ul
{
list-style-type
:
square
}
.vditor-reset
ul
ul
{
list-style-type
:
circle
}
.vditor-reset
ul
{
list-style-type
:
disc
}
.vditor-reset
ol
,
.vditor-reset
ul
{
padding-left
:
2em
;
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
li
+
li
{
margin-top
:
.25em
}
.vditor-reset
audio
{
max-width
:
100%
}
.vditor-reset
audio
:focus
{
outline
:
none
}
.vditor-reset
video
{
max-height
:
90vh
;
max-width
:
100%
}
.vditor-reset
img
{
max-width
:
100%
}
.vditor-reset
img
.emoji
{
cursor
:
auto
;
max-width
:
20px
;
vertical-align
:
sub
}
.vditor-reset
h1
,
.vditor-reset
h2
,
.vditor-reset
h3
,
.vditor-reset
h4
,
.vditor-reset
h5
,
.vditor-reset
h6
{
margin-top
:
24px
;
margin-bottom
:
16px
;
font-weight
:
600
;
line-height
:
1.25
}
.vditor-reset
h1
:hover
.vditor-anchor
svg
,
.vditor-reset
h2
:hover
.vditor-anchor
svg
,
.vditor-reset
h3
:hover
.vditor-anchor
svg
,
.vditor-reset
h4
:hover
.vditor-anchor
svg
,
.vditor-reset
h5
:hover
.vditor-anchor
svg
,
.vditor-reset
h6
:hover
.vditor-anchor
svg
{
visibility
:
visible
}
.vditor-reset
h1
{
font-size
:
1.7em
}
.vditor-reset
h1
,
.vditor-reset
h2
{
padding-bottom
:
.3em
;
border-bottom
:
1px
solid
var
(
--heading-border-color
)}
.vditor-reset
h2
{
font-size
:
1.5em
}
.vditor-reset
h3
{
font-size
:
1.25em
}
.vditor-reset
h4
{
font-size
:
1em
}
.vditor-reset
h5
{
font-size
:
.875em
}
.vditor-reset
h6
{
font-size
:
.85em
}
.vditor-reset
hr
{
height
:
2px
;
padding
:
0
;
margin
:
24px
0
;
background-color
:
var
(
--heading-border-color
);
border
:
0
}
.vditor-reset
p
{
margin-top
:
0
;
margin-bottom
:
16px
}
.vditor-reset
blockquote
{
padding
:
0
1em
;
color
:
var
(
--blockquote-color
);
border-left
:
.25em
solid
var
(
--heading-border-color
);
margin
:
0
0
16px
}
.vditor-reset
blockquote
>
:first-child
{
margin-top
:
0
}
.vditor-reset
blockquote
>
:last-child
{
margin-bottom
:
0
}
.vditor-reset
ins
>
iframe
{
border
:
0
}
.vditor-reset
iframe
{
border
:
1px
solid
var
(
--border-color
);
max-width
:
100%
;
box-sizing
:
border-box
}
.vditor-reset
iframe
.iframe__video
{
min-width
:
80%
;
min-height
:
36vh
}
.vditor-reset
table
{
border-collapse
:
collapse
;
empty-cells
:
show
;
margin-bottom
:
16px
;
overflow
:
auto
;
border-spacing
:
0
}
.vditor-reset
table
tr
{
background-color
:
var
(
--textarea-background-color
);
border-top
:
1px
solid
#c6cbd1
}
.vditor-reset
table
td
,
.vditor-reset
table
th
{
padding
:
6px
13px
;
border
:
1px
solid
#dfe2e5
;
word-break
:
normal
}
.vditor-reset
table
th
{
font-weight
:
600
}
.vditor-reset
table
tbody
tr
:nth-child
(
2n
)
{
background-color
:
var
(
--panel-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
padding
:
.2em
.4em
;
margin
:
0
;
font-size
:
85%
;
border-radius
:
3px
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
word-break
:
break-word
;
background-size
:
20px
20px
;
white-space
:
pre-wrap
;
background-color
:
var
(
--code-background-color
)}
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-echarts
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-graphviz
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-math
,
.vditor-reset
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
.language-mermaid
{
background-color
:
var
(
--preview-background-color
)}
.vditor-reset
pre
>
code
{
margin
:
0
;
font-size
:
85%
;
padding
:
.5em
;
border-radius
:
5px
;
display
:
block
;
overflow
:
auto
;
white-space
:
pre
;
font-family
:
mononoki
,
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Noto
Color
Emoji
,
Segoe
UI
Symbol
,
Android
Emoji
,
EmojiSymbols
;
background-size
:
20px
20px
;
background-image
:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)
;
word-break
:
normal
;
word-wrap
:
normal
}
.vditor-reset
pre
:hover
div
.vditor-copy
{
display
:
block
}
.vditor-reset
kbd
{
display
:
inline-block
;
padding
:
3px
5px
;
font
:
11px
Consolas
,
Liberation
Mono
,
Menlo
,
Courier
,
monospace
;
line-height
:
10px
;
color
:
var
(
--textarea-text-color
);
vertical-align
:
middle
;
background-color
:
var
(
--textarea-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
box-shadow
:
inset
0
-1px
0
var
(
--border-color
)}
.vditor-reset
summary
{
cursor
:
pointer
}
.vditor-reset
summary
:focus
{
outline
:
none
}
.vditor-reset
svg
{
height
:
auto
;
width
:
auto
;
stroke-width
:
initial
}
.vditor-reset
blockquote
:last-child
,
.vditor-reset
hr
:last-child
,
.vditor-reset
ol
:last-child
,
.vditor-reset
p
:last-child
,
.vditor-reset
pre
:last-child
,
.vditor-reset
ul
:last-child
{
margin-bottom
:
0
}
.vditor-reset
.language-echarts
{
overflow
:
hidden
;
height
:
420px
}
.vditor-reset
.language-graphviz
polygon
{
fill
:
transparent
}
.vditor-task
{
list-style
:
none
}
.vditor-task
input
{
margin
:
0
.2em
.25em
-1.6em
;
font-size
:
12px
;
vertical-align
:
middle
}
.vditor-copy
{
position
:
relative
;
display
:
none
;
z-index
:
1
}
.vditor-copy
textarea
{
position
:
absolute
;
left
:
-100000px
;
height
:
10px
}
.vditor-copy
span
{
cursor
:
pointer
;
position
:
absolute
;
right
:
.5em
;
top
:
.5em
}
.vditor-copy
svg
{
color
:
var
(
--toolbar-icon-color
);
height
:
14px
;
width
:
14px
!important
;
display
:
block
;
fill
:
currentColor
}
.vditor-linenumber
{
padding-left
:
4em
!important
;
position
:
relative
}
.vditor-linenumber__rows
{
position
:
absolute
;
pointer-events
:
none
;
top
:
.2em
;
left
:
0
;
width
:
3em
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
counter-reset
:
linenumber
}
.vditor-linenumber__rows
>
span
{
pointer-events
:
none
;
display
:
block
}
.vditor-linenumber__rows
>
span
:before
{
counter-increment
:
linenumber
;
content
:
counter
(
linenumber
);
color
:
hsla
(
0
,
4%
,
60.4%
,
.38
);
display
:
block
;
padding-right
:
1em
;
text-align
:
right
}
.vditor-speech
{
position
:
absolute
;
display
:
none
;
background-color
:
var
(
--toolbar-background-color
);
border
:
1px
solid
var
(
--border-color
);
border-radius
:
3px
;
padding
:
3px
;
cursor
:
pointer
;
color
:
var
(
--toolbar-icon-color
)}
.vditor-speech--current
,
.vditor-speech
:hover
{
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-speech
svg
{
height
:
14px
;
width
:
14px
;
fill
:
currentColor
;
display
:
block
;
stroke-width
:
0
;
stroke
:
currentColor
}
.vditor-anchor
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-20px
}
.vditor-anchor
svg
{
visibility
:
hidden
}
.vditor-anchor
:hover
svg
{
visibility
:
visible
}
.vditor-anchor
:focus
{
outline
:
none
}
.vditor-linkcard
{
margin
:
31px
auto
16px
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
;
cursor
:
pointer
;
max-width
:
768px
;
padding
:
0
10px
}
.vditor-linkcard
a
{
border-radius
:
3px
;
background-color
:
var
(
--toolbar-background-color
);
overflow
:
hidden
;
max-height
:
250px
;
display
:
-webkit-box
;
display
:
flex
;
text-decoration
:
none
;
flex-wrap
:
wrap-reverse
;
box-shadow
:
0
1px
2px
rgba
(
0
,
0
,
0
,
.2
)}
.vditor-linkcard
a
:hover
{
box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.13
),
0
3px
6px
rgba
(
0
,
0
,
0
,
.26
);
text-decoration
:
none
}
.vditor-linkcard
a
:visited
.vditor-linkcard__abstract
{
color
:
var
(
--second-color
)}
.vditor-linkcard__info
{
padding
:
10px
;
min-width
:
200px
;
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
}
.vditor-linkcard__title
{
font-size
:
14px
;
font-weight
:
400
;
color
:
var
(
--textarea-text-color
);
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-align
:
center
;
align-items
:
center
}
.vditor-linkcard__title
img
{
cursor
:
pointer
;
height
:
20px
;
width
:
20px
;
border-radius
:
3px
;
flex-shrink
:
0
;
margin-right
:
5px
}
.vditor-linkcard__abstract
{
word-wrap
:
break-word
;
word-break
:
break-all
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
-webkit-box-orient
:
vertical
;
display
:
-webkit-box
;
font-size
:
13px
;
color
:
var
(
--toolbar-icon-color
);
margin
:
5px
0
}
.vditor-linkcard__site
{
font-size
:
12px
;
color
:
var
(
--toolbar-icon-hover-color
)}
.vditor-linkcard__image
{
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
50%
;
max-width
:
250px
;
min-width
:
126px
;
cursor
:
pointer
;
background-color
:
var
(
--second-color
)}
.vditor-math
mjx-container
:focus
{
outline
:
none
;
cursor
:
context-menu
}
.vditor-footnotes__goto-ref
{
text-decoration
:
none
}
.vditor-toc
{
margin-bottom
:
16px
}
.vditor-wysiwyg
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-wysiwyg
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-wysiwyg
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-wysiwyg
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-wysiwyg
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-wysiwyg
blockquote
:empty:before
,
.vditor-wysiwyg
h1
:empty:after
,
.vditor-wysiwyg
h2
:empty:after
,
.vditor-wysiwyg
h3
:empty:after
,
.vditor-wysiwyg
h4
:empty:after
,
.vditor-wysiwyg
h5
:empty:after
,
.vditor-wysiwyg
h6
:empty:after
,
.vditor-wysiwyg
p
:empty:before
,
.vditor-wysiwyg
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-wysiwyg
code
[
data-marker
=
"`"
]
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.vditor-wysiwyg__block
pre
:first-child
{
margin-bottom
:
-1em
}
.vditor-wysiwyg__block
pre
:first-child
code
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-wysiwyg__block
pre
:last-child
{
margin-bottom
:
1em
}
.vditor-wysiwyg__preview
{
cursor
:
pointer
;
white-space
:
normal
;
min-height
:
27px
}
.vditor-wysiwyg__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-wysiwyg
.vditor-toc
:before
,
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
,
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-wysiwyg
h1
:before
,
.vditor-wysiwyg
h2
:before
,
.vditor-wysiwyg
h3
:before
,
.vditor-wysiwyg
h4
:before
,
.vditor-wysiwyg
h5
:before
,
.vditor-wysiwyg
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
h2
:before
{
content
:
"H2"
}
.vditor-wysiwyg
h3
:before
{
content
:
"H3"
}
.vditor-wysiwyg
h4
:before
{
content
:
"H4"
}
.vditor-wysiwyg
h5
:before
{
content
:
"H5"
}
.vditor-wysiwyg
h6
:before
{
content
:
"H6"
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-wysiwyg
div
.vditor-wysiwyg__block
:before
{
content
:
"</>"
}
.vditor-wysiwyg
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-wysiwyg
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-wysiwyg
details
{
white-space
:
normal
}
.vditor-wysiwyg
span
[
data-type
=
backslash
]>
span
{
display
:
none
;
color
:
var
(
--second-color
)}
.vditor-wysiwyg
span
[
data-type
=
link-ref
],
.vditor-wysiwyg
sup
[
data-type
=
footnotes-ref
]
{
color
:
#4285f4
}
.vditor-wysiwyg
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
.vditor-wysiwyg
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-wysiwyg
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
{
box-sizing
:
border-box
;
-webkit-box-flex
:
1
;
flex
:
1
;
position
:
relative
;
width
:
100%
}
.vditor-ir__block
[
data-type
=
html-block
]
pre
{
margin
:
1em
0
!important
}
.vditor-ir__node
[
data-type
=
code-block
]
:after
,
.vditor-ir__node
[
data-type
=
code-block
]
:before
,
.vditor-ir__node
[
data-type
=
math-block
]
:after
,
.vditor-ir__node
[
data-type
=
math-block
]
:before
{
content
:
" "
;
color
:
var
(
--second-color
)}
.vditor-ir__node
:not
(
.vditor-ir__node--expand
)
.vditor-ir__marker
{
padding
:
0
!important
}
.vditor-ir__node
[
data-type
=
footnotes-ref
],
.vditor-ir__node
[
data-type
=
link-ref
]
{
color
:
#4285f4
}
.vditor-ir__node
.vditor-ir__marker
{
width
:
0
;
overflow
:
hidden
;
display
:
inline-block
;
height
:
0
;
-webkit-transition
:
all
.15s
ease-in-out
;
transition
:
all
.15s
ease-in-out
}
.vditor-ir__node
.vditor-ir__preview
code
:not
(
.hljs
)
:not
(
.highlight-chroma
)
{
background-color
:
var
(
--preview-background-color
)}
.vditor-ir__node--expand
.vditor-ir__marker
{
color
:
var
(
--second-color
);
display
:
inline
;
height
:
auto
;
width
:
auto
}
.vditor-ir__node--expand
.vditor-ir__marker--hide
{
display
:
none
}
.vditor-ir__node--expand
.vditor-ir__marker--heading
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bi
{
color
:
var
(
--ir-bi-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--link
{
color
:
var
(
--ir-link-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--title
{
color
:
var
(
--ir-title-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--bracket
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir__node--expand
.vditor-ir__marker--paren
{
color
:
var
(
--ir-paren-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--info
{
color
:
var
(
--ir-heading-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
{
color
:
var
(
--textarea-text-color
)}
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-echarts
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-graphviz
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-math
,
.vditor-ir__node--expand
.vditor-ir__marker--pre
.language-mermaid
{
background-color
:
var
(
--code-background-color
)
!important
}
.vditor-ir__node--expand
[
data-type
=
code-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
code-block
]
:before
{
content
:
"```"
}
.vditor-ir__node--expand
[
data-type
=
math-block
]
:after
,
.vditor-ir__node--expand
[
data-type
=
math-block
]
:before
{
content
:
"$$"
}
.vditor-ir__node
span
[
data-type
=
code-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
code-block-open-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-close-marker
],
.vditor-ir__node
span
[
data-type
=
math-block-open-marker
]
{
display
:
none
}
.vditor-ir__link
{
color
:
var
(
--ir-bracket-color
);
text-decoration
:
underline
}
.vditor-ir
pre
.vditor-reset
{
background-color
:
var
(
--panel-background-color
);
margin
:
0
;
white-space
:
pre-wrap
;
height
:
100%
;
box-sizing
:
border-box
}
.vditor-ir
pre
.vditor-reset
[
contenteditable
=
false
]
{
opacity
:
.3
;
cursor
:
not-allowed
}
.vditor-ir
pre
.vditor-reset
:empty:before
{
content
:
attr
(
placeholder
);
color
:
var
(
--second-color
)}
.vditor-ir
pre
.vditor-reset
:focus
{
outline
:
none
;
background-color
:
var
(
--textarea-background-color
)}
.vditor-ir
pre
.vditor-reset
:after
{
content
:
""
;
height
:
var
(
--editor-bottom
);
display
:
block
}
.vditor-ir
pre
.vditor-reset
pre
{
margin
:
0
}
.vditor-ir
hr
{
display
:
inline-block
;
margin
:
12px
0
;
width
:
100%
}
.vditor-ir
blockquote
:empty:before
,
.vditor-ir
h1
:empty:after
,
.vditor-ir
h2
:empty:after
,
.vditor-ir
h3
:empty:after
,
.vditor-ir
h4
:empty:after
,
.vditor-ir
h5
:empty:after
,
.vditor-ir
h6
:empty:after
,
.vditor-ir
p
:empty:before
,
.vditor-ir
pre
>
code
:empty:before
{
content
:
" "
}
.vditor-ir
.vditor-toc
:before
,
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
,
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
,
.vditor-ir
h1
:before
,
.vditor-ir
h2
:before
,
.vditor-ir
h3
:before
,
.vditor-ir
h4
:before
,
.vditor-ir
h5
:before
,
.vditor-ir
h6
:before
{
float
:
left
;
padding-right
:
4px
;
margin-left
:
-29px
;
content
:
"H1"
;
font-size
:
.85rem
;
font-weight
:
400
;
color
:
var
(
--second-color
)}
.vditor-ir
h2
:before
{
content
:
"H2"
}
.vditor-ir
h3
:before
{
content
:
"H3"
}
.vditor-ir
h4
:before
{
content
:
"H4"
}
.vditor-ir
h5
:before
{
content
:
"H5"
}
.vditor-ir
h6
:before
{
content
:
"H6"
}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
{
color
:
var
(
--blockquote-color
)}
.vditor-ir
div
[
data-type
=
link-ref-defs-block
]
:before
{
content
:
'"A"'
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
{
border-top
:
2px
solid
var
(
--heading-border-color
);
padding-top
:
24px
;
margin-top
:
24px
}
.vditor-ir
div
[
data-type
=
footnotes-block
]
:before
{
content
:
"^F"
}
.vditor-ir
.vditor-toc
:before
{
content
:
"ToC"
}
.vditor-ir
.vditor-toc
span
[
data-type
=
toc-h
]
{
color
:
#4285f4
;
text-decoration
:
underline
}
body
{
background-color
:
#f4f8fb
}
::-moz-selection
{
text-shadow
:
none
;
background-color
:
#cbeafb
}
::selection
{
text-shadow
:
none
;
background-color
:
#cbeafb
}
a
{
color
:
#26a8ed
}
.ft__a
{
color
:
#738a94
}
.ft__a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.wrapper
{
max-width
:
1040px
;
margin
:
0
auto
;
padding
:
0
10px
}
.header
{
color
:
#fff
;
position
:
relative
}
.header--index
:before
{
content
:
""
;
height
:
100%
;
position
:
absolute
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
width
:
100%
;
top
:
0
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.header--article
{
background-color
:
#090a0b
;
height
:
64px
}
.header--article
.header__title
{
display
:
none
}
.header--article
.header__nav
a
{
margin-bottom
:
0
;
line-height
:
64px
}
.header--other
{
height
:
407px
}
.header--other
.header__title
{
display
:
none
}
.header--other
:before
{
content
:
""
;
height
:
100%
;
position
:
absolute
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
width
:
100%
;
top
:
0
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.header--other
.header__nav
a
{
margin-bottom
:
0
;
line-height
:
64px
}
.header__title
{
position
:
relative
;
text-align
:
center
}
.header__h1
{
font-size
:
30px
;
padding-top
:
140px
;
font-weight
:
400
}
.header__h1
img
{
height
:
32px
;
width
:
32px
;
margin-right
:
10px
}
.header__h1
a
{
color
:
#fff
}
.header__h1
a
:hover
{
text-decoration
:
none
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
)}
.header__h2
{
font-size
:
20px
;
font-weight
:
300
;
margin
:
5px
0
70px
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
);
line-height
:
24px
}
.header__nav
{
position
:
relative
}
.header__nav
a
{
font-size
:
13px
;
float
:
left
;
line-height
:
24px
;
color
:
hsla
(
0
,
0%
,
100%
,
.8
);
margin
:
0
20px
90px
0
}
.header__nav
a
:hover
{
color
:
#fff
;
text-decoration
:
none
}
.header__nav
img
{
height
:
14px
;
width
:
14px
;
margin-right
:
5px
}
.header__nav
svg
{
margin-top
:
5px
}
.footer
{
font-size
:
13px
;
padding
:
20px
0
;
background-color
:
#090a0b
;
color
:
#fff
}
.footer
a
{
color
:
hsla
(
0
,
0%
,
100%
,
.8
)}
.footer
a
:hover
{
text-decoration
:
none
;
color
:
#fff
}
.footer
.fn__right
{
text-align
:
right
}
.articles
{
top
:
-70px
;
position
:
relative
;
flex-wrap
:
wrap
;
margin
:
0
-20px
}
.articles
,
.articles
.item
{
display
:
-webkit-box
;
display
:
flex
}
.articles
.item
{
flex
:
1
1
300px
;
overflow
:
hidden
;
margin
:
0
20px
40px
;
min-height
:
300px
;
border-radius
:
5px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
-webkit-box-orient
:
vertical
;
flex-direction
:
column
;
background-color
:
#fff
}
.articles
.item
,
.articles
.item--large
{
-webkit-box-flex
:
1
;
-webkit-box-direction
:
normal
}
.articles
.item--large
{
-webkit-box-orient
:
horizontal
;
flex-direction
:
row
;
flex
:
1
1
100%
}
.articles
.item--large
.item__cover
{
-webkit-box-flex
:
1
;
flex
:
1
;
height
:
auto
}
.articles
.item--large
.item__main
{
padding
:
30px
40px
;
width
:
357px
;
-webkit-box-flex
:
unset
;
flex
:
unset
}
.articles
.item
:hover
{
box-shadow
:
8px
28px
50px
rgba
(
39
,
44
,
49
,
.07
),
1px
6px
12px
rgba
(
39
,
44
,
49
,
.04
);
-webkit-transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
);
transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
)}
.articles
.item__cover
{
background-size
:
cover
;
background-position
:
50%
;
font-size
:
0
;
height
:
200px
}
.articles
.item__main
{
padding
:
25px
;
box-sizing
:
border-box
;
display
:
-webkit-box
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-box-flex
:
1
;
flex
:
1
}
.articles
.item__tag
{
display
:
inline-block
;
margin-bottom
:
4px
;
color
:
#738a94
;
font-size
:
12px
;
line-height
:
14px
;
font-weight
:
500
;
letter-spacing
:
.5px
;
text-transform
:
uppercase
}
.articles
.item__tag
:hover
{
text-decoration
:
none
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__title
{
margin-bottom
:
10px
}
.articles
.item__title
>
a
{
color
:
#15171a
;
font-size
:
18px
;
line-height
:
24px
}
.articles
.item__title
>
a
:hover
{
text-decoration
:
none
;
color
:
rgba
(
21
,
23
,
26
,
.8
)}
.articles
.item__title
sup
{
font-size
:
12px
;
font-weight
:
400
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__title
sup
a
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
cursor
:
text
}
.articles
.item__title
sup
a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
text-decoration
:
none
}
.articles
.item__title
sup
a
:visited
{
color
:
#fff
}
.articles
.item__abstract
{
line-height
:
24px
;
color
:
#15171a
;
-webkit-box-flex
:
1
;
flex
:
1
}
.articles
.item__abstract
:hover
{
text-decoration
:
none
;
color
:
rgba
(
21
,
23
,
26
,
.8
)}
.articles
.item__meta
{
float
:
right
;
margin-top
:
18px
;
color
:
#738a94
}
.articles
.item__meta
:hover
{
text-decoration
:
none
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.articles
.item__avatar
{
margin-top
:
10px
;
float
:
left
}
.articles
.item__avatar
img
{
height
:
32px
;
width
:
32px
}
.pagination
{
text-align
:
center
;
margin-top
:
-70px
}
.pagination__item
{
width
:
30px
;
height
:
30px
;
background
:
#15171a
;
border-radius
:
50%
;
display
:
inline-block
;
color
:
#fff
;
line-height
:
30px
;
font-size
:
12px
;
margin
:
0
5px
40px
}
.pagination__item--active
,
.pagination__item
:hover
{
opacity
:
.68
;
text-decoration
:
none
}
.pagination__item--omit
{
background-color
:
transparent
;
color
:
#15171a
}
.article
,
.article__bottom
{
background-color
:
#fff
}
.article__bottom
{
position
:
relative
}
.article__bottom
.fn__flex
{
flex-wrap
:
wrap
;
margin
:
0
-20px
}
.article__bottom
.item
{
position
:
relative
;
-webkit-box-flex
:
1
;
flex
:
1
1
300px
;
margin
:
40px
20px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
border-radius
:
5px
;
padding
:
40px
;
overflow
:
hidden
;
text-align
:
center
;
box-sizing
:
border-box
}
.article__bottom
.item
:before
{
content
:
""
;
position
:
absolute
;
height
:
100%
;
top
:
0
;
left
:
0
;
width
:
100%
;
background
:
url(../images/header-bg.jpg)
no-repeat
50%
;
background-size
:
cover
;
-webkit-filter
:
brightness
(
48%
);
filter
:
brightness
(
48%
)}
.article__bottom
.item
h3
{
color
:
#fff
;
position
:
relative
;
margin-bottom
:
20px
}
.article__bottom
.item
ul
{
padding-left
:
0
;
position
:
relative
;
list-style
:
none
}
.article__bottom
.item
a
{
display
:
block
;
border-bottom
:
1px
solid
rgba
(
115
,
138
,
148
,
.8
);
padding
:
10px
0
;
color
:
#fff
;
margin
:
0
20px
}
.article__top
{
position
:
fixed
;
width
:
100%
;
top
:
-61px
;
background-color
:
hsla
(
0
,
0%
,
100%
,
.9
);
border-bottom
:
1px
solid
rgba
(
115
,
138
,
148
,
.1
);
height
:
60px
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
z-index
:
1
}
.article__top
.title
{
float
:
left
;
margin-left
:
20px
;
line-height
:
60px
;
font-size
:
22px
}
.article__share
{
float
:
right
;
position
:
relative
}
.article__share
.item
{
height
:
60px
;
width
:
60px
;
float
:
left
;
text-align
:
center
;
padding
:
20px
0
;
box-sizing
:
border-box
;
color
:
#fdc200
;
cursor
:
pointer
;
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
}
.article__share
.item
svg
{
height
:
20px
;
width
:
20px
}
.article__share
.item
[
data-type
=
wechat
]
{
color
:
#3caf36
}
.article__share
.item
[
data-type
=
wechat
]
:hover
{
background-color
:
#3caf36
}
.article__share
.item
[
data-type
=
twitter
]
{
color
:
#18a3fa
}
.article__share
.item
[
data-type
=
twitter
]
:hover
{
background-color
:
#18a3fa
}
.article__share
.item
[
data-type
=
weibo
]
{
color
:
#f93
}
.article__share
.item
[
data-type
=
weibo
]
:hover
{
background-color
:
#f93
}
.article__share
.item
:hover
{
color
:
#fff
;
background-color
:
#fdc200
}
.article__share
.item__qr
{
position
:
absolute
;
top
:
61px
;
left
:
60px
;
height
:
99px
;
width
:
99px
;
display
:
none
}
.article__progress
{
position
:
absolute
;
right
:
0
;
bottom
:
-1px
;
left
:
0
;
width
:
100%
;
height
:
2px
;
border
:
none
;
background
:
transparent
;
-webkit-appearance
:
none
}
.article__progress
::-webkit-progress-value
{
background-color
:
#26a8ed
}
.article__progress
::-webkit-progress-bar
{
background-color
:
transparent
}
.article
.item__meta
{
padding-top
:
76px
;
font-size
:
14px
;
text-transform
:
uppercase
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.article
.item__meta
a
{
color
:
#738a94
}
.article
.item__title
{
font-size
:
28px
;
margin-bottom
:
40px
}
.article
.item__title
sup
{
font-size
:
14px
;
font-weight
:
400
;
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.article
.item__cover
{
height
:
800px
;
background-size
:
cover
;
background-position
:
50%
;
max-width
:
1404px
;
margin
:
0
auto
;
border-radius
:
5px
;
-webkit-filter
:
sepia
(
.2
)
contrast
(
1.3
)
opacity
(
.86
);
filter
:
sepia
(
.2
)
contrast
(
1.3
)
opacity
(
.86
)}
.article
.item__content
{
padding
:
70px
100px
0
;
box-sizing
:
border-box
;
background-color
:
#fff
}
.article
.item__content--article
{
margin-top
:
-164px
;
position
:
relative
;
padding-bottom
:
30px
}
.article
.item__content--article
::-webkit-scrollbar
{
display
:
none
}
.article
.item__tip
{
margin-bottom
:
40px
;
border-radius
:
5px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
-webkit-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
padding
:
20px
0
;
text-align
:
center
;
background
:
#f4f8fb
;
cursor
:
pointer
;
font-size
:
18px
}
.article
.item__tip
:hover
{
box-shadow
:
8px
28px
50px
rgba
(
39
,
44
,
49
,
.07
),
1px
6px
12px
rgba
(
39
,
44
,
49
,
.04
);
-webkit-transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
);
transform
:
translate3D
(
0
,
-1px
,
0
)
scale
(
1.02
)}
.post__toc
{
display
:
none
;
position
:
fixed
;
top
:
84px
;
bottom
:
80px
;
overflow
:
auto
;
padding-left
:
3px
}
.post__toc
::-webkit-scrollbar
{
display
:
none
}
.post__toc
.article__toc
{
overflow
:
initial
;
border-left
:
1px
solid
rgba
(
115
,
138
,
148
,
.28
);
margin
:
0
;
font-size
:
14px
;
line-height
:
24px
}
.post__toc
.article__toc
a
:hover
,
.post__toc
.article__toc
li
.current
a
{
color
:
#26a8ed
}
.post__toc
.article__toc
a
{
display
:
block
;
margin-top
:
-24px
;
color
:
#738a94
}
.post__toc
li
:before
{
position
:
relative
;
top
:
-2px
;
left
:
-4px
;
display
:
inline-block
;
width
:
7px
;
height
:
7px
;
content
:
""
;
border-radius
:
50%
}
.post__toc
li
.current
:before
{
background-color
:
#26a8ed
}
.comment
{
background-color
:
#f4f8fb
;
position
:
relative
}
.comment__wrapper
{
margin
:
0
auto
;
padding
:
0
100px
.1px
;
box-sizing
:
border-box
}
.comment-body-ref
{
position
:
absolute
;
left
:
80px
;
width
:
76%
}
.comment__title
{
text-align
:
center
;
padding
:
40px
0
;
color
:
#738a94
}
.comment
.item
{
margin-bottom
:
40px
;
border
:
1px
solid
hsla
(
0
,
0%
,
100%
,
.8
);
border-radius
:
5px
;
background
:
#fff
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
.04
);
list-style
:
none
;
padding
:
20px
}
.comment
.item__meta
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
font-size
:
12px
}
.comment
.item__avatar
{
float
:
left
;
height
:
40px
;
width
:
40px
;
border-radius
:
20px
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
.04
);
margin
:
0
20px
20px
0
;
background-size
:
cover
;
background-position
:
50%
}
.comment
.item__name
{
color
:
rgba
(
115
,
138
,
148
,
.8
);
float
:
left
;
line-height
:
40px
}
.comment
.item__name
a
{
color
:
#738a94
}
.comment
.item__name
a
:hover
{
color
:
rgba
(
115
,
138
,
148
,
.8
)}
.comment
.item
:hover
.item__reply
{
display
:
block
}
.comment
#comments
{
position
:
relative
}
.comment
#comment
{
position
:
relative
;
margin-bottom
:
30px
;
padding
:
20px
;
border-radius
:
3px
;
background
:
#fff
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
.04
);
border
:
0
;
resize
:
none
;
cursor
:
pointer
;
width
:
100%
;
box-sizing
:
border-box
}
.other
{
position
:
relative
}
.other__title
{
margin
:
-220px
0
5px
;
font-size
:
28px
;
font-weight
:
400
}
.other__meta
,
.other__title
{
color
:
#fff
;
text-align
:
center
}
.other__meta
{
font-size
:
14px
}
.other__meta--list
{
margin-bottom
:
154px
}
.other__content
{
background-color
:
#fff
;
padding
:
70px
100px
;
margin
:
77px
auto
40px
;
box-shadow
:
8px
14px
38px
rgba
(
39
,
44
,
49
,
.06
),
1px
3px
8px
rgba
(
39
,
44
,
49
,
.03
);
border-radius
:
5px
}
.other__item
{
line-height
:
20px
;
margin
:
10px
;
white-space
:
nowrap
;
display
:
block
}
.other__item--archive
{
width
:
187px
;
display
:
inline-block
}
.other__item
div
,
.other__item
span
{
color
:
#738a94
;
font-size
:
12px
;
word-break
:
break-all
;
white-space
:
normal
}
@media
(
max-width
:
768px
){
.header
{
padding
:
10px
0
}
.header__h1
{
padding-top
:
60px
}
.header__h2
{
margin-bottom
:
40px
}
.header__nav
.fn__right
{
float
:
none
}
.header__nav
a
{
margin
:
0
10px
0
0
}
.header--article
{
height
:
auto
}
.header--article
.header__nav
a
{
line-height
:
24px
}
.header--other
{
height
:
360px
}
.header--other
.header__nav
a
{
line-height
:
24px
}
.articles
{
position
:
static
;
margin
:
10px
-5px
0
}
.articles
.item
{
margin
:
0
5px
10px
}
.articles
.item--large
{
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
flex-direction
:
column
;
-webkit-box-flex
:
1
;
flex
:
1
1
300px
}
.articles
.item--large
.item__cover
{
height
:
200px
}
.articles
.item--large
.item__main
{
padding
:
25px
;
width
:
auto
;
-webkit-box-flex
:
1
;
flex
:
1
}
.pagination
{
margin-top
:
0
}
.pagination
,
.pagination__item
{
margin-bottom
:
5px
}
.footer
.fn__left
,
.footer
.fn__right
{
float
:
none
;
text-align
:
center
}
.article__top
{
height
:
40px
}
.article__top
.title
{
display
:
none
}
.article__top
.toc
{
display
:
block
;
float
:
left
;
line-height
:
40px
;
padding
:
0
10px
;
cursor
:
pointer
}
.article__share
.item
{
height
:
40px
;
width
:
40px
;
padding
:
10px
0
}
.article
.item__meta
{
padding-top
:
40px
}
.article
.item__cover
{
display
:
none
}
.article
.item__content
{
padding
:
10px
10px
0
}
.article
.item__content--article
{
margin-top
:
-20px
}
.article__bottom
.fn__flex
{
margin
:
0
0
10px
}
.article__bottom
.item
{
margin
:
10px
0
0
}
.comment__title
{
padding
:
10px
0
}
.comment__wrapper
{
padding
:
0
10px
.1px
}
.comment
#comment
,
.comment
.item
{
margin-bottom
:
10px
;
padding
:
10px
}
.comment
#comment__avatar
,
.comment
.item__avatar
{
margin-bottom
:
10px
}
.other__title
{
margin-top
:
-280px
}
.other__content
{
padding
:
20px
;
margin
:
40px
auto
10px
}
.other__meta--list
{
margin-bottom
:
40px
}
.post__toc
{
left
:
0
;
background-color
:
#fff
;
width
:
100%
;
top
:
41px
;
bottom
:
0
}}
\ No newline at end of file
\ No newline at end of file
src/main/resources/skins/Casper/css/base.scss
View file @
c113deb8
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
* skin style
* skin style
*
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.3.
0.1, Feb 9
, 2020
* @version 0.3.
1.0, Apr 18
, 2020
*/
*/
@import
"../../../scss/reset"
;
@import
"../../../scss/reset"
;
@import
"../../../scss/usite"
;
@import
"../../../scss/usite"
;
...
@@ -491,6 +491,7 @@ a {
...
@@ -491,6 +491,7 @@ a {
left
:
60px
;
left
:
60px
;
height
:
99px
;
height
:
99px
;
width
:
99px
;
width
:
99px
;
display
:
none
;
}
}
}
}
}
}
...
...
src/main/resources/skins/Casper/js/common.js
View file @
c113deb8
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
* @fileoverview util and every page should be used.
* @fileoverview util and every page should be used.
*
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.
0.1.0, Apr 11
, 2020
* @version 1.
1.0.0, Apr 18
, 2020
*/
*/
import
'
../../../js/common
'
import
'
../../../js/common
'
...
@@ -83,6 +83,7 @@ window.Skin = {
...
@@ -83,6 +83,7 @@ window.Skin = {
$
(
'
.article__top
'
).
css
(
'
top
'
,
0
)
$
(
'
.article__top
'
).
css
(
'
top
'
,
0
)
}
else
{
}
else
{
$
(
'
.article__top
'
).
css
(
'
top
'
,
-
61
)
$
(
'
.article__top
'
).
css
(
'
top
'
,
-
61
)
$
(
'
.article__share .item__qr
'
).
hide
();
}
}
if
(
$
(
'
.article__toc li
'
).
length
===
0
)
{
if
(
$
(
'
.article__toc li
'
).
length
===
0
)
{
...
...
src/main/resources/skins/Casper/js/common.min.js
View file @
c113deb8
This source diff could not be displayed because it is too large. You can
view the blob
instead.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
