diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css index c9555f6b..001c8736 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css @@ -1,28 +1,3 @@ -#activities-container { - margin: 20px; - background-color: var(--ov-panel-background); - border-radius: var(--ov-panel-radius); - max-height: calc(100% - 40px); - min-height: calc(100% - 40px); -} - -.header-container { - padding: 10px; - display: flex; -} - -.header-container h3 { - margin-left: 5px; - margin-top: auto; - margin-bottom: auto; - font-weight: bold; -} - -.header-container button { - margin-left: auto; - border-radius: var(--ov-buttons-radius); -} - .activities-body-container { display: block !important; overflow-y: auto; @@ -40,7 +15,6 @@ margin: auto; } - .activity-subtitle { font-style: italic; font-size: 11px !important; @@ -49,7 +23,7 @@ font-weight: bold !important; } -.activity-action-buttons{ +.activity-action-buttons { align-self: flex-start; margin-top: 15px; font-weight: 600; @@ -63,7 +37,8 @@ padding: 0px 10px !important; } -::ng-deep .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content { +::ng-deep .mat-list-base .mat-list-item .mat-list-item-content, +.mat-list-base .mat-list-option .mat-list-item-content { padding: 0px !important; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html index 9048e1aa..bbd32233 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html @@ -1,7 +1,7 @@ -
-
-

Activities

