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

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