hjess/LifeFaq
1
0
Fork 0
generated from hjess/PythonTemplateProject
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better CSS

Browse Source
This commit is contained in:
Henrik Jess Nielsen
2024-12-17 21:28:10 +01:00
parent dea59f3d23
commit b4c673bdc4
3 changed files with 94 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/css/main.css
View File

@@ -1,4 +1,3 @@
@charset "UTF-8";
@import 'fontawesome-all.min.css';
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
/*
@@ -2486,32 +2485,63 @@ button:disabled,
justify-content: center;
align-items: center;
z-index: 999999;
overflow-y: auto;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 90%; /* Sæt bredden til 80% af skærmens bredde */
height: 90%;
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: 50000; /* Content stays above the blurred overlay */
margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
z-index: 50000;
margin: 0; /* Remove hardcoded margin */
overflow-y: auto; /* Scroll if content exceeds max-height */
}
.open {
padding: -20px;
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
.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.open, .open_inv.open {
transform: rotate(15deg);
}
.open_inv {
padding: -20px;
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
.open.open_inv, .open_inv.open_inv {
transform: rotate(-15deg);
}
@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;
}
}
/* Wrapper */
#wrapper {
display: -moz-flex;

2
static/css/main.css.map
View File

File diff suppressed because one or more lines are too long

65
static/sass/components/_modals.scss
View File

@@ -20,33 +20,68 @@ $modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
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: 5px;
border-radius: 10px;
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 */
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; /* Content stays above the blurred overlay */
margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
z-index: $modal-content-z-index;
margin: 0; /* Remove hardcoded margin */
overflow-y: auto; /* Scroll if content exceeds max-height */
}
// Rotating buttons
.open {
padding: -20px;
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
.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;
transform: rotate(15deg); // Rotates button 15 degrees clockwise
&.open {
transform: rotate(15deg); // Rotates button 15 degrees clockwise
}
&.open_inv {
transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
}
}
.open_inv {
padding: -20px;
margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
// 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 */
}
transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
}
.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;
}
}