ui: fix metal background for few non-interactive elements, style cleanup

ui/analyse/css/_context-menu.scss

@@ -7,13 +7,14 @@
   display: none;
   z-index: $z-context-menu-108;
   cursor: default;
+  overflow: hidden;
 
   &.visible {
     display: block;
   }
 
   .title {
-    @extend %san, %metal;
+    @extend %san, %metal-bg;
 
     padding: 0.4em;
     text-align: center;
@@ -24,11 +25,10 @@
 
   a {
     @extend %flex-center-nowrap;
+    @include padding-direction(0.5em, 0.6em, 0.5em, 0.3em);
 
     color: $c-font;
 
-    @include padding-direction(0.5em, 0.6em, 0.5em, 0.3em);
-
     &::before {
       width: 2em;
       text-align: center;

ui/analyse/css/_forecast.scss

@@ -18,7 +18,7 @@
   }
 
   .top {
-    @extend %metal;
+    @extend %metal-bg;
 
     border-bottom: $border;
     padding: 0.5em 0.7em;

ui/analyse/css/study/relay/_teams.scss

@@ -28,7 +28,7 @@
     }
 
     &__teams {
-      @extend %metal;
+      @extend %metal-bg;
 
       border-bottom: $border;
       padding: 0.5em 1em;

ui/insight/css/_insight.scss

@@ -318,7 +318,7 @@
     overflow: visible;
 
     .top {
-      @extend %metal, %box-radius-top;
+      @extend %metal-bg, %box-radius-top;
 
       padding: 1rem $block-gap;
       font-weight: bold;

ui/lib/css/chat/_chat.mod.scss

@@ -53,13 +53,11 @@
 
     .timeout a {
       @extend %nowrap-ellipsis;
+      @include transition;
 
       color: $c-accent;
       display: block;
       line-height: 1.5em;
-
-      @include transition;
-
       margin-inline-start: -10px;
     }
 

ui/lib/css/chat/_voicechat.scss

@@ -45,11 +45,10 @@
   }
 
   &::after {
-    top: 1px;
-
     @include inline-start(0);
     @include inline-end(auto);
 
+    top: 1px;
     background: none;
     box-shadow: none;
   }

ui/lib/css/component/_mselect.scss

@@ -44,12 +44,11 @@ $c-mselect: $c-primary;
 
   &__list {
     @extend %base-font, %box-radius, %popup-shadow, %flex-column;
+    @include inline-start(0);
+    @include transition(transform);
 
     position: absolute;
     top: 0;
-
-    @include inline-start(0);
-
     min-width: 100%;
     max-height: 60vh;
     overflow-y: auto;
@@ -58,12 +57,10 @@ $c-mselect: $c-primary;
     transform: scale(1, 0);
     transform-origin: top;
 
-    @include transition(transform);
-
     .mselect__toggle:checked ~ & {
       transform: scale(1, 1);
 
-      @media (max-width: at-most($small)) {
+      @media (width <= $small) {
         position: fixed;
         top: 50%;
         transform: translateY(-50%) scale(1, 1);

ui/lib/css/header/_buttons.scss

@@ -52,12 +52,10 @@
 
   .dropdown {
     @extend %dropdown-shadow;
+    @include inline-end(0);
 
     display: none;
     position: absolute;
-
-    @include inline-end(0);
-
     top: $site-header-height;
     background: $c-bg-header-dropdown;
     z-index: $z-dropdown-109;

ui/lib/css/header/_header.scss

@@ -78,13 +78,11 @@ body.zen {
 
   &::after {
     @extend %data-icon;
+    @include margin-direction(0, 0, 0.08ch, 0.3ch);
 
     content: $licon-Wings;
     font-size: 1.3em;
     color: $c-brag;
-
-    @include margin-direction(0, 0, 0.08ch, 0.3ch);
-
     transform: scaleX(-1);
 
     @include if-rtl {
@@ -129,7 +127,7 @@ body.zen {
       outline-offset: -2px;
     }
 
-    @media (max-width: at-most($xx-small)) {
+    @media (width <= $xx-small) {
       display: none;
     }
   }

ui/lib/css/header/_topnav-visible.scss

@@ -46,12 +46,11 @@
     }
 
     div {
+      @include inline-start(0);
+
       visibility: hidden;
       max-height: inherit;
       position: absolute;
-
-      @include inline-start(0);
-
       background: $c-bg-header-dropdown;
       min-width: 10rem;
       box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);

ui/lib/css/puz/_combo.scss

@@ -55,12 +55,10 @@
     &__in,
     &__in-full {
       @extend %box-radius;
+      @include inline-start(0);
 
       position: absolute;
       bottom: 0;
-
-      @include inline-start(0);
-
       height: 100%;
     }
 

ui/lib/css/tree/_tree.scss

@@ -62,8 +62,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
   &.active {
     color: white;
-    background: $c-primary;
-    background: color-mix(in srgb, var(--c-base) 85%, transparent);
+    background: $m-primary--alpha-85;
 
     shapes,
     eval,
@@ -101,12 +100,12 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
   &.pending-deletion {
     border-radius: unset;
-    background: color-mix(in srgb, $c-bad 30%, transparent) !important;
+    background: $m-bad--alpha-30 !important;
   }
 
   &.pending-copy {
     border-radius: unset;
-    background: color-mix(in srgb, $c-good 30%, transparent) !important;
+    background: $m-good--alpha-30 !important;
   }
 }
 
@@ -433,7 +432,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
 @media (hover: hover) {
   .tview2 move:not(.active):hover {
-    background: color-mix(in srgb, var(--c-base) 15%, transparent);
+    background: $c-bg-zebra2;
     color: $c-font-clear;
 
     eval,

ui/round/css/_forecast-info.scss

@@ -1,7 +1,7 @@
 #powerTip {
   .forecast-info {
     .title {
-      @extend %metal;
+      @extend %metal-bg;
 
       display: block;
       padding: 0.7em;