diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css
index a540b9d0a..a06a1721f 100644
--- a/src/main/resources/static/css/multi-tool.css
+++ b/src/main/resources/static/css/multi-tool.css
@@ -92,11 +92,14 @@ label {
}
#pages-container {
- gap: 0px;
+ /* gap: 0px;
display: flex;
flex-wrap: wrap;
margin-left: -15px;
- margin-right: -15px;
+ margin-right: -15px; */
+ margin: 0 auto;
+ width: 95%;
+ font-size: 0;
}
/* width */
@@ -121,18 +124,22 @@ 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 +203,9 @@ label {
}
.page-container img {
- /* max-width: calc(100% - 15px); */
+ max-width: calc(100% - 15px);
max-height: calc(100% - 15px);
- max-width: 237px;
+ /* max-width: 237px; */
display: block;
position: absolute;
left: 50%;
@@ -217,6 +224,7 @@ label {
position: absolute;
top: 5px;
left: 5px;
+ height: 2rem;
color: var(--md-sys-color-on-secondary);
background-color: rgba(162, 201, 255, 0.8);
padding: 6px 8px;
@@ -294,6 +302,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..3cb73cd75 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,9 +46,13 @@
/* "insert pdf" buttons that appear on the right when hover */
.pdf-actions_insert-file-button-container {
+ display:flex;
+ flex-direction: column;
+ gap: 10px;
+ left: -20px;
translate: 0 -50%;
- width: 80px;
- height: 100%;
+ width: 40px;
+ height: 40%;
z-index: 3;
opacity: 0;
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 80df8d310..2c478c50e 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;