From 07dd14baa1dbe71d6f81eca16c2762c38470eef8 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Tue, 10 May 2022 05:33:29 -0700 Subject: web: give keypad list keys a max height Bonus CSS shenanigans to create key gaps that behave. --- web/static/style.css | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/web/static/style.css b/web/static/style.css index 0ebec5c..da03f7d 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -194,14 +194,42 @@ body { display: contents; } -#controls #keypad-list .key { +#controls #keypad-list.visible { grid-column: 1 / -1; + overflow: scroll; + + display: flex; + flex-direction: column; +} + +#controls #keypad-list .key { + height: 4em; + min-height: 2em; + margin-top: 2px; padding-left: 0.4rem; justify-content: left; } +#controls #keypad-list .key:first-child { + margin-top: 0; +} + +#controls #keypad-list:after { + flex-grow: 1; + + content: ''; + background-color: #1a1a1a; + + /* + * inner 2px top border. gives us a gap that disappears when the last + * key reaches the bottom of the container and this section is not + * displayed. + */ + box-shadow: inset 0 4px 0 -2px #111; +} + #controls #keypad-dartboard #dartboard-container { grid-column: 1 / -1; -- cgit v1.2.3-70-g09d2