Better styling media player
This commit is contained in:
+5
-18
@@ -11,32 +11,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-4 Lms-horizontal-center">
|
<div class="col-xs-4 Lms-player-controls">
|
||||||
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
|
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
|
||||||
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
|
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
|
||||||
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
|
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
|
||||||
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
|
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-8 Lms-horizontal-center">
|
<div class="col-xs-8">
|
||||||
<div class="container-fluid">
|
<div class="Lms-player-text">
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12 Lms-horizontal-center">
|
|
||||||
${title}
|
${title}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="Lms-player-text">
|
||||||
<div class="row">
|
<small><span class="hidden-xs">${release}</span><i>${artist}</i></small>
|
||||||
<div class="col-xs-12 Lms-horizontal-center">
|
|
||||||
<small>
|
|
||||||
<span class="hidden-xs">
|
|
||||||
${release}
|
|
||||||
</span>
|
|
||||||
<i>${artist}</i>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+12
-1
@@ -246,7 +246,7 @@ a:hover {
|
|||||||
.Lms-player-seek {
|
.Lms-player-seek {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
# touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Lms-player-progress {
|
.Lms-player-progress {
|
||||||
@@ -257,3 +257,14 @@ a:hover {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Lms-player-controls {
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Lms-player-text {
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user