fix dark mode css

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -6,7 +6,7 @@
     <app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
-  <div class="actions">
+  <div *appRole="['user', 'presenter', 'leader']" class="actions actions-search">
     <button
       mat-icon-button
       class="theme-toggle"
@@ -15,8 +15,6 @@
       (click)="themeService.toggleTheme()">
       <fa-icon [icon]="themeService.isDarkMode() ? faLightMode : faDarkMode"></fa-icon>
     </button>
-  </div>
-  <div *appRole="['user', 'presenter', 'leader']" class="actions actions-search">
     <app-filter></app-filter>
   </div>
 </nav>

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -36,6 +36,7 @@ nav {
 }
 
 .actions-search {
+  gap: var(--gap-s);
   padding-right: 20px;
 }
 

src/app/widget-modules/components/card/card.component.less

@@ -36,7 +36,7 @@
     top: 0;
     bottom: 0;
     width: unset;
-    z-index: 10;
+    z-index: 30;
   }
 }
 

src/app/widget-modules/components/sidebar/page-frame.component.less

@@ -31,7 +31,7 @@
 }
 
 :host.collapsed .sidebar-toggle {
-  --icon-button-color: var(--surface);
+  --icon-button-color: var(--surface-persist);
   --icon-button-hover-color: var(--surface-subtle);
 }
 
@@ -131,7 +131,7 @@ aside.collapsed {
 }
 
 .title {
-  color: var(--surface);
+  color: var(--surface-persist);
   font-size: 30px;
   text-transform: uppercase;
   text-align: right;