idle_moloch/app/src/styles/Army.module.css

.marchingBand {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  top: 22px;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.army-gathering {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
}
.person {
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  transform-origin: bottom center;
}
.marchingGroup {
  position: absolute;
  left: 0;
  bottom: 84px;
  animation: marching 20s linear;
  width: 200px;
  & > div {
    position: absolute;
  }
  & > div:nth-child(1) {
    left: 30px;
    animation:
      marchingPerson 20s linear,
      marchingPersonSkew 1s ease infinite,
      marchingPersonLeft1 20s linear;
  }
  & > div:nth-child(2) {
    left: 0px;
    animation:
      marchingPerson 20s linear,
      marchingPersonSkew 1s ease infinite;
  }
  & > div:nth-child(3) {
    left: -30px;
    animation:
      marchingPerson 20s linear,
      marchingPersonSkew 1s ease infinite,
      marchingPersonLeft3 20s linear;
  }
  & > div:nth-child(4) {
    left: 60px;
    animation:
      marchingPerson 20s linear,
      marchingPersonSkew 1s ease infinite,
      marchingPersonLeft4 20s linear;
  }
}
.tavern_keeper {
  background-image: url("/roles/tavern-keeper.svg");
}
.alchemist {
  background-image: url("/roles/alchemist.svg");
}
.archer {
  background-image: url("/roles/archer.svg");
}
.cleric {
  background-image: url("/roles/cleric.svg");
}
.druid {
  background-image: url("/roles/druid.svg");
}
.dwarf {
  background-image: url("/roles/dwarf.svg");
}
.monk {
  background-image: url("/roles/monk.svg");
}
.necromancer {
  background-image: url("/roles/necromancer.svg");
}
.paladin {
  background-image: url("/roles/paladin.svg");
}
.ranger {
  background-image: url("/roles/ranger.svg");
}
.rogue {
  background-image: url("/roles/rogue.svg");
}
.scribe {
  background-image: url("/roles/scribe.svg");
}
.warrior {
  background-image: url("/roles/warrior.svg");
}
.wizard {
  background-image: url("/roles/wizard.svg");
}
.healer {
  background-image: url("/roles/healer.svg");
}
.hunter {
  background-image: url("/roles/hunter.svg");
}

.moloch_denier {
  filter: sepia(0.1);
}
.apprentice {
}
.anointed {
  filter: saturate(1.1);
}
.champion {
  filter: saturate(2);
}

.armyUnits {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;

  @media only screen and (max-width: 600px) {
    left: 10px;
    bottom: 5px;
    overflow: auto;
  }
}
.armyUnit {
  @media only screen and (max-width: 600px) {
    transform: scale(0.75);
  }
  position: relative;
  height: 100%;
  width: 120px;
  margin-right: 20px;
  .person {
    &.isShrouded {
      filter: brightness(0);
    }
  }
  &.isUnavailable {
    filter: sepia(1);
    pointer-events: none;
  }
  &:hover,
  &.isUnavailable {
    .unitProfit {
      display: block;
    }
  }
}
.uiElement {
  width: fit-content;
  position: absolute;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.89);
  padding: 0.1rem 1rem;
  font-size: 0.8rem;
  user-select: none;
  text-align: center;
}
.unitSupply {
  top: -30px;
  right: 0;
  left: 2rem;
  white-space: nowrap;
}
.unitName {
  left: 0;
  right: 0;
  bottom: 45px;
  white-space: nowrap;
}
.unitPrice {
  left: 0;
  right: 0;
  bottom: 25px;
  white-space: nowrap;
}
.unitProfit {
  left: 0;
  right: 0;
  bottom: 5px;
  display: none;
}
.static {
  width: 110px;
  height: 110px;
  transition: all 100ms cubic-bezier(0.265, 1.4, 0.68, 1.65);
  &:not(.locked) {
    cursor: pointer;
  }
  &:hover {
    transform: scale(1.08, 1.08);
  }
  &:active {
    transform: scale(1.2, 1.2);
  }
}
.static.tavern_keeper {
  right: 130px;
  bottom: 160px;
  width: 90px;
  height: 90px;
  user-select: none;
  .pixelQuote {
    z-index: 20;
    min-width: 200px;
    width: fit-content;
    max-width: 300px;
    color: black;
    font-size: 0.7rem;
    line-height: 0.9rem;
    position: absolute;
    bottom: 5.5rem;
    left: -70px;
    right: 0;
    padding: 0.7rem;
    transition: opacity 1s ease-in-out;
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.4);
  }

  @media only screen and (max-width: 600px) {
    right: 60px;
  }
}
.static.moloch_denier {
  background-image: url("/roles/scribe2.png");
}
.static.apprentice {
  background-image: url("/roles/druid2.png");
}
.static.anointed {
  background-image: url("/roles/ranger2.png");
}
.static.champion {
  background-image: url("/roles/warrior2.png");
}

