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;
31 border-collapse: collapse;
33 border: 1px solid black;
37 border: 1px solid #000;
39 .team1color, .team2color {
44 background-color: red;
45 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
48 background-color: green;
49 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
56 background: linear-gradient(to bottom, #00a, #008);
57 padding-top: var(--main-padding-top-adjust);
61 background: linear-gradient(to bottom, #00c, #00a);
64 padding-top: var(--main-padding-top-adjust);
67 /* Clock, to the right of score */
73 border-collapse: collapse;
75 border: 1px solid black;
78 border: 1px solid #000;
79 background: linear-gradient(to bottom, #00a, #008);
82 padding-top: var(--main-padding-top-adjust);
86 -webkit-transform:translateX(-200%);
88 .clockbug-animate-in {
89 -webkit-animation: from-left 1s ease;
91 .clockbug-animate-out {
92 -webkit-animation: to-left 1s ease;
93 -webkit-transform:translateX(-200%);
96 /* Comment, below score */
102 border-collapse: collapse;
104 border: 1px solid black;
107 border: 1px solid #000;
108 background: linear-gradient(to bottom, #00a, #008);
115 -webkit-transform:translateY(-40px);
117 .commentbug-animate-in {
118 -webkit-animation: from-top 0.5s ease;
120 .commentbug-animate-out {
121 -webkit-animation: to-top 0.5s ease;
122 -webkit-transform:translateY(-40px);
126 .lowerthird-headline {
131 border-collapse: collapse;
133 border: 2px solid #ccc;
137 /*background: linear-gradient(to right, #ccc, #fff 15px); */
138 background-image: url(lowerthird-bg.png);
140 /* padding-top: 20px; */
143 vertical-align: middle;
145 .lowerthird-headline-hidden {
150 .lowerthird-headline-animate-in {
151 -webkit-animation: scale-out 1.0s;
153 .lowerthird-headline-animate-out {
154 -webkit-animation: scale-in 1.0s;
156 .lowerthird-headline-content {
159 padding-top: var(--main-padding-top-large-adjust);
161 .lowerthird-headline-content-hidden {
162 clip: rect(0px,0px,200px,0px);
164 .lowerthird-headline-content-animate-in {
165 -webkit-animation: wipe-out 2.0s ease;
167 .lowerthird-headline-content-animate-out {
168 -webkit-animation: wipe-in 2.0s ease;
169 clip: rect(0px,0px,200px,0px);
170 -webkit-animation-fill-mode: both;
172 .lowerthird-subheading {
179 border-collapse: collapse;
181 border: 1px solid black;
183 align-items: center; */
184 /*background: linear-gradient(to right, #44c, #33a 15px); */
185 background-image: url(lowerthird-bg2.png);
189 .lowerthird-subheading-hidden {
190 clip: rect(0px,0px,200px,0px);
192 .lowerthird-subheading-animate-in {
193 -webkit-animation: scale-out-small 1.6s ease;
195 .lowerthird-subheading-animate-out {
196 -webkit-animation: scale-in-small 1.6s ease;
199 -webkit-animation-fill-mode: both;
201 .lowerthird-subheading-content {
204 padding-top: var(--main-padding-top-adjust);
206 .lowerthird-subheading-content-hidden {
210 .lowerthird-subheading-content-animate-in {
211 -webkit-animation: wipe-out 2.2s ease;
213 .lowerthird-subheading-content-animate-out {
214 -webkit-animation: wipe-in 2.2s ease;
215 clip: rect(0px,0px,200px,0px);
217 .lowerthird-picture {
227 .lowerthird-picture img {
231 .lowerthird-picture-hidden {
236 .lowerthird-picture-animate-in {
237 -webkit-animation: scale-out 1.0s;
239 .lowerthird-picture-animate-out {
240 -webkit-animation: scale-in-no-border 1.0s;
242 .lowerthird-picture-content {
246 .lowerthird-picture-content-hidden {
247 clip: rect(0px,0px,200px,0px);
249 .lowerthird-picture-content-animate-in {
250 -webkit-animation: wipe-out 2.0s ease;
251 -webkit-animation-delay: 0.3s;
252 -webkit-animation-fill-mode: both;
254 .lowerthird-picture-content-animate-out {
255 -webkit-animation: wipe-in 2.0s ease;
256 clip: rect(0px,0px,200px,0px);
259 /* these are hidden when actually run in Nageru */
272 /* background: rgba(0, 0, 170, 0.8); */
273 background: transparent;
279 border-spacing: 0px 7px;
281 border-collapse: separate;
282 text-transform: uppercase;
286 text-transform: none;
290 text-transform: none;
293 -webkit-animation: fade-in 1.0s ease;
294 -webkit-animation-delay: 0.0s;
295 -webkit-animation-fill-mode: both;
297 #carousel tr.subfooter {
298 -webkit-animation: fade-in 1.0s ease;
299 -webkit-animation-delay: 0.25s;
300 -webkit-animation-fill-mode: both;
302 #carousel tr.subfooter th {
306 /* background: rgba(0, 0, 170, 0.8); */
307 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
308 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
309 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
311 #carousel tr.footer {
312 -webkit-animation: fade-in 2.0s ease;
313 -webkit-animation-delay: 0.5s;
314 -webkit-animation-fill-mode: both;
316 #carousel td, #carousel th {
320 #carousel tr.footer td {
322 text-transform: none;
333 #carousel td.matchup {
338 text-transform: none;
340 #carousel .streamtime {
342 text-transform: none;
346 #carousel .playerpadding {
348 background: rgba(0,0,0,0);
350 #carousel th.playernum, #carousel .playername {
353 #carousel th.playernum {
356 padding-left: 0px; margin-left: 0px;
359 #carousel .playername {
360 text-transform: none;
364 .nplayed, .gd, .pts {
375 @-webkit-keyframes from-left {
377 -webkit-transform:translateX(-200%);
380 -webkit-transform:translateX(0);
383 @-webkit-keyframes to-left {
385 -webkit-transform:translateX(0);
388 -webkit-transform:translateX(-200%);
391 @-webkit-keyframes from-top {
393 -webkit-transform:translateY(-40px);
396 -webkit-transform:translateY(0);
399 @-webkit-keyframes to-top {
401 -webkit-transform:translateY(0);
404 -webkit-transform:translateY(-40px);
408 @-webkit-keyframes scale-out {
416 @-webkit-keyframes scale-in {
419 border: 2px solid #ccc;
423 border: 2px solid #ccc;
426 @-webkit-keyframes scale-in-no-border {
434 @-webkit-keyframes scale-out-small {
444 border: 1px solid black;
450 @-webkit-keyframes scale-in-small {
453 border: 1px solid black;
457 border: 1px solid black;
467 @-webkit-keyframes wipe-out {
469 clip: rect(0px,0px,200px,0px);
472 clip: rect(0px,0px,200px,0px);
475 clip: rect(0px,1050px,200px,0px);
478 @-webkit-keyframes wipe-in {
480 clip: rect(0px,1050px,200px,0px);
482 20% { /* Not symmetrical! */
483 clip: rect(0px,0px,200px,0px);
486 clip: rect(0px,0px,200px,0px);
489 @-webkit-keyframes fade-in {
497 @-webkit-keyframes fade-out {