j1-template 2024.3.14 → 2024.3.16

data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.css

@@ -19,6 +19,9 @@
 /* Colors
 # --------------------------------------------------------- */
 :root {
+
+  /* Base colors
+  # ------------------------------------------------------- */
   --ajs-theme-uno--blue:                #2196F3;
   --ajs-theme-uno--blue-50:             #E3F2FD;
   --ajs-theme-uno--blue-100:            #BBDEFB;
@@ -67,10 +70,48 @@
 
   --ajs-theme-uno--white:               #FFFFFF;
   --ajs-theme-uno--black:               #000000;
+
+  /* Additional colors
+  # ------------------------------------------------------- */
+  --ajs-theme-uno--lighten-50:          rgba(255, 255, 255, 0.05);
+  --ajs-theme-uno--lighten-100:         rgba(255, 255, 255, 0.1);
+  --ajs-theme-uno--lighten-200:         rgba(255, 255, 255, 0.2);
+  --ajs-theme-uno--lighten-300:         rgba(255, 255, 255, 0.3);
+  --ajs-theme-uno--lighten-400:         rgba(255, 255, 255, 0.4);
+  --ajs-theme-uno--lighten-500:         rgba(255, 255, 255, 0.5);
+  --ajs-theme-uno--lighten-600:         rgba(255, 255, 255, 0.6);
+  --ajs-theme-uno--lighten-700:         rgba(255, 255, 255, 0.7);
+  --ajs-theme-uno--lighten-800:         rgba(255, 255, 255, 0.8);
+  --ajs-theme-uno--lighten-900:         rgba(255, 255, 255, 0.9);
+  --ajs-theme-uno--lighten:             rgba(255, 255, 255, 0.5);
+  
+  --ajs-theme-uno--darken-50:           rgba(0, 0, 0, 0.05);
+  --ajs-theme-uno--darken-100:          rgba(0, 0, 0, 0.1);
+  --ajs-theme-uno--darken-200:          rgba(0, 0, 0, 0.2);
+  --ajs-theme-uno--darken-300:          rgba(0, 0, 0, 0.3);
+  --ajs-theme-uno--darken-400:          rgba(0, 0, 0, 0.4);
+  --ajs-theme-uno--darken-500:          rgba(0, 0, 0, 0.5);
+  --ajs-theme-uno--darken-600:          rgba(0, 0, 0, 0.6);
+  --ajs-theme-uno--darken-700:          rgba(0, 0, 0, 0.7);
+  --ajs-theme-uno--darken-800:          rgba(0, 0, 0, 0.8);
+  --ajs-theme-uno--darken-900:          rgba(0, 0, 0, 0.9);
+  --ajs-theme-uno--darken:              rgba(0, 0, 0, 0.5);
 }
 
 /* Styles
 # --------------------------------------------------------- */
+
+a {
+  border-bottom: unset;
+}
+
+.album-cover-image {
+  display: block;
+  /* max-height: 500px; */
+  /* max-width: 500px; */
+  /* object-fit: cover; */
+}
+
 .amplitude-player {
   max-width: max-content;
 }
@@ -94,6 +135,53 @@
 /* 2. Components
 # --------------------------------------------------------- */
 
