btcpayserver/BTCPayServer/wwwroot/crowdfund/styles/main.css
Andrew Camilleri 109e576811 redo crowdfund modal perk list (#919)
* redo crowdfund modal perk list

closes #918

* fix small responsive issue
2019-07-19 16:48:39 +09:00

71 lines
1.1 KiB
CSS

[v-cloak] > * {
display: none
}
[v-cloak]::before {
content: "loading…"
}
canvas#fireworks {
width: 100vw;
height: 100vh;
position: fixed;
}
.perk-zoom {
display: none;
opacity: 0;
}
.perk-zoom-bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.9;
}
.perk-zoom-text {
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.perk:hover .perk-zoom {
cursor: pointer;
opacity: 1;
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.perk-badge {
width: 33px;
height: 33px;
position: absolute;
left: -15px;
top: -15px;
padding-top: 5px;
z-index: 1
}
.crowdfund-stats .col-sm:last-child{
border-right: none !important;
}
.modal-body .perks-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: .5rem;
}
.modal-body .perks-container .card:only-of-type {
max-width: 320px;
margin: auto;
}