OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Pulse animation option for voice record button

pull/21833/head
Travis Ralston 2021-04-14 15:08:11 -06:00
parent 2fb241cfc2
commit e77d3bea04
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
res/css/views/rooms/_VoiceRecordComposerTile.scss
View File

@ -53,7 +53,9 @@ limitations under the License.
font-size: $font-14px;
&::before {
// TODO: @@ TravisR: Animate
// Pulsing animation
animation: recording-pulse 1.5s infinite;
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
@ -74,3 +76,21 @@ limitations under the License.
width: 42px; // we're not using a monospace font, so fake it
}
}
@keyframes recording-pulse {
// Source: https://codepen.io/FlorinPop17/pen/drJJzK
// Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 $voice-record-live-circle-color;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px transparent;
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 transparent;
}
}

6
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -189,11 +189,13 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
$groupFilterPanel-divider-color: $roomlist-header-color;
// See non-legacy _light for variable information
$voice-record-stop-border-color: #E3E8F0;
$voice-record-stop-symbol-color: $warning-color;
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-waveform-bg-color: #E3E8F0;
$voice-record-waveform-fg-color: $muted-fg-color;
$voice-record-live-circle-color: $warning-color;
$voice-record-live-circle-color: #ff4b55;
$voice-record-live-halo-color: #ff4b5544;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;

5
res/themes/light/css/_light.scss
View File

@ -181,10 +181,11 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
$groupFilterPanel-divider-color: $roomlist-header-color;
$voice-record-stop-border-color: #E3E8F0;
$voice-record-stop-symbol-color: $warning-color;
$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
$voice-record-waveform-bg-color: #E3E8F0;
$voice-record-waveform-fg-color: $muted-fg-color;
$voice-record-live-circle-color: $warning-color;
$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
$voice-record-live-halo-color: #ff4b5544; // $warning-color, but with some alpha and without theme support
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;