+/* Scroller styles
+------------------------------------------------------------ */
+.amplitude-scroller::-webkit-scrollbar {
+	width: 10px;
+	background-color: var(--ajs-theme-uno--gray-100);
+}
+
+.amplitude-scroller::-webkit-scrollbar-track {
+  border-radius: 0px;
+	-webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
+	background-color: var(--ajs-theme-uno--gray-100);
+}
+
+.amplitude-scroller::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+	background-color: var(--ajs-theme-uno--blue-gray-500);
+	background-image: -webkit-gradient(
+    linear,
+    0 0, 0 100%,
+		color-stop(.5, var(--ajs-theme-uno--lighten-200)),
+		color-stop(.5, transparent), to(transparent)
+  );
+}
+
+.amplitude-scroller-gradient::-webkit-scrollbar {
+	width: 10px;
+	background-color: var(--ajs-theme-uno--gray-100);
+}
+
+.amplitude-scroller-gradient::-webkit-scrollbar-track {
+  border-radius: 0px;
+	-webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
+	background-color: var(--ajs-theme-uno--gray-100);
+}
+
+.amplitude-scroller-gradient::-webkit-scrollbar-thumb {
+	border-radius: 0px;
+	background-image: -webkit-gradient(
+    linear,
+		left bottom,
+		left top,
+		color-stop(0.44, var(--ajs-theme-uno--blue-300)),
+		color-stop(0.72, var(--ajs-theme-uno--blue)),
+		color-stop(0.86, var(--ajs-theme-uno--blue-900))
+  )
+}
+
 /* time container
 # --------------------------------------------------------- */
 .time-container {
@@ -138,9 +226,8 @@
 
 .meta-container .song-name {
   display: block;
-  /* margin-bottom: 5px; */
   margin: 0 15px 8px 15px;
-  font-size: 24px;
+  font-size: 18px;
   font-family: "Lato", sans-serif;
   white-space: nowrap;
   overflow: hidden;
@@ -172,7 +259,8 @@ input[type=range].amplitude-volume-slider {
   height: 1px;
   margin-top: 10px;
   margin-left: 5px;
-  width: calc(100% - 100px);
+  /* width: calc(100% - 100px); */  
+  width: calc(100% - 140px);
   background: transparent;
 }
 
@@ -233,25 +321,6 @@ input[type=range].amplitude-volume-slider::-moz-range-thumb:hover {
   background-color: var(--ajs-theme-uno--blue-700);
 }
 
-/* Small only
-# --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
-
-  input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
-    width: 30px;
-    height: 30px;
-    border-radius: 30px;
-    margin-top: -15px;
-  }
-
-  input[type=range].amplitude-volume-slider::-moz-range-thumb {
-    width: 30px;
-    height: 30px;
-    margin-top: -15px;
-    border-radius: 30px;
-  }
-}
-
 /* progress bars
 # --------------------------------------------------------- */
 progress.mini-player-progress,
@@ -279,12 +348,50 @@ progress::-ms-fill {
   background-color: var(--ajs-theme-uno--blue);
 }
 
-/* Small only
+
+/* 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              */
+
+/* BS SM (Mobile)
 # --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
+
+@media screen and (max-width: 576px) {
+
+  input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-top: -15px;
+  }
+
+  input[type=range].amplitude-volume-slider::-moz-range-thumb {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    border-radius: 30px;
+  }
+
   progress.mini-player-progress,
   progress.compact-player-progress,
   progress.large-player-progress {
     height: 16px;
   }
+
+  .meta-container .song-name,
+  .meta-container .audio-artist-album {
+    font-size: 16px;
+  }
+
 }

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

@@ -13,4 +13,4 @@
  # -----------------------------------------------------------------------------
 */
 
-:root{--ajs-theme-uno--blue:#2196f3;--ajs-theme-uno--blue-50:#e3f2fd;--ajs-theme-uno--blue-100:#bbdefb;--ajs-theme-uno--blue-200:#90caf9;--ajs-theme-uno--blue-300:#64b5f6;--ajs-theme-uno--blue-400:#42a5f5;--ajs-theme-uno--blue-500:#2196f3;--ajs-theme-uno--blue-600:#1e88e5;--ajs-theme-uno--blue-700:#1976d2;--ajs-theme-uno--blue-800:#1565c0;--ajs-theme-uno--blue-900:#0d47a1;--ajs-theme-uno--gray:#9e9e9e;--ajs-theme-uno--gray-50:#fafafa;--ajs-theme-uno--gray-100:#f5f5f5;--ajs-theme-uno--gray-200:#eee;--ajs-theme-uno--gray-300:#e0e0e0;--ajs-theme-uno--gray-400:#bdbdbd;--ajs-theme-uno--gray-500:#9e9e9e;--ajs-theme-uno--gray-600:#757575;--ajs-theme-uno--gray-700:#616161;--ajs-theme-uno--gray-800:#424242;--ajs-theme-uno--gray-900:#212121;--ajs-theme-uno--blue-gray:#607d8b;--ajs-theme-uno--blue-gray-50:#eceff1;--ajs-theme-uno--blue-gray-100:#cfd8dc;--ajs-theme-uno--blue-gray-200:#b0bec5;--ajs-theme-uno--blue-gray-300:#90a4ae;--ajs-theme-uno--blue-gray-400:#78909c;--ajs-theme-uno--blue-gray-500:#607d8b;--ajs-theme-uno--blue-gray-600:#546e7a;--ajs-theme-uno--blue-gray-700:#455a64;--ajs-theme-uno--blue-gray-800:#37474f;--ajs-theme-uno--blue-gray-900:#263238;--ajs-theme-uno--silver-200:#748295;--ajs-theme-uno--silver-500:#586372;--ajs-theme-uno--silver-700:#141920;--ajs-theme-uno--silver-800:#242b33;--ajs-theme-uno--light-silver:#748295;--ajs-theme-uno--medium-silver:#586372;--ajs-theme-uno--dark-silver:#141920;--ajs-theme-uno--darker-silver:#242b33;--ajs-theme-uno--white:#fff;--ajs-theme-uno--black:#000}.amplitude-player{max-width:max-content}.audio-player-theme-uno{max-width:max-content}.player-title{text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-top:1.75rem;margin-bottom:.5rem}.time-container{height:40px;padding:10px 20px 10px 20px;font-family:"Lato",sans-serif;font-weight:bold;font-size:14px;color:var(--ajs-theme-uno--white)}.time-container span.current-time{float:left}.time-container span.duration{float:right}.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)}.meta-container{text-align:center;border-top:0 !important}.meta-container .song-name{display:block;margin-bottom:5px;font-size:24px;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-100)}.meta-container .audio-artist-album{font-size:18px;font-weight:bold;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue-gray-300)}.meta-container .audio-artist-album span{display:block}input[type=range].amplitude-volume-slider{-webkit-appearance:none;-moz-appearance:none;float:left;height:1px;margin-top:10px;margin-left:5px;width:calc(100% - 100px);background:transparent}input[type=range].amplitude-volume-slider.compact-player-volume-slider{width:calc(100% - 53px);margin-top:-12px;margin-left:29px}input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:16px;height:16px;border-radius:16px;margin-top:-8px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}input[type=range].amplitude-volume-slider::-moz-range-track{width:100%;height:1px;background-color:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-moz-range-thumb{cursor:pointer;width:16px;height:16px;margin-top:-8px;border-radius:16px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-moz-range-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-moz-range-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}@media screen and (max-width:39.9375em){input[type=range].amplitude-volume-slider::-webkit-slider-thumb{width:30px;height:30px;border-radius:30px;margin-top:-15px}input[type=range].amplitude-volume-slider::-moz-range-thumb{width:30px;height:30px;margin-top:-15px;border-radius:30px}}progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{display:block;cursor:pointer;width:100%;height:8px;border:0;background-color:var(--ajs-theme-uno--silver-500);-webkit-appearance:none;-moz-appearance:none}progress::-webkit-progress-value{background-color:var(--ajs-theme-uno--blue)}progress::-moz-progress-bar{background-color:var(--ajs-theme-uno--blue)}progress::-ms-fill{background-color:var(--ajs-theme-uno--blue)}@media screen and (max-width:39.9375em){progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{height:16px}}
+::root{--ajs-theme-uno--blue:#2196f3;--ajs-theme-uno--blue-50:#e3f2fd;--ajs-theme-uno--blue-100:#bbdefb;--ajs-theme-uno--blue-200:#90caf9;--ajs-theme-uno--blue-300:#64b5f6;--ajs-theme-uno--blue-400:#42a5f5;--ajs-theme-uno--blue-500:#2196f3;--ajs-theme-uno--blue-600:#1e88e5;--ajs-theme-uno--blue-700:#1976d2;--ajs-theme-uno--blue-800:#1565c0;--ajs-theme-uno--blue-900:#0d47a1;--ajs-theme-uno--gray:#9e9e9e;--ajs-theme-uno--gray-50:#fafafa;--ajs-theme-uno--gray-100:#f5f5f5;--ajs-theme-uno--gray-200:#eee;--ajs-theme-uno--gray-300:#e0e0e0;--ajs-theme-uno--gray-400:#bdbdbd;--ajs-theme-uno--gray-500:#9e9e9e;--ajs-theme-uno--gray-600:#757575;--ajs-theme-uno--gray-700:#616161;--ajs-theme-uno--gray-800:#424242;--ajs-theme-uno--gray-900:#212121;--ajs-theme-uno--blue-gray:#607d8b;--ajs-theme-uno--blue-gray-50:#eceff1;--ajs-theme-uno--blue-gray-100:#cfd8dc;--ajs-theme-uno--blue-gray-200:#b0bec5;--ajs-theme-uno--blue-gray-300:#90a4ae;--ajs-theme-uno--blue-gray-400:#78909c;--ajs-theme-uno--blue-gray-500:#607d8b;--ajs-theme-uno--blue-gray-600:#546e7a;--ajs-theme-uno--blue-gray-700:#455a64;--ajs-theme-uno--blue-gray-800:#37474f;--ajs-theme-uno--blue-gray-900:#263238;--ajs-theme-uno--silver-200:#748295;--ajs-theme-uno--silver-500:#586372;--ajs-theme-uno--silver-700:#141920;--ajs-theme-uno--silver-800:#242b33;--ajs-theme-uno--light-silver:#748295;--ajs-theme-uno--medium-silver:#586372;--ajs-theme-uno--dark-silver:#141920;--ajs-theme-uno--darker-silver:#242b33;--ajs-theme-uno--white:#fff;--ajs-theme-uno--black:#000}a{border-bottom:unset}.album-cover-image{display:block}.amplitude-player{max-width:max-content}.audio-player-theme-uno{max-width:max-content}.player-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.time-container{height:40px;padding:10px 20px 10px 20px;font-family:"Lato",sans-serif;font-weight:bold;font-size:14px;color:var(--ajs-theme-uno--white)}.time-container span.current-time{float:left}.time-container span.duration{float:right}.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)}.meta-container{text-align:center;border-top:0 !important}.meta-container .song-name{display:block;margin:0 15px 8px 15px;font-size:18px;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-100)}.meta-container .audio-artist-album{font-size:18px;font-weight:bold;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue-gray-300)}.meta-container .audio-artist-album span{display:block}input[type=range].amplitude-volume-slider{-webkit-appearance:none;-moz-appearance:none;float:left;height:1px;margin-top:10px;margin-left:5px;width:calc(100% - 140px);background:transparent}input[type=range].amplitude-volume-slider.compact-player-volume-slider{width:calc(100% - 53px);margin-top:-12px;margin-left:29px}input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:16px;height:16px;border-radius:16px;margin-top:-8px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}input[type=range].amplitude-volume-slider::-moz-range-track{width:100%;height:1px;background-color:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-moz-range-thumb{cursor:pointer;width:16px;height:16px;margin-top:-8px;border-radius:16px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-moz-range-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-moz-range-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{display:block;cursor:pointer;width:100%;height:8px;border:0;background-color:var(--ajs-theme-uno--silver-500);-webkit-appearance:none;-moz-appearance:none}progress::-webkit-progress-value{background-color:var(--ajs-theme-uno--blue)}progress::-moz-progress-bar{background-color:var(--ajs-theme-uno--blue)}progress::-ms-fill{background-color:var(--ajs-theme-uno--blue)}@media screen and (max-width:576px){input[type=range].amplitude-volume-slider::-webkit-slider-thumb{width:30px;height:30px;border-radius:30px;margin-top:-15px}input[type=range].amplitude-volume-slider::-moz-range-thumb{width:30px;height:30px;margin-top:-15px;border-radius:30px}progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{height:16px}.meta-container .song-name,.meta-container .audio-artist-album{font-size:16px}}

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

@@ -15,8 +15,10 @@
 
 /* 1. Base
 # --------------------------------------------------------- */
+
 .compact-player {
-  max-width: 475px;
+  width: 500px;
+  height: auto;
   border: solid 1px;
   border-color: var(--ajs-theme-uno--medium-silver);
 }
@@ -29,20 +31,24 @@
 
 .meta-container.compact-player {
   height: 120px;
+  border: 0px;       /* jadams 2024-11-06: workaround, prevent double borders */
 }
 
 /* 2. Components
 # --------------------------------------------------------- */
 
-/* player TOP
+/* Player TOP
 # --------------------------------------------------------- */
 div.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"] {
-  width: 100%;
+  width: 498px;    /* size of cover image (rendered) - 1px borders left|right */
+  height: auto;
+  object-fit: cover;
 }
 
 div.compact-player-header {
@@ -65,12 +71,11 @@ div.compact-player-header {
   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
+/* Player MIDDLE
 # --------------------------------------------------------- */
 div#compact_player_control_container {
   margin-top: 20px;
@@ -113,7 +118,7 @@ div.amplitude-mute {
   cursor: pointer;
   width: 25px;
   height: 19px;
-  margin-left: 6px;
+  margin-left: 40px;
 }
 
 div#compact_player_control_container
@@ -153,7 +158,6 @@ div#compact_player_shuffle {
   width: 24px;
   height: 24px;
   vertical-align: middle;
-  /* margin-right: 25px; */
 }
 
 div.compact-player-middle
@@ -350,7 +354,7 @@ div.amplitude-mute.amplitude-muted {
   background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
 }
 
-/* player BOTTOM
+/* Player BOTTOM
 # --------------------------------------------------------- */
 div.player-bottom {
   background-color: var(--ajs-theme-uno--black);
@@ -358,18 +362,50 @@ div.player-bottom {
 
 
 /* 3. Layout
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
+
+/*
+Bootstrap (BS) grid breakpoints
+  SN:     576px           Mobile
+  MD:     768px           Small Desktop|Tablet
+  LG:     992px           Desktop
+  XL:     1200px          Large Desktop
+  XXL:    1400px          X Large Desktop
+ */
 
-/* Small only
+ /* max-width: -webkit-fill-available;  Chrome, Safari, Edge */
+ /* max-width: -moz-available;          Firefox              */
+
+
+/* BS SM (Mobile)
 # --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
+
+@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"] {
+    max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
+    max-width: -moz-available; /* Firefox */
+  }
+
   input[type=range].amplitude-volume-slider {
     width: calc(100% - 100px);
   }
+
+  div.compact-player-playlist {
+    width: calc(100% - 1px); 
+  }
+
 }
 
+
 /* 4. Pages
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* playlist
 # --------------------------------------------------------- */
@@ -389,15 +425,16 @@ div.compact-player-volume-container {
 }
 
 div.compact-player-playlist {
-  background-color: var(--ajs-theme-uno--black);
+  display: none;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
-  z-index: 9999;
-  display: none;
-  max-width: 475px;
+  /* 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);
 }
 
 div.compact-player-playlist
@@ -411,16 +448,19 @@ div.compact-player-title-list
 div.song {
   padding: 15px;
   cursor: pointer;
-  line-height: 24px;
+  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 {
-  display: inline-block;
-  width: 24px;
-  text-align: center;
+div.song
+span.song-number-now-playing {
+  float: left;
+  width: 5px;
+  height: 20px;
+  margin-top: 8px;
+  margin-right: 20px;
 }
 
 div.compact-player-playlist
@@ -431,7 +471,6 @@ span.number {
   opacity: 0.5;
   font-family: "Lato", sans-serif;
   font-size: 14px;
-  letter-spacing: 0.5px;
   color: var(--ajs-theme-uno--white);
 }
 
@@ -448,8 +487,6 @@ div.compact-player-title-list
 div.song
 div.song-meta-container {
   display: inline-block;
-  margin-left: 20px;
-  vertical-align: middle;
   width: calc(100% - 120px);
 }
 
@@ -459,23 +496,39 @@ div.song
 div.song-meta-container
 span.song-name {
   display: block;
+  width: calc(100% - 40px);
+  margin-left: 10px;
   font-family: "Lato", sans-serif;
-  font-size: 20px;
-  line-height: 20px;
-  letter-spacing: 0.47px;
+  font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--ajs-theme-uno--blue);
 }
 
+div.compact-player-playlist
+div.compact-player-title-list
+div.song
+div.song-meta-container
+span.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);
+}
+
 div.compact-player-playlist
 div.compact-player-title-list
 div.song
 div.song-meta-container
 span.song-artist-album {
   display: block;
+  margin-left: 10px;
   font-family: "Lato", sans-serif;
   font-size: 16px;
-  line-height: 28px;
-  letter-spacing: 0.47px;
   color: var(--ajs-theme-uno--gray-300);
 }
 
@@ -483,9 +536,11 @@ div.compact-player-playlist
 div.compact-player-title-list
 div.song
 span.audio-duration {
+  float: right;
+  margin-top: -46px;
+  margin-right: -108px;
   font-family: "Lato", sans-serif;
   font-size: 16px;
-  line-height: 28px;
   color: var(--ajs-theme-uno--gray-300);
 }
 
@@ -498,7 +553,6 @@ span.song-duration {
   width: 35px;
   font-family: "Lato", sans-serif;
   font-size: 18px;
-  letter-spacing: 0.5px;
   text-align: center;
   color: var(--ajs-theme-uno--white);
 }
@@ -506,19 +560,10 @@ span.song-duration {
 div.compact-player-playlist
 div.compact-player-title-list
 div.song
-img.audio-info-blue {
+span.audio-info {
   float: right;
-  display: block;
-  margin-top: 10px;
-}
-
-div.compact-player-playlist
-div.compact-player-title-list
-div.song
-img.audio-info-white {
-  float: right;
-  display: none;
-  margin-top: 10px;
+  margin-top: -24px;
+  margin-right: -110px;
 }
 
 div.compact-player-playlist
@@ -535,8 +580,8 @@ img.now-playing {
   display: inline-block;
   height: 16px;
   width: 16px;
-  margin-top: 5px;
-  margin-left: 10px;
+  margin-top: 2px;
+  margin-left: 4px;
 }
 
 div.compact-player-playlist
@@ -559,10 +604,11 @@ div.playlist-screen-controls
 div.playlist-screen-meta-container
 span.song-name {
   font-family: "Lato", sans-serif;
-  font-size: 22px;
-  letter-spacing: 0.5px;
+  font-size: 18px;
   line-height: 24px;
-  margin-left: 38px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--ajs-theme-uno--white);
 }
 
@@ -572,10 +618,8 @@ div.playlist-screen-meta-container
 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;
+  font-size: 15px;
+  line-height: 18px;
   color: var(--ajs-theme-uno--white);
 }
 
@@ -583,8 +627,7 @@ div.compact-player-playlist
 div.playlist-screen-controls
 div.list-controls {
   float: right;
-  width: 90px;
-  margin-top: 8px;
+  margin-top: 48px;
 }
 
 div.compact-player-playlist
@@ -662,36 +705,19 @@ div.list-next:hover {
   opacity: 0.5;
 }
 
-/* 3. Layout
-# --------------------------------------------------------- */
-
-/* Small only
-# --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
-
-  /* jadams, workaround to limit player width on smart phones */
-  div.compact-player-playlist
-  div.playlist-screen-controls
-  div.playlist-screen-meta-container
-  span.song-name {
-    margin-left: 0;
-  }
-}
-
-/* 4. Pages
-# --------------------------------------------------------- */
 
 /* 5. Themes
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 6. Utils
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 /* 7. Vendors
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
+
 
 /* 8. Animations
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
 
 .slide-in-top {
   -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

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

@@ -13,4 +13,4 @@
  # -----------------------------------------------------------------------------
 */
 
-.compact-player{max-width:475px;border:solid 1px;border-color:var(--ajs-theme-uno--medium-silver)}.compact-player-container{position:relative;max-width:max-content;overflow-y:clip}.meta-container.compact-player{height:120px}div.player-top{position:relative}div.player-top img[data-amplitude-song-info="cover_art_url"]{width:100%}div.compact-player-header{position:relative;padding:15px;cursor:pointer;text-align:center;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--dark-silver)}.compact-player-header-arrows{position:absolute;top:23px;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}div#compact_player_control_container{margin-top:20px;margin-bottom:20px}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}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:6px}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{display:inline-block;cursor:pointer;width:24px;height:24px;vertical-align:middle}div.compact-player-middle div.compact-player-controls-container div#compact_player_shuffle:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{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{display:inline-block;cursor:pointer;vertical-align:middle;width:24px;height:24px;margin-right:20px;margin-left:20px}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}div.compact-player-middle div.compact-player-controls-container div#compact_player_previous:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div.compact-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.compact-player-middle div.compact-player-controls-container div.compact-player-skip-backward:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_play_pause{display:inline-block;cursor:pointer;width:60px;height:60px;vertical-align:middle}div.compact-player-middle div.compact-player-controls-container div#compact_player_play_pause:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{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{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.compact-player-middle div.compact-player-controls-container div.compact-player-skip-forward:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_next{display:inline-block;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}div.compact-player-middle div.compact-player-controls-container div#compact_player_next:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_repeat{display:inline-block;cursor:pointer;width:24px;height:24px;vertical-align:middle;margin-right:25px}div.compact-player-middle div.large-player-controls-container div#compact_player_repeat:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat}div.compact-player-middle div.compact-player-controls-container::after{content:"";display:table;clear:both}div.compact-player-middle div.volume-container img{display:block;float:left}div.compact-player-middle div.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}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}div.player-bottom{background-color:var(--ajs-theme-uno--black)}@media screen and (max-width:39.9375em){input[type=range].amplitude-volume-slider{width:calc(100% - 100px)}}.compact-player-title-list{display:block;height:550px;overflow-y:scroll}.playlist-screen-meta-container{float:left;width:calc(100% - 123px)}div.compact-player-volume-container{margin-top:20px}div.compact-player-playlist{background-color:var(--ajs-theme-uno--black);position:absolute;top:0;right:0;left:0;bottom:0;z-index:9999;display:none;max-width:475px}div.compact-player-playlist div.compact-player-title-list{height:600px;overflow-y:scroll}div.compact-player-playlist div.compact-player-title-list div.song{padding:15px;cursor:pointer;line-height:24px;background-color:var(--ajs-theme-uno--darker-silver)}div.compact-player-playlist div.compact-player-title-list div.song span.song-number-now-playing{display:inline-block;width:24px;text-align:center}div.compact-player-playlist div.compact-player-title-list div.song span.song-number-now-playing span.number{opacity:.5;font-family:"Lato",sans-serif;font-size:14px;letter-spacing:.5px;color:var(--ajs-theme-uno--white)}div.compact-player-playlist div.compact-player-title-list div.song span.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;margin-left:20px;vertical-align:middle;width:calc(100% - 120px)}div.compact-player-playlist div.compact-player-title-list div.song div.song-meta-container span.song-name{display:block;font-family:"Lato",sans-serif;font-size:20px;line-height:20px;letter-spacing:.47px;color:var(--ajs-theme-uno--blue)}div.compact-player-playlist div.compact-player-title-list div.song div.song-meta-container span.song-artist-album{display:block;font-family:"Lato",sans-serif;font-size:16px;line-height:28px;letter-spacing:.47px;color:var(--ajs-theme-uno--gray-300)}div.compact-player-playlist div.compact-player-title-list div.song span.audio-duration{font-family:"Lato",sans-serif;font-size:16px;line-height:28px;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:.5;width:35px;font-family:"Lato",sans-serif;font-size:18px;letter-spacing:.5px;text-align:center;color:var(--ajs-theme-uno--white)}div.compact-player-playlist div.compact-player-title-list div.song img.audio-info-blue{float:right;display:block;margin-top:10px}div.compact-player-playlist div.compact-player-title-list div.song img.audio-info-white{float:right;display:none;margin-top:10px}div.compact-player-playlist div.compact-player-title-list div.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 img.now-playing{display:inline-block;height:16px;width:16px;margin-top:5px;margin-left:10px}div.compact-player-playlist div.compact-player-title-list div.song.amplitude-active-song-container span.song-number-now-playing span.number{display:none}div.compact-player-playlist div.playlist-screen-controls div.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{font-family:"Lato",sans-serif;font-size:22px;letter-spacing:.5px;line-height:24px;margin-left:38px;color:var(--ajs-theme-uno--white)}div.compact-player-playlist 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.compact-player-playlist div.playlist-screen-controls div.list-controls{float:right;width:90px;margin-top:8px}div.compact-player-playlist 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-repeat:no-repeat;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{opacity:.5}div.compact-player-playlist div.playlist-screen-controls div.list-controls div.list-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{opacity:.5}div.compact-player-playlist div.playlist-screen-controls div.list-controls div.list-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{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{float:left;cursor:pointer;width:15px;height:17px;margin-left:15px;margin-top:4px;background-repeat:no-repeat;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{opacity:.5}@media screen and (max-width:39.9375em){div.compact-player-playlist div.playlist-screen-controls div.playlist-screen-meta-container span.song-name{margin-left:0}}.slide-in-top{-webkit-animation:slide-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both;animation:slide-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both}@-webkit-keyframes slide-in-top{0{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.slide-out-top{-webkit-animation:slide-out-top .5s cubic-bezier(0.55,0.085,0.68,0.53) both;animation:slide-out-top .5s cubic-bezier(0.55,0.085,0.68,0.53) both}@-webkit-keyframes slide-out-top{0{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}}@keyframes slide-out-top{0{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}}
+.compact-player{width:500px;height:auto;border:solid 1px;border-color:var(--ajs-theme-uno--medium-silver)}.compact-player-container{position:relative;max-width:max-content;overflow-y:clip}.meta-container.compact-player{height:120px;border:0}div.player-top{position:relative}div.player-top img[data-amplitude-song-info="cover_art_url"]{width:498px;height:auto;object-fit:cover}div.compact-player-header{position:relative;padding:15px;cursor:pointer;text-align:center;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--dark-silver)}.compact-player-header-arrows{position:absolute;top:23px;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}div#compact_player_control_container{margin-top:20px;margin-bottom:20px}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}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{display:inline-block;cursor:pointer;width:24px;height:24px;vertical-align:middle}div.compact-player-middle div.compact-player-controls-container div#compact_player_shuffle:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{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{display:inline-block;cursor:pointer;vertical-align:middle;width:24px;height:24px;margin-right:20px;margin-left:20px}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}div.compact-player-middle div.compact-player-controls-container div#compact_player_previous:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div.compact-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.compact-player-middle div.compact-player-controls-container div.compact-player-skip-backward:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_play_pause{display:inline-block;cursor:pointer;width:60px;height:60px;vertical-align:middle}div.compact-player-middle div.compact-player-controls-container div#compact_player_play_pause:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{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{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.compact-player-middle div.compact-player-controls-container div.compact-player-skip-forward:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_next{display:inline-block;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}div.compact-player-middle div.compact-player-controls-container div#compact_player_next:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#compact_player_repeat{display:inline-block;cursor:pointer;width:24px;height:24px;vertical-align:middle;margin-right:25px}div.compact-player-middle div.large-player-controls-container div#compact_player_repeat:hover{opacity:.5}div.compact-player-middle div.compact-player-controls-container div#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{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat}div.compact-player-middle div.compact-player-controls-container::after{content:"";display:table;clear:both}div.compact-player-middle div.volume-container img{display:block;float:left}div.compact-player-middle div.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}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}div.player-bottom{background-color:var(--ajs-theme-uno--black)}@media screen and (max-width:576px){.compact-player{max-width:-webkit-fill-available;max-width:-moz-available}div.player-top img[data-amplitude-song-info="cover_art_url"]{max-width:-webkit-fill-available;max-width:-moz-available}input[type=range].amplitude-volume-slider{width:calc(100% - 100px)}div.compact-player-playlist{width:calc(100% - 1px)}}.compact-player-title-list{display:block;height:550px;overflow-y:scroll}.playlist-screen-meta-container{float:left;width:calc(100% - 123px)}div.compact-player-volume-container{margin-top:20px}div.compact-player-playlist{display:none;position:absolute;top:0;right:0;left:0;bottom:0;width:calc(100%+1px);background-color:var(--ajs-theme-uno--black)}div.compact-player-playlist div.compact-player-title-list{height:600px;overflow-y:scroll}div.compact-player-playlist div.compact-player-title-list div.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{float:left;width:5px;height:20px;margin-top:8px;margin-right:20px}div.compact-player-playlist div.compact-player-title-list div.song span.song-number-now-playing span.number{opacity:.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 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{display:block;width:calc(100% - 40px);margin-left:10px;font-family:"Lato",sans-serif;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue)}div.compact-player-playlist div.compact-player-title-list div.song div.song-meta-container span.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)}div.compact-player-playlist div.compact-player-title-list div.song div.song-meta-container span.song-artist-album{display:block;margin-left:10px;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{float:right;margin-top:-46px;margin-right:-108px;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:.5;width:35px;font-family:"Lato",sans-serif;font-size:18px;text-align:center;color:var(--ajs-theme-uno--white)}div.compact-player-playlist div.compact-player-title-list div.song span.audio-info{float:right;margin-top:-24px;margin-right:-110px}div.compact-player-playlist div.compact-player-title-list div.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 img.now-playing{display:inline-block;height:16px;width:16px;margin-top:2px;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{display:none}div.compact-player-playlist div.playlist-screen-controls div.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{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.compact-player-playlist div.playlist-screen-controls div.playlist-screen-meta-container div.song-artist-album{opacity:.5;font-family:"Lato",sans-serif;font-size:15px;line-height:18px;color:var(--ajs-theme-uno--white)}div.compact-player-playlist div.playlist-screen-controls div.list-controls{float:right;margin-top:48px}div.compact-player-playlist 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-repeat:no-repeat;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{opacity:.5}div.compact-player-playlist div.playlist-screen-controls div.list-controls div.list-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{opacity:.5}div.compact-player-playlist div.playlist-screen-controls div.list-controls div.list-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{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{float:left;cursor:pointer;width:15px;height:17px;margin-left:15px;margin-top:4px;background-repeat:no-repeat;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{opacity:.5}.slide-in-top{-webkit-animation:slide-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both;animation:slide-in-top .5s cubic-bezier(0.25,0.46,0.45,0.94) both}@-webkit-keyframes slide-in-top{0{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.slide-out-top{-webkit-animation:slide-out-top .5s cubic-bezier(0.55,0.085,0.68,0.53) both;animation:slide-out-top .5s cubic-bezier(0.55,0.085,0.68,0.53) both}@-webkit-keyframes slide-out-top{0{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}}@keyframes slide-out-top{0{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}}