mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-27 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved from Sass to CSS with custom properties, allowing for dynamic theme changes.

Browse source
This commit is contained in:
n1474335 2017-04-24 23:59:35 +01:00
parent e3f41fea9c
commit d71ac2e894
27 changed files with 527 additions and 603 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/web/stylesheets/themes/_classic.css Executable file
View file

@ -0,0 +1,116 @@
/**
* Classic theme definitions
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
:root.classic {
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-font-colour: #333;
--primary-font-size: 14px;
--primary-line-height: 20px;
--fixed-width-font-family: "Consolas", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
--subtext-font-colour: #999;
--subtext-font-size: 13px;
--primary-background-colour: #fff;
--secondary-background-colour: #fafafa;
--primary-border-colour: #ddd;
--secondary-border-colour: #eee;
--title-colour: #424242;
--title-weight: bold;
--banner-font-colour: #468847;
--banner-bg-colour: #dff0d8;
/* Operation colours */
--op-list-operation-font-colour: #3a87ad;
--op-list-operation-bg-colour: #d9edf7;
--op-list-operation-border-colour: #bce8f1;
--rec-list-operation-font-colour: #468847;
--rec-list-operation-bg-colour: #dff0d8;
--rec-list-operation-border-colour: #d6e9c6;
--selected-operation-font-color: #c09853;
--selected-operation-bg-colour: #fcf8e3;
--selected-operation-border-colour: #fbeed5;
--breakpoint-font-colour: #b94a48;
--breakpoint-bg-colour: #f2dede;
--breakpoint-border-colour: #eed3d7;
--breakpoint-font-colour: #b94a48;
--breakpoint-bg-colour: #f2dede;
--breakpoint-border-colour: #eed3d7;
--disabled-font-colour: #999;
--disabled-bg-colour: #dfdfdf;
--disabled-border-colour: #cdcdcd;
--fc-operation-font-colour: #396f3a;
--fc-operation-bg-colour: #c7e4ba;
--fc-operation-border-colour: #b3dba2;
--fc-breakpoint-operation-font-colour: #94312f;
--fc-breakpoint-operation-bg-colour: #eabfbf;
--fc-breakpoint-operation-border-colour: #e2aeb5;
/* Operation arguments */
--arg-title-font-weight: bold;
--arg-input-height: 34px;
--arg-input-line-height: 20px;
--arg-input-font-size: 15px;
--arg-font-colour: #424242;
--arg-background: #fff;
--arg-border-colour: #ddd;
--arg-disabled-background: #eee;
/* Buttons */
--btn-default-font-colour: #333;
--btn-default-bg-colour: #fff;
--btn-default-border-colour: #ddd;
--btn-default-hover-font-colour: #333;
--btn-default-hover-bg-colour: #ebebeb;
--btn-default-hover-border-colour: #adadad;
--btn-success-font-colour: #fff;
--btn-success-bg-colour: #5cb85c;
--btn-success-border-colour: #4cae4c;
--btn-success-hover-font-colour: #fff;
--btn-success-hover-bg-colour: #449d44;
--btn-success-hover-border-colour: #398439;
/* Highlighter colours */
--hl1: #fff000;
--hl2: #95dfff;
--hl3: #ffb6b6;
--hl4: #fcf8e3;
--hl5: #8de768;
/* Scrollbar */
--scrollbar-track: var(--secondary-background-colour);
--scrollbar-thumb: #ccc;
--scrollbar-hover: #bbb;
/* Misc. */
--drop-file-border-colour: #3a87ad;
--popover-background: #fff;
--popover-border-colour: #ccc;
}

114
src/web/stylesheets/themes/_classic.scss
View file

