diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index bce86edbdc..9b7cd06ced 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -415,20 +415,20 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss /* Spoiler stuff */ .mx_EventTile_spoiler { cursor: pointer; -} -.mx_EventTile_spoiler_reason { - color: $event-timestamp-color; - font-size: $font-11px; -} + .mx_EventTile_spoiler_reason { + color: $event-timestamp-color; + font-size: $font-11px; + } -.mx_EventTile_spoiler_content { - filter: blur(5px) saturate(0.1) sepia(1); - transition-duration: 0.5s; -} + .mx_EventTile_spoiler_content { + filter: blur(5px) saturate(0.1) sepia(1); + transition-duration: 0.5s; + } -.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { - filter: none; + &.visible > .mx_EventTile_spoiler_content { + filter: none; + } } .mx_RoomView_timeline_rr_enabled { @@ -506,28 +506,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } &::before { - mask-repeat: no-repeat; - mask-position: center; mask-size: 80%; } -} -.mx_EventTile_e2eIcon_warning { - &::after { + &.mx_EventTile_e2eIcon_warning, + &.mx_EventTile_e2eIcon_normal { + opacity: 1; + } + + &.mx_EventTile_e2eIcon_warning::after { mask-image: url('$(res)/img/e2e/warning.svg'); background-color: $alert; } - opacity: 1; -} - -.mx_EventTile_e2eIcon_normal { - &::after { + &.mx_EventTile_e2eIcon_normal::after { mask-image: url('$(res)/img/e2e/normal.svg'); background-color: $header-panel-text-primary-color; } - - opacity: 1; } /* Various markdown overrides */ @@ -570,93 +565,99 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } -.mx_EventTile_collapsedCodeBlock { - max-height: 30vh; -} - .mx_EventTile:hover .mx_EventTile_body pre, .mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre { border: 1px solid $tertiary-content; } -.mx_EventTile_pre_container { - // For correct positioning of _copyButton (See TextualBody) - position: relative; -} - -// Inserted adjacent to
 blocks, (See TextualBody)
 .mx_EventTile_button {
-    position: absolute;
     display: inline-block;
-    visibility: hidden;
     cursor: pointer;
-    top: 8px;
-    right: 8px;
-    width: 19px;
-    height: 19px;
-    background-color: $message-action-bar-fg-color;
-}
-
-.mx_EventTile_buttonBottom {
-    top: 33px;
 }
 
 .mx_EventTile_copyButton {
     mask-image: url($copy-button-url);
 }
 
-.mx_EventTile_collapseButton {
-    mask-size: 75%;
+.mx_EventTile_collapseButton,
+.mx_EventTile_expandButton {
     mask-position: center;
     mask-repeat: no-repeat;
+}
+
+.mx_EventTile_collapseButton {
     mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
 }
 
 .mx_EventTile_expandButton {
-    mask-size: 75%;
-    mask-position: center;
-    mask-repeat: no-repeat;
     mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 }
 
-.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
-.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
-.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
-    visibility: visible;
+.mx_EventTile_body .mx_EventTile_pre_container {
+    // For correct positioning of _copyButton (See TextualBody)
+    position: relative;
+
+    &:focus-within,
+    &:hover {
+        .mx_EventTile_button {
+            visibility: visible;
+        }
+    }
+
+    .mx_EventTile_collapsedCodeBlock {
+        max-height: 30vh;
+    }
+
+    // Inserted adjacent to 
 blocks, (See TextualBody)
+    .mx_EventTile_button {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 19px;
+        height: 19px;
+        visibility: hidden;
+        background-color: $message-action-bar-fg-color;
+
+        &.mx_EventTile_buttonBottom {
+            top: 33px;
+        }
+
+        &.mx_EventTile_collapseButton,
+        &.mx_EventTile_expandButton {
+            mask-size: 75%;
+        }
+    }
 }
 
 /* end of overrides */
 
 .mx_EventTile_keyRequestInfo {
     font-size: $font-12px;
-}
 
-.mx_EventTile_keyRequestInfo_text {
-    opacity: 0.5;
-}
+    .mx_EventTile_keyRequestInfo_text {
+        opacity: 0.5;
 
-.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
-    @mixin ButtonResetDefault;
-    color: $primary-content;
-    text-decoration: underline;
-    cursor: pointer;
+        .mx_AccessibleButton {
+            @mixin ButtonResetDefault;
+            color: $primary-content;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
 }
 
 .mx_EventTile_keyRequestInfo_tooltip_contents p {
     text-align: auto;
     margin-left: 3px;
     margin-right: 3px;
-}
 
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
-    margin-top: 0px;
-}
+    &:first-child {
+        margin-top: 0px;
+    }
 
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
-    margin-bottom: 0px;
+    &:last-child {
+        margin-bottom: 0px;
+    }
 }
 
 .mx_EventTile_tileError {