Merge with ui-improvements

src/web/InputWaiter.mjs

@@ -7,6 +7,8 @@
 
 import LoaderWorker from "worker-loader?inline&fallback=false!./LoaderWorker";
 import Utils from "../core/Utils";
+import { toBase64 } from "../core/lib/Base64";
+import { isImage } from "../core/lib/FileType";
 
 
 /**
@@ -176,15 +178,18 @@ class InputWaiter {
                 fileSize = document.getElementById("input-file-size"),
                 fileType = document.getElementById("input-file-type"),
                 fileLoaded = document.getElementById("input-file-loaded");
+
             fileOverlay.style.display = "none";
             fileName.textContent = "";
             fileSize.textContent = "";
             fileType.textContent = "";
             fileLoaded.textContent = "";
 
-            const inputText = document.getElementById("input-text");
+            const inputText = document.getElementById("input-text"),
+                fileThumb = document.getElementById("input-file-thumbnail");
             inputText.style.overflow = "auto";
             inputText.classList.remove("blur");
+            fileThumb.src = require("./static/images/file-128x128.png");
         }
     }
 
@@ -695,8 +700,16 @@ class InputWaiter {
     displayFilePreview() {
         const inputNum = this.getActiveTab(),
             inputText = document.getElementById("input-text"),
-            fileSlice = this.getInput(inputNum).slice(0, 4096);
+            fileSlice = this.fileBuffer.slice(0, 4096),
-
+            fileThumb = document.getElementById("input-file-thumbnail"),
+            arrBuffer = new Uint8Array(this.fileBuffer),
+            type = isImage(arrBuffer);
+        if (type && type !== "image/tiff" && this.app.options.imagePreview) {
+            // Don't show TIFFs as not much supports them
+            fileThumb.src = `data:${type};base64,${toBase64(arrBuffer)}`;
+        } else {
+            fileThumb.src = require("./static/images/file-128x128.png");
+        }
         inputText.style.overflow = "hidden";
         inputText.classList.add("blur");
         inputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice));

src/web/html/index.html

@@ -464,6 +464,8 @@
                                 <option value="classic">Classic</option>
                                 <option value="dark">Dark</option>
                                 <option value="geocities">GeoCities</option>
+                                <option value="solarizedDark">Solarized Dark</option>
+                                <option value="solarizedLight">Solarized Light</option>
                             </select>
                         </div>
 
@@ -537,6 +539,13 @@
                                 Attempt to detect encoded data automagically
                             </label>
                         </div>
+
+                        <div class="checkbox option-item">
+                            <label for="imagePreview">
+                                <input type="checkbox" option="imagePreview" id="imagePreview">
+                                Render a preview of the input if it's detected to be an image.
+                            </label>
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>

src/web/index.js

@@ -53,6 +53,7 @@ function main() {
         ioDisplayThreshold:  512,
         logLevel:            "info",
         autoMagic:           true,
+        imagePreview:        true,
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

src/web/stylesheets/components/_operation.css

@@ -82,7 +82,43 @@ div.toggle-string {
 .operation .is-focused [class*=' bmd-label'],
 .operation .is-focused label,
 .operation .checkbox label:hover {
-    color: #1976d2;
+    color: var(--input-highlight-colour);
+}
+
+.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
+.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
+    border-color: var(--input-border-colour);
+    color: var(--input-highlight-colour);
+}
+
+.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
+.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
+    border-color: var(--input-highlight-colour);
+    color: var(--input-highlight-colour);
+}
+
+.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
+.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
+.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
+.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
+    border-color: var(--disabled-font-colour);
+    color: var(--disabled-font-colour);
+}
+
+.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
+.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
+.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
+.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
+    border-color: var(--breakpoint-font-colour);
+    color: var(--breakpoint-font-colour);
+}
+
+.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
+.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
+.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
+.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
+    border-color: var(--fc-breakpoint-operation-font-colour);
+    color: var(--fc-breakpoint-operation-font-colour);
 }
 
 .operation .form-control {
@@ -97,7 +133,7 @@ div.toggle-string {
 
 .operation .form-control:hover {
     background-image:
-        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
         linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
     filter: brightness(97%);
 }
@@ -105,7 +141,7 @@ div.toggle-string {
 .operation .form-control:focus {
     background-color: var(--arg-background);
     background-image:
-        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
         linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
     filter: brightness(100%);
 }
@@ -205,19 +241,19 @@ div.toggle-string {
 }
 
 .disable-icon {
-    color: #9e9e9e;
+    color: var(--disable-icon-colour);
 }
 
 .disable-icon-selected {
-    color: #f44336;
+    color: var(--disable-icon-selected-colour);
 }
 
 .breakpoint {
-    color: #9e9e9e;
+    color: var(--breakpoint-icon-colour);
 }
 
 .breakpoint-selected {
-    color: #f44336;
+    color: var(--breakpoint-icon-selected-colour);
 }
 
 .break {

src/web/stylesheets/components/_pane.css

@@ -53,6 +53,7 @@
     line-height: 30px;
     background-color: var(--primary-background-colour);
     flex-direction: row;
+    padding-left: 10px;
 }
 
 .io-card.card:hover {
@@ -61,10 +62,16 @@
 
 .io-card.card>img {
     float: left;
-    width: 128px;
+    width: auto;
-    height: 128px;
+    height: auto;
-    margin-left: 10px;
+    max-width: 128px;
-    margin-top: 11px;
+    max-height: 128px;
+    margin-left: auto;
+    margin-top: auto;
+    margin-right: auto;
+    margin-bottom: auto;
+    padding: 0px;
+
 }
 
 .io-card.card .card-body .close {

src/web/stylesheets/index.css

@@ -10,6 +10,8 @@
 @import "./themes/_classic.css";
 @import "./themes/_dark.css";
 @import "./themes/_geocities.css";
+@import "./themes/_solarizedDark.css";
+@import "./themes/_solarizedLight.css";
 
 /* Utilities */
 @import "./utils/_overrides.css";

