Version 72a:

* Updated application icon and logo in About panel to match BI 5.
* Began restyling for Blue Iris 5, using CSS Variables to enable easier theming.
* Added css variables polyfilly for IE11.
* Optimized dialog sizing to allow the full use of the viewport's height.
* Context menus now scroll when the viewport is too short to contain them.

ui3.htm

@@ -10,7 +10,7 @@
 	<meta name="mobile-web-app-capable" content="yes"><!--Android Chrome-->
 	<meta name="theme-color" content="#000000">
 	<link rel="manifest" id="ui3manifest">
-	<title>UI3 - Blue Iris</title>
+	<title>%%SYSNAME%% UI3</title>
 	<script type="text/javascript">
 		var html5PlayFunc; try { html5PlayFunc = HTMLMediaElement.prototype.play; } catch (e) { }
 		// If messages stating "An unexpected error has occurred" become troublesome, you can disable it by deleting this script block!
@@ -42,7 +42,7 @@
 		};
 	</script>
 	<script type="text/javascript">
-		var ui_version = "71";
+		var ui_version = "72a";
 		var bi_version = "%%VERSION%%";
 		var combined_version = ui_version + "-" + bi_version;
 		//if (!!navigator.userAgent.match(/ Android /))
@@ -53,7 +53,7 @@
 		var local_bi_session_arg = navigator.cookieEnabled ? "" : (local_bi_session ? "&session=" + local_bi_session : "");
 		var local_bi_session_argQ = navigator.cookieEnabled ? "" : (local_bi_session ? "?session=" + local_bi_session : "");
 		document.getElementById("ui3manifest").href = "ui3/manifest.json" + local_bi_session_argQ;
-		document.getElementById("ui3launcher1").href = "ui3/launcher-icon.png" + local_bi_session_argQ;
+		document.getElementById("ui3launcher1").href = "ui3/launcher-icons/launcher-icon48.png" + local_bi_session_argQ;
 		document.getElementById("ui3launcher2").href = "ui3/launcher-icon.png" + local_bi_session_argQ;
 		document.write('<link href="ui3/libs-ui3.css?v=' + combined_version + local_bi_session_arg + '" rel="stylesheet" />'
 			+ '<link href="ui3/ui3.css?v=' + combined_version + local_bi_session_arg + '" rel="stylesheet" />'
@@ -271,7 +271,9 @@
 						<div class="leftBarBool" name="flaggedOnly">Flagged Only</div>
 					</div>
 				</div>
-				<div id="clipListTopDate" class="datetile" style="position:relative;margin-bottom:0px" title="Click to scroll to the top" onclick="clipLoader.ScrollToTop()">...</div>
+				<div class="clipListTopDateWrapper">
+					<div id="clipListTopDate" class="datetile" style="position:relative;margin-bottom:0px" title="Click to scroll to the top" onclick="clipLoader.ScrollToTop()">...</div>
+				</div>
 				<!--<div style="height:4px;">Margin-bottom doesn't get counted correctly by the resize algorithm</div>-->
 			</div>
 			<div id="clipsbodyWrapper">
@@ -407,7 +409,11 @@
 	<div id="aboutDialog" class="selectable" style="display: none">
 		<div>
 			UI3 version <span id="ui_version_label"></span>, Blue Iris version: <span id="bi_version_label"></span>
-			<img class="about_icon" mysrc="ui3/launcher-icon.png" alt="Blue Iris" />
+			<picture class="about_icon">
+				<source srcset="ui3/logos/overlay96.webp" type="image/webp">
+				<source srcset="ui3/logos/overlay96.png" type="image/jpeg">
+				<img class="about_icon" src="ui3/logos/overlay96.png" alt="Blue Iris">
+			</picture>
 		</div>
 		<div class="section">UI3 is a web interface for <a target="_blank" href="http://blueirissoftware.com/">Blue Iris</a></div>
 		<div id="optionalFeaturesNotSupported" class="section">
@@ -461,6 +467,16 @@
 		document.write('<script src="ui3/libs-ui3.js?v=' + combined_version + local_bi_session_arg + '"><\/script>'
 			+ '<script src="ui3/ui3.js?v=' + combined_version + local_bi_session_arg + '"><\/script>'
 			+ '<script src="ui3/ui3-local-overrides.js?v=' + combined_version + local_bi_session_arg + '"><\/script>');
+
+		if (!(window.CSS && window.CSS.supports && window.CSS.supports('--fake-var', 0)))
+		{
+			document.write('<script src="ui3/css-vars-ponyfill.min.js?v=' + combined_version + local_bi_session_arg + '"><\/script>');
+			document.addEventListener("DOMContentLoaded", function ()
+			{
+				if (typeof cssVars === "function")
+					cssVars();
+			});
+		}
 	</script>
 </body>
 </html>

ui3/libs-src/Dialog.css

@@ -143,6 +143,7 @@
 	overflow: auto;
 	max-width: 90vw;
 	max-height: 85vh;
+	max-height: calc(100vh - 31px);
 }
 
 	.dialog_content a, .dialog_content a:visited

ui3/licenses.txt

@@ -160,4 +160,7 @@ AVI.js
 // Available under the same license as UI3: GNU LESSER GENERAL PUBLIC LICENSE, Version 3
 
 jmuxer
-The MIT License - https://github.com/samirkumardas/jmuxer/blob/master/LICENSE
+The MIT License - https://github.com/samirkumardas/jmuxer/blob/master/LICENSE
+
+css-vars-ponyfill
+The MIT License - https://github.com/jhildenbiddle/css-vars-ponyfill/blob/master/LICENSE

ui3/manifest.json

@@ -2,6 +2,61 @@
     "short_name": "UI3",
     "name": "Blue Iris UI3",
     "icons": [
+        {
+            "src": "logos/launcher-icon48.webp",
+            "sizes": "48x48",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon72.webp",
+            "sizes": "72x72",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon96.webp",
+            "sizes": "96x96",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon144.webp",
+            "sizes": "144x144",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon168.webp",
+            "sizes": "168x168",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon192.webp",
+            "sizes": "192x192",
+            "type": "image/webp"
+        },
+        {
+            "src": "logos/launcher-icon48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "logos/launcher-icon72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "logos/launcher-icon96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "logos/launcher-icon144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "logos/launcher-icon168.png",
+            "sizes": "168x168",
+            "type": "image/png"
+        },
         {
             "src": "launcher-icon.png",
             "sizes": "192x192",