infosecn1nja
/
CyberChef
mirror of https://github.com/infosecn1nja/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Developing a dark theme.

feature-extract-files
n1474335 2017-04-23 17:09:12 +01:00
parent a4d93f23d6
commit e3f41fea9c
8 changed files with 212 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/ControlsWaiter.js
View File

@ -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");
}
};

11
src/web/stylesheets/components/_operation.scss
View File

@ -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;
}

4
src/web/stylesheets/layout/_controls.scss
View File

@ -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 {

2
src/web/stylesheets/layout/_modals.scss
View File

@ -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 {

2
src/web/stylesheets/main.scss
View File

@ -17,7 +17,7 @@
// CyberChef styles
// Default theme
@import "themes/_classic";
@import "themes/_dark";
// Utilities
@import "utils/_mixins";

35
src/web/stylesheets/themes/_classic.scss
View File

@ -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;

121
src/web/stylesheets/themes/_dark.scss Normal file
View File

@ -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;

58
src/web/stylesheets/utils/_overrides.scss
View File

@ -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 */