diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css index 62b5ffe5f2519d3b6bbfccad7e265ca2b634ac0f..aa4eb536d5f400fe175ecdbf16cbe35d44ad9f67 100644 --- a/src/components/green-flag/green-flag.css +++ b/src/components/green-flag/green-flag.css @@ -8,11 +8,10 @@ user-select: none; user-drag: none; cursor: pointer; - transition: 0.2s ease-out; } .green-flag:hover { - transform: scale(1.2); + background-color: $motion-light-transparent; } .green-flag.is-active { diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css index ebd7fd656b82c23a654db62c000ea9c02cdc4bc0..f58ee6f8d198e01c70a6c2175becc8420e0983d9 100644 --- a/src/components/icon-button/icon-button.css +++ b/src/components/icon-button/icon-button.css @@ -5,16 +5,11 @@ flex-direction: column; align-items: center; cursor: pointer; - transition: 0.2s; font-size: 0.75rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: $motion-primary; } -.container:hover { - transform: scale(1.1); -} - .container + .container { margin-top: 1.25rem; } diff --git a/src/components/stop-all/stop-all.css b/src/components/stop-all/stop-all.css index b2d878582f40f07a30070215c1132ab75bdd77cc..da0bcc7b315c0a92f56f437f4950a77634cfbe48 100644 --- a/src/components/stop-all/stop-all.css +++ b/src/components/stop-all/stop-all.css @@ -1,3 +1,5 @@ +@import "../../css/colors.css"; + .stop-all { width: 2rem; height: 2rem; @@ -5,15 +7,14 @@ border-radius: 0.25rem; user-select: none; cursor: pointer; - transition: 0.2s ease-out; } -.stop-all { - opacity: 0.5; +.stop-all:hover { + background-color: $motion-light-transparent; } -.stop-all:hover { - transform: scale(1.2); +.stop-all { + opacity: 0.5; } .stop-all.is-active { diff --git a/src/css/colors.css b/src/css/colors.css index 185091812e51af86ed3ba3841478fb743f4dd8d6..3f1701d5c58c8b9681bf711e4a991e496202b88e 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -17,7 +17,7 @@ $text-primary-transparent: hsla(225, 15%, 40%, 0.75); $motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */ $motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */ $motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */ -$motion-light-transparent: hsla(215, 100%, 65%, 0.1); /* 10% transparent version of motion-primary */ +$motion-light-transparent: hsla(215, 100%, 65%, 0.15); /* 15% transparent version of motion-primary */ $red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */ $red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */