Content-matching using colored borders and better syntax highlight colors

Author: wcabus

src/Pages/Home/JwtDecoder/JwtDecoder.cshtml

@@ -1,4 +1,4 @@
-@page "~/jwt-decoder"
+@page "~/jwt-decoder"
 @model IdentityServerHost.Pages.Home.JwtDecoder
 
 <div class="jwt-decoder-page">
@@ -59,13 +59,11 @@
                 <h3>Decoded JWT</h3>
                 <div class="jwt-decoded-output">
                     <h4 class="pt-1">Header</h4>
-                    <div id="jwt-header" class="jwt-decoded jwt-header bg-dark p-2">&nbsp;</div>
+                    <div id="jwt-header" class="jwt-decoded jwt-header bg-dark text-light p-2">&nbsp;</div>
                     <h4 class="pt-1">Payload</h4>
-                    <div id="jwt-payload" class="jwt-decoded jwt-payload bg-dark p-2">&nbsp;</div>
+                    <div id="jwt-payload" class="jwt-decoded jwt-payload bg-dark text-light p-2">&nbsp;</div>
                     <h4 class="pt-1">Signature</h4>
-                    <div class="jwt-decoded bg-dark p-2">
-                        <pre id="jwt-signature" class="jwt-signature">&nbsp;</pre>
-                    </div>
+                    <pre id="jwt-signature" class="jwt-decoded jwt-signature bg-dark text-light p-2">&nbsp;</pre>
                     <div class="jwt-signature-validation-result alert alert-success align-items-center d-none">
                         <i class="glyphicon glyphicon-ok-sign" style="font-size: 3em" title="Valid signature"></i>
                         <div class="result-message mx-3">This JWT has a valid signature.</div>

src/wwwroot/css/site.css

@@ -113,34 +113,27 @@ a.navbar-brand .icon-banner {
 }
 .jwt-decoder-container .jwt-decoded {
   text-wrap: auto;
-  background-color: #000000;
-  color: #eee !important;
 }
-.jwt-decoder-container .jwt-decoded.jwt-header .json-content {
-  background-color: rgba(252, 57, 57, 0.1882352941) !important;
+.jwt-decoder-container .jwt-decoded.jwt-header {
+  border: 4px solid #fc3939;
 }
-.jwt-decoder-container .jwt-decoded.jwt-payload .json-content {
-  background-color: rgba(19, 185, 85, 0.1882352941) !important;
+.jwt-decoder-container .jwt-decoded.jwt-payload {
+  border: 4px solid #13b955;
 }
-.jwt-decoder-container .jwt-decoded .jwt-signature {
-  color: #eee !important;
-  background-color: rgba(239, 163, 29, 0.1882352941);
-  margin: 0;
+.jwt-decoder-container .jwt-decoded.jwt-signature {
+  border: 4px solid #efa31d;
 }
 .jwt-decoder-container .jwt-input-editable {
   word-wrap: anywhere;
 }
 .jwt-decoder-container .jwt-input-editable .text-danger {
-  color: #eee !important;
-  background-color: rgba(252, 57, 57, 0.1882352941);
+  color: #fc3939 !important;
 }
 .jwt-decoder-container .jwt-input-editable .text-success {
-  color: #eee !important;
-  background-color: rgba(19, 185, 85, 0.1882352941);
+  color: #13b955 !important;
 }
 .jwt-decoder-container .jwt-input-editable .text-warning {
-  color: #eee !important;
-  background-color: rgba(239, 163, 29, 0.1882352941);
+  color: #efa31d !important;
 }
 .jwt-decoder-container .json-content, .jwt-decoder-container .jwt-input-editable {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -150,18 +143,21 @@ a.navbar-brand .icon-banner {
   color: #eee !important;
 }
 .jwt-decoder-container .json-content .json-key {
-  color: goldenrod !important;
+  color: gold !important;
 }
 .jwt-decoder-container .json-content .json-boolean, .jwt-decoder-container .json-content .json-number {
-  color: chocolate !important;
+  color: cyan !important;
 }
 .jwt-decoder-container .json-content .json-string {
-  color: darkcyan !important;
+  color: coral !important;
 }
 .jwt-decoder-container .json-content .json-explanation {
   color: springgreen !important;
   font-style: italic;
 }
+.jwt-decoder-container .json-content .json-structure {
+  color: #eee !important;
+}
 .jwt-decoder-container .jwt-signature {
   font-size: 1em;
 }

src/wwwroot/css/site.min.css

@@ -127,40 +127,33 @@ a.navbar-brand {
 
   .jwt-decoded {
     text-wrap: auto;
-    background-color: #000000;
-    color: #eee !important;
 
-    &.jwt-header .json-content {
-      background-color: #fc393930 !important;
+    &.jwt-header {
+      border: 4px solid #fc3939;
     }
 
-    &.jwt-payload .json-content {
-      background-color: #13b95530 !important;
+    &.jwt-payload {
+      border: 4px solid #13b955;
     }
 
-    .jwt-signature {
-      color: #eee !important;
-      background-color: #efa31d30;
-      margin: 0;
+    &.jwt-signature {
+      border: 4px solid #efa31d;
     }
   }
 
   .jwt-input-editable {
     word-wrap: anywhere;
 
     .text-danger {
-      color: #eee !important;
-      background-color: #fc393930;
+      color: #fc3939 !important;
     }
 
     .text-success {
-      color: #eee !important;
-      background-color: #13b95530;
+      color: #13b955 !important;
     }
 
     .text-warning {
-      color: #eee !important;
-      background-color: #efa31d30;
+      color: #efa31d !important;
     }
   }
 
@@ -173,21 +166,25 @@ a.navbar-brand {
     color: #eee !important;
 
     .json-key {
-        color: goldenrod !important;
+        color: gold !important;
     }
 
     .json-boolean, .json-number {
-      color: chocolate !important;
+      color: cyan !important;
     }
 
     .json-string {
-      color: darkcyan !important;
+      color: coral !important;
     }
 
     .json-explanation {
       color: springgreen !important;
       font-style: italic;
     }
+    
+    .json-structure {
+      color: #eee !important;
+    }
   }
 
   .jwt-signature {