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