@four-leaf-studios/rl-overlay 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.cjs.js +79 -77
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +80 -78
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/Overlay.tsx +5 -1
  7. package/test-overlay/package-lock.json +2697 -0
  8. package/test-overlay/package.json +3 -0
  9. package/test-overlay/public/mock-css.css +243 -292
  10. package/test-overlay/src/App.jsx +52 -2
package/test-overlay/public/mock-css.css CHANGED
@@ -1,456 +1,407 @@
1
- /* latin-ext */
1
+ /* RLCS 2024 Theme */
2
2
  @font-face {
3
- font-family: "DM Sans";
4
- font-style: italic;
5
- font-weight: 400;
6
- font-display: swap;
7
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKK58VXh.woff2)
8
- format("woff2");
9
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
10
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
11
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
12
- }
13
- /* latin */
14
- @font-face {
15
- font-family: "DM Sans";
16
- font-style: italic;
17
- font-weight: 400;
18
- font-display: swap;
19
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKy58Q.woff2)
20
- format("woff2");
21
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
22
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
23
- U+2212, U+2215, U+FEFF, U+FFFD;
24
- }
25
- /* latin-ext */
26
- @font-face {
27
- font-family: "DM Sans";
28
- font-style: italic;
29
- font-weight: 500;
30
- font-display: swap;
31
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKK58VXh.woff2)
32
- format("woff2");
33
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
34
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
35
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
36
- }
37
- /* latin */
38
- @font-face {
39
- font-family: "DM Sans";
40
- font-style: italic;
41
- font-weight: 500;
42
- font-display: swap;
43
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKy58Q.woff2)
44
- format("woff2");
45
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
46
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
47
- U+2212, U+2215, U+FEFF, U+FFFD;
48
- }
49
- /* latin-ext */
50
- @font-face {
51
- font-family: "DM Sans";
52
- font-style: italic;
53
- font-weight: 700;
54
- font-display: swap;
55
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKK58VXh.woff2)
56
- format("woff2");
57
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
58
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
59
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
60
- }
61
- /* latin */
62
- @font-face {
63
- font-family: "DM Sans";
64
- font-style: italic;
65
- font-weight: 700;
66
- font-display: swap;
67
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Wp2ywxg089UriCZaSExd86J3t9jz86MvyyKy58Q.woff2)
68
- format("woff2");
69
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
70
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
71
- U+2212, U+2215, U+FEFF, U+FFFD;
72
- }
73
- /* latin-ext */
74
- @font-face {
75
- font-family: "DM Sans";
76
- font-style: normal;
77
- font-weight: 400;
78
- font-display: swap;
79
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2)
80
- format("woff2");
81
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
82
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
83
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
84
- }
85
- /* latin */
86
- @font-face {
87
- font-family: "DM Sans";
3
+ font-family: "Aldrich";
88
4
  font-style: normal;
89
5
  font-weight: 400;
90
6
  font-display: swap;
91
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
92
- format("woff2");
93
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
94
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
95
- U+2212, U+2215, U+FEFF, U+FFFD;
96
- }
97
- /* latin-ext */
98
- @font-face {
99
- font-family: "DM Sans";
100
- font-style: normal;
101
- font-weight: 500;
102
- font-display: swap;
103
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2)
7
+ src: url(https://fonts.gstatic.com/s/aldrich/v21/MCoTzAn-1s3IGyJMVacY3w.woff2)
104
8
  format("woff2");
105
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
106
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
107
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
108
- }
109
- /* latin */
110
- @font-face {
111
- font-family: "DM Sans";
112
- font-style: normal;
113
- font-weight: 500;
114
- font-display: swap;
115
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
116
- format("woff2");
117
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
118
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
119
- U+2212, U+2215, U+FEFF, U+FFFD;
120
- }
121
- /* latin-ext */
122
- @font-face {
123
- font-family: "DM Sans";
124
- font-style: normal;
125
- font-weight: 700;
126
- font-display: swap;
127
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2)
128
- format("woff2");
129
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
130
- U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
131
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
132
- }
133
- /* latin */
134
- @font-face {
135
- font-family: "DM Sans";
136
- font-style: normal;
137
- font-weight: 700;
138
- font-display: swap;
139
- src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
140
- format("woff2");
141
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
142
- U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
143
- U+2212, U+2215, U+FEFF, U+FFFD;
144
- }
145
-
146
- :root {
147
- --font-family: "DM Sans";
9
+ unicode-range:
10
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
11
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
12
+ U+2215, U+FEFF, U+FFFD;
148
13
  }
149
14
 
