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 toblocks, (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 {