Add styling of checkboxes.

Change fonts in solarized themes to match classic.
Add styling of input fields to modals

src/web/stylesheets/components/_operation.css

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

src/web/stylesheets/layout/_modals.css

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

src/web/stylesheets/themes/_classic.css

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

src/web/stylesheets/themes/_dark.css

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

src/web/stylesheets/themes/_geocities.css

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

src/web/stylesheets/themes/_solarizedDark.css

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

src/web/stylesheets/themes/_solarizedLight.css

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