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

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