Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change volume control and download buttons in web UI (#14122)

Browse source 
* Fix audio download button not starting download in web UI

* Fix volume controls on audio and video players in web UI

* Remove download button from video player in web UI
This commit is contained in:
Eugen Rochko 2020-06-23 12:20:14 +02:00 • committed by GitHub
parent aaf91abffa
commit 419ad6248b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

63
app/javascript/styles/mastodon/components.scss
View file

@ -5309,13 +5309,21 @@ a.status-card.compact:hover {
height: 100%;
}
.video-player__volume::before,
.video-player__seek::before {
background: rgba($white, 0.15);
}
&.with-light-background {
color: $black;
.video-player__volume::before,
.video-player__seek::before {
color: rgba($black, 0.35);
background: rgba($black, 0.15);
}
.video-player__seek__seek {
color: rgba($black, 0.2);
.video-player__seek__buffer {
background: rgba($black, 0.2);
}
.video-player__buttons button {
@ -5333,10 +5341,6 @@ a.status-card.compact:hover {
.video-player__time-current {
color: $black;
}
.video-player__volume::before {
background: rgba($black, 0.35);
}
}
.video-player__seek::before,
@ -5364,6 +5368,7 @@ a.status-card.compact:hover {
border-radius: 4px;
box-sizing: border-box;
direction: ltr;
color: $white;
&.editable {
border-radius: 0;
@ -5476,6 +5481,10 @@ a.status-card.compact:hover {
}
&__buttons {
display: flex;
flex: 0 1 auto;
min-width: 30px;
align-items: center;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
@ -5494,6 +5503,7 @@ a.status-card.compact:hover {
}
button {
flex: 0 0 auto;
background: transparent;
padding: 2px 10px;
font-size: 16px;
@ -5508,6 +5518,13 @@ a.status-card.compact:hover {
}
}
&__time {
display: inline;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
&__time-sep,
&__time-total,
&__time-current {
@ -5517,7 +5534,6 @@ a.status-card.compact:hover {
&__time-current {
color: $white;
margin-left: 60px;
}
&__time-sep {
@ -5531,9 +5547,22 @@ a.status-card.compact:hover {
}
&__volume {
flex: 0 0 auto;
display: inline-flex;
cursor: pointer;
height: 24px;
display: inline;
position: relative;
overflow: hidden;
.no-reduce-motion & {
transition: all 100ms linear;
}
&.active {
overflow: visible;
width: 50px;
margin-right: 10px;
}
&::before {
content: "";
@ -5543,8 +5572,9 @@ a.status-card.compact:hover {
display: block;
position: absolute;
height: 4px;
left: 70px;
bottom: 20px;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
&__current {
@ -5552,8 +5582,9 @@ a.status-card.compact:hover {
position: absolute;
height: 4px;
border-radius: 4px;
left: 70px;
bottom: 20px;
left: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
}
@ -5563,8 +5594,10 @@ a.status-card.compact:hover {
border-radius: 50%;
width: 12px;
height: 12px;
bottom: 16px;
left: 70px;
top: 50%;
left: 0;
margin-left: -6px;
transform: translate(0, -50%);
transition: opacity .1s ease;
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);