src/web/stylesheets/layout/_banner.css

@@ -22,6 +22,10 @@
     padding-right: 10px;
 }
 
+#banner a {
+    color: var(--banner-url-colour);
+}
+
 #notice-wrapper {
     text-align: center;
     overflow: hidden;

src/web/stylesheets/layout/_controls.css

@@ -32,6 +32,12 @@
     cursor: pointer;
 }
 
+#auto-bake-label .check,
+#auto-bake-label .check::before {
+    border-color: var(--input-highlight-colour);
+    color: var(--input-highlight-colour);
+}
+
 #auto-bake-label .checkbox-decorator {
     position: relative;
 }

src/web/stylesheets/layout/_modals.css

@@ -77,3 +77,34 @@
     padding: 20px;
     border-left: 2px solid var(--primary-border-colour);
 }
+
+.checkbox label input[type=checkbox]+.checkbox-decorator .check,
+.checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
+    border-color: var(--input-border-colour);
+    color: var(--input-highlight-colour);
+}
+
+.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
+.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
+    border-color: var(--input-highlight-colour);
+    color: var(--input-highlight-colour);
+}
+
+.bmd-form-group.is-focused .option-item label {
+    color: var(--input-highlight-colour);
+}
+
+.bmd-form-group.is-focused [class^='bmd-label'],
+.bmd-form-group.is-focused [class*=' bmd-label'],
+.bmd-form-group.is-focused [class^='bmd-label'],
+.bmd-form-group.is-focused [class*=' bmd-label'],
+.bmd-form-group.is-focused label,
+.checkbox label:hover {
+    color: var(--input-highlight-colour);
+}
+
+.bmd-form-group.option-item label+.form-control{
+    background-image:
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
+}

src/web/stylesheets/layout/_operations.css

@@ -16,7 +16,7 @@
     padding-left: 10px;
     padding-right: 10px;
     background-image:
-        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
         linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
@@ -33,7 +33,7 @@
 }
 
 #categories a {
-    color: #1976d2;
+    color: var(--category-list-font-colour);
     cursor: pointer;
 }
 

src/web/stylesheets/preloader.css

@@ -6,14 +6,14 @@
  * @license Apache-2.0
  */
 
-#loader-wrapper {
+ #loader-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
-    background-color: var(--secondary-border-colour);
+    background-color: var(--loader-background-colour);
 }
 
 .loader {
@@ -26,7 +26,7 @@
     margin: -75px 0 0 -75px;
 
     border: 3px solid transparent;
-    border-top-color: #3498db;
+    border-top-color: var(--loader-outer-colour);
     border-radius: 50%;
 
     animation: spin 2s linear infinite;
@@ -45,7 +45,7 @@
     left: 5px;
     right: 5px;
     bottom: 5px;
-    border-top-color: #e74c3c;
+    border-top-color: var(--loader-middle-colour);
     animation: spin 3s linear infinite;
 }
 
@@ -54,7 +54,7 @@
     left: 13px;
     right: 13px;
     bottom: 13px;
