remove duplicate css

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 */
+/* Base styles for both zoom scenarios */
-
+@media only screen and (max-width: 1100px) {
-/* Window narrowing only (no zoom) - keep normal-sized icons */
-@media only screen and (max-width: 1100px) and (max-resolution: 1.4dppx) {
 
   /* 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 */
+      'opsz' 24 !important;
-  }
-
-  /* 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;
   }
 
   /* Adjust other containers */
@@ -426,99 +411,45 @@ label {
   }
 }
 
-/* Actual zoom detected - use compact icons */
+/* Window narrowing only (no zoom) - normal-sized icons */
-@media only screen and (max-width: 1100px) and (min-resolution: 1.5dppx) {
+@media only screen and (max-width: 1100px) and (max-resolution: 1.4dppx) {
-
+  .mt-action-btn {
-  /* Make the main container relative for absolute positioning */
+    gap: 8px !important; /* Normal spacing between buttons */
-  .container {
+    padding: 15px 10px !important; /* Normal padding */
-    position: relative;
+    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;
-  }
 }