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

ov-components: refine participant name container styles and adjust flex container layout

master
Carlos Santos 2025-12-22 19:14:07 +01:00
parent 961867941a
commit 13cfff1aad
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,19 @@
.participant-name-container { .participant-name-container {
background-color: var(--ov-secondary-action-color); background-color: var(--ov-secondary-action-color);
padding: 5px; padding: 3px 6px;
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
font-weight: 400; font-weight: 400;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
font-size: 12px;
line-height: 1.2;
width: fit-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.participant-name { .participant-name {
padding: 0px; padding: 2px;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
@ -33,10 +39,21 @@
.flex-container { .flex-container {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap; gap: 2px;
flex-wrap: nowrap;
button { button {
margin: auto; margin: 0;
min-width: 32px;
width: 32px;
height: 32px;
padding: 4px;
mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
} }
} }
@ -49,16 +66,16 @@
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
width: fit-content; width: fit-content;
height: 44px; height: auto;
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
display: inline-grid; display: inline-grid;
z-index: 9999; z-index: 9999;
bottom: 12px; bottom: 8px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease;
padding: 4px 8px; padding: 2px 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 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);