mirror of https://github.com/gchq/CyberChef.git
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
|
|
@ -250,7 +250,7 @@
|
|||
<div class="file-overlay"></div>
|
||||
<div style="position: relative; height: 100%;">
|
||||
<div class="io-card card">
|
||||
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
|
||||
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon" id="input-file-thumbnail"/>
|
||||
<div class="card-body">
|
||||
<button type="button" class="close" id="input-file-close">×</button>
|
||||
Name: <span id="input-file-name"></span><br>
|
||||
|
|
@ -436,6 +436,8 @@
|
|||
<option value="classic">Classic</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="geocities">GeoCities</option>
|
||||
<option value="solarizedDark">Solarized Dark</option>
|
||||
<option value="solarizedLight">Solarized Light</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -509,6 +511,13 @@
|
|||
Attempt to detect encoded data automagically
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox option-item">
|
||||
<label for="imagePreview">
|
||||
<input type="checkbox" option="imagePreview" id="imagePreview">
|
||||
Render a preview of the input if it's detected to be an image.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
|
||||
|
|
|
|||
|
|
@ -205,19 +205,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 {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue