From 54e5ffaeb79f989463c144e58dfcd677b752c5a9 Mon Sep 17 00:00:00 2001 From: Daniel Weipert Date: Mon, 21 Aug 2023 22:44:21 +0200 Subject: log actions --- resources/css/battle.css | 59 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 19 deletions(-) (limited to 'resources/css/battle.css') diff --git a/resources/css/battle.css b/resources/css/battle.css index 1e52802..748dad1 100644 --- a/resources/css/battle.css +++ b/resources/css/battle.css @@ -66,39 +66,43 @@ .exp-label { margin-right: 0.5rem; } + + .battle__monster-visual { flex-grow: 1; flex-basis: 50%; position: relative; -} - -.battle__monster-sprite { text-align: center; } -.battle__monster-img { +.battle__monster-sprite { cursor: pointer; transition-property: filter; width: 90px; } -.battle__monster-img.damaged { - filter: brightness(2); -} -.battle__technique-animation { - position: fixed; - z-index: 10; +.battle__monster-sprite.damaged { + filter: brightness(2); } -.battle__monster__trainer-sprite { +.battle__trainer-visual { position: absolute; top: 0; right: 0; +} + +.battle__trainer-sprite { width: 120px; max-width: 25vw; } + +.battle__technique-animation { + position: fixed; + z-index: 10; +} + .battle__monster-technique { background-color: beige; border: 2px solid #000; @@ -123,13 +127,7 @@ } @media (max-width: 600px) { - .battle__monster--has-trainer-sprite .battle__monster-sprite { - width: 30vw; - } -} -@media (max-width: 450px) { - .battle__monster--has-trainer-sprite .battle__monster-sprite { - width: auto; + .battle__monster--has-trainer-sprite .battle__monster-visual { text-align: left; } } @@ -218,7 +216,6 @@ #techniques { display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; background: beige; } @@ -253,6 +250,30 @@ } + + +#log { + height: 20vh; + background-color: #fff; + border: 0.5rem solid rgba(0, 0, 0, 0.75); + padding: 0.5rem; + line-height: 1.75rem; + font-size: 1.25rem; + overflow-y: scroll; + + transition-property: height, border-width, padding; + transition-duration: 0.25s; +} + +#log.log--is-hidden { + height: 0; + border-width: 0; + padding: 0; +} + + + + .action-feedback { position: absolute; z-index: 11; -- cgit v1.2.3