j1-template 2024.3.13 → 2024.3.15

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

@@ -14,7 +14,7 @@
 */
 
 /* 1. Base
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 .large-player {
   -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
@@ -26,8 +26,10 @@
     background: var(--ajs-theme-uno--white);
 }
 
+/* jadams, 2024-11-04: Overload user agent styles (img) for width|height */
 .player-left-top img {
-  width: 100%;
+  width: 500px;
+  height: auto;
   object-fit: cover;
 }
 
@@ -35,7 +37,6 @@
   cursor: pointer;
   top: 0;
   position: sticky;
-  width: 100%;
   padding: 15px;
   font-family: "Lato", sans-serif;
   text-align: center;
@@ -60,9 +61,7 @@
 
 .playlist-screen-controls {
   cursor: default;
-  top: 0;
-  position: sticky;
-  height: 80px;
+  height: 100px;
   padding: 15px;
   max-width: -webkit-fill-available;
   max-width: -moz-available;
@@ -72,15 +71,15 @@
 }
 
 /* 2. Components
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 div#large_player_left {
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow-y: clip;
-  padding: 0px;
-  width: 50%;
+  /* jadams, 2014-11-07: width (overall) DISABLED on the left */
+  /* width: 50%; */
+  max-width: fit-content;
   border: solid 1px;
   border-color: var(--ajs-theme-uno--medium-silver);
   background-color: var(--ajs-theme-uno--darker-silver) !important;
@@ -101,9 +100,9 @@ div#large_player_right {
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: 0px;
-  overflow-y: scroll;
-  width: 50%;
+  flex-grow: 1;
+  width: 50%;                     /* make flex colums same in width (overall) */
+  min-width: 500px;
   border-top: solid 1px;
   border-right: solid 1px;
   border-bottom: solid 1px;
