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,27 +52,36 @@ 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 {
animation: recording-pulse 2s infinite; padding-left: 16px; // +10px for the live circle, +6px for regular padding
content: ''; &::before {
background-color: $voice-record-live-circle-color; animation: recording-pulse 2s infinite;
width: 10px;
height: 10px; content: '';
position: absolute; background-color: $voice-record-live-circle-color;
left: 8px; width: 10px;
top: 18px; // vertically center height: 10px;
border-radius: 10px; position: absolute;
left: 8px;
top: 16px; // vertically center
border-radius: 10px;
}
} }
.mx_Waveform_bar { .mx_Waveform {
background-color: $voice-record-waveform-fg-color; // 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 {
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
} }
} }