diff options
| -rw-r--r-- | src/components/CallView/shared/VideoBottomBar.vue | 23 |
1 files changed, 17 insertions, 6 deletions
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue index 237ed71a1..922aabc29 100644 --- a/src/components/CallView/shared/VideoBottomBar.vue +++ b/src/components/CallView/shared/VideoBottomBar.vue @@ -4,7 +4,9 @@ --> <template> - <div class="wrapper" :class="{'wrapper--big': isBig}"> + <div class="wrapper" :class="{'wrapper--big': isBig}" + @mouseover.stop="mouseover = true" + @mouseleave.stop="mouseover = false"> <TransitionWrapper name="fade"> <div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator"> <HandBackLeft :size="18" fill-color="#ffffff" /> @@ -12,9 +14,7 @@ </TransitionWrapper> <div v-if="!isSidebar" - class="bottom-bar" - @mouseover.stop="mouseover = true" - @mouseleave.stop="mouseover = false"> + class="bottom-bar"> <TransitionWrapper name="fade"> <div v-show="showParticipantName" class="participant-name" @@ -298,17 +298,28 @@ export default { position: absolute; bottom: 0; width: 100%; - padding: 0 12px 8px 12px; + padding: 0 12px 4px 12px; z-index: 1; &--big { justify-content: center; + margin: 0 var(--default-clickable-area); // grid collapse button + width: calc(100% - var(--default-clickable-area) * 2); & .bottom-bar { width: unset; + padding: 0 4px; } + & .participant-name { margin-right: 0; } + + &:hover { + .bottom-bar { + background-color: rgba(0, 0, 0, 0.2); + border-radius: var(--border-radius-large); + } + } } } @@ -317,7 +328,7 @@ export default { align-items: center; gap: 8px; width: 100%; - height: 44px; + height: var(--default-clickable-area); & .media-indicators { display: flex; |