@@ -119,23 +118,22 @@ div.play-button-container {
 
 div#large_player_right
 div.song.amplitude-active-song-container
-div.song-now-playing-icon-container
+div.song-number-now-playing
 span.number {
   display: inline-flex;
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 16px;
-  letter-spacing: 0.5px;
   color: var(--ajs-theme-uno--gray-200);
 }
 
 div#large_player_right
 div.song.amplitude-active-song-container
-div.song-now-playing-icon-container
+div.song-number-now-playing
 img.now-playing {
   display: block;
   margin-top: 5px;
-  margin-left: 8px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
 }
@@ -158,8 +156,8 @@ div#large_player_right
 div.song
 div.audio-meta-data
 span.audio-artist {
-  display: block;
   font-size: 16px;
+  line-height: 18px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -170,30 +168,36 @@ div#large_player_right
 div.song
 div.audio-meta-data
 span.audio-title {
+  display: block;
+  width: calc(100% - 25px);
   font-family: "Lato", sans-serif;
-  font-size: 20px;
-  line-height: 20px;
-  letter-spacing: 0.47px;
+  font-size: 18px;
+  line-height: 24px;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--ajs-theme-uno--blue);
 }
 
 div#large_player_right
 div.song
-img.audio-info-blue {
+div.audio-meta-data
+span.audio-rating {
+  display: flex;
+  align-items: center;
   float: right;
-  display: block;
-  margin-top: 10px;
-  margin-right: 10px;
+  font-size: 16px;
+  margin-top: -24px;
+  margin-right: -20px;
+  color: var(--ajs-theme-uno--gray-400);
 }
 
 div#large_player_right
 div.song
-img.audio-info-white {
+div.audio-meta-data
+span.audio-info {
   float: right;
-  display: none;
-  margin-top: 10px;
-  margin-right: 10px;
+  margin-right: -102px;
 }
 
 /* clearfix */
@@ -205,33 +209,28 @@ div.song:after {
 }
 
 div#large_player_right
-div.song
-div.song-now-playing-icon-container {
+div.song 
+div.song-number-now-playing {
   float: left;
-  width: 26px;
+  width: 40px;
   height: 20px;
-  margin-top: 12px;
-  margin-right: 20px;
+  margin-top: 8px;
+  margin-right: 12px;
 }
 
 div#large_player_right
 div.song
-div.song-now-playing-icon-container
+div.song-number-now-playing
 img.now-playing {
   display: none;
 }
 
 div#large_player_right
-div.song
-span.audio-duration {
+div.song span.audio-duration {
   float: left;
-  margin-left: 5px;
-  width: 50px;
+  margin-left: 28px;
   font-family: "Lato", sans-serif;
-  text-align: center;
-  line-height: 45px;
   font-size: 16px;
-  font-weight: 500;
   color: var(--ajs-theme-uno--gray-300);
 }
 
@@ -241,9 +240,7 @@ div.playlist-screen-meta-container
 span.song-name {
   font-family: "Lato", sans-serif;
   font-size: 18px;
-  letter-spacing: 0.5px;
   line-height: 24px;
-  margin-left: 38px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -257,9 +254,7 @@ div.song-artist-album {
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 16px;
-  letter-spacing: 0.5px;
-  line-height: 16px;
-  margin-left: 38px;
+  line-height: 18px;
   color: var(--ajs-theme-uno--white);
 }
 
@@ -268,7 +263,8 @@ div.playlist-screen-controls
 div.list-controls {
   float: right;
   width: 90px;
-  margin-top: 14px;
+  margin-top: 50px;
+  margin-right: -12px;
 }
 
 div#large_player_right
@@ -281,7 +277,7 @@ div.list-previous {
   height: 17px;
   margin-right: 15px;
   margin-top: 4px;
-  background: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg) no-repeat;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat;
 }
 
 div#large_player_right
@@ -295,7 +291,7 @@ div#large_player_right
 div.playlist-screen-controls
 div.list-controls
 div.list-play-pause.amplitude-paused {
-  background: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg) no-repeat;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat;
 }
 
 div#large_player_right
@@ -319,7 +315,7 @@ div#large_player_right
 div.playlist-screen-controls
 div.list-controls
 div.list-play-pause.amplitude-playing {
-  background: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg) no-repeat;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat;
 }
 
 div#large_player_right
@@ -332,7 +328,7 @@ div.list-next {
   height: 17px;
   margin-left: 15px;
   margin-top: 4px;
-  background: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg)no-repeat;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg")no-repeat;
 }
 
 div#large_player_right
@@ -406,7 +402,6 @@ span.title-number {
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 16px;
-  letter-spacing: 0.5px;
   color: var(--ajs-theme-uno--gray-200);
 }
 
@@ -466,6 +461,24 @@ div#large_player_previous:hover {
   opacity: .5;
 }
 
+div#large_player_controls
+div.large-player-controls-container
+div.large-player-skip-backward {
+  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/skip-backward.svg") no-repeat;
+}
+
+div#large_player_controls
+div.large-player-controls-container
+div.large-player-skip-backward:hover {
+  opacity: 0.5;
+}
+
 div#large_player_controls
 div.large-player-controls-container
 div#large_player_play_pause {
@@ -488,6 +501,24 @@ div#large_player_play_pause.amplitude-paused {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
 }
 
+div#large_player_controls
+div.large-player-controls-container
+div.large-player-skip-forward {
+  display: inline-block;
+  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;
+}
+
+div#large_player_controls
+div.large-player-controls-container
+div.large-player-skip-forward:hover {
+  opacity: .5;
+}
+
 div#large_player_controls
 div.large-player-controls-container
 div#large_player_play_pause.amplitude-playing {
@@ -515,7 +546,7 @@ div#large_player_next:hover {
 
 div#large_player_controls
 div.large-player-controls-container
-div#repeat_container_large_player {
+div#large_player_repeat {
   display: inline-block;
   width: 24px;
   height: 24px;
@@ -525,37 +556,59 @@ div#repeat_container_large_player {
 
 div#large_player_controls
 div.large-player-controls-container
