Better length bars

This commit is contained in:
bingus_violet 2024-07-09 18:16:34 -05:00
parent 516c7e0f73
commit fa206b5933
3 changed files with 19 additions and 5 deletions

View file

@ -95,7 +95,7 @@ module.exports = {
var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100 var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
return ` return `
<br> <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> <style>
.lengthBar${index} > span { .lengthBar${index} > span {
animation-name: songSlider${index}; animation-name: songSlider${index};

View file

@ -10,4 +10,12 @@
.scriptEnabled { .scriptEnabled {
display: none; display: none;
}
.lengthBar {
width: calc(100% - 65px);
}
.durationBarFormatter {
width: 55px;
} }

View file

@ -268,14 +268,15 @@ li {
.lengthBar { .lengthBar {
background-color: rgb(50, 40, 60); background-color: rgb(50, 40, 60);
display: inline-block; display: block;
width: calc(100% - 100px);
margin: auto; margin: auto;
width: 65%; height: 12px;
height: 10px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
float: left;
transform: translateY(7px);
border-radius: 5px; border-radius: 5px;
margin-right: 1.9%;
} }
.textBlock { .textBlock {
@ -344,4 +345,9 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
.activityTitle { .activityTitle {
text-decoration: underline; text-decoration: underline;
}
.durationBarFormatter {
float: right;
width: 90px;
} }