git.sesse.net Git - ultimatescore/blob - score.css

   1 * {
   2   -webkit-box-sizing: border-box;
   3   Box-Sizing: border-box;
   4   -webkit-backface-visibility: hidden;
   5   -webkit-transition: translate3d(0,0,0);
   6 }
   7 html, body {
   8   width: 1280px;
   9   height: 720px;
  10   margin: 0;
  11   padding: 0;
  12   background: transparent;
  13   overflow: hidden;
  14   -webkit-font-smoothing: antialiased !important;
  15 }
  16 body {
  17   font-family: 'Lato', sans-serif;
  18   color: white;
  19 }
  20
  21 /* Score */
  22 .scorebug {
  23   position: fixed;
  24   font-size: 25px;
  25   left: 10px;
  26   top: 10px;
  27   border-collapse: collapse;
  28   white-space: nowrap;
  29   border: 1px solid black;
  30   z-index: 1;
  31 }
  32 .scorebug td {
  33   border: 1px solid #000;
  34 }
  35 .team1color, .team2color {
  36   width: 15px;
  37   margin: 5px;
  38 }
  39 .team1color {
  40   background: red;
  41 }
  42 .team2color {
  43   background: green;
  44 }
  45 .team1, .team2 {
  46   font-weight: bold;
  47   width: 100px;
  48   text-align: center;
  49   height: 35px;
  50   background: #00a;
  51 }
  52 .score {
  53   text-align: center;
  54   background: #00c;
  55   width: 110px;
  56   height: 35px;
  57 }
  58
  59 /* Clock, to the right of score */
  60 .clockbug {
  61   position: fixed;
  62   font-size: 25px;
  63   left: 360px;
  64   top: 10px;
  65   border-collapse: collapse;
  66   white-space: nowrap;
  67   border: 1px solid black;
  68 }
  69 .clock {
  70   border: 1px solid #000;
  71   background: #00a;
  72   text-align: center;
  73   height: 35px;
  74   width: 90px;
  75 }
  76 .clockbug-hidden {
  77   -webkit-transform:translateX(-200%);
  78 }
  79 .clockbug-animate-in {
  80   -webkit-animation: from-left 1s ease;
  81 }
  82 .clockbug-animate-out {
  83   -webkit-animation: to-left 1s ease;
  84   -webkit-transform:translateX(-200%);
  85 }
  86
  87 /* Comment, below score */
  88 .commentbug {
  89   position: fixed;
  90   font-size: 20px;
  91   left: 10px;
  92   top: 52px;
  93   border-collapse: collapse;
  94   white-space: nowrap;
  95   border: 1px solid black;
  96 }
  97 .comment {
  98   border: 1px solid #000;
  99   background: #00a;
 100   text-align: center;
 101   height: 30px;
 102   width: 340px;
 103 }
 104
 105 .commentbug-hidden {
 106   -webkit-transform:translateY(-40px);
 107 }
 108 .commentbug-animate-in {
 109   -webkit-animation: from-top 0.5s ease;
 110 }
 111 .commentbug-animate-out {
 112   -webkit-animation: to-top 0.5s ease;
 113   -webkit-transform:translateY(-40px);
 114 }
 115
 116 /* Lower third */
 117 .lowerthird-headline {
 118   position: fixed;
 119   font-size: 40px;
 120   left: 10px;
 121   top: 520px;
 122   border-collapse: collapse;
 123   white-space: nowrap;
 124   border: 2px solid #ccc;
 125   height: 118px;
 126   font-weight: bold;
 127   width: 1050px;
 128   /*background: linear-gradient(to right, #ccc, #fff 15px); */
 129   background-image: url(lowerthird-bg.png);
 130   color: black;
 131   /* padding-top: 20px; */
 132 }
 133 .lowerthird-headline-hidden {
 134   width: 0px;
 135   border-left: 0px;
 136   border-right: 0px;
 137 }
 138 .lowerthird-headline-animate-in {
 139   -webkit-animation: scale-out 1.0s;
 140 }
 141 .lowerthird-headline-animate-out {
 142   -webkit-animation: scale-in 1.0s;
 143 }
 144 .lowerthird-headline-content {
 145   padding-left: 20px;
 146   position: absolute;
 147 }
 148 .lowerthird-headline-content-hidden {
 149   clip: rect(0px,0px,200px,0px);
 150 }
 151 .lowerthird-headline-content-animate-in {
 152   -webkit-animation: wipe-out 2.0s ease;
 153 }
 154 .lowerthird-headline-content-animate-out {
 155   -webkit-animation: wipe-in 2.0s ease;
 156   clip: rect(0px,0px,200px,0px);
 157 }
 158 .lowerthird-subheading {
 159   position: fixed;
 160   font-size: 24px;
 161   left: 40px;
 162   top: 637px;
 163   height: 40px;
 164   width: 500px;
 165   border-collapse: collapse;
 166   white-space: nowrap;
 167   border: 1px solid black;
 168   /*display: flex;
 169   align-items: center; */
 170   /*background: linear-gradient(to right, #44c, #33a 15px); */
 171   background-image: url(lowerthird-bg2.png);
 172 }
 173 .lowerthird-subheading-hidden {
 174   clip: rect(0px,0px,200px,0px);
 175 }
 176 .lowerthird-subheading-animate-in {
 177   -webkit-animation: scale-out-small 1.6s ease;
 178 }
 179 .lowerthird-subheading-animate-out {
 180   -webkit-animation: scale-in-small 1.6s ease;
 181   width: 0px;
 182   border-left: 0px;
 183   -webkit-animation-fill-mode: both;
 184 }
 185 .lowerthird-subheading-content {
 186   position: absolute;
 187   padding-left: 20px;
 188 }
 189 .lowerthird-subheading-content-hidden {
 190   width: 0px;
 191   border: 0px;
 192 }
 193 .lowerthird-subheading-content-animate-in {
 194   -webkit-animation: wipe-out 2.2s ease;
 195 }
 196 .lowerthird-subheading-content-animate-out {
 197   -webkit-animation: wipe-in 2.2s ease;
 198   clip: rect(0px,0px,200px,0px);
 199 }
 200 .lowerthird-picture {
 201   position: fixed;
 202   left: 1085px;
 203   top: 490px;
 204   white-space: nowrap;
 205   border: 0px;
 206   height: 170px;
 207   width: 170px;
 208   color: black;
 209 }
 210 .lowerthird-picture-hidden {
 211   width: 0px;
 212   border-left: 0px;
 213   border-right: 0px;
 214 }
 215 .lowerthird-picture-animate-in {
 216   -webkit-animation: scale-out 1.0s;
 217 }
 218 .lowerthird-picture-animate-out {
 219   -webkit-animation: scale-in-no-border 1.0s;
 220 }
 221 .lowerthird-picture-content {
 222   padding-left: 0px;
 223   position: absolute;
 224 }
 225 .lowerthird-picture-content-hidden {
 226   clip: rect(0px,0px,200px,0px);
 227 }
 228 .lowerthird-picture-content-animate-in {
 229   -webkit-animation: wipe-out 2.0s ease;
 230   -webkit-animation-delay: 0.3s;
 231   -webkit-animation-fill-mode: both;
 232 }
 233 .lowerthird-picture-content-animate-out {
 234   -webkit-animation: wipe-in 2.0s ease;
 235   clip: rect(0px,0px,200px,0px);
 236 }
 237
 238 /* these are hidden when actually run in casparcg */
 239 #area {
 240   position: fixed;
 241   left: 0px;
 242   top: 0px;
 243   width: 1280px;
 244   height: 720px;
 245   background: cyan;
 246 }
 247 #carousel {
 248   z-index: 3;
 249   position: fixed;
 250   font-size: 45px;
 251   /* background: rgba(0, 0, 170, 0.8); */
 252   background: transparent;
 253   top: 10px;
 254   bottom: auto;
 255   left: 50px;
 256   right: 50px;
 257   width: 1180px;
 258   border-spacing: 0px 7px;
 259   text-align: left;
 260   border-collapse: separate;
 261   text-transform: uppercase;
 262   display: none;
 263 }
 264 #carousel thead tr {
 265   text-transform: none;
 266   text-align: center;
 267 }
 268 #carousel thead th {
 269   text-transform: none;
 270   text-align: center;
 271   font-size: 45px;
 272   -webkit-animation: fade-in 1.0s ease;
 273   -webkit-animation-delay: 0.0s;
 274   -webkit-animation-fill-mode: both;
 275 }
 276 #carousel tr.subfooter {
 277   -webkit-animation: fade-in 1.0s ease;
 278   -webkit-animation-delay: 0.25s;
 279   -webkit-animation-fill-mode: both;
 280 }
 281 #carousel tr.subfooter th {
 282   font-size: 25px;
 283 }
 284 #carousel tr {
 285   /* background: rgba(0, 0, 170, 0.8); */
 286   background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
 287   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 288   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 289 }
 290 #carousel tr.footer {
 291   -webkit-animation: fade-in 2.0s ease;
 292   -webkit-animation-delay: 0.5s;
 293   -webkit-animation-fill-mode: both;
 294 }
 295 #carousel td, #carousel th {
 296   padding: 8px;
 297   font-size: 40px;
 298 }
 299 #carousel tr.footer td {
 300   font-size: 20px;
 301   text-transform: none;
 302   text-align: center;
 303 }
 304 #carousel th.rank {
 305   padding-left: 20px;
 306 }
 307 #carousel td.team {
 308   width: auto;
 309 }
 310
 311 /* schedule */
 312 #carousel td.matchup {
 313   padding-left: 0.7em;
 314   width: auto;
 315 }
 316 #carousel td.group {
 317   text-transform: none;
 318 }
 319 #carousel .streamtime {
 320   text-align: center;
 321   text-transform: none;
 322 }
 323
 324 .nplayed, .gd, .pts {
 325   text-align: center;
 326 }
 327
 328 #manualcontrols {
 329   z-index: 4;
 330   position: fixed;
 331   top: 250px;
 332 }
 333
 334 /* Animations */
 335 @-webkit-keyframes from-left {
 336   0% {
 337     -webkit-transform:translateX(-200%);
 338   }
 339   100% {
 340     -webkit-transform:translateX(0);
 341   }
 342 }
 343 @-webkit-keyframes to-left {
 344   0% {
 345     -webkit-transform:translateX(0);
 346   }
 347   100% {
 348     -webkit-transform:translateX(-200%);
 349   }
 350 }
 351 @-webkit-keyframes from-top {
 352   0% {
 353     -webkit-transform:translateY(-40px);
 354   }
 355   100% {
 356     -webkit-transform:translateY(0);
 357   }
 358 }
 359 @-webkit-keyframes to-top {
 360   0% {
 361     -webkit-transform:translateY(0);
 362   }
 363   100% {
 364     -webkit-transform:translateY(-40px);
 365   }
 366 }
 367
 368 @-webkit-keyframes scale-out {
 369   0% {
 370     width: 0px;
 371   }
 372   100% {
 373     width: 1050px;
 374   }
 375 }
 376 @-webkit-keyframes scale-in {
 377   0% {
 378     width: 1050px;
 379     border: 2px solid #ccc;
 380   }
 381   100% {
 382     width: 0px;
 383     border: 2px solid #ccc;
 384   }
 385 }
 386 @-webkit-keyframes scale-in-no-border {
 387   0% {
 388     width: 1050px;
 389   }
 390   100% {
 391     width: 0px;
 392   }
 393 }
 394 @-webkit-keyframes scale-out-small {
 395   0% {
 396     width: 0px;
 397     border: 0px;
 398   }
 399   19.99% {
 400     border: 0px;
 401   }
 402   20% {
 403     width: 0px;
 404     border: 1px solid black;
 405   }
 406   100% {
 407     width: 500px;
 408   }
 409 }
 410 @-webkit-keyframes scale-in-small {
 411   0% {
 412     width: 500px;
 413     border: 1px solid black;
 414   }
 415   80% {
 416     width: 0px;
 417     border: 1px solid black;
 418   }
 419   80.01% {
 420     border: 0px;
 421   }
 422   100% {
 423     width: 0px;
 424     border: 0px;
 425   }
 426 }
 427 @-webkit-keyframes wipe-out {
 428   0% {
 429     clip: rect(0px,0px,200px,0px);
 430   }
 431   20% {
 432     clip: rect(0px,0px,200px,0px);
 433   }
 434   100% {
 435     clip: rect(0px,1050px,200px,0px);
 436   }
 437 }
 438 @-webkit-keyframes wipe-in {
 439   0% {
 440     clip: rect(0px,1050px,200px,0px);
 441   }
 442   20% {  /* Not symmetrical! */
 443     clip: rect(0px,0px,200px,0px);
 444   }
 445   100% {
 446     clip: rect(0px,0px,200px,0px);
 447   }
 448 }
 449 @-webkit-keyframes fade-in {
 450   0% {
 451     opacity: 0;
 452   }
 453   100% {
 454     opacity: 1;
 455   }
 456 }
 457 @-webkit-keyframes fade-out {
 458   0% {
 459     opacity: 1;
 460   }
 461   100% {
 462     opacity: 0;
 463   }
 464 }