diff --git a/res/css/_common.scss b/res/css/_common.scss index 6e70618142..7fead4317e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -160,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid $dialog-close-fg-color; - // these things should probably not be defined - // globally + border: 1px solid rgba($primary-fg-color, .1); + // these things should probably not be defined globally margin: 9px; flex: 0 0 auto; } @@ -264,7 +263,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { padding: 25px 30px 30px 30px; max-height: 80%; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; - border-radius: 4px; + border-radius: 8px; overflow-y: auto; } @@ -622,12 +621,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // round the top corners of the top button for the hover effect to be bounded &:first-child .mx_AccessibleButton:first-child { - border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu + border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu } // round the bottom corners of the bottom button for the hover effect to be bounded &:last-child .mx_AccessibleButton:last-child { - border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu + border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } .mx_AccessibleButton { diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 61070a0541..658033339a 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -31,7 +31,7 @@ limitations under the License. } .mx_ContextualMenu { - border-radius: 4px; + border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; color: $primary-fg-color; diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index 2c5ef84322..9603731dd5 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -143,7 +143,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations flex-grow: 1; overflow: hidden; min-height: 0; - margin-top: 12px; // so we're not up against the search/filter + margin-top: 10px; // so we're not up against the search/filter &.mx_LeftPanel2_roomListWrapper_stickyBottom { padding-bottom: 32px; diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index e43ca44476..5be9f449be 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -23,6 +23,13 @@ limitations under the License. max-width: 50%; display: flex; flex-direction: column; + border-radius: 8px; + margin: 5px; + padding: 4px 0; + + .mx_RoomView_MessageList { + padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above + } } .mx_RightPanel_header { diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index b15f357fc7..e798e4ac52 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -48,13 +48,14 @@ limitations under the License. padding: 8px; &.mx_Toast_hasIcon { - &::after { + &::before, &::after { content: ""; width: 22px; height: 22px; grid-column: 1; grid-row: 1; mask-size: 100%; + mask-position: center; mask-repeat: no-repeat; background-size: 100%; background-repeat: no-repeat; @@ -65,8 +66,18 @@ limitations under the License. background-color: $primary-fg-color; } - &.mx_Toast_icon_verification_warning::after { - background-image: url("$(res)/img/e2e/warning.svg"); + &.mx_Toast_icon_verification_warning { + // white infill for the hollow svg mask + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-size: 90%; + } + + &::after { + mask-image: url("$(res)/img/e2e/warning.svg"); + background-color: $notice-primary-color; + } } &.mx_Toast_icon_element_logo::after { diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index d67928bf83..7efea2c3f7 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -76,17 +76,14 @@ limitations under the License. } .mx_Tooltip_timeline { - box-shadow: none; - background-color: $tooltip-timeline-bg-color; - color: $tooltip-timeline-fg-color; - text-align: center; - border: none; - border-radius: 3px; - font-size: $font-14px; - line-height: 1.2; - padding: 6px 8px; + &.mx_Tooltip { + background-color: $inverted-bg-color; + color: $accent-fg-color; + border: 0; + text-align: center; - .mx_Tooltip_chevron::after { - border-right-color: $tooltip-timeline-bg-color; + .mx_Tooltip_chevron { + display: none; + } } } diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 26b81e94f3..6f86d1ad18 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -53,7 +53,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid lightgray; + border-bottom: 1px solid rgba($primary-fg-color, .1); } .mx_UserInfo_memberDetailsContainer { @@ -121,7 +121,7 @@ limitations under the License. h3 { text-transform: uppercase; color: $notice-secondary-color; - font-weight: bold; + font-weight: 600; font-size: $font-12px; margin: 4px 0; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1b1bab67bc..6d5ef5c14f 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -81,7 +81,7 @@ $AppsDrawerBodyHeight: 273px; margin: 0; padding: 0; border: 5px solid $widget-menu-bar-bg-color; - border-radius: 4px; + border-radius: 8px; } .mx_AppTile_mini { diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 584ea17433..ac47e3aedf 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -22,28 +22,58 @@ limitations under the License. display: block; } -.mx_E2EIcon_warning::after, -.mx_E2EIcon_normal::after, -.mx_E2EIcon_verified::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-repeat: no-repeat; - background-size: contain; +.mx_E2EIcon_warning, +.mx_E2EIcon_normal, +.mx_E2EIcon_verified { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } +} + +// white infill for the transparency +.mx_E2EIcon::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; +} + +// transparent-looking border surrounding the shield for when overlain over avatars +.mx_E2EIcon_bordered { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $header-panel-bg-color; + + // shrink the actual badge + &::after { + mask-size: 75%; + } + // shrink the infill of the badge + &::before { + mask-size: 65%; + } } .mx_E2EIcon_warning::after { - background-image: url('$(res)/img/e2e/warning.svg'); + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; } .mx_E2EIcon_normal::after { - background-image: url('$(res)/img/e2e/normal.svg'); + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; } .mx_E2EIcon_verified::after { - background-image: url('$(res)/img/e2e/verified.svg'); + mask-image: url('$(res)/img/e2e/verified.svg'); + background-color: $accent-color; } diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 8db71f297c..27a4e67089 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -26,8 +26,6 @@ limitations under the License. position: absolute; bottom: 2px; right: 7px; - height: 15px; - width: 15px; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c168699b70..6e2dc17727 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -15,6 +15,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +$left-gutter: 64px; + .mx_EventTile { max-width: 100%; clear: both; @@ -45,7 +47,7 @@ limitations under the License. .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { top: $font-8px; - left: 65px; + left: $left-gutter; } .mx_EventTile_continuation { @@ -73,7 +75,7 @@ limitations under the License. /* the next three lines, along with overflow hidden, truncate long display names */ white-space: nowrap; text-overflow: ellipsis; - max-width: calc(100% - 65px); + max-width: calc(100% - $left-gutter); } .mx_EventTile .mx_SenderProfile .mx_Flair { @@ -111,7 +113,7 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_reply { position: relative; - padding-left: 65px; /* left gutter */ + padding-left: $left-gutter; border-radius: 4px; } @@ -182,7 +184,7 @@ limitations under the License. * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 5px solid; + border-left: $accent-color 4px solid; padding-left: 60px; background-color: $event-selected-color; } @@ -328,9 +330,9 @@ limitations under the License. .mx_EventTile_e2eIcon { position: absolute; top: 6px; - left: 46px; - width: 15px; - height: 15px; + left: 44px; + width: 14px; + height: 14px; display: block; bottom: 0; right: 0; @@ -339,23 +341,58 @@ limitations under the License. background-size: contain; } +.mx_EventTile_e2eIcon { + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } +} + .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unknown { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unencrypted { - background-image: url('$(res)/img/e2e/warning.svg'); + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } opacity: 1; } .mx_EventTile_e2eIcon_unauthenticated { - background-image: url('$(res)/img/e2e/normal.svg'); + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; + } opacity: 1; } @@ -397,10 +434,6 @@ limitations under the License. margin-bottom: 0px; } -.mx_EventTile_12hr .mx_EventTile_e2eIcon { - padding-left: 5px; -} - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { @@ -408,15 +441,15 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; + border-left: $e2e-verified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; + border-left: $e2e-unverified-color 4px solid; } .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color 5px solid; + border-left: $e2e-unknown-color 4px solid; } .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, @@ -505,7 +538,7 @@ limitations under the License. display: inline-block; visibility: hidden; cursor: pointer; - top: 6px; + top: 8px; right: 6px; width: 19px; height: 19px; @@ -537,7 +570,6 @@ limitations under the License. .mx_EventTile_content .markdown-body a { color: $accent-color-alt; - text-decoration: underline; } .mx_EventTile_content .markdown-body .hljs { diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 44eb8c1e89..2b447be44a 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -$left-gutter: 65px; +$left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 99dc2338d4..98ed5025eb 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -26,6 +26,10 @@ limitations under the License. flex: 1 0 auto; } + .mx_SearchBox { + margin-bottom: 5px; + } + h2 { text-transform: uppercase; color: $h3-color; @@ -75,7 +79,7 @@ limitations under the License. background-color: $button-bg-color; border-radius: 4px; padding: 8px; - margin: 9px; + margin: 5px 9px 9px; display: flex; justify-content: center; color: $button-fg-color; diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 8af9d36fee..9f6d2ec590 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -20,7 +20,7 @@ limitations under the License. margin: auto; border-top: 1px solid $primary-hairline-color; position: relative; - padding-left: 84px; + padding-left: 83px; } .mx_MessageComposer_replaced_wrapper { @@ -60,7 +60,7 @@ limitations under the License. .mx_MessageComposer .mx_MessageComposer_avatar { position: absolute; - left: 27px; + left: 26px; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { @@ -76,8 +76,8 @@ limitations under the License. left: 60px; margin-right: 0; // Counteract the E2EIcon class margin-left: 3px; // Counteract the E2EIcon class - width: 15px; - height: 15px; + width: 12px; + height: 12px; } .mx_MessageComposer_noperm_error { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 3499fe0630..46993bb644 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -15,27 +15,34 @@ limitations under the License. */ .mx_RoomHeader { - flex: 0 0 56px; + flex: 0 0 50px; border-bottom: 1px solid $primary-hairline-color; background-color: $roomheader-bg-color; - .mx_E2EIcon { - margin: 0; - position: absolute; - bottom: -2px; - right: -6px; - height: 15px; - width: 15px; + .mx_RoomHeader_e2eIcon { + height: 12px; + width: 12px; + + .mx_E2EIcon { + margin: 0; + position: absolute; + height: 12px; + width: 12px; + } } } .mx_RoomHeader_wrapper { margin: auto; - height: 56px; + height: 50px; display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 19px; + padding: 0 10px 0 18px; + + .mx_InviteOnlyIcon_large { + margin: 0; + } } .mx_RoomHeader_spinner { @@ -174,7 +181,7 @@ limitations under the License. .mx_RoomHeader_avatar { flex: 0; - margin: 0 7px 0 6px; + margin: 0 6px 0 7px; position: relative; } diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index de577139bc..18eaa5747c 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -22,6 +22,7 @@ limitations under the License. flex-direction: column; margin-left: 8px; + margin-bottom: 4px; width: 100%; flex-shrink: 0; // to convince safari's layout engine the flexbox is fine @@ -138,9 +139,8 @@ limitations under the License. .mx_RoomSublist2_headerText { flex: 1; max-width: calc(100% - 16px); // 16px is the badge width - text-transform: uppercase; line-height: $font-16px; - font-size: $font-12px; + font-size: $font-13px; font-weight: 600; // Ellipsize any text overflow @@ -183,6 +183,7 @@ limitations under the License. // See also https://github.com/vector-im/riot-web/issues/14429. &:first-child .mx_RoomSublist2_headerContainer { height: 0; + padding-bottom: 4px; } .mx_RoomSublist2_resizeBox { @@ -202,7 +203,7 @@ limitations under the License. display: flex; flex-direction: column; - mask-image: linear-gradient(0deg, transparent, black 3px); + mask-image: linear-gradient(0deg, transparent, black 4px) } .mx_RoomSublist2_resizerHandles_showNButton { diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index 9b967c09b8..79b28598bd 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -63,7 +63,7 @@ limitations under the License. } .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents { - font-weight: 700; + font-weight: 600; } .mx_RoomTile2_messagePreview { diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index d33ecc0bb6..4bd45631cc 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/res/css/views/rooms/_Stickers.scss @@ -31,7 +31,7 @@ .mx_Stickers_addLink { display: inline; cursor: pointer; - text-decoration: underline; + color: $button-link-fg-color; } .mx_Stickers_hideStickers { diff --git a/res/img/e2e/normal.svg b/res/img/e2e/normal.svg index 5b848bc27f..23ca78e44d 100644 --- a/res/img/e2e/normal.svg +++ b/res/img/e2e/normal.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index 464b443dcf..ac4827baed 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 209ae0f71f..d42922892a 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index bc133c2756..a6a85edfe1 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -103,6 +103,7 @@ $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; // ******************** diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss index 6e9ac98ed2..c2edbe24a4 100644 --- a/res/themes/element-dark/css/_element-dark.scss +++ b/res/themes/element-dark/css/_element-dark.scss @@ -35,7 +35,7 @@ $info-plinth-fg-color: #888; $preview-bar-bg-color: $header-panel-bg-color; -$tagpanel-bg-color: rgba(44, 50, 56, 0.92); +$tagpanel-bg-color: rgba(38, 39, 43, 0.82); $inverted-bg-color: $base-color; // used by AddressSelector @@ -93,7 +93,7 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-color: $text-primary-color; $roomheader-bg-color: rgba(21, 25, 30, 0.6); -$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); $roomheader-addroom-fg-color: $text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color; $roomheader-button-color: $header-panel-text-primary-color; @@ -104,6 +104,7 @@ $roomtopic-color: $text-secondary-color; $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +$composer-e2e-icon-color: $header-panel-text-primary-color; // ******************** @@ -114,7 +115,7 @@ $theme-button-bg-color: #e3e8f0; $roomlist2-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: rgba(33, 38, 44, 0.92); +$roomlist2-bg-color: rgba(33, 38, 44, 0.90); $roomlist2-header-color: #8E99A4; $roomsublist2-divider-color: $primary-fg-color; @@ -204,6 +205,10 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; +// blur amounts for left left panel (only for element theme, used in _mods.scss) +$roomlist-background-blur-amount: 60px; +$tagpanel-background-blur-amount: 30px; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/element-dark/css/element-dark.scss b/res/themes/element-dark/css/element-dark.scss index 5aefac5881..35b31a9078 100644 --- a/res/themes/element-dark/css/element-dark.scss +++ b/res/themes/element-dark/css/element-dark.scss @@ -2,6 +2,10 @@ @import "../../element/css/_paths.scss"; @import "../../element/css/_fonts.scss"; @import "../../element/css/_element.scss"; -@import "../../element/css/_mods.scss"; +// important this goes before _mods, +// as $tagpanel-background-blur-amount and +// $roomlist-background-blur-amount +// are overridden in _element-dark.scss @import "_element-dark.scss"; +@import "../../element/css/_mods.scss"; @import "../../../../res/css/_components.scss"; diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss index f04d931f31..109f970932 100644 --- a/res/themes/element/css/_element.scss +++ b/res/themes/element/css/_element.scss @@ -18,11 +18,12 @@ $accent-color: #03b381; $accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; $notice-primary-bg-color: rgba(255, 75, 85, 0.16); -$notice-secondary-color: #61708b; +$primary-fg-color: #2e2f32; +$roomlist2-header-color: $primary-fg-color; +$notice-secondary-color: $roomlist2-header-color; $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) -$primary-fg-color: #2e2f32; $primary-bg-color: #ffffff; $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text @@ -65,7 +66,7 @@ $preview-bar-bg-color: #f7f7f7; $secondary-accent-color: #f2f5f8; $tertiary-accent-color: #d3efe1; -$tagpanel-bg-color: #dee3ead1; +$tagpanel-bg-color: rgba(232, 232, 232, 0.77); // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; @@ -158,7 +159,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; $roomheader-bg-color: $primary-bg-color; -$roomheader-addroom-bg-color: #c9ced9; +$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); $roomheader-addroom-fg-color: #5c6470; $tagpanel-button-color: #91A1C0; $roomheader-button-color: #91A1C0; @@ -168,7 +169,7 @@ $composer-button-color: #91A1C0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; -$composer-e2e-icon-color: #c9ced6; +$composer-e2e-icon-color: #91A1C0; $header-divider-color: #91A1C0; // ******************** @@ -179,8 +180,7 @@ $header-divider-color: #91A1C0; $theme-button-bg-color: #e3e8f0; $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons -$roomlist2-bg-color: #f3f8fde8; -$roomlist2-header-color: $primary-fg-color; +$roomlist2-bg-color: rgba(245, 245, 245, 0.90); $roomsublist2-divider-color: $primary-fg-color; $roomtile2-preview-color: #9e9e9e; @@ -331,6 +331,11 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; +// blur amounts for left left panel (only for element theme, used in _mods.scss) +$roomlist-background-blur-amount: 40px; +$tagpanel-background-blur-amount: 20px; + + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss index cc5205ccba..810e0375ba 100644 --- a/res/themes/element/css/_mods.scss +++ b/res/themes/element/css/_mods.scss @@ -13,14 +13,20 @@ } .mx_TagPanel { - backdrop-filter: blur(100px); + backdrop-filter: blur($tagpanel-background-blur-amount); } .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { - backdrop-filter: blur(175px); + backdrop-filter: blur($roomlist-background-blur-amount); } } .mx_RoomSublist2_showNButton { background-color: transparent !important; } + +a:hover, +a:link, +a:visited { + text-decoration: none; +} diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 9ce2c9a980..991abdefff 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -169,7 +169,7 @@ $composer-button-color: #91a1c0; $roomtopic-color: #9e9e9e; $eventtile-meta-color: $roomtopic-color; -$composer-e2e-icon-color: #c9ced6; +$composer-e2e-icon-color: #91a1c0; $header-divider-color: #91a1c0; // ******************** diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 40ba15af33..80bfac6787 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -30,6 +30,8 @@ interface IProps { tag: TagID; displayBadge?: boolean; forceCount?: boolean; + oobData?: object; + viewAvatarOnClick?: boolean; } interface IState { @@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent - + {badge} ; diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index c762b95f83..84126ed7fc 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -35,6 +35,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers"; import {isPermalinkHost} from "../../../utils/permalinks/Permalinks"; import {toRightOf} from "../../structures/ContextMenu"; import {copyPlaintext} from "../../../utils/strings"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; export default createReactClass({ displayName: 'TextualBody', @@ -146,7 +147,6 @@ export default createReactClass({ nextProps.showUrlPreview !== this.props.showUrlPreview || nextProps.editState !== this.props.editState || nextState.links !== this.state.links || - nextState.editedMarkerHovered !== this.state.editedMarkerHovered || nextState.widgetHidden !== this.state.widgetHidden); }, @@ -367,42 +367,24 @@ export default createReactClass({ }); }, - _onMouseEnterEditedMarker: function() { - this.setState({editedMarkerHovered: true}); - }, - - _onMouseLeaveEditedMarker: function() { - this.setState({editedMarkerHovered: false}); - }, - _openHistoryDialog: async function() { const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog"); Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent}); }, _renderEditedMarker: function() { - let editedTooltip; - if (this.state.editedMarkerHovered) { - const Tooltip = sdk.getComponent('elements.Tooltip'); - const date = this.props.mxEvent.replacingEventDate(); - const dateString = date && formatDate(date); - editedTooltip = ; - } + const date = this.props.mxEvent.replacingEventDate(); + const dateString = date && formatDate(date); - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return ( - - { editedTooltip }{`(${_t("edited")})`} - + {`(${_t("edited")})`} + ); }, diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js index 254e28dffa..1ea21bfc9a 100644 --- a/src/components/views/rooms/E2EIcon.js +++ b/src/components/views/rooms/E2EIcon.js @@ -42,11 +42,12 @@ const crossSigningRoomTitles = { [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), }; -const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => { +const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => { const [hover, setHover] = useState(false); const classes = classNames({ mx_E2EIcon: true, + mx_E2EIcon_bordered: bordered, mx_E2EIcon_warning: status === E2E_STATE.WARNING, mx_E2EIcon_normal: status === E2E_STATE.NORMAL, mx_E2EIcon_verified: status === E2E_STATE.VERIFIED, diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js index b6d2bce785..d880e824da 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.js @@ -170,7 +170,7 @@ const EntityTile = createReactClass({ let e2eIcon; const { e2eStatus } = this.props; if (e2eStatus) { - e2eIcon = ; + e2eIcon = ; } const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index f236ed1070..51163e27e3 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import DMRoomMap from '../../../utils/DMRoomMap'; import E2EIcon from './E2EIcon'; -import InviteOnlyIcon from './InviteOnlyIcon'; +import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; +import {DefaultTagID} from "../../../stores/room-list/models"; export default createReactClass({ displayName: 'RoomHeader', @@ -152,25 +153,14 @@ export default createReactClass({ }, render: function() { - const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); - let searchStatus = null; let cancelButton = null; let settingsButton = null; let pinnedEventsButton = null; - const e2eIcon = this.props.e2eStatus ? - : - undefined; - const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule; - let privateIcon; - // Don't show an invite-only icon for DMs. Users know they're invite-only. - if (!dmUserId && joinRule === "invite") { - privateIcon = ; - } if (this.props.onCancelClick) { cancelButton = ; @@ -221,15 +211,16 @@ export default createReactClass({ } const topicElement =
{ topic }
; - const avatarSize = 32; + let roomAvatar; if (this.props.room) { - roomAvatar = (); + viewAvatarOnClick={true} + />; } if (this.props.onSettingsClick) { @@ -311,11 +302,13 @@ export default createReactClass({ { searchButton } ; + const e2eIcon = this.props.e2eStatus ? : undefined; + return (
-
{ roomAvatar }{ e2eIcon }
- { privateIcon } +
{ roomAvatar }
+
{ e2eIcon }
{ name } { topicElement } { cancelButton }