refactor material difference styles - for #9481
parent
e41920844e
commit
bf08c1910d
|
@ -17,5 +17,4 @@
|
||||||
@import 'fork';
|
@import 'fork';
|
||||||
@import 'side';
|
@import 'side';
|
||||||
@import 'context-menu';
|
@import 'context-menu';
|
||||||
|
@import 'material';
|
||||||
// @import 'side-clock';
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,6 @@
|
||||||
@import '../../common/css/component/material';
|
|
||||||
|
|
||||||
$clock-height: 20px;
|
$clock-height: 20px;
|
||||||
|
|
||||||
.analyse__player_strip {
|
.analyse__player-strip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -47,27 +45,3 @@ $clock-height: 20px;
|
||||||
font-size: 80%;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import '../../../common/css/component/material';
|
|
||||||
|
|
||||||
$player-height: 1.6rem;
|
$player-height: 1.6rem;
|
||||||
|
|
||||||
.analyse.has-players {
|
.analyse.has-players {
|
||||||
|
@ -97,28 +95,3 @@ $player-height: 1.6rem;
|
||||||
font-weight: normal;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -330,7 +330,7 @@ export function renderMaterialDiffs(ctrl: AnalyseCtrl): [VNode, VNode] {
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPlayerStrip(cls: string, materialDiff: VNode, clock?: 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 {
|
function renderPlayerStrips(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
|
||||||
|
|
|
@ -1,15 +1,8 @@
|
||||||
.material {
|
.material {
|
||||||
@extend %flex-center-nowrap;
|
@extend %flex-center-nowrap;
|
||||||
|
|
||||||
div {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
mpiece {
|
mpiece {
|
||||||
margin-left: -10px;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&.pawn {
|
&.pawn {
|
||||||
background-image: url(../piece/mono/P.svg);
|
background-image: url(../piece/mono/P.svg);
|
||||||
|
@ -41,6 +34,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
score {
|
score {
|
||||||
font-family: 'Roboto';
|
@extend %roboto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
align-self: center;
|
align-self: center;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
div {
|
div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -15,7 +14,6 @@
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background-size: cover;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&.pawn {
|
&.pawn {
|
||||||
|
@ -24,7 +22,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
score {
|
score {
|
||||||
font-family: 'Roboto';
|
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue