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

Some more polish both flatly and darkly themes

Browse Source
This commit is contained in:
emeric
2020-04-13 14:46:46 +02:00
parent fa14586b64
commit 036cef4510
11 changed files with 190 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/templates.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<messages xmlns:if="Wt.WTemplate.conditions">
<message id="Lms.template">
${navbar-top class="main-nav"}
${navbar-top class="Lms-navbar"}
<div class="container">
${contents class="Lms-contents"}
</div>
docroot/css/bootstrap-darkly.min.css
Vendored Executable
+11
View File
File diff suppressed because one or more lines are too long
docroot/css/bootstrap-flatly.min.css
Vendored Executable
+11
View File
File diff suppressed because one or more lines are too long
docroot/css/lms-darkly.css
+37
View File
@@ -0,0 +1,37 @@
:root {
--hover-color: #00bc8c;
--body-color: #cacaca;
--slider-background-color: #5a5a5a;
}
.Lms-artistname.text-muted {
font-style: italic;
color: #7e7e7e;
}
.Lms-player-btn {
color: var(--body-color)
}
.Lms-releasename.text-primary, .Lms-releasename.text-primary:hover {
color: var(--body-color)
}
a.Lms-releasename.text-primary:hover {
color: var(--hover-color)
}
.Lms-trackname.text-primary, .Lms-trackname.text-primary:hover {
color: var(--body-color)
}
/*
.Lms-entry-hoverable:hover {
filter: drop-shadow(0 0 0.2rem darkgrey);
}
*/
.media, .media-body {
overflow: visible;
}
docroot/css/lms-flatly.css
+21
View File
@@ -0,0 +1,21 @@
:root {
--hover-color: #18bc9c;
--body-color: #2c3e50;
--slider-background-color: #c0cfde;
}
.Lms-artistname.text-muted {
font-style: italic;
color: #7e8f9e;
}
/*
.Lms-entry-hoverable:hover {
filter: drop-shadow(0 0 0.2rem darkgrey);
}
*/
.media, .media-body {
overflow: visible;
}
docroot/css/lms.css
+81 -58
View File
@@ -17,32 +17,6 @@ a, a:link, a:active, a:visited {
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;
@@ -68,6 +42,14 @@ a, a:link, a:active, a:visited {
margin-right: 8px;
}
.Lms-artistname {
color: var(--body-color);
}
a.Lms-artistname:hover, a.Lms-artistname:focus {
color: var(--hover-color);
}
.Lms-cluster {
display: inline;
cursor: pointer;
@@ -127,10 +109,31 @@ a, a:link, a:active, a:visited {
margin-bottom: 4px;
}
.Lms-control-btn:hover {
color: var(--hover-color);
}
.Lms-cover:hover {
filter: brightness(130%);
}
.Lms-cover-small {
width: 64px; /* some cover may not be square */
border-radius: 10px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Lms-cover-medium {
width: 128px;
border-radius: 16px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Lms-cover-large {
border-radius: 16px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Lms-explore-contents {
margin-bottom: 24px;
}
@@ -142,8 +145,6 @@ a, a:link, a:active, a:visited {
.Lms-explore-release-cover {
max-width: 100%;
border-radius: 8px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.Lms-explore-release-entry-tracknumber {
@@ -250,6 +251,9 @@ a, a:link, a:active, a:visited {
cursor: pointer;
}
.Lms-navbar {
border-radius: 0px;
}
.Lms-playqueue-entry {
min-height: 32px;
@@ -327,26 +331,19 @@ a, a:link, a:active, a:visited {
width: 0.9em;
}
.Lms-player-controls {
text-align: center;
white-space: nowrap;
}
.Lms-player-duration {
line-height: 40px;
text-align: right;
white-space: nowrap;
}
.Lms-player-seek-container {
margin-top: 8px;
margin-bottom: 8px;
position: relative;
width: 100%;
height: 8px;
}
.Lms-player-seek-common {
position: absolute;
width:100%;
top: 0px;
left: 0px;
height: 8px;
.Lms-player-progress {
background-color: var(--slider-background-color);
}
.Lms-player-seek {
@@ -367,6 +364,23 @@ a, a:link, a:active, a:visited {
width: 0px;
}
.Lms-player-seek-container {
margin-top: 8px;
margin-bottom: 8px;
position: relative;
width: 100%;
height: 8px;
}
.Lms-player-seek-common {
position: absolute;
width:100%;
top: 0px;
left: 0px;
height: 8px;
border-radius: 4px;
}
.Lms-player-seek::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
@@ -374,11 +388,6 @@ a, a:link, a:active, a:visited {
width: 0px;
}
.Lms-player-controls {
text-align: center;
white-space: nowrap;
}
.Lms-player-text-center {
text-align: center;
white-space: nowrap;
@@ -397,10 +406,20 @@ a, a:link, a:active, a:visited {
display: flex;
}
.Lms-player-volume-slider-container {
display: inline-block;
width: 85px;
margin: auto;
.Lms-player-volume-slider::-webkit-slider-thumb {
background-color: var(--body-color);
}
.Lms-player-volume-slider::-webkit-slider-thumb:hover {
background-color: var(--hover-color);
}
.Lms-player-volume-slider::-moz-range-thumb {
background-color: var(--body-color);
}
.Lms-player-volume-slider::-moz-range-thumb:hover {
background-color: var(--hover-color);
}
.Lms-player-volume-slider {
@@ -411,9 +430,9 @@ a, a:link, a:active, a:visited {
outline: none;
cursor: pointer;
border-radius: 4px;
background-color: inherit;
border-style: solid;
border-width: thin;
background-color: var(--slider-background-color);
}
.Lms-player-volume-slider::-webkit-slider-thumb {
@@ -422,21 +441,25 @@ a, a:link, a:active, a:visited {
width: 14px;
height: 14px;
border-radius: 7px;
background: darkgrey;
}
.Lms-player-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 7px;
background: darkgrey;
}
.Lms-player-volume-slider::-webkit-slider-thumb:hover {
background: #337ab7;
.Lms-player-volume-slider-container {
display: inline-block;
width: 85px;
margin: auto;
}
.Lms-player-volume-slider::-moz-range-thumb:hover {
background: #337ab7;
.Lms-releasename {
color: var(--body-color);
}
a.Lms-releasename:hover, a.Lms-releasename:focus {
color: var(--hover-color);
}
src/lms/ui/LmsApplication.cpp
+20 -1
View File
@@ -22,6 +22,7 @@
#include <Wt/WAnchor.h>
#include <Wt/WBootstrapTheme.h>
#include <Wt/WEnvironment.h>
#include <Wt/WLinkedCssStyleSheet.h>
#include <Wt/WMenu.h>
#include <Wt/WNavigationBar.h>
#include <Wt/WPopupMenu.h>
@@ -115,7 +116,25 @@ LmsApplication::LmsApplication(const Wt::WEnvironment& env,
_dbSession {db},
_appGroups {appGroups}
{
auto bootstrapTheme = std::make_unique<Wt::WBootstrapTheme>();
class MyTheme : public Wt::WBootstrapTheme
{
private:
std::vector<Wt::WLinkedCssStyleSheet> styleSheets() const override
{
return
{
Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-flatly.min.css"}},
Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-flatly.css"}},
// Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-darkly.min.css"}},
// Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-darkly.css"}},
// Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-slate.css"}},
Wt::WLinkedCssStyleSheet { Wt::WLink {"resources/themes/bootstrap/3/wt.css"}},
};
}
};
auto bootstrapTheme = std::make_unique<MyTheme>();
bootstrapTheme->setVersion(Wt::BootstrapVersion::v3);
bootstrapTheme->setResponsive(true);
setTheme(std::move(bootstrapTheme));
src/lms/ui/explore/ArtistView.cpp
+1 -2
View File
@@ -132,8 +132,7 @@ Artist::refresh()
auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
// Some images may not be square
cover->setWidth(128);
cover->setStyleClass("Lms-cover-medium");
anchor->setImage(std::move(cover));
}
src/lms/ui/explore/ReleaseLink.cpp
+2 -2
View File
@@ -39,8 +39,8 @@ ReleaseLink::ReleaseLink(Database::Release::pointer release)
Wt::WAnchor* anchor = bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 48));
cover->setWidth(48);
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 64));
cover->setStyleClass("Lms-cover-small");
anchor->setImage(std::move(cover));
auto artists = release->getReleaseArtists();
src/lms/ui/explore/ReleaseView.cpp
+4 -1
View File
@@ -114,7 +114,10 @@ Release::refresh()
}
}
t->bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 512)));
{
Wt::WImage* cover {t->bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 512)))};
cover->setStyleClass("Lms-cover-large");
}
Wt::WContainerWidget* clusterContainers {t->bindNew<Wt::WContainerWidget>("clusters")};
{
src/lms/ui/explore/ReleasesView.cpp
+1 -1
View File
@@ -98,7 +98,7 @@ Releases::addSome()
auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
// Some images may not be square
cover->setWidth(128);
cover->setStyleClass("Lms-cover-medium");
anchor->setImage(std::move(cover));
entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(release));