From e3f41fea9c66cc6e4bd47b162f4f9ab7a06b8dec Mon Sep 17 00:00:00 2001 From: n1474335 Date: Sun, 23 Apr 2017 17:09:12 +0100 Subject: [PATCH] Developing a dark theme. --- src/web/ControlsWaiter.js | 4 +- .../stylesheets/components/_operation.scss | 11 +- src/web/stylesheets/layout/_controls.scss | 4 +- src/web/stylesheets/layout/_modals.scss | 2 +- src/web/stylesheets/main.scss | 2 +- src/web/stylesheets/themes/_classic.scss | 35 ++++- src/web/stylesheets/themes/_dark.scss | 121 ++++++++++++++++++ src/web/stylesheets/utils/_overrides.scss | 58 +++++++-- 8 files changed, 212 insertions(+), 25 deletions(-) create mode 100644 src/web/stylesheets/themes/_dark.scss diff --git a/src/web/ControlsWaiter.js b/src/web/ControlsWaiter.js index 9896ed9e..6408439a 100755 --- a/src/web/ControlsWaiter.js +++ b/src/web/ControlsWaiter.js @@ -106,11 +106,11 @@ ControlsWaiter.prototype.autoBakeChange = function() { this.app.autoBake_ = autoBakeCheckbox.checked; if (autoBakeCheckbox.checked) { - autoBakeLabel.classList.remove("btn-default"); autoBakeLabel.classList.add("btn-success"); + autoBakeLabel.classList.remove("btn-default"); } else { - autoBakeLabel.classList.remove("btn-success"); autoBakeLabel.classList.add("btn-default"); + autoBakeLabel.classList.remove("btn-success"); } }; diff --git a/src/web/stylesheets/components/_operation.scss b/src/web/stylesheets/components/_operation.scss index e16e87f6..6c64e24a 100644 --- a/src/web/stylesheets/components/_operation.scss +++ b/src/web/stylesheets/components/_operation.scss @@ -13,7 +13,9 @@ position: relative; border-width: 1px; border-style: solid; - border-top-width: 0; + border-top: none; + border-left: none; + border-right: none; } .arg-group { @@ -55,7 +57,7 @@ line-height: $argInputLineHeight; color: $argFontColour; background-color: $argBackground; - border: 1px solid $primaryBorderColour; + border: 1px solid $argBorderColour; font-family: $fixedWidthFontFamily; } @@ -67,7 +69,7 @@ select { display: block; padding: 6px 8px; height: 34px; - border: 1px solid $primaryBorderColour; + border: 1px solid $argBorderColour; background-color: $argBackground; color: $argFontColour; } @@ -83,9 +85,10 @@ textarea.arg { min-height: 50px; height: 70px; margin-top: 5px; - border: 1px solid $primaryBorderColour; + border: 1px solid $argBorderColour; resize: vertical; color: $argFontColour; + background-color: $argBackground; font-family: $fixedWidthFontFamily; } diff --git a/src/web/stylesheets/layout/_controls.scss b/src/web/stylesheets/layout/_controls.scss index e7597917..5b82296a 100644 --- a/src/web/stylesheets/layout/_controls.scss +++ b/src/web/stylesheets/layout/_controls.scss @@ -44,11 +44,11 @@ $controlsDivision: 65%; width: 60px; border-top-left-radius: 0; border-bottom-left-radius: 0; - border-left: 1px solid #5cb85c; + border-left: 1px solid $btnSuccessBgColour; } #auto-bake-label:hover { - border-left-color: #398439; + border-left-color: $btnSuccessHoverBorderColour; } #auto-bake-label div { diff --git a/src/web/stylesheets/layout/_modals.scss b/src/web/stylesheets/layout/_modals.scss index f231d420..3aae2acc 100644 --- a/src/web/stylesheets/layout/_modals.scss +++ b/src/web/stylesheets/layout/_modals.scss @@ -67,7 +67,7 @@ #save-footer { border-top: none; margin-top: 0; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primaryBorderColour; } #support-modal textarea { diff --git a/src/web/stylesheets/main.scss b/src/web/stylesheets/main.scss index a90cac43..13b37090 100644 --- a/src/web/stylesheets/main.scss +++ b/src/web/stylesheets/main.scss @@ -17,7 +17,7 @@ // CyberChef styles // Default theme -@import "themes/_classic"; +@import "themes/_dark"; // Utilities @import "utils/_mixins"; diff --git a/src/web/stylesheets/themes/_classic.scss b/src/web/stylesheets/themes/_classic.scss index 37680ba6..25ee5a8f 100755 --- a/src/web/stylesheets/themes/_classic.scss +++ b/src/web/stylesheets/themes/_classic.scss @@ -27,6 +27,9 @@ $secondaryBorderColour: #eee; $titleColour: #424242; $titleWeight: bold; +$bannerFontColour: #468847; +$bannerBgColour: #dff0d8; + // Operation colours $opListOperationFontColour: #3a87ad; @@ -69,9 +72,28 @@ $argInputLineHeight: 20px; $argInputFontSize: 15px; $argFontColour: #424242; $argBackground: #fff; +$argBorderColour: #ddd; $argDisabledBackground: #eee; +// Buttons +$btnDefaultFontColour: #333; +$btnDefaultBgColour: #fff; +$btnDefaultBorderColour: #ddd; + +$btnDefaultHoverFontColour: #333; +$btnDefaultHoverBgColour: #ebebeb; +$btnDefaultHoverBorderColour: #adadad; + +$btnSuccessFontColour: #fff; +$btnSuccessBgColour: #5cb85c; +$btnSuccessBorderColour: #4cae4c; + +$btnSuccessHoverFontColour: #fff; +$btnSuccessHoverBgColour: #449d44; +$btnSuccessHoverBorderColour: #398439; + + // Highlighter colours $hl1: #fff000; $hl2: #95dfff; @@ -80,12 +102,13 @@ $hl4: #fcf8e3; $hl5: #8de768; -// Misc. -$dropFileBorderColour: #3a87ad; - -$bannerFontColour: #468847; -$bannerBgColour: #dff0d8; - +// Scrollbar $scrollbarTrack: $secondaryBackgroundColour; $scrollbarThumb: #ccc; $scrollbarHover: #bbb; + + +// Misc. +$dropFileBorderColour: #3a87ad; +$popoverBackground: #fff; +$popoverBorderColour: #ccc; diff --git a/src/web/stylesheets/themes/_dark.scss b/src/web/stylesheets/themes/_dark.scss new file mode 100644 index 00000000..ae4e7dfa --- /dev/null +++ b/src/web/stylesheets/themes/_dark.scss @@ -0,0 +1,121 @@ +/** + * Dark theme definitions + * + * @author n1474335 [n1474335@gmail.com] + * @copyright Crown Copyright 2017 + * @license Apache-2.0 + */ + +// tabs +// links +// disabled buttons +// popovers +// toggle-string dropdowns +// alerts + +$primaryFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +$primaryFontColour: #c5c5c5; +$primaryFontSize: 14px; +$primaryLineHeight: 20px; + +$fixedWidthFontFamily: "Monaco", "Droid Sans Mono", "Consolas", monospace; +$fixedWidthFontColour: inherit; +$fixedWidthFontSize: inherit; + +$subtextFontColour: #999; +$subtextFontSize: 13px; + +$primaryBackgroundColour: #1e1e1e; +$secondaryBackgroundColour: #252525; + +$primaryBorderColour: #444; +$secondaryBorderColour: #3c3c3c; //todo + +$titleColour: #fff; +$titleWeight: bold; + +$bannerFontColour: #c5c5c5; +$bannerBgColour: #333; + + +// Operation colours +$opListOperationFontColour: #c5c5c5; +$opListOperationBgColour: #333; +$opListOperationBorderColour: #444; + +$recListOperationFontColour: #c5c5c5; //todo +$recListOperationBgColour: #333; +$recListOperationBorderColour: #444; + +$selectedOperationFontColor: #c09853; //todo +$selectedOperationBgColour: #fcf8e3; +$selectedOperationBorderColour: #fbeed5; + +$breakpointFontColour: #b94a48; //todo +$breakpointBgColour: #f2dede; +$breakpointBorderColour: #eed3d7; + +$breakpointFontColour: #b94a48; //todo +$breakpointBgColour: #f2dede; +$breakpointBorderColour: #eed3d7; + +$disabledFontColour: #999; //todo +$disabledBgColour: #dfdfdf; +$disabledBorderColour: #cdcdcd; + +$fcOperationFontColour: #396f3a; //todo +$fcOperationBgColour: #c7e4ba; +$fcOperationBorderColour: #b3dba2; + +$fcBreakpointOperationFontColour: #94312f; //todo +$fcBreakpointOperationBgColour: #eabfbf; +$fcBreakpointOperationBorderColour: #e2aeb5; + + +// Operation arguments +$argTitleFontWeight: bold; //todo +$argInputHeight: 34px; +$argInputLineHeight: 20px; +$argInputFontSize: 15px; +$argFontColour: #bbb; +$argBackground: #252525; +$argBorderColour: #205375; +$argDisabledBackground: #eee; //todo + + +// Buttons +$btnDefaultFontColour: #c5c5c5; +$btnDefaultBgColour: #3c3c3c; +$btnDefaultBorderColour: #205375; + +$btnDefaultHoverFontColour: #c5c5c5; +$btnDefaultHoverBgColour: #2d2d2d; +$btnDefaultHoverBorderColour: #205375; + +$btnSuccessFontColour: #fff; +$btnSuccessBgColour: #073655; +$btnSuccessBorderColour: #0e639c; + +$btnSuccessHoverFontColour: #fff; +$btnSuccessHoverBgColour: #0e639c; +$btnSuccessHoverBorderColour: #0e639c; + + +// Highlighter colours +$hl1: #fff000; //todo +$hl2: #95dfff; +$hl3: #ffb6b6; +$hl4: #fcf8e3; +$hl5: #8de768; + + +// Scrollbar +$scrollbarTrack: #1e1e1e; +$scrollbarThumb: #424242; +$scrollbarHover: #4e4e4e; + + +// Misc. +$dropFileBorderColour: #3a87ad; //todo +$popoverBackground: #444; +$popoverBorderColour: #666; diff --git a/src/web/stylesheets/utils/_overrides.scss b/src/web/stylesheets/utils/_overrides.scss index 75640a49..840170a5 100755 --- a/src/web/stylesheets/utils/_overrides.scss +++ b/src/web/stylesheets/utils/_overrides.scss @@ -15,18 +15,38 @@ a:focus { } .btn-default { - border-color: #ddd; -} - -.btn-default:focus { - background-color: #fff; - border-color: #adadad; + color: $btnDefaultFontColour; + background-color: $btnDefaultBgColour; + border-color: $btnDefaultBorderColour; } .btn-default:hover, -.btn-default:active { - background-color: #ebebeb; - border-color: #adadad; +.btn-default:active, +.btn-default:hover:active { + color: $btnDefaultHoverFontColour; + background-color: $btnDefaultHoverBgColour; + border-color: $btnDefaultHoverBorderColour; +} + +.btn-default:focus { + color: $btnDefaultFontColour; + background-color: $btnDefaultBgColour; + border-color: $btnDefaultHoverBorderColour; +} + +.btn-success { + color: $btnSuccessFontColour; + background-color: $btnSuccessBgColour; + border-color: $btnSuccessBorderColour; +} + +.btn-success:hover, +.btn-success:active, +.btn-success:focus, +.btn-success:hover:active { + color: $btnSuccessHoverFontColour; + background-color: $btnSuccessHoverBgColour; + border-color: $btnSuccessHoverBorderColour; } .btn, @@ -54,6 +74,15 @@ input[type="search"]::-webkit-search-cancel-button { overflow-y: auto; } +.modal-content { + background-color: $primaryBackgroundColour; +} + +.modal-header, +.modal-footer { + border-color: $primaryBorderColour; +} + .form-control { background-color: transparent; } @@ -89,6 +118,17 @@ optgroup { width: auto !important; } +.popover, +.popover.right>.arrow { + background-color: $popoverBackground; + border-color: $popoverBorderColour; +} + +.popover.right>.arrow:after { + // border-color: $popoverBorderColour; + border-right-color: $popoverBackground; +} + /* Bootstrap-switch */