From eb6f3f60085612aed9805525de079561b9f2c1ee Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 9 Apr 2019 15:03:13 +0100 Subject: [PATCH] Fix up some CSS things stylelint was complaining about And also disable a load of rules that feel like they're probably causing more headaches than they fix. --- .stylelintrc.js | 8 ++ res/css/structures/_AutoHideScrollbar.scss | 7 ++ res/css/structures/_ContextualMenu.scss | 2 +- res/css/structures/_FilePanel.scss | 8 +- res/css/structures/_LeftPanel.scss | 10 +- res/css/structures/_MyGroups.scss | 10 +- res/css/structures/_NotificationPanel.scss | 8 +- res/css/structures/_RoomStatusBar.scss | 12 +-- res/css/structures/_RoomSubList.scss | 47 +++++---- res/css/structures/_RoomView.scss | 115 ++++++++++----------- res/css/structures/_TabbedView.scss | 6 +- res/css/structures/_TagPanel.scss | 5 +- res/css/structures/_TagPanelButtons.scss | 6 +- 13 files changed, 126 insertions(+), 118 deletions(-) diff --git a/.stylelintrc.js b/.stylelintrc.js index a6ceac61da..fc00b643a0 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -3,5 +3,13 @@ module.exports = { "rules": { "indentation": 4, "comment-empty-line-before": null, + "declaration-empty-line-before": null, + "length-zero-no-unit": null, + "rule-empty-line-before": null, + "color-hex-length": null, + "max-empty-lines": null, + "number-no-trailing-zeros": null, + "number-leading-zero": null, + "selector-list-comma-newline-after": null, } } diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index 0e1faf727d..84811070dc 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -14,6 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +/* This file has CSS for both native and non-native scrollbars in an + * order that's fairly logic to read but violates stylelints descending + * specificity rule, so turn it off for this file. It also duplicates + * a selector to separate the hiding/showing from the sizing. + */ +/* stylelint-disable no-descending-specificity, no-duplicate-selectors */ + /* 1. for browsers that support native overlay auto-hiding scrollbars */ diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 3788929bf3..98a42340b0 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -35,7 +35,7 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-fg-color; position: absolute; - font-size: 14px; + font-size: 14px; z-index: 5001; } diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 677fa34c6f..703e90f402 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -101,10 +101,10 @@ limitations under the License. padding-left: 0px; } -.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { - background-color: $primary-bg-color; -} - .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { padding-left: 0px; } + +.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { + background-color: $primary-bg-color; +} diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 9dbfe696a5..a8d8669285 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -67,11 +67,6 @@ limitations under the License. z-index: 6; } -.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu { - flex: 0 0 160px; - margin-bottom: 9px; -} - .mx_LeftPanel .mx_BottomLeftMenu { order: 3; @@ -82,6 +77,11 @@ limitations under the License. z-index: 1; } +.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu { + flex: 0 0 160px; + margin-bottom: 9px; +} + .mx_LeftPanel .mx_BottomLeftMenu_options { margin-top: 18px; } diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss index 4428eadc48..d25789ab94 100644 --- a/res/css/structures/_MyGroups.scss +++ b/res/css/structures/_MyGroups.scss @@ -52,7 +52,7 @@ limitations under the License. background-color: $roomheader-addroom-bg-color; position: relative; - &:before { + &::before { background-color: $roomheader-addroom-fg-color; mask: url('$(res)/img/icons-create-room.svg'); mask-repeat: no-repeat; @@ -113,8 +113,7 @@ limitations under the License. overflow-x: hidden; display: flex; - flex-direction: row; - flex-flow: wrap; + flex-flow: row wrap; align-content: flex-start; } @@ -153,6 +152,7 @@ limitations under the License. .mx_GroupTile_profile .mx_GroupTile_groupId { font-size: 13px; + opacity: 0.7; } .mx_GroupTile_profile .mx_GroupTile_desc { @@ -163,7 +163,3 @@ limitations under the License. max-height: 36px; overflow: hidden; } - -.mx_GroupTile_profile .mx_GroupTile_groupId { - opacity: 0.7; -} diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index b171aa3e36..ecad64dd0d 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -83,14 +83,14 @@ limitations under the License. padding-right: 0px; } -.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { - background-color: $primary-bg-color; -} - .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { padding-left: 0px; } +.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { + background-color: $primary-bg-color; +} + .mx_NotificationPanel .mx_EventTile_content { margin-right: 0px; } diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index 1054654670..dd251ae4a5 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -40,12 +40,12 @@ limitations under the License. opacity: 0.5; position: relative; top: -4px; -/* + /* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; animation-iteration-count: infinite; -*/ + */ } .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) { @@ -173,12 +173,12 @@ limitations under the License. } .mx_RoomStatusBar_callBar { - height: 40px; - line-height: 40px; + height: 40px; + line-height: 40px; } .mx_RoomStatusBar_typingBar { - height: 40px; - line-height: 40px; + height: 40px; + line-height: 40px; } } diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2f1484d83f..15fddba817 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -89,7 +89,7 @@ limitations under the License. flex: 0 0 16px; position: relative; - &:before { + &::before { background-color: $roomheader-addroom-fg-color; mask: url('$(res)/img/icons-room-add.svg'); mask-repeat: no-repeat; @@ -137,6 +137,26 @@ limitations under the License. padding: 0 8px; } +.collapsed { + .mx_RoomSubList_scroll { + padding: 0; + } + + .mx_RoomSubList_labelContainer { + margin-right: 14px; + margin-left: 2px; + } + + .mx_RoomSubList_addRoom { + margin-left: 3px; + margin-right: 10px; + } + + .mx_RoomSubList_label > span { + display: none; + } +} + // overflow indicators .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll { &.mx_IndicatorScrollbar_topOverflow::before, @@ -164,7 +184,7 @@ limitations under the License. background: linear-gradient(to top, $panel-gradient); } -/* + /* // for now, we remove the bottomOverflow entirely as we don't want to // lose the screen real-estate due to a bg-colored gradient, but we also // don't want to use drop shadows and risk a confusing hierarchy of cards. @@ -175,26 +195,5 @@ limitations under the License. margin: 0px -8px; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0)); } -*/ -} - -.collapsed { - - .mx_RoomSubList_scroll { - padding: 0; - } - - .mx_RoomSubList_labelContainer { - margin-right: 14px; - margin-left: 2px; - } - - .mx_RoomSubList_addRoom { - margin-left: 3px; - margin-right: 10px; - } - - .mx_RoomSubList_label > span { - display: none; - } + */ } diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 018176146c..1ccbc7fb97 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -86,36 +86,6 @@ limitations under the License. flex: 1 1 0; } -.mx_RoomView_body { - position: relative; //for .mx_RoomView_auxPanel_fullHeight - display: flex; - flex-direction: column; - flex: 1; - min-width: 0; -} - -.mx_RoomView_body .mx_RoomView_timeline { - /* offset parent for mx_RoomView_topUnreadMessagesBar */ - position: relative; - flex: 1; - display: flex; - flex-direction: column; -} - -.mx_RoomView_body { - .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{ - order: 2; - } -} - -.mx_RoomView_body .mx_RoomView_statusArea { - order: 3; -} - -.mx_RoomView_body .mx_MessageComposer { - order: 4; -} - .mx_RoomView_messagePanel { width: 100%; overflow-y: auto; @@ -132,7 +102,7 @@ limitations under the License. position: relative; } -.mx_RoomView_messagePanelSearchSpinner:before { +.mx_RoomView_messagePanelSearchSpinner::before { background-color: $greyed-fg-color; mask: url('$(res)/img/feather-customised/search-input.svg'); mask-repeat: no-repeat; @@ -146,6 +116,62 @@ limitations under the License. height: 50px; } +.mx_RoomView_body { + position: relative; //for .mx_RoomView_auxPanel_fullHeight + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; + + .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner { + order: 2; + } +} + +.mx_RoomView_body .mx_RoomView_timeline { + /* offset parent for mx_RoomView_topUnreadMessagesBar */ + position: relative; + flex: 1; + display: flex; + flex-direction: column; +} + +.mx_RoomView_statusArea { + width: 100%; + flex: 0 0 auto; + + max-height: 0px; + background-color: $primary-bg-color; + z-index: 1000; + overflow: hidden; + + transition: all .2s ease-out; +} + +.mx_RoomView_statusArea_expanded { + max-height: 100px; +} + +.mx_RoomView_statusAreaBox { + margin: auto; + min-height: 50px; +} + +.mx_RoomView_statusAreaBox_line { + margin-left: 65px; + border-top: 1px solid $primary-hairline-color; + height: 1px; +} + + +.mx_RoomView_body .mx_RoomView_statusArea { + order: 3; +} + +.mx_RoomView_body .mx_MessageComposer { + order: 4; +} + .mx_RoomView_messageListWrapper { min-height: 100%; @@ -206,33 +232,6 @@ hr.mx_RoomView_myReadMarker { z-index: 1; } -.mx_RoomView_statusArea { - width: 100%; - flex: 0 0 auto; - - max-height: 0px; - background-color: $primary-bg-color; - z-index: 1000; - overflow: hidden; - - transition: all .2s ease-out; -} - -.mx_RoomView_statusArea_expanded { - max-height: 100px; -} - -.mx_RoomView_statusAreaBox { - margin: auto; - min-height: 50px; -} - -.mx_RoomView_statusAreaBox_line { - margin-left: 65px; - border-top: 1px solid $primary-hairline-color; - height: 1px; -} - .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { background-color: $primary-bg-color; } diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index eef491774a..7904df5a82 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -50,7 +50,7 @@ limitations under the License. color: $tab-label-active-fg-color; } -.mx_TabbedView_maskedIcon {; +.mx_TabbedView_maskedIcon { margin-left: 6px; margin-right: 9px; margin-top: 1px; @@ -59,7 +59,7 @@ limitations under the License. display: inline-block; } -.mx_TabbedView_maskedIcon:before { +.mx_TabbedView_maskedIcon::before { display: inline-block; background-color: $tab-label-icon-bg-color; mask-repeat: no-repeat; @@ -71,7 +71,7 @@ limitations under the License. vertical-align: middle; } -.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before { +.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { background-color: $tab-label-active-icon-bg-color; } diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 084dcbfb47..a818f52125 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -36,7 +36,6 @@ limitations under the License. flex: none; - display: flex; justify-content: center; align-items: flex-start; @@ -75,13 +74,13 @@ limitations under the License. .mx_TagPanel .mx_TagTile { margin: 9px 0; -// opacity: 0.5; + // opacity: 0.5; position: relative; } .mx_TagPanel .mx_TagTile:focus, .mx_TagPanel .mx_TagTile:hover, .mx_TagPanel .mx_TagTile.mx_TagTile_selected { -// opacity: 1; + // opacity: 1; } .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss index b14bb10bf8..70fea92959 100644 --- a/res/css/structures/_TagPanelButtons.scss +++ b/res/css/structures/_TagPanelButtons.scss @@ -23,12 +23,12 @@ limitations under the License. padding: 17px 0 3px 0; } -.mx_TagPanelButtons > .mx_GroupsButton:before { +.mx_TagPanelButtons > .mx_GroupsButton::before { mask: url('$(res)/img/feather-customised/users.svg'); mask-position: center 11px; } -.mx_TagPanelButtons > .mx_TagPanelButtons_report:before { +.mx_TagPanelButtons > .mx_TagPanelButtons_report::before { mask: url('$(res)/img/feather-customised/life-buoy.svg'); mask-position: center 9px; } @@ -43,7 +43,7 @@ limitations under the License. /* overwrite mx_RoleButton inline-block */ display: block !important; - &:before { + &::before { background-color: $tagpanel-bg-color; mask-repeat: no-repeat; content: '';