schmoekerei/coverbuilder
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added custom hex color input

Browse Source
This commit is contained in:
Marvin Scham
2021-05-02 18:04:47 +02:00
parent 53fe6c4b2d
commit fd44a84f6d
5 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
main.html
View File

@@ -33,6 +33,10 @@
<h1>Spine Color</h1>
<div id="dc" class="col"></div>
<div id="palette"></div>
<div id="customcol">
<label for="custom">Custom Hex Value</label>
<input type="text" name="custom" id="custom" placeholder="#000000" pattern="#[0-9A-Fa-f]{6}">
</div>
</div>
</div>
<div id="footer">

8
script.js
View File

@@ -99,4 +99,12 @@ function rgbToHex(r, g, b) {
//##########################################################################################################################
const custom = document.getElementById("custom");
custom.addEventListener("keyup", function () {
if (custom.value.length == 7) {
document.getElementById("img").style.borderColor = custom.value;
}
});
renew();

19
style.css
View File

@@ -21,6 +21,11 @@ body {
font-size: 2em;
}
h1 {
margin: 0;
margin-bottom: 1rem;
}
#content {
margin-top: 100px;
min-height: calc(100vh - 100px);
@@ -84,6 +89,20 @@ body {
margin-left: 4px;
}
#content #customcol {
margin-top: 1rem;
}
#content #customcol input {
padding: 0.5rem;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
#content #customcol input:invalid {
background-color: lightcoral;
}
#content input#file {
position: absolute;
height: 47px;

2
style.css.map
View File

@@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": [
"style.scss"
],

18
style.scss
View File

@@ -21,6 +21,11 @@ body {
}
}
h1 {
margin: 0;
margin-bottom: 1rem;
}
#content {
margin-top: 100px;
min-height: calc(100vh - 100px);
@@ -81,6 +86,19 @@ body {
}
}
#customcol {
margin-top: 1rem;
input {
padding: 0.5rem;
transition: background-color 0.2s ease;
&:invalid {
background-color: lightcoral;
}
}
}
input#file {
position: absolute;
height: 47px;