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