add a gradiant background to buttons while hovering

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass

@@ -14,23 +14,31 @@
   font-size: var(--card-font-size)
 
   &:hover
-    .op-wp-single-card--content-project-name_hideable
-      opacity: 0.25
     .op-wp-single-card--inline-buttons
       opacity: 1
-      z-index: 1
+
+  :not(&_closed):not(&_checked)
+    &:hover
+      .op-wp-single-card--card-actions
+        background-image: linear-gradient(to left, rgba(white,1), rgba(white,0))
 
   &_new
     padding-right: 25px
 
   &_checked
     background-color: var(--table-row-highlighting-color)
+    &:hover
+      .op-wp-single-card--inline-buttons
+        background-image: linear-gradient(to left, rgba(var(--table-row-highlighting-color),1), rgba(var(--table-row-highlighting-color),0))
 
   &_disabled
     opacity: 0.6
 
   &_closed:not(&_checked)
     background-color: #F3F3F3
+    &:hover
+      .op-wp-single-card--inline-buttons
+        background-image: linear-gradient(to left, rgba(#F3F3F3,1), rgba(#F3F3F3,0))
 
   &_horizontal
     height: 100%
@@ -134,7 +142,6 @@
     right: 0
 
   &--card-action
-    background: white
     z-index: 2
 
     .op-wp-single-card_checked &
@@ -142,7 +149,7 @@
 
   &--inline-buttons
     opacity: 0
-    background: white
+    padding-left: 40px
 
     &.-show
       opacity: 1