Working dynamic function buttons on side of pages

This commit is contained in:
Connor Yoh 2025-04-02 15:50:08 +01:00
parent fdb75a0653
commit 38650a8919
3 changed files with 13 additions and 11 deletions

View File

@ -224,7 +224,7 @@ label {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
height: 2rem; line-height: normal;
color: var(--md-sys-color-on-secondary); color: var(--md-sys-color-on-secondary);
background-color: rgba(162, 201, 255, 0.8); background-color: rgba(162, 201, 255, 0.8);
padding: 6px 8px; padding: 6px 8px;

View File

@ -49,14 +49,16 @@
display:flex; display:flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
left: -20px;
translate: 0 -50%; translate: 0 -50%;
width: 40px; height: 100%;
height: 40%; width: 100px;
padding-left: 30px;
padding-right:30px;
justify-content: center;
z-index: 3; z-index: 3;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.4s;
} }
.pdf-actions_insert-file-button-container button .material-symbols-rounded { .pdf-actions_insert-file-button-container button .material-symbols-rounded {
@ -79,11 +81,11 @@
} }
.pdf-actions_insert-file-button-container.left { .pdf-actions_insert-file-button-container.left {
left: -20px; left: -50px;
} }
.pdf-actions_insert-file-button-container.right { .pdf-actions_insert-file-button-container.right {
right: -20px; right: -50px;
} }
html[dir="ltr"] .pdf-actions_insert-file-button-container.right { html[dir="ltr"] .pdf-actions_insert-file-button-container.right {
@ -105,11 +107,11 @@ html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
} }
html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right { html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right {
display: block; display: flex;
} }
html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left { html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left {
display: block; display: flex;
} }
.pdf-actions_insert-file-button-container:hover { .pdf-actions_insert-file-button-container:hover {

View File

@ -225,7 +225,7 @@ class PdfActionsManager {
); );
const insertFileButtonRight = document.createElement("button"); const insertFileButtonRight = document.createElement("button");
insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); insertFileButtonRight.classList.add("btn", "btn-primary");
insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`; insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
insertFileButtonRight.onclick = () => addFiles(); insertFileButtonRight.onclick = () => addFiles();
insertFileButtonRightContainer.appendChild(insertFileButtonRight); insertFileButtonRightContainer.appendChild(insertFileButtonRight);