@ -1,114 +0,0 @@
/**
* Classic theme definitions
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
$primaryFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
$primaryFontColour: #333;
$primaryFontSize: 14px;
$primaryLineHeight: 20px;
$fixedWidthFontFamily: "Consolas", monospace;
$fixedWidthFontColour: inherit;
$fixedWidthFontSize: inherit;
$subtextFontColour: #999;
$subtextFontSize: 13px;
$primaryBackgroundColour: #fff;
$secondaryBackgroundColour: #fafafa;
$primaryBorderColour: #ddd;
$secondaryBorderColour: #eee;
$titleColour: #424242;
$titleWeight: bold;
$bannerFontColour: #468847;
$bannerBgColour: #dff0d8;
// Operation colours
$opListOperationFontColour: #3a87ad;
$opListOperationBgColour: #d9edf7;
$opListOperationBorderColour: #bce8f1;
$recListOperationFontColour: #468847;
$recListOperationBgColour: #dff0d8;
$recListOperationBorderColour: #d6e9c6;
$selectedOperationFontColor: #c09853;
$selectedOperationBgColour: #fcf8e3;
$selectedOperationBorderColour: #fbeed5;
$breakpointFontColour: #b94a48;
$breakpointBgColour: #f2dede;
$breakpointBorderColour: #eed3d7;
$breakpointFontColour: #b94a48;
$breakpointBgColour: #f2dede;
$breakpointBorderColour: #eed3d7;
$disabledFontColour: #999;
$disabledBgColour: #dfdfdf;
$disabledBorderColour: #cdcdcd;
$fcOperationFontColour: #396f3a;
$fcOperationBgColour: #c7e4ba;
$fcOperationBorderColour: #b3dba2;
$fcBreakpointOperationFontColour: #94312f;
$fcBreakpointOperationBgColour: #eabfbf;
$fcBreakpointOperationBorderColour: #e2aeb5;
// Operation arguments
$argTitleFontWeight: bold;
$argInputHeight: 34px;
$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;
$hl3: #ffb6b6;
$hl4: #fcf8e3;
$hl5: #8de768;
// Scrollbar
$scrollbarTrack: $secondaryBackgroundColour;
$scrollbarThumb: #ccc;
$scrollbarHover: #bbb;
// Misc.
$dropFileBorderColour: #3a87ad;
$popoverBackground: #fff;
$popoverBorderColour: #ccc;

126
src/web/stylesheets/themes/_dark.css Normal file
View file

@ -0,0 +1,126 @@
/**
* 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
loading-file background
*/
:root.dark {
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-font-colour: #c5c5c5;
--primary-font-size: 14px;
--primary-line-height: 20px;
--fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
--subtext-font-colour: #999;
--subtext-font-size: 13px;
--primary-background-colour: #1e1e1e;
--secondary-background-colour: #252525;
--primary-border-colour: #444;
--secondary-border-colour: #3c3c3c; /*todo*/
--title-colour: #fff;
--title-weight: bold;
--banner-font-colour: #c5c5c5;
--banner-bg-colour: #333;
/* Operation colours */
--op-list-operation-font-colour: #c5c5c5;
--op-list-operation-bg-colour: #333;
--op-list-operation-border-colour: #444;
--rec-list-operation-font-colour: #c5c5c5; /*todo*/
--rec-list-operation-bg-colour: #333;
--rec-list-operation-border-colour: #444;
--selected-operation-font-color: #c09853; /*todo*/
--selected-operation-bg-colour: #fcf8e3;
--selected-operation-border-colour: #fbeed5;
--breakpoint-font-colour: #b94a48; /*todo*/
--breakpoint-bg-colour: #f2dede;
--breakpoint-border-colour: #eed3d7;
--breakpoint-font-colour: #b94a48; /*todo*/
--breakpoint-bg-colour: #f2dede;
--breakpoint-border-colour: #eed3d7;
--disabled-font-colour: #999; /*todo*/
--disabled-bg-colour: #dfdfdf;
--disabled-border-colour: #cdcdcd;
--fc-operation-font-colour: #396f3a; /*todo*/
--fc-operation-bg-colour: #c7e4ba;
--fc-operation-border-colour: #b3dba2;
--fc-breakpoint-operation-font-colour: #94312f; /*todo*/
--fc-breakpoint-operation-bg-colour: #eabfbf;
--fc-breakpoint-operation-border-colour: #e2aeb5;
/* Operation arguments */
--arg-title-font-weight: bold; /*todo*/
--arg-input-height: 34px;
--arg-input-line-height: 20px;
--arg-input-font-size: 15px;
--arg-font-colour: #bbb;
--arg-background: #252525;
--arg-border-colour: #205375;
--arg-disabled-background: #eee; /*todo*/
/* Buttons */
--btn-default-font-colour: #c5c5c5;
--btn-default-bg-colour: #3c3c3c;
--btn-default-border-colour: #205375;
--btn-default-hover-font-colour: #c5c5c5;
--btn-default-hover-bg-colour: #2d2d2d;
--btn-default-hover-border-colour: #205375;
--btn-success-font-colour: #fff;
--btn-success-bg-colour: #073655;
--btn-success-border-colour: #0e639c;
--btn-success-hover-font-colour: #fff;
--btn-success-hover-bg-colour: #0e639c;
--btn-success-hover-border-colour: #0e639c;
/* Highlighter colours */
--hl1: #fff000; /*todo*/
--hl2: #95dfff;
--hl3: #ffb6b6;
--hl4: #fcf8e3;
--hl5: #8de768;
/* Scrollbar */
--scrollbar-track: #1e1e1e; /* never used */
--scrollbar-thumb: #424242;
--scrollbar-hover: #4e4e4e;
/* Misc. */
--drop-file-border-colour: #3a87ad; /*todo*/
--popover-background: #444;
--popover-border-colour: #666; /* still working on this */
}

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

@ -1,121 +0,0 @@
/**
* 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;