437 lines
7.7 KiB
CSS
437 lines
7.7 KiB
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 {
|
|
.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);
|
|
}
|
|
}
|