diff --git a/src/main/resources/static/css/dragdrop.css b/src/main/resources/static/css/dragdrop.css
index 688cbca4a..8f3304562 100644
--- a/src/main/resources/static/css/dragdrop.css
+++ b/src/main/resources/static/css/dragdrop.css
@@ -59,17 +59,21 @@ html[dir="rtl"] .drag-manager_draghover img {
background-color: #ffffff10;
transition: width 0.1s;
animation: end-drop-expand 0.3s ease;
- display: flex;
align-items: center;
justify-content: center;
margin-left:16px;
border-radius: 8px;
-
}
.drag-manager_endpoint svg {
width: 50px;
height: 50px;
+
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ translate: -50% -50%;
}
.drag-manager_endpoint.drag-manager_draghover {
diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index a540b9d0a..92d7699b2 100644
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@@ -85,18 +85,14 @@ label {
flex-direction: column;
padding: 1rem;
border-radius: 25px;
- overflow-y: clip;
- overflow-x: auto;
min-height: 275px;
margin: 0 0 30px 0;
}
#pages-container {
- gap: 0px;
- display: flex;
- flex-wrap: wrap;
- margin-left: -15px;
- margin-right: -15px;
+ margin: 0 auto;
+ width: 95%;
+ font-size: 0;
}
/* width */
@@ -121,18 +117,20 @@ label {
background: var(--scroll-bar-thumb-hover);
}
+
.page-container {
+ display: inline-block;
+ list-style-type: none;
+ width: 250px;
height: 250px;
- display: flex;
- align-items: center;
- flex-direction: column-reverse;
- aspect-ratio: 1;
+ line-height: 50px;
+ margin: 15px 25px;
+ box-sizing: border-box;
text-align: center;
+ aspect-ratio: 1;
position: relative;
user-select: none;
transition: width 1s linear;
- margin-top: 16px;
- margin-bottom: 16px;
}
.page-container.split-before {
@@ -196,9 +194,8 @@ label {
}
.page-container img {
- /* max-width: calc(100% - 15px); */
+ max-width: calc(100% - 15px);
max-height: calc(100% - 15px);
- max-width: 237px;
display: block;
position: absolute;
left: 50%;
@@ -217,6 +214,7 @@ label {
position: absolute;
top: 5px;
left: 5px;
+ line-height: normal;
color: var(--md-sys-color-on-secondary);
background-color: rgba(162, 201, 255, 0.8);
padding: 6px 8px;
@@ -294,6 +292,13 @@ label {
.checkbox-label {
font-size: medium;
}
+
.btn {
position: relative;
}
+
+@media only screen and (max-width: 767px) { #pages-container { width:300px; } }
+@media only screen and (min-width: 768px) and (max-width: 991px) { #pages-container { width: 600px; } }
+@media only screen and (min-width: 992px) and (max-width: 1199px) { #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; } }
\ No newline at end of file
diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css
index 8d69d792e..bde4e5bac 100644
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@@ -1,8 +1,12 @@
.pdf-actions_button-container {
z-index: 4;
- display: flex;
opacity: 0;
transition: opacity 0.1s linear;
+
+ position: absolute !important;
+ bottom: 0px;
+ left: 50%;
+ transform: translate(-50%, 0%);
}
.pdf-actions_container:hover .pdf-actions_button-container {
@@ -42,17 +46,43 @@
/* "insert pdf" buttons that appear on the right when hover */
.pdf-actions_insert-file-button-container {
+ display:flex;
+ flex-direction: column;
+ gap: 10px;
translate: 0 -50%;
- width: 80px;
height: 100%;
-
+ width: 100px;
+ padding-left: 30px;
+ padding-right:30px;
+ justify-content: center;
z-index: 3;
opacity: 0;
- transition: opacity 0.2s;
+ transition: opacity 0.4s;
+
}
-.pdf-actions_insert-file-button-container button .material-symbols-rounded {
- vertical-align: top;
+.pdf-actions_insert-file-button-container.left {
+ left: -50px;
+}
+
+.pdf-actions_insert-file-button-container.right {
+ right: -50px;
+}
+
+html[dir="ltr"] .pdf-actions_insert-file-button-container.right {
+ display: none;
+}
+
+html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
+ display: none;
+}
+
+html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right {
+ display: flex;
+}
+
+html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left {
+ display: flex;
}
.pdf-actions_insert-file-button-container.left button,
@@ -65,70 +95,11 @@
vertical-align: sub;
}
-.pdf-actions_insert-file-button {
- padding: 0;
- vertical-align: sub;
-}
-
-.pdf-actions_insert-file-button-container.left {
- left: -20px;
-}
-
-.pdf-actions_insert-file-button-container.right {
- right: -20px;
-}
-
-html[dir="ltr"] .pdf-actions_insert-file-button-container.right {
- display: none;
-}
-
-html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
- display: none;
-}
-
-.pdf-actions_insert-file-button-container.left .pdf-actions_insert-file-button {
- left: 0;
- translate: 0 -50%;
-}
-
-.pdf-actions_insert-file-button-container.right .pdf-actions_insert-file-button {
- right: 0;
- translate: 0 -50%;
-}
-
-html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right {
- display: block;
-}
-
-html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left {
- display: block;
-}
-
.pdf-actions_insert-file-button-container:hover {
opacity: 1;
transition: opacity 0.05s;
}
-.pdf-actions_insert-file-button {
- position: absolute;
- top: 50%;
- right: 50%;
- translate: 50% -50%;
- aspect-ratio: 1;
- border-radius: 100px;
- z-index: 4;
-}
-
-.pdf-actions_split-file-button {
- position: absolute;
- top: 25%;
- right: 50%;
- translate: 0 -50%;
- aspect-ratio: 1;
- border-radius: 100px;
- z-index: 3;
-}
-
.pdf-actions_checkbox {
position: absolute;
top: 5px;
@@ -143,13 +114,4 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
.hidden {
display: none;
-}
-.pdf-actions_insert-file-blank-button {
- position: absolute;
- top: 75%;
- right: 50%;
- translate: 0% -50%;
- aspect-ratio: 1;
- border-radius: 100px;
- z-index: 5;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 80df8d310..1ef2978e9 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -194,21 +194,21 @@ class PdfActionsManager {
);
const insertFileButton = document.createElement("button");
- insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
+ insertFileButton.classList.add("btn", "btn-primary");
moveUp.setAttribute('title', window.translations.addFile);
insertFileButton.innerHTML = `add`;
insertFileButton.onclick = this.insertFileButtonCallback;
insertFileButtonContainer.appendChild(insertFileButton);
const splitFileButton = document.createElement("button");
- splitFileButton.classList.add("btn", "btn-primary", "pdf-actions_split-file-button");
+ splitFileButton.classList.add("btn", "btn-primary");
splitFileButton.setAttribute('title', window.translations.split);
splitFileButton.innerHTML = `cut`;
splitFileButton.onclick = this.splitFileButtonCallback;
insertFileButtonContainer.appendChild(splitFileButton);
const insertFileBlankButton = document.createElement("button");
- insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button");
+ insertFileBlankButton.classList.add("btn", "btn-primary");
insertFileBlankButton.setAttribute('title', window.translations.insertPageBreak);
insertFileBlankButton.innerHTML = `insert_page_break`;
insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
@@ -225,7 +225,7 @@ class PdfActionsManager {
);
const insertFileButtonRight = document.createElement("button");
- insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
+ insertFileButtonRight.classList.add("btn", "btn-primary");
insertFileButtonRight.innerHTML = `add`;
insertFileButtonRight.onclick = () => addFiles();
insertFileButtonRightContainer.appendChild(insertFileButtonRight);