fix(panorama): fix combo viewer

Author: 13k

src/content/panorama/styles/_vars.scss

@@ -147,6 +147,7 @@ $bg-viewer: asset.custom-img-url("viewer/paper-bg.png");
 $mask-gradient-left-right: asset.game-img-url("masks/gradient_leftright_png.vtex");
 $mask-softedge-box: asset.game-img-url("masks/softedge_box_png.vtex");
 $mask-softedge-box-irregular: asset.game-img-url("masks/softedge_box_irregular_png.vtex");
+$mask-softedge-vertical: asset.game-img-url("masks/softedge_vertical_png.vtex");
 $mask-softedge-vscroll: asset.game-img-url("masks/softedge_vertical_vscroll_psd.vtex");
 $mask-softedge-vscroll-wide: asset.game-img-url("masks/softedge_vertical_vscroll_wide_psd.vtex");
 

src/content/panorama/styles/custom_game/ui/talents_display.scss

@@ -74,8 +74,8 @@ $class-right-selected: "right-branch-selected";
     horizontal-align: right;
   }
 
-  &.#{$class-left-selected} .pip-left,
-  &.#{$class-right-selected} .pip-right {
+  .#{$class-left-selected} .pip-left,
+  .#{$class-right-selected} .pip-right {
     opacity: 1;
   }
 

src/content/panorama/styles/custom_game/viewer.scss

@@ -2,6 +2,8 @@
 // * Combo Viewer (shamelessly rippped from Invoker kid persona page)
 // ******************************************************************************
 
+@use "sass:color";
+
 @use "../button" as btn;
 @use "../dota2";
 @use "../layout";
@@ -12,7 +14,8 @@
 @include dota2.style;
 @include layout.flow;
 
-$cl-text: #3c1b18;
+$cl-accent: #af5417;
+$cl-text: color.change($cl-accent, $lightness: 17%);
 
 .--viewer {
   width: 100%;
@@ -41,7 +44,6 @@ $cl-text: #3c1b18;
     margin-top: -4px;
     margin-right: -4px;
     horizontal-align: right;
-    wash-color: #fff;
   }
 
   #btn-reload {
@@ -52,7 +54,6 @@ $cl-text: #3c1b18;
     height: 36px;
     margin-top: -4px;
     margin-left: -4px;
-    wash-color: #fff;
   }
 
   &.development #btn-reload {
@@ -95,7 +96,17 @@ $cl-text: #3c1b18;
     padding-right: 20px;
     padding-bottom: 10px;
     overflow: squish scroll;
-    opacity-mask: v.$mask-softedge-vscroll-wide;
+    opacity-mask: v.$mask-softedge-vertical;
+
+    #VerticalScrollBar {
+      .ScrollThumb {
+        background-color: color.change($cl-accent, $alpha: 0.66);
+
+        &:hover {
+          background-color: color.change($cl-accent, $alpha: 0.95);
+        }
+      }
+    }
   }
 
   #properties-section {
@@ -196,15 +207,15 @@ $cl-text: #3c1b18;
     width: 206px;
     height: 49px;
     border-top: 1px solid #faa46a;
-    background-color: util.gradient-vertical(#af5417cc, #af5417cc);
+    background-color: util.gradient-vertical(#af541766, #af5417cc, $top: 100%, $bottom: 0%);
     box-shadow: #27110250 0 0 12px;
     opacity: 0.9;
     wash-color: #9992;
     transition-duration: 0.2s;
     transition-property: background-color;
 
     &:hover {
-      background-color: util.gradient-vertical(#af5417, #af5417);
+      background-color: #af5417;
     }
 
     &:active {