From fc68e8a413ce3732e79431ecedd892225b31becd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Fri, 22 Apr 2022 10:33:19 +0200 Subject: [PATCH] Web: action button styling Making the button respond to hovering makes it slightly easier to see which button is enabled and which is disabled. --- web/app/src/App.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/web/app/src/App.vue b/web/app/src/App.vue index 168c83e5..8e7a48c3 100644 --- a/web/app/src/App.vue +++ b/web/app/src/App.vue @@ -247,8 +247,8 @@ section.action-bar button.action { touch-action: manipulation; margin-right: 0.3rem; - transition-duration: 150ms; - transition-property: color, background-color, border-color, box-shadow + transition-duration: 300ms; + transition-property: color, background-color, border-color, box-shadow; } section.action-bar button.action[disabled] { @@ -257,6 +257,11 @@ section.action-bar button.action[disabled] { border: thin solid #858585; } +section.action-bar button.action:hover:not([disabled]) { + transition: all 100ms; + box-shadow: inset 0 0 0.3rem rgba(255, 255, 255, 0.8); +} + section.action-bar button.action:focus { /* Make sure the outline is clearly visible inside the button. */ outline-offset: -0.5em;