416 lines
7.4 KiB
SCSS
416 lines
7.4 KiB
SCSS
.Audio {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
|
|
.media-loading {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
|
|
&.interactive {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
&.own {
|
|
--color-text-secondary: var(--accent-color);
|
|
--color-interactive-active: var(--color-text-green);
|
|
--color-interactive-inactive: rgba(var(--color-text-green-rgb), 0.4);
|
|
--color-interactive-buffered: rgba(var(--color-text-green-rgb), 0.4); // Overlays underlying inactive color
|
|
|
|
.theme-dark & {
|
|
--color-text-green-rgb: 255, 255, 255;
|
|
--color-text-green: var(--color-white);
|
|
}
|
|
|
|
.Button {
|
|
--color-primary: var(--color-text-green);
|
|
--color-primary-shade: var(--color-green);
|
|
--color-primary-shade-darker: var(--color-green-darker);
|
|
--color-white: var(--color-background-own);
|
|
|
|
.theme-dark & {
|
|
--color-primary-shade: #fff;
|
|
--color-primary-shade-darker: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-play {
|
|
margin-inline-end: 0.5rem;
|
|
|
|
&.translucent-white {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
&.smaller {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin-inline-end: 0.75rem;
|
|
|
|
.icon {
|
|
font-size: 1.625rem;
|
|
|
|
&.icon-pause {
|
|
font-size: 1.5625rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
|
|
&.icon-play {
|
|
margin-left: 0.1875rem;
|
|
@media (max-width: 600px) {
|
|
margin-left: 0.125rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-play,
|
|
.icon-pause {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
&.play .icon-pause,
|
|
&.pause .icon-play,
|
|
&.loading .icon-play,
|
|
&.loading .icon-pause {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
position: absolute;
|
|
width: 1.1875rem !important;
|
|
height: 1.1875rem !important;
|
|
padding: 0;
|
|
left: 1.9375rem;
|
|
top: 1.9375rem;
|
|
border: 0.125rem solid var(--background-color);
|
|
z-index: 1;
|
|
|
|
.icon {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
&.bigger .download-button {
|
|
left: 2rem;
|
|
top: 2rem;
|
|
border: 0.125rem solid var(--color-background);
|
|
}
|
|
|
|
.content {
|
|
align-self: center;
|
|
min-width: 0;
|
|
flex-grow: 1;
|
|
text-align: initial;
|
|
}
|
|
|
|
.content-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
margin: 0;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
canvas {
|
|
height: 23px;
|
|
}
|
|
|
|
.voice-duration {
|
|
margin: 0.25rem 0 0;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
font-variant-numeric: tabular-nums;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
&.unread::after {
|
|
content: "";
|
|
position: relative;
|
|
margin: 0 0 0.375rem 0.25rem;
|
|
width: 0.4375rem;
|
|
height: 0.4375rem;
|
|
border-radius: 50%;
|
|
background-color: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
body.is-ios & {
|
|
.voice-duration.unread::after {
|
|
margin-bottom: 0.4375rem;
|
|
}
|
|
}
|
|
|
|
&:not(.own) .voice-duration span {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.waveform-wrapper {
|
|
display: flex;
|
|
|
|
@keyframes loader-rectangle {
|
|
from {
|
|
stroke-dashoffset: 100;
|
|
}
|
|
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.transcribe-icon {
|
|
transition: 0.25s ease-in-out transform;
|
|
}
|
|
|
|
.transcribe-shown {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
.loading-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.loading-rect {
|
|
animation: 1s linear loader-rectangle infinite;
|
|
}
|
|
|
|
.Button {
|
|
border-radius: var(--border-radius-default-tiny);
|
|
background: var(--color-voice-transcribe);
|
|
color: var(--accent-color);
|
|
width: auto;
|
|
margin-inline-start: 0.25rem;
|
|
font-size: 1.25rem;
|
|
height: 1.5rem;
|
|
padding: 0.375rem;
|
|
|
|
&:hover {
|
|
background: var(--color-voice-transcribe) !important;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.waveform {
|
|
cursor: var(--custom-cursor, pointer);
|
|
margin-left: 1px;
|
|
touch-action: none;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.meta,
|
|
.performer,
|
|
.date {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
margin: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.date {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.duration {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-shrink: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.125rem;
|
|
padding-inline-end: 0.5rem;
|
|
|
|
& > span {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.performer {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.duration.with-seekline {
|
|
margin-inline-end: 0.625rem;
|
|
}
|
|
|
|
.bullet {
|
|
margin: 0 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.seekline {
|
|
flex-grow: 1;
|
|
height: 1.25rem;
|
|
position: relative;
|
|
top: 3px;
|
|
cursor: var(--custom-cursor, pointer);
|
|
touch-action: none;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 6px;
|
|
height: 2px;
|
|
background-color: var(--color-interactive-inactive);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.seekline-play-progress {
|
|
position: absolute;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
top: 6px;
|
|
|
|
&-inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: var(--color-interactive-active);
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
right: 100%;
|
|
}
|
|
}
|
|
|
|
.seekline-buffered-progress {
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
|
|
position: absolute;
|
|
top: 6px;
|
|
|
|
background-color: var(--color-interactive-buffered);
|
|
}
|
|
|
|
.seekline-thumb {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 7px;
|
|
left: 0;
|
|
|
|
&-inner {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
right: 100%;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
background: var(--color-interactive-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bigger {
|
|
.title {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 400;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.meta {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.performer,
|
|
.date {
|
|
line-height: 1.0625rem;
|
|
}
|
|
|
|
.media-loading {
|
|
top: 0.1875rem;
|
|
left: 0.1875rem;
|
|
}
|
|
|
|
&[dir="rtl"] {
|
|
.media-loading {
|
|
left: auto !important;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ProgressSpinner.size-s svg {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
&[dir="rtl"] {
|
|
&:last-child {
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
|
|
.toggle-play {
|
|
margin-left: 0.5rem;
|
|
margin-right: 0;
|
|
|
|
&.smaller {
|
|
margin-left: 0.75rem;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.meta.duration.with-seekline {
|
|
margin-inline-start: 0.625rem;
|
|
}
|
|
|
|
.content,
|
|
.duration {
|
|
text-align: right;
|
|
}
|
|
|
|
.download-button {
|
|
left: auto;
|
|
right: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-replies .Audio {
|
|
margin-bottom: 1rem;
|
|
[dir="rtl"] {
|
|
margin-bottom: 1.625rem;
|
|
}
|
|
}
|