From fa206b59330b83caf707c4179c587f6cb55eef51 Mon Sep 17 00:00:00 2001
From: bingus_violet <violet@violets-purgatory.dev>
Date: Tue, 9 Jul 2024 18:16:34 -0500
Subject: [PATCH] Better length bars

---
 overcomplicatedStatuses.js |  2 +-
 static/noScript.css        |  8 ++++++++
 static/style.css           | 14 ++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/overcomplicatedStatuses.js b/overcomplicatedStatuses.js
index 0c9786d..a7a4705 100644
--- a/overcomplicatedStatuses.js
+++ b/overcomplicatedStatuses.js
@@ -95,7 +95,7 @@ module.exports = {
                                 var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
                                 return `
                                 <br>
-                                <span style="text-align: center;"><span class="lengthBar lengthBar${index}"><span></span></span><span class="durationBarFormatter" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}/${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</span></span>
+                                <span><span class="lengthBar lengthBar${index}"><span></span></span><span class="durationBarFormatter" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}"><span class="scriptEnabled">${timeFormatter((Date.now() - activity.timestamps.start))}/</span>${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</span></span>
                                     <style>
                                         .lengthBar${index} > span {
                                             animation-name: songSlider${index};
diff --git a/static/noScript.css b/static/noScript.css
index 0626463..5cea8ad 100644
--- a/static/noScript.css
+++ b/static/noScript.css
@@ -10,4 +10,12 @@
 
 .scriptEnabled {
     display: none;
+}
+
+.lengthBar {
+    width: calc(100% - 65px);
+}
+
+.durationBarFormatter {
+    width: 55px;
 }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index df3749e..7d4b667 100644
--- a/static/style.css
+++ b/static/style.css
@@ -268,14 +268,15 @@ li {
 
 .lengthBar {
     background-color: rgb(50, 40, 60);
-    display: inline-block;
+    display: block;
+    width: calc(100% - 100px);
     margin: auto;
-    width: 65%;
-    height: 10px;
+    height: 12px;
     padding: 0;
     overflow: hidden;
+    float: left;
+    transform: translateY(7px);
     border-radius: 5px;
-    margin-right: 1.9%;
 }
 
 .textBlock {
@@ -344,4 +345,9 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
 
 .activityTitle {
     text-decoration: underline;
+}
+
+.durationBarFormatter {
+    float: right;
+    width: 90px;
 }
\ No newline at end of file