Skip to content

Commit

Permalink
ov-components: Updated css styles for improving custom color support
Browse files Browse the repository at this point in the history
  • Loading branch information
CSantosM committed Nov 5, 2024
1 parent ada5984 commit 02e3fb0
Show file tree
Hide file tree
Showing 24 changed files with 153 additions and 91 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,21 @@ import { MatDialogRef } from '@angular/material/dialog';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
#delete-recording-confirm-btn {
background-color: var(--ov-error-color);
color: var(--ov-text-primary-color);
background-color: var(--ov-error-color) !important;
color: var(--ov-secondary-action-color);
}
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,18 @@ import { DialogData } from '../../models/dialog.model';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
}
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ import { RecordingDialogData } from '../../models/dialog.model';
`,
styles: [
`
::ng-deep .mat-mdc-dialog-content {
color: var(--ov-text-surface-color) !important;
}
::ng-deep .mat-mdc-dialog-surface {
background-color: var(--ov-surface-color);
border-radius: var(--ov-surface-radius);
Expand All @@ -29,7 +33,7 @@ import { RecordingDialogData } from '../../models/dialog.model';
.mat-mdc-button,
.mat-mdc-button:not(:disabled),
::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color) !important;
border-radius: var(--ov-surface-radius);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$ov-activity-status-color: #afafaf;

:host {
.activities-body-container {
display: block !important;
Expand All @@ -6,9 +8,18 @@
padding: 10px;
}

.activity-status {
color: var(--ov-text-surface-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
background-color: $ov-activity-status-color;
}

.activity-icon {
display: inherit;
background-color: var(--ov-secondary-action-color);
background-color: $ov-activity-status-color;;
border-radius: var(--ov-surface-radius);
margin: 10px 0px !important;
padding: 10px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.STREAMING.TITLE' | transla
<div class="activity-action-buttons" matListItemMeta>
<div
id="broadcasting-status"
class="activity-status"
[ngClass]="{
started: broadcastingStatus === broadcastingStatusEnum.STARTED,
stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
$ov-broadcasting-color: #5903ca;

#broadcasting-status {
color: var(--ov-text-surface-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
}

.time-container {
padding: 2px;
}
Expand All @@ -19,7 +11,7 @@ $ov-broadcasting-color: #5903ca;
}

#broadcasting-icon {
color: var(--ov-primary-action-color) !important;
color: $ov-broadcasting-color !important;
}

.broadcasting-duration {
Expand Down Expand Up @@ -128,9 +120,9 @@ mat-expansion-panel {
padding: 10px;
margin: 10px;
border-radius: var(--ov-surface-radius);
order: 3;
justify-content: space-evenly;
align-items: center;
order: 3;
justify-content: space-evenly;
align-items: center;
}

.input-container input {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.RECORDING.TITLE' | transla
<div class="activity-action-buttons" matListItemMeta>
<div
id="recording-status"
class="activity-status"
[ngClass]="{
started: recordingStatus === recStatusEnum.STARTED,
stopped: recordingStatus === recStatusEnum.STOPPED,
Expand All @@ -48,8 +49,8 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.RECORDING.TITLE' | transla
/>
</div>

<h2 *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
<span *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>
<h2 *ngIf="recordingList.length === 0" class="recording-title">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
<span *ngIf="recordingList.length === 0" class="recording-subtitle">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>

<!-- Recording button -->
<div class="item recording-action-buttons">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
:host {
#recording-status {
color: var(--ov-text-primary-color);
display: inline;
padding: 3px;
font-size: 11px;
border-radius: var(--ov-surface-radius);
$ov-activity-status-color: #afafaf;
.recording-title,
.recording-subtitle {
color: var(--ov-text-surface-color);
}

.recording-title {
Expand All @@ -27,10 +25,11 @@
}

.recording-duration {
background-color: var(--ov-secondary-action-color);
background-color: $ov-activity-status-color;
padding: 4px 8px;
border-radius: var(--ov-surface-radius);
font-weight: 500;
color: var(--ov-text-surface-color);
}

.recording-duration mat-icon {
Expand All @@ -41,22 +40,22 @@

.started {
background-color: #3b7430 !important;
color: var(--ov-text-primary-color);
color: #ffffff !important;
}

.activity-icon.started,
.failed {
background-color: var(--ov-error-color) !important;
color: var(--ov-text-primary-color);
// color: var(--ov-secondary-action-color);
}
.stopped {
background-color: var(--ov-secondary-action-color);
// background-color: var(--ov-secondary-action-color);
color: var(--ov-text-surface-color) !important;
}

.starting {
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-surface-color) !important;
color: #000000 !important;
}

.panel-body-container {
Expand Down Expand Up @@ -100,17 +99,13 @@
#start-recording-btn {
width: 100%;
background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
color: var(--ov-secondary-action-color);
}

#stop-recording-btn {
width: 100%;
background-color: var(--ov-error-color);
color: var(--ov-text-primary-color);
}

.delete-recording-btn {
color: var(--ov-error-color);
color: var(--ov-secondary-action-color);
}

#reset-recording-status-btn {
Expand All @@ -133,13 +128,21 @@
width: 40px !important;
height: 40px !important;
padding: 5px !important;
color: var(--ov-text-surface-color);
}
#play-recording-btn > .mat-icon,
#download-recording-btn > .mat-icon,
#delete-recording-btn > .mat-icon {
height: 20px !important;
}

#delete-recording-btn {
color: var(--ov-error-color);
}
#download-recording-btn {
color: var(--ov-accent-action-color);
}

