4 box-sizing: border-box;
9 background: transparent;
13 /* transform: scale(1.5);
14 transform-origin: top left; */
18 font-family: 'Lato', sans-serif;
21 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
22 --main-padding-top-adjust: 0px;
23 --main-padding-top-large-adjust: 0px;
25 font-family: 'Exo', sans-serif;
28 /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */
29 --main-padding-top-adjust: 2px;
30 --main-padding-top-large-adjust: 4px;
35 transform: scale(0.8);
36 transform-origin: top left;
45 border-collapse: collapse;
48 border: 1px solid black;
50 border: 1px solid #ccc;
56 border: 1px solid #000;
58 border: 1px solid #ccc;
61 .scorebug2 td, .scorebug3 td {
62 border: 1px solid #ccc8;
84 .team1color, .team2color {
89 background-color: red;
91 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
93 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
97 background-color: green;
99 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
101 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
110 background: linear-gradient(to bottom, #00a, #008);
112 background: linear-gradient(to bottom, #fff, #eee);
114 padding-top: var(--main-padding-top-adjust);
116 #score2_team1, #score2_team2, #score3_team1, #score3_team2 {
118 background: linear-gradient(to bottom, #00a8, #0088);
120 background: linear-gradient(to bottom, #fff8, #eee8);
123 #score2_team1, #score2_team2, #score2_score, #score3_team1, #score3_team2, #score3_score {
129 background: linear-gradient(to bottom, #00c, #00a);
131 background: linear-gradient(to bottom, #fff, #eee);
135 padding-top: var(--main-padding-top-adjust);
137 #score2_score, #score3_score {
139 background: linear-gradient(to bottom, #00c8, #00a8);
141 background: linear-gradient(to bottom, #fff8, #eee8);
145 /* Clock, to the right of score */
146 .clockbug, .clockbug2, .clockbug3 {
151 border-collapse: collapse;
154 border: 1px solid black;
156 border: 1px solid #ccc8;
161 border: 1px solid #000;
162 background: linear-gradient(to bottom, #00a, #008);
164 border: 1px solid #ccc;
165 background: linear-gradient(to bottom, #fff, #eee);
169 padding-top: var(--main-padding-top-adjust);
173 border: 1px solid #ccc8;
175 background: linear-gradient(to bottom, #00a8, #0088);
177 background: linear-gradient(to bottom, #fff8, #eee8);
182 -webkit-transform:translateX(-200%);
184 .clockbug-animate-in {
185 -webkit-animation: from-left 1s ease;
187 .clockbug-animate-out {
188 -webkit-animation: to-left 1s ease;
189 -webkit-transform:translateX(-200%);
192 /* Comment, below score */
198 border-collapse: collapse;
201 border: 1px solid black;
203 border: 1px solid #ccc;
208 border: 1px solid #000;
209 background: linear-gradient(to bottom, #00a, #008);
211 border: 1px solid #ccc;
212 background: linear-gradient(to bottom, #fff, #eee);
220 -webkit-transform:translateY(-40px);
222 .commentbug-animate-in {
223 -webkit-animation: from-top 0.5s ease;
225 .commentbug-animate-out {
226 -webkit-animation: to-top 0.5s ease;
227 -webkit-transform:translateY(-40px);
231 .lowerthird-headline {
236 border-collapse: collapse;
239 border: 2px solid #ccc;
240 background-image: url(trondisk/lowerthird-bg.png);
242 border: 1px solid #ccc;
243 background-image: url(generic/lowerthird-bg.png);
248 /*background: linear-gradient(to right, #ccc, #fff 15px); */
250 /* padding-top: 20px; */
253 vertical-align: middle;
255 .lowerthird-headline-hidden {
260 .lowerthird-headline-animate-in {
261 -webkit-animation: scale-out 1.0s;
263 .lowerthird-headline-animate-out {
264 -webkit-animation: scale-in 1.0s;
266 .lowerthird-headline-content {
269 padding-top: var(--main-padding-top-large-adjust);
271 .lowerthird-headline-content-hidden {
272 clip: rect(0px,0px,200px,0px);
274 .lowerthird-headline-content-animate-in {
275 -webkit-animation: wipe-out 2.0s ease;
277 .lowerthird-headline-content-animate-out {
278 -webkit-animation: wipe-in 2.0s ease;
279 clip: rect(0px,0px,200px,0px);
280 -webkit-animation-fill-mode: both;
282 .lowerthird-subheading {
289 border-collapse: collapse;
292 border: 1px solid black;
293 background-image: url(trondisk/lowerthird-bg2.png);
295 border: 1px solid #6ad;
296 background-image: url(generic/lowerthird-bg2.png);
299 align-items: center; */
300 /*background: linear-gradient(to right, #44c, #33a 15px); */
304 .lowerthird-subheading-hidden {
305 clip: rect(0px,0px,200px,0px);
307 .lowerthird-subheading-animate-in {
308 -webkit-animation: scale-out-small 1.6s ease;
310 .lowerthird-subheading-animate-out {
311 -webkit-animation: scale-in-small 1.6s ease;
314 -webkit-animation-fill-mode: both;
316 .lowerthird-subheading-content {
319 padding-top: var(--main-padding-top-adjust);
321 .lowerthird-subheading-content-hidden {
325 .lowerthird-subheading-content-animate-in {
326 -webkit-animation: wipe-out 2.2s ease;
328 .lowerthird-subheading-content-animate-out {
329 -webkit-animation: wipe-in 2.2s ease;
330 clip: rect(0px,0px,200px,0px);
332 .lowerthird-picture {
342 .lowerthird-picture img {
346 .lowerthird-picture-hidden {
351 .lowerthird-picture-animate-in {
352 -webkit-animation: scale-out 1.0s;
354 .lowerthird-picture-animate-out {
355 -webkit-animation: scale-in-no-border 1.0s;
357 .lowerthird-picture-content {
361 .lowerthird-picture-content-hidden {
362 clip: rect(0px,0px,200px,0px);
364 .lowerthird-picture-content-animate-in {
365 -webkit-animation: wipe-out 2.0s ease;
366 -webkit-animation-delay: 0.3s;
367 -webkit-animation-fill-mode: both;
369 .lowerthird-picture-content-animate-out {
370 -webkit-animation: wipe-in 2.0s ease;
371 clip: rect(0px,0px,200px,0px);
374 /* these are hidden when actually run in Nageru */
387 /* background: rgba(0, 0, 170, 0.8); */
388 background: transparent;
394 border-spacing: 0px 7px;
396 border-collapse: separate;
397 text-transform: uppercase;
401 text-transform: none;
405 text-transform: none;
408 -webkit-animation: fade-in 1.0s ease;
409 -webkit-animation-delay: 0.0s;
410 -webkit-animation-fill-mode: both;
412 #carousel tr.subfooter {
413 -webkit-animation: fade-in 1.0s ease;
414 -webkit-animation-delay: 0.25s;
415 -webkit-animation-fill-mode: both;
417 #carousel tr.subfooter th {
421 /* background: rgba(0, 0, 170, 0.8); */
423 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
425 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
427 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
428 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
430 #carousel tr.footer {
431 -webkit-animation: fade-in 2.0s ease;
432 -webkit-animation-delay: 0.5s;
433 -webkit-animation-fill-mode: both;
435 #carousel td, #carousel th {
439 #carousel tr.footer td {
441 text-transform: none;
452 #carousel td.matchup {
457 text-transform: none;
459 #carousel .streamtime {
461 text-transform: none;
465 #carousel .playerpadding {
467 background: rgba(0,0,0,0);
469 #carousel th.playernum, #carousel .playername {
472 #carousel th.playernum {
475 padding-left: 0px; margin-left: 0px;
478 #carousel .playername {
479 text-transform: none;
483 .nplayed, .gd, .pts {
494 @-webkit-keyframes from-left {
496 -webkit-transform:translateX(-200%);
499 -webkit-transform:translateX(0);
502 @-webkit-keyframes to-left {
504 -webkit-transform:translateX(0);
507 -webkit-transform:translateX(-200%);
510 @-webkit-keyframes from-top {
512 -webkit-transform:translateY(-40px);
515 -webkit-transform:translateY(0);
518 @-webkit-keyframes to-top {
520 -webkit-transform:translateY(0);
523 -webkit-transform:translateY(-40px);
527 @-webkit-keyframes scale-out {
535 @-webkit-keyframes scale-in {
539 border: 2px solid #ccc;
541 border: 1px solid #ccc;
547 border: 2px solid #ccc;
549 border: 1px solid #ccc;
553 @-webkit-keyframes scale-in-no-border {
561 @-webkit-keyframes scale-out-small {
572 border: 1px solid black;
574 border: 1px solid #6ad;
581 @-webkit-keyframes scale-in-small {
585 border: 1px solid black;
587 border: 1px solid #6ad;
592 border: 1px solid #6ad;
602 @-webkit-keyframes wipe-out {
604 clip: rect(0px,0px,200px,0px);
607 clip: rect(0px,0px,200px,0px);
610 clip: rect(0px,1050px,200px,0px);
613 @-webkit-keyframes wipe-in {
615 clip: rect(0px,1050px,200px,0px);
617 20% { /* Not symmetrical! */
618 clip: rect(0px,0px,200px,0px);
621 clip: rect(0px,0px,200px,0px);
624 @-webkit-keyframes fade-in {
632 @-webkit-keyframes fade-out {