OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
res/css/views/rooms/_VoiceRecordComposerTile.scss
View File

@ -36,9 +36,8 @@ limitations under the License.
}
.mx_VoiceRecordComposerTile_waveformContainer {
padding: 8px; // makes us 4px taller than the send/stop button
padding-right: 4px; // there's 1px from the waveform itself, so account for that
padding-left: 15px; // +10px for the live circle, +5px for regular padding
padding: 6px; // makes us 4px taller than the send/stop button
padding-right: 5px; // there's 1px from the waveform itself, so account for that
background-color: $voice-record-waveform-bg-color;
border-radius: 12px;
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;
font-size: $font-14px;
&.mx_VoiceRecordComposerTile_recording::before {
animation: recording-pulse 2s infinite;
&.mx_VoiceRecordComposerTile_recording {
padding-left: 16px; // +10px for the live circle, +6px for regular padding
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
height: 10px;
position: absolute;
left: 8px;
top: 18px; // vertically center
border-radius: 10px;
&::before {
animation: recording-pulse 2s infinite;
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
height: 10px;
position: absolute;
left: 8px;
top: 16px; // vertically center
border-radius: 10px;
}
}
.mx_Waveform_bar {
background-color: $voice-record-waveform-fg-color;
.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 {
background-color: $voice-record-waveform-fg-color;
}
}
.mx_Clock {
padding-right: 8px; // isolate from waveform
padding-left: 10px; // isolate from live circle
width: 42px; // we're not using a monospace font, so fake it
padding-right: 4px; // isolate from waveform
padding-left: 8px; // isolate from live circle
width: 40px; // we're not using a monospace font, so fake it
}
}