j1-template 2024.3.14 → 2024.3.16

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,11 @@
     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; */
+  height: 500px;
   object-fit: cover;
 }
 
@@ -35,7 +38,6 @@
   cursor: pointer;
   top: 0;
   position: sticky;
-  width: 100%;
   padding: 15px;
   font-family: "Lato", sans-serif;
   text-align: center;
@@ -60,9 +62,7 @@
 
 .playlist-screen-controls {
   cursor: default;
-  top: 0;
-  position: sticky;
-  height: 90px;
+  height: 100px;
   padding: 15px;
   max-width: -webkit-fill-available;
   max-width: -moz-available;
@@ -72,15 +72,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 +101,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,19 +119,18 @@ 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;
@@ -158,8 +157,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,32 +169,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; */
-  font-size: 16px;
-  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-top: 28px;
-  margin-right: 5px;
+  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 */
@@ -207,34 +210,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-top: 18px;
-  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);
 }
 
@@ -244,9 +241,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;
@@ -260,9 +255,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);
 }
 
@@ -271,8 +264,8 @@ div.playlist-screen-controls
 div.list-controls {
   float: right;
   width: 90px;
-  /* margin-top: 14px; */
-  margin-top: 38px;
+  margin-top: 50px;
+  margin-right: -12px;
 }
 
 div#large_player_right
@@ -392,7 +385,7 @@ div.amplitude-mute {
   cursor: pointer;
   width: 25px;
   height: 19px;
-  margin-left: 20px;
+  margin-left: 40px;
 }
 
 div#large_player_control_container
@@ -410,7 +403,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);
 }
 
@@ -582,18 +574,41 @@ div#large_player_repeat.amplitude-repeat-on {
 }
 
 /* 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 {
+/*   .compact-player-title-list {
     max-height: 500px;
+  } */
+
+  div#large_player_left {
+    max-width: unset;
+    border: solid 1px;
+    border-color: var(--ajs-theme-uno--medium-silver);
   }
 
   div.large-player-container {
@@ -605,16 +620,13 @@ div#large_player_repeat.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 {
@@ -622,25 +634,44 @@ div#large_player_repeat.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;
   }
+
+  div#large_player_right {
+    border-top: 0px;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+    border-color: var(--ajs-theme-uno--medium-silver);
+  }
+
+  .large-player-title-list {
+    border-bottom: 1px solid;
+    border-color: var(--ajs-theme-uno--medium-silver);
+  }
+
 }
 
