DenverCoder1
diff --git a/‎src/demo/css/style.css
Lines changed: 1 addition & 6 deletions b/‎src/demo/css/style.css
Lines changed: 1 addition & 6 deletions
diff --git a/‎src/demo/index.php
Lines changed: 11 additions & 1 deletion b/‎src/demo/index.php
Lines changed: 11 additions & 1 deletion
@@ -147,7 +147,7 @@ h2 {
 }
 
 .parameters input[type="text"],
-.parameters input[type="color"],
+.parameters input.jscolor,
 .parameters select {
   padding: 10px 14px;
   display: inline-block;
@@ -173,11 +173,6 @@ h2 {
   display: none;
 }
 
-.parameters input[type="color"] {
-  padding: 4px 6px;
-  height: 40px;
-}
-
 .parameters label {
   text-transform: capitalize;
 }
 
@@ -22,6 +22,17 @@ function gtag(){dataLayer.push(arguments);}
     <script type="text/javascript" src="./js/script.js" defer></script>
     <script type="text/javascript" src="./js/accordion.js" defer></script>
     <script type="text/javascript" src="./js/toggle-dark.js" defer></script>
+    <script type="text/javascript" src="./js/jscolor.min.js" defer></script>
+    <script >
+        //defers inline script and defines custom jscolor preset
+        window.addEventListener('DOMContentLoaded', function() {
+            if (jscolor) {
+                jscolor.presets.customPreset = {
+                    format: 'rgba',
+                }
+            }
+        });
+    </script>
 </head>
 
 <body <?php echo $_COOKIE["darkmode"] == "on" ? 'data-theme="dark"' : ""; ?>>
@@ -45,7 +56,6 @@ function gtag(){dataLayer.push(arguments);}
     <div class="container">
         <div class="properties">
             <h2>Properties</h2>
-
             <form class="parameters">
                 <label for="user">Username<span title="required">*</span></label>
                 <input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" required
Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,7 @@ h2 {`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`.parameters input[type="text"],`
`150`		`-.parameters input[type="color"],`
	`150`	`+.parameters input.jscolor,`
`151`	`151`	`.parameters select {`
`152`	`152`	`padding: 10px 14px;`
`153`	`153`	`display: inline-block;`
`@@ -173,11 +173,6 @@ h2 {`
`173`	`173`	`display: none;`
`174`	`174`	`}`
`175`	`175`
`176`		`-.parameters input[type="color"] {`
`177`		`- padding: 4px 6px;`
`178`		`- height: 40px;`
`179`		`-}`
`180`		`-`
`181`	`176`	`.parameters label {`
`182`	`177`	`text-transform: capitalize;`
`183`	`178`	`}`