large.css in j1-template-2024.3.14

- old
+ new

@@ -60,11 +60,11 @@
 
 .playlist-screen-controls {
   cursor: default;
   top: 0;
   position: sticky;
-  height: 80px;
+  height: 90px;
   padding: 15px;
   max-width: -webkit-fill-available;
   max-width: -moz-available;
   font-family: "Lato", sans-serif;
   color: var(--ajs-theme-uno--white);
@@ -133,11 +133,11 @@
 div.song.amplitude-active-song-container
 div.song-now-playing-icon-container
 img.now-playing {
   display: block;
   margin-top: 5px;
-  margin-left: 8px;
+  margin-left: 4px;
   height: 16px;
   width: 16px;
 }
 
 div#large_player_right
@@ -169,11 +169,12 @@
 div#large_player_right
 div.song
 div.audio-meta-data
 span.audio-title {
   font-family: "Lato", sans-serif;
-  font-size: 20px;
+  /* font-size: 20px; */
+  font-size: 16px;
   line-height: 20px;
   letter-spacing: 0.47px;
   white-space: nowrap;
   color: var(--ajs-theme-uno--blue);
 }
@@ -181,12 +182,13 @@
 div#large_player_right
 div.song
 img.audio-info-blue {
   float: right;
   display: block;
-  margin-top: 10px;
-  margin-right: 10px;
+  /* margin-top: 10px; */
+  margin-top: 28px;
+  margin-right: 5px;
 }
 
 div#large_player_right
 div.song
 img.audio-info-white {
@@ -223,11 +225,12 @@
 
 div#large_player_right
 div.song
 span.audio-duration {
   float: left;
-  margin-left: 5px;
+  margin-top: 18px;
+  margin-left: -5px;
   width: 50px;
   font-family: "Lato", sans-serif;
   text-align: center;
   line-height: 45px;
   font-size: 16px;
@@ -241,11 +244,11 @@
 span.song-name {
   font-family: "Lato", sans-serif;
   font-size: 18px;
   letter-spacing: 0.5px;
   line-height: 24px;
-  margin-left: 38px;
+  /* margin-left: 38px; */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--ajs-theme-uno--white);
 }
@@ -257,20 +260,21 @@
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 16px;
   letter-spacing: 0.5px;
   line-height: 16px;
-  margin-left: 38px;
+  /* 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;
+  /* margin-top: 14px; */
+  margin-top: 38px;
 }
 
 div#large_player_right
 div.playlist-screen-controls
 div.list-controls
@@ -279,11 +283,11 @@
   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;
+  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
@@ -293,11 +297,11 @@
 
 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
 div.playlist-screen-controls
 div.list-controls
@@ -317,11 +321,11 @@
 
 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
 div.playlist-screen-controls
 div.list-controls
@@ -330,11 +334,11 @@
   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;
+  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
@@ -466,10 +470,28 @@
   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 {
   display: inline-block;
   width: 60px;
   height: 60px;
   cursor: pointer;
@@ -488,10 +510,28 @@
   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
@@ -513,32 +553,32 @@
   opacity: .5;
 }
 
 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;
   cursor: pointer;
   vertical-align: middle;
 }
 
 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
 # --------------------------------------------------------- */