git.sesse.net Git - ultimatescore/blob - score.scss

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