-    border-top-color: #f9c922;
+    border-top-color: var(--loader-inner-colour);
     animation: spin 1.5s linear infinite;
 }
 

src/web/stylesheets/themes/_classic.css

@@ -35,6 +35,14 @@
 
     --banner-font-colour: #468847;
     --banner-bg-colour: #dff0d8;
+    --banner-url-colour: #1976d2;
+
+    --category-list-font-colour: #1976d2;
+
+    --loader-background-colour: var(--secondary-border-colour);
+    --loader-outer-colour: #3498db;
+    --loader-middle-colour: #e74c3c;
+    --loader-inner-colour: #f9c922;
 
 
     /* Operation colours */
@@ -76,6 +84,13 @@
     --arg-label-colour: #388e3c;
 
 
+    /* Operation buttons */
+    --disable-icon-colour: #9e9e9e;
+    --disable-icon-selected-colour: #f44336;
+    --breakpoint-icon-colour: #9e9e9e;
+    --breakpoint-icon-selected-colour: #f44336;
+
+
     /* Buttons */
     --btn-default-font-colour: #333;
     --btn-default-bg-colour: #fff;
@@ -114,4 +129,6 @@
     --popover-border-colour: #ccc;
     --code-background: #f9f2f4;
     --code-font-colour: #c7254e;
+    --input-highlight-colour: #1976d2;
+    --input-border-colour: #424242;
 }

src/web/stylesheets/themes/_dark.css

@@ -31,6 +31,14 @@
 
     --banner-font-colour: #c5c5c5;
     --banner-bg-colour: #252525;
+    --banner-url-colour: #1976d2;
+
+    --category-list-font-colour: #1976d2;
+
+    --loader-background-colour: var(--secondary-border-colour);
+    --loader-outer-colour: #3498db;
+    --loader-middle-colour: #e74c3c;
+    --loader-inner-colour: #f9c922;
 
 
     /* Operation colours */
@@ -72,6 +80,13 @@
     --arg-label-colour: rgb(25, 118, 210);
 
 
+    /* Operation buttons */
+    --disable-icon-colour: #9e9e9e;
+    --disable-icon-selected-colour: #f44336;
+    --breakpoint-icon-colour: #9e9e9e;
+    --breakpoint-icon-selected-colour: #f44336;
+
+
     /* Buttons */
     --btn-default-font-colour: #c5c5c5;
     --btn-default-bg-colour: #2d2d2d;
@@ -110,4 +125,6 @@
     --popover-border-colour: #555;
     --code-background: #0e639c;
     --code-font-colour: #fff;
+    --input-highlight-colour: #1976d2;
+    --input-border-colour: #424242;
 }

src/web/stylesheets/themes/_geocities.css

@@ -31,6 +31,14 @@
 
     --banner-font-colour: white;
     --banner-bg-colour: maroon;
+    --banner-url-colour: yellow;
+
+    --category-list-font-colour: yellow;
+
+    --loader-background-colour: #00f;
+    --loader-outer-colour: #0f0;
+    --loader-middle-colour: red;
+    --loader-inner-colour: yellow;
 
 
     /* Operation colours */
@@ -72,6 +80,13 @@
     --arg-label-colour: red;
 
 
+    /* Operation buttons */
+    --disable-icon-colour: #0f0;
+    --disable-icon-selected-colour: yellow;
+    --breakpoint-icon-colour: #0f0;
+    --breakpoint-icon-selected-colour: yellow;
+
+
     /* Buttons */
     --btn-default-font-colour: black;
     --btn-default-bg-colour: white;
@@ -110,4 +125,6 @@
     --popover-border-colour: violet;
     --code-background: black;
     --code-font-colour: limegreen;
+    --input-highlight-colour: limegreen;
+    --input-border-colour: limegreen;
 }

src/web/stylesheets/themes/_solarizedDark.css

