Merge branch 'develop' into travis/remove-skinning

res/css/components/views/beacon/_LeftPanelLiveShareWarning.scss

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_LeftPanelLiveShareWarning {
+    @mixin ButtonResetDefault;
     width: 100%;
     box-sizing: border-box;
 
@@ -29,3 +30,7 @@ limitations under the License.
     // go above to get hover for title
     z-index: 1;
 }
+
+.mx_LeftPanelLiveShareWarning__error {
+    background-color: $alert;
+}

res/css/components/views/beacon/_RoomLiveShareWarning.scss

@@ -48,3 +48,13 @@ limitations under the License.
 .mx_RoomLiveShareWarning_spinner {
     margin-right: $spacing-16;
 }
+
+.mx_RoomLiveShareWarning_closeButton {
+    @mixin ButtonResetDefault;
+    margin-left: $spacing-16;
+}
+
+.mx_RoomLiveShareWarning_closeButtonIcon {
+    height: $font-18px;
+    padding: $spacing-4;
+}

res/css/components/views/beacon/_StyledLiveBeaconIcon.scss

@@ -28,3 +28,8 @@ limitations under the License.
     // colors icon
     color: white;
 }
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
+    background-color: $alert;
+    border-color: $alert;
+}

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,6 +29,7 @@ limitations under the License.
 
     contain: content;
 
+    // Waveforms are present in live recording only
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $quaternary-content;
@@ -46,11 +47,22 @@ limitations under the License.
 
     .mx_Clock {
         width: $font-42px; // we're not using a monospace font, so fake it
+        min-width: $font-42px; // force sensible layouts in awkward flexboxes (file panel, for example)
         padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
         padding-left: 8px; // isolate from recording circle / play control
     }
 
-    &.mx_VoiceMessagePrimaryContainer_noWaveform {
-        max-width: 162px; // with all the padding this results in 185px wide
+    // For timeline-rendered playback, mirror the values for where the clock is in
+    // the waveform version.
+    .mx_SeekBar {
+        margin-left: 8px;
+        margin-right: 6px;
+
+        & + .mx_Clock {
+            text-align: right;
+
+            // Take the padding off the clock because it's accounted for in the seek bar
+            padding: 0;
+        }
     }
 }

res/css/views/right_panel/_TimelineCard.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -35,6 +35,12 @@ limitations under the License.
         }
     }
 
+    .mx_TimelineCard_timeline {
+        overflow: hidden;
+        position: relative; // offset parent for jump to bottom button
+        flex: 1;
+    }
+
     .mx_AutoHideScrollbar {
         padding-right: 10px;
         width: calc(100% - 10px);
@@ -119,8 +125,3 @@ limitations under the License.
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
 }
-
-.mx_TimelineCard_timeline {
-    overflow: hidden;
-    position: relative; // offset parent for jump to bottom button
-}

res/css/views/rooms/_EventTile.scss

@@ -970,6 +970,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
         .mx_EventTile_content,
         .mx_HiddenBody,
         .mx_RedactedBody,
+        .mx_UnknownBody,
         .mx_MPollBody,
         .mx_ReplyChain_wrapper {
             margin-left: 36px;

res/css/views/rooms/_RoomPreviewBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -98,6 +98,14 @@ limitations under the License.
     }
 }
 
+// With maximised widgets, the panel fits in better when rounded
+.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2); // Shared with right panel
+    margin-top: 0; // Already covered by apps drawer
+    border-radius: 8px;
+}
+
 .mx_RoomPreviewBar_dialog {
     margin: auto;
     box-sizing: content;