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

Operation arguments are now arranged using CSS Grid

Browse source
This commit is contained in:
n1474335 2018-06-19 00:55:08 +01:00
parent 974ab29e36
commit ba79144036
12 changed files with 96 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/web/stylesheets/components/_operation.css
View file

@ -7,7 +7,7 @@
*/
.operation {
cursor: pointer;
cursor: grab;
padding: 10px;
list-style-type: none;
position: relative;
@ -18,10 +18,29 @@
border-right: none;
}
#rec-list .operation {
cursor: pointer;
padding: 14px;
}
.op-title {
font-weight: var(--op-title-font-weight);
}
.ingredients {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 14px;
}
.ingredients > div {
grid-column: 1 / span 3;
}
.ingredients > div.inline {
grid-column: unset;
}
.arg {
font-family: var(--fixed-width-font-family);
text-overflow: ellipsis;
@ -33,28 +52,10 @@ select.arg {
}
textarea.arg {
min-height: 68px;
min-height: 74px;
resize: vertical;
}
@media (min-width: 576px) {
.arg.inline {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-group.inline {
display: inline-block;
margin-right: 20px;
width: unset;
}
.input-group-append.inline {
display: inline-block;
}
}
div.toggle-string {
flex: 1;
}
@ -69,7 +70,8 @@ div.toggle-string {
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused label {
.operation .is-focused label,
.operation .checkbox label:hover {
color: #1976d2;
}

4
src/web/stylesheets/components/_pane.css
View file

@ -12,7 +12,7 @@
.title {
padding: 8px;
padding-left: 20px;
padding-left: 12px;
padding-right: 12px;
height: var(--title-height);
border-bottom: 1px solid var(--primary-border-colour);
@ -20,7 +20,7 @@
font-size: var(--title-size);
color: var(--title-colour);
background-color: var(--title-background-colour);
line-height: calc(var(--title-height) - 20px);
line-height: calc(var(--title-height) - 14px);
}
.list-area {