signal-desktop/stylesheets/components/MessageAudio.scss

166 lines
3.3 KiB
SCSS
Raw Normal View History

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
$audio-attachment-button-size: 36px;
$audio-attachment-button-margin-big: 12px;
$audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment {
display: flex;
flex-direction: column;
margin-top: 2px;
2023-03-02 20:55:40 +00:00
.PlaybackButton {
@media (min-width: 0px) and (max-width: 799px) {
margin-right: $audio-attachment-button-margin-small;
}
}
}
.module-message__audio-attachment__button-and-waveform {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 5px;
}
/* The separator between audio and text */
.module-message__audio-attachment--with-content-below {
border-bottom: 1px solid $color-white-alpha-20;
padding-bottom: 12px;
margin-bottom: 7px;
&.module-message__audio-attachment--incoming {
@include light-theme {
border-color: $color-black-alpha-20;
}
2021-05-28 16:15:17 +00:00
@include dark-theme {
border-color: $color-white-alpha-20;
}
}
.module-message__container--outgoing & {
2021-05-28 16:15:17 +00:00
border-color: $color-white-alpha-20;
}
}
.module-message__audio-attachment--with-content-above {
margin-top: 6px;
}
.module-message__audio-attachment__controls {
display: flex;
flex: 1;
margin-right: 4px;
}
.module-message__audio-attachment__dot {
display: flex;
align-items: center;
justify-content: flex-start;
transition: width 100ms ease-out;
width: 14px;
&:before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 100%;
}
.module-message__audio-attachment--incoming & {
&:before {
@include light-theme {
background: $color-gray-60;
}
@include dark-theme {
background: $color-gray-25;
}
}
}
.module-message__audio-attachment--outgoing & {
&--unplayed:before {
background: $color-white-alpha-80;
}
}
}
.module-message__audio-attachment__waveform {
flex-shrink: 0;
display: flex;
align-items: center;
cursor: pointer;
outline: 0;
}
2023-03-02 20:55:40 +00:00
.PlaybackButton,
.PlaybackRateButton,
2021-05-13 21:49:51 +00:00
.module-message__audio-attachment__waveform {
&:focus {
@include keyboard-mode {
2021-05-28 16:15:17 +00:00
outline: 2px solid $color-ultramarine;
2021-05-13 21:49:51 +00:00
}
}
.module-message__audio-attachment--outgoing & {
&:focus {
@include keyboard-mode {
outline: 2px solid $color-white-alpha-60;
}
}
}
}
.module-message__audio-attachment__metadata {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
@media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-small;
}
}
.module-message__audio-attachment__countdown {
@include font-caption;
width: $audio-attachment-button-size;
user-select: none;
text-align: center;
white-space: nowrap;
margin-right: 12px;
.module-message__audio-attachment--incoming & {
@include light-theme {
$color: $color-black-alpha-60;
color: $color;
&--unplayed:after {
background: $color;
}
}
2021-05-28 16:15:17 +00:00
@include dark-theme {
$color: $color-white-alpha-80;
color: $color;
&--unplayed:after {
background: $color;
}
}
}
.module-message__audio-attachment--outgoing & {
2021-05-28 16:15:17 +00:00
color: $color-white-alpha-80;
&--unplayed:after {
background: $color-white-alpha-80;
}
}
}