From 38d6953bf6df7980e78feaf2912671caf06e7eb3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 10 Jul 2019 16:55:03 +0100 Subject: [PATCH] Manually fix remaining stylelint issues --- res/css/_common.scss | 42 +++-- res/css/views/auth/_AuthBody.scss | 6 +- .../context_menus/_RoomTileContextMenu.scss | 28 ++- res/css/views/dialogs/_DevtoolsDialog.scss | 2 + res/css/views/dialogs/_SetEmailDialog.scss | 3 - res/css/views/elements/_AccessibleButton.scss | 8 +- res/css/views/elements/_AddressSelector.scss | 1 - res/css/views/elements/_Dropdown.scss | 14 +- res/css/views/elements/_Field.scss | 8 +- .../views/elements/_ManageIntegsButton.scss | 21 +-- res/css/views/elements/_RichText.scss | 12 +- res/css/views/elements/_ToggleSwitch.scss | 8 +- res/css/views/messages/_CreateEvent.scss | 3 - res/css/views/messages/_DateSeparator.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 2 - res/css/views/rooms/_Autocomplete.scss | 39 ++-- res/css/views/rooms/_EntityTile.scss | 8 +- res/css/views/rooms/_EventTile.scss | 167 +++++++++--------- res/css/views/rooms/_MemberInfo.scss | 3 - res/css/views/rooms/_PinnedEventTile.scss | 12 +- res/css/views/rooms/_RoomBreadcrumbs.scss | 17 +- res/css/views/rooms/_RoomHeader.scss | 1 - res/css/views/rooms/_RoomTile.scss | 40 ++--- .../views/messages/DateSeparator.js | 2 +- 24 files changed, 210 insertions(+), 239 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 639764150b..d6c61b48d1 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -104,17 +104,17 @@ input[type=text], input[type=password], textarea { color: $primary-fg-color; } -input[type=text]:focus, input[type=password]:focus, textarea:focus { - outline: none; - box-shadow: none; -} - /* Required by Firefox */ textarea { font-family: $font-family; color: $primary-fg-color; } +input[type=text]:focus, input[type=password]:focus, textarea:focus { + outline: none; + box-shadow: none; +} + // This is used to hide the standard outline added by browsers for // accessible (focusable) components. Not intended for buttons, but // should be used on things like focusable containers where the outline @@ -129,6 +129,13 @@ textarea { // appear to be part of the input .mx_Dialog, .mx_MatrixChat { + .mx_textinput > input[type=text], + .mx_textinput > input[type=search] { + border: none; + flex: 1; + color: $primary-fg-color; + } + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { @@ -147,13 +154,6 @@ textarea { .mx_textinput { display: flex; align-items: center; - - > input[type=text], - > input[type=search] { - border: none; - flex: 1; - color: $primary-fg-color; - } } :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, @@ -166,9 +166,7 @@ textarea { /*** panels ***/ .dark-panel { background-color: $dark-panel-bg-color; -} -.dark-panel { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { @@ -271,14 +269,6 @@ textarea { justify-content: center; } -/* Spinner Dialog overide */ -.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { - width: auto; - border-radius: 8px; - padding: 0px; - box-shadow: none; -} - .mx_Dialog { background-color: $primary-bg-color; color: $light-fg-color; @@ -425,6 +415,14 @@ textarea { opacity: 0.7; } +/* Spinner Dialog overide */ +.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { + width: auto; + border-radius: 8px; + padding: 0px; + box-shadow: none; +} + // TODO: Review mx_GeneralButton usage to see if it can use a different class // These classes were brought in from the old UserSettings and are included here to avoid // breaking the app. diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index cce3b5dbf5..ca50766324 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -58,12 +58,12 @@ limitations under the License. color: $authpage-primary-color; } + .mx_Field_labelAlwaysTopLeft label, + .mx_Field select + label, /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, - .mx_Field textarea:not(:placeholder-shown) + label, - .mx_Field select + label /* Always show a select's label on top to not collide with the value */, - .mx_Field_labelAlwaysTopLeft label { + .mx_Field textarea:not(:placeholder-shown) + label { background-color: $authpage-body-bg-color; } diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index 4246474de3..308cecfe1e 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -18,6 +18,18 @@ limitations under the License. padding: 6px; } +.mx_RoomTileContextMenu_tag_icon { + padding-right: 8px; + padding-left: 4px; + display: inline-block; +} + +.mx_RoomTileContextMenu_tag_icon_set { + padding-right: 8px; + padding-left: 4px; + display: none; +} + .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { padding-top: 8px; padding-right: 20px; @@ -45,18 +57,6 @@ limitations under the License. color: rgba(0, 0, 0, 0.2); } -.mx_RoomTileContextMenu_tag_icon { - padding-right: 8px; - padding-left: 4px; - display: inline-block; -} - -.mx_RoomTileContextMenu_tag_icon_set { - padding-right: 8px; - padding-left: 4px; - display: none; -} - .mx_RoomTileContextMenu_separator { margin-top: 0; margin-bottom: 0; @@ -72,10 +72,6 @@ limitations under the License. color: $warning-color; } -.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon { - /* Something to indicate that the icon is the set tag */ -} - .mx_RoomTileContextMenu_notif_picker { position: absolute; top: 16px; diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 9d58c999c3..0ed84f227b 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -135,6 +135,7 @@ limitations under the License. } } +/* stylelint-disable no-descending-specificity */ .mx_DevTools_tgl-flip { + .mx_DevTools_tgl-btn { padding: 2px; @@ -189,3 +190,4 @@ limitations under the License. } } } +/* stylelint-enable no-descending-specificity */ diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index 588f10c9cb..9d09a208df 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -31,6 +31,3 @@ limitations under the License. box-shadow: none; border: 1px solid $accent-color; } - -.mx_SetEmailDialog_email_input_placeholder { -} diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index fe1f283009..106867eb19 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -14,14 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_AccessibleButton:focus { - outline: 0; -} - .mx_AccessibleButton { cursor: pointer; } +.mx_AccessibleButton:focus { + outline: 0; +} + .mx_AccessibleButton_disabled { cursor: default; } diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss index d60aeeff62..dd78fcc0f0 100644 --- a/res/css/views/elements/_AddressSelector.scss +++ b/res/css/views/elements/_AddressSelector.scss @@ -21,7 +21,6 @@ limitations under the License. max-height: 116px; overflow-y: auto; border-radius: 3px; - background-color: $primary-bg-color; border: solid 1px $accent-color; cursor: pointer; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 2a59393499..102ac56bf9 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -51,13 +51,6 @@ limitations under the License. background: $primary-fg-color; } -.mx_Dropdown_input > .mx_Dropdown_option { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - .mx_Dropdown_option { height: 35px; line-height: 35px; @@ -65,6 +58,13 @@ limitations under the License. padding-right: 8px; } +.mx_Dropdown_input > .mx_Dropdown_option { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; +} + .mx_Dropdown_option div { overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index a6ac680116..1bc961d1f8 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -110,12 +110,12 @@ limitations under the License. max-width: calc(100% - 20px); // 100% of parent minus margin and padding } +.mx_Field_labelAlwaysTopLeft label, +.mx_Field select + label, /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, -.mx_Field textarea:not(:placeholder-shown) + label, -.mx_Field select + label /* Always show a select's label on top to not collide with the value */, -.mx_Field_labelAlwaysTopLeft label { +.mx_Field textarea:not(:placeholder-shown) + label { transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, @@ -144,6 +144,7 @@ limitations under the License. color: $greyed-fg-color; } +/* stylelint-disable no-descending-specificity */ .mx_Field_valid { &.mx_Field, &.mx_Field:focus-within { @@ -167,6 +168,7 @@ limitations under the License. color: $input-invalid-border-color; } } +/* stylelint-enable no-descending-specificity */ .mx_Field_tooltip { margin-top: -12px; diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.scss index 7c91b9dbde..fe8c76003b 100644 --- a/res/css/views/elements/_ManageIntegsButton.scss +++ b/res/css/views/elements/_ManageIntegsButton.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_ManageIntegsButton_error { position: relative; + float: right; cursor: not-allowed; } @@ -25,18 +26,6 @@ limitations under the License. top: -5px; } -.mx_ManageIntegsButton_error { - float: right; -} - -.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { - display: none; -} - -.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { - display: inline; -} - .mx_ManageIntegsButton_errorPopup { position: absolute; top: 110%; @@ -51,3 +40,11 @@ limitations under the License. text-align: center; z-index: 1000; } + +.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { + display: none; +} + +.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { + display: inline; +} diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 262d78d880..73f0be291f 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -13,12 +13,6 @@ padding-left: 5px; } -.mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill, -.mx_EventTile_body .mx_GroupPill { - cursor: pointer; -} - /* More specific to override `.markdown-body a` text-decoration */ .mx_EventTile_content .markdown-body a.mx_Pill { text-decoration: none; @@ -64,6 +58,12 @@ padding-right: 5px; } +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { + cursor: pointer; +} + .mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar, diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 1bb3a74ab1..1f4445b88c 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -44,10 +44,10 @@ limitations under the License. top: 0; } -.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { - left: 2px; -} - .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { left: 23px; // 48px switch - 20px ball - 5px padding = 23px } + +.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { + left: 2px; +} diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss index adf16d6c4a..d45645863f 100644 --- a/res/css/views/messages/_CreateEvent.scss +++ b/res/css/views/messages/_CreateEvent.scss @@ -37,6 +37,3 @@ limitations under the License. .mx_CreateEvent_header { font-weight: bold; } - -.mx_CreateEvent_link { -} diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index f8738f10e3..935ee1aba3 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -30,7 +30,7 @@ limitations under the License. border-bottom: 1px solid $panel-divider-color; } -.mx_DateSeparator > date { +.mx_DateSeparator > div { margin: 0 25px; flex: 0 0 auto; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 09fdc28e78..e426598b0f 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -42,7 +42,6 @@ $AppsDrawerBodyHeight: 273px; .mx_AddWidget_button { order: 2; cursor: pointer; - padding-right: 12px; padding: 0; margin: 5px auto 5px auto; color: $accent-color; @@ -270,7 +269,6 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile_image { padding: 10px; - width: 75%; max-width: 100px; max-height: 100px; width: auto; diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 2d57a1783a..e5316f5a46 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -15,11 +15,6 @@ border-bottom: 1px solid $primary-hairline-color; } -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; -} - /* a "block" completion takes up a whole line */ .mx_Autocomplete_Completion_block { height: 34px; @@ -50,6 +45,22 @@ margin: 0 3px; } +/* styling for common completion elements */ +.mx_Autocomplete_Completion_subtitle { + font-style: italic; + flex: 1; +} + +.mx_Autocomplete_Completion_description { + color: gray; +} + +.mx_Autocomplete_Completion_container_pill { + margin: 12px; + display: flex; + flex-flow: wrap; +} + .mx_Autocomplete_Completion_container_truncate { .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_subtitle, @@ -62,13 +73,6 @@ } } -/* container for pill-style completions */ -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; - flex-flow: wrap; -} - .mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover { background: $selected-color; @@ -81,14 +85,3 @@ font-weight: 400; opacity: 0.4; } - -/* styling for common completion elements */ -.mx_Autocomplete_Completion_subtitle { - font-style: italic; - flex: 1; -} - -.mx_Autocomplete_Completion_description { - color: gray; -} - diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 6b2f0d8567..2b6b31acb4 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -85,10 +85,6 @@ limitations under the License. overflow: hidden; } -.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { - font-size: 13px; -} - .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; color: $primary-fg-color; @@ -116,6 +112,10 @@ limitations under the License. opacity: 0.25; } +.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { + font-size: 13px; +} + .mx_EntityTile_subtext { font-size: 11px; opacity: 0.5; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ba667a272b..c97ce0c584 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -126,6 +126,27 @@ limitations under the License. line-height: 57px !important; } +.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: 3px; + width: auto; +} + +// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) +.mx_EventTile_last > div > a > .mx_MessageTimestamp, +.mx_EventTile:hover > div > a > .mx_MessageTimestamp, +.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile:hover .mx_MessageActionBar, +.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { + visibility: visible; +} + /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ @@ -135,6 +156,15 @@ limitations under the License. background-color: $event-selected-color; } +.mx_EventTile_highlight, +.mx_EventTile_highlight .markdown-body { + color: $event-highlight-fg-color; + + .mx_EventTile_line { + background-color: $event-highlight-bg-color; + } +} + .mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line { background-color: $event-selected-color; @@ -166,14 +196,6 @@ limitations under the License. .mx_EventTile_sending .mx_RoomPill { opacity: 0.5; } -.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody { - opacity: 0.4; -} - -div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { - --lozenge-color: $event-notsent-color !important; - --lozenge-border-color: $event-notsent-color !important; -} .mx_EventTile_notSent { color: $event-notsent-color; @@ -184,28 +206,27 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { --lozenge-color: $event-redacted-fg-color; --lozenge-border-color: $event-redacted-border-color; display: block; - width: 100%; height: 22px; width: 250px; border-radius: 11px; background: - repeating-linear-gradient( - -45deg, - var(--lozenge-color), - var(--lozenge-color) 3px, - transparent 3px, - transparent 6px - ); + repeating-linear-gradient( + -45deg, + var(--lozenge-color), + var(--lozenge-color) 3px, + transparent 3px, + transparent 6px + ); box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; } -.mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body { - color: $event-highlight-fg-color; +.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody { + opacity: 0.4; +} - .mx_EventTile_line { - background-color: $event-highlight-bg-color; - } +div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { + --lozenge-color: $event-notsent-color; + --lozenge-border-color: $event-notsent-color; } .mx_EventTile_contextual { @@ -230,27 +251,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { text-decoration: none; } -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile_last > div > a > .mx_MessageTimestamp, -.mx_EventTile:hover > div > a > .mx_MessageTimestamp, -.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { - visibility: visible; -} - -.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { - visibility: visible; -} - -.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - left: 3px; - width: auto; -} - -.mx_EventTile:hover .mx_MessageActionBar, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { - visibility: visible; -} - .mx_EventTile_readAvatars { position: relative; display: inline-block; @@ -296,11 +296,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { overflow-y: hidden; } -/* End to end encryption stuff */ -.mx_EventTile:hover .mx_EventTile_e2eIcon { - opacity: 1; -} - .mx_EventTile_e2eIcon { display: block; position: absolute; @@ -367,22 +362,31 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { padding-left: 5px; } +.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + padding-left: 78px; +} + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { padding-left: 60px; } -.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color 5px solid; +} + +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color 5px solid; +} + .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line { padding-left: 78px; } -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; -} -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; +/* End to end encryption stuff */ +.mx_EventTile:hover .mx_EventTile_e2eIcon { + opacity: 1; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) @@ -392,12 +396,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { width: auto; } -/* -.mx_EventTile_verified .mx_EventTile_e2eIcon { - display: none; -} -*/ - // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon { @@ -416,35 +414,40 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* Various markdown overrides */ +.mx_EventTile_body pre { + border: 1px solid transparent; +} + .mx_EventTile_content .markdown-body { font-family: inherit !important; white-space: normal !important; line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) font-size: 14px; -} -/* have to use overlay rather than auto otherwise Linux and Windows - Chrome gets very confused about vertical spacing: - https://github.com/vector-im/vector-web/issues/754 -*/ -.mx_EventTile_content .markdown-body pre { - overflow-x: overlay; - overflow-y: visible; - max-height: 30vh; -} - -.mx_EventTile_content .markdown-body code { - // deliberate constants as we're behind an invert filter - background-color: #f8f8f8; -} - -.mx_EventTile_content .markdown-body { pre, code { font-family: $monospace-font-family !important; // deliberate constants as we're behind an invert filter color: #333; } + + pre { + // have to use overlay rather than auto otherwise Linux and Windows + // Chrome gets very confused about vertical spacing: + // https://github.com/vector-im/vector-web/issues/754 + overflow-x: overlay; + overflow-y: visible; + max-height: 30vh; + } + + code { + // deliberate constants as we're behind an invert filter + background-color: #f8f8f8; + } +} + +.mx_EventTile:hover .mx_EventTile_body pre { + border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter } .mx_EventTile_pre_container { @@ -465,14 +468,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { background-image: url($copy-button-url); } -.mx_EventTile_body pre { - border: 1px solid transparent; -} - -.mx_EventTile:hover .mx_EventTile_body pre { - border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter -} - .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { visibility: visible; } @@ -518,6 +513,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* end of overrides */ +/* stylelint-disable no-descending-specificity */ .mx_MatrixChat_useCompactLayout { .mx_EventTile { padding-top: 4px; @@ -595,3 +591,4 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } } } +/* stylelint-enable no-descending-specificity */ diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 4a0a5fada7..e3f746e9d3 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -82,9 +82,6 @@ limitations under the License. display: block; } -.mx_MemberInfo_avatar .mx_BaseAvatar { -} - .mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { cursor: zoom-in; } diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index 695d3fe006..030a76674a 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -44,6 +44,12 @@ limitations under the License. margin-right: 10px; } +.mx_PinnedEventTile_actions { + float: right; + margin-right: 10px; + display: none; +} + .mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp { display: inline-block; } @@ -52,12 +58,6 @@ limitations under the License. display: block; } -.mx_PinnedEventTile_actions { - float: right; - margin-right: 10px; - display: none; -} - .mx_PinnedEventTile_unpinButton { display: inline-block; cursor: pointer; diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index 6c3eb0420a..13fcbf2529 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -78,6 +78,14 @@ limitations under the License. display: none; } + .mx_IndicatorScrollbar_leftOverflowIndicator { + background: linear-gradient(to left, $panel-gradient); + } + + .mx_IndicatorScrollbar_rightOverflowIndicator { + background: linear-gradient(to right, $panel-gradient); + } + &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator, &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator { position: absolute; @@ -88,13 +96,4 @@ limitations under the License. pointer-events: none; z-index: 100; } - - .mx_IndicatorScrollbar_leftOverflowIndicator { - background: linear-gradient(to left, $panel-gradient); - } - - .mx_IndicatorScrollbar_rightOverflowIndicator { - background: linear-gradient(to right, $panel-gradient); - } } - diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 0ade689054..2ee991cac7 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -22,7 +22,6 @@ limitations under the License. .mx_RoomHeader_wrapper { margin: auto; height: 52px; - align-items: center; display: flex; align-items: center; min-width: 0; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index c13b988b8e..b3d752df5e 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -25,6 +25,11 @@ limitations under the License. position: relative; } +.mx_RoomTile:focus { + filter: none !important; + background-color: $roomtile-focused-bg-color; +} + .mx_RoomTile_menuButton { display: none; flex: 0 0 16px; @@ -34,13 +39,6 @@ limitations under the License. background-position: center; } -// toggle menuButton and badge on hover/menu displayed -.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { - .mx_RoomTile_menuButton { - display: block; - } -} - .mx_RoomTile_tooltip { display: inline-block; position: relative; @@ -48,7 +46,6 @@ limitations under the License. left: -12px; } - .mx_RoomTile_nameContainer { display: flex; align-items: center; @@ -109,6 +106,15 @@ limitations under the License. text-overflow: ellipsis; } +.mx_RoomTile_badge { + flex: 0 1 content; + border-radius: 0.8em; + padding: 0 0.4em; + color: $accent-fg-color; + font-weight: 600; + font-size: 12px; +} + .collapsed { .mx_RoomTile { margin: 0 2px; @@ -135,13 +141,12 @@ limitations under the License. } } -.mx_RoomTile_badge { - flex: 0 1 content; - border-radius: 0.8em; - padding: 0 0.4em; - color: $accent-fg-color; - font-weight: 600; - font-size: 12px; +// toggle menuButton and badge on hover/menu displayed +.mx_RoomTile_menuDisplayed, +.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover { + .mx_RoomTile_menuButton { + display: block; + } } .mx_RoomTile_unreadNotify .mx_RoomTile_badge, @@ -175,11 +180,6 @@ limitations under the License. transform: scale(1.05, 1.05); } -.mx_RoomTile:focus { - filter: none !important; - background-color: $roomtile-focused-bg-color; -} - .mx_RoomTile_arrow { position: absolute; right: 0px; diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index 6d99b54ce2..9cea4c5cd6 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component { } render() { - return

{ this.getLabel() }

; + return

{ this.getLabel() }

; } }