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