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