owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked CSS in order to isolate themable elements

Browse Source
This commit is contained in:
emeric
2020-04-12 18:35:55 +02:00
parent 8d8d778e47
commit fa14586b64
14 changed files with 123 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/artist.xml
+6 -6
View File
@@ -4,7 +4,7 @@
<message id="Lms.Explore.Artist.template">
<div class="page-header">
<h2>${name}</h2>
<h2><div class="Lms-artistname text-primary">${name}</div></h2>
${clusters}
${play-btn}${add-btn}
</div>
@@ -12,18 +12,18 @@
</message>
<message id="Lms.Explore.Artist.template.entry">
<div class="row Lms-explore-artist-entry">
<div class="row Lms-explore-artist-entry Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${name class="Lms-explore-releasename"}
${name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist class="Lms-explore-artistname"}</small></h4>${</if-has-artist>}
<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
${<if-has-artist>}<h4><small>${artist class="Lms-artistname text-muted"}</small></h4>${</if-has-artist>}
<h4><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h4>
${play-btn}${add-btn}
</div>
</div>
approot/artistlink.xml
+2 -2
View File
@@ -3,9 +3,9 @@
<!--FORMS message blocks-->
<message id="Lms.Explore.ArtistLink.template">
<div class="row Lms-explore-artistlink Lms-vertical-align">
<div class="row Lms-explore-artistlink Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12">
${name class="Lms-explore-artistname Lms-explore-artistlink-name"}
${name class="Lms-artistname text-primary"}
</div>
</div>
</message>
approot/artists.xml
+2 -2
View File
@@ -28,9 +28,9 @@
</message>
<message id="Lms.Explore.Artists.template.entry">
<div class="row Lms-explore-artists-entry Lms-vertical-align">
<div class="row Lms-explore-artists-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12">
<h4>${name class="Lms-explore-artistname Lms-explore-artists-entry-name"}</h4>
<h4>${name class="Lms-artistname text-primary"}</h4>
</div>
</div>
</message>
approot/explore.xml
+4 -4
View File
@@ -7,18 +7,18 @@
${contents class="Lms-explore-contents"}
</div>
<div class="col-lg-4">
${filters class="Lms-explore-filters"}
${info class="Lms-explore-info"}
${filters class="well well-sm"}
${info class="well well-sm"}
</div>
</div>
</message>
<message id="Lms.Explore.template.add-btn">
<i class="fa fa-plus-circle Lms-explore-btn"></i>
<i class="fa fa-plus-circle Lms-explore-btn Lms-control-btn"></i>
</message>
<message id="Lms.Explore.template.play-btn">
<i class="fa fa-play-circle Lms-explore-btn"></i>
<i class="fa fa-play-circle Lms-explore-btn Lms-control-btn"></i>
</message>
<message id="Lms.Explore.template.filters">
approot/mediaplayer.xml
+8 -9
View File
@@ -8,20 +8,20 @@
<div class="Lms-player-seek-container">
<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
<div class="progress Lms-player-seek-common Lms-player-progress">
<div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<div id="lms-mp-progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-2 Lms-player-controls">
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
<i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
</div>
<div class="hidden-xs col-sm-2">
<div class="Lms-player-volume">
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-player-btn-volume"></i>
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-control-btn Lms-player-btn-volume"></i>
<span class="hidden-xs Lms-player-volume-slider-container">
<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
</span>
@@ -29,18 +29,17 @@
</div>
<div class="col-xs-8 col-sm-6">
<div class="Lms-player-text-center">
${title class="Lms-player-text"}
${title class="Lms-player-text Lms-trackname text-primary"}
</div>
<div class="Lms-player-text-center">
<small><span class="hidden-xs">${release class="Lms-player-text Lms-explore-releasename"}</span>${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}</small>
<span class="hidden-xs">${release class="Lms-player-text Lms-releasename text-primary"}</span><small>${artist class="Lms-player-text Lms-artistname text-muted"}</small>
</div>
</div>
<div class="hidden-xs col-sm-2 Lms-player-duration">
<div class="hidden-xs col-sm-2 Lms-player-duration text-muted">
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
</div>
</div>
</div>
</message>
</messages>
approot/playhistory.xml
+14 -10
View File
@@ -3,23 +3,27 @@
<!--FORMS message blocks-->
<message id="Lms.PlayHistory.template">
<div class="page-header">
<h2>${tr:Lms.PlayHistory.playhistory}</h2>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
<div class="col-lg-8">
<div class="page-header">
<h2>${tr:Lms.PlayHistory.playhistory}</h2>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
</div>
</div>
</div>
</div>
</message>
<message id="Lms.PlayHistory.template.entry">
<div class="row Lms-playhistory-entry Lms-vertical-align">
<div class="row Lms-playhistory-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12 Lms-playhistory-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
@@ -27,7 +31,7 @@
</message>
<message id="Lms.PlayHistory.template.entry-artist">
${artist class="Lms-explore-artistname"}
${artist class="Lms-artistname text-muted"}
</message>
</messages>
approot/playqueue.xml
+24 -20
View File
@@ -3,57 +3,61 @@
<!--FORMS message blocks-->
<message id="Lms.PlayQueue.template.clear-btn">
<i class="fa fa-times-circle Lms-playqueue-btn"></i>
<i class="fa fa-times-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.shuffle-btn">
<i class="fa fa-random Lms-playqueue-btn"></i>
<i class="fa fa-random Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.repeat-btn">
<i class="fa fa-repeat Lms-playqueue-btn"></i>
<i class="fa fa-repeat Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.radio-btn">
<i class="fa fa-rss Lms-playqueue-btn"></i>
<i class="fa fa-rss Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template">
<div class="page-header">
<h2>${tr:Lms.PlayQueue.playqueue}</h2>
${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn}
<h4><small>${nb-tracks}</small></h4>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
<div class="col-lg-8">
<div class="page-header">
<h2>${tr:Lms.PlayQueue.playqueue}</h2>
${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn}
<h4><small>${nb-tracks}</small></h4>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
</div>
</div>
</div>
</div>
</message>
<message id="Lms.PlayQueue.template.play-btn">
<i class="fa fa-play-circle Lms-playqueue-btn"></i>
<i class="fa fa-play-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.delete-btn">
<i class="fa fa-times-circle Lms-playqueue-btn"></i>
<i class="fa fa-times-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.entry">
<div class="row Lms-playqueue-entry Lms-vertical-align">
<div class="row Lms-playqueue-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-9 Lms-playqueue-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="col-xs-3">
<div class="Lms-playqueue-entry-controls">
${play-btn}${del-btn}
</div>
<div class="Lms-playqueue-entry-duration">
<div class="Lms-playqueue-entry-duration text-muted">
${duration}
</div>
</div>
@@ -61,7 +65,7 @@
</message>
<message id="Lms.PlayQueue.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/release.xml
+8 -8
View File
@@ -13,8 +13,8 @@
</div>
</div>
<div class="page-header">
<h3>${name}</h3>
${<if-has-artist>}<h4>${artist class="Lms-explore-artistname"}</h4>${</if-has-artist>}
<h3><div class="Lms-releasename text-primary">${name}</div></h3>
${<if-has-artist>}<h4>${artist class="Lms-artistname text-muted"}</h4>${</if-has-artist>}
<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
${clusters}
${play-btn}${add-btn}
@@ -23,19 +23,19 @@
</message>
<message id="Lms.Explore.Release.template.entry">
<div class="row Lms-explore-release-entry Lms-vertical-align">
<div class="col-xs-1 Lms-explore-release-entry-tracknumber">
<div class="row Lms-explore-release-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-1 Lms-explore-release-entry-tracknumber text-muted">
${<if-has-disc-number>}${disc-number}-${</if-has-disc-number>}${<if-has-track-number>}${track-number}${</if-has-track-number>}
</div>
<div class="col-xs-8 Lms-explore-release-entry-name">
${name}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
<div class="Lms-trackname text-primary">${name}</div>
${<if-has-artists>}${artists}${</if-has-artists>}
</div>
<div class="col-xs-3">
<div class="Lms-explore-release-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-release-entry-track-duration">
<div class="Lms-explore-release-entry-track-duration text-muted">
${duration}
</div>
</div>
@@ -43,7 +43,7 @@
</message>
<message id="Lms.Explore.Release.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/releaselink.xml
+4 -4
View File
@@ -3,17 +3,17 @@
<messages xmlns:if="Wt.WTemplate.conditions">
<message id="Lms.Explore.ReleaseLink.template">
<div class="row Lms-explore-releaselink">
<div class="row Lms-explore-releaselink Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<div class="media-heading">
${release-name class="Lms-explore-releasename"}
${release-name class="Lms-releasename text-primary"}
</div>
${<if-has-artist>}<small>${artist-name class="Lms-explore-artistname Lms-explore-releaselink-artist"}</small>${</if-has-artist>}
${<if-has-artist>}<small>${artist-name class="Lms-artistname text-muted"}</small>${</if-has-artist>}
</div>
</div>
</div>
approot/releases.xml
+4 -4
View File
@@ -22,17 +22,17 @@
</message>
<message id="Lms.Explore.Releases.template.entry">
<div class="row Lms-explore-releases-entry">
<div class="row Lms-explore-releases-entry Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${release-name class="Lms-explore-releasename"}
${release-name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist-name class="Lms-explore-artistname"}</small></h4>${</if-has-artist>}
${<if-has-artist>}<h4><small>${artist-name class="Lms-artistname text-muted"}</small></h4>${</if-has-artist>}
${play-btn}${add-btn}
</div>
</div>
approot/templates.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="container">
${contents class="Lms-contents"}
</div>
${player class="Lms-player"}
${player class="Lms-player well well-sm"}
</message>
</messages>
approot/tracks.xml
+6 -6
View File
@@ -23,19 +23,19 @@
</message>
<message id="Lms.Explore.Tracks.template.entry">
<div class="row Lms-explore-tracks-entry Lms-vertical-align">
<div class="row Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-9 Lms-explore-tracks-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="col-xs-3">
<div class="Lms-explore-tracks-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-tracks-entry-duration">
<div class="Lms-explore-tracks-entry-duration text-muted">
${duration}
</div>
</div>
@@ -43,7 +43,7 @@
</message>
<message id="Lms.Explore.Tracks.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/tracksinfo.xml
+1 -1
View File
@@ -11,7 +11,7 @@
<message id="Lms.Explore.TracksInfo.template.entry">
<div class="row Lms-explore-tracksinfo-entry Lms-vertical-align">
<div class="col-xs-12">
<div class="col-xs-12 Lms-trackname">
${name}
</div>
</div>
docroot/css/lms.css
+39 -137
View File
@@ -3,24 +3,6 @@ a, a:link, a:active, a:visited {
cursor: pointer;
}
a:hover {
color: #337ab7;
}
/* Base style for artist names */
.Lms-explore-artistname
{
color: darkgrey;
font-style: italic;
}
/* Base style for release names */
.Lms-explore-releasename
{
color: black;
font-style: normal;
}
.Lms-vertical-align {
display: flex;
align-items: center;
@@ -35,6 +17,32 @@ a:hover {
margin-bottom: 78px;
}
/* Themable items */
/* Base style for artist names */
.Lms-artistname {
font-style: normal;
}
/* Base style for release names */
.Lms-releasename {
font-style: normal;
}
.Lms-trackname {
font-style: normal;
}
.Lms-entry-hoverable:hover {
/* filter: drop-shadow(0 0 0.2rem darkgrey); */
}
.Lms-control-btn:hover {
color: #337ab7;
}
/* endof Themable items */
.Lms-show-more {
margin-top: 8px;
margin-bottom: 8px;
@@ -52,10 +60,6 @@ a:hover {
margin-bottom: 8px;
}
.Lms-admin-users-entry:hover {
background-color: lightgrey;
}
.Lms-admin-users-entry-role {
margin-left: 8px;
}
@@ -70,7 +74,7 @@ a:hover {
}
.Lms-cluster:hover {
filter: brightness(85%);
filter: brightness(130%);
}
.Lms-cluster-type-0 {
@@ -123,31 +127,17 @@ a:hover {
margin-bottom: 4px;
}
.Lms-cover:hover {
filter: brightness(130%);
}
.Lms-explore-contents {
margin-bottom: 24px;
}
.Lms-explore-filters {
background-color: #f5f5f5;
padding: 8px;
border-radius: 8px;
margin-bottom: 16px;
}
.Lms-explore-info {
background-color: #f5f5f5;
padding: 8px;
border-radius: 8px;
}
.Lms-explore-releases-entry {
padding-top: 8px;
padding-bottom: 8px;
margin: 0px;
}
.Lms-explore-releases-entry:hover {
background-color: lightgrey;
}
.Lms-explore-release-cover {
@@ -157,7 +147,6 @@ a:hover {
}
.Lms-explore-release-entry-tracknumber {
color: darkgrey;
text-align: center;
white-space: nowrap;
}
@@ -169,15 +158,7 @@ a:hover {
}
.Lms-explore-release-entry {
border-bottom-style: solid;
border-bottom-color: lightgrey;
border-bottom-width: thin;
min-height: 32px;
margin: 0px;
}
.Lms-explore-release-entry:hover {
background-color: lightgrey;
}
.Lms-explore-release-entry:hover .Lms-explore-release-entry-controls {
@@ -198,7 +179,6 @@ a:hover {
}
.Lms-explore-release-entry-track-duration {
color: darkgrey;
text-align: right;
white-space: nowrap;
display: block;
@@ -210,25 +190,11 @@ a:hover {
padding-bottom: 4px;
}
.Lms-explore-releaselink:hover {
background-color: lightgrey;
}
.Lms-explore-releaselink-artist {
color: dimgrey;
}
.Lms-explore-artists-entry {
min-height: 48px;
margin: 0px;
}
.Lms-explore-artists-entry:hover {
background-color: lightgrey;
}
.Lms-explore-artists-entry-name {
color: black;
font-style: normal;
}
@@ -239,11 +205,6 @@ a:hover {
.Lms-explore-artist-entry {
padding-top: 8px;
padding-bottom: 8px;
margin: 0px;
}
.Lms-explore-artist-entry:hover {
background-color: lightgrey;
}
.Lms-explore-artistlink {
@@ -251,25 +212,8 @@ a:hover {
margin: 0px;
}
.Lms-explore-artistlink:hover {
background-color: lightgrey;
}
.Lms-explore-artistlink-name {
color: black;
font-style: normal;
}
.Lms-explore-tracks-entry {
min-height: 32px;
border-bottom-style: solid;
border-bottom-color: lightgrey;
border-bottom-width: thin;
margin: 0px;
}
.Lms-explore-tracks-entry:hover {
background-color: lightgrey;
}
.Lms-explore-tracks-entry:hover .Lms-explore-tracks-entry-controls {
@@ -291,7 +235,6 @@ a:hover {
}
.Lms-explore-tracks-entry-duration {
color: darkgrey;
text-align: right;
white-space: nowrap;
display: block;
@@ -302,30 +245,14 @@ a:hover {
margin: 0px;
}
.Lms-explore-tracksinfo-entry:hover {
background-color: lightgrey;
}
.Lms-explore-btn {
font-size: 22px !important;
cursor: pointer;
}
.Lms-explore-btn:hover {
color: #337ab7;
}
.Lms-playqueue-entry {
border-bottom-style: solid;
border-bottom-color: lightgrey;
border-bottom-width: thin;
min-height: 32px;
margin: 0px;
}
.Lms-playqueue-entry:hover {
background-color: lightgrey;
}
.Lms-playqueue-entry:hover .Lms-playqueue-entry-controls {
@@ -342,21 +269,12 @@ a:hover {
margin: 2px;
}
.Lms-playqueue-btn:hover {
color: #337ab7;
}
.Lms-playqueue-btn-selected {
color: #337ab7;
}
.Lms-playqueue-entry-controls {
text-align: right;
display: none;
}
.Lms-playqueue-entry-duration {
color: darkgrey;
text-align: right;
white-space: nowrap;
display: block;
@@ -376,15 +294,8 @@ a:hover {
}
.Lms-playhistory-entry {
border-bottom-style: solid;
border-bottom-color: lightgrey;
border-bottom-width: thin;
min-height: 32px;
margin: 0px;
}
.Lms-playhistory-entry:hover {
background-color: lightgrey;
margin-bottom: 0px;
}
.Lms-playhistory-entry-name {
@@ -397,22 +308,14 @@ a:hover {
bottom: 0;
width: 100%;
height: 70px;
background-color: #f5f5f5;
box-shadow: 0px -2px 8px #f5f5f5;
}
.Lms-player-artistname {
color: dimgrey;
padding: 0px;
margin: 0px;
}
.Lms-player-btn {
cursor: pointer;
}
.Lms-player-btn:hover {
color: #337ab7;
}
.Lms-player-btn-volume {
font-size: 18px !important;
margin: auto;
@@ -427,7 +330,6 @@ a:hover {
.Lms-player-duration {
line-height: 40px;
text-align: right;
color: darkgrey;
white-space: nowrap;
}
@@ -454,6 +356,8 @@ a:hover {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border-style: solid;
border-width: thin;
}
.Lms-player-seek::-webkit-slider-thumb {
@@ -470,10 +374,6 @@ a:hover {
width: 0px;
}
.Lms-player-progress {
background-color: darkgrey;
}
.Lms-player-controls {
text-align: center;
white-space: nowrap;
@@ -508,10 +408,12 @@ a:hover {
appearance: none;
width: 100%;
height: 8px;
background: lightgrey;
outline: none;
cursor: pointer;
border-radius: 4px;
background-color: inherit;
border-style: solid;
border-width: thin;
}
.Lms-player-volume-slider::-webkit-slider-thumb {