@@ -0,0 +1,147 @@
+/**
+ * Solarized dark theme definitions
+ *
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root.solarizedDark {
+    --base03: #002b36;
+    --base02: #073642;
+    --base01: #586e75;
+    --base00: #657b83;
+    --base0: #839496;
+    --base1: #93a1a1;
+    --base2: #eee8d5;
+    --base3: #fdf6e3;
+    --sol-yellow: #b58900;
+    --sol-orange: #cb4b16;
+    --sol-red: #dc322f;
+    --sol-magenta: #d33682;
+    --sol-violet: #6c71c4;
+    --sol-blue: #268bd2;
+    --sol-cyan: #2aa198;
+    --sol-green: #859900;
+
+    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, sans-serif;
+    --primary-font-colour: var(--base0);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    --fixed-width-font-colour: inherit;
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--base01);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--base03);
+    --secondary-background-colour: var(--base02);
+
+    --primary-border-colour: var(--base00);
+    --secondary-border-colour: var(--base01);
+
+    --title-colour: var(--base1);
+    --title-weight: bold;
+    --title-background-colour: var(--base02);
+
+    --banner-font-colour: var(--base0);
+    --banner-bg-colour: var(--base03);
+    --banner-url-colour: var(--base1);
+
+    --category-list-font-colour: var(--base1);
+
+    --loader-background-colour: var(--base03);
+    --loader-outer-colour: var(--base1);
+    --loader-middle-colour: var(--base0);
+    --loader-inner-colour: var(--base00);
+
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--base0);
+    --op-list-operation-bg-colour: var(--base03);
+    --op-list-operation-border-colour: var(--base02);
+
+    --rec-list-operation-font-colour: var(--base0);
+    --rec-list-operation-bg-colour: var(--base02);
+    --rec-list-operation-border-colour: var(--base01);
+
+    --selected-operation-font-color: var(--base1);
+    --selected-operation-bg-colour: var(--base02);
+    --selected-operation-border-colour: var(--base01);
+
+    --breakpoint-font-colour: var(--sol-red);
+    --breakpoint-bg-colour: var(--base02);
+    --breakpoint-border-colour: var(--base00);
+
+    --disabled-font-colour: var(--base01);
+    --disabled-bg-colour: var(--base03);
+    --disabled-border-colour: var(--base02);
+
+    --fc-operation-font-colour: var(--base1);
+    --fc-operation-bg-colour: var(--base02);
+    --fc-operation-border-colour: var(--base01);
+
+    --fc-breakpoint-operation-font-colour: var(--sol-orange);
+    --fc-breakpoint-operation-bg-colour: var(--base02);
+    --fc-breakpoint-operation-border-colour: var(--base00);
+
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--base0);
+    --arg-background: var(--base03);
+    --arg-border-colour: var(--base00);
+    --arg-disabled-background: var(--base03);
+    --arg-label-colour: var(--base1);
+
+
+    /* Operation buttons */
+    --disable-icon-colour: var(--base00);
+    --disable-icon-selected-colour: var(--sol-red);
+    --breakpoint-icon-colour: var(--base00);
+    --breakpoint-icon-selected-colour: var(--sol-red);
+
+    /* Buttons */
+    --btn-default-font-colour: var(--base0);
+    --btn-default-bg-colour: var(--base02);
+    --btn-default-border-colour: var(--base01);
+
+    --btn-default-hover-font-colour: var(--base1);
+    --btn-default-hover-bg-colour: var(--base01);
+    --btn-default-hover-border-colour: var(--base00);
+
+    --btn-success-font-colour: var(--base0);
+    --btn-success-bg-colour: var(--base03);
+    --btn-success-border-colour: var(--base00);
+
+    --btn-success-hover-font-colour: var(--base1);
+    --btn-success-hover-bg-colour: var(--base01);
+    --btn-success-hover-border-colour: var(--base00);
+
+    /* Highlighter colours */
+    --hl1: var(--base01);
+    --hl2: var(--sol-blue);
+    --hl3: var(--sol-magenta);
+    --hl4: var(--sol-yellow);
+    --hl5: var(--sol-green);
+
+
+    /* Scrollbar */
+    --scrollbar-track: var(--base03);
+    --scrollbar-thumb: var(--base00);
+    --scrollbar-hover: var(--base01);
+
+
+    /* Misc. */
+    --drop-file-border-colour: var(--base01);
+    --popover-background: var(--base02);
+    --popover-border-colour: var(--base01);
+    --code-background: var(--base03);
+    --code-font-colour: var(--base1);
+    --input-highlight-colour: var(--base1);
+    --input-border-colour: var(--base0);
+}

src/web/stylesheets/themes/_solarizedLight.css

