mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-03 19:07:56 +09:00
Add solitude
This commit is contained in:
IF-chan
@@ -0,0 +1,4 @@
|
||||
#post
|
||||
.google-ads-warp
|
||||
+maxWidth900()
|
||||
margin 0 1rem
|
||||
@@ -0,0 +1,135 @@
|
||||
.comment-barrage
|
||||
position fixed
|
||||
bottom 0
|
||||
right 20px
|
||||
padding 0 0 20px 10px
|
||||
display none
|
||||
flex-direction column
|
||||
justify-content flex-end
|
||||
z-index 999
|
||||
transition all .3s ease 0s
|
||||
user-select none
|
||||
|
||||
+maxWidth768()
|
||||
display none !important
|
||||
|
||||
.comment-barrage-item
|
||||
min-width 300px
|
||||
max-width 300px
|
||||
width fit-content
|
||||
min-height 80px
|
||||
max-height 150px
|
||||
margin 4px
|
||||
padding 8px 14px
|
||||
background var(--efu-maskbgdeep)
|
||||
border-radius 8px
|
||||
color var(--efu-fontcolor)
|
||||
animation 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageIn;
|
||||
transition all 0.3s ease 0s
|
||||
display: flex
|
||||
flex-direction column
|
||||
border var(--style-border)
|
||||
backdrop-filter saturate(180%) blur(20px)
|
||||
box-shadow var(--efu-shadow-border)
|
||||
overflow hidden
|
||||
|
||||
&:hover
|
||||
border var(--style-border-hover)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
|
||||
&.out
|
||||
opacity 0
|
||||
animation 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageOut
|
||||
|
||||
&.hovered
|
||||
opacity 0
|
||||
|
||||
.comment-barrage-close
|
||||
color var(--efu-secondtext)
|
||||
cursor pointer
|
||||
line-height 1
|
||||
margin 4px
|
||||
|
||||
&:hover
|
||||
color var(--efu-main)
|
||||
|
||||
.solitude
|
||||
color var(--efu-fontcolor)
|
||||
font-size 18px
|
||||
|
||||
.barrageHead
|
||||
height 30px
|
||||
padding 0 0 6px
|
||||
line-height 30px
|
||||
font-size 12px
|
||||
border-bottom var(--style-border)
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
font-weight 700
|
||||
|
||||
.barrageTitle
|
||||
color var(--efu-card-bg)
|
||||
margin-right 8px
|
||||
background var(--efu-fontcolor)
|
||||
line-height 1
|
||||
padding 4px
|
||||
border-radius 4px
|
||||
white-space nowrap
|
||||
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
color var(--efu-white)
|
||||
|
||||
.barrageAvatar
|
||||
width 16px
|
||||
height 16px
|
||||
margin 0 8px 0 auto
|
||||
border-radius 50%
|
||||
background var(--efu-secondbg)
|
||||
|
||||
.barrageContent
|
||||
height calc(100% - 30px)
|
||||
overflow hidden
|
||||
width fit-content
|
||||
max-height 48px
|
||||
font-size 14px !important
|
||||
font-weight 400 !important
|
||||
|
||||
h1, h2, h3, h4
|
||||
font-size 14px !important
|
||||
font-weight 400 !important
|
||||
margin 8px 0 !important
|
||||
|
||||
a
|
||||
pointer-events none
|
||||
font-size 14px !important
|
||||
|
||||
p
|
||||
margin 8px 0
|
||||
line-height 1.3
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
-webkit-line-clamp 2
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
font-size 14px
|
||||
max-width 270px
|
||||
|
||||
img:not(.tk-owo-emotion)
|
||||
display none
|
||||
img.tk-owo-emotion
|
||||
width 16px
|
||||
padding 0
|
||||
margin 0
|
||||
transform translateY(2px)
|
||||
|
||||
pre, li, blockquote, br
|
||||
display none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
height 0
|
||||
width 4px
|
||||
|
||||
&::-webkit-scrollbar-button
|
||||
display none
|
||||
@@ -0,0 +1,214 @@
|
||||
#post
|
||||
.post-copyright
|
||||
background var(--efu-secondbg)
|
||||
border-width 1px
|
||||
transition 0.3s
|
||||
position relative
|
||||
margin 80px 0 .5rem
|
||||
border-radius 12px
|
||||
padding 34px 0 20px 0
|
||||
border var(--style-border-always)
|
||||
|
||||
+maxWidth768()
|
||||
box-shadow var(--efu-shadow-border)
|
||||
padding: 1rem 1.3rem;
|
||||
|
||||
.post-copyright__author_group
|
||||
.post-copyright__author_img
|
||||
width 64px
|
||||
height 64px
|
||||
margin auto
|
||||
border-radius 64px
|
||||
overflow hidden
|
||||
position absolute
|
||||
left calc(50% - 33px)
|
||||
top -33px
|
||||
border var(--style-border-always)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
|
||||
img
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
object-position center
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
|
||||
&:hover
|
||||
transform scale(1.3)
|
||||
|
||||
.post-copyright__author_name
|
||||
text-align center
|
||||
font-size 20px
|
||||
font-weight 700
|
||||
margin-top 16px
|
||||
color var(--efu-fontcolor)
|
||||
line-height 1
|
||||
|
||||
.post-copyright__author_desc
|
||||
text-align center
|
||||
font-size 14px
|
||||
color var(--efu-secondtext)
|
||||
margin-top 4px
|
||||
|
||||
.post-copyright__notice
|
||||
font-size 12px
|
||||
margin 0.5rem 0
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.post-copyright-info
|
||||
padding-left 0
|
||||
color var(--efu-secondtext)
|
||||
overflow hidden
|
||||
display -webkit-box
|
||||
-webkit-line-clamp 3
|
||||
-webkit-box-orient vertical
|
||||
text-align center
|
||||
max-width 500px
|
||||
|
||||
+maxWidth768()
|
||||
-webkit-line-clamp 2
|
||||
|
||||
a
|
||||
text-decoration none
|
||||
word-break break-word
|
||||
padding 0 4px
|
||||
border-radius 4px
|
||||
color var(--efu-fontcolor)
|
||||
font-weight 700
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
background-color var(--efu-main)
|
||||
color var(--efu-white)
|
||||
cursor pointer
|
||||
border-radius 4px
|
||||
|
||||
.social-share
|
||||
display flex
|
||||
justify-content center
|
||||
height 40px
|
||||
margin .5rem auto
|
||||
gap .5rem
|
||||
flex-wrap wrap
|
||||
|
||||
.social-share-ico
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
width 40px
|
||||
height 40px
|
||||
border-radius 12px
|
||||
border var(--style-border)
|
||||
cursor pointer
|
||||
transition .3s
|
||||
|
||||
+maxWidth768()
|
||||
&:nth-child(n+6)
|
||||
display none
|
||||
|
||||
&:hover
|
||||
color white
|
||||
|
||||
.icon-qq
|
||||
color #56b6e7
|
||||
border-color #56b6e7
|
||||
&:hover
|
||||
background-color #56b6e7
|
||||
|
||||
.icon-weibo
|
||||
color #d44040
|
||||
border-color #d44040
|
||||
|
||||
&:hover
|
||||
background-color #d44040
|
||||
|
||||
.icon-facebook
|
||||
color #415dc9
|
||||
border-color #415dc9
|
||||
|
||||
&:hover
|
||||
background-color #415dc9
|
||||
|
||||
.icon-twitter
|
||||
color #56b6e7
|
||||
border-color #56b6e7
|
||||
|
||||
&:hover
|
||||
background-color #56b6e7
|
||||
|
||||
.icon-telegram
|
||||
color #56b6e7
|
||||
border-color #56b6e7
|
||||
|
||||
&:hover
|
||||
background-color #56b6e7
|
||||
|
||||
.icon-linkedin
|
||||
color #0077b5
|
||||
border-color #0077b5
|
||||
|
||||
&:hover
|
||||
background-color #0077b5
|
||||
.icon-whatsapp
|
||||
color #25d366
|
||||
border-color #25d366
|
||||
|
||||
&:hover
|
||||
background-color #25d366
|
||||
.icon-link
|
||||
color #425AEF
|
||||
border-color #425AEF
|
||||
|
||||
&:hover
|
||||
background-color #425AEF
|
||||
.icon-qrcode
|
||||
position relative
|
||||
color #000
|
||||
border-color #000
|
||||
|
||||
+maxWidth900()
|
||||
display none
|
||||
|
||||
&:hover
|
||||
background-color #000
|
||||
|
||||
.share-main
|
||||
display flex
|
||||
|
||||
.share-main
|
||||
display none
|
||||
position absolute
|
||||
bottom 1.7rem
|
||||
z-index 100
|
||||
padding-bottom 15px
|
||||
|
||||
&-all
|
||||
padding 12px
|
||||
border-radius 12px
|
||||
background var(--efu-background)
|
||||
animation donate_effcet 0.3s 0.1s ease both
|
||||
flex-direction column
|
||||
border var(--style-border-always)
|
||||
|
||||
.reward-dec
|
||||
font-size 0.6rem
|
||||
color var(--efu-fontcolor)!important
|
||||
text-align center
|
||||
|
||||
#qrcode
|
||||
width 150px
|
||||
height 150px
|
||||
min-width 150px
|
||||
min-height 150px
|
||||
background var(--efu-white)
|
||||
padding 8px
|
||||
border-radius 8px
|
||||
margin-bottom 8px
|
||||
border var(--style-border-always)
|
||||
|
||||
img
|
||||
width 132px
|
||||
height 132px
|
||||
@@ -0,0 +1,18 @@
|
||||
if hexo-config('comment.commentBarrage')
|
||||
@import 'commentBarrage'
|
||||
|
||||
@import "copyright"
|
||||
|
||||
@import "meta"
|
||||
|
||||
@import "relatedPost"
|
||||
|
||||
@import "tools"
|
||||
|
||||
@import "pagination"
|
||||
|
||||
if hexo-config('post_ai.enable')
|
||||
@import "postAI"
|
||||
|
||||
if hexo-config('google_adsense.enable')
|
||||
@import "ads.styl"
|
||||
@@ -0,0 +1,377 @@
|
||||
.post
|
||||
#page-header.post-bg
|
||||
height 20rem
|
||||
background-color var(--efu-background)
|
||||
transition .6s
|
||||
overflow hidden
|
||||
|
||||
+minWidth1300()
|
||||
height: 25rem
|
||||
|
||||
+maxWidth768()
|
||||
height 30rem
|
||||
background-color var(--efu-main) !important
|
||||
transition 0s
|
||||
margin-bottom -12px
|
||||
|
||||
&::before
|
||||
transition .3s
|
||||
height 20rem
|
||||
background-color var(--efu-main)
|
||||
opacity 1
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
display block
|
||||
width 100%
|
||||
content ""
|
||||
|
||||
+minWidth1300()
|
||||
height 25rem
|
||||
opacity 0
|
||||
background-color var(--efu-main)
|
||||
animation slide-in-op .6s 0s forwards
|
||||
|
||||
+maxWidth768()
|
||||
height 15rem
|
||||
|
||||
.post-bg
|
||||
.main-hero-waves-area
|
||||
width 100%
|
||||
position absolute
|
||||
left 0
|
||||
bottom -11px
|
||||
|
||||
.waves-area .waves-svg
|
||||
width 100%
|
||||
height 60px
|
||||
|
||||
.parallax > use
|
||||
animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
|
||||
|
||||
.parallax > use:nth-child(1)
|
||||
animation-delay -2s
|
||||
animation-duration 7s
|
||||
fill var(--efu-background)
|
||||
opacity .5
|
||||
|
||||
.parallax > use:nth-child(2)
|
||||
animation-delay -3s
|
||||
animation-duration 10s
|
||||
fill var(--efu-background)
|
||||
opacity .6
|
||||
|
||||
.parallax > use:nth-child(3)
|
||||
animation-delay -4s
|
||||
animation-duration 13s
|
||||
fill var(--efu-background)
|
||||
opacity .7
|
||||
|
||||
.parallax > use:nth-child(4)
|
||||
animation-delay -5s
|
||||
animation-duration 20s
|
||||
fill var(--efu-background)
|
||||
|
||||
+maxWidth768()
|
||||
.main-hero-waves-area
|
||||
display none
|
||||
|
||||
#post-cover
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
min-width 50vw
|
||||
min-height 20rem
|
||||
opacity .8
|
||||
|
||||
+minWidth768()
|
||||
min-height 15rem !important
|
||||
height 70% !important
|
||||
opacity 1 !important
|
||||
|
||||
.coverdiv
|
||||
width 70%
|
||||
height 100%
|
||||
position relative
|
||||
overflow hidden
|
||||
margin 0 -20% 0 auto
|
||||
transform rotate(10deg) translateY(-10%) scale(2)
|
||||
filter blur(10px)
|
||||
|
||||
&:after
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
box-shadow 110px -130px 300px 60px var(--efu-main) inset
|
||||
|
||||
+minWidth768()
|
||||
width 70%
|
||||
height 100%
|
||||
position relative
|
||||
overflow hidden
|
||||
margin 0 -20% 0 auto
|
||||
transform rotate(10deg) translateY(-8%) scale(1.8)
|
||||
filter blur(10px)
|
||||
opacity 0
|
||||
|
||||
&.loaded
|
||||
display block
|
||||
opacity .5
|
||||
animation showCover 1s .3s backwards
|
||||
transform rotate(10deg) translateY(-10%) scale(2)
|
||||
|
||||
+maxWidth768()
|
||||
margin 0 0 0 auto
|
||||
transform rotate(0) translateY(0) scale(1)
|
||||
filter blur(0)
|
||||
width 100%
|
||||
height 30rem
|
||||
|
||||
&:after
|
||||
box-shadow 0 0 205px 59px var(--efu-main) inset
|
||||
|
||||
&.loaded
|
||||
display block
|
||||
|
||||
#post-info
|
||||
top 0
|
||||
position absolute
|
||||
padding 0 3rem
|
||||
margin 0 auto
|
||||
color var(--efu-white)
|
||||
max-width 1400px
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items flex-start
|
||||
height calc(100% + 0px)
|
||||
justify-content center
|
||||
animation slide-in .6s 0s backwards
|
||||
width 100%
|
||||
text-align center
|
||||
|
||||
+minWidth1300()
|
||||
height calc(100% + 0px)
|
||||
top 0
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
+maxWidth900()
|
||||
bottom 1.5rem
|
||||
text-align left
|
||||
|
||||
+maxWidth768()
|
||||
padding 0 6%
|
||||
justify-content normal
|
||||
padding-top 18rem
|
||||
|
||||
.post-title
|
||||
color var(--efu-white)
|
||||
font-weight 700
|
||||
font-size 2.3rem
|
||||
line-height 1.2
|
||||
text-align left
|
||||
margin 1rem 0 1rem 0
|
||||
-webkit-line-clamp 2
|
||||
padding 0
|
||||
overflow hidden
|
||||
|
||||
+maxWidth768()
|
||||
font-size 1.2rem
|
||||
-webkit-line-clamp 3
|
||||
margin .2rem auto
|
||||
text-align center
|
||||
z-index 1
|
||||
|
||||
+minWidth1300()
|
||||
width 1100px
|
||||
font-size 2.6rem !important
|
||||
|
||||
#post-meta
|
||||
margin-top .4rem
|
||||
transition .3s
|
||||
display flex
|
||||
user-select none
|
||||
color var(--light-grey)
|
||||
font-size 95%
|
||||
|
||||
+maxWidth768()
|
||||
font-size 90%
|
||||
padding 0 2rem
|
||||
|
||||
a
|
||||
color var(--light-grey)
|
||||
transition all .3s ease-out 0s
|
||||
|
||||
i
|
||||
font-size 16px
|
||||
margin-right 4px
|
||||
|
||||
> div
|
||||
text-align left
|
||||
|
||||
.meta-secondline
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
justify-content flex-start
|
||||
align-items center
|
||||
|
||||
+maxWidth768()
|
||||
justify-content center
|
||||
|
||||
> span
|
||||
display: flex
|
||||
align-items center
|
||||
line-height 1
|
||||
margin 0 .5rem
|
||||
|
||||
+maxWidth768()
|
||||
line-height 1.5
|
||||
|
||||
> span:first-child
|
||||
margin-left 0
|
||||
|
||||
.post-meta-date, .post-meta-wordcount, .post-meta-position, .post-meta-pv
|
||||
opacity .6
|
||||
|
||||
.post-meta-separator
|
||||
margin 0 1rem 0 0
|
||||
|
||||
.post-meta-pv
|
||||
margin-right 8px
|
||||
padding 0 8px
|
||||
display flex
|
||||
align-items center
|
||||
border-radius 12px
|
||||
|
||||
&:hover
|
||||
opacity 1
|
||||
background var(--efu-white-op)
|
||||
text-decoration none
|
||||
color var(--efu-white)
|
||||
|
||||
.post-meta-pv-cv
|
||||
margin-left .8rem
|
||||
|
||||
#busuanzi_value_page_pv
|
||||
font-weight 800
|
||||
|
||||
.post-meta-commentcount
|
||||
opacity .6
|
||||
cursor pointer
|
||||
transition .3s
|
||||
border-radius 12px
|
||||
padding 8px
|
||||
|
||||
&:hover
|
||||
opacity 1
|
||||
background var(--efu-white-op)
|
||||
|
||||
.post-meta-wechat
|
||||
margin-right .8rem
|
||||
opacity .6
|
||||
transition .3s
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
opacity 1
|
||||
background var(--efu-white-op)
|
||||
|
||||
#post-firstinfo
|
||||
text-align left
|
||||
display flex
|
||||
white-space nowrap
|
||||
user-select none
|
||||
|
||||
+maxWidth768()
|
||||
white-space nowrap
|
||||
margin 0 auto
|
||||
z-index 1
|
||||
|
||||
.tag_share
|
||||
display none
|
||||
|
||||
.meta-firstline
|
||||
display flex
|
||||
align-items center
|
||||
height 32px
|
||||
|
||||
+maxWidth768()
|
||||
margin-bottom .4rem
|
||||
|
||||
.post-meta-original
|
||||
background var(--efu-white-op)
|
||||
color var(--efu-white)
|
||||
padding 0 .5rem
|
||||
font-size .7rem
|
||||
margin auto
|
||||
border-radius 8px
|
||||
font-weight 700
|
||||
line-height 32px
|
||||
width 100%
|
||||
height 100%
|
||||
display flex
|
||||
|
||||
&:hover
|
||||
color var(--efu-main)
|
||||
background var(--efu-white)
|
||||
border-radius 8px
|
||||
|
||||
.tag_share
|
||||
margin-left .5rem
|
||||
|
||||
.post-meta__tag-list
|
||||
display flex
|
||||
flex-direction row
|
||||
align-items center
|
||||
|
||||
+maxWidth768()
|
||||
display none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display none
|
||||
|
||||
.post-meta__tags
|
||||
color var(--efu-white)
|
||||
opacity .8
|
||||
margin-right 8px
|
||||
padding 0 8px
|
||||
border-radius 12px
|
||||
display flex
|
||||
align-items center
|
||||
flex-direction row
|
||||
|
||||
&:hover
|
||||
color var(--efu-white)
|
||||
opacity 1
|
||||
background var(--efu-white-op)
|
||||
|
||||
+maxWidth768()
|
||||
margin 0 .5rem 0 0
|
||||
|
||||
span.post-meta-categories
|
||||
background-color var(--efu-white-op)
|
||||
border-radius 8px
|
||||
line-height 32px
|
||||
height 32px
|
||||
transition .3s
|
||||
|
||||
&:not(:first-child)
|
||||
margin-left 8px
|
||||
|
||||
&:hover
|
||||
background-color var(--efu-white)
|
||||
|
||||
a.post-meta-categories
|
||||
color var(--efu-white)
|
||||
font-size .7rem
|
||||
width 100%
|
||||
height 100%
|
||||
display flex
|
||||
padding 0 .5rem
|
||||
|
||||
&:hover
|
||||
color var(--efu-main)
|
||||
@@ -0,0 +1,190 @@
|
||||
#post #pagination
|
||||
overflow hidden
|
||||
position inherit
|
||||
border var(--style-border-always)
|
||||
|
||||
div:only-child
|
||||
width 100%!important
|
||||
|
||||
+minWidth1300()
|
||||
position fixed
|
||||
width 300px
|
||||
bottom -100px
|
||||
right 20px
|
||||
z-index 7
|
||||
height fit-content
|
||||
transition cubic-bezier(.42, 0, .3, 1.11) .3s
|
||||
border var(--style-border)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
opacity 0
|
||||
|
||||
+maxWidth768()
|
||||
border-radius 12px
|
||||
border var(--style-border-always)
|
||||
box-shadow var(--efu-shadow-border)
|
||||
|
||||
&.pagination-post
|
||||
margin-top 1.5rem
|
||||
background var(--efu-card-bg)
|
||||
|
||||
+minWidth768()
|
||||
border-radius 12px
|
||||
margin-top 1rem
|
||||
|
||||
+minWidth1300()
|
||||
margin-top 0
|
||||
|
||||
.next-post, .prev-post, .next-post.pull-right, .prev-post.pull-left
|
||||
background var(--efu-secondbg)
|
||||
|
||||
+minWidth1300()
|
||||
background var(--efu-maskbgdeep)
|
||||
backdrop-filter blur(5px)
|
||||
transform translateZ(0)
|
||||
|
||||
+maxWidth768()
|
||||
background var(--efu-card-bg)
|
||||
|
||||
.next-post.pull-full, .prev-post.pull-full
|
||||
+minWidth1300()
|
||||
width 100%
|
||||
|
||||
.prev-post.pull-left
|
||||
+minWidth1300()
|
||||
display none
|
||||
|
||||
+maxWidth768()
|
||||
border-bottom var(--style-border-always)
|
||||
|
||||
.next-post.pull-right
|
||||
+minWidth1300()
|
||||
width 100%
|
||||
|
||||
.next-post, .prev-post
|
||||
width 50%
|
||||
|
||||
+minWidth1300()
|
||||
text-align left
|
||||
position relative
|
||||
|
||||
+maxWidth768()
|
||||
width 100%
|
||||
|
||||
.label
|
||||
color var(--efu-fontcolor)
|
||||
text-transform uppercase
|
||||
font-size 90%
|
||||
|
||||
+minWidth1300()
|
||||
color var(--efu-fontcolor)
|
||||
font-weight 700
|
||||
font-size 12px
|
||||
margin-bottom 0.5rem
|
||||
border-bottom var(--style-border)
|
||||
line-height 1
|
||||
padding-bottom 0.5rem
|
||||
|
||||
+maxWidth768()
|
||||
text-align left
|
||||
|
||||
a
|
||||
position relative
|
||||
display block
|
||||
overflow hidden
|
||||
height 150px
|
||||
|
||||
+minWidth768()
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
|
||||
div
|
||||
color: var(--efu-white)
|
||||
|
||||
+maxWidth768()
|
||||
&:hover
|
||||
background var(--efu-none)
|
||||
|
||||
.prev-post
|
||||
.pagination-info
|
||||
text-align left
|
||||
|
||||
a
|
||||
+minWidth768()
|
||||
border-right var(--efu-main-op)
|
||||
border-right-width 1px
|
||||
border-right-style solid
|
||||
|
||||
+minWidth1300()
|
||||
border none
|
||||
height fit-content
|
||||
padding 0.5rem 0
|
||||
|
||||
.next-post
|
||||
.pagination-info
|
||||
text-align right
|
||||
|
||||
+minWidth1300()
|
||||
text-align left
|
||||
|
||||
a
|
||||
+minWidth768()
|
||||
border-left var(--efu-main-op)
|
||||
border-left-width 1px
|
||||
border-left-style solid
|
||||
display flex
|
||||
align-items flex-start
|
||||
height 150px
|
||||
|
||||
+minWidth1300()
|
||||
border none
|
||||
height fit-content
|
||||
padding 0.5rem 0
|
||||
|
||||
.pagination-info
|
||||
position absolute
|
||||
top 50%
|
||||
padding 1rem 2rem
|
||||
width 100%
|
||||
transform translate(0, -50%)
|
||||
|
||||
+minWidth768()
|
||||
padding 1rem 1.5rem 1rem 1.5rem
|
||||
position relative
|
||||
display flex
|
||||
top 0
|
||||
transform none
|
||||
flex-direction column
|
||||
justify-content center
|
||||
margin auto
|
||||
height 100%
|
||||
|
||||
+minWidth1300()
|
||||
padding 0.5rem 1rem
|
||||
transform none
|
||||
|
||||
.next_info, .prev_info
|
||||
color var(--efu-fontcolor)
|
||||
font-weight 700
|
||||
-webkit-line-clamp 2
|
||||
white-space normal
|
||||
line-height 1.3
|
||||
font-size .9rem
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
overflow hidden
|
||||
margin-bottom 10px
|
||||
|
||||
+minWidth1300()
|
||||
font-size 14px
|
||||
font-weight 400
|
||||
margin-bottom 0
|
||||
|
||||
+maxWidth768()
|
||||
text-align left
|
||||
|
||||
&.show-window
|
||||
+minWidth1300()
|
||||
bottom 20px
|
||||
opacity 1
|
||||
@@ -0,0 +1,130 @@
|
||||
.post-ai
|
||||
background var(--efu-secondbg)
|
||||
border-radius 12px
|
||||
padding 12px
|
||||
line-height 1.3
|
||||
border var(--style-border-always)
|
||||
margin-top 16px
|
||||
min-height 101.22px
|
||||
box-shadow var(--efu-shadow-border)
|
||||
|
||||
+maxWidth768()
|
||||
margin-top 22px
|
||||
|
||||
.ai-title
|
||||
display flex
|
||||
color var(--efu-lighttext)
|
||||
border-radius 8px
|
||||
align-items center
|
||||
padding 0 12px
|
||||
user-select none
|
||||
|
||||
.ai-title-left
|
||||
display flex
|
||||
align-items center
|
||||
color var(--efu-lighttext)
|
||||
|
||||
i.ai-title-icon
|
||||
width 24px
|
||||
height 24px
|
||||
display flex
|
||||
background var(--efu-lighttext)
|
||||
color var(--efu-card-bg)
|
||||
font-size 14px
|
||||
border-radius 20px
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.ai-title-text
|
||||
font-weight 700
|
||||
margin-left 8px
|
||||
line-height 1
|
||||
font-size 14px
|
||||
|
||||
.ai-tag
|
||||
font-size 12px
|
||||
background-color var(--efu-lighttext)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
color var(--efu-card-bg)
|
||||
font-weight 700
|
||||
border-radius 12px
|
||||
margin-left auto
|
||||
line-height 12px
|
||||
padding 6px 8px
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
cursor pointer
|
||||
transition .3s
|
||||
|
||||
&.loadingAI
|
||||
animation-duration 2s
|
||||
animation-name AILoading
|
||||
animation-iteration-count infinite
|
||||
animation-direction alternate
|
||||
cursor default
|
||||
|
||||
&:hover:not(.loadingAI)
|
||||
background var(--efu-fontcolor)
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.ai-explanation
|
||||
margin-top 12px
|
||||
padding 8px 12px
|
||||
background var(--efu-card-bg)
|
||||
border-radius 8px
|
||||
border var(--style-border-always)
|
||||
font-size 15px
|
||||
line-height 1.4
|
||||
display none
|
||||
text-align left
|
||||
|
||||
.blinking-cursor
|
||||
background-color var(--efu-lighttext)
|
||||
width 14px
|
||||
height 14px
|
||||
border-radius 16px
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
animation blinking-cursor 2s infinite
|
||||
margin-left 4px
|
||||
margin-bottom 3px
|
||||
transform scale(.6)
|
||||
|
||||
.ai-suggestions
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
.ai-suggestions-item
|
||||
margin-top 12px
|
||||
padding 8px 12px
|
||||
background var(--efu-card-bg)
|
||||
border-radius 8px 8px 8px 0
|
||||
border var(--style-border-always)
|
||||
font-size 14px
|
||||
line-height 1.4
|
||||
display flex
|
||||
width fit-content
|
||||
margin-right 12px
|
||||
cursor pointer
|
||||
transition .3s
|
||||
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
color var(--efu-white)
|
||||
|
||||
.ai-bottom
|
||||
width 100%
|
||||
margin-top 12px
|
||||
padding 0 12px
|
||||
display flex
|
||||
|
||||
.ai-tips
|
||||
font-size 12px
|
||||
color var(--efu-secondtext)
|
||||
margin-right auto
|
||||
|
||||
.ai-report
|
||||
font-size 12px
|
||||
color var(--efu-secondtext)
|
||||
white-space nowrap
|
||||
@@ -0,0 +1,149 @@
|
||||
.relatedPosts
|
||||
margin-top 2rem
|
||||
user-select none
|
||||
|
||||
.relatedPosts-list > div
|
||||
position relative
|
||||
display inline-block
|
||||
overflow hidden
|
||||
margin 3px
|
||||
width calc(33.333% - 6px)
|
||||
height 200px
|
||||
background var(--efu-main)
|
||||
vertical-align bottom
|
||||
|
||||
.cover
|
||||
width 360px
|
||||
min-width 45%
|
||||
height 100%
|
||||
transition all .6s ease 0s
|
||||
object-fit cover
|
||||
filter brightness(.9)
|
||||
max-width 45%
|
||||
|
||||
&::after
|
||||
content ' '
|
||||
display block
|
||||
position absolute
|
||||
z-index 0
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
background url(error_img) 50%
|
||||
background-size cover
|
||||
|
||||
.content
|
||||
padding 0 1rem
|
||||
width 100%
|
||||
|
||||
.date
|
||||
color var(--light-grey)
|
||||
font-size 90%
|
||||
|
||||
.title
|
||||
color var(--efu-white)
|
||||
-webkit-line-clamp 2
|
||||
margin-right auto
|
||||
|
||||
a
|
||||
display flex
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
.headline
|
||||
margin-bottom .5rem
|
||||
font-weight 700
|
||||
font-size 20px
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
span
|
||||
margin-right auto
|
||||
margin-left 8px
|
||||
|
||||
a
|
||||
font-weight 400
|
||||
|
||||
&:hover
|
||||
color var(--efu-lighttext)
|
||||
|
||||
&-link
|
||||
display block
|
||||
justify-content space-between
|
||||
margin-left 8px
|
||||
font-size 13px
|
||||
|
||||
.relatedPosts-list
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
justify-content space-between
|
||||
flex-direction column
|
||||
|
||||
+maxWidth768()
|
||||
.relatedPosts,
|
||||
.relatedPosts-list > div
|
||||
margin 2px
|
||||
width calc(50% - 4px)
|
||||
height 150px
|
||||
|
||||
+maxWidth600()
|
||||
.relatedPosts,
|
||||
.relatedPosts-list > div
|
||||
width calc(100% - 4px)
|
||||
|
||||
+minWidth768()
|
||||
#post > div.relatedPosts > div.relatedPosts-list > div
|
||||
-webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
|
||||
border-radius 12px
|
||||
|
||||
.relatedPosts > .headline
|
||||
font-size .8em
|
||||
|
||||
+maxWidth1300()
|
||||
#post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7),
|
||||
#post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8)
|
||||
display none
|
||||
|
||||
.relatedPosts > .relatedPosts-list > div
|
||||
background var(--efu-secondbg)
|
||||
border var(--style-border)
|
||||
transition .3s
|
||||
cursor pointer
|
||||
overflow hidden
|
||||
width 100%
|
||||
margin-bottom 8px
|
||||
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
|
||||
.content
|
||||
.title
|
||||
color var(--efu-fontcolor)
|
||||
font-weight 700
|
||||
line-height 1.5
|
||||
-webkit-line-clamp 4
|
||||
font-size .9rem
|
||||
text-align left
|
||||
overflow hidden
|
||||
|
||||
.date
|
||||
color var(--efu-fontcolor)
|
||||
display none
|
||||
|
||||
&:hover
|
||||
a
|
||||
.title
|
||||
color var(--efu-white)
|
||||
|
||||
+maxWidth768()
|
||||
.relatedPosts
|
||||
display none
|
||||
|
||||
> .relatedPosts-list
|
||||
> div
|
||||
border-radius 4px
|
||||
|
||||
+minWidth768()
|
||||
.relatedPosts
|
||||
margin-top .5rem
|
||||
@@ -0,0 +1,260 @@
|
||||
#post
|
||||
.post-tools
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: center
|
||||
margin-top: 8px
|
||||
flex-wrap: wrap
|
||||
user-select: none
|
||||
|
||||
.post-tools-left
|
||||
white-space: nowrap
|
||||
display: flex
|
||||
text-overflow: ellipsis
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
|
||||
#quit-box
|
||||
position: fixed
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
background: rgba(0, 0, 0, .2)
|
||||
top: 0
|
||||
left: 0
|
||||
opacity: .01
|
||||
display: none
|
||||
z-index: 101
|
||||
margin: 0
|
||||
|
||||
+maxWidth768()
|
||||
height: calc(100vh - 380px)
|
||||
|
||||
// reward
|
||||
/.post-reward
|
||||
position: relative
|
||||
text-align: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
&:hover
|
||||
> .reward-main
|
||||
display: block
|
||||
|
||||
+minWidth768()
|
||||
> .reward-main
|
||||
display: flex
|
||||
justify-content: left
|
||||
|
||||
.reward-button
|
||||
color: var(--efu-white)
|
||||
background: var(--efu-theme)
|
||||
box-shadow: none
|
||||
|
||||
.reward-button
|
||||
background: var(--efu-red)
|
||||
color: var(--efu-white)
|
||||
padding: 0 16px
|
||||
height: 40px
|
||||
border-radius: 8px
|
||||
line-height: 39px
|
||||
box-shadow: var(--efu-shadow-red)
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
transition: all .4s ease 0s
|
||||
|
||||
i
|
||||
margin-right: 4px
|
||||
|
||||
&:hover
|
||||
background-color: var(--efu-theme)
|
||||
|
||||
.reward-main
|
||||
animation: .3s ease .1s 1 normal both running donate_effcet
|
||||
position: absolute
|
||||
bottom: 40px
|
||||
left: -96px
|
||||
z-index: 100
|
||||
display: none
|
||||
padding: 0 0 15px
|
||||
width: fit-content
|
||||
|
||||
+maxWidth768()
|
||||
justify-content: center !important
|
||||
position: fixed
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
z-index: 1003
|
||||
width: 100%
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
.reward-all
|
||||
margin: 0
|
||||
padding: .8rem
|
||||
border-radius: 12px
|
||||
background: var(--efu-card-bg)
|
||||
border: var(--style-border-always)
|
||||
display: flex
|
||||
box-shadow: var(--efu-shadow-border)
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around
|
||||
padding: 30px 10px 60px
|
||||
border-radius: 12px 12px 0 0
|
||||
|
||||
&::before
|
||||
position: absolute
|
||||
bottom: -10px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 20px
|
||||
content: ""
|
||||
|
||||
.reward-title
|
||||
font-weight: 700
|
||||
color: var(--efu-red)
|
||||
text-wrap: wrap
|
||||
|
||||
.reward-group
|
||||
display: flex
|
||||
margin-top: .5rem
|
||||
|
||||
.reward-item
|
||||
display: inline-block
|
||||
padding: 0 8px
|
||||
list-style-type: none
|
||||
vertical-align: top
|
||||
|
||||
img
|
||||
width: 130px
|
||||
height: 130px
|
||||
|
||||
.post-qr-code-desc
|
||||
padding-top: .4rem
|
||||
width: 130px
|
||||
color: var(--efu-gray)
|
||||
margin-top: -8px
|
||||
margin-bottom: 8px
|
||||
|
||||
.post-qr-code-img
|
||||
box-shadow: var(--efu-shadow-lightblack)
|
||||
border-radius: 12px
|
||||
border: var(--style-border-always)
|
||||
|
||||
.reward-main-btn
|
||||
background: var(--efu-secondbg)
|
||||
color: var(--efu-fontcolor)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
border-radius: 12px
|
||||
padding: 4px 0
|
||||
border: var(--style-border-always)
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
color: var(--efu-white)
|
||||
background: var(--efu-red)
|
||||
background-image: url(/img/flower.gif)
|
||||
box-shadow: var(--efu-shadow-red)
|
||||
|
||||
.reward-text
|
||||
margin-bottom: 0
|
||||
font-weight: 700
|
||||
|
||||
.reward-dec
|
||||
font-size: .6rem
|
||||
text-wrap: wrap
|
||||
|
||||
// rss
|
||||
|
||||
.reward-link.mode
|
||||
background: var(--efu-green)
|
||||
color: var(--efu-white)
|
||||
padding: 0 16px
|
||||
height: 40px
|
||||
line-height: 39px
|
||||
box-shadow: var(--efu-shadow-green)
|
||||
border-radius: 8px
|
||||
margin-left: .5rem
|
||||
cursor: pointer
|
||||
text-align: center
|
||||
transition: .3s
|
||||
|
||||
a
|
||||
color: var(--efu-white)
|
||||
|
||||
i
|
||||
margin-right: 4px
|
||||
|
||||
&:hover
|
||||
background: var(--efu-theme)
|
||||
box-shadow: none
|
||||
|
||||
|
||||
.post-tools-right
|
||||
padding-right: 0
|
||||
display: flex
|
||||
align-items: center
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
flex-wrap: wrap
|
||||
|
||||
.tag_share
|
||||
.post-meta__tag-list
|
||||
display: flex
|
||||
padding: 0
|
||||
width: 100%
|
||||
flex-wrap: wrap
|
||||
flex-direction: row
|
||||
|
||||
a
|
||||
margin-bottom: 8px
|
||||
margin-right: 8px
|
||||
|
||||
.post-meta__tags
|
||||
background: var(--efu-card-bg)
|
||||
border: var(--style-border-always)
|
||||
color: var(--efu-fontcolor)
|
||||
border-radius: 8px
|
||||
display: flex
|
||||
align-items: center
|
||||
white-space: nowrap
|
||||
height: 40px
|
||||
padding: 0 .6rem
|
||||
width: fit-content
|
||||
font-size: .85em
|
||||
transition: all .2s ease-in-out 0s
|
||||
|
||||
&:hover
|
||||
background: var(--efu-lighttext)
|
||||
box-shadow: var(--efu-shadow-main)
|
||||
color: var(--efu-white)
|
||||
|
||||
span.tagsPageCount
|
||||
color: var(--efu-lighttext)
|
||||
background: var(--efu-maskbgdeep)
|
||||
transition: all .2s ease-in-out 0s
|
||||
|
||||
span.tags-punctuation
|
||||
font-size: 12px
|
||||
margin-right: 1px
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.tagsPageCount, / #tag-page-tags .tagsPageCount
|
||||
padding: 2px
|
||||
background: var(--efu-fontcolor)
|
||||
border: var(--style-border-always)
|
||||
min-width: 22.5px
|
||||
display: inline-block
|
||||
border-radius: 4px
|
||||
text-align: center
|
||||
font-size: .6rem
|
||||
color: var(--efu-card-bg)
|
||||
margin-left: 4px
|
||||
Reference in New Issue
Block a user