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;
64 border: 1px solid #ccc8;
78 .team1color, .team2color {
83 background-color: red;
85 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
87 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
91 background-color: green;
93 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
95 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
104 background: linear-gradient(to bottom, #00a, #008);
106 background: linear-gradient(to bottom, #fff, #eee);
108 padding-top: var(--main-padding-top-adjust);
110 #score2_team1, #score2_team2 {
112 background: linear-gradient(to bottom, #00a8, #0088);
114 background: linear-gradient(to bottom, #fff8, #eee8);
117 #score2_team1, #score2_team2, #score2_score {
123 background: linear-gradient(to bottom, #00c, #00a);
125 background: linear-gradient(to bottom, #fff, #eee);
129 padding-top: var(--main-padding-top-adjust);
133 background: linear-gradient(to bottom, #00c8, #00a8);
135 background: linear-gradient(to bottom, #fff8, #eee8);
139 /* Clock, to the right of score */
140 .clockbug, .clockbug2 {
145 border-collapse: collapse;
148 border: 1px solid black;
150 border: 1px solid #ccc8;
155 border: 1px solid #000;
156 background: linear-gradient(to bottom, #00a, #008);
158 border: 1px solid #ccc;
159 background: linear-gradient(to bottom, #fff, #eee);
163 padding-top: var(--main-padding-top-adjust);
167 border: 1px solid #ccc8;
169 background: linear-gradient(to bottom, #00a8, #0088);
171 background: linear-gradient(to bottom, #fff8, #eee8);
176 -webkit-transform:translateX(-200%);
178 .clockbug-animate-in {
179 -webkit-animation: from-left 1s ease;
181 .clockbug-animate-out {
182 -webkit-animation: to-left 1s ease;
183 -webkit-transform:translateX(-200%);
186 /* Comment, below score */
192 border-collapse: collapse;
195 border: 1px solid black;
197 border: 1px solid #ccc;
202 border: 1px solid #000;
203 background: linear-gradient(to bottom, #00a, #008);
205 border: 1px solid #ccc;
206 background: linear-gradient(to bottom, #fff, #eee);
214 -webkit-transform:translateY(-40px);
216 .commentbug-animate-in {
217 -webkit-animation: from-top 0.5s ease;
219 .commentbug-animate-out {
220 -webkit-animation: to-top 0.5s ease;
221 -webkit-transform:translateY(-40px);
225 .lowerthird-headline {
230 border-collapse: collapse;
233 border: 2px solid #ccc;
234 background-image: url(trondisk/lowerthird-bg.png);
236 border: 1px solid #ccc;
237 background-image: url(generic/lowerthird-bg.png);
242 /*background: linear-gradient(to right, #ccc, #fff 15px); */
244 /* padding-top: 20px; */
247 vertical-align: middle;
249 .lowerthird-headline-hidden {
254 .lowerthird-headline-animate-in {
255 -webkit-animation: scale-out 1.0s;
257 .lowerthird-headline-animate-out {
258 -webkit-animation: scale-in 1.0s;
260 .lowerthird-headline-content {
263 padding-top: var(--main-padding-top-large-adjust);
265 .lowerthird-headline-content-hidden {
266 clip: rect(0px,0px,200px,0px);
268 .lowerthird-headline-content-animate-in {
269 -webkit-animation: wipe-out 2.0s ease;
271 .lowerthird-headline-content-animate-out {
272 -webkit-animation: wipe-in 2.0s ease;
273 clip: rect(0px,0px,200px,0px);
274 -webkit-animation-fill-mode: both;
276 .lowerthird-subheading {
283 border-collapse: collapse;
286 border: 1px solid black;
287 background-image: url(trondisk/lowerthird-bg2.png);
289 border: 1px solid #6ad;
290 background-image: url(generic/lowerthird-bg2.png);
293 align-items: center; */
294 /*background: linear-gradient(to right, #44c, #33a 15px); */
298 .lowerthird-subheading-hidden {
299 clip: rect(0px,0px,200px,0px);
301 .lowerthird-subheading-animate-in {
302 -webkit-animation: scale-out-small 1.6s ease;
304 .lowerthird-subheading-animate-out {
305 -webkit-animation: scale-in-small 1.6s ease;
308 -webkit-animation-fill-mode: both;
310 .lowerthird-subheading-content {
313 padding-top: var(--main-padding-top-adjust);
315 .lowerthird-subheading-content-hidden {
319 .lowerthird-subheading-content-animate-in {
320 -webkit-animation: wipe-out 2.2s ease;
322 .lowerthird-subheading-content-animate-out {
323 -webkit-animation: wipe-in 2.2s ease;
324 clip: rect(0px,0px,200px,0px);
326 .lowerthird-picture {
336 .lowerthird-picture img {
340 .lowerthird-picture-hidden {
345 .lowerthird-picture-animate-in {
346 -webkit-animation: scale-out 1.0s;
348 .lowerthird-picture-animate-out {
349 -webkit-animation: scale-in-no-border 1.0s;
351 .lowerthird-picture-content {
355 .lowerthird-picture-content-hidden {
356 clip: rect(0px,0px,200px,0px);
358 .lowerthird-picture-content-animate-in {
359 -webkit-animation: wipe-out 2.0s ease;
360 -webkit-animation-delay: 0.3s;
361 -webkit-animation-fill-mode: both;
363 .lowerthird-picture-content-animate-out {
364 -webkit-animation: wipe-in 2.0s ease;
365 clip: rect(0px,0px,200px,0px);
368 /* these are hidden when actually run in Nageru */
381 /* background: rgba(0, 0, 170, 0.8); */
382 background: transparent;
388 border-spacing: 0px 7px;
390 border-collapse: separate;
391 text-transform: uppercase;
395 text-transform: none;
399 text-transform: none;
402 -webkit-animation: fade-in 1.0s ease;
403 -webkit-animation-delay: 0.0s;
404 -webkit-animation-fill-mode: both;
406 #carousel tr.subfooter {
407 -webkit-animation: fade-in 1.0s ease;
408 -webkit-animation-delay: 0.25s;
409 -webkit-animation-fill-mode: both;
411 #carousel tr.subfooter th {
415 /* background: rgba(0, 0, 170, 0.8); */
417 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
419 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
421 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
422 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
424 #carousel tr.footer {
425 -webkit-animation: fade-in 2.0s ease;
426 -webkit-animation-delay: 0.5s;
427 -webkit-animation-fill-mode: both;
429 #carousel td, #carousel th {
433 #carousel tr.footer td {
435 text-transform: none;
446 #carousel td.matchup {
451 text-transform: none;
453 #carousel .streamtime {
455 text-transform: none;
459 #carousel .playerpadding {
461 background: rgba(0,0,0,0);
463 #carousel th.playernum, #carousel .playername {
466 #carousel th.playernum {
469 padding-left: 0px; margin-left: 0px;
472 #carousel .playername {
473 text-transform: none;
477 .nplayed, .gd, .pts {
488 @-webkit-keyframes from-left {
490 -webkit-transform:translateX(-200%);
493 -webkit-transform:translateX(0);
496 @-webkit-keyframes to-left {
498 -webkit-transform:translateX(0);
501 -webkit-transform:translateX(-200%);
504 @-webkit-keyframes from-top {
506 -webkit-transform:translateY(-40px);
509 -webkit-transform:translateY(0);
512 @-webkit-keyframes to-top {
514 -webkit-transform:translateY(0);
517 -webkit-transform:translateY(-40px);
521 @-webkit-keyframes scale-out {
529 @-webkit-keyframes scale-in {
533 border: 2px solid #ccc;
535 border: 1px solid #ccc;
541 border: 2px solid #ccc;
543 border: 1px solid #ccc;
547 @-webkit-keyframes scale-in-no-border {
555 @-webkit-keyframes scale-out-small {
566 border: 1px solid black;
568 border: 1px solid #6ad;
575 @-webkit-keyframes scale-in-small {
579 border: 1px solid black;
581 border: 1px solid #6ad;
586 border: 1px solid #6ad;
596 @-webkit-keyframes wipe-out {
598 clip: rect(0px,0px,200px,0px);
601 clip: rect(0px,0px,200px,0px);
604 clip: rect(0px,1050px,200px,0px);
607 @-webkit-keyframes wipe-in {
609 clip: rect(0px,1050px,200px,0px);
611 20% { /* Not symmetrical! */
612 clip: rect(0px,0px,200px,0px);
615 clip: rect(0px,0px,200px,0px);
618 @-webkit-keyframes fade-in {
626 @-webkit-keyframes fade-out {