@@ -0,0 +1,149 @@
+/**
+ * Solarized light theme definitions
+ *
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root.solarizedLight {
+    --base03: #002b36;
+    --base02: #073642;
+    --base01: #586e75;
+    --base00: #657b83;
+    --base0: #839496;
+    --base1: #93a1a1;
+    --base2: #eee8d5;
+    --base3: #fdf6e3;
+    --sol-yellow: #b58900;
+    --sol-orange: #cb4b16;
+    --sol-red: #dc322f;
+    --sol-magenta: #d33682;
+    --sol-violet: #6c71c4;
+    --sol-blue: #268bd2;
+    --sol-cyan: #2aa198;
+    --sol-green: #859900;
+
+    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, sans-serif;
+    --primary-font-colour: var(--base00);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    --fixed-width-font-colour: inherit;
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--base1);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--base3);
+    --secondary-background-colour: var(--base2);
+
+    --primary-border-colour: var(--base0);
+    --secondary-border-colour: var(--base1);
+
+    --title-colour: var(--base01);
+    --title-weight: bold;
+    --title-background-colour: var(--base2);
+
+    --banner-font-colour: var(--base00);
+    --banner-bg-colour: var(--base3);
+    --banner-url-colour: var(--base01);
+
+    --category-list-font-colour: var(--base01);
+
+    --loader-background-colour: var(--base3);
+    --loader-outer-colour: var(--base01);
+    --loader-middle-colour: var(--base00);
+    --loader-inner-colour: var(--base0);
+
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--base00);
+    --op-list-operation-bg-colour: var(--base3);
+    --op-list-operation-border-colour: var(--base2);
+
+    --rec-list-operation-font-colour: var(--base00);
+    --rec-list-operation-bg-colour: var(--base2);
+    --rec-list-operation-border-colour: var(--base1);
+
+    --selected-operation-font-color: var(--base01);
+    --selected-operation-bg-colour: var(--base2);
+    --selected-operation-border-colour: var(--base1);
+
+    --breakpoint-font-colour: var(--sol-red);
+    --breakpoint-bg-colour: var(--base2);
+    --breakpoint-border-colour: var(--base0);
+
+    --disabled-font-colour: var(--base1);
+    --disabled-bg-colour: var(--base3);
+    --disabled-border-colour: var(--base2);
+
+    --fc-operation-font-colour: var(--base01);
+    --fc-operation-bg-colour: var(--base2);
+    --fc-operation-border-colour: var(--base1);
+
+    --fc-breakpoint-operation-font-colour: var(--base02);
+    --fc-breakpoint-operation-bg-colour: var(--base1);
+    --fc-breakpoint-operation-border-colour: var(--base0);
+
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--base00);
+    --arg-background: var(--base3);
+    --arg-border-colour: var(--base0);
+    --arg-disabled-background: var(--base3);
+    --arg-label-colour: var(--base01);
+
+
+    /* Operation buttons */
+    --disable-icon-colour: #9e9e9e;
+    --disable-icon-selected-colour: #f44336;
+    --breakpoint-icon-colour: #9e9e9e;
+    --breakpoint-icon-selected-colour: #f44336;
+
+
+    /* Buttons */
+    --btn-default-font-colour: var(--base00);
+    --btn-default-bg-colour: var(--base2);
+    --btn-default-border-colour: var(--base1);
+
+    --btn-default-hover-font-colour: var(--base01);
+    --btn-default-hover-bg-colour: var(--base1);
+    --btn-default-hover-border-colour: var(--base0);
+
+    --btn-success-font-colour: var(--base00);
+    --btn-success-bg-colour: var(--base3);
+    --btn-success-border-colour: var(--base0);
+
+    --btn-success-hover-font-colour: var(--base01);
+    --btn-success-hover-bg-colour: var(--base1);
+    --btn-success-hover-border-colour: var(--base0);
+
+
+    /* Highlighter colours */
+    --hl1: var(--base1);
+    --hl2: var(--sol-blue);
+    --hl3: var(--sol-magenta);
+    --hl4: var(--sol-yellow);
+    --hl5: var(--sol-green);
+
+
+    /* Scrollbar */
+    --scrollbar-track: var(--base3);
+    --scrollbar-thumb: var(--base1);
+    --scrollbar-hover: var(--base0);
+
+
+    /* Misc. */
+    --drop-file-border-colour: var(--base1);
+    --popover-background: var(--base2);
+    --popover-border-colour: var(--base1);
+    --code-background: var(--base3);
+    --code-font-colour: var(--base01);
+    --input-highlight-colour: var(--base01);
+    --input-border-colour: var(--base00);
+}

src/web/stylesheets/utils/_overrides.css

@@ -104,8 +104,11 @@ select.form-control:not([size]):not([multiple]), select.custom-file-control:not(
     color: var(--primary-font-colour);
 }
 
-.form-control {
+.form-control
-    background-image: linear-gradient(to top, rgb(25, 118, 210) 2px, rgba(25, 118, 210, 0) 2px), linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
+.is-focused .form-control {
+    background-image:
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
 code {