4 box-sizing: border-box;
11 background: transparent;
15 /* transform: scale(1.5);
16 transform-origin: top left; */
20 font-family: 'Lato', sans-serif;
23 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
24 --main-padding-top-adjust: 0px;
25 --main-padding-top-large-adjust: 0px;
27 font-family: 'Exo', sans-serif;
30 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
31 --main-padding-top-adjust: 2px;
32 --main-padding-top-large-adjust: 4px;
37 transform: scale(0.8);
38 transform-origin: top left;
47 border-collapse: collapse;
50 border: 1px solid black;
52 border: 1px solid #ccc;
58 border: 1px solid #000;
60 border: 1px solid #ccc;
63 .scorebug2 td, .scorebug3 td {
64 border: 1px solid #ccc8;
86 .team1color, .team2color {
91 background-color: red;
93 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
95 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
99 background-color: green;
101 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
103 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
112 background: linear-gradient(to bottom, #00a, #008);
114 background: linear-gradient(to bottom, #fff, #eee);
116 padding-top: var(--main-padding-top-adjust);
118 #score2_team1, #score2_team2, #score3_team1, #score3_team2 {
120 background: linear-gradient(to bottom, #00a8, #0088);
122 background: linear-gradient(to bottom, #fff8, #eee8);
125 #score2_team1, #score2_team2, #score2_score, #score3_team1, #score3_team2, #score3_score {
131 background: linear-gradient(to bottom, #00c, #00a);
133 background: linear-gradient(to bottom, #fff, #eee);
137 padding-top: var(--main-padding-top-adjust);
139 #score2_score, #score3_score {
141 background: linear-gradient(to bottom, #00c8, #00a8);
143 background: linear-gradient(to bottom, #fff8, #eee8);
147 /* Clock, to the right of score */
148 .clockbug, .clockbug2, .clockbug3 {
153 border-collapse: collapse;
156 border: 1px solid black;
158 border: 1px solid #ccc8;
163 border: 1px solid #000;
164 background: linear-gradient(to bottom, #00a, #008);
166 border: 1px solid #ccc;
167 background: linear-gradient(to bottom, #fff, #eee);
171 padding-top: var(--main-padding-top-adjust);
175 border: 1px solid #ccc8;
177 background: linear-gradient(to bottom, #00a8, #0088);
179 background: linear-gradient(to bottom, #fff8, #eee8);
184 -webkit-transform:translateX(-200%);
186 .clockbug-animate-in {
187 -webkit-animation: from-left 1s ease;
189 .clockbug-animate-out {
190 -webkit-animation: to-left 1s ease;
191 -webkit-transform:translateX(-200%);
194 /* Comment, below score */
200 border-collapse: collapse;
203 border: 1px solid black;
205 border: 1px solid #ccc;
210 border: 1px solid #000;
211 background: linear-gradient(to bottom, #00a, #008);
213 border: 1px solid #ccc;
214 background: linear-gradient(to bottom, #fff, #eee);
222 -webkit-transform:translateY(-40px);
224 .commentbug-animate-in {
225 -webkit-animation: from-top 0.5s ease;
227 .commentbug-animate-out {
228 -webkit-animation: to-top 0.5s ease;
229 -webkit-transform:translateY(-40px);
233 .lowerthird-headline {
238 border-collapse: collapse;
241 border: 2px solid #ccc;
242 background-image: url(trondisk/lowerthird-bg.png);
244 border: 1px solid #ccc;
245 background-image: url(generic/lowerthird-bg.png);
250 /*background: linear-gradient(to right, #ccc, #fff 15px); */
252 /* padding-top: 20px; */
255 vertical-align: middle;
257 .lowerthird-headline-hidden {
262 .lowerthird-headline-animate-in {
263 -webkit-animation: scale-out 1.0s;
265 .lowerthird-headline-animate-out {
266 -webkit-animation: scale-in 1.0s;
268 .lowerthird-headline-content {
271 padding-top: var(--main-padding-top-large-adjust);
273 .lowerthird-headline-content-hidden {
274 clip: rect(0px,0px,200px,0px);
276 .lowerthird-headline-content-animate-in {
277 -webkit-animation: wipe-out 2.0s ease;
279 .lowerthird-headline-content-animate-out {
280 -webkit-animation: wipe-in 2.0s ease;
281 clip: rect(0px,0px,200px,0px);
282 -webkit-animation-fill-mode: both;
284 .lowerthird-subheading {
291 border-collapse: collapse;
294 border: 1px solid black;
295 background-image: url(trondisk/lowerthird-bg2.png);
297 border: 1px solid #6ad;
298 background-image: url(generic/lowerthird-bg2.png);
301 align-items: center; */
302 /*background: linear-gradient(to right, #44c, #33a 15px); */
306 .lowerthird-subheading-hidden {
307 clip: rect(0px,0px,200px,0px);
309 .lowerthird-subheading-animate-in {
310 -webkit-animation: scale-out-small 1.6s ease;
312 .lowerthird-subheading-animate-out {
313 -webkit-animation: scale-in-small 1.6s ease;
316 -webkit-animation-fill-mode: both;
318 .lowerthird-subheading-content {
321 padding-top: var(--main-padding-top-adjust);
323 .lowerthird-subheading-content-hidden {
327 .lowerthird-subheading-content-animate-in {
328 -webkit-animation: wipe-out 2.2s ease;
330 .lowerthird-subheading-content-animate-out {
331 -webkit-animation: wipe-in 2.2s ease;
332 clip: rect(0px,0px,200px,0px);
334 .lowerthird-picture {
344 .lowerthird-picture img {
348 .lowerthird-picture-hidden {
353 .lowerthird-picture-animate-in {
354 -webkit-animation: scale-out 1.0s;
356 .lowerthird-picture-animate-out {
357 -webkit-animation: scale-in-no-border 1.0s;
359 .lowerthird-picture-content {
363 .lowerthird-picture-content-hidden {
364 clip: rect(0px,0px,200px,0px);
366 .lowerthird-picture-content-animate-in {
367 -webkit-animation: wipe-out 2.0s ease;
368 -webkit-animation-delay: 0.3s;
369 -webkit-animation-fill-mode: both;
371 .lowerthird-picture-content-animate-out {
372 -webkit-animation: wipe-in 2.0s ease;
373 clip: rect(0px,0px,200px,0px);
376 /* these are hidden when actually run in Nageru */
389 /* background: rgba(0, 0, 170, 0.8); */
390 background: transparent;
396 border-spacing: 0px 7px;
398 border-collapse: separate;
399 text-transform: uppercase;
403 text-transform: none;
407 text-transform: none;
410 -webkit-animation: fade-in 1.0s ease;
411 -webkit-animation-delay: 0.0s;
412 -webkit-animation-fill-mode: both;
414 #carousel tr.subfooter {
415 -webkit-animation: fade-in 1.0s ease;
416 -webkit-animation-delay: 0.25s;
417 -webkit-animation-fill-mode: both;
419 #carousel tr.subfooter th {
423 /* background: rgba(0, 0, 170, 0.8); */
425 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
427 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
429 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
430 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
432 #carousel tr.footer {
433 -webkit-animation: fade-in 2.0s ease;
434 -webkit-animation-delay: 0.5s;
435 -webkit-animation-fill-mode: both;
437 #carousel td, #carousel th {
441 #carousel tr.footer td {
443 text-transform: none;
454 #carousel td.matchup {
459 text-transform: none;
461 #carousel .streamtime {
463 text-transform: none;
467 #carousel .playerpadding {
469 background: rgba(0,0,0,0);
471 #carousel th.playernum, #carousel .playername {
474 #carousel th.playernum {
477 padding-left: 0px; margin-left: 0px;
480 #carousel .playername {
481 text-transform: none;
485 .nplayed, .gd, .pts {
496 @-webkit-keyframes from-left {
498 -webkit-transform:translateX(-200%);
501 -webkit-transform:translateX(0);
504 @-webkit-keyframes to-left {
506 -webkit-transform:translateX(0);
509 -webkit-transform:translateX(-200%);
512 @-webkit-keyframes from-top {
514 -webkit-transform:translateY(-40px);
517 -webkit-transform:translateY(0);
520 @-webkit-keyframes to-top {
522 -webkit-transform:translateY(0);
525 -webkit-transform:translateY(-40px);
529 @-webkit-keyframes scale-out {
537 @-webkit-keyframes scale-in {
541 border: 2px solid #ccc;
543 border: 1px solid #ccc;
549 border: 2px solid #ccc;
551 border: 1px solid #ccc;
555 @-webkit-keyframes scale-in-no-border {
563 @-webkit-keyframes scale-out-small {
574 border: 1px solid black;
576 border: 1px solid #6ad;
583 @-webkit-keyframes scale-in-small {
587 border: 1px solid black;
589 border: 1px solid #6ad;
594 border: 1px solid #6ad;
604 @-webkit-keyframes wipe-out {
606 clip: rect(0px,0px,200px,0px);
609 clip: rect(0px,0px,200px,0px);
612 clip: rect(0px,1050px,200px,0px);
615 @-webkit-keyframes wipe-in {
617 clip: rect(0px,1050px,200px,0px);
619 20% { /* Not symmetrical! */
620 clip: rect(0px,0px,200px,0px);
623 clip: rect(0px,0px,200px,0px);
626 @-webkit-keyframes fade-in {
634 @-webkit-keyframes fade-out {