hexo-theme-stellar/source/css/_layout/partial/article-banner.styl

58 lines
1.4 KiB
Stylus
Raw Normal View History

2024-01-30 23:48:00 +08:00
.article.banner
2024-01-31 22:45:07 +08:00
--text-banner: var(--text)
2024-01-30 23:48:00 +08:00
background: var(--block)
margin: 0
height: unset
.article.banner
.bg+.content
2024-01-31 22:45:07 +08:00
min-height: 240px
2024-01-30 23:48:00 +08:00
--text-banner: white
2024-01-31 22:45:07 +08:00
--button-hover-bg: rgba(white, 0.25)
2024-01-30 23:48:00 +08:00
.article.banner .content
.top
align-items: flex-start
margin: 1rem 'calc(1rem - 4px)'
.title
2024-02-02 00:36:01 +08:00
font-size: $fsh1
2024-01-30 23:48:00 +08:00
color: var(--text-banner)
2024-01-31 13:58:56 +08:00
.bottom
padding: 1.5rem 1rem
2024-01-30 23:48:00 +08:00
h1
line-height: 1.2
2024-01-31 13:58:56 +08:00
margin: 0
2024-02-02 00:36:01 +08:00
.l_body[text-indent] .article.banner .content .bottom
justify-content: center
2024-01-31 13:58:56 +08:00
//
.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
2024-01-31 22:45:07 +08:00
--blur-bg: rgba(black, 0.1)
2024-01-31 13:58:56 +08:00
--blur-px: 20px
--blur-sat: 150%
2024-01-31 22:45:07 +08:00
.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()