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

Switched to unbordered args

This commit is contained in:
n1474335 2018-07-13 10:30:24 +00:00
parent 052c32e2ce
commit d182261ff3
3 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -2229,7 +2229,7 @@
},
"compression": {
"version": "1.7.2",
"resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
"integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
"dev": true,
"requires": {

2
src/web/HTMLIngredient.mjs
View File

@ -104,7 +104,7 @@ class HTMLIngredient {
</div>`;
break;
case "boolean":
html += `<div class="form-group inline">
html += `<div class="form-group inline boolean-arg">
<div class="checkbox">
<label>
<input type="checkbox"

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

@ -41,7 +41,8 @@
}
.ingredients .form-group {
padding-top: 1rem;
margin-top: 1rem;
padding-top: 0;
}
.arg {
@ -65,8 +66,9 @@ div.toggle-string {
.operation [class^='bmd-label'],
.operation [class*=' bmd-label'] {
top: 31px;
left: 10px;
top: 13px;
left: 12px;
z-index: 10;
}
.operation label {
@ -83,35 +85,48 @@ div.toggle-string {
}
.operation .form-control {
border-width: 1px;
border-style: solid;
padding: 12px 10px;
border-radius: 4px;
background-color: var(--arg-background);
padding: 20px 12px 6px 12px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-image: none;
border-color: var(--arg-border-colour);
background-color: var(--arg-background);
background-position-y: 100%, 100%;
color: var(--arg-font-colour);
}
.operation .form-control:focus {
border-width: 2px;
padding: 11px 9px;
border-color: #1976d2;
.operation .form-control:hover {
background-image:
linear-gradient(to top, #1976d2 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%);
}
.bmd-form-group.is-filled div.toggle-string label.bmd-label-floating,
.bmd-form-group.is-focused div.toggle-string label.bmd-label-floating {
left: unset;
.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, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(100%);
}
.bmd-form-group.is-filled label.bmd-label-floating,
.bmd-form-group.is-focused label.bmd-label-floating {
top: 0.65rem;
left: 0.5rem;
background-image: linear-gradient(to top,
var(--arg-background) 8px,
var(--rec-list-operation-bg-colour) 8px);
padding: 0 4px;
top: 4px;
left: 12px;
}
.input-group .form-control {
border-top-left-radius: 4px !important;
}
.input-group-append button {
border-top-right-radius: 4px;
background-color: var(--arg-background) !important;
margin: unset;
}
.input-group-append button:hover {
filter: brightness(97%);
}
.editable-option-menu {
@ -126,6 +141,24 @@ div.toggle-string {
max-width: 20rem;
}
.boolean-arg {
height: 46px;
}
.boolean-arg .checkbox {
height: 100%;
}
.boolean-arg .checkbox label {
height: 100%;
display: flex;
align-items: center;
}
.boolean-arg .checkbox-decorator {
top: 13px;
}
.register-list {
background-color: var(--fc-operation-border-colour);
font-family: var(--fixed-width-font-family);