58 lines
1.4 KiB
Stylus
58 lines
1.4 KiB
Stylus
.article.banner
|
|
--text-banner: var(--text)
|
|
background: var(--block)
|
|
margin: 0
|
|
height: unset
|
|
|
|
.article.banner
|
|
.bg+.content
|
|
min-height: 240px
|
|
--text-banner: white
|
|
--button-hover-bg: rgba(white, 0.25)
|
|
|
|
.article.banner .content
|
|
.top
|
|
align-items: flex-start
|
|
margin: 1rem 'calc(1rem - 4px)'
|
|
.title
|
|
font-size: $fsh1
|
|
color: var(--text-banner)
|
|
.bottom
|
|
padding: 2rem 1rem
|
|
h1
|
|
line-height: 1.2
|
|
margin: 0
|
|
|
|
.l_body[text-indent] .article.banner .content .bottom
|
|
justify-content: center
|
|
|
|
|
|
// 动画配置
|
|
.article.banner
|
|
.bg+.content
|
|
trans1 all
|
|
--blur-bg: rgba(black, 0.1)
|
|
--blur-px: 0px
|
|
--blur-sat: 100%
|
|
background: var(--blur-bg)
|
|
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
|
|
background: var(--blur-bg)
|
|
backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
|
|
-webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
|
|
&:hover
|
|
.bg+.content
|
|
--blur-bg: rgba(black, 0.1)
|
|
--blur-px: 20px
|
|
--blur-sat: 150%
|
|
|
|
.article.banner
|
|
--button-hover-bg: rgba(black, 0.05)
|
|
set_darkmode()
|
|
.article.banner
|
|
--button-hover-bg: rgba(white, 0.15)
|
|
|
|
if hexo-config('style.darkmode') == 'auto'
|
|
@media (prefers-color-scheme: dark)
|
|
set_darkmode()
|
|
if hexo-config('style.darkmode') == 'always'
|
|
set_darkmode() |