Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-09-08 17:51:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

zooming out keeps the button container a usable size

Browse Source
This commit is contained in:
EthanHealy01 2025-07-08 18:19:37 +01:00
parent 39197d07c7
commit b0c1d42288
1 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
stirling-pdf/src/main/resources/static/css/multi-tool.css
View File

@ -53,16 +53,15 @@ label {
} }
.mt-action-btn { .mt-action-btn {
position: sticky; position: fixed;
bottom: 10%; bottom: 80px;
margin: auto; left: 50%;
margin-bottom: 25px; transform: translateX(-50%);
border-radius: 2rem; border-radius: 2rem;
z-index: 12; z-index: 12;
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
display: flex; display: flex;
gap: 10px; gap: 10px;
padding: 12px 0px 0px;
width: fit-content; width: fit-content;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
@ -399,6 +398,72 @@ label {
@media only screen and (min-width: 1200px) and (max-width: 1399px) { #pages-container { width: 900px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #pages-container { width: 900px; } }
@media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } } @media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } }
/* Zoom-out optimizations for bottom action buttons */
@media only screen and (min-width: 2000px) {
.mt-action-btn {
gap: 12px;
padding: 12px 24px;
border-radius: 2.5rem;
}
.mt-action-btn .btn {
width: 4rem;
height: 4rem;
border-radius: 22px;
}
.mt-action-btn .btn .material-symbols-rounded {
font-size: 1.7rem;
}
}
@media only screen and (min-width: 2560px) {
.mt-action-btn {
gap: 15px;
padding: 15px 30px;
border-radius: 3rem;
}
.mt-action-btn .btn {
width: 5rem;
height: 5rem;
border-radius: 28px;
}
.mt-action-btn .btn .material-symbols-rounded {
font-size: 2.1rem;
}
}
@media only screen and (min-width: 3840px) {
.mt-action-btn {
gap: 20px;
padding: 20px 40px;
border-radius: 4rem;
}
.mt-action-btn .btn {
width: 7rem;
height: 7rem;
border-radius: 40px;
}
.mt-action-btn .btn .material-symbols-rounded {
font-size: 3rem;
}
}
@media only screen and (min-width: 7680px) {
.mt-action-btn {
gap: 40px;
padding: 40px 80px;
border-radius: 8rem;
}
.mt-action-btn .btn {
width: 14rem;
height: 14rem;
border-radius: 80px;
}
.mt-action-btn .btn .material-symbols-rounded {
font-size: 6rem;
}
}
/* 125% Zoom Level */ /* 125% Zoom Level */
@media only screen and (max-width: 1536px) { @media only screen and (max-width: 1536px) {
/* Styles for 125% zoom level (1920px ÷ 1.25 = 1536px) */ /* Styles for 125% zoom level (1920px ÷ 1.25 = 1536px) */
@ -419,6 +484,7 @@ label {
top: 80px !important; /* Just below navbar (60px) + 20px margin */ top: 80px !important; /* Just below navbar (60px) + 20px margin */
bottom: 20px !important; /* Small margin from bottom */ bottom: 20px !important; /* Small margin from bottom */
margin: 0 !important; margin: 0 !important;
transform: none !important; /* Reset transform for sidebar */
/* Container styling */ /* Container styling */
border-radius: 16px !important; /* Consistent with card styling */ border-radius: 16px !important; /* Consistent with card styling */