1
0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-09-21 04:10:38 +02:00

fix(stamp): radius styles of color input (#1862)

Closes 1830
This commit is contained in:
designtesbrot 2024-09-09 19:58:04 +02:00 committed by GitHub
parent 12ff0ecac2
commit 0ad8c635ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 2 deletions

View File

@ -792,6 +792,23 @@ textarea.form-control {
box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant); box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
} }
.form-control-color {
padding: 0;
height: 2.4rem;
width: 2.4rem;
}
.form-control input[type="color"] {
opacity: 0;
height: 2.4rem;
width: 2.4rem;
box-sizing: border-box;
}
.form-control input[type="color"]:hover{
cursor: pointer;
}
/* Navbar Components */ /* Navbar Components */
.navbar-brand { .navbar-brand {
color: var(--md-sys-color-on-surface) !important; color: var(--md-sys-color-on-surface) !important;
@ -916,4 +933,4 @@ textarea.form-control {
color: var(--md-sys-color-on-error-container); color: var(--md-sys-color-on-error-container);
background-color: var(--md-sys-color-error-container); background-color: var(--md-sys-color-error-container);
border-color: transparent; border-color: transparent;
} }

View File

@ -119,7 +119,22 @@
<div class="mb-3"> <div class="mb-3">
<label for="customColor" class="form-label" th:text="#{AddStampRequest.customColor}">Custom Color</label> <label for="customColor" class="form-label" th:text="#{AddStampRequest.customColor}">Custom Color</label>
<input type="color" class="form-control form-control-color" id="customColor" name="customColor" value="#d3d3d3"> <div class="form-control form-control-color" style="background-color: #d3d3d3;">
<input type="color" id="customColor" name="customColor" value="#d3d3d3">
</div>
<script>
let colorInput = document.getElementById("customColor");
if (colorInput) {
let colorInputContainer = colorInput.parentElement;
if (colorInputContainer) {
colorInput.onchange = function() {
colorInputContainer.style.backgroundColor = colorInput.value;
}
colorInputContainer.style.backgroundColor = colorInput.value;
}
}
</script>
</div> </div>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{AddStampRequest.submit}"></button> <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{AddStampRequest.submit}"></button>