diff --git a/stirling-pdf/src/main/resources/static/css/multi-tool.css b/stirling-pdf/src/main/resources/static/css/multi-tool.css index 15ef28f52..73d4b05ed 100644 --- a/stirling-pdf/src/main/resources/static/css/multi-tool.css +++ b/stirling-pdf/src/main/resources/static/css/multi-tool.css @@ -305,17 +305,15 @@ label { @media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } } /* Zoom-responsive sidebar for 175% zoom and higher */ -/* Use resolution media queries to detect actual zoom vs window narrowing */ - -/* Window narrowing only (no zoom) - keep normal-sized icons */ -@media only screen and (max-width: 1100px) and (max-resolution: 1.4dppx) { +/* Base styles for both zoom scenarios */ +@media only screen and (max-width: 1100px) { /* Make the main container relative for absolute positioning */ .container { position: relative; } - /* Transform action buttons to sidebar aligned with card - NORMAL SIZE */ + /* Transform action buttons to sidebar aligned with card */ .mt-action-btn { /* Absolute positioning relative to container */ position: absolute !important; @@ -336,13 +334,6 @@ label { flex-direction: column !important; align-items: center !important; /* Center buttons horizontally */ justify-content: flex-start !important; /* Align buttons to top */ - gap: 8px !important; /* Normal spacing between buttons */ - padding: 15px 10px !important; /* Normal padding */ - - /* Width constraints - larger for normal icons */ - width: fit-content !important; /* Use natural width when possible */ - min-width: 70px !important; /* Larger minimum width */ - max-width: 90px !important; /* Larger maximum width */ /* Height and overflow */ height: auto !important; /* Fill between top and bottom positions */ @@ -351,20 +342,20 @@ label { /* Z-index for layering */ z-index: 12; + + /* Width constraints - use default values, override below */ + width: fit-content !important; } - /* Normal-sized buttons for window narrowing */ + /* Button base styles */ .mt-action-btn .btn { - width: 3rem !important; /* Normal button size */ - height: 3rem !important; border-radius: 12px !important; /* Match container radius */ padding: 0 !important; margin: 0 !important; flex-shrink: 0; /* Prevent button shrinking */ - font-size: 0.9rem !important; /* Normal icon size */ } - /* Icon styling for normal size */ + /* Icon base styling */ .mt-action-btn .btn .material-symbols-rounded { font-size: inherit !important; /* Use button's font-size */ line-height: 1 !important; /* Prevent vertical misalignment */ @@ -377,13 +368,7 @@ label { 'FILL' 0, 'wght' 400, 'GRAD' 0, - 'opsz' 24 !important; /* Normal optical sizing */ - } - - /* Adjust the card to make room for normal sidebar */ - .bg-card { - margin-left: 100px !important; /* Space for normal sidebar */ - transition: margin-left 0.3s ease-in-out; + 'opsz' 24 !important; } /* Adjust other containers */ @@ -426,99 +411,45 @@ label { } } -/* Actual zoom detected - use compact icons */ -@media only screen and (max-width: 1100px) and (min-resolution: 1.5dppx) { - - /* Make the main container relative for absolute positioning */ - .container { - position: relative; +/* Window narrowing only (no zoom) - normal-sized icons */ +@media only screen and (max-width: 1100px) and (max-resolution: 1.4dppx) { + .mt-action-btn { + gap: 8px !important; /* Normal spacing between buttons */ + padding: 15px 10px !important; /* Normal padding */ + min-width: 70px !important; /* Larger minimum width */ + max-width: 90px !important; /* Larger maximum width */ } - /* Transform action buttons to sidebar aligned with card - COMPACT SIZE */ + .mt-action-btn .btn { + width: 3rem !important; /* Normal button size */ + height: 3rem !important; + font-size: 0.9rem !important; /* Normal icon size */ + } + + .bg-card { + margin-left: 100px !important; /* Space for normal sidebar */ + transition: margin-left 0.3s ease-in-out; + } +} + +/* Actual zoom detected - compact icons */ +@media only screen and (max-width: 1100px) and (min-resolution: 1.5dppx) { .mt-action-btn { - /* Absolute positioning relative to container */ - position: absolute !important; - left: 0 !important; /* Align with container's left edge */ - top: 0 !important; /* Align with card's top */ - bottom: 60px !important; /* Account for footer space */ - transform: none !important; /* Remove default centering */ - margin: 0 !important; - - /* Container styling */ - border-radius: 12px !important; /* Match button border radius */ - background-color: var(--md-sys-color-surface-container-low); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - backdrop-filter: blur(8px); - - /* Flexbox layout for vertical button stack */ - display: flex !important; - flex-direction: column !important; - align-items: center !important; /* Center buttons horizontally */ - justify-content: flex-start !important; /* Align buttons to top */ gap: 6px !important; /* Compact spacing between buttons */ padding: 12px 8px !important; /* Compact padding */ - - /* Width constraints - smaller for zoom */ - width: fit-content !important; /* Use natural width when possible */ min-width: 60px !important; /* Minimum width fallback */ max-width: 80px !important; /* Maximum width constraint */ - - /* Height and overflow */ - height: auto !important; /* Fill between top and bottom positions */ - max-height: none !important; /* Remove height constraints */ - overflow-y: auto !important; /* Enable vertical scrolling when needed */ - - /* Z-index for layering */ - z-index: 12; } - /* Compact buttons for actual zoom */ .mt-action-btn .btn { width: 2.5rem !important; /* Compact button size */ height: 2.5rem !important; - border-radius: 12px !important; /* Match container radius */ - padding: 0 !important; - margin: 0 !important; - flex-shrink: 0; /* Prevent button shrinking */ font-size: 0.8rem !important; /* Smaller icon size */ } - /* Icon specific styling within sidebar buttons */ - .mt-action-btn .btn .material-symbols-rounded { - font-size: inherit !important; /* Use button's font-size */ - line-height: 1 !important; /* Prevent vertical misalignment */ - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 100% !important; - height: 100% !important; - font-variation-settings: - 'FILL' 0, - 'wght' 400, - 'GRAD' 0, - 'opsz' 24 !important; /* Ensure consistent optical sizing */ - } - - /* Adjust the card to make room for compact sidebar */ .bg-card { margin-left: 90px !important; /* Space for compact sidebar */ transition: margin-left 0.3s ease-in-out; } - - /* Adjust other containers */ - .multi-tool-container { - margin-left: 0 !important; /* Reset margin since card handles spacing */ - max-width: 100% !important; - } - - .mt-action-bar { - margin-left: 0 !important; /* Reset margin since card handles spacing */ - margin-right: 25px !important; - } - - /* Center buttons vertically when no scrolling needed */ - .mt-action-btn:not(:has(*:nth-child(10))) { - justify-content: center !important; - } }