docs_vue2/assets/styles/post.styl

356 lines
4.7 KiB
Stylus

@import "~highlight.js/styles/night-owl.css"
margin-y($top, $bottom = $top)
margin-top $top
margin-bottom $bottom
.post
padding 30px 60px
font-size 14px
line-height 1.8
color #282c33
font-weight 400
hyphens auto
.post-layout &
min-height 100%
margin-bottom -192px
&::after
content ""
display block
height 192px
.post-layout.no-links &
margin-bottom -58px
.no-links &::after
height 58px
.one-demo
margin 1em 0 1.25em
.one-details
margin-bottom 5px
[data-markdown]
h1
h1&
margin-y(0, 1.25em)
font-size 36px
small
vertical-align 0.1em
color #999
h2
h2&
margin-y(1.3em, 1.2em)
font-size 30px
&::before
content "#"
margin-right 5px
color #ccc
& + h3
margin-top 2em
h3
h3&
margin-y(1.25em, 1.15em)
font-size 24px
h4
h4&
margin-y(1.15em, 1.1em)
font-size 18px
h5
h5&
margin-y(1.05em)
font-size 14px
h6
h6&
margin-y(1em)
font-size 12px
h1
h1&
h2
h2&
h3
h3&
font-weight 500
clear both
h1
h1&
h2
h2&
h3
h3&
h4
h4&
h5
h5&
h6
h6&
color #333
line-height 1
br
br&
clear both
p
p&
margin-y(0.5em)
ul
ul&
ol
ol&
padding-left 1.5em
blockquote
blockquote&
margin 1em 0
padding-left 1em
border-left 5px solid #f1f1f1
color #666
transition color 0.2s, border-color 0.2s
&:hover
color #333
border-left-color #d3d3d3
table
table&
width 100%
border-collapse collapse
border 1px solid #f1f1f1
border-radius 4px
margin-y(1.5em)
thead
position sticky
top -1px
background #f3f6f988
backdrop-filter blur(4px)
th
&::after
content ""
position absolute
bottom 0
width 100%
height 1px
left 0
background #f1f1f1
pre
table
max-width 480px
th
td
min-width 90px
padding 8px 14px
border 1px solid #f1f1f1
border-style solid none
text-align left
vertical-align top
& > :first-child
margin-top 0
& > :last-child
margin-bottom 0
pre
font-size 90%
table
margin-y(0.2em, 0.5em)
td:first-child
white-space nowrap
a:link
a&:link
a:visited
a&:visited
text-decoration none
color #0052cc
transition color 0.2s
&:hover
color #06f
&:active
color #0046ad
code
code&
font-size 90%
hyphens none
font-family Menlo, consolas, monospace
&:not(pre > code)
padding 2px 4px
background-color #0066ff16
overflow visible
border-radius 3px
hr
hr&
height 1px
margin 2em 0
padding 0
background-color #eff0f1
border 0
clear both
figure
figure&
float right
width 60%
margin 0 0 30px 20px
& + h1
& + h2
& + h3
& + h4
& + h5
& + h6
margin-top 0
img
display block
margin auto
.preview
padding 20px
overflow hidden
border 1px solid #e5e5e5
transition box-shadow 0.2s
cursor pointer
text-align center
&:hover
box-shadow 0 0 5px rgba(0, 0, 0, 0.2)
&.hero
width 100%
float none
figcaption
figcaption&
margin-top 10px
font-size 12px
p
margin 0
line-height 20px
.caption
font-weight 500
.desc
color #999
img
img&
max-width 100%
max-height 100%
pre
pre&
border-radius 4px
white-space pre
overflow auto
line-height 1.6
code
border none
padding 18px 24px
var
font-family "PT Serif", Georgia, serif
kbd
display inline-block
padding 3px 5px 6px
font-size 90%
line-height 10px
color #444d56
vertical-align 1px
background-color #fafbfc
border solid 1px #c6cbd1
border-bottom-color #959da5
border-radius 3px
box-shadow inset 0 -1px 0 #959da5
.custom-block
.custom-block&
border 1px solid
border-radius 4px
margin 1em 0
padding 0.75em 1em
& > :first-child
margin-top 0
& > :last-child
margin-bottom 0
.veui-alert
.veui-alert&
margin 1em 0
p:first-child
margin-top 0
p:last-child
margin-bottom 0
.badges
.badges&
border none
padding 0
code
padding 2px 3px
background #333
border-radius 3px
color #fff
font-size 80%
.oss-badges&
border none
padding 0
a
margin-right 10px
.hljs-attr
color #c5e478
[data-target]
animation target-blink 5s ease 1 both
@keyframes target-blink
0%
background-color #f2f7ff
3%
9%
background-color #fff
6%
12%
80%
background-color #f2f7ff