diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
index d3607ca625a..a679155c323 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
@@ -138,3 +138,9 @@
}
}
}
+
+::ng-deep {
+ .browser-firefox-windows {
+ --ds-dark-scrollbar-width: 20px;
+ }
+}
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 8fcbd593edf..b5b753cdb9d 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -2,7 +2,7 @@
{{ 'root.skip-to-content' | translate }}
-
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index 5b504b878d2..e93a7b5c527 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -1,9 +1,11 @@
import {
AsyncPipe,
+ NgClass,
NgIf,
} from '@angular/common';
import {
Component,
+ Inject,
Input,
OnInit,
} from '@angular/core';
@@ -13,6 +15,7 @@ import {
} from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import {
+ BehaviorSubject,
combineLatest as combineLatestObservable,
Observable,
of,
@@ -30,6 +33,10 @@ import { environment } from '../../environments/environment';
import { ThemedAdminSidebarComponent } from '../admin/admin-sidebar/themed-admin-sidebar.component';
import { getPageInternalServerErrorRoute } from '../app-routing-paths';
import { ThemedBreadcrumbsComponent } from '../breadcrumbs/themed-breadcrumbs.component';
+import {
+ NativeWindowRef,
+ NativeWindowService,
+} from '../core/services/window.service';
import { ThemedFooterComponent } from '../footer/themed-footer.component';
import { ThemedHeaderNavbarWrapperComponent } from '../header-nav-wrapper/themed-header-navbar-wrapper.component';
import { slideSidebarPadding } from '../shared/animations/slide';
@@ -47,7 +54,20 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne
styleUrls: ['./root.component.scss'],
animations: [slideSidebarPadding],
standalone: true,
- imports: [TranslateModule, ThemedAdminSidebarComponent, SystemWideAlertBannerComponent, ThemedHeaderNavbarWrapperComponent, ThemedBreadcrumbsComponent, NgIf, ThemedLoadingComponent, RouterOutlet, ThemedFooterComponent, NotificationsBoardComponent, AsyncPipe],
+ imports: [
+ TranslateModule,
+ ThemedAdminSidebarComponent,
+ SystemWideAlertBannerComponent,
+ ThemedHeaderNavbarWrapperComponent,
+ ThemedBreadcrumbsComponent,
+ NgIf,
+ NgClass,
+ ThemedLoadingComponent,
+ RouterOutlet,
+ ThemedFooterComponent,
+ NotificationsBoardComponent,
+ AsyncPipe,
+ ],
})
export class RootComponent implements OnInit {
theme: Observable = of({} as any);
@@ -58,6 +78,8 @@ export class RootComponent implements OnInit {
notificationOptions: INotificationBoardOptions;
models: any;
+ browserOsClasses = new BehaviorSubject([]);
+
/**
* Whether or not to show a full screen loader
*/
@@ -73,11 +95,23 @@ export class RootComponent implements OnInit {
private cssService: CSSVariableService,
private menuService: MenuService,
private windowService: HostWindowService,
+ @Inject(NativeWindowService) private _window: NativeWindowRef,
) {
this.notificationOptions = environment.notifications;
}
ngOnInit() {
+ const browserName = this.getBrowserName();
+ if (browserName) {
+ const browserOsClasses = new Array();
+ browserOsClasses.push(`browser-${browserName}`);
+ const osName = this.getOSName();
+ if (osName) {
+ browserOsClasses.push(`browser-${browserName}-${osName}`);
+ }
+ this.browserOsClasses.next(browserOsClasses);
+ }
+
this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);
this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width').pipe(
@@ -108,4 +142,23 @@ export class RootComponent implements OnInit {
mainContent.focus();
}
}
+
+ getBrowserName(): string {
+ const userAgent = this._window.nativeWindow.navigator.userAgent;
+ if (/Firefox/.test(userAgent)) {
+ return 'firefox';
+ }
+ if (/Safari/.test(userAgent)) {
+ return 'safari';
+ }
+ return undefined;
+ }
+
+ getOSName(): string {
+ const userAgent = this._window.nativeWindow.navigator.userAgent;
+ if (/Windows/.test(userAgent)) {
+ return 'windows';
+ }
+ return undefined;
+ }
}
diff --git a/src/themes/custom/app/root/root.component.ts b/src/themes/custom/app/root/root.component.ts
index 0ba8c4e1772..bac434eeb3b 100644
--- a/src/themes/custom/app/root/root.component.ts
+++ b/src/themes/custom/app/root/root.component.ts
@@ -1,5 +1,6 @@
import {
AsyncPipe,
+ NgClass,
NgIf,
} from '@angular/common';
import { Component } from '@angular/core';
@@ -24,7 +25,20 @@ import { SystemWideAlertBannerComponent } from '../../../../app/system-wide-aler
templateUrl: '../../../../app/root/root.component.html',
animations: [slideSidebarPadding],
standalone: true,
- imports: [TranslateModule, ThemedAdminSidebarComponent, SystemWideAlertBannerComponent, ThemedHeaderNavbarWrapperComponent, ThemedBreadcrumbsComponent, NgIf, ThemedLoadingComponent, RouterOutlet, ThemedFooterComponent, NotificationsBoardComponent, AsyncPipe],
+ imports: [
+ TranslateModule,
+ ThemedAdminSidebarComponent,
+ SystemWideAlertBannerComponent,
+ ThemedHeaderNavbarWrapperComponent,
+ ThemedBreadcrumbsComponent,
+ NgIf,
+ NgClass,
+ ThemedLoadingComponent,
+ RouterOutlet,
+ ThemedFooterComponent,
+ NotificationsBoardComponent,
+ AsyncPipe,
+ ],
})
export class RootComponent extends BaseComponent {