-div#repeat_container_large_player:hover {
+div#large_player_repeat:hover {
   opacity: .5;
 }
 
 div#large_player_controls
 div.large-player-controls-container
-div#repeat_container_large_player.amplitude-repeat-off {
+div#large_player_repeat.amplitude-repeat-off {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
 }
 
 div#large_player_controls
 div.large-player-controls-container
-div#repeat_container_large_player.amplitude-repeat-on {
+div#large_player_repeat.amplitude-repeat-on {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
 }
 
 /* 3. Layout
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
+
+/*
+Bootstrap grid breakpoints
+  SN:     576px           Mobile
+  MD:     768px           Small Desktop|Tablet
+  LG:     992px           Default Desktop
+  XL:     1200px          Large Desktop
+  XXL:    1400px          X Large Desktop
+ */
+
+ /* max-width: -webkit-fill-available;  Chrome, Safari, Edge */
+ /* max-width: -moz-available;          Firefox              */
+
 
-/* Small only
+/* BS LG|MD|SM
 # --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
-  .lage-player {
-    max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
-    max-width: -moz-available; /* Firefox */
+
+@media screen and (max-width: 992px),
+screen and (max-width: 768px),
+screen and (max-width: 576px) {
+
+  .large-player {
+    max-width: -webkit-fill-available;                /* Chrome, Safari, Edge */
+    max-width: -moz-available;                        /* Firefox */
   }
 
   .compact-player-title-list {
     max-height: 500px;
   }
 
+  div#large_player_left {
+    max-width: unset;
+    border: solid 1px;
+  }
+
   div.large-player-container {
     position: relative;
     flex-direction: column;
@@ -565,16 +618,13 @@ div#repeat_container_large_player.amplitude-repeat-on {
 
   div.large-player-container
   div#large_player_right {
-    width: 100%;
-    height: auto;
-    border-left: solid 1px;
-    border-color: var(--ajs-theme-uno--medium-silver);
+    width: auto;
+    min-width: unset;
   }
 
-  div.large-player-container
-  div#large_player_left {
-    width: 100%;
-    height: auto;
+  .player-left-top img {
+    width: -webkit-fill-available;                    /* Chrome, Safari, Edge */
+    width: -moz-available;                            /* Firefox */
   }
 
   div#large_player_control_container {
@@ -582,25 +632,31 @@ div#repeat_container_large_player.amplitude-repeat-on {
     margin-bottom: 25px;
   }
 
-  div.large-player-container
-  div#large_player_left
-  img[amplitude-song-info="cover_art_url"] {
-    width: auto;
-    height: auto;
+  div#large_player_right
+  div.playlist-screen-controls
+  div.playlist-screen-meta-container
+  span.song-name {
+    font-size: 16px;
   }
+
+  .playlist-screen-controls.large-player {
+    display: none;
+  }
+
 }
 
+
 /* 4. Pages
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 5. Themes
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 6. Utils
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 7. Vendors
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 8. Animations
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */

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

@@ -13,4 +13,4 @@
  # -----------------------------------------------------------------------------
 */
 
-.large-player{-webkit-font-smoothing:antialiased}.large-player-container{display:flex;max-width:fit-content;background:var(--ajs-theme-uno--white)}.player-left-top img{width:100%;object-fit:cover}.large-player-playlist-header{cursor:pointer;top:0;position:sticky;width:100%;padding:15px;font-family:"Lato",sans-serif;text-align:center;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--dark-silver)}.large-player-title-list{display:block;max-height:600px;overflow-y:scroll}.meta-container.large-player{height:120px}.playlist-screen-meta-container{width:calc(100% - 123px);float:left}.playlist-screen-controls{cursor:default;top:0;position:sticky;height:80px;padding:15px;max-width:-webkit-fill-available;max-width:-moz-available;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--black)}div#large_player_left{display:flex;flex:1;flex-direction:column;overflow-y:clip;padding:0;width:50%;border:solid 1px;border-color:var(--ajs-theme-uno--medium-silver);background-color:var(--ajs-theme-uno--darker-silver) !important}div#large_player_left img.album-art{width:100%}div#large_player_left div#player-left-bottom{flex:1;background-color:var(--ajs-theme-uno--blue-gray-900)}div#large_player_right{display:flex;flex:1;flex-direction:column;padding:0;overflow-y:scroll;width:50%;border-top:solid 1px;border-right:solid 1px;border-bottom:solid 1px;border-color:var(--ajs-theme-uno--medium-silver);background-color:var(--ajs-theme-uno--darker-silver) !important}div#large_player_right div.song.amplitude-active-song-container:hover div.play-button-container{display:none}div#large_player_right div.song.amplitude-active-song-container div.song-now-playing-icon-container span.number{display:inline-flex;opacity:.5;font-family:"Lato",sans-serif;font-size:16px;letter-spacing:.5px;color:var(--ajs-theme-uno--gray-200)}div#large_player_right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing{display:block;margin-top:5px;margin-left:8px;height:16px;width:16px}div#large_player_right div.song{cursor:pointer;padding:12px;background-color:var(--ajs-theme-uno--darker-silver)}div#large_player_right div.song div.audio-meta-data{float:left;width:calc(100% - 145px)}div#large_player_right div.song div.audio-meta-data span.audio-artist{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-300)}div#large_player_right div.song div.audio-meta-data span.audio-title{font-family:"Lato",sans-serif;font-size:20px;line-height:20px;letter-spacing:.47px;white-space:nowrap;color:var(--ajs-theme-uno--blue)}div#large_player_right div.song img.audio-info-blue{float:right;display:block;margin-top:10px;margin-right:10px}div#large_player_right div.song img.audio-info-white{float:right;display:none;margin-top:10px;margin-right:10px}div#large_player_right div.song:after{content:"";display:table;clear:both}div#large_player_right div.song div.song-now-playing-icon-container{float:left;width:26px;height:20px;margin-top:12px;margin-right:20px}div#large_player_right div.song div.song-now-playing-icon-container img.now-playing{display:none}div#large_player_right div.song span.audio-duration{float:left;margin-left:5px;width:50px;font-family:"Lato",sans-serif;text-align:center;line-height:45px;font-size:16px;font-weight:500;color:var(--ajs-theme-uno--gray-300)}div#large_player_right div.playlist-screen-controls div.playlist-screen-meta-container span.song-name{font-family:"Lato",sans-serif;font-size:18px;letter-spacing:.5px;line-height:24px;margin-left:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--white)}div#large_player_right div.playlist-screen-controls div.playlist-screen-meta-container div.song-artist-album{opacity:.5;font-family:"Lato",sans-serif;font-size:16px;letter-spacing:.5px;line-height:16px;margin-left:38px;color:var(--ajs-theme-uno--white)}div#large_player_right div.playlist-screen-controls div.list-controls{float:right;width:90px;margin-top:14px}div#large_player_right div.playlist-screen-controls div.list-controls div.list-previous{float:left;cursor:pointer;width:15px;height:17px;margin-right:15px;margin-top:4px;background:url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg) no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-previous:hover{opacity:.5}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-paused{background:url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg) no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause{float:left;cursor:pointer;width:17px;height:24px}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause:hover{opacity:.5}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-playing{background:url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg) no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-next{float:left;cursor:pointer;width:15px;height:17px;margin-left:15px;margin-top:4px;background:url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg)no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-next:hover{opacity:.5}div#large_player_right div.song.amplitude-song-container.amplitude-play-pause.amplitude-active-song-container{background-color:var(--ajs-theme-uno--medium-silver) !important}div#large_player_control_container{margin-top:20px;margin-bottom:20px}div#large_player_control_container:after{content:"";display:table;clear:both}div#large_player_control_container div.volume-container{float:left;width:88%;margin-top:20px;margin-left:12px}div#large_player_control_container div.volume-container:after{content:"";display:table;clear:both}div#large_player_control_container div.volume-container div.volume-controls input[type=range]{width:calc(100% - 45px)}div#large_player_control_container div.amplitude-mute{float:left;cursor:pointer;width:25px;height:19px;margin-left:20px}div#large_player_control_container div.amplitude-mute.amplitude-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat}div#large_player_control_container div.amplitude-mute.amplitude-not-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat}span.title-number{display:inline-flex;opacity:.5;font-family:"Lato",sans-serif;font-size:16px;letter-spacing:.5px;color:var(--ajs-theme-uno--gray-200)}div#large_player_controls{height:65px}div#large_player_controls div.large-player-controls-container{text-align:center}div#large_player_controls div.large-player-controls-container div#large_player_shuffle{display:inline-block;width:24px;height:24px;cursor:pointer;vertical-align:middle;margin-right:25px}div#large_player_controls div.large-player-controls-container div#large_player_shuffle:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_shuffle.amplitude-shuffle-on{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_shuffle.amplitude-shuffle-off{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_previous{display:inline-block;height:24px;width:24px;cursor:pointer;vertical-align:middle;margin-right:20px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_previous:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_play_pause{display:inline-block;width:60px;height:60px;cursor:pointer;vertical-align:middle}div#large_player_controls div.large-player-controls-container div#large_player_play_pause:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_play_pause.amplitude-paused{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_play_pause.amplitude-playing{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_next{display:inline-block;height:24px;width:24px;cursor:pointer;vertical-align:middle;margin-right:25px;margin-left:20px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_next:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#repeat_container_large_player{display:inline-block;width:24px;height:24px;cursor:pointer;vertical-align:middle}div#large_player_controls div.large-player-controls-container div#repeat_container_large_player:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#repeat_container_large_player.amplitude-repeat-off{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#repeat_container_large_player.amplitude-repeat-on{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat}@media screen and (max-width:39.9375em){.lage-player{max-width:-webkit-fill-available;max-width:-moz-available}.compact-player-title-list{max-height:500px}div.large-player-container{position:relative;flex-direction:column;max-height:fit-content;max-width:fit-content}div.large-player-container div#large_player_right{width:100%;height:auto;border-left:solid 1px;border-color:var(--ajs-theme-uno--medium-silver)}div.large-player-container div#large_player_left{width:100%;height:auto}div#large_player_control_container{margin-top:25px;margin-bottom:25px}div.large-player-container div#large_player_left img[amplitude-song-info="cover_art_url"]{width:auto;height:auto}}
+.large-player{-webkit-font-smoothing:antialiased}.large-player-container{display:flex;max-width:fit-content;background:var(--ajs-theme-uno--white)}.player-left-top img{width:500px;height:auto;object-fit:cover}.large-player-playlist-header{cursor:pointer;top:0;position:sticky;padding:15px;font-family:"Lato",sans-serif;text-align:center;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--dark-silver)}.large-player-title-list{display:block;max-height:600px;overflow-y:scroll}.meta-container.large-player{height:120px}.playlist-screen-meta-container{width:calc(100% - 123px);float:left}.playlist-screen-controls{cursor:default;height:100px;padding:15px;max-width:-webkit-fill-available;max-width:-moz-available;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--black)}div#large_player_left{display:flex;flex:1;flex-direction:column;max-width:fit-content;border:solid 1px;border-color:var(--ajs-theme-uno--medium-silver);background-color:var(--ajs-theme-uno--darker-silver) !important}div#large_player_left img.album-art{width:100%}div#large_player_left div#player-left-bottom{flex:1;background-color:var(--ajs-theme-uno--blue-gray-900)}div#large_player_right{display:flex;flex:1;flex-direction:column;flex-grow:1;width:50%;min-width:500px;border-top:solid 1px;border-right:solid 1px;border-bottom:solid 1px;border-color:var(--ajs-theme-uno--medium-silver);background-color:var(--ajs-theme-uno--darker-silver) !important}div#large_player_right div.song.amplitude-active-song-container:hover div.play-button-container{display:none}div#large_player_right div.song.amplitude-active-song-container div.song-number-now-playing span.number{display:inline-flex;opacity:.5;font-family:"Lato",sans-serif;font-size:16px;color:var(--ajs-theme-uno--gray-200)}div#large_player_right div.song.amplitude-active-song-container div.song-number-now-playing img.now-playing{display:block;margin-top:5px;margin-left:4px;height:16px;width:16px}div#large_player_right div.song{cursor:pointer;padding:12px;background-color:var(--ajs-theme-uno--darker-silver)}div#large_player_right div.song div.audio-meta-data{float:left;width:calc(100% - 145px)}div#large_player_right div.song div.audio-meta-data span.audio-artist{font-size:16px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-300)}div#large_player_right div.song div.audio-meta-data span.audio-title{display:block;width:calc(100% - 25px);font-family:"Lato",sans-serif;font-size:18px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue)}div#large_player_right div.song div.audio-meta-data span.audio-rating{display:flex;align-items:center;float:right;font-size:16px;margin-top:-24px;margin-right:-20px;color:var(--ajs-theme-uno--gray-400)}div#large_player_right div.song div.audio-meta-data span.audio-info{float:right;margin-right:-102px}div#large_player_right div.song:after{content:"";display:table;clear:both}div#large_player_right div.song div.song-number-now-playing{float:left;width:40px;height:20px;margin-top:8px;margin-right:12px}div#large_player_right div.song div.song-number-now-playing img.now-playing{display:none}div#large_player_right div.song span.audio-duration{float:left;margin-left:28px;font-family:"Lato",sans-serif;font-size:16px;color:var(--ajs-theme-uno--gray-300)}div#large_player_right div.playlist-screen-controls div.playlist-screen-meta-container span.song-name{font-family:"Lato",sans-serif;font-size:18px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--white)}div#large_player_right div.playlist-screen-controls div.playlist-screen-meta-container div.song-artist-album{opacity:.5;font-family:"Lato",sans-serif;font-size:16px;line-height:18px;color:var(--ajs-theme-uno--white)}div#large_player_right div.playlist-screen-controls div.list-controls{float:right;width:90px;margin-top:50px;margin-right:-12px}div#large_player_right div.playlist-screen-controls div.list-controls div.list-previous{float:left;cursor:pointer;width:15px;height:17px;margin-right:15px;margin-top:4px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-previous:hover{opacity:.5}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-paused{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause{float:left;cursor:pointer;width:17px;height:24px}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause:hover{opacity:.5}div#large_player_right div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-playing{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-next{float:left;cursor:pointer;width:15px;height:17px;margin-left:15px;margin-top:4px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg")no-repeat}div#large_player_right div.playlist-screen-controls div.list-controls div.list-next:hover{opacity:.5}div#large_player_right div.song.amplitude-song-container.amplitude-play-pause.amplitude-active-song-container{background-color:var(--ajs-theme-uno--medium-silver) !important}div#large_player_control_container{margin-top:20px;margin-bottom:20px}div#large_player_control_container:after{content:"";display:table;clear:both}div#large_player_control_container div.volume-container{float:left;width:88%;margin-top:20px;margin-left:12px}div#large_player_control_container div.volume-container:after{content:"";display:table;clear:both}div#large_player_control_container div.volume-container div.volume-controls input[type=range]{width:calc(100% - 45px)}div#large_player_control_container div.amplitude-mute{float:left;cursor:pointer;width:25px;height:19px;margin-left:20px}div#large_player_control_container div.amplitude-mute.amplitude-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat}div#large_player_control_container div.amplitude-mute.amplitude-not-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat}span.title-number{display:inline-flex;opacity:.5;font-family:"Lato",sans-serif;font-size:16px;color:var(--ajs-theme-uno--gray-200)}div#large_player_controls{height:65px}div#large_player_controls div.large-player-controls-container{text-align:center}div#large_player_controls div.large-player-controls-container div#large_player_shuffle{display:inline-block;width:24px;height:24px;cursor:pointer;vertical-align:middle;margin-right:25px}div#large_player_controls div.large-player-controls-container div#large_player_shuffle:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_shuffle.amplitude-shuffle-on{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_shuffle.amplitude-shuffle-off{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_previous{display:inline-block;height:24px;width:24px;cursor:pointer;vertical-align:middle;margin-right:20px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_previous:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div.large-player-skip-backward{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/skip-backward.svg") no-repeat}div#large_player_controls div.large-player-controls-container div.large-player-skip-backward:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_play_pause{display:inline-block;width:60px;height:60px;cursor:pointer;vertical-align:middle}div#large_player_controls div.large-player-controls-container div#large_player_play_pause:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_play_pause.amplitude-paused{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat}div#large_player_controls div.large-player-controls-container div.large-player-skip-forward{display:inline-block;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}div#large_player_controls div.large-player-controls-container div.large-player-skip-forward:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_play_pause.amplitude-playing{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_next{display:inline-block;height:24px;width:24px;cursor:pointer;vertical-align:middle;margin-right:25px;margin-left:20px;background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_next:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_repeat{display:inline-block;width:24px;height:24px;cursor:pointer;vertical-align:middle}div#large_player_controls div.large-player-controls-container div#large_player_repeat:hover{opacity:.5}div#large_player_controls div.large-player-controls-container div#large_player_repeat.amplitude-repeat-off{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat}div#large_player_controls div.large-player-controls-container div#large_player_repeat.amplitude-repeat-on{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat}@media screen and (max-width:992px),screen and (max-width:768px),screen and (max-width:576px){.large-player{max-width:-webkit-fill-available;max-width:-moz-available}.compact-player-title-list{max-height:500px}div#large_player_left{max-width:unset;border:solid 1px}div.large-player-container{position:relative;flex-direction:column;max-height:fit-content;max-width:fit-content}div.large-player-container div#large_player_right{width:auto;min-width:unset}.player-left-top img{width:-webkit-fill-available;width:-moz-available}div#large_player_control_container{margin-top:25px;margin-bottom:25px}div#large_player_right div.playlist-screen-controls div.playlist-screen-meta-container span.song-name{font-size:16px}.playlist-screen-controls.large-player{display:none}}

