idle_moloch/app/src/styles/Army.module.css
2024-10-23 10:32:13 +02:00

125 lines
2.3 KiB
CSS

.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;
}
.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");
}
.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;
}
.static.moloch_denier {
left: calc(20% - 60px);
bottom: 70px;
background-image: url("/roles/scribe2.png");
}
.static.apprentice {
left: calc(36% - 60px);
background-image: url("/roles/druid2.png");
bottom: 72px;
}
.static.anointed {
left: calc(50% - 60px);
bottom: 64px;
background-image: url("/roles/ranger2.png");
}
.static.champion {
left: calc(64% - 60px);
bottom: 66px;
background-image: url("/roles/warrior2.png");
}
.moloch_denier {
filter: sepia(0.1);
}
.apprentice {
}
.anointed {
filter: saturate(1.1);
}
.champion {
filter: saturate(2);
}
.supply {
position: absolute;
bottom: -40px;
background: rgba(0, 0, 0, 0.89);
padding: 0.5rem 1rem;
font-size: 0.8rem;
user-select: none;
}