From 0591e7e1f61da9c08f5e0885c603e4a4e6595822 Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Mon, 4 Nov 2024 13:15:38 +0000
Subject: [PATCH] Css fixes for mobile devices

---
 .../wwwroot/css/mkplayer-ui.css               | 38 ++++++++++++++++++-
 .../wwwroot/css/mkplayer-ui.css               | 38 ++++++++++++++++++-
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/AdminUI/LearningHub.Nhs.AdminUI/wwwroot/css/mkplayer-ui.css b/AdminUI/LearningHub.Nhs.AdminUI/wwwroot/css/mkplayer-ui.css
index e564e5c74..0929e5a25 100644
--- a/AdminUI/LearningHub.Nhs.AdminUI/wwwroot/css/mkplayer-ui.css
+++ b/AdminUI/LearningHub.Nhs.AdminUI/wwwroot/css/mkplayer-ui.css
@@ -17,7 +17,7 @@
 }
 
     .bmpui-ui-buffering-overlay, .bmpui-ui-cast-status-overlay, .bmpui-ui-container, .bmpui-ui-controlbar, .bmpui-ui-errormessage-overlay, .bmpui-ui-listbox, .bmpui-ui-playbacktoggle-overlay, .bmpui-ui-recommendation-overlay, .bmpui-ui-seekbar-label, .bmpui-ui-settings-panel, .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label, .bmpui-ui-titlebar, .bmpui-ui-uicontainer, .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay, .bmpui-ui-volumecontrolbutton {
-        font-size: 0.7em
+        font-size: 1em
     }
 
 .bmpui-ui-uicontainer {
@@ -684,7 +684,7 @@
 
 .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay {
     bottom: 0;
-    font-size: 1em;
+    font-size: 1.2em;
     left: 0;
     pointer-events: none;
     position: absolute;
@@ -1871,3 +1871,37 @@
     .bmpui-ui-uicontainer.bmpui-layout-max-width-400 .bmpui-ui-hugeplaybacktogglebutton, .bmpui-ui-uicontainer.bmpui-layout-max-width-400 .bmpui-ui-watermark, .bmpui-ui-uicontainer.bmpui-layout-max-width-600 .bmpui-ui-hugeplaybacktogglebutton, .bmpui-ui-uicontainer.bmpui-layout-max-width-600 .bmpui-ui-watermark {
         font-size: .7em
     }
+@media (max-width: 767px) {
+    .bmpui-ui-buffering-overlay,
+    .bmpui-ui-cast-status-overlay,
+    .bmpui-ui-container,
+    .bmpui-ui-controlbar,
+    .bmpui-ui-errormessage-overlay,
+    .bmpui-ui-listbox,
+    .bmpui-ui-playbacktoggle-overlay,
+    .bmpui-ui-recommendation-overlay,
+    .bmpui-ui-seekbar-label,
+    .bmpui-ui-settings-panel,
+    .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label,
+    .bmpui-ui-titlebar,
+    .bmpui-ui-uicontainer,
+    .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay,
+    .bmpui-ui-volumecontrolbutton {
+        font-size: 0.7em;
+    }
+}
+
+@media (max-width: 767px) {
+    .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay {
+        bottom: 0;
+        font-size: 1em;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: 0;
+        -webkit-transition: bottom .15s ease-out;
+        transition: bottom .15s ease-out
+    }
+}
diff --git a/LearningHub.Nhs.WebUI/wwwroot/css/mkplayer-ui.css b/LearningHub.Nhs.WebUI/wwwroot/css/mkplayer-ui.css
index e564e5c74..df6bc583f 100644
--- a/LearningHub.Nhs.WebUI/wwwroot/css/mkplayer-ui.css
+++ b/LearningHub.Nhs.WebUI/wwwroot/css/mkplayer-ui.css
@@ -17,7 +17,7 @@
 }
 
     .bmpui-ui-buffering-overlay, .bmpui-ui-cast-status-overlay, .bmpui-ui-container, .bmpui-ui-controlbar, .bmpui-ui-errormessage-overlay, .bmpui-ui-listbox, .bmpui-ui-playbacktoggle-overlay, .bmpui-ui-recommendation-overlay, .bmpui-ui-seekbar-label, .bmpui-ui-settings-panel, .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label, .bmpui-ui-titlebar, .bmpui-ui-uicontainer, .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay, .bmpui-ui-volumecontrolbutton {
-        font-size: 0.7em
+        font-size: 1em
     }
 
 .bmpui-ui-uicontainer {
@@ -684,7 +684,7 @@
 
 .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay {
     bottom: 0;
-    font-size: 1em;
+    font-size: 1.2em;
     left: 0;
     pointer-events: none;
     position: absolute;
@@ -1871,3 +1871,37 @@
     .bmpui-ui-uicontainer.bmpui-layout-max-width-400 .bmpui-ui-hugeplaybacktogglebutton, .bmpui-ui-uicontainer.bmpui-layout-max-width-400 .bmpui-ui-watermark, .bmpui-ui-uicontainer.bmpui-layout-max-width-600 .bmpui-ui-hugeplaybacktogglebutton, .bmpui-ui-uicontainer.bmpui-layout-max-width-600 .bmpui-ui-watermark {
         font-size: .7em
     }
+@media (max-width: 767px) {
+    .bmpui-ui-buffering-overlay,
+    .bmpui-ui-cast-status-overlay,
+    .bmpui-ui-container,
+    .bmpui-ui-controlbar,
+    .bmpui-ui-errormessage-overlay,
+    .bmpui-ui-listbox,
+    .bmpui-ui-playbacktoggle-overlay,
+    .bmpui-ui-recommendation-overlay,
+    .bmpui-ui-seekbar-label,
+    .bmpui-ui-settings-panel,
+    .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label,
+    .bmpui-ui-titlebar,
+    .bmpui-ui-uicontainer,
+    .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay,
+    .bmpui-ui-volumecontrolbutton {
+        font-size: 0.7em;
+    }
+}
+
+@media (max-width: 767px) {
+    .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay {
+        bottom: 0;
+        font-size: 1em;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: 0;
+        -webkit-transition: bottom .15s ease-out;
+        transition: bottom .15s ease-out
+    }
+}
\ No newline at end of file