2 box-sizing: border-box;
9 background: transparent;
13 /* transform: scale(1.5);
14 transform-origin: top left; */
17 font-family: 'Exo', sans-serif;
20 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
21 --main-padding-top-adjust: 2px;
22 --main-padding-top-large-adjust: 4px;
26 transform: scale(0.8);
27 transform-origin: top left;
36 border-collapse: collapse;
38 border: 1px solid #ccc;
42 border: 1px solid #ccc;
56 .team1color, .team2color {
61 background-color: red;
62 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
65 background-color: green;
66 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
73 background: linear-gradient(to bottom, #fff, #eee);
74 padding-top: var(--main-padding-top-adjust);
76 #score2_team1, #score2_team2 {
77 background: linear-gradient(to bottom, #fff8, #eee8);
79 #score2_team1, #score2_team2, #score2_score {
84 background: linear-gradient(to bottom, #fff, #eee);
87 padding-top: var(--main-padding-top-adjust);
90 background: linear-gradient(to bottom, #fff8, #eee8);
93 /* Clock, to the right of score */
94 .clockbug, .clockbug2 {
99 border-collapse: collapse;
101 border: 1px solid #ccc;
104 border: 1px solid #ccc;
105 background: linear-gradient(to bottom, #fff, #eee);
108 padding-top: var(--main-padding-top-adjust);
112 background: linear-gradient(to bottom, #fff8, #eee8);
116 -webkit-transform:translateX(-200%);
118 .clockbug-animate-in {
119 -webkit-animation: from-left 1s ease;
121 .clockbug-animate-out {
122 -webkit-animation: to-left 1s ease;
123 -webkit-transform:translateX(-200%);
126 /* Comment, below score */
132 border-collapse: collapse;
134 border: 1px solid #ccc;
137 border: 1px solid #ccc;
138 background: linear-gradient(to bottom, #fff, #eee);
145 -webkit-transform:translateY(-40px);
147 .commentbug-animate-in {
148 -webkit-animation: from-top 0.5s ease;
150 .commentbug-animate-out {
151 -webkit-animation: to-top 0.5s ease;
152 -webkit-transform:translateY(-40px);
156 .lowerthird-headline {
161 border-collapse: collapse;
163 border: 1px solid #ccc;
167 /*background: linear-gradient(to right, #ccc, #fff 15px); */
168 background-image: url(lowerthird-bg.png);
170 /* padding-top: 20px; */
173 vertical-align: middle;
175 .lowerthird-headline-hidden {
180 .lowerthird-headline-animate-in {
181 -webkit-animation: scale-out 1.0s;
183 .lowerthird-headline-animate-out {
184 -webkit-animation: scale-in 1.0s;
186 .lowerthird-headline-content {
189 padding-top: var(--main-padding-top-large-adjust);
191 .lowerthird-headline-content-hidden {
192 clip: rect(0px,0px,200px,0px);
194 .lowerthird-headline-content-animate-in {
195 -webkit-animation: wipe-out 2.0s ease;
197 .lowerthird-headline-content-animate-out {
198 -webkit-animation: wipe-in 2.0s ease;
199 clip: rect(0px,0px,200px,0px);
200 -webkit-animation-fill-mode: both;
202 .lowerthird-subheading {
209 border-collapse: collapse;
211 border: 1px solid #6ad;
213 align-items: center; */
214 /*background: linear-gradient(to right, #44c, #33a 15px); */
215 background-image: url(lowerthird-bg2.png);
219 .lowerthird-subheading-hidden {
220 clip: rect(0px,0px,200px,0px);
222 .lowerthird-subheading-animate-in {
223 -webkit-animation: scale-out-small 1.6s ease;
225 .lowerthird-subheading-animate-out {
226 -webkit-animation: scale-in-small 1.6s ease;
229 -webkit-animation-fill-mode: both;
231 .lowerthird-subheading-content {
234 padding-top: var(--main-padding-top-adjust);
236 .lowerthird-subheading-content-hidden {
240 .lowerthird-subheading-content-animate-in {
241 -webkit-animation: wipe-out 2.2s ease;
243 .lowerthird-subheading-content-animate-out {
244 -webkit-animation: wipe-in 2.2s ease;
245 clip: rect(0px,0px,200px,0px);
247 .lowerthird-picture {
257 .lowerthird-picture img {
261 .lowerthird-picture-hidden {
266 .lowerthird-picture-animate-in {
267 -webkit-animation: scale-out 1.0s;
269 .lowerthird-picture-animate-out {
270 -webkit-animation: scale-in-no-border 1.0s;
272 .lowerthird-picture-content {
276 .lowerthird-picture-content-hidden {
277 clip: rect(0px,0px,200px,0px);
279 .lowerthird-picture-content-animate-in {
280 -webkit-animation: wipe-out 2.0s ease;
281 -webkit-animation-delay: 0.3s;
282 -webkit-animation-fill-mode: both;
284 .lowerthird-picture-content-animate-out {
285 -webkit-animation: wipe-in 2.0s ease;
286 clip: rect(0px,0px,200px,0px);
289 /* these are hidden when actually run in Nageru */
302 /* background: rgba(0, 0, 170, 0.8); */
303 background: transparent;
309 border-spacing: 0px 7px;
311 border-collapse: separate;
312 text-transform: uppercase;
316 text-transform: none;
320 text-transform: none;
323 -webkit-animation: fade-in 1.0s ease;
324 -webkit-animation-delay: 0.0s;
325 -webkit-animation-fill-mode: both;
327 #carousel tr.subfooter {
328 -webkit-animation: fade-in 1.0s ease;
329 -webkit-animation-delay: 0.25s;
330 -webkit-animation-fill-mode: both;
332 #carousel tr.subfooter th {
336 /* background: rgba(0, 0, 170, 0.8); */
337 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
338 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
339 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
341 #carousel tr.footer {
342 -webkit-animation: fade-in 2.0s ease;
343 -webkit-animation-delay: 0.5s;
344 -webkit-animation-fill-mode: both;
346 #carousel td, #carousel th {
350 #carousel tr.footer td {
352 text-transform: none;
363 #carousel td.matchup {
368 text-transform: none;
370 #carousel .streamtime {
372 text-transform: none;
376 #carousel .playerpadding {
378 background: rgba(0,0,0,0);
380 #carousel th.playernum, #carousel .playername {
383 #carousel th.playernum {
386 padding-left: 0px; margin-left: 0px;
389 #carousel .playername {
390 text-transform: none;
394 .nplayed, .gd, .pts {
405 @-webkit-keyframes from-left {
407 -webkit-transform:translateX(-200%);
410 -webkit-transform:translateX(0);
413 @-webkit-keyframes to-left {
415 -webkit-transform:translateX(0);
418 -webkit-transform:translateX(-200%);
421 @-webkit-keyframes from-top {
423 -webkit-transform:translateY(-40px);
426 -webkit-transform:translateY(0);
429 @-webkit-keyframes to-top {
431 -webkit-transform:translateY(0);
434 -webkit-transform:translateY(-40px);
438 @-webkit-keyframes scale-out {
446 @-webkit-keyframes scale-in {
449 border: 1px solid #ccc;
453 border: 1px solid #ccc;
456 @-webkit-keyframes scale-in-no-border {
464 @-webkit-keyframes scale-out-small {
474 border: 1px solid #6ad;
480 @-webkit-keyframes scale-in-small {
483 border: 1px solid #6ad;
487 border: 1px solid #6ad;
497 @-webkit-keyframes wipe-out {
499 clip: rect(0px,0px,200px,0px);
502 clip: rect(0px,0px,200px,0px);
505 clip: rect(0px,1050px,200px,0px);
508 @-webkit-keyframes wipe-in {
510 clip: rect(0px,1050px,200px,0px);
512 20% { /* Not symmetrical! */
513 clip: rect(0px,0px,200px,0px);
516 clip: rect(0px,0px,200px,0px);
519 @-webkit-keyframes fade-in {
527 @-webkit-keyframes fade-out {