Exploring the much-requested dark play bar

This commit is contained in:
James Barnsley
2019-12-02 17:01:32 +13:00
parent 26ee67e2f6
commit 4eba09aceb
5 changed files with 16 additions and 18 deletions

View File

@ -4620,10 +4620,10 @@ select {
right: 0;
left: 0;
height: 60px;
background: #FFFFFF;
color: #121212;
background: #383734;
color: #FFFFFF;
transform-style: preserve-3d;
border-left: 230px solid #FFFFFF;
border-left: 230px solid #383734;
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1); }
.playback-controls .current-track {
position: absolute;
@ -4672,7 +4672,7 @@ select {
margin: 8px;
margin-right: 12px; }
.playback-controls .current-track .thumbnail__image {
background-color: #f4f2f0; }
background-color: #383734; }
.playback-controls .current-track .thumbnail:before {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@ -4746,7 +4746,8 @@ select {
padding: 12px 8px;
display: inline-block;
vertical-align: bottom;
background: none; }
background: none;
color: #FFFFFF; }
@keyframes click_feedback {
0% {
@ -4796,8 +4797,7 @@ select {
.playback-controls section.playback .control .icon {
font-size: 1.3rem; }
.playback-controls section.playback .control.play {
margin-bottom: -0.8rem;
color: #08d58f; }
margin-bottom: -0.8rem; }
.playback-controls section.playback .control.play .icon {
font-size: 3rem; }
.playback-controls section.progress {
@ -4805,8 +4805,7 @@ select {
left: 10rem;
right: 25rem;
padding-left: 20px;
padding-right: 20px;
color: #a3a19f; }
padding-right: 20px; }
.playback-controls section.progress .slider {
position: absolute;
bottom: 2px;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1574884475";
var build = "1575258201";
var version = "3.42.2";
// Construct the script tag

View File

@ -5,10 +5,10 @@
right: 0;
left: 0;
height: 60px;
background: colour(white);
color: colour(darkest_grey);
background: colour(grey);
color: colour(white);
transform-style: preserve-3d;
border-left: 230px solid colour(white);
border-left: 230px solid colour(grey);
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
.current-track {
@ -72,7 +72,7 @@
margin-right: 12px;
&__image {
background-color: colour(faint_grey);
background-color: colour(grey);
}
&:before {
@ -149,6 +149,7 @@
display: inline-block;
vertical-align: bottom;
background: none;
color: colour(white);
.icon {
font-size: 0.9rem;
@ -184,7 +185,6 @@
&.play {
margin-bottom: -0.8rem;
color: colour(turquoise);
.icon {
font-size: 3rem;
@ -199,7 +199,6 @@
right: 25rem;
padding-left: 20px;
padding-right: 20px;
color: colour(mid_grey);
.slider {
position: absolute;