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

View file

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