Better length bars
This commit is contained in:
parent
516c7e0f73
commit
fa206b5933
3 changed files with 19 additions and 5 deletions
|
@ -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};
|
||||||
|
|
|
@ -11,3 +11,11 @@
|
||||||
.scriptEnabled {
|
.scriptEnabled {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lengthBar {
|
||||||
|
width: calc(100% - 65px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.durationBarFormatter {
|
||||||
|
width: 55px;
|
||||||
|
}
|
|
@ -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 {
|
||||||
|
@ -345,3 +346,8 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
|
||||||
.activityTitle {
|
.activityTitle {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.durationBarFormatter {
|
||||||
|
float: right;
|
||||||
|
width: 90px;
|
||||||
|
}
|
Loading…
Reference in a new issue