hexo-theme-reimu
Version:
A Hakurei Reimu style Hexo theme
99 lines (81 loc) • 2.08 kB
text/stylus
.sponsor-wrapper
display: flex
justify-content: center
flex-direction: column
align-items: center
margin: 5px 0
margin-top: 10px
.sponsor-title
font-size: 18px
letter-spacing: 2px
color: var(--color-link)
opacity: 0.8
text-decoration: none
transition: opacity .2s
display: block
padding: 10px 0
font-weight: 700
user-select: none
.sponsor-icon
width: 30px
margin: 0 10px
opacity: 0.8
&.rotate
animation: rotate-all 3s linear infinite
if hexo-config("sponsor.icon.mask")
@supports (-webkit-mask: var(--sponsor-icon) no-repeat center / 80%)
.sponsor-icon
background-color: var(--red-1)
-webkit-mask: var(--sponsor-icon) no-repeat center / 80%
@supports (mask: var(--sponsor-icon) no-repeat center / 80%)
.sponsor-icon
background-color: var(--red-1)
mask: var(--sponsor-icon) no-repeat center / 80%
@supports not ((mask: var(--sponsor-icon) no-repeat center / 80%) and (-webkit-mask: var(--sponsor-icon) no-repeat center / 80%))
.sponsor-icon
background: var(--sponsor-icon) no-repeat center / 80%
else
.sponsor-icon
background: var(--sponsor-icon) no-repeat center / 80%
.sponsor-button-wrapper
margin: 8px 50px
display: flex
position: relative
width: fit-content
justify-content: center
border: 10px var(--color-red-3-shadow) double
transition: border .5s
cursor: var(--cursor-pointer) !important
&:hover
border: 10px var(--color-h2-after) double
&:hover + .sponsor-tip
opacity: .8
&.active
border: 10px var(--color-h2-after) double
.sponsor-tip
transition: opacity .2s
color: var(--color-link)
opacity: 0
font-size: 14px
font-weight: 700
letter-spacing: 1px
&.active
opacity: .8
.sponsor-qr
gap: 5px
width: 100%
flex-wrap: wrap
justify-content: center
display: none
margin-top: 5px
&.active
display: flex
.sponsor-qr-image-wrapper
display: flex
flex-direction: column
align-items: center
.sponsor-qr-name
font-size: 14px
opacity: 0.9
color: var(--color-default)
margin-top: 8px