diff --git a/src/components/KeyblockSequence.vue b/src/components/KeyblockSequence.vue index 734b01264..22a7734d0 100644 --- a/src/components/KeyblockSequence.vue +++ b/src/components/KeyblockSequence.vue @@ -42,11 +42,15 @@ defineProps({ &__sequence { display: flex; - height: 40px; + height: calc(40px + 16px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; + /*animation overflow workaround*/ + margin: -8px; + padding: 8px; + &::-webkit-scrollbar { display: none; } @@ -56,6 +60,7 @@ defineProps({ display: flex; align-items: center; justify-content: center; + position: relative; min-width: 40px; height: 100%; @@ -69,6 +74,12 @@ defineProps({ font-size: 14px; cursor: pointer; + &:first-child { + box-shadow: 0 0 0 0 var(--color-midnight-35); + transform: scale(1); + animation: pulse 2s infinite; + } + @media (--desktop) { margin-right: var(--space-4); } @@ -80,6 +91,12 @@ defineProps({ &--active { background: var(--color-fire); + + &:first-child { + box-shadow: 0 0 0 0 var(--color-fire); + transform: scale(1); + animation: pulse-active 2s infinite; + } } } @@ -87,7 +104,7 @@ defineProps({ width: 80px; height: 100%; position: absolute; - right: 0; + right: -8px; top: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%); diff --git a/src/styles/generic/_animations.css b/src/styles/generic/_animations.css index 3e41af918..8750e22a1 100644 --- a/src/styles/generic/_animations.css +++ b/src/styles/generic/_animations.css @@ -1,3 +1,40 @@ *:not([class^="v-popper"]) { transition: all 0.08s ease; } + +@keyframes pulse { + 0% { + transform: scale(0.95); + /*--color-midnight-35 in rgb*/ + box-shadow: 0 0 0 0 rgba(178, 178, 178, 0.8); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 var(--space-1) rgba(178, 178, 178, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(178, 178, 178, 0); + } +} + + +@keyframes pulse-active { + 0% { + transform: scale(0.95); + /*--color-fire in rgb*/ + box-shadow: 0 0 0 0 rgba(245, 39, 78, 0.4); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 var(--space-1) rgba(245, 39, 78, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(245, 39, 78, 0); + } +} \ No newline at end of file