generated from hjess/PythonTemplateProject
Henrik Jess Nielsen
dea59f3d23
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 37s
52 lines
1.4 KiB
SCSS
52 lines
1.4 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: 90%; /* Sæt bredden til 80% af skærmens bredde */
|
|
height: 90%;
|
|
// max-width: 1200px; /* Tilføj en maks-bredde for store skærme */
|
|
text-align: center;
|
|
z-index: $modal-content-z-index; /* Content stays above the blurred overlay */
|
|
margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
|
|
}
|
|
|
|
// Rotating buttons
|
|
.open {
|
|
padding: -20px;
|
|
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
|
|
|
|
transform: rotate(15deg); // Rotates button 15 degrees clockwise
|
|
}
|
|
|
|
.open_inv {
|
|
padding: -20px;
|
|
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
|
|
|
|
transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
|
|
} |