2 box-sizing: border-box;
9 background: transparent;
13 /* transform: scale(1.5);
14 transform-origin: top left; */
17 font-family: 'Exo', sans-serif;
27 border-collapse: collapse;
29 border: 1px solid black;
33 border: 1px solid #000;
35 .team1color, .team2color {
40 background-color: red;
41 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
44 background-color: green;
45 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
52 background: linear-gradient(to bottom, #00a, #008);
53 padding-top: 2px; /* needs to be adjusted per-font! */
57 background: linear-gradient(to bottom, #00c, #00a);
60 padding-top: 2px; /* needs to be adjusted per-font! */
63 /* Clock, to the right of score */
69 border-collapse: collapse;
71 border: 1px solid black;
74 border: 1px solid #000;
75 background: linear-gradient(to bottom, #00a, #008);
81 -webkit-transform:translateX(-200%);
83 .clockbug-animate-in {
84 -webkit-animation: from-left 1s ease;
86 .clockbug-animate-out {
87 -webkit-animation: to-left 1s ease;
88 -webkit-transform:translateX(-200%);
91 /* Comment, below score */
97 border-collapse: collapse;
99 border: 1px solid black;
102 border: 1px solid #000;
103 background: linear-gradient(to bottom, #00a, #008);
110 -webkit-transform:translateY(-40px);
112 .commentbug-animate-in {
113 -webkit-animation: from-top 0.5s ease;
115 .commentbug-animate-out {
116 -webkit-animation: to-top 0.5s ease;
117 -webkit-transform:translateY(-40px);
121 .lowerthird-headline {
126 border-collapse: collapse;
128 border: 2px solid #ccc;
132 /*background: linear-gradient(to right, #ccc, #fff 15px); */
133 background-image: url(lowerthird-bg.png);
135 /* padding-top: 20px; */
138 vertical-align: middle;
140 .lowerthird-headline-hidden {
145 .lowerthird-headline-animate-in {
146 -webkit-animation: scale-out 1.0s;
148 .lowerthird-headline-animate-out {
149 -webkit-animation: scale-in 1.0s;
151 .lowerthird-headline-content {
154 padding-top: 4px; /* needs to be adjusted per-font! */
156 .lowerthird-headline-content-hidden {
157 clip: rect(0px,0px,200px,0px);
159 .lowerthird-headline-content-animate-in {
160 -webkit-animation: wipe-out 2.0s ease;
162 .lowerthird-headline-content-animate-out {
163 -webkit-animation: wipe-in 2.0s ease;
164 clip: rect(0px,0px,200px,0px);
165 -webkit-animation-fill-mode: both;
167 .lowerthird-subheading {
174 border-collapse: collapse;
176 border: 1px solid black;
178 align-items: center; */
179 /*background: linear-gradient(to right, #44c, #33a 15px); */
180 background-image: url(lowerthird-bg2.png);
184 .lowerthird-subheading-hidden {
185 clip: rect(0px,0px,200px,0px);
187 .lowerthird-subheading-animate-in {
188 -webkit-animation: scale-out-small 1.6s ease;
190 .lowerthird-subheading-animate-out {
191 -webkit-animation: scale-in-small 1.6s ease;
194 -webkit-animation-fill-mode: both;
196 .lowerthird-subheading-content {
199 padding-top: 2px; /* needs to be adjusted per-font! */
201 .lowerthird-subheading-content-hidden {
205 .lowerthird-subheading-content-animate-in {
206 -webkit-animation: wipe-out 2.2s ease;
208 .lowerthird-subheading-content-animate-out {
209 -webkit-animation: wipe-in 2.2s ease;
210 clip: rect(0px,0px,200px,0px);
212 .lowerthird-picture {
222 .lowerthird-picture-hidden {
227 .lowerthird-picture-animate-in {
228 -webkit-animation: scale-out 1.0s;
230 .lowerthird-picture-animate-out {
231 -webkit-animation: scale-in-no-border 1.0s;
233 .lowerthird-picture-content {
237 .lowerthird-picture-content-hidden {
238 clip: rect(0px,0px,200px,0px);
240 .lowerthird-picture-content-animate-in {
241 -webkit-animation: wipe-out 2.0s ease;
242 -webkit-animation-delay: 0.3s;
243 -webkit-animation-fill-mode: both;
245 .lowerthird-picture-content-animate-out {
246 -webkit-animation: wipe-in 2.0s ease;
247 clip: rect(0px,0px,200px,0px);
250 /* these are hidden when actually run in casparcg */
263 /* background: rgba(0, 0, 170, 0.8); */
264 background: transparent;
270 border-spacing: 0px 7px;
272 border-collapse: separate;
273 text-transform: uppercase;
277 text-transform: none;
281 text-transform: none;
284 -webkit-animation: fade-in 1.0s ease;
285 -webkit-animation-delay: 0.0s;
286 -webkit-animation-fill-mode: both;
288 #carousel tr.subfooter {
289 -webkit-animation: fade-in 1.0s ease;
290 -webkit-animation-delay: 0.25s;
291 -webkit-animation-fill-mode: both;
293 #carousel tr.subfooter th {
297 /* background: rgba(0, 0, 170, 0.8); */
298 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
299 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
300 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
302 #carousel tr.footer {
303 -webkit-animation: fade-in 2.0s ease;
304 -webkit-animation-delay: 0.5s;
305 -webkit-animation-fill-mode: both;
307 #carousel td, #carousel th {
311 #carousel tr.footer td {
313 text-transform: none;
324 #carousel td.matchup {
329 text-transform: none;
331 #carousel .streamtime {
333 text-transform: none;
337 #carousel .playerpadding {
339 background: rgba(0,0,0,0);
341 #carousel th.playernum, #carousel .playername {
344 #carousel th.playernum {
347 padding-left: 0px; margin-left: 0px;
350 #carousel .playername {
351 text-transform: none;
355 .nplayed, .gd, .pts {
366 @-webkit-keyframes from-left {
368 -webkit-transform:translateX(-200%);
371 -webkit-transform:translateX(0);
374 @-webkit-keyframes to-left {
376 -webkit-transform:translateX(0);
379 -webkit-transform:translateX(-200%);
382 @-webkit-keyframes from-top {
384 -webkit-transform:translateY(-40px);
387 -webkit-transform:translateY(0);
390 @-webkit-keyframes to-top {
392 -webkit-transform:translateY(0);
395 -webkit-transform:translateY(-40px);
399 @-webkit-keyframes scale-out {
407 @-webkit-keyframes scale-in {
410 border: 2px solid #ccc;
414 border: 2px solid #ccc;
417 @-webkit-keyframes scale-in-no-border {
425 @-webkit-keyframes scale-out-small {
435 border: 1px solid black;
441 @-webkit-keyframes scale-in-small {
444 border: 1px solid black;
448 border: 1px solid black;
458 @-webkit-keyframes wipe-out {
460 clip: rect(0px,0px,200px,0px);
463 clip: rect(0px,0px,200px,0px);
466 clip: rect(0px,1050px,200px,0px);
469 @-webkit-keyframes wipe-in {
471 clip: rect(0px,1050px,200px,0px);
473 20% { /* Not symmetrical! */
474 clip: rect(0px,0px,200px,0px);
477 clip: rect(0px,0px,200px,0px);
480 @-webkit-keyframes fade-in {
488 @-webkit-keyframes fade-out {