15
+ /* Global font override */
16
+ body,
150
17
  .overlay {
18
+ font-family: "Aldrich", sans-serif;
151
19
  --fallback-darker-mutual: black;
152
20
  }
153
21
 
154
- /* Main Bar */
22
+ .top_bar {
23
+ height: 30px;
24
+ background-color: #0b1013;
25
+ color: #94adcb;
26
+ font-size: 22px;
27
+ font-weight: bold;
28
+ text-transform: uppercase;
29
+ width: 792px;
30
+ padding-left: 25px;
31
+ padding-right: 25px;
32
+ }
33
+
155
34
  .main_bar {
35
+ font-weight: bold;
156
36
  }
157
37
 
158
- /* Team Name Boxes */
159
38
  .name_box {
160
- font-size: 42px;
161
- height: 77px;
162
- width: 350px;
163
- padding-left: 20px;
164
- padding-right: 20px;
165
- font-weight: 800;
166
- line-height: 0.9;
167
- font-family: var(--font-family);
39
+ font-size: 30px;
40
+ height: 60px;
41
+ width: 300px;
42
+ justify-content: center;
43
+ align-items: center;
44
+ text-align: center;
45
+
46
+ text-transform: uppercase;
47
+ text-overflow: ellipsis;
48
+ white-space: nowrap;
49
+ overflow: hidden;
168
50
  }
169
51
 
170
52
  .left_name_box {
171
- order: -50;
172
- justify-content: end;
173
- text-shadow: 0 0 5px black;
53
+ margin-right: 0px;
54
+ background: linear-gradient(
55
+ 180deg,
56
+ var(--team-left-primary) 0%,
57
+ var(--team-left-primary) 7px,
58
+ #1d1e23 8px,
59
+ var(--team-left-primary) 200%,
60
+ rgba(44, 88, 116, 1) 100%
61
+ );
62
+ padding-top: 10px;
63
+ border-top: 1px solid var(--team-left-primary-light);
174
64
  }
175
65
 
176
66
  .right_name_box {
177
- order: 50;
178
- justify-content: start;
179
- text-shadow: 0 0 5px black;
67
+ margin-left: 0px;
68
+ background: linear-gradient(
69
+ 180deg,
70
+ var(--team-right-primary) 0%,
71
+ var(--team-right-primary) 7px,
72
+ #1d1e23 8px,
73
+ var(--team-right-primary) 200%,
74
+ #7e4b35 100%
75
+ );
76
+ padding-top: 10px;
77
+ border-top: 1px solid var(--team-right-primary-light);
180
78
  }
181
79
 
182
- /* Logos */
183
80
  .logo_box {
184
81
  padding: 10px;
185
- width: 110px;
186
- height: 77px;
187
- background: #0f131c;
82
+ width: 100px;
83
+ position: relative;
84
+ background: #131217;
85
+ height: 100%;
188
86
  }
189
87
 
190
88
  .left_logo_box {
191
- clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%);
192
- padding-left: 27px;
89
+ left: 100px;
90
+ transform: translateX(-100%);
91
+ clip-path: polygon(0 0, 100% 0%, 100% 100%, 16px 100%, 0 calc(100% - 16px));
193
92
  }
194
93
 
195
94
  .right_logo_box {
196
- clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%);
197
- padding-right: 27px;
95
+ right: 100px;
96
+ transform: translateX(100%);
97
+ clip-path: polygon(
98
+ 0% 0%,
99
+ 100% 0,
100
+ 100% calc(100% - 16px),
101
+ calc(100% - 16px) 100%,
102
+ 0% 100%
103
+ );
198
104
  }
199
105
 
200
- /* Score */
201
106
  .score_box {
202
107
  font-size: 52px;
203
- height: 77px;
204
- width: 90px;
108
+ height: 70px;
109
+ width: 80px;
205
110
  color: white;
206
- font-weight: bold;
207
- text-shadow: 0 0 5px black;
208
- font-family: var(--font-family);
209
111
  }
210
112
 
211
113
  .left_score_box {
212
- background: linear-gradient(
213
- to bottom,
214
- var(--team-left-primary),
215
- var(--team-left-primary-dark)
216
- );
114
+ background: var(--team-left-primary);
115
+ border-top: 1px solid var(--team-left-primary-light);
217
116
  }
218
117
 
219
118
  .right_score_box {
220
- background: linear-gradient(
221
- to bottom,
222
- var(--team-right-primary),
223
- var(--team-right-primary-dark)
224
- );
119
+ background: var(--team-right-primary);
120
+ border-top: 1px solid var(--team-right-primary);
225
121
  }
226
122
 
