generated from hjess/PythonTemplateProject
88 lines
2.1 KiB
SCSS
88 lines
2.1 KiB
SCSS
// Variables
|
|
$modal-bg: rgba(0, 0, 0, 0.3);
|
|
$modal-blur: 8px;
|
|
$modal-z-index: 999999;
|
|
$modal-content-z-index: 50000;
|
|
$modal-content-bg: #fff;
|
|
$modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
|
|
// Modal background with blur effect
|
|
.modal {
|
|
display: none; // Hidden by default
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $modal-bg; // Semi-transparent dark background
|
|
backdrop-filter: blur($modal-blur); // Blurs everything behind the modal
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: $modal-z-index; // Ensure it stays on top
|
|
overflow-y: auto; // Enable vertical scrolling on mobile if needed
|
|
}
|
|
|
|
// Modal content
|
|
.modal-content {
|
|
background-color: $modal-content-bg;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: $modal-content-shadow;
|
|
width: 90%; /* Use 90% width for small screens */
|
|
max-width: 600px; /* Prevent it from getting too large */
|
|
height: auto; /* Automatic height */
|
|
max-height: 90%; /* Prevent it from overflowing the screen */
|
|
text-align: center;
|
|
z-index: $modal-content-z-index;
|
|
margin: 0; /* Remove hardcoded margin */
|
|
overflow-y: auto; /* Scroll if content exceeds max-height */
|
|
}
|
|
|
|
// Rotating buttons
|
|
.open, .open_inv {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
margin: 10px auto;
|
|
border: none;
|
|
background-color: #007BFF;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
|
|
&.open {
|
|
transform: rotate(15deg); // Rotates button 15 degrees clockwise
|
|
}
|
|
|
|
&.open_inv {
|
|
transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
|
|
}
|
|
}
|
|
|
|
// Responsive adjustments for smaller screens
|
|
@media (max-width: 768px) {
|
|
.modal-content {
|
|
width: 95%; /* Use nearly full width for small devices */
|
|
height: auto;
|
|
padding: 15px; /* Reduce padding for smaller screens */
|
|
}
|
|
|
|
.open, .open_inv {
|
|
font-size: 14px; /* Smaller buttons for smaller screens */
|
|
padding: 8px 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.modal-content {
|
|
border-radius: 5px; /* Smaller radius for small devices */
|
|
}
|
|
|
|
.open, .open_inv {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
}
|
|
}
|