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: 4px;
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;
75 .team1color, .team2color {
80 background-color: red;
82 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
84 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
88 background-color: green;
90 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
92 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
101 background: linear-gradient(to bottom, #00a, #008);
103 background: linear-gradient(to bottom, #fff, #eee);
105 padding-top: var(--main-padding-top-adjust);
107 #score2_team1, #score2_team2 {
109 background: linear-gradient(to bottom, #00a8, #0088);
111 background: linear-gradient(to bottom, #fff8, #eee8);
114 #score2_team1, #score2_team2, #score2_score {
120 background: linear-gradient(to bottom, #00c, #00a);
122 background: linear-gradient(to bottom, #fff, #eee);
126 padding-top: var(--main-padding-top-adjust);
130 background: linear-gradient(to bottom, #00c8, #00a8);
132 background: linear-gradient(to bottom, #fff8, #eee8);
136 /* Clock, to the right of score */
137 .clockbug, .clockbug2 {
142 border-collapse: collapse;
145 border: 1px solid black;
147 border: 1px solid #ccc;
152 border: 1px solid #000;
153 background: linear-gradient(to bottom, #00a, #008);
155 border: 1px solid #ccc;
156 background: linear-gradient(to bottom, #fff, #eee);
160 padding-top: var(--main-padding-top-adjust);
165 background: linear-gradient(to bottom, #00a8, #0088);
167 background: linear-gradient(to bottom, #fff8, #eee8);
172 -webkit-transform:translateX(-200%);
174 .clockbug-animate-in {
175 -webkit-animation: from-left 1s ease;
177 .clockbug-animate-out {
178 -webkit-animation: to-left 1s ease;
179 -webkit-transform:translateX(-200%);
182 /* Comment, below score */
188 border-collapse: collapse;
191 border: 1px solid black;
193 border: 1px solid #ccc;
198 border: 1px solid #000;
199 background: linear-gradient(to bottom, #00a, #008);
201 border: 1px solid #ccc;
202 background: linear-gradient(to bottom, #fff, #eee);
210 -webkit-transform:translateY(-40px);
212 .commentbug-animate-in {
213 -webkit-animation: from-top 0.5s ease;
215 .commentbug-animate-out {
216 -webkit-animation: to-top 0.5s ease;
217 -webkit-transform:translateY(-40px);
221 .lowerthird-headline {
226 border-collapse: collapse;
229 border: 2px solid #ccc;
230 background-image: url(trondisk/lowerthird-bg.png);
232 border: 1px solid #ccc;
233 background-image: url(generic/lowerthird-bg.png);
238 /*background: linear-gradient(to right, #ccc, #fff 15px); */
240 /* padding-top: 20px; */
243 vertical-align: middle;
245 .lowerthird-headline-hidden {
250 .lowerthird-headline-animate-in {
251 -webkit-animation: scale-out 1.0s;
253 .lowerthird-headline-animate-out {
254 -webkit-animation: scale-in 1.0s;
256 .lowerthird-headline-content {
259 padding-top: var(--main-padding-top-large-adjust);
261 .lowerthird-headline-content-hidden {
262 clip: rect(0px,0px,200px,0px);
264 .lowerthird-headline-content-animate-in {
265 -webkit-animation: wipe-out 2.0s ease;
267 .lowerthird-headline-content-animate-out {
268 -webkit-animation: wipe-in 2.0s ease;
269 clip: rect(0px,0px,200px,0px);
270 -webkit-animation-fill-mode: both;
272 .lowerthird-subheading {
279 border-collapse: collapse;
282 border: 1px solid black;
283 background-image: url(trondisk/lowerthird-bg2.png);
285 border: 1px solid #6ad;
286 background-image: url(generic/lowerthird-bg2.png);
289 align-items: center; */
290 /*background: linear-gradient(to right, #44c, #33a 15px); */
294 .lowerthird-subheading-hidden {
295 clip: rect(0px,0px,200px,0px);
297 .lowerthird-subheading-animate-in {
298 -webkit-animation: scale-out-small 1.6s ease;
300 .lowerthird-subheading-animate-out {
301 -webkit-animation: scale-in-small 1.6s ease;
304 -webkit-animation-fill-mode: both;
306 .lowerthird-subheading-content {
309 padding-top: var(--main-padding-top-adjust);
311 .lowerthird-subheading-content-hidden {
315 .lowerthird-subheading-content-animate-in {
316 -webkit-animation: wipe-out 2.2s ease;
318 .lowerthird-subheading-content-animate-out {
319 -webkit-animation: wipe-in 2.2s ease;
320 clip: rect(0px,0px,200px,0px);
322 .lowerthird-picture {
332 .lowerthird-picture img {
336 .lowerthird-picture-hidden {
341 .lowerthird-picture-animate-in {
342 -webkit-animation: scale-out 1.0s;
344 .lowerthird-picture-animate-out {
345 -webkit-animation: scale-in-no-border 1.0s;
347 .lowerthird-picture-content {
351 .lowerthird-picture-content-hidden {
352 clip: rect(0px,0px,200px,0px);
354 .lowerthird-picture-content-animate-in {
355 -webkit-animation: wipe-out 2.0s ease;
356 -webkit-animation-delay: 0.3s;
357 -webkit-animation-fill-mode: both;
359 .lowerthird-picture-content-animate-out {
360 -webkit-animation: wipe-in 2.0s ease;
361 clip: rect(0px,0px,200px,0px);
364 /* these are hidden when actually run in Nageru */
377 /* background: rgba(0, 0, 170, 0.8); */
378 background: transparent;
384 border-spacing: 0px 7px;
386 border-collapse: separate;
387 text-transform: uppercase;
391 text-transform: none;
395 text-transform: none;
398 -webkit-animation: fade-in 1.0s ease;
399 -webkit-animation-delay: 0.0s;
400 -webkit-animation-fill-mode: both;
402 #carousel tr.subfooter {
403 -webkit-animation: fade-in 1.0s ease;
404 -webkit-animation-delay: 0.25s;
405 -webkit-animation-fill-mode: both;
407 #carousel tr.subfooter th {
411 /* background: rgba(0, 0, 170, 0.8); */
413 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
415 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
417 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
418 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
420 #carousel tr.footer {
421 -webkit-animation: fade-in 2.0s ease;
422 -webkit-animation-delay: 0.5s;
423 -webkit-animation-fill-mode: both;
425 #carousel td, #carousel th {
429 #carousel tr.footer td {
431 text-transform: none;
442 #carousel td.matchup {
447 text-transform: none;
449 #carousel .streamtime {
451 text-transform: none;
455 #carousel .playerpadding {
457 background: rgba(0,0,0,0);
459 #carousel th.playernum, #carousel .playername {
462 #carousel th.playernum {
465 padding-left: 0px; margin-left: 0px;
468 #carousel .playername {
469 text-transform: none;
473 .nplayed, .gd, .pts {
484 @-webkit-keyframes from-left {
486 -webkit-transform:translateX(-200%);
489 -webkit-transform:translateX(0);
492 @-webkit-keyframes to-left {
494 -webkit-transform:translateX(0);
497 -webkit-transform:translateX(-200%);
500 @-webkit-keyframes from-top {
502 -webkit-transform:translateY(-40px);
505 -webkit-transform:translateY(0);
508 @-webkit-keyframes to-top {
510 -webkit-transform:translateY(0);
513 -webkit-transform:translateY(-40px);
517 @-webkit-keyframes scale-out {
525 @-webkit-keyframes scale-in {
529 border: 2px solid #ccc;
531 border: 1px solid #ccc;
537 border: 2px solid #ccc;
539 border: 1px solid #ccc;
543 @-webkit-keyframes scale-in-no-border {
551 @-webkit-keyframes scale-out-small {
562 border: 1px solid black;
564 border: 1px solid #6ad;
571 @-webkit-keyframes scale-in-small {
575 border: 1px solid black;
577 border: 1px solid #6ad;
582 border: 1px solid #6ad;
592 @-webkit-keyframes wipe-out {
594 clip: rect(0px,0px,200px,0px);
597 clip: rect(0px,0px,200px,0px);
600 clip: rect(0px,1050px,200px,0px);
603 @-webkit-keyframes wipe-in {
605 clip: rect(0px,1050px,200px,0px);
607 20% { /* Not symmetrical! */
608 clip: rect(0px,0px,200px,0px);
611 clip: rect(0px,0px,200px,0px);
614 @-webkit-keyframes fade-in {
622 @-webkit-keyframes fade-out {