Operation arguments are now arranged using CSS Grid

src/web/stylesheets/components/_operation.css

@@ -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;
 }
 

src/web/stylesheets/components/_pane.css

@@ -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 {

src/web/stylesheets/layout/_io.css

@@ -129,11 +129,14 @@
     visibility: hidden;
     transition: all 0.3s;
     margin-left: 5px;
-    font-size: larger;
-    font-weight: normal;
     cursor: help;
 }
 
+#stale-indicator i {
+    vertical-align: middle;
+    margin-bottom: 5px;
+}
+
 #output-loader .loading-msg {
     opacity: 1;
     font-family: var(--primary-font-family);

src/web/stylesheets/layout/_operations.css

@@ -31,3 +31,13 @@
     border: 2px dashed var(--rec-list-operation-font-colour) !important;
     padding: 8px 8px 9px 8px;
 }
+
+#categories a {
+    color: #1976d2;
+    cursor: pointer;
+}
+
+#categories a:hover,
+.op-list .operation:hover {
+    filter: brightness(98%);
+}

src/web/stylesheets/themes/_classic.css

@@ -44,7 +44,7 @@
 
     --rec-list-operation-font-colour: #468847;
     --rec-list-operation-bg-colour: #dff0d8;
-    --rec-list-operation-border-colour: #d6e9c6;
+    --rec-list-operation-border-colour: #d3e8c0;
 
     --selected-operation-font-color: #c09853;
     --selected-operation-bg-colour: #fcf8e3;

src/web/stylesheets/utils/_overrides.css

@@ -108,6 +108,10 @@ input[type="search"]::-webkit-search-cancel-button {
     appearance: searchfield-cancel-button;
 }
 
+select.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
+    height: unset;
+}
+
 code {
     border: 0;
     white-space: pre-wrap;