refactor material difference styles - for #9481

ui/analyse/css/_analyse.base.scss

@@ -17,5 +17,4 @@
 @import 'fork';
 @import 'side';
 @import 'context-menu';
-
-// @import 'side-clock';
+@import 'material';

ui/analyse/css/_material.scss

@@ -0,0 +1,17 @@
+@import '../../../common/css/component/material';
+
+.material {
+  padding: 0 0.4em;
+  font-size: 0.9em;
+  color: $c-font-dim;
+
+  div {
+    @extend %flex-center-nowrap;
+    margin-left: 6px;
+  }
+  mpiece {
+    width: 16px;
+    height: 16px;
+    margin-left: -7px;
+  }
+}

ui/analyse/css/_player-clock.scss

@@ -1,8 +1,6 @@
-@import '../../common/css/component/material';
-
 $clock-height: 20px;
 
-.analyse__player_strip {
+.analyse__player-strip {
   position: absolute;
   right: 0;
   display: flex;
@@ -47,27 +45,3 @@ $clock-height: 20px;
     font-size: 80%;
   }
 }
-
-.material {
-  padding-right: 1px;
-
-  mpiece {
-    width: 21px;
-    height: 21px;
-
-    &.pawn {
-      margin-left: -10px;
-    }
-  }
-  score {
-    margin-top: -2px;
-  }
-}
-
-.material-top {
-  margin-top: -1px;
-}
-
-.material-bottom {
-  margin-top: 1px;
-}

ui/analyse/css/study/_player.scss

@@ -1,5 +1,3 @@
-@import '../../../common/css/component/material';
-
 $player-height: 1.6rem;
 
 .analyse.has-players {
@@ -97,28 +95,3 @@ $player-height: 1.6rem;
     font-weight: normal;
   }
 }
-
-.material {
-  padding: 0 6px;
-
-  mpiece {
-    width: 21px;
-    height: 21px;
-
-    &.pawn {
-      margin-left: -10px;
-    }
-  }
-
-  score {
-    color: #777;
-  }
-}
-
-.material-top {
-  margin-top: 0.2em;
-}
-
-.material-bottom {
-  margin-top: 0.15em;
-}

ui/analyse/src/view.ts

@@ -330,7 +330,7 @@ export function renderMaterialDiffs(ctrl: AnalyseCtrl): [VNode, VNode] {
 }
 
 function renderPlayerStrip(cls: string, materialDiff: VNode, clock?: VNode): VNode {
-  return h('div.analyse__player_strip.' + cls, [materialDiff, clock]);
+  return h('div.analyse__player-strip.' + cls, [materialDiff, clock]);
 }
 
 function renderPlayerStrips(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {

ui/common/css/component/_material.scss

@@ -1,15 +1,8 @@
 .material {
   @extend %flex-center-nowrap;
 
-  div {
-    display: inline-block;
-    margin-left: 10px;
-  }
-
   mpiece {
-    margin-left: -10px;
     background-size: cover;
-    display: inline-block;
 
     &.pawn {
       background-image: url(../piece/mono/P.svg);
@@ -41,6 +34,6 @@
   }
 
   score {
-    font-family: 'Roboto';
+    @extend %roboto;
   }
 }

ui/round/css/_material.scss

@@ -4,7 +4,6 @@
   align-self: center;
   height: 40px;
   line-height: 0;
-  white-space: nowrap;
 
   div {
     display: inline-block;
@@ -15,7 +14,6 @@
     margin-left: -10px;
     width: 32px;
     height: 32px;
-    background-size: cover;
     display: inline-block;
 
     &.pawn {
@@ -24,7 +22,6 @@
   }
 
   score {
-    font-family: 'Roboto';
     line-height: 32px;
     vertical-align: top;
   }