From 36ccf8a75c1673f46e1dc47411f77db973db62f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20B=C3=A9rub=C3=A9?= <wberube@null.net>
Date: Tue, 13 Aug 2024 14:34:09 -0400
Subject: [PATCH] Slight improvements on the WebUI

---
 res/index.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/res/index.html b/res/index.html
index 7b83319..0c21f78 100644
--- a/res/index.html
+++ b/res/index.html
@@ -4,8 +4,10 @@
 	<style>
 		*{box-sizing:border-box}*+*{margin:.5em 0}pre{overflow:auto}@media(min-width:50em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.\36{width:50%}.row{display:table;border-spacing:1em 0;height:fit-content}}.row,.w-100{width:100%}.card:focus,hr{outline:0;border:solid #fa0}.card,pre{padding:1em;border:solid #eee}.btn:hover,a:hover{opacity:.6}.c{padding:1em;margin:auto;font:1em/1.6 sans-serif}h6{font:400 1em sans-serif}h5{font:400 1.2em sans-serif}h3{font:400 2em sans-serif}h4{font:400 1.5em sans-serif}h2{font:400 2.2em sans-serif}h1{font:400 2.5em sans-serif}a{color:#fa0;text-decoration:none}.btn.primary{color:#fff;background:#fa0;border:solid #fa0}td,th{padding:1em;text-align:left;border-bottom:solid #eee}.btn{padding:1em;text-transform:uppercase;background:#fff;border:solid;font:.7em sans-serif}a.btn{display:inline-block}input,select{font-family:sans-serif}
 		.white{color:#fff}.bg-white{background-color:#fff}.b-white{border-color:#fff}.gray{color:#ccc}.bg-gray{background-color:#ccc}.b-gray{border-color:#ccc}.black{color:#000}.bg-black{background-color:#000}.b-black{border-color:#000}.accent{color:#fa0}.bg-accent{background-color:#fa0}.b-accent{border-color:#fa0}.warning{color:#ffd600}.bg-warning{background-color:#ffd600}.b-warning{border-color:#ffd600}.error{color:#d50000}.bg-error{background-color:#d50000}.b-error{border-color:#d50000}.success{color:#00c853}.bg-success{background-color:#00c853}.b-success{border-color:#00c853}.info{color:#2962ff}.bg-info{background-color:#2962ff}.b-info{border-color:#2962ff}.m0{margin:0}.m1{margin:.5em}.m2{margin:1em}.m3{margin:2em}.m4{margin:4em}.mt0{margin-top:0}.mt1{margin-top:.5em}.mt2{margin-top:1em}.mt3{margin-top:2em}.mt4{margin-top:4em}.mr0{margin-right:0}.mr1{margin-right:.5em}.mr2{margin-right:1em}.mr3{margin-right:2em}.mr4{margin-right:4em}.mb0{margin-bottom:0}.mb1{margin-bottom:.5em}.mb2{margin-bottom:1em}.mb3{margin-bottom:2em}.mb4{margin-bottom:4em}.ml0{margin-left:0}.ml1{margin-left:.5em}.ml2{margin-left:1em}.ml3{margin-left:2em}.ml4{margin-left:4em}.p0{padding:0}.p1{padding:.5em}.p2{padding:1em}.p3{padding:2em}.p4{padding:4em}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.5em;padding-bottom:.5em}.pv2{padding-top:1em;padding-bottom:1em}.pv3{padding-top:2em;padding-bottom:2em}.pv4{padding-top:4em;padding-bottom:4em}.ph0{padding-right:0;padding-left:0}.ph1{padding-right:.5em;padding-left:.5em}.ph2{padding-right:1em;padding-left:1em}.ph3{padding-right:2em;padding-left:2em}.ph4{padding-right:4em;padding-left:4em}.gapless{border-spacing:0}.vc{position:relative;top:40%;transform:perspective(1px) translateY(-45%)}.pill{border-radius:9999px}.rounded{border-radius:4px}.tc{text-align:center}.mega{font-size:3.5em}.large{font-size:1.5em}.small{font-size:.7em}.caps{text-transform:uppercase}.tracked{letter-spacing:.1em}.vh-100{height:100vh}.inline{display:inline-block}.bold{font-weight:700}.normal{font-weight:400}.light{font-weight:300}.dim{opacity:1;transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5;transition:opacity .15s ease-in}
-		@media(min-width:50em){.box > fieldset{height:100%}}.box{vertical-align:top}.box input,select{width:100%}.box td{padding:0.5em}.cont{max-width:64em}.menu .btn{margin:-1em 0;padding:0.75em}.right{float:right}.unl{border-bottom:2px solid}
-		dialog{display:block;border:0;padding:0!important}dialog:not(:target):not([open]){display:none}.hid{display:none !important}
+		.box{vertical-align:top}.box input,select{width:100%}.box td{padding:0.5em}.close{position:absolute;right:2em;top:2em}
+		dialog{display:block;border:0;padding:0!important;z-index:1}dialog:not(:target):not([open]){display:none}
+		@media(min-width:50em){.box > fieldset{height:100%}.close{right:4em}}
+		.cont{max-width:64em}.menu .btn{margin:-1em 0;padding:0.75em}.right{float:right}.unl{border-bottom:2px solid}
 	</style>
 	<script>
 		var ua = window.navigator.userAgent;
@@ -85,9 +87,7 @@ <h1 class="mega mb0">Divinus</h1>
 				<a href="javascript:setSource('preview', 'video.mp4')" class="ph2">MP4</a>
 				<a href="javascript:setSource('preview', 'mjpeg')" class="ph2">MJPEG</a>
 				<a href="javascript:setSource('preview', '')" class="ph2">Stop</a>
-			</div>
-			<div class="1 col">
-				<a href="#!" class="btn primary">Close</a>
+				<a href="#!" class="btn primary close">Close</a>
 			</div>
 		</div>
 		<div class="c cont">
@@ -99,9 +99,7 @@ <h2 class="unl">Live</h2>
 		<div class="c bg-black menu pv2 row">
 			<div class="col">
 				<b><a href="#!" class="white ph2">Divinus</a></b>
-			</div>
-			<div class="1 col">
-				<a href="#!" class="btn primary">Close</a>
+				<a href="#!" class="btn primary close">Close</a>
 			</div>
 		</div>
 		<div class="c cont">