generated from hjess/PythonTemplateProject
43 lines
1.0 KiB
SCSS
43 lines
1.0 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
|
||
|
|
}
|
||
|
|
|
||
|
|
// Modal content
|
||
|
|
.modal-content {
|
||
|
|
background-color: $modal-content-bg;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: $modal-content-shadow;
|
||
|
|
width: 400px;
|
||
|
|
text-align: center;
|
||
|
|
z-index: $modal-content-z-index; // Content stays above the blurred overlay
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rotating buttons
|
||
|
|
.open {
|
||
|
|
transform: rotate(15deg); // Rotates button 15 degrees clockwise
|
||
|
|
}
|
||
|
|
|
||
|
|
.open_inv {
|
||
|
|
transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
|
||
|
|
}
|