neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: update toolbar styles and theme variables for improved UI consistency

Browse Source
This commit is contained in:
Carlos Santos 2025-07-31 17:15:29 +02:00
parent 37375186d4
commit 58ff021333
5 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html
View File

@ -1,4 +1,4 @@
<mat-toolbar color="primary" id="main-toolbar">
<mat-toolbar class="meet-toolbar" id="main-toolbar">
<button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()" id="menu-toggle-btn">
<mat-icon>menu</mat-icon>
</button>

3
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
View File

@ -2,7 +2,8 @@
#dashboard-container,
mat-sidenav-container {
@extend .ov-nav-container;
height: 100%;
background-color: var(--ov-meet-background-color);
}
.page-content {

1
frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss
View File

@ -73,6 +73,7 @@
// Dashboard State Styles
.dashboard-content {
padding: 5px;
.quick-actions {
@include ov-flex-center;
gap: var(--ov-meet-spacing-md);

41
frontend/src/assets/styles/_tokens-themes.scss
View File

@ -38,31 +38,30 @@
// Activated when the [data-theme="dark"] attribute is present on html
[data-theme='dark'] {
// === SURFACE COLORS - DARK THEME ===
--ov-meet-surface-color: #1e1e1e;
--ov-meet-surface-variant: #2d2d2d;
--ov-meet-surface-hover: #383838;
--ov-meet-background-color: #121212;
--ov-meet-background-secondary: #1e1e1e;
--ov-meet-surface-elevated: #2d2d2d;
--ov-meet-surface-container: #242424;
--ov-meet-background-color: #29292e;
--ov-meet-background-secondary: #21212b;
--ov-meet-surface-color: #242429;
--ov-meet-surface-variant: #23232c;
--ov-meet-surface-hover: #3c3c44;
--ov-meet-surface-elevated: #2e2e35;
--ov-meet-surface-container: #262630;
// === TEXT COLORS - DARK THEME ===
--ov-meet-text-primary: #ffffff;
--ov-meet-text-secondary: #b3b3b3;
--ov-meet-text-hint: #757575;
--ov-meet-text-disabled: #5f5f5f;
--ov-meet-text-on-surface: #ffffff;
--ov-meet-text-on-background: #ffffff;
--ov-meet-text-primary: #e0e0e6;
--ov-meet-text-secondary: #a5a5b5;
--ov-meet-text-hint: #7c7c8c;
--ov-meet-text-disabled: #5a5a68;
--ov-meet-text-on-surface: #e4e4ec;
--ov-meet-text-on-background: #e4e4ec;
// === SHADOWS - DARK THEME ===
// Shadows in dark theme are more subtle and can use lighter colors
--ov-meet-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
--ov-meet-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.6);
--ov-meet-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.6);
--ov-meet-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
--ov-meet-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.4), 0 1px 2px rgba(30, 30, 40, 0.6);
--ov-meet-shadow-md: 0 3px 6px rgba(30, 30, 45, 0.5), 0 3px 6px rgba(20, 20, 30, 0.6);
--ov-meet-shadow-lg: 0 8px 16px rgba(20, 20, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.7);
--ov-meet-shadow-hover: 0 4px 12px rgba(50, 50, 70, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
// === BORDERS - DARK THEME ===
--ov-meet-border-color: #3f3f3f;
--ov-meet-border-color-light: #2d2d2d;
--ov-meet-border-color-strong: #5f5f5f;
--ov-meet-border-color: #3a3a48;
--ov-meet-border-color-light: #2b2b36;
--ov-meet-border-color-strong: #5c5c6c;
}

12
frontend/src/assets/styles/_utilities.scss
View File

@ -491,13 +491,9 @@
// === NAVIGATION UTILITIES ===
// For console navigation and sidebar components
.ov-nav-container {
height: 100%;
mat-sidenav-container {
height: 100%;
}
.meet-toolbar {
@include ov-theme-transition;
background-color: var(--ov-meet-surface-color);
}
.ov-nav-toolbar {
@ -638,6 +634,7 @@
// Toolbar Responsive Patterns
.ov-data-toolbar {
background-color: var(--ov-meet-background-color) !important;
@include ov-tablet-down {
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
gap: var(--ov-meet-spacing-sm);
@ -706,6 +703,7 @@
}
.ov-data-table {
background-color: rgba(var(--ov-meet-surface-color), 0.8);
@include ov-tablet-down {
.mat-mdc-header-cell,
.mat-mdc-cell {