@keyframes marching {
  0% {
    transform: translate(-100px, -84px);
  }
  8% {
    /* approaches fire */
    transform: translate(72px, -84px);
  }
  15% {
    /* approaches road */
    transform: translate(152px, -174px);
  }
  25% {
    /* first road turn */
    transform: translate(122px, -284px);
  }
  45% {
    /* second road turn */
    transform: translate(256px, -374px);
  }
  75% {
    /* third road turn */
    transform: translate(159px, -416px);
  }
  100% {
    /* vanishes into distance */
    transform: translate(180px, -425px);
  }
}

@media only screen and (max-width: 600px) {
  @keyframes marching {
    0% {
      transform: translate(-54px, -59px); /* -100px scaled to ~-54px */
    }
    8% {
      /* approaches fire */
      transform: translate(15px, -100px); /* 72px scaled to ~39px */
    }
    15% {
      /* approaches road */
      transform: translate(82px, -123px); /* 152px scaled to ~82px */
    }
    25% {
      /* first road turn */
      transform: translate(66px, -200px); /* 122px scaled to ~66px */
    }
    45% {
      /* second road turn */
      transform: translate(138px, -264px); /* 256px scaled to ~138px */
    }
    75% {
      /* third road turn */
      transform: translate(86px, -293px); /* 159px scaled to ~86px */
    }
    100% {
      /* vanishes into distance */
      transform: translate(97px, -300px); /* 180px scaled to ~97px */
    }
  }
}

@keyframes marchingPerson {
  0% {
    background-size: 100% 100%;
  }
  8% {
    /* approaches fire */
  }
  15% {
    /* approaches road */
    background-size: 95% 95%;
  }
  25% {
    /* first road turn */
    background-size: 80% 80%;
  }
  45% {
    /* second road turn */
    background-size: 65% 65%;
  }
  75% {
    /* third road turn */
    background-size: 15% 15%;
  }
  100% {
    /* vanishes into distance */
    background-size: 2% 2%;
  }
}

@keyframes marchingPersonLeft1 {
  0% {
    left: 30px;
  }
  15% {
    /* approaches road */
    left: calc(30px * 0.95);
  }
  25% {
    /* first road turn */
    left: calc(30px * 0.8);
  }
  45% {
    /* second road turn */
    left: calc(30px * 0.65);
  }
  75% {
    /* third road turn */
    left: calc(30px * 0.15);
  }
  100% {
    /* vanishes into distance */
    left: calc(30px * 0.02);
  }
}

@keyframes marchingPersonLeft3 {
  0% {
    left: -30px;
  }
  15% {
    /* approaches road */
    left: calc(-30px * 0.95);
  }
  25% {
    /* first road turn */
    left: calc(-30px * 0.8);
  }
  45% {
    /* second road turn */
    left: calc(-30px * 0.65);
  }
  75% {
    /* third road turn */
    left: calc(-30px * 0.15);
  }
  100% {
    /* vanishes into distance */
    left: calc(-30px * 0.02);
  }
}

@keyframes marchingPersonLeft4 {
  0% {
    left: 60px;
  }
  15% {
    /* approaches road */
    left: calc(60px * 0.95);
  }
  25% {
    /* first road turn */
    left: calc(60px * 0.8);
  }
  45% {
    /* second road turn */
    left: calc(60px * 0.65);
  }
  75% {
    /* third road turn */
    left: calc(60px * 0.15);
  }
  100% {
    /* vanishes into distance */
    left: calc(60px * 0.02);
  }
}

@keyframes marchingPersonSkew {
  0%,
  100% {
    transform: skew(0deg, 0deg);
  }
  25% {
    transform: skew(5deg, -5deg);
  }
  50% {
    transform: skew(0deg, 0deg);
  }
  75% {
    transform: skew(-5deg, 5deg);
  }
}