Feature/improved signature element (#2489)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Co-authored-by: Reece Browne <reece@stirling.pdf>
This commit is contained in:
reecebrowne
2025-01-02 15:49:29 +00:00
committed by GitHub
parent 715efca25d
commit 49fb634690
12 changed files with 964 additions and 322 deletions

View File

@@ -22,18 +22,38 @@ select#font-select option {
}
.draggable-buttons-box {
position: absolute;
position: relative;
top: 0;
padding: 10px;
width: 100%;
width: calc(100% + 4.4rem);
display: flex;
gap: 5px;
z-index: 5;
margin-left: -2.2rem;
}
.draggable-buttons-box>button {
z-index: 4;
background-color: rgba(13, 110, 253, 0.1);
flex: 1 1 auto;
min-width: 2.5rem;
max-width: 4rem;
}
.rotation-handle {
width: 20px;
height: 20px;
border: 2px solid #3498db;
background-color: rgba(52, 152, 219, 0.1);
color: white;
border-radius: 50%;
text-align: center;
line-height: 20px;
position: absolute;
cursor: grab;
top: -30px;
left: calc(50% - 10px);
}
.draggable-canvas {
@@ -113,3 +133,33 @@ select#font-select option {
text-align: right;
padding: 0.5rem 1rem;
}
.input-with-icon {
position: relative;
display: inline-flex;
align-items: center;
}
.input-with-icon .icon {
position: absolute;
left: 0.5rem;
pointer-events: none;
color: #aaa;
}
.input-with-icon input {
padding-left: 2.2rem;
}
.small-file-container-saved {
padding-top: 1px;
position: relative;
row-gap: 1px;
height: 60px;
width: 60px;
top: 4px;
}
.small-file-container-saved:hover .drag-icon {
display: flex;
}