Violet/api.violets-purgatory.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better length bars

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
overcomplicatedStatuses.js
View file

@ -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};

8
static/noScript.css
View file

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

14
static/style.css
View file

@ -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;
}