diff options
Diffstat (limited to 'resources/css')
-rw-r--r-- | resources/css/battle.css | 59 | ||||
-rw-r--r-- | resources/css/menu.css | 18 |
2 files changed, 57 insertions, 20 deletions
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; diff --git a/resources/css/menu.css b/resources/css/menu.css index eee0b5f..84c6c77 100644 --- a/resources/css/menu.css +++ b/resources/css/menu.css @@ -96,9 +96,25 @@ #status { color: #fff; background-color: #000; - padding: 0.25rem; + padding: 0.5rem; + display: flex; justify-content: space-between; + align-items: center; + + font-size: 1.25rem; +} + +#status > span { + display: flex; + align-items: center; +} +#status > span > span { + margin-left: 0.5rem; +} + +#status .menu-button:hover { + background-color: rgba(255, 255, 255, 0.5); } |