From fa14586b64eafa22c91ecf8d81145635cdca4c45 Mon Sep 17 00:00:00 2001 From: emeric Date: Sun, 12 Apr 2020 18:35:21 +0200 Subject: [PATCH] Reworked CSS in order to isolate themable elements --- approot/artist.xml | 12 +-- approot/artistlink.xml | 4 +- approot/artists.xml | 4 +- approot/explore.xml | 8 +- approot/mediaplayer.xml | 17 ++-- approot/playhistory.xml | 24 +++--- approot/playqueue.xml | 44 +++++----- approot/release.xml | 16 ++-- approot/releaselink.xml | 8 +- approot/releases.xml | 8 +- approot/templates.xml | 2 +- approot/tracks.xml | 12 +-- approot/tracksinfo.xml | 2 +- docroot/css/lms.css | 176 +++++++++------------------------------- 14 files changed, 123 insertions(+), 214 deletions(-) diff --git a/approot/artist.xml b/approot/artist.xml index 683afa84..41c5e32f 100644 --- a/approot/artist.xml +++ b/approot/artist.xml @@ -4,7 +4,7 @@
-

${name}

+

${name}

${clusters} ${play-btn}${add-btn}
@@ -12,18 +12,18 @@ -
+
- ${cover class="media-object"} + ${cover class="media-object Lms-cover"}

- ${name class="Lms-explore-releasename"} + ${name class="Lms-releasename text-primary"}

- ${}

${artist class="Lms-explore-artistname"}

${} -

${}${year}${}${} (${orig-year})${}

+ ${}

${artist class="Lms-artistname text-muted"}

${} +

${}${year}${}${} (${orig-year})${}

${play-btn}${add-btn}
diff --git a/approot/artistlink.xml b/approot/artistlink.xml index cb02a39c..0bb277de 100644 --- a/approot/artistlink.xml +++ b/approot/artistlink.xml @@ -3,9 +3,9 @@ -
+
- ${name class="Lms-explore-artistname Lms-explore-artistlink-name"} + ${name class="Lms-artistname text-primary"}
diff --git a/approot/artists.xml b/approot/artists.xml index 519618ce..eb42b80e 100644 --- a/approot/artists.xml +++ b/approot/artists.xml @@ -28,9 +28,9 @@ -
+
-

${name class="Lms-explore-artistname Lms-explore-artists-entry-name"}

+

${name class="Lms-artistname text-primary"}

diff --git a/approot/explore.xml b/approot/explore.xml index 047d14c5..b61d5d62 100644 --- a/approot/explore.xml +++ b/approot/explore.xml @@ -7,18 +7,18 @@ ${contents class="Lms-explore-contents"}
- ${filters class="Lms-explore-filters"} - ${info class="Lms-explore-info"} + ${filters class="well well-sm"} + ${info class="well well-sm"}
- + - + diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml index e8212a76..d7ad4dcc 100644 --- a/approot/mediaplayer.xml +++ b/approot/mediaplayer.xml @@ -8,20 +8,20 @@
-
+
- - - + + +
- diff --git a/approot/playhistory.xml b/approot/playhistory.xml index 9e8646eb..f0846223 100644 --- a/approot/playhistory.xml +++ b/approot/playhistory.xml @@ -3,23 +3,27 @@ -
-

${tr:Lms.PlayHistory.playhistory}

-
- ${entries}
-
- ${show-more class="btn-primary Lms-show-more"} +
+
+

${tr:Lms.PlayHistory.playhistory}

+
+ ${entries} +
+
+ ${show-more class="btn-primary Lms-show-more"} +
+
-
+
-

${name}

+

${name}

${} - ${}${release class="Lms-explore-releasename"}${} + ${}${release class="Lms-releasename text-primary"}${} ${}${artists}${} ${}
@@ -27,7 +31,7 @@ - ${artist class="Lms-explore-artistname"} + ${artist class="Lms-artistname text-muted"} diff --git a/approot/playqueue.xml b/approot/playqueue.xml index 08d85395..3852af69 100644 --- a/approot/playqueue.xml +++ b/approot/playqueue.xml @@ -3,57 +3,61 @@ - + - + - + - + -
-

${tr:Lms.PlayQueue.playqueue}

