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

Added some color transitions, ref #82

Browse Source
This commit is contained in:
emeric
2020-09-01 13:42:17 +02:00
parent 8a84a078be
commit b3f14153d2
11 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/artist.xml
+2 -2
View File
@@ -24,7 +24,7 @@
<div class="col-md-4"> <div class="col-md-4">
<div class="well well-sm"> <div class="well well-sm">
<h3>${tr:Lms.Explore.links}</h3> <h3>${tr:Lms.Explore.links}</h3>
${mbid-link class="text-muted"} ${mbid-link class="Lms-btn text-muted"}
</div> </div>
</div> </div>
${</if-has-mbid>} ${</if-has-mbid>}
@@ -41,7 +41,7 @@
</div> </div>
<div class="col-xs-8 col-sm-9 col-md-10 Lms-explore-list-entry-text-container"> <div class="col-xs-8 col-sm-9 col-md-10 Lms-explore-list-entry-text-container">
<h5>${name class="Lms-releasename text-primary"}</h5> <h5>${name class="Lms-releasename text-primary"}</h5>
${<if-has-artist>}<h6>${artist class="Lms-artistname text-muted"}</h6>${</if-has-artist>} ${<if-has-artist>}<h6>${artist class="Lms-btn Lms-artistname text-muted"}</h6>${</if-has-artist>}
<h6><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h6> <h6><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h6>
</div> </div>
</div> </div>
approot/artists.xml
+2 -2
View File
@@ -18,13 +18,13 @@
<message id="Lms.Explore.Artists.template.entry"> <message id="Lms.Explore.Artists.template.entry">
<div class="Lms-explore-artists-entry Lms-entry-hoverable Lms-vertical-align"> <div class="Lms-explore-artists-entry Lms-entry-hoverable Lms-vertical-align">
<h4>${name class="Lms-artistname text-primary"}</h4> <h4>${name class="Lms-btn Lms-artistname text-primary"}</h4>
</div> </div>
</message> </message>
<message id="Lms.Explore.Artists.template.entry-small"> <message id="Lms.Explore.Artists.template.entry-small">
<div class="Lms-explore-artists-entry-small Lms-entry-hoverable Lms-vertical-align"> <div class="Lms-explore-artists-entry-small Lms-entry-hoverable Lms-vertical-align">
${name class="Lms-artistname text-primary"} ${name class="Lms-btn Lms-artistname text-primary"}
</div> </div>
</message> </message>
approot/explore.xml
+2 -2
View File
@@ -5,8 +5,8 @@
${contents class="Lms-explore-contents"} ${contents class="Lms-explore-contents"}
</message> </message>
<message id="Lms.Explore.template.more-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-control-btn"></i></message> <message id="Lms.Explore.template.more-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-btn"></i></message>
<message id="Lms.Explore.template.play-btn"><i class="fa fa-play-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 Lms-btn"></i></message>
<message id="Lms.Explore.template.filters"> <message id="Lms.Explore.template.filters">
${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"} ${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"}
approot/mediaplayer.xml
+4 -4
View File
@@ -16,11 +16,11 @@
<div class="row"> <div class="row">
<div class="col-xs-5 col-sm-2 Lms-player-controls"> <div class="col-xs-5 col-sm-2 Lms-player-controls">
<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> <i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
</div> </div>
<div class="hidden-xs col-sm-2"> <div class="hidden-xs col-sm-2">
<div class="Lms-player-volume"> <div class="Lms-player-volume">
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-control-btn Lms-player-btn-volume"></i> <i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-btn Lms-player-btn-volume"></i>
<span class="hidden-xs Lms-player-volume-slider-container"> <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"/> <input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
</span> </span>
@@ -31,11 +31,11 @@
${title class="Lms-player-text Lms-trackname text-primary"} ${title class="Lms-player-text Lms-trackname text-primary"}
</div> </div>
<div class="Lms-player-text-center"> <div class="Lms-player-text-center">
<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> <span class="hidden-xs">${release class="Lms-btn Lms-player-text Lms-releasename text-primary"}</span><small>${artist class="Lms-btn Lms-player-text Lms-artistname text-muted"}</small>
</div> </div>
</div> </div>
<div class="hidden-xs col-sm-2 Lms-player-duration text-muted"> <div class="hidden-xs col-sm-2 Lms-player-duration text-muted">
<a id="lms-transcoding-active" class="Lms-player-btn Lms-control-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></a> <a id="lms-transcoding-active" class="Lms-player-btn Lms-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></a>
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span> <span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
</div> </div>
</div> </div>
approot/playqueue.xml
+8 -8
View File
@@ -2,10 +2,10 @@
<messages xmlns:if="Wt.WTemplate.conditions"> <messages xmlns:if="Wt.WTemplate.conditions">
<!--FORMS message blocks--> <!--FORMS message blocks-->
<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template"> <message id="Lms.PlayQueue.template">
<div class="row"> <div class="row">
@@ -21,8 +21,8 @@
</div> </div>
</message> </message>
<message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message> <message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
<message id="Lms.PlayQueue.template.entry"> <message id="Lms.PlayQueue.template.entry">
<div class="row Lms-vertical-align Lms-explore-entry-list Lms-playqueue-entry ${is-selected}"> <div class="row Lms-vertical-align Lms-explore-entry-list Lms-playqueue-entry ${is-selected}">
@@ -34,7 +34,7 @@
<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container"> <div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
<div class="Lms-trackname text-primary"><h5>${name}</h5></div> <div class="Lms-trackname text-primary"><h5>${name}</h5></div>
${<if-has-artists-or-release>} ${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>} ${<if-has-release>}<small>${release class="Lms-btn Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>} ${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>} ${</if-has-artists-or-release>}
</div> </div>
@@ -50,7 +50,7 @@
</message> </message>
<message id="Lms.PlayQueue.template.entry-artist"> <message id="Lms.PlayQueue.template.entry-artist">
<small>${artist class="Lms-artistname text-muted"}</small> <small>${artist class="Lms-btn Lms-artistname text-muted"}</small>
</message> </message>
</messages> </messages>
approot/release.xml
+2 -2
View File
@@ -14,7 +14,7 @@
<div class="col-md-8"> <div class="col-md-8">
<div class="Lms-header"> <div class="Lms-header">
<h3><div class="Lms-releasename text-primary">${name}</div></h3> <h3><div class="Lms-releasename text-primary">${name}</div></h3>
${<if-has-artist>}<h4>${artist class="Lms-artistname text-muted"}</h4>${</if-has-artist>} ${<if-has-artist>}<h4>${artist class="Lms-btn Lms-artistname text-muted"}</h4>${</if-has-artist>}
<div class="text-muted"><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></div> <div class="text-muted"><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></div>
${clusters} ${clusters}
${play-btn}${more-btn} ${play-btn}${more-btn}
@@ -45,7 +45,7 @@
<div class="col-xs-12 col-md-4"> <div class="col-xs-12 col-md-4">
<div class="well well-sm"> <div class="well well-sm">
<h3>${tr:Lms.Explore.links}</h3> <h3>${tr:Lms.Explore.links}</h3>
${mbid-link class="text-muted"} ${mbid-link class="Lms-btn text-muted"}
</div> </div>
</div> </div>
${</if-has-mbid>} ${</if-has-mbid>}
approot/releases.xml
+2 -2
View File
@@ -21,8 +21,8 @@
${cover} ${cover}
</div> </div>
<div class="Lms-explore-entry-grid-text-container"> <div class="Lms-explore-entry-grid-text-container">
<h5>${release-name class="Lms-releasename text-primary"}</h5> <h5>${release-name class="Lms-btn Lms-releasename text-primary"}</h5>
<div class="Lms-explore-entry-separator"><h6>${<if-has-year>}<small><span class="text-muted">${year}</span></small>${</if-has-year>}${<if-has-artist>}${artist-name class="Lms-artistname text-muted"}${</if-has-artist>}</h6></div> <div class="Lms-explore-entry-separator"><h6>${<if-has-year>}<small><span class="text-muted">${year}</span></small>${</if-has-year>}${<if-has-artist>}${artist-name class="Lms-btn Lms-artistname text-muted"}${</if-has-artist>}</h6></div>
</div> </div>
</div> </div>
</div> </div>
approot/templates.xml
+7 -7
View File
@@ -11,17 +11,17 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
${title class="navbar-brand"} ${title class="navbar-brand Lms-btn"}
<div class="Lms-navbar-search pull-left"> <div class="Lms-navbar-search pull-left">
${search class="form-control"} ${search class="form-control"}
</div> </div>
</div> </div>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li>${artists}</li> <li>${artists class="Lms-btn"}</li>
<li>${releases}</li> <li>${releases class="Lms-btn"}</li>
<li>${tracks}</li> <li>${tracks class="Lms-btn"}</li>
<li>${playqueue}</li> <li>${playqueue class="Lms-btn"}</li>
</ul> </ul>
<div class="navbar-form navbar-left"> <div class="navbar-form navbar-left">
${filters class="form-group Lms-clusters-control"} ${filters class="form-group Lms-clusters-control"}
@@ -29,7 +29,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
${<if-is-admin>} ${<if-is-admin>}
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.administration}"><i class="fa fa-cogs" aria-hidden="true"></i> <span class="caret"></span></a> <a href="#" class="Lms-btn dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.administration}"><i class="fa fa-cogs" aria-hidden="true"></i> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li>${database}</li> <li>${database}</li>
<li>${users}</li> <li>${users}</li>
@@ -37,7 +37,7 @@
</li> </li>
${</if-is-admin>} ${</if-is-admin>}
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.user}"><i class="fa fa-user" aria-hidden="true"></i> <a href="#" class="Lms-btn dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.user}"><i class="fa fa-user" aria-hidden="true"></i>
<span class="caret"></span></a> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li class="dropdown-header">${username}</li> <li class="dropdown-header">${username}</li>
approot/tracks.xml
+2 -2
View File
@@ -27,7 +27,7 @@
<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container"> <div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
<div class="Lms-trackname text-primary"><h5>${name}</h5></div> <div class="Lms-trackname text-primary"><h5>${name}</h5></div>
${<if-has-artists-or-release>} ${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>} ${<if-has-release>}<small>${release class="Lms-btn Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>} ${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>} ${</if-has-artists-or-release>}
</div> </div>
@@ -43,7 +43,7 @@
</message> </message>
<message id="Lms.Explore.Tracks.template.entry-artist"> <message id="Lms.Explore.Tracks.template.entry-artist">
<small>${artist class="Lms-artistname text-muted"}</small> <small>${artist class="Lms-btn Lms-artistname text-muted"}</small>
</message> </message>
</messages> </messages>
docroot/css/lms-darkly.css
-4
View File
@@ -19,10 +19,6 @@ a.Lms-artistname.text-primary:hover {
color: var(--hover-color) color: var(--hover-color)
} }
.Lms-control-btn {
color: var(--body-color)
}
.Lms-releasename.text-primary, .Lms-releasename.text-primary:hover { .Lms-releasename.text-primary, .Lms-releasename.text-primary:hover {
color: var(--body-color) color: var(--body-color)
} }
docroot/css/lms.css
+11 -5
View File
@@ -41,6 +41,15 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
color: var(--hover-color); color: var(--hover-color);
} }
.Lms-btn {
cursor: pointer;
}
.Lms-btn:hover {
color: var(--hover-color);
transition: color .20s cubic-bezier(.43,-.1,.16,1.1);
}
.Lms-cluster { .Lms-cluster {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@@ -51,17 +60,13 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
.Lms-cluster:hover { .Lms-cluster:hover {
filter: brightness(130%); filter: brightness(130%);
transition: filter .20s cubic-bezier(.43,-.1,.16,1.1);
} }
.Lms-clusters-control { .Lms-clusters-control {
margin-top: 4px; margin-top: 4px;
} }
.Lms-control-btn:hover {
color: var(--hover-color);
cursor: pointer;
}
.Lms-cover { .Lms-cover {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@@ -84,6 +89,7 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
.Lms-cover:hover { .Lms-cover:hover {
filter: brightness(130%); filter: brightness(130%);
transition: filter .20s cubic-bezier(.43,-.1,.16,1.1);
} }
.Lms-cover-container { .Lms-cover-container {