227
- /* Timer */
228
123
  .time_box {
229
- color: white;
230
- font-size: 52px;
231
- height: 77px;
232
- width: 200px;
233
- background: #0f131c;
124
+ background: #ffffff;
125
+ color: black;
126
+ font-size: 50px;
234
127
  font-weight: bold;
235
- font-family: var(--font-family);
128
+ height: 70px;
129
+ width: 160px;
130
+ border-top: 1px solid #363f4b;
236
131
  }
237
132
 
238
- .top_bar {
239
- display: none;
240
- }
241
-
242
- /* Bottom Bar */
243
133
  .bottom_bar {
244
- height: 30px;
134
+ height: 14px;
135
+ top: -1.1px;
245
136
  }
246
137
 
247
- /* Series Boxes */
248
138
  .series_box {
249
- background-color: #0f131c;
250
- width: 72px;
139
+ background-color: #1a1c22;
140
+ width: 251px;
141
+ height: 17px;
142
+ margin-top: 0px;
251
143
  }
252
144
 
253
145
  .left_series_box {
254
- clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
255
- padding-left: 13px;
146
+ margin-right: 0px;
256
147
  padding-right: 5px;
148
+ padding-left: 5px;
149
+ justify-content: end;
150
+ clip-path: polygon(100% 0, 100% 100%, 8px 100%, 0% calc(100% - 8px), 0 0);
257
151
  }
258
152
 
259
153
  .right_series_box {
260
- clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
261
- padding-right: 13px;
154
+ margin-left: 0px;
262
155
  padding-left: 5px;
156
+ padding-right: 5px;
157
+ justify-content: start;
158
+ flex-direction: row-reverse;
159
+ clip-path: polygon(
160
+ 100% 0,
161
+ 100% calc(100% - 8px),
162
+ calc(100% - 8px) 100%,
163
+ 0 100%,
164
+ 0 0
165
+ );
263
166
  }
264
167
 
265
168
  .series_score_box {
266
- margin-left: 3px;
267
- margin-right: 3px;
268
- height: 18px;
269
- width: 100%;
169
+ margin-left: auto;
170
+ margin-right: auto;
270
171
  }
271
172
 
272
173
  .series_score_box_point {
174
+ height: 5px;
175
+ width: 35px;
176
+ border-radius: 2px;
177
+ border: 2px solid #aaa;
273
178
  }
274
179
 
275
180
  .series_score_box_empty {
181
+ height: 5px;
182
+ width: 35px;
183
+ background-color: #000;
184
+ border-radius: 2px;
185
+ border: 2px solid #444;
186
+ border-bottom: 2px solid #333;
187
+ border-right: 2px solid #333;
276
188
  }
277
189
 
278
190
  .left_series_score_box_point {
279
191
  background-color: var(--team-left-primary);
192
+ margin-left: 7px;
193
+ margin-right: 3px;
194
+ border-top: 2px solid var(--team-left-primary);
195
+ border-left: 2px solid var(--team-left-primary);
196
+ border-right: 2px solid var(--team-left-primary-dark);
197
+ border-bottom: 2px solid var(--team-left-primary-dark);
280
198
  }
281
199
 
282
200
  .left_series_score_box_empty {
283
- background-color: var(--team-left-primary-dark);
284
- opacity: 0.5;
201
+ margin-left: 7px;
202
+ margin-right: 3px;
285
203
  }
286
204
 
287
205
  .right_series_score_box_point {
288
206
  background-color: var(--team-right-primary);
207
+ margin-left: 7px;
208
+ margin-right: 7px;
209
+ border-top: 2px solid var(--team-right-primary);
210
+ border-left: 2px solid var(--team-right-primary);
211
+ border-right: 2px solid var(--team-right-primary-dark);
212
+ border-bottom: 2px solid var(--team-right-primary-dark);
289
213
  }
290
214
 
291
215
  .right_series_score_box_empty {
292
- background-color: var(--team-right-rimary-dark);
293
- opacity: 0.25;
216
+ margin-left: 7px;
217
+ margin-right: 7px;
294
218
  }
295
219
 
296
- /* Game Info */
297
220
  .game_box {
298
- background-color: #0f131c;
299
- font-size: 20px;
300
- width: 200px;
301
- font-family: var(--font-family);
221
+ background-color: #13131a;
222
+ font-size: 23px;
223
+ font-weight: bold;
224
+ letter-spacing: 3px;
225
+ width: 320px;
226
+ height: 31px;
227
+ margin-top: 0px;
228
+ clip-path: polygon(
229
+ 100% 0,
230
+ 100% calc(100% - 8px),
231
+ calc(100% - 8px) 100%,
232
+ 8px 100%,
233
+ 0% calc(100% - 8px),
234
+ 0 0
235
+ );
302
236
  }
