Minor graphic tweaks

This commit is contained in:
thepaperpilot 2023-02-25 18:48:36 -06:00
parent 11a877484e
commit b4a62b3b20
2 changed files with 13 additions and 5 deletions

View file

@ -220,7 +220,7 @@
}
.waiting {
font-size: 4vmin;
font-size: 2vmin;
height: 8vmin;
display: flex;
align-items: center;
@ -260,6 +260,7 @@
background: var(--background);
filter: drop-shadow(2px 4px 6px black);
text-shadow: -1px 1px 0 var(--raised-background), 1px 1px 0 var(--raised-background), 1px -1px 0 var(--raised-background), -1px -1px 0 var(--raised-background);
z-index: 1;
}
.stream-details {
@ -338,12 +339,19 @@
}
.character-transition-enter-from {
transform: translateY(100%);
transform: translateX(-100%);
}
.character-transition-leave-to {
transform: translateX(100%);
}
.streamer-transition-enter-from {
transform: translateY(100%);
}
.streamer-transition-leave-to {
transform: translateY(-100%);
}
.character-trensition-active {
.character-trensition-active,
.streamer-transition-active {
position: absolute;
}

View file

@ -995,7 +995,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
</div>
</div>
<Row class="streamers-container">
<TransitionGroup name="character-transition">
<TransitionGroup name="streamer-transition">
{battle.value.streamers
.slice()
.reverse()
@ -1056,7 +1056,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
</div>
</div>
<Row class="streamers-container">
<TransitionGroup name="character-transition">
<TransitionGroup name="streamer-transition">
{battle.value.enemyStreamers.map((streamer, i) => (
<CharacterSlot
key={i}