This article describes the HTML layout and default CSS of the 2FA confirmation popup.
HTML
<div id="wpsaurus-2fa-confirmation-popup">
<div>
<h2>Popup title</h2>
<p>Popup content</p>
<a class="button">Button text</a>
</div>
</div>
Default CSS
The following style is included by default.
The main ID (#wpsaurus-2fa-confirmation-popup) is used as the background overlay for the popup. The div directly inside it is the actual ‘popup’ box.
Note that the button class used has some default WordPress styling.
#wpsaurus-2fa-confirmation-popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9999;
}
#wpsaurus-2fa-confirmation-popup > div {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
max-width: 360px;
}
#wpsaurus-2fa-confirmation-popup > div h2 {
font-size: 2em;
margin-bottom: 0.5em
}
#wpsaurus-2fa-confirmation-popup > div p {
font-size: 1em;
margin-bottom: 0.5em;
}
#wpsaurus-2fa-confirmation-popup > div .button
{
margin-left: auto;
margin-top: 10px;
cursor: pointer;
}