Need CSS Codes for Modal Buttons

@generosus

1. CSS code to reposition buttons to the center of the modal (aligned side-by-side). Details: https://prnt.sc/uoEdmYOTdpur
> You can place the buttons to center by using following css code.

.ina-modal-actions {

	text-align: center;
}

2. CSS code to change buttons’ background color and background color on hover.
> You can use following code to change background color of the buttons.

.ina-close-without-reloading {
    background: #478a43;
}

//on Hover
.ina-close-without-reloading:hover {
    background: #2271b1;
}

.ina-stay-logged-in {
    background: #478a43;
}

//On Hover
.ina-stay-logged-in:hover {
    background: #2271b1;
}

4. What is the difference between “OK” and “Close without Reloading”? What does each button do? Please refer to above screenshot. Could not find their definition in your knowledge base.
> OK button closes the button and refreshes the page. However, “Close without reloading” page closes the modal only without reloading the page. “Close without reloading” was added in order to avoid refreshing the page if incase you were in middle of something important (* you were inactive due to something and you had been logged out) and you can remember/save your work or content without needing to rewrite again.

Apologies for the confusion. You can change these text from inactive settings page.

5. When we enable the setting “Disable Timeout Countdown” and the modal pops up, the modal will display for only 1-3 seconds and then disappear. There is not enough time to click either “OK” or “Close without Reloading.” The modal does not stay displayed for 10 seconds as noted in your plugin setting. How can we change the display time of the modal, to say, 30 seconds? Details: https://prnt.sc/BjV_2d-o65-2
> When this button is checked, user should be instantly logged out. So, this might be a bug – I will verify and fix in the next update.

Hi @j_3rk,

Thank you so much. In response:

1. CSS works great.

2. CSS works great.

3. To assist, the modal size can be adjusted with the following CSS code:

/* Change Modal Size */
.ReactModal__Content.ReactModal__Content--after-open {
    width:40%!important;
}

4. Unfortunately, the buttons do not work as intended. I will reach out to you offline to assist.

5. Great. Please test thoroughly. We cannot click the buttons on time when this feature is activated. Honestly, don’t think it’s necessary nor useful. All other features (options) in your plugin cover most — if not all — scenarios.

Bonus:

/* Adjust Size and Shape of Button and Button Text */
.ina-button {
    border-radius: 4px!important;
    padding: 15px 30px!important;
    font-size: 1.1em!important;
}

Again, thank you!