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

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