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