2 box-sizing: border-box;
9 background: transparent;
13 /* transform: scale(1.5);
14 transform-origin: top left; */
17 font-family: 'Lato', sans-serif;
20 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
21 --main-padding-top-adjust: 0px;
22 --main-padding-top-large-adjust: 0px;
26 transform: scale(0.8);
27 transform-origin: top left;
36 border-collapse: collapse;
38 border: 1px solid black;
42 border: 1px solid #000;
44 .team1color, .team2color {
49 background-color: red;
50 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
53 background-color: green;
54 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
61 background: linear-gradient(to bottom, #00a, #008);
62 padding-top: var(--main-padding-top-adjust);
66 background: linear-gradient(to bottom, #00c, #00a);
69 padding-top: var(--main-padding-top-adjust);
72 /* Clock, to the right of score */
78 border-collapse: collapse;
80 border: 1px solid black;
83 border: 1px solid #000;
84 background: linear-gradient(to bottom, #00a, #008);
87 padding-top: var(--main-padding-top-adjust);
91 -webkit-transform:translateX(-200%);
93 .clockbug-animate-in {
94 -webkit-animation: from-left 1s ease;
96 .clockbug-animate-out {
97 -webkit-animation: to-left 1s ease;
98 -webkit-transform:translateX(-200%);
101 /* Comment, below score */
107 border-collapse: collapse;
109 border: 1px solid black;
112 border: 1px solid #000;
113 background: linear-gradient(to bottom, #00a, #008);
120 -webkit-transform:translateY(-40px);
122 .commentbug-animate-in {
123 -webkit-animation: from-top 0.5s ease;
125 .commentbug-animate-out {
126 -webkit-animation: to-top 0.5s ease;
127 -webkit-transform:translateY(-40px);
131 .lowerthird-headline {
136 border-collapse: collapse;
138 border: 2px solid #ccc;
142 /*background: linear-gradient(to right, #ccc, #fff 15px); */
143 background-image: url(lowerthird-bg.png);
145 /* padding-top: 20px; */
148 vertical-align: middle;
150 .lowerthird-headline-hidden {
155 .lowerthird-headline-animate-in {
156 -webkit-animation: scale-out 1.0s;
158 .lowerthird-headline-animate-out {
159 -webkit-animation: scale-in 1.0s;
161 .lowerthird-headline-content {
164 padding-top: var(--main-padding-top-large-adjust);
166 .lowerthird-headline-content-hidden {
167 clip: rect(0px,0px,200px,0px);
169 .lowerthird-headline-content-animate-in {
170 -webkit-animation: wipe-out 2.0s ease;
172 .lowerthird-headline-content-animate-out {
173 -webkit-animation: wipe-in 2.0s ease;
174 clip: rect(0px,0px,200px,0px);
175 -webkit-animation-fill-mode: both;
177 .lowerthird-subheading {
184 border-collapse: collapse;
186 border: 1px solid black;
188 align-items: center; */
189 /*background: linear-gradient(to right, #44c, #33a 15px); */
190 background-image: url(lowerthird-bg2.png);
194 .lowerthird-subheading-hidden {
195 clip: rect(0px,0px,200px,0px);
197 .lowerthird-subheading-animate-in {
198 -webkit-animation: scale-out-small 1.6s ease;
200 .lowerthird-subheading-animate-out {
201 -webkit-animation: scale-in-small 1.6s ease;
204 -webkit-animation-fill-mode: both;
206 .lowerthird-subheading-content {
209 padding-top: var(--main-padding-top-adjust);
211 .lowerthird-subheading-content-hidden {
215 .lowerthird-subheading-content-animate-in {
216 -webkit-animation: wipe-out 2.2s ease;
218 .lowerthird-subheading-content-animate-out {
219 -webkit-animation: wipe-in 2.2s ease;
220 clip: rect(0px,0px,200px,0px);
222 .lowerthird-picture {
232 .lowerthird-picture img {
236 .lowerthird-picture-hidden {
241 .lowerthird-picture-animate-in {
242 -webkit-animation: scale-out 1.0s;
244 .lowerthird-picture-animate-out {
245 -webkit-animation: scale-in-no-border 1.0s;
247 .lowerthird-picture-content {
251 .lowerthird-picture-content-hidden {
252 clip: rect(0px,0px,200px,0px);
254 .lowerthird-picture-content-animate-in {
255 -webkit-animation: wipe-out 2.0s ease;
256 -webkit-animation-delay: 0.3s;
257 -webkit-animation-fill-mode: both;
259 .lowerthird-picture-content-animate-out {
260 -webkit-animation: wipe-in 2.0s ease;
261 clip: rect(0px,0px,200px,0px);
264 /* these are hidden when actually run in Nageru */
277 /* background: rgba(0, 0, 170, 0.8); */
278 background: transparent;
284 border-spacing: 0px 7px;
286 border-collapse: separate;
287 text-transform: uppercase;
291 text-transform: none;
295 text-transform: none;
298 -webkit-animation: fade-in 1.0s ease;
299 -webkit-animation-delay: 0.0s;
300 -webkit-animation-fill-mode: both;
302 #carousel tr.subfooter {
303 -webkit-animation: fade-in 1.0s ease;
304 -webkit-animation-delay: 0.25s;
305 -webkit-animation-fill-mode: both;
307 #carousel tr.subfooter th {
311 /* background: rgba(0, 0, 170, 0.8); */
312 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
313 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
314 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
316 #carousel tr.footer {
317 -webkit-animation: fade-in 2.0s ease;
318 -webkit-animation-delay: 0.5s;
319 -webkit-animation-fill-mode: both;
321 #carousel td, #carousel th {
325 #carousel tr.footer td {
327 text-transform: none;
338 #carousel td.matchup {
343 text-transform: none;
345 #carousel .streamtime {
347 text-transform: none;
351 #carousel .playerpadding {
353 background: rgba(0,0,0,0);
355 #carousel th.playernum, #carousel .playername {
358 #carousel th.playernum {
361 padding-left: 0px; margin-left: 0px;
364 #carousel .playername {
365 text-transform: none;
369 .nplayed, .gd, .pts {
380 @-webkit-keyframes from-left {
382 -webkit-transform:translateX(-200%);
385 -webkit-transform:translateX(0);
388 @-webkit-keyframes to-left {
390 -webkit-transform:translateX(0);
393 -webkit-transform:translateX(-200%);
396 @-webkit-keyframes from-top {
398 -webkit-transform:translateY(-40px);
401 -webkit-transform:translateY(0);
404 @-webkit-keyframes to-top {
406 -webkit-transform:translateY(0);
409 -webkit-transform:translateY(-40px);
413 @-webkit-keyframes scale-out {
421 @-webkit-keyframes scale-in {
424 border: 2px solid #ccc;
428 border: 2px solid #ccc;
431 @-webkit-keyframes scale-in-no-border {
439 @-webkit-keyframes scale-out-small {
449 border: 1px solid black;
455 @-webkit-keyframes scale-in-small {
458 border: 1px solid black;
462 border: 1px solid black;
472 @-webkit-keyframes wipe-out {
474 clip: rect(0px,0px,200px,0px);
477 clip: rect(0px,0px,200px,0px);
480 clip: rect(0px,1050px,200px,0px);
483 @-webkit-keyframes wipe-in {
485 clip: rect(0px,1050px,200px,0px);
487 20% { /* Not symmetrical! */
488 clip: rect(0px,0px,200px,0px);
491 clip: rect(0px,0px,200px,0px);
494 @-webkit-keyframes fade-in {
502 @-webkit-keyframes fade-out {