diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 920cda8e..d9668b66 100644 --- a/src/web/InputWaiter.mjs +++ b/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)); diff --git a/src/web/html/index.html b/src/web/html/index.html index 20b1ec3b..f2723120 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -464,6 +464,8 @@ + + @@ -537,6 +539,13 @@ Attempt to detect encoded data automagically + +
+ +
diff --git a/src/web/index.js b/src/web/index.js index 911a1532..86efaba3 100755 --- a/src/web/index.js +++ b/src/web/index.js @@ -53,6 +53,7 @@ function main() { ioDisplayThreshold: 512, logLevel: "info", autoMagic: true, + imagePreview: true, }; document.removeEventListener("DOMContentLoaded", main, false); diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index a7e89cd4..0669f94f 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/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 { diff --git a/src/web/stylesheets/components/_pane.css b/src/web/stylesheets/components/_pane.css index 65caf6e6..9ee8f46f 100755 --- a/src/web/stylesheets/components/_pane.css +++ b/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; - height: 128px; - margin-left: 10px; - margin-top: 11px; + width: auto; + height: auto; + max-width: 128px; + max-height: 128px; + margin-left: auto; + margin-top: auto; + margin-right: auto; + margin-bottom: auto; + padding: 0px; + } .io-card.card .card-body .close { diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css index b5463a5b..ef35d54f 100755 --- a/src/web/stylesheets/index.css +++ b/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"; diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css index 220ae914..59856958 100755 --- a/src/web/stylesheets/layout/_banner.css +++ b/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; diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css index 380cd284..c8b8b3d4 100755 --- a/src/web/stylesheets/layout/_controls.css +++ b/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; } diff --git a/src/web/stylesheets/layout/_modals.css b/src/web/stylesheets/layout/_modals.css index a49c579d..c1745eeb 100755 --- a/src/web/stylesheets/layout/_modals.css +++ b/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); +} \ No newline at end of file diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css index e5e4c887..b73dfa84 100755 --- a/src/web/stylesheets/layout/_operations.css +++ b/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; } diff --git a/src/web/stylesheets/preloader.css b/src/web/stylesheets/preloader.css index 288ffc28..01e6d3d2 100755 --- a/src/web/stylesheets/preloader.css +++ b/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; } diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css index 5d6bd3e8..f89d9dce 100755 --- a/src/web/stylesheets/themes/_classic.css +++ b/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; } diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css index 62d91808..ff2217fb 100755 --- a/src/web/stylesheets/themes/_dark.css +++ b/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; } diff --git a/src/web/stylesheets/themes/_geocities.css b/src/web/stylesheets/themes/_geocities.css index 12936e21..230638b1 100755 --- a/src/web/stylesheets/themes/_geocities.css +++ b/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; } diff --git a/src/web/stylesheets/themes/_solarizedDark.css b/src/web/stylesheets/themes/_solarizedDark.css new file mode 100755 index 00000000..0be53b39 --- /dev/null +++ b/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); +} diff --git a/src/web/stylesheets/themes/_solarizedLight.css b/src/web/stylesheets/themes/_solarizedLight.css new file mode 100755 index 00000000..eddcdb51 --- /dev/null +++ b/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); +} diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css index 014da99a..ea191749 100755 --- a/src/web/stylesheets/utils/_overrides.css +++ b/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 { - 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); +.form-control +.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 {