blog/themes/icarus/include/style/donate.styl

59 lines
1.4 KiB
Stylus

/* ---------------------------------
* Donate Buttons
* --------------------------------- */
$donate-qrcode-max-width ?= 280px
$donate-qrcode-shadow ?= $card-shadow
$donate-qrcode-box-radius ?= $card-radius
$donate-button-colors ?= {
'afdian': rgb(136, 95, 217),
'alipay': rgb(0, 160, 232),
'buymeacoffee': rgb(255, 221, 0),
'paypal': rgb(254, 183, 0),
'patreon': rgb(255, 66, 77),
'wechat': rgb(26, 173, 25),
}
.donate
position: relative
.qrcode
display: none
position: absolute
z-index: 99
bottom: 2.5em
line-height: 0
overflow: hidden
box-shadow: $donate-qrcode-shadow
border-radius: $donate-qrcode-box-radius
img
max-width: $donate-qrcode-max-width
&:hover
.qrcode
display: block
&:first-child:not(:last-child)
.qrcode
left: -.75rem
&:last-child:not(:first-child)
.qrcode
right: -.75rem
for $name, $color in $donate-button-colors
&[data-type={'"' + $name + '"'}]
color: findColorInvert($color)
background-color: $color
border-color: transparent
&:active
background-color: darken($color, 5%)
&:hover
background-color: darken($color, 2.5%)
&:focus:not(:active)
box-shadow: 0 0 0 .125em rgba($color, .25)