assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css in j1-template-2024.3.14 vs assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css in j1-template-2024.3.15
- old
+ new
@@ -12,11 +12,11 @@
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
# -----------------------------------------------------------------------------
*/
/* 1. Base
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
.large-player {
-webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
}
@@ -24,20 +24,21 @@
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: 100%;
+ width: 500px;
+ height: auto;
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);
@@ -58,31 +59,29 @@
float: left;
}
.playlist-screen-controls {
cursor: default;
- top: 0;
- position: sticky;
- height: 90px;
+ 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);
}
/* 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;
}
@@ -99,13 +98,13 @@
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;
border-color: var(--ajs-theme-uno--medium-silver);
background-color: var(--ajs-theme-uno--darker-silver) !important;
@@ -117,23 +116,22 @@
display: none;
}
div#large_player_right
div.song.amplitude-active-song-container
-div.song-now-playing-icon-container
+div.song-number-now-playing
span.number {
display: inline-flex;
opacity: 0.5;
font-family: "Lato", sans-serif;
font-size: 16px;
- letter-spacing: 0.5px;
color: var(--ajs-theme-uno--gray-200);
}
div#large_player_right
div.song.amplitude-active-song-container
-div.song-now-playing-icon-container
+div.song-number-now-playing
img.now-playing {
display: block;
margin-top: 5px;
margin-left: 4px;
height: 16px;
@@ -156,48 +154,52 @@
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;
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: 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 */
div#large_player_right
div.song:after {
@@ -205,50 +207,42 @@
display: table;
clear: both;
}
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);
}
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: 0.5px;
line-height: 24px;
- /* margin-left: 38px; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--ajs-theme-uno--white);
}
@@ -258,23 +252,21 @@
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; */
+ 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: 14px; */
- margin-top: 38px;
+ margin-top: 50px;
+ margin-right: -12px;
}
div#large_player_right
div.playlist-screen-controls
div.list-controls
@@ -408,11 +400,10 @@
span.title-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_controls {
height: 65px;
@@ -580,67 +571,92 @@
div#large_player_repeat.amplitude-repeat-on {
background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
}
/* 3. Layout
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
-/* Small only
+/*
+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 LG|MD|SM
# --------------------------------------------------------- */
-@media screen and (max-width: 39.9375em) {
- .lage-player {
- max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
- max-width: -moz-available; /* Firefox */
+
+@media screen and (max-width: 992px),
+screen and (max-width: 768px),
+screen and (max-width: 576px) {
+
+ .large-player {
+ max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
+ max-width: -moz-available; /* Firefox */
}
.compact-player-title-list {
max-height: 500px;
}
+ div#large_player_left {
+ max-width: unset;
+ border: solid 1px;
+ }
+
div.large-player-container {
position: relative;
flex-direction: column;
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);
+ 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 {
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;
+ div#large_player_right
+ div.playlist-screen-controls
+ div.playlist-screen-meta-container
+ span.song-name {
+ font-size: 16px;
}
+
+ .playlist-screen-controls.large-player {
+ display: none;
+ }
+
}
+
/* 4. Pages
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
/* 5. Themes
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
/* 6. Utils
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
/* 7. Vendors
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */
/* 8. Animations
-# --------------------------------------------------------- */
+# ------------------------------------------------------------------------------ */