mat-expansion-panel {
margin: 0px 0px 5px 0px;
}
Expand All @@ -156,6 +159,18 @@
height: 0px !important;
}

::ng-deep .mdc-list-item__secondary-text,
::ng-deep .mdc-list-item__primary-text {
color: var(--ov-text-surface-color);
}

// ::ng-deep .mat-mdc-list-item:hover {
// color: #000000 !important;
// }
::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
color: var(--ov-text-surface-color) !important;
}

.blink {
animation: blinker 1.5s linear infinite !important;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h3 class="panel-title">{{ 'PANEL.BACKGROUND.TITLE' | translate }}</h3>

<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
<div>
<h4>{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
<h4 class="background-title">{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
<div>
<button
*ngFor="let effect of noEffectAndBlurredBackground"
Expand All @@ -29,7 +29,7 @@ <h4>{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
</div>
<hr />
<div>
<h4>{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
<h4 class="background-title">{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>

<div class="grid">
<div
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
.background-title {
color: var(--ov-text-surface-color);
}
.effects-container {
display: block !important;
overflow-y: auto;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $ov-selection-color: #d4d6d7;

.text-info {
margin: auto;
color: var(--ov-text-surface-color);
}

.vertical-align {
Expand Down Expand Up @@ -36,6 +37,7 @@ $ov-selection-color: #d4d6d7;
order: 3;
justify-content: space-evenly;
align-items: none;

}

.input-container textarea {
Expand All @@ -56,6 +58,7 @@ $ov-selection-color: #d4d6d7;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
color: var(--ov-text-surface-color);
}

.message {
Expand All @@ -76,7 +79,7 @@ $ov-selection-color: #d4d6d7;
.participant-name-container p {
font-size: 13px;
font-style: italic;
color: var(--ov-primary-action-color);
color: var(--ov-text-surface-color);
padding: 5px;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
align-items: center;
}

.panel-title,
.panel-close-button {
color: var(--ov-text-surface-color);
}

.panel-title {
margin-left: 5px;
margin-top: auto;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
border-radius: var(--ov-surface-radius);
margin: auto !important;
padding: 10px;
color: var(--ov-text-surface-color);
color: #000000;
}

.participant-subtitle {
font-style: italic;
font-size: 11px !important;
margin: 0;
color: var(--ov-text-surface-color);
}
.participant-name {
font-weight: bold !important;
Expand All @@ -34,6 +35,13 @@
padding-bottom: 10px !important;
}

::ng-deep .mat-mdc-list-item:hover {
color: #000000 !important;
}
::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
color: var(--ov-text-surface-color) !important;
}

mat-list {
padding: 3px;
}
Expand All @@ -50,6 +58,7 @@

#mute-btn {
border-radius: var(--ov-buttons-radius);
color: var(--ov-text-surface-color);
}

.warn-btn {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>

<div class="item-content">
<div *ngIf="selectedOption === settingsOptions.GENERAL">
<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
<mat-label class="input-label">{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
<ov-participant-name-input></ov-participant-name-input>
<mat-list>
<mat-list-item>
<mat-list-item class="lang-selector">
<mat-icon matListItemIcon>translate</mat-icon>
<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
<ov-lang-selector matListItemMeta (onLangChanged)="onLangChanged.emit($event)"></ov-lang-selector>
Expand Down
Loading

0 comments on commit 02e3fb0

Please sign in to comment.