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 #ccc;
33 border: 1px solid #ccc;
35 .team1color, .team2color {
40 background-color: red;
41 background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
44 background-color: green;
45 background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0));
52 background: linear-gradient(to bottom, #fff, #eee);
53 padding-top: 2px; /* needs to be adjusted per-font! */
57 background: linear-gradient(to bottom, #fff, #eee);
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 #ccc;
74 border: 1px solid #ccc;
75 background: linear-gradient(to bottom, #fff, #eee);
82 -webkit-transform:translateX(-200%);
84 .clockbug-animate-in {
85 -webkit-animation: from-left 1s ease;
87 .clockbug-animate-out {
88 -webkit-animation: to-left 1s ease;
89 -webkit-transform:translateX(-200%);
92 /* Comment, below score */
98 border-collapse: collapse;
100 border: 1px solid #ccc;
103 border: 1px solid #ccc;
104 background: linear-gradient(to bottom, #fff, #eee);
111 -webkit-transform:translateY(-40px);
113 .commentbug-animate-in {
114 -webkit-animation: from-top 0.5s ease;
116 .commentbug-animate-out {
117 -webkit-animation: to-top 0.5s ease;
118 -webkit-transform:translateY(-40px);
122 .lowerthird-headline {
127 border-collapse: collapse;
129 border: 1px solid #ccc;
133 /*background: linear-gradient(to right, #ccc, #fff 15px); */
134 background-image: url(lowerthird-bg.png);
136 /* padding-top: 20px; */
139 vertical-align: middle;
141 .lowerthird-headline-hidden {
146 .lowerthird-headline-animate-in {
147 -webkit-animation: scale-out 1.0s;
149 .lowerthird-headline-animate-out {
150 -webkit-animation: scale-in 1.0s;
152 .lowerthird-headline-content {
155 padding-top: 4px; /* needs to be adjusted per-font! */
157 .lowerthird-headline-content-hidden {
158 clip: rect(0px,0px,200px,0px);
160 .lowerthird-headline-content-animate-in {
161 -webkit-animation: wipe-out 2.0s ease;
163 .lowerthird-headline-content-animate-out {
164 -webkit-animation: wipe-in 2.0s ease;
165 clip: rect(0px,0px,200px,0px);
166 -webkit-animation-fill-mode: both;
168 .lowerthird-subheading {
175 border-collapse: collapse;
177 border: 1px solid #6ad;
179 align-items: center; */
180 /*background: linear-gradient(to right, #44c, #33a 15px); */
181 background-image: url(lowerthird-bg2.png);
185 .lowerthird-subheading-hidden {
186 clip: rect(0px,0px,200px,0px);
188 .lowerthird-subheading-animate-in {
189 -webkit-animation: scale-out-small 1.6s ease;
191 .lowerthird-subheading-animate-out {
192 -webkit-animation: scale-in-small 1.6s ease;
195 -webkit-animation-fill-mode: both;
197 .lowerthird-subheading-content {
200 padding-top: 2px; /* needs to be adjusted per-font! */
202 .lowerthird-subheading-content-hidden {
206 .lowerthird-subheading-content-animate-in {
207 -webkit-animation: wipe-out 2.2s ease;
209 .lowerthird-subheading-content-animate-out {
210 -webkit-animation: wipe-in 2.2s ease;
211 clip: rect(0px,0px,200px,0px);
213 .lowerthird-picture {
223 .lowerthird-picture img {
227 .lowerthird-picture-hidden {
232 .lowerthird-picture-animate-in {
233 -webkit-animation: scale-out 1.0s;
235 .lowerthird-picture-animate-out {
236 -webkit-animation: scale-in-no-border 1.0s;
238 .lowerthird-picture-content {
242 .lowerthird-picture-content-hidden {
243 clip: rect(0px,0px,200px,0px);
245 .lowerthird-picture-content-animate-in {
246 -webkit-animation: wipe-out 2.0s ease;
247 -webkit-animation-delay: 0.3s;
248 -webkit-animation-fill-mode: both;
250 .lowerthird-picture-content-animate-out {
251 -webkit-animation: wipe-in 2.0s ease;
252 clip: rect(0px,0px,200px,0px);
255 /* these are hidden when actually run in Nageru */
268 /* background: rgba(0, 0, 170, 0.8); */
269 background: transparent;
275 border-spacing: 0px 7px;
277 border-collapse: separate;
278 text-transform: uppercase;
282 text-transform: none;
286 text-transform: none;
289 -webkit-animation: fade-in 1.0s ease;
290 -webkit-animation-delay: 0.0s;
291 -webkit-animation-fill-mode: both;
293 #carousel tr.subfooter {
294 -webkit-animation: fade-in 1.0s ease;
295 -webkit-animation-delay: 0.25s;
296 -webkit-animation-fill-mode: both;
298 #carousel tr.subfooter th {
302 /* background: rgba(0, 0, 170, 0.8); */
303 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
304 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
305 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
307 #carousel tr.footer {
308 -webkit-animation: fade-in 2.0s ease;
309 -webkit-animation-delay: 0.5s;
310 -webkit-animation-fill-mode: both;
312 #carousel td, #carousel th {
316 #carousel tr.footer td {
318 text-transform: none;
329 #carousel td.matchup {
334 text-transform: none;
336 #carousel .streamtime {
338 text-transform: none;
342 #carousel .playerpadding {
344 background: rgba(0,0,0,0);
346 #carousel th.playernum, #carousel .playername {
349 #carousel th.playernum {
352 padding-left: 0px; margin-left: 0px;
355 #carousel .playername {
356 text-transform: none;
360 .nplayed, .gd, .pts {
371 @-webkit-keyframes from-left {
373 -webkit-transform:translateX(-200%);
376 -webkit-transform:translateX(0);
379 @-webkit-keyframes to-left {
381 -webkit-transform:translateX(0);
384 -webkit-transform:translateX(-200%);
387 @-webkit-keyframes from-top {
389 -webkit-transform:translateY(-40px);
392 -webkit-transform:translateY(0);
395 @-webkit-keyframes to-top {
397 -webkit-transform:translateY(0);
400 -webkit-transform:translateY(-40px);
404 @-webkit-keyframes scale-out {
412 @-webkit-keyframes scale-in {
415 border: 1px solid #ccc;
419 border: 1px solid #ccc;
422 @-webkit-keyframes scale-in-no-border {
430 @-webkit-keyframes scale-out-small {
440 border: 1px solid #6ad;
446 @-webkit-keyframes scale-in-small {
449 border: 1px solid #6ad;
453 border: 1px solid #6ad;
463 @-webkit-keyframes wipe-out {
465 clip: rect(0px,0px,200px,0px);
468 clip: rect(0px,0px,200px,0px);
471 clip: rect(0px,1050px,200px,0px);
474 @-webkit-keyframes wipe-in {
476 clip: rect(0px,1050px,200px,0px);
478 20% { /* Not symmetrical! */
479 clip: rect(0px,0px,200px,0px);
482 clip: rect(0px,0px,200px,0px);
485 @-webkit-keyframes fade-in {
493 @-webkit-keyframes fade-out {