303
237
 
304
238
  .series_info_box {
305
- background-color: #0f131c;
306
- font-size: 18px;
307
- min-width: 580px;
308
- padding-left: 20px;
309
- padding-right: 20px;
310
239
  height: 30px;
311
- clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%);
312
- font-family: var(--font-family);
240
+ background-color: #0b1013;
241
+ color: #94adcb;
242
+ font-size: 22px;
243
+ font-weight: bold;
244
+ text-transform: uppercase;
245
+ width: 792px;
246
+ padding-left: 25px;
247
+ padding-right: 25px;
313
248
  }
314
249
 
315
- /* Team Box */
316
250
  .team_box {
317
251
  color: white;
318
252
  position: absolute;
319
- top: 190px;
253
+ top: 25px;
254
+ }
255
+
256
+ .scoreboard_team_box {
257
+ max-height: 72px;
320
258
  }
321
259
 
322
260
  .left_team_box {
323
- left: 0;
261
+ left: -10px;
324
262
  }
325
263
 
326
264
  .right_team_box {
327
- right: 0;
265
+ right: -10px;
328
266
  }
329
267
 
330
- /* Player Box */
331
268
  .player_box {
332
- height: 35px;
333
- width: 265px;
334
- margin-bottom: 10px;
335
- background-color: #0f131c;
269
+ height: 36px;
270
+ width: 300px;
271
+ margin-bottom: 5px;
272
+ font-weight: bold;
273
+ background-color: #1e1e23;
336
274
  }
337
275
 
338
276
  .left_player_box {
277
+ left: -15px;
278
+ clip-path: polygon(
279
+ calc(100% - 3px) 0,
280
+ 100% 3px,
281
+ 100% calc(100% - 3px),
282
+ calc(100% - 3px) 100%,
283
+ 0 100%,
284
+ 0 0
285
+ );
339
286
  }
340
287
 
341
288
  .right_player_box {
289
+ right: -15px;
290
+ clip-path: polygon(
291
+ 3px 0%,
292
+ 100% 0,
293
+ 100% 100%,
294
+ 3px 100%,
295
+ 0% calc(100% - 3px),
296
+ 0% 3px
297
+ );
342
298
  }
343
299
 
344
300
  .player_name {
345
- font-size: 22px;
301
+ font-size: 20px;
346
302
  position: absolute;
347
- z-index: 50;
348
- text-shadow: 0 0 5px black;
349
303
  top: 3px;
350
- font-weight: bold;
351
304
  text-transform: uppercase;
352
305
  text-overflow: ellipsis;
353
- max-width: 250px;
306
+ max-width: 190px;
354
307
  white-space: nowrap;
355
308
  overflow: hidden;
356
- font-family: var(--font-family);
357
309
  }
358
310
 
359
311
  .left_player_name {
360
- left: 8px;
312
+ left: 45px;
361
313
  }
362
314
 
363
315
  .right_player_name {
364
- right: 8px;
316
+ right: 45px;
365
317
  }
366
318
 
367
- /* Boost */
368
319
  .player_boost {
369
- opacity: 0;
320
+ font-size: 20px;
321
+ position: absolute;
322
+ font-weight: bold;
323
+ top: 3px;
324
+ text-transform: uppercase;
370
325
  }
371
326
 
372
327
  .left_player_boost {
328
+ right: 10px;
329
+ color: #fff;
373
330
  }
374
331
 
375
332
  .right_player_boost {
333
+ left: 10px;
334
+ color: #fff;
376
335
  }
377
336
 
378
337
  .boost_meter {
379
- width: 100%;
380
- height: 100%;
381
- position: absolute;
338
+ width: 245px;
339
+ height: 5px;
340
+ margin-top: 27px;
341
+ margin-left: auto;
342
+ margin-right: auto;
343
+ background-color: #000;
382
344
  }
383
345
 
384
346
  .left_boost_meter {
347
+ margin-right: 10px;
385
348
  }
386
349
 
387
350
  .right_boost_meter {
351
+ margin-left: 10px;
388
352
  }
389
353
 
390
354
  .left_boost_meter_bar {
391
- background: linear-gradient(
392
- to bottom,
393
- var(--team-left-primary),
394
- var(--team-left-primary-dark)
395
- );
355
+ background-color: var(--team-left-primary);
396
356
  }
397
357
 
398
358
  .right_boost_meter_bar {
399
- background: linear-gradient(
400
- to bottom,
401
- var(--team-right-primary),
402
- var(--team-right-primary-dark)
403
- );
359
+ background-color: var(--team-right-primary);
404
360
  }
405
361
 
