update to latest sw (addresses #5)

replay bar tweaks: hide date display when location bar is focused, remove outline on buttons when focused

src/replay.js

@@ -241,10 +241,18 @@ class Replay extends LitElement
         right: 1em;
         z-index: 10;
         background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 15%, #FFF);
-        margin: 5px 0.75em 5px 0;
+        margin: -35px 0 0 0px;
         line-height: 2;
       }
 
+      input:focus + #datetime {
+        display: none;
+      }
+
+      .replay-bar .button:focus {
+        border: none;
+      }
+
       .is-borderless {
         border: 0px;
       }
@@ -278,12 +286,12 @@ class Replay extends LitElement
           </span>
         </button>
         <form @submit="${this.onSubmit}">
-          <p class="control is-expanded">
-            <input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here">
-          </p>
-        </form>
+          <div class="control is-expanded">
+            <input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here"/>
             <p id="datetime" class="control is-hidden-mobile">${tsToDate(this.replayTS).toLocaleString()}</p>
           </div>
+        </form>
+      </div>
     </div>` : html`
     `}
 

ui.js

@@ -1320,10 +1320,18 @@ const tt=new WeakMap,it=v(e=>t=>{if(!(t instanceof T))throw new Error("unsafeHTM
         right: 1em;
         z-index: 10;
         background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 15%, #FFF);
-        margin: 5px 0.75em 5px 0;
+        margin: -35px 0 0 0px;
         line-height: 2;
       }
 
+      input:focus + #datetime {
+        display: none;
+      }
+
+      .replay-bar .button:focus {
+        border: none;
+      }
+
       .is-borderless {
         border: 0px;
       }
@@ -1353,12 +1361,12 @@ const tt=new WeakMap,it=v(e=>t=>{if(!(t instanceof T))throw new Error("unsafeHTM
           </span>
         </button>
         <form @submit="${this.onSubmit}">
-          <p class="control is-expanded">
-            <input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here">
-          </p>
-        </form>
+          <div class="control is-expanded">
+            <input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here"/>
             <p id="datetime" class="control is-hidden-mobile">${function(e){if(!e)return"";e.length<14&&(e+="00000000000000".substr(e.length));const t=e.substring(0,4)+"-"+e.substring(4,6)+"-"+e.substring(6,8)+"T"+e.substring(8,10)+":"+e.substring(10,12)+":"+e.substring(12,14)+"-00:00";return new Date(t)}(this.replayTS).toLocaleString()}</p>
           </div>
+        </form>
+      </div>
     </div>`:O`
     `}
 

yarn.lock

@@ -293,7 +293,7 @@
 
 "@webrecorder/wabac@github:webrecorder/wabac.js":
   version "2.0.2-beta.0"
-  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/67680dda8018c8991547d450c64aed70e3d44090"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/dcfe8532f0710917b38b0977f4537eac3d5c8e38"
   dependencies:
     brotli "github:foliojs/brotli.js"
     fast-xml-parser "^3.15.1"