hexo-theme-stellar/source/css/_plugins/tianli_gpt.styl

: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)