406
- /* Stats */
407
362
  .stat_box {
408
- background-color: #0f131c;
409
- height: 40px;
410
- padding-right: 15px;
363
+ background-color: rgba(0, 0, 0, 0.8);
364
+ height: 60px;
365
+ padding-right: 25px;
366
+ padding-bottom: 5px;
411
367
  display: flex;
412
- clip-path: polygon(0 0, calc(100% - 15px) 0%, 100% 100%, 0% 100%);
368
+ background: linear-gradient(0deg, #373b48 5px, #1a1c22 5px, #1a1c22 100%);
369
+ border-top: 1px solid #363f4b;
370
+ margin: 30px;
413
371
  }
414
372
 
415
373
  .stat_box_player {
416
- padding-left: 20px;
417
- padding-right: 20px;
418
- padding-top: 4px;
419
- font-size: 24px;
420
- height: 36px;
421
- background: #000;
374
+ padding-inline: 20px;
375
+ background: #373b48;
376
+ font-size: 20px;
422
377
  text-transform: uppercase;
423
378
  text-overflow: ellipsis;
424
- width: 220px;
425
- text-align: center;
379
+ max-width: 200px;
426
380
  white-space: nowrap;
427
381
  overflow: hidden;
428
- font-weight: bold;
429
- font-family: var(--font-family);
382
+ font-weight: 900;
383
+ height: 100%;
384
+ display: flex;
385
+ justify-content: center;
386
+ align-items: center;
430
387
  }
431
388
 
432
389
  .stat_box_statistic {
433
390
  display: flex;
434
- justify-content: flex-end;
391
+ flex-direction: column;
392
+ align-items: center;
435
393
  margin: auto;
436
- white-space: nowrap;
437
- padding-left: 10px;
438
- padding-right: 10px;
394
+ margin-left: 30px;
439
395
  }
440
396
 
441
397
  .stat_box_statistic_value {
442
- font-size: 22px;
443
- margin-right: 5px;
444
- min-width: 25px;
445
- text-align: right;
398
+ font-size: 28px;
446
399
  font-weight: bold;
447
- font-family: var(--font-family);
448
400
  }
449
401
 
450
402
  .stat_box_statistic_name {
451
- padding-top: 2px;
452
403
  font-size: 20px;
453
- font-family: var(--font-family);
404
+ order: 0;
454
405
  }
455
406
 
456
407
  .stat_box_statistic_player_id,
@@ -479,7 +430,9 @@
479
430
  justify-content: center;
480
431
  color: white;
481
432
  overflow: hidden;
482
- transition: opacity 0.3s ease, transform 0.3s ease;
433
+ transition:
434
+ opacity 0.3s ease,
435
+ transform 0.3s ease;
483
436
  }
484
437
 
485
438
  .left_target_boost.target_boost {
@@ -499,13 +452,13 @@
499
452
  }
500
453
 
501
454
  .left_target_boost {
502
- border: 5px solid var(--team-left-mutual);
455
+ border: 5px solid #1e1e23;
503
456
  background: #07132d;
504
457
  }
505
458
 
506
459
  .right_target_boost {
507
- border: 5px solid var(--team-left-mutual);
508
- background: var(--team-left-mutual);
460
+ border: 5px solid #1e1e23;
461
+ background: #1e1e23;
509
462
  }
510
463
 
511
464
  .target_boost_container {
@@ -570,11 +523,11 @@
570
523
  }
571
524
 
572
525
  .left_target_boost_meter_inner {
573
- background: var(--team-left-mutual);
526
+ background: #1e1e23;
574
527
  }
575
528
 
576
529
  .right_target_boost_meter_inner {
577
- background: var(--team-left-mutual);
530
+ background: #1e1e23;
578
531
  }
579
532
 
580
533
  .target_boost_svg {
@@ -595,24 +548,22 @@
595
548
  }
596
549
 
597
550
  .left_target_boost_svg_circle {
598
- stroke: var(--team-left-mutual);
551
+ stroke: #1e1e23;
599
552
  }
600
553
 
601
554
  .right_target_boost_svg_circle {
602
- stroke: var(--team-left-mutual);
555
+ stroke: #1e1e23;
603
556
  }
604
557
 
605
558
  .target_boost_value {
606
559
  position: absolute;
607
560
  z-index: 500;
608
- color: white;
609
- font-size: 2rem;
610
561
  }
611
562
 
612
563
  .left_target_boost_value {
564
+ color: var(--team-left-primary);
613
565
  }
614
566
 
615
567
  .right_target_boost_value {
568
+ color: var(--team-right-primary);
616
569
  }
617
-
618
- /* Target Boost END */