New bar

static/js/timeFormatter.js

@@ -30,6 +30,16 @@ function secondLoop() {
         item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
     })
 
+    $(".playTimeStart").each((_, item) => {
+        item = $(item)
+        item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}`)
+    })
+
+    $(".playTimeEnd").each((_, item) => {
+        item = $(item)
+        item.text(`${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
+    })
+
     $(".timeEstimate").each((_, item) => {
         item = $(item)
         item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))

static/noScript.css

@@ -16,6 +16,6 @@
     width: calc(100% - 65px);
 }
 
-.durationBarFormatter {
-    width: 55px;
+.durationBarStuff {
+    padding-left: 6px;
 }

static/style.css

@@ -214,16 +214,23 @@ br {
     /* max-height: 200px; */
 }
 
-.activity>p {
-    width: 100%;
+.activity>div>p {
     max-height: 100%;
+    text-align: left;
     overflow-wrap: anywhere;
     text-overflow: ellipsis;
-    padding: 3px;
+    padding: 1px 0px;
     line-height: 1.5rem;
+    font-size: 1.15rem;
     align-self: center;
 }
 
+.activity>div {
+    align-self: center;
+    padding: 1px 3px;
+    width: 100%;
+}
+
 .activity>img {
     width: 40%;
     aspect-ratio: 1/1;
@@ -272,15 +279,14 @@ li {
 
 .lengthBar {
     background-color: rgb(50, 40, 60);
-    display: block;
-    width: calc(100% - 110px);
+    flex-grow: 1;
     margin: auto;
     height: 12px;
+    /* justify-content: center; */
+    /* align-items: center; */
     padding: 0;
     overflow: hidden;
-    float: left;
-    transform: translateY(7px);
-    border-radius: 5px;
+    border-radius: 6px;
 }
 
 .textBlock {
@@ -297,7 +303,7 @@ span {
     color: inherit
 }
 
-.lengthBar>span {
+.lengthBar>div {
     margin: 0;
     padding: 0;
     width: 100%;
@@ -349,10 +355,12 @@ underline {
     text-decoration: underline;
 }
 
-.durationBarFormatter {
-    float: right;
+.durationBarStuff {
+    display: flex;
+    flex-grow: 1;
 }
 
-.evil {
-    display: none;
+.durationBarStuff > p {
+    font-size: 1.15rem;
+    padding: 0;
 }