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: 3px solid black;
  30   z-index: 1;
  31 }
  32 .scorebug td {
  33   border: 3px solid #008;
  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: 3px solid black;
  68 }
  69 .clock {
  70   border: 3px solid #008;
  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: 3px solid black;
  96 }
  97 .comment {
  98   border: 3px solid #008;
  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 }
 322
 323 .nplayed, .gd, .pts {
 324   text-align: center;
 325 }
 326
 327 #manualcontrols {
 328   z-index: 4;
 329   position: fixed;
 330   top: 250px;
 331 }
 332
 333 /* Animations */
 334 @-webkit-keyframes from-left {
 335   0% {
 336     -webkit-transform:translateX(-200%);
 337   }
 338   100% {
 339     -webkit-transform:translateX(0);
 340   }
 341 }
 342 @-webkit-keyframes to-left {
 343   0% {
 344     -webkit-transform:translateX(0);
 345   }
 346   100% {
 347     -webkit-transform:translateX(-200%);
 348   }
 349 }
 350 @-webkit-keyframes from-top {
 351   0% {
 352     -webkit-transform:translateY(-40px);
 353   }
 354   100% {
 355     -webkit-transform:translateY(0);
 356   }
 357 }
 358 @-webkit-keyframes to-top {
 359   0% {
 360     -webkit-transform:translateY(0);
 361   }
 362   100% {
 363     -webkit-transform:translateY(-40px);
 364   }
 365 }
 366
 367 @-webkit-keyframes scale-out {
 368   0% {
 369     width: 0px;
 370   }
 371   100% {
 372     width: 1050px;
 373   }
 374 }
 375 @-webkit-keyframes scale-in {
 376   0% {
 377     width: 1050px;
 378     border: 2px solid #ccc;
 379   }
 380   100% {
 381     width: 0px;
 382     border: 2px solid #ccc;
 383   }
 384 }
 385 @-webkit-keyframes scale-in-no-border {
 386   0% {
 387     width: 1050px;
 388   }
 389   100% {
 390     width: 0px;
 391   }
 392 }
 393 @-webkit-keyframes scale-out-small {
 394   0% {
 395     width: 0px;
 396     border: 0px;
 397   }
 398   19.99% {
 399     border: 0px;
 400   }
 401   20% {
 402     width: 0px;
 403     border: 1px solid black;
 404   }
 405   100% {
 406     width: 500px;
 407   }
 408 }
 409 @-webkit-keyframes scale-in-small {
 410   0% {
 411     width: 500px;
 412     border: 1px solid black;
 413   }
 414   80% {
 415     width: 0px;
 416     border: 1px solid black;
 417   }
 418   80.01% {
 419     border: 0px;
 420   }
 421   100% {
 422     width: 0px;
 423     border: 0px;
 424   }
 425 }
 426 @-webkit-keyframes wipe-out {
 427   0% {
 428     clip: rect(0px,0px,200px,0px);
 429   }
 430   20% {
 431     clip: rect(0px,0px,200px,0px);
 432   }
 433   100% {
 434     clip: rect(0px,1050px,200px,0px);
 435   }
 436 }
 437 @-webkit-keyframes wipe-in {
 438   0% {
 439     clip: rect(0px,1050px,200px,0px);
 440   }
 441   20% {  /* Not symmetrical! */
 442     clip: rect(0px,0px,200px,0px);
 443   }
 444   100% {
 445     clip: rect(0px,0px,200px,0px);
 446   }
 447 }
 448 @-webkit-keyframes fade-in {
 449   0% {
 450     opacity: 0;
 451   }
 452   100% {
 453     opacity: 1;
 454   }
 455 }
 456 @-webkit-keyframes fade-out {
 457   0% {
 458     opacity: 1;
 459   }
 460   100% {
 461     opacity: 0;
 462   }
 463 }