diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 3036f501..772724a2 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -219,6 +219,9 @@ img.doc = pdfDocument; div.appendChild(img); + /** + * Making pages larger when clicking on them + */ img.addEventListener('mousedown', (x) => { var bigImg = document.createElement('img'); bigImg.onclick = (e) => { @@ -228,7 +231,10 @@ bigImg.src = imageSrc; imageHighlighter.appendChild(bigImg); }) - + + /** + * Rendering the various buttons to manipulate and move pdf pages + */ const buttonContainer = document.createElement('div'); buttonContainer.classList.add("button-container"); @@ -263,7 +269,7 @@ buttonContainer.appendChild(rotateCW); const deletePage = document.createElement('button'); - deletePage.classList.add("btn", "btn-secondary"); + deletePage.classList.add("btn", "btn-danger"); deletePage.innerHTML = ` @@ -435,7 +441,7 @@ } #pages-container { - --background-color: rgba(0, 0, 0, 0.046); + --background-color: rgba(0, 0, 0, 0.025); --scroll-bar-color: #f1f1f1; --scroll-bar-thumb: #888; --scroll-bar-thumb-hover: #555; @@ -494,7 +500,8 @@ left: 50%; top: 50%; translate: -50% -50%; - box-shadow: 0 0 10px rgba(0,0,0); + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384); + border-radius: 4px; transition: rotate 0.3s; }