diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css index c222216b1a24a1a48b04a455312bd85d1562fae9..27c2ac7f8e9948a409248f0ebf0462c900d16a57 100644 --- a/src/components/action-menu/action-menu.css +++ b/src/components/action-menu/action-menu.css @@ -35,7 +35,14 @@ $more-button-size: 2.25rem; border-radius: 100%; width: $main-button-size; height: $main-button-size; + box-shadow: 0 0 0 4px $motion-transparent; z-index: 20; /* TODO reorder layout to prevent z-index need */ + transition: transform, box-shadow 0.5s; +} + +.main-button:hover { + transform: scale(1.1); + box-shadow: 0 0 0 6px $motion-transparent; } .main-icon { diff --git a/src/components/forms/input.css b/src/components/forms/input.css index 8bcff393d3386838b25289da85a67e8f8c4ec274..ee1010dbc029023bcac665656a629f1848ba18e1 100644 --- a/src/components/forms/input.css +++ b/src/components/forms/input.css @@ -31,6 +31,10 @@ min-width: 0; } +.input-form:hover { + border-color: $motion-primary; +} + .input-form:focus { border-color: $motion-primary; box-shadow: 0 0 0 0.25rem $motion-transparent; diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 80e736039b2ccdfd564e5ecb7de3738fad905411..508b83b17c2bc1578002380e9c25a04d00c0b90f 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -87,7 +87,12 @@ z-index: 1; } +.tab:hover { + background-color: $ui-primary; +} + .tab.is-selected { + height: 90%; color: $motion-primary; background-color: $ui-white; z-index: 4; /* Make sure selected is always above */ @@ -95,6 +100,7 @@ .tab img { margin-right: 0.125rem; + width: 1.375rem; filter: grayscale(100%); } diff --git a/src/components/meter/meter.jsx b/src/components/meter/meter.jsx index 8c378037c85ae61553af08141b1b52983289317f..2d16ce681da69f1d1160b41f3b08230d8729b2e9 100644 --- a/src/components/meter/meter.jsx +++ b/src/components/meter/meter.jsx @@ -42,7 +42,7 @@ const Meter = props => { /> ))} <rect - fill="white" + fill="hsla(215, 100%, 95%, 1)" height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)} opacity="0.75" width={width} diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css index 97cc42c38facb4df8d56655c2992397791db8705..14a9661801be768fff0133fdfd518282b9fc945a 100644 --- a/src/components/sprite-selector/sprite-selector.css +++ b/src/components/sprite-selector/sprite-selector.css @@ -69,8 +69,7 @@ } .raised { - background-color: #cce1ff; - border-color: #8cbcff; + background-color: #8cbcff; transition: all 0.25s ease; } diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css index 3fd0342facf266edfc7090cec2d082883f90b757..c3d51208716cf629ecbf2d875800f90133935b65 100644 --- a/src/components/stage-selector/stage-selector.css +++ b/src/components/stage-selector/stage-selector.css @@ -73,6 +73,7 @@ $header-height: calc($stage-menu-height - 2px); width: 100%; user-select: none; border-bottom: 1px solid $ui-black-transparent; + box-shadow: inset 0 0 4px $ui-black-transparent; } .add-button {