data/assets/theme/j1/modules/amplitudejs/icons/player/blue/play.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="play.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   inkscape:export-filename="D:\j1\github\j1-theme\j1-template\packages\300_theme_src\assets\theme\j1\modules\amplitudejs\icons\player\blue\play.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Play</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2309"
+     inkscape:window-height="1246"
+     id="namedview13"
+     showgrid="true"
+     showborder="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:showpageshadow="false"
+     inkscape:zoom="10.04"
+     inkscape:cx="50"
+     inkscape:cy="51.164869"
+     inkscape:window-x="283"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11"
+     inkscape:document-rotation="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid11" />
+  </sodipodi:namedview>
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">Play</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs6" />
+  <g
+     id="Page-1"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd"
+     transform="matrix(3.8358368,0,8.6968604e-8,3.7660944,10.000003,5)"
+     style="fill:#0d6efd">
+    <g
+       id="small-play"
+       fill-rule="nonzero"
+       fill="#ffffff"
+       style="fill:#0d6efd">
+      <polygon
+         id="Play"
+         transform="rotate(180,8.472727,11.948718)"
+         points="16.945455,23.897436 16.945455,0 0,11.948718 "
+         style="fill:#0d6efd" />
+    </g>
+  </g>
+</svg>

data/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="step-backward.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1441"
+     inkscape:window-height="1213"
+     id="namedview6"
+     showgrid="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:showpageshadow="false"
+     showguides="true"
+     inkscape:zoom="30.625"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4">
+    <inkscape:grid
+       type="xygrid"
+       id="grid835" />
+  </sodipodi:namedview>
+  <path
+     d="M 22,0 V 24 H 18.249999 V 0 M 15.75,0 V 24 L 2,12"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.46386" />
+</svg>