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: 224px
|
|
--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)
|
|
h1
|
|
line-height: 1.2
|
|
margin: 0.25rem 0
|
|
|
|
.l_body .article.banner .content .bottom.only-title .title
|
|
padding: 0.75rem 0
|
|
|
|
.l_body[text-indent] .article.banner .content .bottom.only-title
|
|
justify-content: center
|
|
|
|
|
|
// 动画配置
|
|
.article.banner
|
|
.bg+.content
|
|
trans1 all
|
|
--blur-bg: rgba(black, 0)
|
|
--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)
|
|
ondark()
|
|
--button-hover-bg: rgba(white, 0.15)
|
|
:root[data-theme="dark"] &
|
|
ondark()
|
|
:root:not([data-theme]) &
|
|
@media (prefers-color-scheme: dark)
|
|
ondark()
|