mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Adds playback bar to story viewer

Browse source
This commit is contained in:
Josh Perez 2022-05-06 15:02:44 -04:00 • committed by GitHub
parent 9817946afc
commit 85c8ff76dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 291 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

98
stylesheets/components/StoryViewer.scss
View file

@ -35,24 +35,6 @@
z-index: $z-index-above-above-base;
}
&__more {
@include button-reset;
height: 24px;
position: absolute;
right: 80px;
top: var(--title-bar-drag-area-height);
width: 24px;
z-index: $z-index-above-base;
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-ultramarine;
}
}
}
&__container {
flex-grow: 1;
overflow: hidden;
@ -89,6 +71,16 @@
@include font-body-2;
color: $color-white-alpha-60;
}
&__playback-bar {
display: flex;
justify-content: space-between;
}
&__playback-controls {
align-items: center;
display: flex;
}
}
&__caption {
@ -154,6 +146,76 @@
}
}
&__more {
@include button-reset;
height: 24px;
width: 24px;
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-black;
}
}
}
&__mute {
@include button-reset;
height: 20px;
margin: 0 24px;
width: 20px;
@include color-svg(
'../images/icons/v2/speaker-on-solid-20.svg',
$color-white
);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__pause {
@include button-reset;
height: 20px;
width: 20px;
@include color-svg('../images/icons/v2/pause_solid_20.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__play {
@include button-reset;
height: 20px;
width: 20px;
@include color-svg('../images/icons/v2/play_solid_20.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__unmute {
@include button-reset;
height: 20px;
margin: 0 18px;
width: 20px;
@include color-svg(
'../images/icons/v2/speaker-off-solid-20.svg',
$color-white
);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__progress {
display: flex;