211 lines
4.3 KiB
Stylus
211 lines
4.3 KiB
Stylus
:root
|
|
--ai-font-color var(--text-p2)
|
|
--ai-post-bg var(--block)
|
|
--ai-content-bg var(--site-bg)
|
|
--ai-content-border 1px solid var(--block-border)
|
|
--ai-border 1px solid var(--block-border)
|
|
--ai-tag-bg var(--card)
|
|
--ai-cursor var(--text-p1)
|
|
--ai-btn-bg var(--card)
|
|
--ai-title-color var(--text-p1)
|
|
--ai-btn-color var(--text-p2)
|
|
--ai-speech-content #fff
|
|
|
|
#post-ai.post-ai
|
|
background var(--ai-post-bg)
|
|
border-radius $border-card
|
|
padding 10px 12px 11px
|
|
line-height 1.3
|
|
border var(--ai-border)
|
|
margin-top 10px
|
|
margin-bottom 6px
|
|
transition all 0.3s
|
|
-webkit-transition all 0.3s
|
|
-moz-transition all 0.3s
|
|
-ms-transition all 0.3s
|
|
-o-transition all 0.3s
|
|
|
|
#post-ai .ai-title
|
|
display flex
|
|
color var(--ai-title-color)
|
|
border-radius 8px
|
|
align-items center
|
|
padding 0 6px
|
|
position relative
|
|
|
|
#post-ai .ai-title i
|
|
font-weight 800
|
|
|
|
#post-ai .ai-title-text
|
|
font-weight bold
|
|
margin-left 8px
|
|
font-size 17px
|
|
|
|
#post-ai .ai-tag
|
|
font-size 12px
|
|
background-color var(--ai-tag-bg)
|
|
color var(--ai-btn-color)
|
|
border-radius 4px
|
|
margin-left auto
|
|
line-height 1
|
|
padding 4px 5px
|
|
border var(--ai-border)
|
|
|
|
#post-ai .ai-explanation
|
|
margin-top 10px
|
|
padding 8px 12px
|
|
background var(--ai-content-bg)
|
|
border-radius $border-card
|
|
border var(--ai-content-border)
|
|
font-size 15.5px
|
|
line-height 1.4
|
|
color var(--ai-font-color)
|
|
|
|
#post-ai .ai-cursor
|
|
display inline-block
|
|
border-radius 50%
|
|
background var(--ai-cursor)
|
|
width: 12px
|
|
height: 12px
|
|
opacity 0.95
|
|
margin-left 3px
|
|
transition all 0.3s
|
|
-webkit-transition all 0.3s
|
|
-moz-transition all 0.3s
|
|
-ms-transition all 0.3s
|
|
-o-transition all 0.3s
|
|
|
|
#post-ai .ai-btn-box
|
|
font-size 15.5px
|
|
width 100%
|
|
display flex
|
|
flex-direction row
|
|
flex-wrap wrap
|
|
|
|
#post-ai .ai-btn-item
|
|
padding 5px 10px
|
|
margin 10px 16px 0px 5px
|
|
width fit-content
|
|
line-height 1
|
|
background var(--ai-btn-bg)
|
|
border var(--ai-border)
|
|
color var(--ai-btn-color)
|
|
border-radius 6px
|
|
user-select none
|
|
transition all 0.3s
|
|
-webkit-transition all 0.3s
|
|
-moz-transition all 0.3s
|
|
-ms-transition all 0.3s
|
|
-o-transition all 0.3s
|
|
cursor pointer
|
|
|
|
#post-ai .ai-btn-item:hover
|
|
background var(--theme-link)
|
|
|
|
#post-ai .ai-recommend
|
|
display flex
|
|
flex-direction row
|
|
flex-wrap wrap
|
|
|
|
#post-ai .ai-recommend-item
|
|
width 50%
|
|
margin-top 2px
|
|
|
|
#post-ai .ai-recommend-item a
|
|
border-bottom 2px solid var(--theme-link)
|
|
padding 0 .2em
|
|
color var(--theme-link)
|
|
font-weight 700
|
|
text-decoration none
|
|
transition all 0.3s
|
|
-webkit-transition all 0.3s
|
|
-moz-transition all 0.3s
|
|
-ms-transition all 0.3s
|
|
-o-transition all 0.3s
|
|
|
|
#post-ai .ai-recommend-item a:hover
|
|
background-color var(--theme-link)
|
|
border-bottom 2px solid var(--theme-link)
|
|
color #fff
|
|
border-radius 5px
|
|
|
|
@media screen and (max-width: 768px)
|
|
#post-ai .ai-btn-box
|
|
justify-content center
|
|
|
|
#post-ai .ai-title>svg
|
|
width 21px
|
|
height 21px
|
|
|
|
#post-ai .ai-title>svg path
|
|
fill var(--ai-font-color)
|
|
|
|
#post-ai .ai-Toggle
|
|
font-size 12px
|
|
border var(--ai-border)
|
|
background var(--ai-btn-bg)
|
|
color var(--ai-btn-color)
|
|
padding 3px 4px
|
|
border-radius 4px
|
|
margin-left 6px
|
|
cursor pointer
|
|
-webkit-transition .3s
|
|
-moz-transition .3s
|
|
-o-transition .3s
|
|
-ms-transition .3s
|
|
transition .3s
|
|
font-weight bolder
|
|
pointer-events none
|
|
opacity 0
|
|
|
|
#post-ai .ai-Toggle:hover
|
|
background $color-theme
|
|
|
|
#post-ai .ai-speech-box
|
|
width 21px
|
|
height 21px
|
|
background var(--ai-font-color)
|
|
margin-left 7px
|
|
border-radius 50%
|
|
display flex
|
|
flex-direction row
|
|
flex-wrap wrap
|
|
align-content center
|
|
justify-content center
|
|
pointer-events none
|
|
opacity 0
|
|
-webkit-transition .3s
|
|
-moz-transition .3s
|
|
-o-transition .3s
|
|
-ms-transition .3s
|
|
transition .3s
|
|
cursor pointer
|
|
|
|
#post-ai .ai-speech-content
|
|
width 8px
|
|
background var(--ai-speech-content)
|
|
height 8px
|
|
border-radius 50%
|
|
-webkit-transition .3s
|
|
-moz-transition .3s
|
|
-o-transition .3s
|
|
-ms-transition .3s
|
|
transition .3s
|
|
|
|
#post-ai .ai-speech-box:hover .ai-speech-content
|
|
background $color-theme
|
|
|
|
@keyframes ai_breathe
|
|
0%
|
|
transform scale(0.9)
|
|
-webkit-transform scale(0.9)
|
|
-moz-transform scale(0.9)
|
|
-ms-transform scale(0.9)
|
|
-o-transform scale(0.9)
|
|
50%
|
|
transform scale(1)
|
|
-webkit-transform scale(1)
|
|
-moz-transform scale(1)
|
|
-ms-transform scale(1)
|
|
-o-transform scale(1)
|