-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts index 7a699095..89ac354c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts @@ -5,7 +5,7 @@ import { PanelService } from '../../../services/panel/panel.service'; @Component({ selector: 'ov-activities-panel', templateUrl: './activities-panel.component.html', - styleUrls: ['./activities-panel.component.css'] + styleUrls: ['../panel.component.css','./activities-panel.component.css'] }) export class ActivitiesPanelComponent implements OnInit { constructor(private panelService: PanelService) {} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css index 24d720a2..2fd52769 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css @@ -1,28 +1,3 @@ -#background-effects-container { - margin: 20px; - background-color: var(--ov-panel-background); - border-radius: var(--ov-panel-radius); - max-height: calc(100% - 40px); - min-height: calc(100% - 40px); -} - -.header-container { - padding: 10px; - display: flex; -} - -.header-container h3 { - margin-left: 5px; - margin-top: auto; - margin-bottom: auto; - font-weight: bold; -} - -.header-container button { - margin-left: auto; - border-radius: var(--ov-buttons-radius); -} - .effects-container { display: block !important; overflow-y: auto; @@ -70,21 +45,3 @@ ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper { width: 10px !important; } - -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-thumb { - background: #a7a7a7; - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: #7c7c7c; -} - -::-webkit-scrollbar-track { - background: var(--ov-light-color); - border-radius: 4px; -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html index faa30d5a..88a7b30b 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html @@ -1,7 +1,7 @@ -
-
-

Background effects

-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts index 13004682..dc5fd5c4 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts @@ -8,7 +8,7 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v @Component({ selector: 'ov-background-effects-panel', templateUrl: './background-effects-panel.component.html', - styleUrls: ['./background-effects-panel.component.css'], + styleUrls: ['../panel.component.css','./background-effects-panel.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class BackgroundEffectsPanelComponent implements OnInit { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css index b192ae0a..db507860 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css @@ -1,28 +1,4 @@ -#chat-container { - margin: 20px; - background-color: var(--ov-panel-background); - border-radius: var(--ov-panel-radius); - max-height: calc(100% - 40px); - min-height: calc(100% - 40px); -} - -.header-container { - padding: 10px; - display: flex; -} - -.header-container h3 { - margin-left: 5px; - margin-top: auto; - margin-bottom: auto; -} - -.header-container button { - margin-left: auto; - border-radius: var(--ov-buttons-radius); -} - -.text-container{ +.text-container { /* padding: 5px; */ background-color: var(--ov-light-color); color: var(--ov-panel-text-color); @@ -33,7 +9,6 @@ .text-info { margin: 3px; - } .messages-container { @@ -65,35 +40,34 @@ resize: none; outline: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif; } - - .message { +.message { position: relative; padding: 3px 0; - } +} - .msg-detail { +.msg-detail { width: 95%; display: inline-block; - } +} - .msg-detail p { +.msg-detail p { margin: 0; font-size: 14px; - } +} - .nickname-container p { +.nickname-container p { font-size: 13px; font-weight: bold; color: var(--ov-panel-text-color); - } +} - .msg-content { +.msg-content { position: relative; border-radius: var(--ov-panel-radius); padding: 8px; @@ -102,12 +76,11 @@ max-width: 95%; font-size: 13px; word-break: break-all; - } +} - #send-btn { +#send-btn { border-radius: var(--ov-buttons-radius); - } - +} /* Start message from other user */ @@ -119,30 +92,18 @@ float: left; } +/* End message from other user */ - /* End message from other user */ +/* Start my messages */ - /* Start my messages */ - - .message.right .msg-detail .nickname-container { +.message.right .msg-detail .nickname-container { text-align: right; - } +} - .message.right .msg-detail .msg-content { +.message.right .msg-detail .msg-content { float: right; - } +} - - /* End my messages */ - - ::-webkit-scrollbar { - width: 8px; - } - - ::-webkit-scrollbar-thumb { - background-color: #6b6b6b; - } - - ::ng-deep a:-webkit-any-link { +::ng-deep a:-webkit-any-link { color: #1a73e8; -} \ No newline at end of file +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html index b7414b3e..d819a6e6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html @@ -1,7 +1,7 @@ -
-
-

Chat

-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts index 60bdbc88..d6e89158 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts @@ -41,7 +41,7 @@ import { PanelService } from '../../../services/panel/panel.service'; @Component({ selector: 'ov-chat-panel', templateUrl: './chat-panel.component.html', - styleUrls: ['./chat-panel.component.css'], + styleUrls: ['../panel.component.css','./chat-panel.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ChatPanelComponent implements OnInit, AfterViewInit { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css index e69de29b..c1abda02 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css @@ -0,0 +1,41 @@ +.panel-container { + margin: 20px; + background-color: var(--ov-panel-background); + border-radius: var(--ov-panel-radius); + max-height: calc(100% - 40px); + min-height: calc(100% - 40px); +} + +.panel-header-container { + padding: 10px; + display: flex; +} + +.panel-title { + margin-left: 5px; + margin-top: auto; + margin-bottom: auto; +} + +.panel-close-button { + margin-left: auto; + border-radius: var(--ov-buttons-radius); +} + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-thumb { + background: #a7a7a7; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #7c7c7c; +} + +::-webkit-scrollbar-track { + background: var(--ov-light-color); + border-radius: 4px; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css index 799fd34c..2da8dc56 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css @@ -1,29 +1,6 @@ -.participants-container { - margin: 20px; - background-color: var(--ov-panel-background); - border-radius: var(--ov-panel-radius); - max-height: calc(100% - 40px); - min-height: calc(100% - 40px); -} - -.header-container { - padding: 10px; - display: flex; -} - -.header-container h3 { - margin-left: 5px; - margin-top: auto; - margin-bottom: auto; -} - -.header-container button { - margin-left: auto; - border-radius: var(--ov-buttons-radius); -} - -.local-participant-container, .remote-participants-container { - margin: 5px 10px; +.local-participant-container, +.remote-participants-container { + margin: 5px 10px; } .scrollable { @@ -32,7 +9,7 @@ overflow: auto; } -.message-container{ +.message-container { padding: 5px; background-color: var(--ov-light-color); color: var(--ov-panel-text-color); @@ -41,7 +18,6 @@ font-size: 12px; } -.message-container p{ +.message-container p { margin: 0; - } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html index 23d22f03..5f5d41ee 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html @@ -1,7 +1,7 @@ -
-
-

Participants

-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts index 4dde4a85..5e593a79 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts @@ -41,7 +41,7 @@ import { Subscription } from 'rxjs'; @Component({ selector: 'ov-participants-panel', templateUrl: './participants-panel.component.html', - styleUrls: ['./participants-panel.component.css'], + styleUrls: ['../../panel.component.css','./participants-panel.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {