allow color customization of template (#172)

cli/helpers.js

@@ -374,6 +374,16 @@ function parseCommandLineArguments() {
             type: "string",
             describe: "Title for the output HTML page.",
             default: "Protected Page",
-        });
+        })
+        .option("template-color-primary", {
+            type: "string",
+            describe: "Button color.",
+            default: "#4CAF50",
+        })
+        .option("template-color-secondary", {
+            type: "string",
+            describe: "Background color of the page.",
+            default: "#76b852",
+        })
 }
 exports.parseCommandLineArguments = parseCommandLineArguments;

cli/index.js

@@ -100,6 +100,8 @@ async function runStatiCrypt() {
         template_placeholder: namedArgs.templatePlaceholder,
         template_remember: namedArgs.templateRemember,
         template_title: namedArgs.templateTitle,
+        template_color_primary: namedArgs.templateColorPrimary,
+        template_color_secondary: namedArgs.templateColorSecondary,
     };
 
     const outputFilepath = namedArgs.directory.replace(/\/+$/, '') + "/" + inputFilepath;

lib/password_template.html

@@ -52,7 +52,7 @@
         .staticrypt-form .staticrypt-decrypt-button {
             text-transform: uppercase;
             outline: 0;
-            background: #4CAF50;
+            background: /*[|template_color_primary|]*/0;
             width: 100%;
             border: 0;
             padding: 15px;
@@ -62,7 +62,8 @@
         }
 
         .staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
-            background: #43A047;
+            background: /*[|template_color_primary|]*/0;
+            filter: brightness(95%);
         }
 
         .staticrypt-html {
@@ -77,11 +78,7 @@
         .staticrypt-content {
             height: 100%;
             margin-bottom: 1em;
-            background: #76b852; /* fallback for old browsers */
-            background: -webkit-linear-gradient(right, #76b852, #8DC26F);
-            background: -moz-linear-gradient(right, #76b852, #8DC26F);
-            background: -o-linear-gradient(right, #76b852, #8DC26F);
-            background: linear-gradient(to left, #76b852, #8DC26F);
+            background: /*[|template_color_secondary|]*/0;
             font-family: "Arial", sans-serif;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;