PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix up some CSS things stylelint was complaining about

Browse source 
And also disable a load of rules that feel like they're probably
causing more headaches than they fix.
This commit is contained in:
David Baker 2019-04-09 15:03:13 +01:00
parent 564a9838b0
commit eb6f3f6008
13 changed files with 126 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.stylelintrc.js
View file

@ -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,
}
}

7
res/css/structures/_AutoHideScrollbar.scss
View file

@ -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
*/

2
res/css/structures/_ContextualMenu.scss
View file

@ -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;
}

8
res/css/structures/_FilePanel.scss
View file

@ -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;
}

10
res/css/structures/_LeftPanel.scss
View file

@ -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;
}

10
res/css/structures/_MyGroups.scss
View file

@ -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;
}

8
res/css/structures/_NotificationPanel.scss
View file

@ -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;
}

12
res/css/structures/_RoomStatusBar.scss
View file

@ -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;
}
}

47
res/css/structures/_RoomSubList.scss
View file

@ -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;
}
*/
}

115
res/css/structures/_RoomView.scss
View file

@ -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;
}

6
res/css/structures/_TabbedView.scss
View file

@ -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;
}

5
res/css/structures/_TagPanel.scss
View file

@ -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 {

6
res/css/structures/_TagPanelButtons.scss
View file

@ -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: '';