Fix formatting of css functions

This change makes two improvements to the formatting of CSS functions:
 - Nested conditions are colored as they are in nested css selectors
 - Removed extra padding on nested tree levels so that heavily nested
   functions are consistently indented

Bug: 392034817
Change-Id: I5327dc0b80e97fa265c688b9d6b1e4277dd68b3d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448599
Commit-Queue: Eric Leese <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: Eric Leese

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -105,10 +105,17 @@
 ol:not(.tree-outline) {
   display: none;
   margin: 0;
-  padding-inline-start: 12px;
   list-style: none;
 }
 
+.tree-outline > ol {
+  padding-inline-start: 16px;
+
+  ol {
+    padding-left: 0;
+  }
+}
+
 ol.expanded {
   display: block;
 }
@@ -277,6 +284,5 @@ devtools-icon.open-in-animations-panel {
   display: inline-block;
   padding-left: 18px;  /* should match enabled-button width */
   margin-left: -38px;  /* should match .webkit-css-property margin-left */
-
-  --webkit-css-property-color: var(--app-color-element-sidebar-subtitle);
+  color: var(--app-color-element-sidebar-subtitle);
 }