mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-27 18:26:14 -04:00
Add new solarized light and dark themes.
Add more elements to be controlled by theme css: - Preloader spinner colours - Operation disable / breakpoint icons - Auto bake checkbox - Search highlight colour - Categories header colour
This commit is contained in:
j433866
parent
328c0ade22
commit
d09ab4a153
13 changed files with 494 additions and 14 deletions
|
|
@ -36,6 +36,13 @@
|
|||
--banner-font-colour: #468847;
|
||||
--banner-bg-colour: #dff0d8;
|
||||
|
||||
--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 */
|
||||
--op-list-operation-font-colour: #3a87ad;
|
||||
|
|
@ -76,6 +83,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 +128,5 @@
|
|||
--popover-border-colour: #ccc;
|
||||
--code-background: #f9f2f4;
|
||||
--code-font-colour: #c7254e;
|
||||
--input-highlight-colour: #1976d2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,13 @@
|
|||
--banner-font-colour: #c5c5c5;
|
||||
--banner-bg-colour: #252525;
|
||||
|
||||
--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 */
|
||||
--op-list-operation-font-colour: #c5c5c5;
|
||||
|
|
@ -72,6 +79,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 +124,5 @@
|
|||
--popover-border-colour: #555;
|
||||
--code-background: #0e639c;
|
||||
--code-font-colour: #fff;
|
||||
--input-highlight-colour: #1976d2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,13 @@
|
|||
--banner-font-colour: white;
|
||||
--banner-bg-colour: maroon;
|
||||
|
||||
--category-list-font-colour: yellow;
|
||||
|
||||
--loader-background-colour: #00f;
|
||||
--loader-outer-colour: #0f0;
|
||||
--loader-middle-colour: red;
|
||||
--loader-inner-colour: yellow;
|
||||
|
||||
|
||||
/* Operation colours */
|
||||
--op-list-operation-font-colour: blue;
|
||||
|
|
@ -72,6 +79,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 +124,5 @@
|
|||
--popover-border-colour: violet;
|
||||
--code-background: black;
|
||||
--code-font-colour: limegreen;
|
||||
--input-highlight-colour: limegreen;
|
||||
}
|
||||
|
|
|
|||
143
src/web/stylesheets/themes/_solarizedDark.css
Executable file
143
src/web/stylesheets/themes/_solarizedDark.css
Executable file
|
|
@ -0,0 +1,143 @@
|
|||
/**
|
||||
* 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: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--primary-font-colour: var(--base0);
|
||||
--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: 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);
|
||||
|
||||
--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);
|
||||
}
|
||||
127
src/web/stylesheets/themes/_solarizedDarkOld.css
Executable file
127
src/web/stylesheets/themes/_solarizedDarkOld.css
Executable file
|
|
@ -0,0 +1,127 @@
|
|||
/**
|
||||
* Solarized Dark theme definitions
|
||||
*
|
||||
* @author j433866 [j433866@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
:root.solarizedDarkOld {
|
||||
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--primary-font-colour: #839496;
|
||||
--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: #002b36;
|
||||
--secondary-background-colour: #073642;
|
||||
|
||||
--primary-border-colour: #657b83;
|
||||
--secondary-border-colour: #839496;
|
||||
|
||||
--title-colour: #93a1a1;
|
||||
--title-weight: bold;
|
||||
--title-background-colour: #073642;
|
||||
|
||||
--banner-font-colour: #93a1a1;
|
||||
--banner-bg-colour: #002b36;
|
||||
|
||||
--category-list-font-colour: #999;
|
||||
|
||||
--loader-background-colour: var(--secondary-border-colour);
|
||||
--loader-outer-colour: #3498db;
|
||||
--loader-middle-colour: #e74c3c;
|
||||
--loader-inner-colour: #f9c922;
|
||||
|
||||
|
||||
/* Operation colours */
|
||||
--op-list-operation-font-colour: #93a1a1;
|
||||
--op-list-operation-bg-colour: #002b36;
|
||||
--op-list-operation-border-colour: #657b83;
|
||||
|
||||
--rec-list-operation-font-colour: #93a1a1;
|
||||
--rec-list-operation-bg-colour: #002b36;
|
||||
--rec-list-operation-border-colour: #657b83;
|
||||
|
||||
--selected-operation-font-color: #93a1a1;
|
||||
--selected-operation-bg-colour: #3f3f3f;
|
||||
--selected-operation-border-colour: #657b83;
|
||||
|
||||
--breakpoint-font-colour: #c5c5c5;
|
||||
--breakpoint-bg-colour: #461515;
|
||||
--breakpoint-border-colour: #657b83;
|
||||
|
||||
--disabled-font-colour: #666;
|
||||
--disabled-bg-colour: #002b36;
|
||||
--disabled-border-colour: #657b83;
|
||||
|
||||
--fc-operation-font-colour: #93a1a1;
|
||||
--fc-operation-bg-colour: #073642;
|
||||
--fc-operation-border-colour: #657b83;
|
||||
|
||||
--fc-breakpoint-operation-font-colour: #c5c5c5;
|
||||
--fc-breakpoint-operation-bg-colour: #072b49;
|
||||
--fc-breakpoint-operation-border-colour: #657b83;
|
||||
|
||||
/* Operation arguments */
|
||||
--op-title-font-weight: bold;
|
||||
--arg-font-colour: #c5c5c5;
|
||||
--arg-background: #586e75;
|
||||
--arg-border-colour: #586e75;
|
||||
--arg-disabled-background: #4f4f4f;
|
||||
--arg-label-colour: #93a1a1;
|
||||
|
||||
|
||||
/* 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: #93a1a1;
|
||||
--btn-default-bg-colour: #002b36;
|
||||
--btn-default-border-colour: #3c3c3c;
|
||||
|
||||
--btn-default-hover-font-colour: #93a1a1;
|
||||
--btn-default-hover-bg-colour: #2d2d2d;
|
||||
--btn-default-hover-border-colour: #205375;
|
||||
|
||||
--btn-success-font-colour: #93a1a1;
|
||||
--btn-success-bg-colour: #002b36;
|
||||
--btn-success-border-colour: #0e639c;
|
||||
|
||||
--btn-success-hover-font-colour: #93a1a1;
|
||||
--btn-success-hover-bg-colour: #0e639c;
|
||||
--btn-success-hover-border-colour: #0e639c;
|
||||
|
||||
|
||||
/* Highlighter colours */
|
||||
--hl1: #264f78;
|
||||
--hl2: #675351;
|
||||
--hl3: #ffb6b6;
|
||||
--hl4: #fcf8e3;
|
||||
--hl5: #8de768;
|
||||
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-track: #002b36;
|
||||
--scrollbar-thumb: #424242;
|
||||
--scrollbar-hover: #4e4e4e;
|
||||
|
||||
|
||||
/* Misc. */
|
||||
--drop-file-border-colour: #839496;
|
||||
--popover-background: #444;
|
||||
--popover-border-colour: #555;
|
||||
--code-background: #0e639c;
|
||||
--code-font-colour: #fff;
|
||||
--input-highlight-colour: #1976d2;
|
||||
}
|
||||
145
src/web/stylesheets/themes/_solarizedLight.css
Executable file
145
src/web/stylesheets/themes/_solarizedLight.css
Executable file
|
|
@ -0,0 +1,145 @@
|
|||
/**
|
||||
* 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: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--primary-font-colour: var(--base00);
|
||||
--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: 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);
|
||||
|
||||
--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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue