[player] Improve keyboard styles

projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.html

 <button class="key"
+        [class.control]="key !== 'Space' && key.length > 1"
         mat-raised-button
         (click)="keyClicked.emit(key)">
-  <ng-container *ngIf="key.length === 1">
+  <div *ngIf="key.length === 1"
+       class="character">
       {{key}}
-      <span *ngIf="alternativeKey !== null" class="alternativeKey">{{alternativeKey}}</span>
-  </ng-container>
-  <mat-icon *ngIf="key === 'Return'" class="center-icon">keyboard_return</mat-icon>
-  <mat-icon *ngIf="key === 'Backspace'" class="center-icon">keyboard_backspace</mat-icon>
-  <mat-icon *ngIf="key === 'Shift'" class="center-icon">keyboard_arrow_up</mat-icon>
-  <mat-icon *ngIf="key === 'ShiftUp'" class="center-icon">keyboard_capslock</mat-icon>
-  <mat-icon *ngIf="key === 'Space'" class="center-icon">space_bar</mat-icon>
+      <span *ngIf="alternativeKey !== null" class="alternative-key">{{alternativeKey}}</span>
+  </div>
+  <span>
+    <mat-icon *ngIf="key === 'Return'" class="center-icon">keyboard_return</mat-icon>
+    <mat-icon *ngIf="key === 'Backspace'" class="center-icon">keyboard_backspace</mat-icon>
+    <mat-icon *ngIf="key === 'Shift'" class="center-icon">keyboard_arrow_up</mat-icon>
+    <mat-icon *ngIf="key === 'ShiftUp'" class="center-icon">keyboard_capslock</mat-icon>
+    <mat-icon *ngIf="key === 'Space'" class="center-icon">space_bar</mat-icon>
+  </span>
 </button>

projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.scss

-.alternativeKey {
+.alternative-key {
   color: grey;
   position: absolute;
-  top: -5px;
-  font-size: 1.4vw;
-  padding-left: 10px;
+  top: -10px;
+  font-size: 1.3vw;
+  padding-left: 12px;
+}
+
+.key.control {
+  background-color: #eee;
+}
+
+.character {
+  width: 2vw;
 }
 
 .key {
@@ -13,7 +21,9 @@
   height: 100%;
   min-width: unset;
   .center-icon {
-    margin-left: 2px;
-    margin-right: 2px;
+    height: unset;
+    width: unset;
+    margin: 0;
+    font-size: inherit;
   }
 }

projects/player/modules/key-input/components/keyboard/keyboard.component.html

 <div class="keyboard-container"
      (mousedown)="$event.preventDefault(); $event.stopPropagation()">
   <div *ngIf="addInputAssistanceToKeyboard"
-       class="specialCharacters fx-space-between-center-wrap">
+       class="additional-characters fx-space-between-center-wrap">
     <aspect-keyboard-key *ngFor="let key of additionalRow; let i = index"
-                  class="key"
+                  class="key additional-character"
                   [key]="key"
                   [alternativeKey]="null"
                   (keyClicked)="evaluateClickedKeyValue($event)">

projects/player/modules/key-input/components/keyboard/keyboard.component.scss

 .character-rows {
   background-color: lightgray;
-  padding: 0 50px;
+  padding: 0 4px;
   display: grid;
+  gap: 4px;
 }
 
-.specialCharacters {
-  margin-left: 10%;
-  margin-right: 10%;
-  background-color: grey;
+.additional-character {
+  flex: 1 1 0;
+}
+
+.additional-characters {
+  background-color: lightgray;
+  gap: 4px;
+  padding: 4px 4px 0 4px;
 }
 
 .fx-space-between-center-wrap {
@@ -20,7 +25,6 @@
 }
 
 .key {
-  margin: 4px;
   min-height: 50px;
 }
 
@@ -28,8 +32,3 @@
   position: relative;
   z-index: 10000;
 }
-
-::ng-deep .keyboard-container .iconButton mat-icon {
-  font-size: 2vw;
-  width: unset;
-}

projects/player/modules/key-input/configs/key-layout.ts

@@ -124,14 +124,14 @@ export class KeyLayout {
             ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'ß', 'Backspace'],
             ['q', 'w', 'e', 'r', 't', 'z', 'u', 'i', 'o', 'p', 'ü', 'Return'],
             ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ö', 'ä'],
-            ['Shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '-'],
+            ['Shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '-', 'Shift'],
             ['Space']
           ],
           shift: [
             ['!', '"', '§', '$', '%', '&', '/', '(', ')', '=', '?', 'Backspace'],
             ['Q', 'W', 'E', 'R', 'T', 'Z', 'U', 'I', 'O', 'P', 'Ü', 'Return'],
             ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Ö', 'Ä'],
-            ['ShiftUp', 'Y', 'X', 'C', 'V', 'B', 'N', 'M', ';', ':', '_'],
+            ['ShiftUp', 'Y', 'X', 'C', 'V', 'B', 'N', 'M', ';', ':', '_', 'ShiftUp'],
             ['Space']
           ],
           additional: [[]]