Bo3 pontok + némi variálás

Fibinger Ádám

2020-03-27 f6ebbfe1f75701487dac0612344cfc1b0e220061

Bo3 pontok + némi variálás

 assets/animation-test.css

New file
@@ -0,0 +1,40 @@
@keyframes grow {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes fadeIn {
    from { opacity: 0; display: none; }
    to { opacity: 1; display: inline-block; }
}

.grow {
    animation-name: grow;
    animation-duration: 0.5s;
}

#stripe {
    position: static;
    width: 0;
    margin: auto;
    background: transparent url(/assets/stripe.png) no-repeat center center !important;
}
#stripe.final {
    position: fixed;
    width: 100%;
}

#stripe.hidecontent * {
    display: none;
    opacity: 0;
}

#stripe.showcontent * {
    animation-name: fadeIn;
    animation-duration: 0.5s;
}


 assets/gamer_kavezo_logo.png

 assets/overlay.css

@@ -8,11 +8,12 @@
  width: 1920px;
  height: 1080px;
  font-family: "Oswald", sans-serif;
  /* background-image: url("/assets/test.png");*/
}

#stripe {
  position: fixed;
  top: 2px;
  top: -6px;
  left: 0;
  width: 100%;
  height: 58px;
@@ -35,7 +36,7 @@
}
#stripe .team .name {
  color: white;
  font-size: 34px;
  font-size: 33px;
}
#stripe .team.blue {
  left: 270px;
@@ -53,12 +54,12 @@
  left: 1080px;
}
#stripe .ban.blue {
  left: 715px;
  left: 735px;
}
#stripe .info {
  position: inherit;
  top: 4px;
  width: 220px;
  top: -3px;
  width: 300px;
  height: 50px;
}
#stripe .info.left {
@@ -66,22 +67,49 @@
  text-align: left;
}
#stripe .info.right {
  left: 1700px;
  left: 1620px;
  text-align: right;
}
#stripe .mapwin {
  background-color: #fff800;
  position: fixed;
  top: 6px;
  left: 861px;
  width: 32px;
  height: 14px;
}
#stripe .mapwin.left {
  left: 861px;
}
#stripe .mapwin.left.one {
  top: 6px;
}
#stripe .mapwin.left.two {
  top: 23px;
}
#stripe .mapwin.right {
  left: 1028px;
}
#stripe .mapwin.right.one {
  top: 6px;
}
#stripe .mapwin.right.two {
  top: 23px;
}
#stripe .operator {
  background-repeat: no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
  filter: grayscale(65%);
  width: 50px;
  height: 50px;
  margin-top: -2px;
  filter: grayscale(50%);
  text-align: center;
}
#stripe .operator .prohibit {
  text-align: center;
  color: gray;
  margin-top: 31px;
  font-size: 20px;
  margin-top: 15px;
  font-size: 24px;
  text-shadow: 1px 1px 1px gray, 1px 0 1px gray, 0 -1px 1px gray, -1px -1px 1px gray;
  filter: none;
  color: red;
@@ -103,6 +131,7 @@
  height: 50px;
  font-size: 20px;
  text-shadow: 1px 1px 1px black, 1px 0 1px black, 0 -1px 1px black, -1px -1px 1px black;
  width: 350px;
}
#stripe .text em {
  font-style: normal;

 assets/overlay.scss

@@ -8,11 +8,12 @@
  width: 1920px;
  height: 1080px;
  font-family: 'Oswald', sans-serif;
  /* background-image: url("/assets/test.png");*/
}

#stripe {
  position: fixed;
  top: 2px;
  top: -6px;
  left: 0;
  width: 100%;
  height: 58px;
@@ -38,7 +39,7 @@

    .name {
      color: white;
      font-size: 34px;
      font-size: 33px;
    }

    &.blue {
@@ -61,14 +62,14 @@
    }

    &.blue {
      left: 715px;
      left: 735px;
    }
  }

  .info {
    position: inherit;
    top: 4px;
    width: 220px;
    top: -3px;
    width: 300px;
    height: 50px;
  }

@@ -78,24 +79,54 @@
  }

  .info.right {
    left: 1700px;
    left: 1620px;
    text-align: right;
  }

  .mapwin {
    background-color: #fff800;
    position: fixed;
    top: 6px;
    left: 861px;
    width: 32px;
    height: 14px;
    &.left {
      left: 861px;
      &.one {
        top: 6px;
      }
      &.two {
        top: 23px;
      }
    }

    &.right {
      left: 1028px;
      &.one {
        top: 6px;
      }
      &.two {
        top: 23px;
      }
    }
 }


  .operator {
    background-repeat: no-repeat;
    background-size: cover;
    width: 60px;
    height: 60px;
    width: 50px;
    height: 50px;
    margin-top: -2px;

    filter: grayscale(65%);
    filter: grayscale(50%);
    text-align: center;

    .prohibit {
      text-align: center;
      color: gray;
      margin-top: 31px;
      font-size: 20px;
      margin-top: 15px;
      font-size: 24px;
      text-shadow: 1px 1px 1px gray,
      1px 0 1px gray,
      0 -1px 1px gray,
@@ -127,6 +158,7 @@
    1px 0 1px black,
    0 -1px 1px black,
    -1px -1px 1px black;
    width: 350px;
  }

  .text em {

 assets/stripe.png