Apply custom design for acordion component

static/src/app/statistic/war/war-list/war-list.component.css

@@ -1,6 +1,37 @@
+span > a {
+  font-size: 20px !important;
+}
+
+mat-expansion-panel {
+  border: 1px solid #7d7d7d;
+}
+
+mat-panel-title {
+  font-size: 18px;
+  color: #FFFFFF;
+}
+
+mat-expansion-panel-header {
+  height: auto;
+  padding: 30px 15px;
+  background-color: #4e4e4e;
+}
+
+mat-expansion-panel-header.mat-expansion-panel-header:hover {
+  background: #222222 !important;
+}
+
+mat-expansion-panel-header.mat-expansion-panel-header:focus {
+  background-color: #4e4e4e;
+}
+
+.select-list > div:last-child {
+  margin: 20px 0;
+}
+
 .top-list-entry {
   display: flex;
-  margin: 6px 0;
+  margin: 0 0 6px 0;
 }
 
 .top-list-entry > div {
@@ -16,3 +47,15 @@
   color: #4b4b4b;
   padding: 0 3px;
 }
+
+:host /deep/ .mat-expansion-indicator::after {
+  color: rgba(255, 255, 255, 0.64);
+}
+
+.select-list > mat-accordion:first-child .mat-expansion-panel {
+  border-radius: 10px 10px 0 0;
+}
+
+.select-list > mat-accordion:first-child .mat-expansion-panel-header {
+  border-radius: 8px 8px 0 0;
+}

static/src/app/statistic/war/war-list/war-list.component.html

@@ -8,10 +8,10 @@
     </a>
   </div>
 
-  <mat-accordion *ngFor="let campaign of campaigns;">
+  <mat-accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
-    <mat-expansion-panel>
+    <mat-expansion-panel [expanded]="isFirstRow">
-      <mat-expansion-panel-header style="height:auto; padding: 30px 15px;">
+      <mat-expansion-panel-header>
-        <mat-panel-title style="font-size: 20px; font-weight: 700; border-bottom: 1px solid;">
+        <mat-panel-title>
           {{campaign.title}}
         </mat-panel-title>
         <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
@@ -28,15 +28,15 @@
              [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
           <div>
             <span>
-              <a style="font-size: 20px;">Übersicht</a>
+              <a>Übersicht</a>
             </span>
           </div>
         </div>
         <div class="fade-in list-entry"
              [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-          <div style="margin: auto">
+          <div>
-            <span style="margin:auto">
+            <span>
-              <a style="font-size: 20px;">Highscore</a>
+              <a>Highscore</a>
             </span>
           </div>
         </div>
@@ -53,12 +53,12 @@
     </mat-expansion-panel>
   </mat-accordion>
 
-  <div class="fade-in list-entry" style="margin-top: 20px; margin-bottom: 20px;"
+  <div class="fade-in list-entry"
        [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
     <div class="row">
       <div class="col-xs-9">
       <span>
-        <a style="font-size: 22px;">Gesamtübersicht</a>
+        <a>Gesamtübersicht</a>
       </span>
       </div>
     </div>