feat: initial styling for audio player
This commit is contained in:
parent
e25a0dc5b2
commit
8b06ea88f9
|
@ -1251,3 +1251,77 @@
|
|||
.module-left-pane__virtual-list {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// TODO Theming - Needs Improvement
|
||||
// Module H5AudioPlayer
|
||||
.module-message__container--outgoing {
|
||||
.rhap_container {
|
||||
.rhap_play-pause-button,
|
||||
.session-button {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
&:hover {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rhap_volume-button {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
|
||||
.rhap_time {
|
||||
color: var(--message-bubbles-sent-text-color);
|
||||
}
|
||||
|
||||
.rhap_progress-bar {
|
||||
background-color: var(--button-icon-stroke-color);
|
||||
}
|
||||
|
||||
.rhap_progress-filled {
|
||||
background-color: var(--button-icon-stroke-hover-color);
|
||||
}
|
||||
|
||||
.rhap_download-progress {
|
||||
background-color: var(--button-icon-stroke-hover-color);
|
||||
}
|
||||
|
||||
.rhap_progress-indicator {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__container--incoming {
|
||||
.rhap_container {
|
||||
.rhap_play-pause-button,
|
||||
.session-button {
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
&:hover {
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rhap_volume-button {
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
}
|
||||
|
||||
.rhap_time {
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
}
|
||||
|
||||
.rhap_progress-bar {
|
||||
background-color: var(--button-icon-stroke-color);
|
||||
}
|
||||
|
||||
.rhap_progress-filled {
|
||||
background-color: var(--button-icon-stroke-hover-color);
|
||||
}
|
||||
|
||||
.rhap_download-progress {
|
||||
background-color: var(--button-icon-stroke-hover-color);
|
||||
}
|
||||
|
||||
.rhap_progress-indicator {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,9 +20,10 @@
|
|||
|
||||
@keyframes pulseLight {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 0px var(--color-destructive-alt);
|
||||
box-shadow: 0px 0px 0px 0px var(--danger-color);
|
||||
}
|
||||
|
||||
// TODO Theming - Needs fixing
|
||||
50% {
|
||||
box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1);
|
||||
}
|
||||
|
@ -330,10 +331,10 @@
|
|||
height: var(--margins-sm);
|
||||
width: var(--margins-sm);
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-destructive-alt);
|
||||
background-color: var(--danger-color);
|
||||
margin: 0 var(--margins-sm);
|
||||
|
||||
@include pulse-color(var(--color-destructive-alt), 1s, infinite);
|
||||
@include pulse-color(var(--danger-color), 1s, infinite);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -341,8 +342,7 @@
|
|||
/* ************ */
|
||||
/* AUDIO PLAYER */
|
||||
/* ************ */
|
||||
$rhap_theme-color: #212121 !default;
|
||||
$rhap_background-color: var(--color-transparent-color) !default;
|
||||
$rhap_background-color: var(--transparent-color) !default;
|
||||
$rhap_font-family: inherit !default;
|
||||
|
||||
.rhap_container,
|
||||
|
@ -363,10 +363,6 @@ $rhap_font-family: inherit !default;
|
|||
|
||||
svg {
|
||||
transition: fill var(--default-duration);
|
||||
|
||||
&:hover path {
|
||||
fill: var(--color-white-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -389,17 +385,11 @@ $rhap_font-family: inherit !default;
|
|||
display: none;
|
||||
}
|
||||
|
||||
.rhap_volume-button {
|
||||
color: subtle(var(--color-text));
|
||||
}
|
||||
|
||||
.rhap_volume-container div[role='progressbar'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rhap_time {
|
||||
color: subtle(var(--color-text));
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
@ -409,14 +399,10 @@ $rhap_font-family: inherit !default;
|
|||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: var(--color-text);
|
||||
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rhap_progress-filled {
|
||||
background-color: rgba(var(--color-accent-rgb), 0.6);
|
||||
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
@ -424,8 +410,6 @@ $rhap_font-family: inherit !default;
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: subtle(var(--color-text));
|
||||
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
@ -435,9 +419,7 @@ $rhap_font-family: inherit !default;
|
|||
height: 15px;
|
||||
top: -5px;
|
||||
margin-left: -10px;
|
||||
background: var(--primary-color);
|
||||
box-shadow: none;
|
||||
box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
|
||||
}
|
||||
|
||||
.rhap_controls-section {
|
||||
|
|
|
@ -16,13 +16,8 @@ import { SessionIcon } from '../icon';
|
|||
|
||||
const StyledSpeedButton = styled.div`
|
||||
padding: var(--margins-xs);
|
||||
opacity: 0.6;
|
||||
transition: none;
|
||||
|
||||
:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.session-button {
|
||||
transition: none;
|
||||
width: 34px;
|
||||
|
@ -80,6 +75,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
|
|||
dispatch(setNextMessageToPlayId(undefined));
|
||||
return;
|
||||
}
|
||||
|
||||
// justEndedMessageIndex cannot be -1 nor 0, so it is >= 1
|
||||
const nextMessageIndex = justEndedMessageIndex - 1;
|
||||
// stop auto-playing when the audio messages change author.
|
||||
|
@ -128,12 +124,8 @@ export const AudioPlayerWithEncryptedFile = (props: {
|
|||
</StyledSpeedButton>,
|
||||
]}
|
||||
customIcons={{
|
||||
play: (
|
||||
<SessionIcon iconType="play" iconSize="small" iconColor={'var(--color-text-subtle)'} />
|
||||
),
|
||||
pause: (
|
||||
<SessionIcon iconType="pause" iconSize="small" iconColor={'var(--color-text-subtle)'} />
|
||||
),
|
||||
play: <SessionIcon iconType="play" iconSize="small" />,
|
||||
pause: <SessionIcon iconType="pause" iconSize="small" />,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
|
|||
message: window.i18n('trustThisContactDialogDescription', [
|
||||
convo.getContactProfileNameOrShortenedPubKey(),
|
||||
]),
|
||||
okTheme: SessionButtonColor.Primary,
|
||||
closeTheme: SessionButtonColor.Danger,
|
||||
onClickOk: async () => {
|
||||
convo.set({ isTrustedForAttachmentDownload: true });
|
||||
await convo.commit();
|
||||
|
|
Loading…
Reference in New Issue