- ${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn} -

${nb-tracks}

-
- ${entries}
-
- ${show-more class="btn-primary Lms-show-more"} +
+
+

${tr:Lms.PlayQueue.playqueue}

+ ${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn} +

${nb-tracks}

+
+ ${entries} +
+
+ ${show-more class="btn-primary Lms-show-more"} +
+
- + - + -
+
-

${name}

+

${name}

${} - ${}${release class="Lms-explore-releasename"}${} - ${}${artists}${} + ${}${release class="Lms-releasename text-primary"}${} + ${}${artists}${} ${}
${play-btn}${del-btn}
-
+
${duration}
@@ -61,7 +65,7 @@ - ${artist class="Lms-explore-artistname"} + ${artist class="Lms-artistname text-muted"} diff --git a/approot/release.xml b/approot/release.xml index 14bd076b..af5d0e44 100644 --- a/approot/release.xml +++ b/approot/release.xml @@ -13,8 +13,8 @@
-

${name}

- ${}

${artist class="Lms-explore-artistname"}

${} +

${name}

+ ${}

${artist class="Lms-artistname text-muted"}

${}

${}${year}${}${} (${orig-year})${}

${clusters} ${play-btn}${add-btn} @@ -23,19 +23,19 @@ -
-
+
+
${}${disc-number}-${}${}${track-number}${}
- ${name} - ${}${artists}${} +
${name}
+ ${}${artists}${}
${play-btn}${add-btn}
-
+
${duration}
@@ -43,7 +43,7 @@ - ${artist class="Lms-explore-artistname"} + ${artist class="Lms-artistname text-muted"} diff --git a/approot/releaselink.xml b/approot/releaselink.xml index 88ba9508..6c028c21 100644 --- a/approot/releaselink.xml +++ b/approot/releaselink.xml @@ -3,17 +3,17 @@ -
+
- ${cover class="media-object"} + ${cover class="media-object Lms-cover"}
- ${release-name class="Lms-explore-releasename"} + ${release-name class="Lms-releasename text-primary"}
- ${}${artist-name class="Lms-explore-artistname Lms-explore-releaselink-artist"}${} + ${}${artist-name class="Lms-artistname text-muted"}${}
diff --git a/approot/releases.xml b/approot/releases.xml index a23648dd..9a54f043 100644 --- a/approot/releases.xml +++ b/approot/releases.xml @@ -22,17 +22,17 @@ -
+
- ${cover class="media-object"} + ${cover class="media-object Lms-cover"}

- ${release-name class="Lms-explore-releasename"} + ${release-name class="Lms-releasename text-primary"}

- ${}

${artist-name class="Lms-explore-artistname"}

${} + ${}

${artist-name class="Lms-artistname text-muted"}

${} ${play-btn}${add-btn}
diff --git a/approot/templates.xml b/approot/templates.xml index eb2e2762..87ccce7e 100644 --- a/approot/templates.xml +++ b/approot/templates.xml @@ -6,7 +6,7 @@
${contents class="Lms-contents"}
- ${player class="Lms-player"} + ${player class="Lms-player well well-sm"} diff --git a/approot/tracks.xml b/approot/tracks.xml index d4346966..cbf23256 100644 --- a/approot/tracks.xml +++ b/approot/tracks.xml @@ -23,19 +23,19 @@ -
+
-

${name}

+

${name}

${} - ${}${release class="Lms-explore-releasename"}${} - ${}${artists}${} + ${}${release class="Lms-releasename text-primary"}${} + ${}${artists}${} ${}
${play-btn}${add-btn}
-
+
${duration}
@@ -43,7 +43,7 @@ - ${artist class="Lms-explore-artistname"} + ${artist class="Lms-artistname text-muted"} diff --git a/approot/tracksinfo.xml b/approot/tracksinfo.xml index 2eaa98c2..f1d8bc91 100644 --- a/approot/tracksinfo.xml +++ b/approot/tracksinfo.xml @@ -11,7 +11,7 @@
-
+
${name}
diff --git a/docroot/css/lms.css b/docroot/css/lms.css index a9d84bb6..9fcc36a0 100644 --- a/docroot/css/lms.css +++ b/docroot/css/lms.css @@ -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 {