docs(playground): highlight full row for highlighted nodes

crates/cli/src/playground.html

@@ -19,7 +19,8 @@
         --light-scrollbar-track: #f1f1f1;
         --light-scrollbar-thumb: #c1c1c1;
         --light-scrollbar-thumb-hover: #a8a8a8;
-
+        --light-tree-row-bg: #e3f2fd;
+        
         --dark-bg: #1d1f21;
         --dark-border: #2d2d2d;
         --dark-text: #c5c8c6;
@@ -28,6 +29,7 @@
         --dark-scrollbar-track: #25282c;
         --dark-scrollbar-thumb: #4a4d51;
         --dark-scrollbar-thumb-hover: #5a5d61;
+        --dark-tree-row-bg: #373737;
 
         --primary-color: #0550ae;
         --primary-color-alpha: rgba(5, 80, 174, 0.1);
@@ -42,6 +44,7 @@
         --text-color: var(--dark-text);
         --panel-bg: var(--dark-panel-bg);
         --code-bg: var(--dark-code-bg);
+        --tree-row-bg: var(--dark-tree-row-bg);
       }
 
       [data-theme="light"] {
@@ -50,6 +53,7 @@
         --text-color: var(--light-text);
         --panel-bg: white;
         --code-bg: white;
+        --tree-row-bg: var(--light-tree-row-bg);
       }
 
       /* Base Styles */
@@ -275,7 +279,7 @@
       }
 
       #output-container a.highlighted {
-        background-color: #d9d9d9;
+        background-color: #cae2ff;
         color: red;
         border-radius: 3px;
         text-decoration: underline;
@@ -346,7 +350,7 @@
         }
 
         & #output-container a.highlighted {
-          background-color: #373b41;
+          background-color: #656669;
           color: red;
         }
 
@@ -373,6 +377,9 @@
           color: var(--dark-text);
         }
       }
+      .tree-row:has(.highlighted) {
+        background-color: var(--tree-row-bg); 
+      }
     </style>
   </head>