hexo-theme-stellar/source/css/_plugins/comments/valine.styl

218 lines
5.5 KiB
Stylus

.cmt-body.valine
--more-before: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 246, 246, .9))
--more-after: rgba(246, 246, 246, .9)
margin-top: 1rem
#valine_container
line-height: 1.5 !important
img
display: inline
.vwrap
background: var(--card)
border-radius: $border-block
border-style: dashed
border: 1px dashed var(--text-meta)
&:hover
border-color: $color-theme
.vheader
border-color: $color-theme
.cancel-reply
margin-top: 0
margin-bottom: 0
.vheader
margin: -10px
padding: 5px 10px 0
background: var(--site-bg)
border-bottom: 1px dashed var(--text-meta)
.vinput
border: none
.vnick
margin-left: 0;
.vedit
.vicon
height: 22px
.vemojis,.vpreview
background: var(--block)
border-radius: 4px
padding: 0.5rem
scrollbar(0, 0)
.vemoji
max-height: 22px
max-width: 100px
i
width: auto
padding: 8px
border-radius: 4px
trans2: box-shadow background
&:hover
background: linear-gradient(145deg, #eee, #fff)
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
&:active
background: linear-gradient(145deg, #eee, #fff)
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
.vedit
.vctrl span
padding: 0
margin: 10px
span
fill: var(--text-p1)
&.actived
fill: $color-theme
.vcount
color: var(--text-p1)
font-size: $fs-13
padding: 0
font-weight: inherit
.vnum
color: var(--text-p1)
font-size: $fs-h2
font-weight: 700
button
border: none
padding: 4px 2rem
border-radius: 4px
background: var(--block)
color: var(--text-p1)
line-height: 2
font-size: 14px
font-weight: 500
trans()
&:hover
background: var(--block-hover)
&.vmore
width: 100%
padding: 8px 2rem
.vcards
margin-top: 0.5rem
.vcard
display: flex
position: relative
.vcontent.expand
&:before
background: var(--more-before);
&:after
background: var(--more-after);
.vimg
width: 40px
height: 40px
z-index: 1
.vh
margin-left: -46px
padding-bottom: 0
width: 100%
position: relative
.vhead
line-height: 1.2
.vnick
margin-left: 44px
line-height: inherit
font-size: $fs-14
.vtime
margin-left: 44px
font-size: $fs-12
font-weight: 500
.vat
font-size: $fs-12
.vvisitor
display: none
>.vcard
border-radius: $border-block
background: var(--card)
border: 1px dashed var(--block-border)
padding: 1rem
margin-bottom: 1rem
&:hover
border-color: $color-theme;
>.vh
border-bottom: none
>.vquote
border-left: none
padding-left: 0
>.vcard
border-top: 1px dashed var(--block-border)
.vimg
padding: 0
background: var(--block)
.vhead
span.vnick
color: var(--text-p2)
cursor: default
a.vnick
color: #ff9800
font-weight: 700
&:hover
color: $color-hover
.vsys
display: none
.vmeta
position: static !important
.vat
font-weight: bold
color: var(--text-p1)
background: var(--card)
padding: 4px 8px
border-radius: 2px
position: absolute
top: 0
right: 0
&:hover
color: $color-hover
background-color: var(--block)
.vcontent
padding-top: 0
margin-top: .75em
blockquote
padding-top: 1rem
padding-bottom: 1rem
background: var(--block)
border-left: 3px solid $color-theme
code
color: var(--text-p1)
background: var(--block);
margin: 0 2px;
pre
background: var(--block)
code
border: none
a
color: $color-link
line-height: inherit
trans()
&:hover
color: $color-hover
text-decoration: underline
p
color: var(--text-p1)
line-height: inherit
.vemoji
max-height: 24px
border-radius: 0
margin-top: -10px
max-width: 100px
.vempty
color: var(--color-meta)
.vpower
&,a
font-size: $fs-12
a
color: var(--text-p1)
&:hover
text-decoration: underline
color: $color-hover
.vinput
color: var(--text-p1)
p
color: var(--text-p1)
body[theme='dark']
.cmt-body.valine
--more-before: 0 0
--more-after: #393c40
@media (prefers-color-scheme: dark)
.cmt-body.valine
--more-before: 0 0
--more-after: #393c40