Use omeLinkBlue for links etc

index.html

@@ -210,6 +210,9 @@
         cursor: default;
       }
       body {
+        --omeRed: #df283f;
+        --omeGreen: #128669;
+        --omeLinkBlue: #1d8dcd;
         padding: 0;
         font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

src/App.svelte

@@ -77,26 +77,21 @@
     width: 100%;
     flex: 1;
     padding: 15px 0;
-    background: #ff512f; /* fallback for old browsers */
+    background: rgb(249, 59, 85); /* fallback for old browsers */
     background: -webkit-linear-gradient(
       to right,
-      #f09819,
-      #ff512f
+      rgb(244, 106, 124),
+      var(--omeRed)
     ); /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(
       to right,
-      #f09819,
-      #ff512f
+      rgb(245, 82, 104),
+      var(--omeRed)
     ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     /* https://uigradients.com/ */
     /* OME green->blue rgb(61,132,107), rgb(68,139,200) */
   }
 
-  article {
-    width: 90%;
-    margin: auto;
-  }
-
   section > div {
     margin: auto;
     width: clamp(300px, 95%, 1200px);
@@ -111,14 +106,6 @@
     section > div {
       flex-direction: row;
     }
-
-    article {
-      width: 60%;
-      margin: auto;
-    }
-    a {
-      white-space: nowrap;
-    }
   }
 
   .error {

src/Bioformats2rawLayout/index.svelte

@@ -158,7 +158,7 @@
   }
   a,
   a:visited {
-    color: #ff512f;
+    color: var(--omeLinkBlue);
   }
 
   .json {

src/JsonValidator/Labels/LabelsInfoLink.svelte

@@ -52,6 +52,6 @@
     }
     a,
     a:visited {
-      color: #ff512f;
+      color: var(--omeLinkBlue);
     }
   </style>

src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte

@@ -33,7 +33,7 @@
     shardX = shards[shards.length - 1] * scale;
     shardY = shards[shards.length - 2] * scale;
     shardZ = shards[shards.length - 3] * scale;
-    shardColor = "#ff512f"
+    shardColor = "var(--omeLinkBlue)"
   }
 </script>
 

src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte

@@ -60,7 +60,7 @@
         <th />
         <th>Array</th>
         <th>Chunk</th>
-        {#if shard}<th style:border-color="#ff512f">Shard</th>{/if}
+        {#if shard}<th style:border-color="var(--omeLinkBlue)">Shard</th>{/if}
       </tr>
       <tr>
         <th>Bytes</th>
@@ -130,6 +130,6 @@
 
   a,
   a:visited {
-    color: #ff512f;
+    color: var(--omeLinkBlue);
   }
 </style>

src/JsonValidator/OpenWithViewers/index.svelte

@@ -86,7 +86,7 @@
 
   a,
   a:visited {
-    color: #ff512f;
+    color: var(--omeLinkBlue);
   }
 
   .viewer_icon {

src/JsonValidator/index.svelte

@@ -122,7 +122,7 @@
 <style>
   a,
   a:visited {
-    color: #ff512f;
+    color: var(--omeLinkBlue);
   }
   .json {
     text-align: left;