lila/ui/analyse/css/_player-clock.scss at 512d0510ee29183fe2942066ffac0981fde5cf26 · TechEmpower/lila · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
@import '../../lib/css/component/material';

$clock-height: 20px;

.analyse__player_strip {
  position: absolute;
  @include inline-end(0);
  display: flex;

  &.top {
    top: #{-$clock-height};
    z-index: $z-above-site-header-107;

    .is3d & {
      top: #{-$clock-height - 35px};
    }
  }

  &.bottom {
    top: var(---cg-height, 100%);
    z-index: 1; // over the board coords

    .is3d & {
      top: calc(var(---cg-height, 100%) + 15px);
    }
  }

  /* Where to put them in col1 layout? It moves the entire board and controls down for little benefit */
  @include mq-is-col1 {
    display: none;
  }
}

.analyse__clock {
  @extend %metal;

  padding: 0 0.5em;
  margin-inline-start: 12px;
  height: $clock-height;
  font-weight: bold;
  text-align: center;
  /* Reserve border space so empty-editable dashed border doesn't cause 1px shift when .active toggles */
  border: 1px solid transparent;

  &.active {
    background: $m-primary_bg--mix-30;
  }

  tenths {
    font-size: 80%;
  }

  i {
    font-size: 0.7em;
    margin-inline-end: 0.4em;
    color: $c-accent;
  }

  &--editable {
    cursor: pointer;
    border: 1px dashed $c-primary;
    @media (hover: hover) {
      &:hover {
        /* Same effect as move sidebar; --c-base is only set inside .tview2 so use $c-font here */
        background: color-mix(in srgb, $c-font 15%, transparent);
      }
    }
  }

  &--editing {
    flex-shrink: 0;
    min-width: 0; /* allow input to size */
    .analyse__clock-input {
      min-width: 10em;
      width: 10em;
      padding: 0 0.4em;
      font: inherit;
      font-weight: bold;
      text-align: center;
      border: 1px solid $c-border;
      border-radius: 3px;
      background: $c-bg-box;
      box-sizing: border-box;
    }
  }

  .analyse__clock-input--error {
    border-color: var(--c-bad, #c23) !important;
    animation: clock-shake 0.3s ease;
    &:focus {
      /* Inset box-shadow so the error ring is visible when the top strip is partially covered by the board */
      outline: none;
      box-shadow: inset 0 0 0 2px var(--c-bad, #c23);
    }
  }
}

@keyframes clock-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.analyse__clock-placeholder {
  opacity: 0.7;
}

.material {
  padding-inline-end: 1px;

  mpiece {
    width: 20px;
    height: 20px;

    &.pawn {
      margin-inline-start: -10px;
    }
  }
  score {
    margin-top: -2px;
  }
}

.material-top {
  margin-top: -1px;
}

.material-bottom {
  margin-top: 1px;
}