+
 /* 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:90px;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: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{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:16px;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:28px;margin-right:5px}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-top:18px;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;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;color:var(--ajs-theme-uno--white)}div#large_player_right div.playlist-screen-controls div.list-controls{float:right;width:90px;margin-top:38px}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-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: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:500px;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:40px}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}div#large_player_left{max-width:unset;border:solid 1px;border-color:var(--ajs-theme-uno--medium-silver)}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}div#large_player_right{border-top:0;border-right:1px solid;border-bottom:1px solid;border-left:1px solid;border-color:var(--ajs-theme-uno--medium-silver)}.large-player-title-list{border-bottom:1px solid;border-color:var(--ajs-theme-uno--medium-silver)}}

data/assets/theme/j1/modules/amplitudejs/icons/player/dark/artist.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48.000002 48"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="artist.svg"
+   inkscape:export-filename="D:\j1\github\j1-theme\j1-template\packages\300_theme_src\assets\themes\j1\modules\amplitudejs\examples\flat-black\img\now-playing.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata17">
+    <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>Shape</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="1596"
+     inkscape:window-height="1102"
+     id="namedview15"
+     showgrid="true"
+     inkscape:zoom="14.754589"
+     inkscape:cx="30.092333"
+     inkscape:cy="24.263638"
+     inkscape:window-x="528"
+     inkscape:window-y="112"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg13"
+     inkscape:document-rotation="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:showpageshadow="false"
+     units="px"
+     width="24mm"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid13"
+       originx="0"
+       originy="0"
+       spacingy="1"
+       spacingx="1"
+       units="px" />
+  </sodipodi:namedview>
+  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">Shape</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs6" />
+  <path
+     d="m 39.221721,18.636638 h 8.843565 v 5.261699 h -5.053465 v 14.469666 q 0,2.762391 -1.831881,4.669757 -1.83188,1.907364 -4.48495,1.907364 -2.65307,0 -4.484953,-1.907364 -1.83188,-1.907366 -1.83188,-4.669757 0,-2.762391 1.83188,-4.669757 1.831883,-1.907363 4.484953,-1.907363 0.505346,0 1.137028,0.09866 0.631685,0.09866 1.389703,0.427515 z M 0.05736316,44.945124 v -7.366375 q 0,-2.301993 1.10544564,-4.143587 1.1054455,-1.841594 2.9373269,-2.828163 3.916436,-2.038906 7.9592093,-3.058361 4.042772,-1.019453 8.211882,-1.019453 2.653067,0 5.274553,0.427514 2.621486,0.427511 5.274555,1.282537 -1.263366,0.789254 -2.274059,1.907364 -1.010694,1.118113 -1.768713,2.433537 -1.642377,-0.394627 -3.25317,-0.591942 -1.610791,-0.197312 -3.253166,-0.197312 -3.600595,0 -7.074853,0.920795 -3.4742574,0.920798 -6.8221787,2.63085 -0.5685149,0.328855 -0.9159407,0.920795 -0.3474256,0.591943 -0.3474256,1.315426 v 2.104678 h 20.27703 q 0.126338,1.315424 0.600099,2.630849 0.473763,1.315425 1.294951,2.630848 z M 20.271227,23.898337 q -4.16911,0 -7.138022,-3.091246 -2.96891,-3.091248 -2.96891,-7.432148 0,-4.3409006 2.96891,-7.4321476 2.968912,-3.0912471 7.138022,-3.0912471 4.169107,0 7.138019,3.0912471 2.968911,3.091247 2.968911,7.4321476 0,4.3409 -2.968911,7.432148 -2.968912,3.091246 -7.138019,3.091246 z m 0,-5.261699 q 2.084554,0 3.569008,-1.545623 1.484456,-1.545622 1.484456,-3.716072 0,-2.170451 -1.484456,-3.7160739 -1.484454,-1.5456235 -3.569008,-1.5456235 -2.084556,0 -3.56901,1.5456235 -1.484456,1.5456229 -1.484456,3.7160739 0,2.17045 1.484456,3.716072 1.484454,1.545623 3.56901,1.545623 z m 0,-5.261695 z m 0,26.308484 z"
+     id="path1-0"
+     style="stroke-width:0.0644565;fill:#ffffff" />
+</svg>

data/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg

@@ -1,19 +1,19 @@
 <?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 25 18"
    version="1.1"
    id="svg4"
    sodipodi:docname="mute.svg"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
    width="25"
    height="18"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <metadata
      id="metadata10">
     <rdf:RDF>
@@ -22,7 +22,6 @@
         <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>
@@ -37,19 +36,52 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1798"
-     inkscape:window-height="1252"
+     inkscape:window-width="3440"
+     inkscape:window-height="1369"
      id="namedview6"
-     showgrid="false"
+     showgrid="true"
      inkscape:zoom="30.625"
-     inkscape:cx="12"
+     inkscape:cx="12.016327"
      inkscape:cy="12"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:document-rotation="0"
+     inkscape:showpageshadow="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+    <inkscape:grid
+       id="grid2"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
   <path
-     d="m 9.8423193,1.0612245 -2.277237,2.09 2.277237,2.09 M 1.419811,0.06122449 0.03603535,1.3312245 l 5.15374725,4.73 H 0.03603535 V 12.061225 H 4.3943839 l 5.4479354,5 v -6.73 l 4.6307457,4.26 c -0.730024,0.51 -1.547215,0.93 -2.451572,1.17 v 2.07 c 1.503631,-0.32 2.865615,-0.95 4.009681,-1.81 l 2.233654,2.04 1.383776,-1.27 -9.8062847,-9.0000005 m 7.6271107,1.27 c 0,0.9400005 -0.217918,1.8200005 -0.588378,2.6400005 l 1.645277,1.51 c 0.708232,-1.24 1.122275,-2.65 1.122275,-4.1500005 0,-4.28 -3.268762,-7.86 -7.627111,-8.77000001 V 2.3512245 c 3.148907,0.86 5.447937,3.54 5.447937,6.71 m -2.723968,0 c 0,-1.77 -1.089588,-3.29 -2.723969,-4.03 v 2.21 l 2.669489,2.45 c 0.05448,-0.2 0.05448,-0.42 0.05448,-0.63 z"
-     id="path2"
-     style="fill:#666666;stroke-width:1.04384" />
+     d="m 16.745496,16.967347 -2.595975,-2.431349 q -0.536359,0.3215 -1.13708,0.552579 -0.600722,0.231079 -1.244352,0.371735 v -1.647691 q 0.300361,-0.100469 0.589994,-0.200938 0.289634,-0.100469 0.547086,-0.241126 l -2.853427,-2.672474 v 4.179509 L 5.7608741,10.858833 H 2.32818 V 6.0363225 H 5.0743353 L 0.95510232,2.1783138 2.1565453,1.0530613 17.946939,15.842094 Z m -0.171635,-4.661761 -1.244352,-1.16544 q 0.364724,-0.622907 0.547086,-1.3060965 0.182362,-0.683189 0.182362,-1.4065657 0,-1.8888165 -1.179989,-3.3757573 Q 13.69898,3.5647857 11.768089,3.042347 V 1.3946558 q 2.660338,0.5626263 4.333777,2.5217713 1.673438,1.959145 1.673438,4.5110567 0,1.0649712 -0.311088,2.0495672 -0.311088,0.984596 -0.890355,1.828535 z M 13.69898,9.6130177 11.768089,7.8045764 V 5.1923831 q 1.008354,0.4420635 1.576894,1.3261904 0.56854,0.884127 0.56854,1.9290041 0,0.301407 -0.05364,0.592767 -0.05364,0.29136 -0.160907,0.5726731 z M 10.051742,6.1970728 7.8204907,4.1073181 10.051742,2.0175635 Z M 8.3353948,10.979396 V 9.0905791 L 6.7906824,7.6438261 H 4.0445272 V 9.2513294 H 6.4903217 Z M 7.5630386,8.3672024 Z"
+     id="path1-4"
+     style="fill:#b3b3b3;stroke-width:0.020763" />
 </svg>