j1-template 2024.3.18 → 2024.3.20

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

@@ -14,26 +14,148 @@
 */
 
 /* 1. Base
-# ------------------------------------------------------------------------------ */
-
+# --------------------------------------------------------- */
 .large-player {
-  -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
+  -webkit-font-smoothing: antialiased;
 }
 
+/* 2. Components
+# --------------------------------------------------------- */
+
 .large-player-container {
-    display: flex;
-    max-width: fit-content;
-    background: var(--ajs-theme-uno--white);
+  display: flex;
+  max-width: fit-content;
+  background: var(--ajs-theme-uno--white);
 }
-
-/* jadams, 2024-11-04: Overload user agent styles (img) for width|height */
-.player-left-top img {
-  width: 500px;
-  /* height: auto; */
-  height: 500px;
-  object-fit: cover;
+.large-player-controls-container {
+  text-align: center;
+}
+.amplitude-shuffle {
+  display: inline-block;
+  user-select: none;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  vertical-align: middle;
+  margin-right: 25px;
+}
+.amplitude-shuffle:hover {
+  opacity: 0.5;
+}
+.amplitude-shuffle-on {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
+}
+.amplitude-shuffle-off {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
+}
+.large-player-previous {
+  display: inline-block;
+  user-select: none;
+  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;
+}
+.large-player-previous:hover {
+  opacity: 0.5;
+}
+.large-player-previous:focus:not(:focus-visible) {
+  outline: none;
+}
+.large-player-skip-backward {
+  display: inline-block;
+  user-select: none;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  margin-right: 20px;
+  vertical-align: middle;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
+}
+.large-player-skip-backward:focus:not(:focus-visible) {
+  outline: none;
+}
+.large-player-skip-backward:hover {
+  opacity: 0.5;
+}
+.large-player-play-pause {
+  display: inline-block;
+  user-select: none;
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.large-player-play-pause:hover {
+  opacity: 0.5;
+}
+.large-player-play-pause:focus:not(:focus-visible) {
+  outline: none;
+}
+div.large-player-play-pause.amplitude-paused {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
+}
+div.large-player-play-pause.amplitude-playing {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
+}
+.large-player-skip-forward {
+  display: inline-block;
+  user-select: none;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  margin-left: 20px;
+  vertical-align: middle;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
+}
+.large-player-skip-forward:focus:not(:focus-visible) {
+  outline: none;
+}
+.large-player-skip-forward:hover {
+  opacity: 0.5;
+}
+.large-player-skip-forward.amplitude-playing {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
+}
+.large-player-next {
+  display: inline-block;
+  user-select: none;
+  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;
+}
+.large-player-next:focus:not(:focus-visible) {
+  outline: none;
+}
+.large-player-next:hover {
+  opacity: 0.5;
+}
+.amplitude-repeat {
+  display: inline-block;
+  user-select: none;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.amplitude-repeat:focus:not(:focus-visible) {
+  outline: none;
+}
+.amplitude-repeat:hover {
+  opacity: 0.5;
+}
+.amplitude-repeat-off {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
+}
+.amplitude-repeat-on {
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
 }
-
 .large-player-playlist-header {
   cursor: pointer;
   top: 0;
@@ -44,22 +166,27 @@
   color: var(--ajs-theme-uno--white);
   background-color: var(--ajs-theme-uno--dark-silver);
 }
-
 .large-player-title-list {
   display: block;
-  max-height: 600px;
+  /* max-height: 600px; */
+  max-height: 540px;
   overflow-y: scroll;
 }
-
+.large-player-control-container {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.large-player-volume-container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
 .meta-container.large-player {
   height: 120px;
 }
-
 .playlist-screen-meta-container {
   width: calc(100% - 80px);
   float: left;
 }
-
 .playlist-screen-controls {
   cursor: default;
   height: 100px;
@@ -70,93 +197,74 @@
   color: var(--ajs-theme-uno--white);
   background-color: var(--ajs-theme-uno--black);
 }
-
-/* 2. Components
-# ------------------------------------------------------------------------------ */
-
-div#large_player_left {
+.large-player-left {
   display: flex;
   flex: 1;
   flex-direction: column;
-  /* jadams, 2014-11-07: width (overall) DISABLED on the left */
-  /* width: 50%; */
+  width: 50vw;
   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%;
+.large-player-left-top img {
+  width: 500px;
+  height: 500px;
+  object-fit: cover;
 }
-
-div#large_player_left
-div#player-left-bottom {
-  flex: 1;
-  background-color: var(--ajs-theme-uno--blue-gray-900);
+.large-player-left-middle {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-left: 40px;
 }
-
-div#large_player_right {
+.large-player-left-bottom {
+  background-color: var(--ajs-theme-uno--black);
+}
+.large-player-right {
   display: flex;
   flex: 1;
   flex-direction: column;
   flex-grow: 1;
-  width: 50%;                     /* make flex colums same in width (overall) */
-  min-width: 500px;
+  width: 50vw;
   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 {
+.amplitude-song-container img.now-playing {
   display: none;
 }
-
-div#large_player_right
-div.song.amplitude-active-song-container
-div.song-number-now-playing
-span.number {
-  display: inline-flex;
-  opacity: 0.5;
-  font-family: "Lato", sans-serif;
-  font-size: 16px;
-  color: var(--ajs-theme-uno--gray-200);
+.amplitude-active-song-container {
+  background-color: var(--ajs-theme-uno--medium-silver) !important;
 }
-
-div#large_player_right
-div.song.amplitude-active-song-container
-div.song-number-now-playing
-img.now-playing {
+.amplitude-active-song-container img.now-playing {
   display: block;
   margin-top: 5px;
+  margin-right: 8px;
   margin-left: 4px;
   height: 16px;
   width: 16px;
 }
 
-div#large_player_right
-div.song {
+
+.amplitude-song {
   cursor: pointer;
   padding: 12px;
   background-color: var(--ajs-theme-uno--darker-silver);
 }
+.amplitude-song:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 
-div#large_player_right
-div.song
-div.audio-meta-data {
+.audio-meta-data {
   float: left;
   width: calc(100% - 145px);
 }
-
-div#large_player_right
-div.song
-div.audio-meta-data
-span.audio-artist {
+.audio-artist {
   font-size: 16px;
   line-height: 18px;
   white-space: nowrap;
@@ -164,11 +272,7 @@ span.audio-artist {
   text-overflow: ellipsis;
   color: var(--ajs-theme-uno--gray-300);
 }
-
-div#large_player_right
-div.song
-div.audio-meta-data
-span.audio-title {
+.audio-title {
   display: block;
   width: calc(100% - 25px);
   font-family: "Lato", sans-serif;
@@ -179,68 +283,21 @@ span.audio-title {
   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: -80px;
-} */
-
-/* clearfix */
-div#large_player_right
-div.song:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-div#large_player_right
-div.song 
-div.song-number-now-playing {
+.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;
+.audio-duration {
+  float: right;
+  /* margin-left: 103px; */
   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 {
+.song-name {
   line-height: 24px;
   white-space: nowrap;
   overflow: hidden;
@@ -250,52 +307,37 @@ span.song-name {
   color: var(--ajs-theme-uno--white);
 }
 
-div#large_player_right
-div.playlist-screen-controls
+div.screen-controls-large-player
 div.playlist-screen-meta-container
 span.audio-rating {
   display: flex;
-  align-items: center;
   float: right;
-  margin-top: 4px;
+  margin-top: 10px;
   margin-right: -48px;
-  font-family: "Lato", sans-serif;
-  font-size: 18px;
-  color: var(--ajs-theme-uno--gray-400);
-}
-
-div#large_player_right
-div.playlist-screen-controls
-div.playlist-screen-meta-container
-span.audio-info {
-  float: right;
-  margin-right: -80px;
 }
 
-div#large_player_right
-div.playlist-screen-controls
-div.playlist-screen-meta-container
-div.song-artist-album {
+div.playlist-screen-meta-container .song-artist-album {
   opacity: 0.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 {
+.audio-rating {
+  float: left;
+  padding-left: 65px;
+}
+.amplitude-audio-info {
+  float: right;
+  margin-right: -80px;
+}
+div.playlist-screen-controls div.list-controls {
   float: right;
   width: 90px;
-  margin-top: 50px;
+  margin-top: 45px;
   margin-right: -12px;
 }
-
-div#large_player_right
-div.playlist-screen-controls
-div.list-controls
-div.list-previous {
+div.playlist-screen-controls div.list-controls div.list-previous {
   float: left;
   cursor: pointer;
   width: 15px;
@@ -304,329 +346,55 @@ div.list-previous {
   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.playlist-screen-controls div.list-controls div.list-previous:hover {
+  opacity: 0.5;
 }
-
-div#large_player_right
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause.amplitude-paused {
+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 {
+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.playlist-screen-controls div.list-controls div.list-play-pause:hover {
+  opacity: 0.5;
 }
-
-div#large_player_right
-div.playlist-screen-controls
-div.list-controls
-div.list-play-pause.amplitude-playing {
+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 {
+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;
-}
-
-/* clearfix */
-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;
-}
-
-/* clearfix */
-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: 0.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;
+  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.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 {
+div.playlist-screen-controls div.list-controls div.list-next: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;
-  vertical-align: middle;
-}
-
-/* jadams, 2024-12-05: add play_pause button as a class */
-/*
-.amplitude-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;
-}
-
-/* jadams, 2024-12-05: add play_pause button as a class */
-/* .amplitude-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;
-}
-
-/* jadams, 2024-12-05: add play_pause button as a class */
-/* .amplitude-play-pause {
-  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
-} */
- /* /assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg*/
-
-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;
-}
+div.large-player-volume-container
+input[type=range].amplitude-volume-slider {
+    float: left;
+    height: 1px;
+    margin-top: 10px;
+    margin-left: 5px;
+    width: calc(100% - 165px);
+    background: transparent;
+}  
 
 /* 3. Layout
 # ------------------------------------------------------------------------------ */
 
 /*
-Bootstrap grid breakpoints
+Bootstrap (BS) grid breakpoints
   SN:     576px           Mobile
   MD:     768px           Small Desktop|Tablet
-  LG:     992px           Default Desktop
+  LG:     992px           Desktop
   XL:     1200px          Large Desktop
   XXL:    1400px          X Large Desktop
  */
@@ -635,79 +403,141 @@ Bootstrap grid breakpoints
  /* max-width: -moz-available;          Firefox              */
 
 
-/* BS LG|MD|SM
+/* BS LG (Desktop)
 # --------------------------------------------------------- */
+@media (orientation: portrait) and (max-width: 992px) {
+  .large-player-left {
+    width: 35vw;
+  }
+  .large-player-left-top img {
+    width: 45vw;
+    object-fit: cover;
+  }
 
-@media screen and (max-width: 992px),
-screen and (max-width: 768px),
-screen and (max-width: 576px) {
+  input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
+    background-color: var(--ajs-theme-uno--blue-500);
+    width: 25px;
+    height: 25px;
+  }
 
-  .large-player {
-    max-width: -webkit-fill-available;                /* Chrome, Safari, Edge */
-    max-width: -moz-available;                        /* Firefox */
+  input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
+    background-color: var(--ajs-theme-uno--blue-500);
+    width: 25px;
+    height: 25px;
   }
 
-/*   .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);
+/* BS MD (Desktop)
+# --------------------------------------------------------- */
+@media (orientation: portrait) and (max-width: 768px) {
+  .large-player-left {
+    width: 35vw;
   }
-
-  div.large-player-container {
-    position: relative;
-    flex-direction: column;
-    max-height: fit-content;
-    max-width: fit-content;
+  .large-player-left-top img {
+    width: 45vw;
+    object-fit: cover;
   }
+}
 
-  div.large-player-container
-  div#large_player_right {
-    width: auto;
-    min-width: unset;
+/* BS LG (Desktop)
+# --------------------------------------------------------- */
+@media (orientation: landscape) and (max-width: 992px) {
+  .large-player-left {
+    width: 35vw;
   }
+  .large-player-left-top img {
+    width: 95vw;
+    object-fit: cover;
+  }
+}
 
-  .player-left-top img {
-    height: 700px;
-    width: -webkit-fill-available;                    /* Chrome, Safari, Edge */
-    width: -moz-available;                            /* Firefox */
+/* BS MD (Desktop)
+# --------------------------------------------------------- */
+@media (orientation: landscape) and (max-width: 768px) {
+  .large-player-left {
+    width: 35vw;
   }
+  .large-player-left-top img {
+    width: 95vw;
+    object-fit: cover;
+  }
+}
+
+/* BS SM (Mobile)
+# --------------------------------------------------------- */
+
+@media screen and (max-width: 576px) {
 
-  div#large_player_control_container {
+  .large-player {
+    max-width: -webkit-fill-available;
+    max-width: -moz-available;
+  }
+ 
+  .large-player-container {
+    position: relative;
+    flex-direction: column;
+    max-height: fit-content;
+    max-width: fit-content;
+  }
+  .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 {
+  .large-player-title-list {
+    border-bottom: 1px solid;
+    border-color: var(--ajs-theme-uno--medium-silver);
+  }
+  .large-player-left {
+    width: auto;
+    max-width: unset;
+    border: solid 1px;
+    border-color: var(--ajs-theme-uno--medium-silver);
+  }
+  .large-player-left-top img {
+    width: 93vw;
+    object-fit: cover;
+  }
+  .large-player-right {
+    width: auto;
+    min-width: unset;
     border-top: 0px;
     border-right: 1px solid;
     border-bottom: 1px solid;
     border-left: 1px solid;
     border-color: var(--ajs-theme-uno--medium-silver);
   }
+  .amplitude-mute {
+    margin-left: 14px;
+  }
 
-  .large-player-title-list {
-    border-bottom: 1px solid;
-    border-color: var(--ajs-theme-uno--medium-silver);
+  div.large-player-volume-container
+  input[type=range].amplitude-volume-slider {
+    appearance: none;
+    width: calc(100% - 106px);
   }
 
+  div.large-player-volume-container
+  input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-top: -15px;    
+    background-color: var(--ajs-theme-uno--blue-500);
+  }
+  div.large-player-volume-container
+  input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin-top: -15px;    
+    background-color: var(--ajs-theme-uno--blue-500);
+  }
 }
 
-
 /* 4. Pages
 # ------------------------------------------------------------------------------ */
 
@@ -721,4 +551,4 @@ screen and (max-width: 576px) {
 # ------------------------------------------------------------------------------ */
 
 /* 8. Animations
-# ------------------------------------------------------------------------------ */
+# ------------------------------------------------------------------------------ */