Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-09-28 22:41:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add styling of checkboxes.

Browse Source 
Change fonts in solarized themes to match classic.
Add styling of input fields to modals
This commit is contained in:
j433866 2019-03-20 10:01:19 +00:00
parent 674f879fb8
commit e03e51c450
7 changed files with 83 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/web/stylesheets/components/_operation.css
View File

@ -82,7 +82,43 @@ div.toggle-string {
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused label,
.operation .checkbox label:hover {
color: #1976d2;
color: var(--input-highlight-colour);
}
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
border-color: var(--input-border-colour);
color: var(--input-highlight-colour);
}
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--input-highlight-colour);
color: var(--input-highlight-colour);
}
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--disabled-font-colour);
color: var(--disabled-font-colour);
}
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--breakpoint-font-colour);
color: var(--breakpoint-font-colour);
}
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--fc-breakpoint-operation-font-colour);
color: var(--fc-breakpoint-operation-font-colour);
}
.operation .form-control {
@ -97,7 +133,7 @@ div.toggle-string {
.operation .form-control:hover {
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(97%);
}
@ -105,7 +141,7 @@ div.toggle-string {
.operation .form-control:focus {
background-color: var(--arg-background);
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(100%);
}

31
src/web/stylesheets/layout/_modals.css
View File

@ -77,3 +77,34 @@
padding: 20px;
border-left: 2px solid var(--primary-border-colour);
}
.checkbox label input[type=checkbox]+.checkbox-decorator .check,
.checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
border-color: var(--input-border-colour);
color: var(--input-highlight-colour);
}
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--input-highlight-colour);
color: var(--input-highlight-colour);
}
.bmd-form-group.is-focused .option-item label {
color: var(--input-highlight-colour);
}
.bmd-form-group.is-focused [class^='bmd-label'],
.bmd-form-group.is-focused [class*=' bmd-label'],
.bmd-form-group.is-focused [class^='bmd-label'],
.bmd-form-group.is-focused [class*=' bmd-label'],
.bmd-form-group.is-focused label,
.checkbox label:hover {
color: var(--input-highlight-colour);
}
.bmd-form-group.option-item label+.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);
}

1
src/web/stylesheets/themes/_classic.css
View File

@ -129,4 +129,5 @@
--code-background: #f9f2f4;
--code-font-colour: #c7254e;
--input-highlight-colour: #1976d2;
--input-border-colour: #424242;
}

1
src/web/stylesheets/themes/_dark.css
View File

@ -125,4 +125,5 @@
--code-background: #0e639c;
--code-font-colour: #fff;
--input-highlight-colour: #1976d2;
--input-border-colour: #424242;
}

1
src/web/stylesheets/themes/_geocities.css
View File

@ -125,4 +125,5 @@
--code-background: black;
--code-font-colour: limegreen;
--input-highlight-colour: limegreen;
--input-border-colour: limegreen;
}

7
src/web/stylesheets/themes/_solarizedDark.css
View File

@ -24,12 +24,14 @@
--sol-cyan: #2aa198;
--sol-green: #859900;
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", 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-family: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
@ -140,4 +142,5 @@
--code-background: var(--base03);
--code-font-colour: var(--base1);
--input-highlight-colour: var(--base1);
--input-border-colour: var(--base0);
}

7
src/web/stylesheets/themes/_solarizedLight.css
View File

@ -24,12 +24,14 @@
--sol-cyan: #2aa198;
--sol-green: #859900;
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", 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-family: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
@ -142,4 +144,5 @@
--code-background: var(--base3);
--code-font-colour: var(--base01);
--input-highlight-colour: var(--base01);
--input-border-colour: var(--base00);
}