tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change design of audio players in web UI

Browse Source 
Port 75a2b8f815 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2020-06-21 02:27:19 +02:00
committed by ThibG
parent e62d574ead
commit ad978ab1d4
4 changed files with 552 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/javascript/flavours/glitch/styles/components/media.scss
View File

@@ -332,6 +332,7 @@
}
.audio-player {
overflow: hidden;
box-sizing: border-box;
position: relative;
background: darken($ui-base-color, 8%);
@@ -344,37 +345,50 @@
height: 100%;
}
&__waveform {
padding: 15px 0;
position: relative;
overflow: hidden;
&.with-light-background {
.video-player__seek::before {
color: rgba($black, 0.35);
}
&::before {
content: "";
display: block;
position: absolute;
border-top: 1px solid lighten($ui-base-color, 4%);
width: 100%;
height: 0;
left: 0;
top: calc(50% + 1px);
.video-player__seek__seek {
color: rgba($black, 0.2);
}
.video-player__buttons button {
color: rgba($black, 0.75);
&:active,
&:hover,
&:focus {
color: $black;
}
}
.video-player__time-sep,
.video-player__time-total,
.video-player__time-current {
color: $black;
}
.video-player__volume::before {
background: rgba($black, 0.35);
}
}
&__progress-placeholder {
background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
.video-player__seek::before,
.video-player__seek__buffer,
.video-player__seek__progress {
top: 0;
}
&__wave-placeholder {
background-color: lighten($ui-base-color, 16%);
.video-player__seek__handle {
top: -4px;
}
.video-player__controls {
padding: 0 15px;
padding-top: 10px;
background: darken($ui-base-color, 8%);
border-top: 1px solid lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
background: transparent;
}
}