Improve modal closing

This commit is contained in:
pluja 2021-09-20 21:56:42 +02:00
parent 479b770b2b
commit c5ff9cf5a4

View file

@ -238,7 +238,7 @@
<a class="butn" href="#open-modal-xmr"><i class="fas fa-qrcode"></i> Donate Monero </a> <a class="butn" href="#open-modal-xmr"><i class="fas fa-qrcode"></i> Donate Monero </a>
<div id="open-modal-xmr" class="modal-window"> <div id="open-modal-xmr" class="modal-window">
<div> <div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a> <a href="#support" title="Close" class="modal-close"></a>
<h1>Monero</h1> <h1>Monero</h1>
<img width="256" src="/static/img/qrcodes/xmr.png"></img> <img width="256" src="/static/img/qrcodes/xmr.png"></img>
<pre>{{support['xmr']}}</pre> <pre>{{support['xmr']}}</pre>
@ -251,7 +251,7 @@
<a class="butn" href="#open-modal-btc"><i class="fas fa-qrcode"></i> Donate Bitcoin </a> <a class="butn" href="#open-modal-btc"><i class="fas fa-qrcode"></i> Donate Bitcoin </a>
<div id="open-modal-btc" class="modal-window"> <div id="open-modal-btc" class="modal-window">
<div> <div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a> <a href="#support" title="Close" class="modal-close"></a>
<h1>Bitcoin</h1> <h1>Bitcoin</h1>
<img width="256" src="/static/img/qrcodes/btc.png"></img> <img width="256" src="/static/img/qrcodes/btc.png"></img>
<pre>{{support['btc']}}</pre> <pre>{{support['btc']}}</pre>
@ -264,7 +264,7 @@
<a class="butn" href="#open-modal-nano"><i class="fas fa-qrcode"></i> Donate Nano </a> <a class="butn" href="#open-modal-nano"><i class="fas fa-qrcode"></i> Donate Nano </a>
<div id="open-modal-nano" class="modal-window"> <div id="open-modal-nano" class="modal-window">
<div> <div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a> <a href="#support" title="Close" class="modal-close"></a>
<h1>Nano</h1> <h1>Nano</h1>
<img width="256" src="/static/img/qrcodes/nano.png"></img> <img width="256" src="/static/img/qrcodes/nano.png"></img>
<pre>{{support['nano']}}</pre> <pre>{{support['nano']}}</pre>
@ -312,6 +312,7 @@
pointer-events: auto; pointer-events: auto;
} }
.modal-window > div { .modal-window > div {
text-align: center;
width: 300px; width: 300px;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -319,9 +320,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 1em; padding: 1em;
background: rgb(26, 26, 26); background: rgb(26, 26, 26);
}
.modal-window header {
font-weight: bold;
} }
.modal-window h1 { .modal-window h1 {
font-size: 150%; font-size: 150%;
@ -330,6 +328,7 @@
.modal-close { .modal-close {
color: #aaa; color: #aaa;
line-height: 50px; line-height: 50px;
padding: 20px;
font-size: 80%; font-size: 80%;
position: absolute; position: absolute;
right: 0; right: 0;
@ -337,9 +336,6 @@
top: 0; top: 0;
width: 70px; width: 70px;
text-decoration: none; text-decoration: none;
}
.modal-close:hover {
color: black;
} }
.modal-window > div { .modal-window > div {
border-radius: 1rem; border-radius: 1rem;
@ -353,9 +349,6 @@
border-radius: .1rem; border-radius: .1rem;
text-decoration: none; text-decoration: none;
} }
.butn i {
padding-right: 0.3em;
}
small{ small{
font-size: 9px; font-size: 9px;