[player] Fix display of selected marking buttons on iPad

The former outline was always displayed square on the iPad

projects/common/components/marking-bar/marking-button.component.ts

@@ -7,17 +7,23 @@ import {
   template: `
     <button type="button"
             class="marking-button"
-            [class.selected]=selected
+            [style.border-color]="selected ? 'black' : color"
             mat-mini-fab
             [style.background-color]="color"
             (mousedown)="$event.stopPropagation();"
             (click)="selected = !selected; selectedChanged.emit({ selected, mode, color })">
-      <mat-icon *ngIf="mode === 'mark'">border_color</mat-icon>
-      <mat-icon *ngIf="mode === 'delete'" svgIcon="rubber-black"></mat-icon>
+      <mat-icon *ngIf="mode === 'mark'"
+                class="marking-icon">border_color
+      </mat-icon>
+      <mat-icon *ngIf="mode === 'delete'"
+                class="marking-icon"
+                svgIcon="rubber-black">
+      </mat-icon>
     </button>`,
   styles: [
-    '.marking-button {color: #333; margin-left: 5px; margin-top: 2px}',
-    '.selected {outline: 2px solid black}']
+    '.marking-button {color: #333; margin-left: 5px; margin-top: 2px; border: 2px solid;}',
+    '.marking-icon {margin-top: -4px}'
+  ]
 })
 export class MarkingButtonComponent {
   @Input() selected!: boolean;