diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html index 0ef95f53b..f4bd08b7a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html @@ -38,7 +38,7 @@ > @if (!_track.participant.hasEncryptionError) { -
+
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss index b47a120b9..26ea135f6 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss @@ -90,21 +90,35 @@ .status-icons { position: absolute; - bottom: 0; + bottom: 8px; z-index: 999; - left: 0; - line-height: 0; + left: 8px; + display: flex; + gap: 6px; + align-items: center; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + padding: 4px 8px; + border-radius: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); #status-mic, #status-muted-forcibly, #status-pinned { - font-size: 24px; - margin: 5px; + font-size: 20px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; } #status-mic, #status-muted-forcibly { color: var(--ov-error-color); } + #status-pinned { + color: var(--ov-accent-action-color); + } } /* Contains the video element, used to fix video letter-boxing */