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