65 lines
No EOL
1.3 KiB
CSS
65 lines
No EOL
1.3 KiB
CSS
/* styles.css */
|
|
|
|
/* Modal styles */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Fixed in place */
|
|
z-index: 1; /* On top of everything */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
|
|
}
|
|
|
|
/* Modal content box */
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 15% auto; /* Center the modal */
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%; /* Width of the modal */
|
|
max-width: 400px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Close button */
|
|
.close-btn {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close-btn:hover,
|
|
.close-btn:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Button inside modal */
|
|
.modal.button {
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
/* Styling for the main button */
|
|
.modal.button.show-alert-btn {
|
|
padding: 10px 20px;
|
|
background-color: #008CBA;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal.button.show-alert-btn:hover {
|
|
background-color: #007b9e;
|
|
} |