j1-template 2024.3.19 → 2024.3.21

data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.css

@@ -14,7 +14,7 @@
 */
 
 /* 1. Base
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 .compact-player {
   width: 500px;
@@ -29,29 +29,32 @@
   overflow-y: clip;
 }
 
-.meta-container.compact-player {
-  height: 120px;
-  border: 0px;       /* jadams 2024-11-06: workaround, prevent double borders */
+.compact-player-middle {
+  padding: 10px 10px 10px 10px;
+  background-color: var(--ajs-theme-uno--blue-gray-900);
+}
+
+.player-bottom {
+  background-color: var(--ajs-theme-uno--black);
 }
 
+
 /* 2. Components
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* Player TOP
 # --------------------------------------------------------- */
-div.player-top {
+.player-top {
   position: relative;
 }
 
-/* jadams, 2024-11-04: Overload user agent styles for width|height */
-div.player-top
-img[data-amplitude-song-info="cover_art_url"] {
+.player-top img[data-amplitude-song-info="cover_art_url"] {
   width: 498px;    /* size of cover image (rendered) - 1px borders left|right */
   height: auto;
   object-fit: cover;
 }
 
-div.compact-player-header {
+.compact-player-header {
   position: relative;
   padding: 15px;
   cursor: pointer;
@@ -67,234 +70,121 @@ div.compact-player-header {
   left: 15px;
 }
 
-.compact-player-header-arrows.arrow-down {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/up.svg") no-repeat;
-}
-
-.compact-player-header-arrows.arrow-up {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/down.svg") no-repeat;
-}
-
 /* Player MIDDLE
 # --------------------------------------------------------- */
-div#compact_player_control_container {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
 
-/* clearfix */
-div#compact_player_control_container:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-div#compact_player_control_container
-div.volume-container {
-  float: left;
-  width: 88%;
-  margin-top: 20px;
-  margin-left: 12px;
-}
-
-/* clearfix */
-div#compact_player_control_container
-div.volume-container:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-div#compact_player_control_container
-div.volume-container
-div.volume-controls
-input[type=range] {
-  width: calc(100% - 45px);
-}
-
-div#compact_player_control_container
-div.amplitude-mute {
-  float: left;
-  cursor: pointer;
-  width: 25px;
-  height: 19px;
-  margin-left: 40px;
-}
-
-div#compact_player_control_container
-div.amplitude-mute.amplitude-muted {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
-}
-
-div#compact_player_control_container
-div.amplitude-mute.amplitude-not-muted {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
-}
-
-div#compact_player_controls {
- height: 65px;
-}
-
-div#compact_player_controls
-div.compact-player-controls-container {
-  text-align: center;
-}
-
-div.compact-player-middle {
-  padding: 10px 10px 10px 10px;
-  background-color: var(--ajs-theme-uno--blue-gray-900);
-}
-
-div.compact-player-middle
-div.compact-player-controls-container {
-  display: block;
-}
-
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_shuffle {
+.compact-player-shuffle {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   width: 24px;
   height: 24px;
   vertical-align: middle;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_shuffle:hover {
+.compact-player-shuffle:hover {
   opacity: 0.5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_shuffle.amplitude-shuffle-off {
+/* .compact-player-shuffle.amplitude-shuffle-off {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_shuffle.amplitude-shuffle-on {
+.compact-player-shuffle.amplitude-shuffle-on {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
-}
+} */
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_previous {
+.compact-player-previous {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   vertical-align: middle;
   width: 24px;
   height: 24px;
   margin-right: 20px;
-  margin-left: 20px; /* jadams: workaround to center player controls|volume slider */
-}
-
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_previous {
-  display: inline-block;
-  cursor: pointer;
-  height: 24px;
-  width: 24px;
-  margin-right: 20px;
-  vertical-align: middle;
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat;
+  margin-left: 20px;
+  /* background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat; */
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_previous:hover {
+.compact-player-previous:hover {
   opacity: 0.5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div.compact-player-skip-backward {
+.compact-player-skip-backward {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   height: 24px;
   width: 24px;
   margin-right: 20px;
   vertical-align: middle;
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
+  /* background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat; */
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div.compact-player-skip-backward:hover {
+.compact-player-skip-backward:hover {
   opacity: 0.5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_play_pause {
+.compact-player-play-pause {
   display: inline-block;
-  cursor: pointer;
+  user-select: none;
   width: 60px;
   height: 60px;
+  cursor: pointer;
   vertical-align: middle;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_play_pause:hover {
-  opacity: .5;
+.compact-player-play-pause:hover {
+  opacity: 0.5;
+}
+
+.compact-player-play-pause:focus:not(:focus-visible) {
+  outline: none;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_play_pause.amplitude-paused {
+.compact-player-play-pause.amplitude-paused {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_play_pause.amplitude-playing {
+.compact-player-play-pause.amplitude-playing {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div.compact-player-skip-forward {
+
+.compact-player-skip-forward {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   height: 24px;
   width: 24px;
   margin-left: 20px;
   vertical-align: middle;
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
+  /* background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat; */
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div.compact-player-skip-forward:hover {
+.compact-player-skip-forward:hover {
   opacity: .5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_next {
+.compact-player-next {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   height: 24px;
   width: 24px;
   margin-right: 25px;
   margin-left: 20px;
   vertical-align: middle;
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat;
+  /* background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat; */
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_next:hover {
+.compact-player-next:hover {
   opacity: .5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_repeat {
+.compact-player-repeat {
   display: inline-block;
+  user-select: none;
   cursor: pointer;
   width: 24px;
   height: 24px;
@@ -302,61 +192,61 @@ div#compact_player_repeat {
   margin-right: 25px;
 }
 
-div.compact-player-middle
-div.large-player-controls-container
-div#compact_player_repeat:hover {
+.compact-player-repeat:hover {
   opacity: .5;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_repeat.amplitude-repeat-off {
+/* .compact-player-repeat.amplitude-repeat-off {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
 }
 
-div.compact-player-middle
-div.compact-player-controls-container
-div#compact_player_repeat.amplitude-repeat-on {
+.compact-player-repeat.amplitude-repeat-on {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
+} */
+
+.compact-player-control-container {
+  margin-top: 20px;
+  margin-bottom: 10px;
 }
 
 /* clearfix */
-div.compact-player-middle
-div.compact-player-controls-container::after {
+.compact-player-control-container:after {
   content: "";
   display: table;
   clear: both;
 }
 
-div.compact-player-middle
-div.volume-container img {
+.compact-player-controls-container {
+  text-align: center;
+}
+
+/* clearfix */
+.compact-player-controls-container::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.volume-container img {
   display: block;
   float: left;
 }
 
 /* clearfix */
-div.compact-player-middle
-div.volume-container:after {
+.volume-container:after {
   content: "";
   display: table;
   clear: both;
 }
 
-div.compact-player-middle
-div.volume-controls
-div.amplitude-mute.amplitude-not-muted {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
+.compact-player-amplitude-mute {
+  margin-left: 28px;
 }
 
-div.compact-player-middle
-div.volume-controls
-div.amplitude-mute.amplitude-muted {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
-}
 
 /* Player BOTTOM
 # --------------------------------------------------------- */
-div.player-bottom {
+.player-bottom {
   background-color: var(--ajs-theme-uno--black);
 }
 
@@ -382,23 +272,39 @@ Bootstrap (BS) grid breakpoints
 
 @media screen and (max-width: 576px) {
 
-  /* jadams, workaround to limit player width on smart phones */
   .compact-player {
     max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
     max-width: -moz-available; /* Firefox */
   }
 
-  div.player-top img[data-amplitude-song-info="cover_art_url"] {
+  .player-top img[data-amplitude-song-info="cover_art_url"] {
     max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
     max-width: -moz-available; /* Firefox */
   }
 
+  .compact-player-playlist {
+    width: calc(100% - 1px); 
+  }
+
+  .compact-player-volume-container
   input[type=range].amplitude-volume-slider {
-    width: calc(100% - 100px);
+    appearance: none;
   }
 
-  div.compact-player-playlist {
-    width: calc(100% - 1px); 
+  .compact-player-volume-container
+  input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-top: -15px;
+  }
+
+  .compact-player-volume-container
+  input[type=range].amplitude-volume-slider::-moz-slider-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-top: -15px;
   }
 
 }
@@ -409,10 +315,10 @@ Bootstrap (BS) grid breakpoints
 
 /* playlist
 # --------------------------------------------------------- */
-.compact-player-title-list {
-  display: block;
-  height: 550px;
-  overflow-y: scroll;
+
+.meta-container.compact-player {
+  height: 120px;
+  border: 0px;
 }
 
 .playlist-screen-meta-container {
@@ -420,84 +326,70 @@ Bootstrap (BS) grid breakpoints
   width: calc(100% - 123px);
 }
 
-div.compact-player-volume-container {
+.compact-player-volume-container {
   margin-top: 20px;
 }
 
-div.compact-player-playlist {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  /* jadams 2024-11-07, workaround  (reason unclear) */
-  /* NOTE: make playlist 1 pixel wider to fit in width */
-  width: calc(100% + 1px); 
-  background-color: var(--ajs-theme-uno--black);
+.compact-player-volume-container
+input[type=range].amplitude-volume-slider {
+    float: left;
+    height: 1px;
+    margin-top: 10px;
+    margin-left: 5px;
+    width: calc(100% - 118px);
+    background: transparent;
+}
+
+.compact-player-list-controls {
+  width: 128px !important;
+  margin-top: 50px !important;
+  margin-right: -32px !important;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list {
-  height: 600px;
+.compact-player-title-list {
+  width: 100%;
+  height: 680px;
   overflow-y: scroll;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song {
+.compact-player-title-list
+.song {
   padding: 15px;
   cursor: pointer;
   line-height: 20px;
   background-color: var(--ajs-theme-uno--darker-silver);
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.song-number-now-playing {
+.compact-player-title-list
+.song-number-now-playing {
   float: left;
   width: 5px;
   height: 20px;
-  margin-top: 8px;
+  margin-top: 14px;
   margin-right: 20px;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.song-number-now-playing
-span.number {
+.compact-player-title-list
+.song-number-now-playing
+.number {
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 14px;
   color: var(--ajs-theme-uno--white);
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.song-number-now-playing
+.compact-player-title-list
+.song-number-now-playing
 img.now-playing {
   display: none;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-div.song-meta-container {
-  display: inline-block;
-  width: calc(100% - 120px);
-}
-
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-div.song-meta-container
-span.song-name {
+.compact-player-title-list
+.song-meta-container
+.song-name {
   display: block;
   width: calc(100% - 40px);
-  margin-left: 10px;
+  margin-left: 38px;
   font-family: "Lato", sans-serif;
   font-size: 18px;
   white-space: nowrap;
@@ -506,76 +398,56 @@ span.song-name {
   color: var(--ajs-theme-uno--blue);
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-div.song-meta-container
-span.audio-rating {
+.compact-player-title-list
+.song-meta-container
+.audio-rating {
   display: flex;
-  align-items: center;
   float: right;
-  font-size: 18px;
-  margin-top: -24px;
-  margin-right: -20px;
-  color: var(--ajs-theme-uno--gray-400);
+  margin-top: -38px;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-div.song-meta-container
-span.song-artist-album {
+.compact-player-title-list
+.song-meta-container
+.song-artist-album {
   display: block;
-  margin-left: 10px;
+  margin-left: 38px;
   font-family: "Lato", sans-serif;
   font-size: 16px;
   color: var(--ajs-theme-uno--gray-300);
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.audio-duration {
+.compact-player-title-list
+.song-meta-container
+.audio-duration {
   float: right;
-  margin-top: -46px;
-  margin-right: -108px;
+  margin-top: -18px;
   font-family: "Lato", sans-serif;
   font-size: 16px;
   color: var(--ajs-theme-uno--gray-300);
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.song-duration {
-  display: inline-block;
-  opacity: 0.5;
-  width: 35px;
-  font-family: "Lato", sans-serif;
-  font-size: 18px;
-  text-align: center;
-  color: var(--ajs-theme-uno--white);
+.playlist-screen-meta-container
+.audio-rating {
+  display: flex;
+  float: right;
+  margin-top: 10px;
+  margin-right: -100px;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-span.audio-info {
-  float: right;
-  margin-top: -24px;
-  margin-right: -110px;
+.playlist-screen-meta-container
+.amplitude-audio-info {
+    float: right;
+    margin-right: -130px;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song.amplitude-active-song-container {
+.compact-player-title-list
+.song.amplitude-active-song-container {
   background-color: var(--ajs-theme-uno--medium-silver) !important;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song.amplitude-active-song-container
-span.song-number-now-playing
+.compact-player-title-list
+.song.amplitude-active-song-container
+.song-number-now-playing
 img.now-playing {
   display: inline-block;
   height: 16px;
@@ -584,25 +456,35 @@ img.now-playing {
   margin-left: 4px;
 }
 
-div.compact-player-playlist
-div.compact-player-title-list
-div.song.amplitude-active-song-container
-span.song-number-now-playing
-span.number {
+.compact-player-title-list
+.song.amplitude-active-song-container
+.song-number-now-playing
+.number {
   display: none;
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.playlist-screen-meta-container {
+.compact-player-playlist {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /* jadams 2024-11-07, workaround  (reason unclear) */
+  /* NOTE: make playlist 1 pixel wider to fit in width */
+  width: calc(100% + 1px);
+  background-color: var(--ajs-theme-uno--black);
+}
+
+.playlist-screen-controls
+.playlist-screen-meta-container {
   float: left;
   width: calc(100% - 123px);
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.playlist-screen-meta-container
-span.song-name {
+.playlist-screen-controls
+.playlist-screen-meta-container
+.song-name {
   font-family: "Lato", sans-serif;
   font-size: 18px;
   line-height: 24px;
@@ -612,10 +494,9 @@ span.song-name {
   color: var(--ajs-theme-uno--white);
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.playlist-screen-meta-container
-div.song-artist-album {
+.playlist-screen-controls
+.playlist-screen-meta-container
+.song-artist-album {
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 15px;
@@ -623,17 +504,15 @@ div.song-artist-album {
   color: var(--ajs-theme-uno--white);
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls {
+.playlist-screen-controls
+.list-controls {
   float: right;
   margin-top: 48px;
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-previous {
+.playlist-screen-controls
+.list-controls
+.list-previous {
   float: left;
   cursor: pointer;
   width: 15px;
@@ -644,50 +523,44 @@ div.list-previous {
   background-image: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg");
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-previous:hover {
+.playlist-screen-controls
+.list-controls
+.list-previous:hover {
   opacity: 0.5;
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause {
+.playlist-screen-controls
+.list-controls
+.amplitude-play-pause {
   float: left;
   cursor: pointer;
   width: 17px;
   height: 24px;
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause:hover {
+.playlist-screen-controls
+.list-controls
+.amplitude-play-pause:hover {
   opacity: 0.5;
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause.amplitude-playing {
+.playlist-screen-controls
+.list-controls
+.amplitude-play-pause.amplitude-playing {
   background-repeat: no-repeat;
   background-image: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg");
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause.amplitude-paused {
+.playlist-screen-controls
+.list-controls
+.amplitude-play-pause.amplitude-paused {
   background-repeat: no-repeat;
   background-image: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg");
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-next {
+.playlist-screen-controls
+.list-controls
+.list-next {
   float: left;
   cursor: pointer;
   width: 15px;
@@ -698,13 +571,22 @@ div.list-next {
   background-image: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg");
 }
 
-div.compact-player-playlist
-div.playlist-screen-controls
-div.list-controls
-div.list-next:hover {
+.playlist-screen-controls
+.list-controls
+.list-next:hover {
   opacity: 0.5;
 }
 
+.compact-player-volume-container
+input[type=range].amplitude-volume-slider {
+    float: left;
+    height: 1px;
+    margin-top: 10px;
+    margin-left: 5px;
+    width: calc(100% - 118px);
+    background: transparent;
+}
+
 
 /* 5. Themes
 # ------------------------------------------------------------------------------ */
@@ -715,7 +597,6 @@ div.list-next:hover {
 /* 7. Vendors
 # ------------------------------------------------------------------------------ */
 
-
 /* 8. Animations
 # ------------------------------------------------------------------------------ */