web: console: compress datalist

This is a selection of rules to override the default datalist layout;
it removes the lines and compresses entries.  This is the result of
inspection and trial-and-error; i.e. there may be better ways to do
all of this.

The box-shadow on hover mouseover doesn't really work that well with
the compressed entries, as they are too close together to get a good
offset for it.  This replaces it with a light background; the hover
should also highlight on the left.

Change-Id: Ie3d79b11be517136a62db61c57a112885b0e10eb

1 files changed, 36 insertions, 2 deletions

diff --git a/web/src/index.css b/web/src/index.css
index cc533b6f9..b701255b8 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -300,9 +300,43 @@ pre.version {
 }
 
 /* Console */
-.zuul-console-datalistrow:hover
+
+.zuul-console .pf-c-data-list__expandable-content {
+    border: none;
+}
+
+.zuul-console .pf-c-data-list__expandable-content-body
+{
+    padding-top: calc(var(--pf-c-data-list__expandable-content-body--PaddingTop) * 0.25) !important;
+    padding-bottom: calc(var(--pf-c-data-list__expandable-content-body--PaddingTop) * 0.25) !important
+}
+
+.zuul-console .pf-c-data-list {
+    border: none
+}
+
+.zuul-console .pf-c-data-list__item:hover
 {
-    box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow)
+    background: var(--pf-global--BackgroundColor--light-200);
+}
+
+.zuul-console .pf-c-data-list__item:hover::before
+{
+    background: var(--pf-global--active-color--400);
+}
+
+.zuul-console .pf-c-data-list__item {
+    border: none;
+}
+
+.zuul-console .pf-c-data-list__item-content {
+    padding-bottom: 2px !important;
+    padding-top: 0px !important
+}
+
+.zuul-console .pf-c-data-list__cell {
+    padding-top: 4px !important;
+    padding-bottom: 0px !important
 }
 
 pre.zuul-log-output