Migrate Remote Play popup to Navigation dialog

src/assets/css/navigation-dialog.styl

@@ -1,6 +1,11 @@
 .bx-navigation-dialog {
     position: absolute;
     z-index: var(--bx-navigation-dialog-z-index);
+    font-family: var(--bx-title-font);
+
+    *:focus {
+        outline: none !important;
+    }
 }
 
 .bx-navigation-dialog-overlay {

src/assets/css/remote-play.styl

@@ -1,36 +1,16 @@
-.bx-remote-play-popup {
-    width: 100%;
-    max-width: 1920px;
-    margin: auto;
-    position: relative;
-    height: 0.1px;
-    overflow: visible;
-    z-index: var(--bx-remote-play-popup-z-index);
-}
-
 .bx-remote-play-container {
-    position: absolute;
-    right: 10px;
-    top: 0;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
     background: #1a1b1e;
     border-radius: 10px;
     width: 420px;
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
     padding: 20px;
-    box-shadow: #00000080 0px 0px 12px 0px;
-
-    @media (min-width:480px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 32px);
-    }
-
-    @media (min-width:768px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 48px);
-    }
-
-    @media (min-width:1920px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 80px);
-    }
 
     > .bx-button {
         display: table;
@@ -121,3 +101,8 @@
     min-height: 100%;
     margin: 4px 0;
 }
+
+.bx-remote-play-buttons {
+    display: flex;
+    justify-content: space-between;
+}

src/assets/css/root.styl

@@ -37,8 +37,6 @@ button_color(name, normal, hover, active, disabled)
     --bx-navigation-dialog-z-index: 30100;
     --bx-navigation-dialog-overlay-z-index: 30000;
 
-    --bx-remote-play-popup-z-index: 20000;
-
     --bx-game-bar-z-index: 10000;
     --bx-screenshot-animation-z-index: 9000;
     --bx-wait-time-box-z-index: 1000;

src/assets/css/settings-dialog.styl

@@ -130,7 +130,6 @@
 
         &:focus {
             border-color: #fff;
-            outline: none;
         }
 
         &[data-group=global] {
@@ -234,11 +233,6 @@
         }
     }
 
-    &:focus,
-    *:focus {
-        outline: none !important;
-    }
-
     .bx-top-buttons {
         display: flex;
         flex-direction: column;