Adjust pixel dimensions

pull/21833/head
Travis Ralston 2021-04-20 21:43:55 -06:00
parent 32e3ce3dea
commit e079f64a16
1 changed files with 26 additions and 18 deletions

View File

@ -36,9 +36,8 @@ limitations under the License.
} }
.mx_VoiceRecordComposerTile_waveformContainer { .mx_VoiceRecordComposerTile_waveformContainer {
padding: 8px; // makes us 4px taller than the send/stop button padding: 6px; // makes us 4px taller than the send/stop button
padding-right: 4px; // there's 1px from the waveform itself, so account for that padding-right: 5px; // there's 1px from the waveform itself, so account for that
padding-left: 15px; // +10px for the live circle, +5px for regular padding
background-color: $voice-record-waveform-bg-color; background-color: $voice-record-waveform-bg-color;
border-radius: 12px; border-radius: 12px;
margin: 6px; // force the composer area to put a gutter around us margin: 6px; // force the composer area to put a gutter around us
@ -53,7 +52,10 @@ limitations under the License.
color: $voice-record-waveform-fg-color; color: $voice-record-waveform-fg-color;
font-size: $font-14px; font-size: $font-14px;
&.mx_VoiceRecordComposerTile_recording::before { &.mx_VoiceRecordComposerTile_recording {
padding-left: 16px; // +10px for the live circle, +6px for regular padding
&::before {
animation: recording-pulse 2s infinite; animation: recording-pulse 2s infinite;
content: ''; content: '';
@ -62,18 +64,24 @@ limitations under the License.
height: 10px; height: 10px;
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 18px; // vertically center top: 16px; // vertically center
border-radius: 10px; border-radius: 10px;
} }
}
.mx_Waveform {
// We want the bars to be 2px shorter than the play/pause button in the waveform control
height: 28px; // default is 30px, so we're subtracting the 2px border off the bars
.mx_Waveform_bar { .mx_Waveform_bar {
background-color: $voice-record-waveform-fg-color; background-color: $voice-record-waveform-fg-color;
} }
}
.mx_Clock { .mx_Clock {
padding-right: 8px; // isolate from waveform padding-right: 4px; // isolate from waveform
padding-left: 10px; // isolate from live circle padding-left: 8px; // isolate from live circle
width: 42px; // we're not using a monospace font, so fake it width: 40px; // we're not using a monospace font, so fake it
} }
} }