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 }
 135 .lowerthird-headline-hidden {
 136   width: 0px;
 137   border-left: 0px;
 138   border-right: 0px;
 139 }
 140 .lowerthird-headline-animate-in {
 141   -webkit-animation: scale-out 1.0s;
 142 }
 143 .lowerthird-headline-animate-out {
 144   -webkit-animation: scale-in 1.0s;
 145 }
 146 .lowerthird-headline-content {
 147   padding-left: 20px;
 148   position: absolute;
 149 }
 150 .lowerthird-headline-content-hidden {
 151   clip: rect(0px,0px,200px,0px);
 152 }
 153 .lowerthird-headline-content-animate-in {
 154   -webkit-animation: wipe-out 2.0s ease;
 155 }
 156 .lowerthird-headline-content-animate-out {
 157   -webkit-animation: wipe-in 2.0s ease;
 158   clip: rect(0px,0px,200px,0px);
 159 }
 160 .lowerthird-subheading {
 161   position: fixed;
 162   font-size: 24px;
 163   left: 40px;
 164   top: 637px;
 165   height: 40px;
 166   width: 500px;
 167   border-collapse: collapse;
 168   white-space: nowrap;
 169   border: 1px solid black;
 170   /*display: flex;
 171   align-items: center; */
 172   /*background: linear-gradient(to right, #44c, #33a 15px); */
 173   background-image: url(lowerthird-bg2.png);
 174 }
 175 .lowerthird-subheading-hidden {
 176   clip: rect(0px,0px,200px,0px);
 177 }
 178 .lowerthird-subheading-animate-in {
 179   -webkit-animation: scale-out-small 1.6s ease;
 180 }
 181 .lowerthird-subheading-animate-out {
 182   -webkit-animation: scale-in-small 1.6s ease;
 183   width: 0px;
 184   border-left: 0px;
 185   -webkit-animation-fill-mode: both;
 186 }
 187 .lowerthird-subheading-content {
 188   position: absolute;
 189   padding-left: 20px;
 190 }
 191 .lowerthird-subheading-content-hidden {
 192   width: 0px;
 193   border: 0px;
 194 }
 195 .lowerthird-subheading-content-animate-in {
 196   -webkit-animation: wipe-out 2.2s ease;
 197 }
 198 .lowerthird-subheading-content-animate-out {
 199   -webkit-animation: wipe-in 2.2s ease;
 200   clip: rect(0px,0px,200px,0px);
 201 }
 202 .lowerthird-picture {
 203   position: fixed;
 204   left: 1085px;
 205   top: 490px;
 206   white-space: nowrap;
 207   border: 0px;
 208   height: 170px;
 209   width: 170px;
 210   color: black;
 211 }
 212 .lowerthird-picture-hidden {
 213   width: 0px;
 214   border-left: 0px;
 215   border-right: 0px;
 216 }
 217 .lowerthird-picture-animate-in {
 218   -webkit-animation: scale-out 1.0s;
 219 }
 220 .lowerthird-picture-animate-out {
 221   -webkit-animation: scale-in-no-border 1.0s;
 222 }
 223 .lowerthird-picture-content {
 224   padding-left: 0px;
 225   position: absolute;
 226 }
 227 .lowerthird-picture-content-hidden {
 228   clip: rect(0px,0px,200px,0px);
 229 }
 230 .lowerthird-picture-content-animate-in {
 231   -webkit-animation: wipe-out 2.0s ease;
 232   -webkit-animation-delay: 0.3s;
 233   -webkit-animation-fill-mode: both;
 234 }
 235 .lowerthird-picture-content-animate-out {
 236   -webkit-animation: wipe-in 2.0s ease;
 237   clip: rect(0px,0px,200px,0px);
 238 }
 239
 240 /* these are hidden when actually run in casparcg */
 241 #area {
 242   position: fixed;
 243   left: 0px;
 244   top: 0px;
 245   width: 1280px;
 246   height: 720px;
 247   background: cyan;
 248 }
 249 #carousel {
 250   z-index: 3;
 251   position: fixed;
 252   font-size: 45px;
 253   /* background: rgba(0, 0, 170, 0.8); */
 254   background: transparent;
 255   top: 10px;
 256   bottom: auto;
 257   left: 50px;
 258   right: 50px;
 259   width: 1180px;
 260   border-spacing: 0px 7px;
 261   text-align: left;
 262   border-collapse: separate;
 263   text-transform: uppercase;
 264   display: none;
 265 }
 266 #carousel thead tr {
 267   text-transform: none;
 268   text-align: center;
 269 }
 270 #carousel thead th {
 271   text-transform: none;
 272   text-align: center;
 273   font-size: 45px;
 274   -webkit-animation: fade-in 1.0s ease;
 275   -webkit-animation-delay: 0.0s;
 276   -webkit-animation-fill-mode: both;
 277 }
 278 #carousel tr.subfooter {
 279   -webkit-animation: fade-in 1.0s ease;
 280   -webkit-animation-delay: 0.25s;
 281   -webkit-animation-fill-mode: both;
 282 }
 283 #carousel tr.subfooter th {
 284   font-size: 25px;
 285 }
 286 #carousel tr {
 287   /* background: rgba(0, 0, 170, 0.8); */
 288   background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
 289   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 290   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 291 }
 292 #carousel tr.footer {
 293   -webkit-animation: fade-in 2.0s ease;
 294   -webkit-animation-delay: 0.5s;
 295   -webkit-animation-fill-mode: both;
 296 }
 297 #carousel td, #carousel th {
 298   padding: 8px;
 299   font-size: 40px;
 300 }
 301 #carousel tr.footer td {
 302   font-size: 20px;
 303   text-transform: none;
 304   text-align: center;
 305 }
 306 #carousel th.rank {
 307   padding-left: 20px;
 308 }
 309 #carousel td.team {
 310   width: auto;
 311 }
 312
 313 /* schedule */
 314 #carousel td.matchup {
 315   padding-left: 0.7em;
 316   width: auto;
 317 }
 318 #carousel td.group {
 319   text-transform: none;
 320 }
 321 #carousel .streamtime {
 322   text-align: center;
 323   text-transform: none;
 324 }
 325
 326 /* roster */
 327 #carousel .playerpadding {
 328   font-size: 25px;
 329   background: rgba(0,0,0,0);
 330 }
 331 #carousel th.playernum, #carousel .playername {
 332   font-size: 35px;
 333 }
 334 #carousel th.playernum {
 335   text-align: center;
 336   padding-right: 8px;
 337   padding-left: 0px; margin-left: 0px;
 338   width: 80px;
 339 }
 340 #carousel .playername {
 341   text-transform: none;
 342   width: auto;
 343 }
 344
 345 .nplayed, .gd, .pts {
 346   text-align: center;
 347 }
 348
 349 #manualcontrols {
 350   z-index: 4;
 351   position: fixed;
 352   top: 250px;
 353 }
 354
 355 /* Animations */
 356 @-webkit-keyframes from-left {
 357   0% {
 358     -webkit-transform:translateX(-200%);
 359   }
 360   100% {
 361     -webkit-transform:translateX(0);
 362   }
 363 }
 364 @-webkit-keyframes to-left {
 365   0% {
 366     -webkit-transform:translateX(0);
 367   }
 368   100% {
 369     -webkit-transform:translateX(-200%);
 370   }
 371 }
 372 @-webkit-keyframes from-top {
 373   0% {
 374     -webkit-transform:translateY(-40px);
 375   }
 376   100% {
 377     -webkit-transform:translateY(0);
 378   }
 379 }
 380 @-webkit-keyframes to-top {
 381   0% {
 382     -webkit-transform:translateY(0);
 383   }
 384   100% {
 385     -webkit-transform:translateY(-40px);
 386   }
 387 }
 388
 389 @-webkit-keyframes scale-out {
 390   0% {
 391     width: 0px;
 392   }
 393   100% {
 394     width: 1050px;
 395   }
 396 }
 397 @-webkit-keyframes scale-in {
 398   0% {
 399     width: 1050px;
 400     border: 2px solid #ccc;
 401   }
 402   100% {
 403     width: 0px;
 404     border: 2px solid #ccc;
 405   }
 406 }
 407 @-webkit-keyframes scale-in-no-border {
 408   0% {
 409     width: 1050px;
 410   }
 411   100% {
 412     width: 0px;
 413   }
 414 }
 415 @-webkit-keyframes scale-out-small {
 416   0% {
 417     width: 0px;
 418     border: 0px;
 419   }
 420   19.99% {
 421     border: 0px;
 422   }
 423   20% {
 424     width: 0px;
 425     border: 1px solid black;
 426   }
 427   100% {
 428     width: 500px;
 429   }
 430 }
 431 @-webkit-keyframes scale-in-small {
 432   0% {
 433     width: 500px;
 434     border: 1px solid black;
 435   }
 436   80% {
 437     width: 0px;
 438     border: 1px solid black;
 439   }
 440   80.01% {
 441     border: 0px;
 442   }
 443   100% {
 444     width: 0px;
 445     border: 0px;
 446   }
 447 }
 448 @-webkit-keyframes wipe-out {
 449   0% {
 450     clip: rect(0px,0px,200px,0px);
 451   }
 452   20% {
 453     clip: rect(0px,0px,200px,0px);
 454   }
 455   100% {
 456     clip: rect(0px,1050px,200px,0px);
 457   }
 458 }
 459 @-webkit-keyframes wipe-in {
 460   0% {
 461     clip: rect(0px,1050px,200px,0px);
 462   }
 463   20% {  /* Not symmetrical! */
 464     clip: rect(0px,0px,200px,0px);
 465   }
 466   100% {
 467     clip: rect(0px,0px,200px,0px);
 468   }
 469 }
 470 @-webkit-keyframes fade-in {
 471   0% {
 472     opacity: 0;
 473   }
 474   100% {
 475     opacity: 1;
 476   }
 477 }
 478 @-webkit-keyframes fade-out {
 479   0% {
 480     opacity: 1;
 481   }
 482   100% {
 483     opacity: 0;
 484   }
 485 }