From b448c4117ddb514588fd3dcde24491aa62e54693 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 25 Dec 2018 12:47:51 +0300
Subject: [PATCH] problems: styles tweaks

---
 src/sass/_panel-problems.scss  | 58 ++++++++++++++++++++++++----------
 src/sass/_variables.dark.scss  |  4 +++
 src/sass/_variables.light.scss |  4 +++
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 4de4cc9..646dc40 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -27,6 +27,12 @@
       &:hover {
         border-left: solid 2px rgba($blue, 0.5);
 
+        .rt-tr {
+          background: $problems-table-row-hovered;
+          box-shadow: 0px 0px 5px rgba($blue, 0.5);
+          z-index: 1;
+        }
+
         .rt-tr.-even {
           margin-left: 0;
           background: $problems-table-row-hovered;
@@ -38,6 +44,7 @@
 
         .problem-details-container {
           border-left-color: rgba($blue, 0.5);
+          box-shadow: 0px 0px 5px rgba($blue, 0.5);
         }
       }
 
@@ -46,11 +53,11 @@
           border: 0;
         }
 
-        &:hover {
-          background: $problems-table-row-hovered;
-          box-shadow: 0px 0px 5px rgba($blue, 0.5);
-          z-index: 1;
-        }
+        // &:hover {
+        //   background: $problems-table-row-hovered;
+        //   box-shadow: 0px 0px 5px rgba($blue, 0.5);
+        //   z-index: 1;
+        // }
         &.-even {
           background: $problems-table-stripe;
 
@@ -228,13 +235,21 @@
         margin-top: auto;
       }
 
-      .problem-item-name {
-        color: $text-muted;
+      .problem-item {
+        // border-bottom: solid 2px transparent;
+        // &:hover {
+        //   border-bottom: solid 2px $blue;
+        // }
+
+        .problem-item-name {
+          color: $text-muted;
+        }
+
+        .problem-item-value {
+          font-weight: 500;
+        }
       }
 
-      .problem-item-value {
-        font-weight: 500;
-      }
 
       .problem-statusbar {
         // margin-top: auto;
@@ -267,7 +282,7 @@
             }
           }
           &.fired {
-            box-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
+            box-shadow: $problem-statusbar-glow;
             .fa-icon-container {
               color: $problem-statusbar-fired;
               text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
@@ -304,17 +319,17 @@
       .problem-details-middle {
         flex: 1 0 auto;
         padding: 0.6rem 1rem;
-        // border: 1px solid $dark-4;
-        border-width: 0 1px;
-        border-style: solid;
-        border-color: $dark-4;
         overflow: auto;
+        box-shadow: 1px 0 10px $problem-container-shadow;
       }
 
       .problem-ack-container {
-        padding: 1.2rem 0;
+        margin-top: 0.6rem;
+        margin-left: -0.6rem;
+        padding: 1.2rem 0.6rem;
         // border-top: 2px solid $dark-4;
         overflow: auto;
+        box-shadow: -2px 2px 10px $problem-container-shadow
       }
 
       .problem-ack-list {
@@ -349,6 +364,17 @@
 
         .problem-details-right-item {
           margin-bottom: 0.2rem;
+          // border-bottom: solid 2px transparent;
+
+          &:hover {
+            // box-shadow: 1px 0 10px $problem-container-shadow;
+            // border-bottom: solid 2px $blue;
+            color: $text-color-emphasis;
+
+            .fa-icon-container {
+              color: $text-color-emphasis;
+            }
+          }
         }
       }
 
diff --git a/src/sass/_variables.dark.scss b/src/sass/_variables.dark.scss
index 1d4d8cd..83c135c 100644
--- a/src/sass/_variables.dark.scss
+++ b/src/sass/_variables.dark.scss
@@ -8,8 +8,12 @@ $problems-border-color: $dark-1;
 $problems-table-stripe: $dark-3;
 $problems-table-row-hovered: darken($problems-table-stripe, 2%);
 $problem-details-background: $dark-3;
+
 $problem-statusbar-background: $dark-2;
 $problem-statusbar-muted: $dark-3;
 $problem-statusbar-fired: $orange;
+$problem-statusbar-glow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
+
 $problem-event-highlighted: $white;
 $problem-expander-highlighted: lighten($problems-table-stripe, 8%);
+$problem-container-shadow: rgba($gray-2, 0.2)
diff --git a/src/sass/_variables.light.scss b/src/sass/_variables.light.scss
index 21b808a..85440d8 100644
--- a/src/sass/_variables.light.scss
+++ b/src/sass/_variables.light.scss
@@ -8,8 +8,12 @@ $problems-border-color: $dark-1;
 $problems-table-stripe: $gray-6;
 $problems-table-row-hovered: $gray-4;
 $problem-details-background: $gray-6;
+
 $problem-statusbar-background: $gray-4;
 $problem-statusbar-muted: $gray-5;
 $problem-statusbar-fired: #ca4c17;
+$problem-statusbar-glow: inset 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
+
 $problem-event-highlighted: $white;
 $problem-expander-highlighted: darken($problems-table-stripe, 20%);
+$problem-container-shadow: rgba($gray-2, 0.5)