ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: Refine stream video controls styling and improve hover effects

master
Carlos Santos 2025-11-21 13:44:39 +01:00
parent 9c89adbdee
commit a0de27a78e
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
View File

@ -47,25 +47,28 @@
.stream-video-controls { .stream-video-controls {
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
backdrop-filter: blur(8px);
width: fit-content; width: fit-content;
height: 50px; height: 44px;
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
display: inline-grid; display: inline-grid;
z-index: 9999; z-index: 9999;
margin: auto; bottom: 12px;
bottom: 0; left: 50%;
right: 0; transform: translateX(-50%);
left: 0; transition: opacity 0.3s ease, transform 0.3s ease;
top: 0; padding: 4px 8px;
// border: 2px solid var(--ov-text-primary-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
button { button {
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
transition: all 0.2s ease;
} }
} }
.stream-video-controls:hover { .stream-video-controls:hover {
opacity: 1; opacity: 1;
transform: translateX(-50%) translateY(-2px);
} }
.status-icons { .status-icons {