imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3200 from matrix-org/jryans/stylelint-all-files

Browse source 
Run stylelint on all SCSS files
This commit is contained in:
J. Ryan Stinnett 2019-07-11 09:38:18 +01:00 • committed by GitHub
commit 9b3848d083
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 391 additions and 397 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.stylelintrc.js
View file

@ -1,5 +1,8 @@
module.exports = { module.exports = {
"extends": "stylelint-config-standard", "extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss",
],
"rules": { "rules": {
"indentation": 4, "indentation": 4,
"comment-empty-line-before": null, "comment-empty-line-before": null,
@ -11,5 +14,7 @@ module.exports = {
"number-no-trailing-zeros": null, "number-no-trailing-zeros": null,
"number-leading-zero": null, "number-leading-zero": null,
"selector-list-comma-newline-after": null, "selector-list-comma-newline-after": null,
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
} }
} }

3
package.json
View file

@ -49,7 +49,7 @@
"lint": "eslint src/", "lint": "eslint src/",
"lintall": "eslint src/ test/", "lintall": "eslint src/ test/",
"lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test", "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
"stylelint": "stylelint res/css/**/*.scss", "stylelint": "stylelint 'res/css/**/*.scss'",
"clean": "rimraf lib", "clean": "rimraf lib",
"prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt", "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
"test": "karma start --single-run=true --browsers VectorChromeHeadless", "test": "karma start --single-run=true --browsers VectorChromeHeadless",
@ -153,6 +153,7 @@
"source-map-loader": "^0.2.3", "source-map-loader": "^0.2.3",
"stylelint": "^9.10.1", "stylelint": "^9.10.1",
"stylelint-config-standard": "^18.2.0", "stylelint-config-standard": "^18.2.0",
"stylelint-scss": "^3.9.0",
"walk": "^2.3.9", "walk": "^2.3.9",
"webpack": "^4.20.2", "webpack": "^4.20.2",
"webpack-cli": "^3.1.1" "webpack-cli": "^3.1.1"

42
res/css/_common.scss
View file

@ -104,17 +104,17 @@ input[type=text], input[type=password], textarea {
color: $primary-fg-color; color: $primary-fg-color;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
/* Required by Firefox */ /* Required by Firefox */
textarea { textarea {
font-family: $font-family; font-family: $font-family;
color: $primary-fg-color; 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 // This is used to hide the standard outline added by browsers for
// accessible (focusable) components. Not intended for buttons, but // accessible (focusable) components. Not intended for buttons, but
// should be used on things like focusable containers where the outline // should be used on things like focusable containers where the outline
@ -129,6 +129,13 @@ textarea {
// appear to be part of the input // appear to be part of the input
.mx_Dialog, .mx_MatrixChat { .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=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput { .mx_textinput {
@ -147,13 +154,6 @@ textarea {
.mx_textinput { .mx_textinput {
display: flex; display: flex;
align-items: center; 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, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
@ -166,9 +166,7 @@ textarea {
/*** panels ***/ /*** panels ***/
.dark-panel { .dark-panel {
background-color: $dark-panel-bg-color; 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=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput { .mx_textinput {
@ -271,14 +269,6 @@ textarea {
justify-content: center; 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 { .mx_Dialog {
background-color: $primary-bg-color; background-color: $primary-bg-color;
color: $light-fg-color; color: $light-fg-color;
@ -425,6 +415,14 @@ textarea {
opacity: 0.7; 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 // 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 // These classes were brought in from the old UserSettings and are included here to avoid
// breaking the app. // breaking the app.

6
res/css/views/auth/_AuthBody.scss
View file

@ -58,12 +58,12 @@ limitations under the License.
color: $authpage-primary-color; 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:focus + label,
.mx_Field input:not(:placeholder-shown) + label, .mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label, .mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + 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 {
background-color: $authpage-body-bg-color; background-color: $authpage-body-bg-color;
} }

28
res/css/views/context_menus/_RoomTileContextMenu.scss
View file

@ -18,6 +18,18 @@ limitations under the License.
padding: 6px; 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 { .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px; padding-top: 8px;
padding-right: 20px; padding-right: 20px;
@ -45,18 +57,6 @@ limitations under the License.
color: rgba(0, 0, 0, 0.2); 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 { .mx_RoomTileContextMenu_separator {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -72,10 +72,6 @@ limitations under the License.
color: $warning-color; 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 { .mx_RoomTileContextMenu_notif_picker {
position: absolute; position: absolute;
top: 16px; top: 16px;

2
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
.mx_TagTileContextMenu_item_icon { .mx_TagTileContextMenu_item_icon {
padding-right: 8px; padding-right: 8px;
padding-left: 4px; padding-left: 4px;
display: inline-block display: inline-block;
} }
.mx_TagTileContextMenu_separator { .mx_TagTileContextMenu_separator {

1
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -89,5 +89,4 @@ limitations under the License.
background-color: $menu-selected-color; background-color: $menu-selected-color;
} }
} }
} }

5
res/css/views/dialogs/_AddressPickerDialog.scss
View file

@ -17,8 +17,7 @@ limitations under the License.
/* Using a textarea for this element, to circumvent autofill */ /* Using a textarea for this element, to circumvent autofill */
.mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus .mx_AddressPickerDialog_input:focus {
{
height: 26px; height: 26px;
font-size: 14px; font-size: 14px;
font-family: $font-family; font-family: $font-family;
@ -36,7 +35,7 @@ limitations under the License.
} }
.mx_AddressPickerDialog .mx_Dialog_content { .mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px min-height: 50px;
} }
.mx_AddressPickerDialog_inputContainer { .mx_AddressPickerDialog_inputContainer {

53
res/css/views/dialogs/_DevtoolsDialog.scss
View file

@ -45,13 +45,11 @@ limitations under the License.
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.mx_DevTools_inputRow .mx_DevTools_inputRow {
{
display: table-row; display: table-row;
} }
.mx_DevTools_inputLabelCell .mx_DevTools_inputLabelCell {
{
display: table-cell; display: table-cell;
font-weight: bold; font-weight: bold;
padding-right: 24px; padding-right: 24px;
@ -62,8 +60,7 @@ limitations under the License.
width: 240px; width: 240px;
} }
.mx_DevTools_inputCell input .mx_DevTools_inputCell input {
{
display: inline-block; display: inline-block;
border: 0; border: 0;
border-bottom: 1px solid $input-underline-color; border-bottom: 1px solid $input-underline-color;
@ -95,11 +92,11 @@ limitations under the License.
// add default box-sizing for this scope // add default box-sizing for this scope
&, &,
&:after, &::after,
&:before, &::before,
& *, & *,
& *:after, & *::after,
& *:before, & *::before,
& + .mx_DevTools_tgl-btn { & + .mx_DevTools_tgl-btn {
box-sizing: border-box; box-sizing: border-box;
&::selection { &::selection {
@ -115,8 +112,8 @@ limitations under the License.
position: relative; position: relative;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:after, &::after,
&:before { &::before {
position: relative; position: relative;
display: block; display: block;
content: ""; content: "";
@ -124,28 +121,31 @@ limitations under the License.
height: 100%; height: 100%;
} }
&:after { &::after {
left: 0; left: 0;
} }
&:before { &::before {
display: none; display: none;
} }
} }
&:checked + .mx_DevTools_tgl-btn:after { &:checked + .mx_DevTools_tgl-btn::after {
left: 50%; left: 50%;
} }
} }
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_DevTools_tgl-flip { .mx_DevTools_tgl-flip {
+ .mx_DevTools_tgl-btn { + .mx_DevTools_tgl-btn {
padding: 2px; padding: 2px;
transition: all .2s ease; transition: all .2s ease;
font-family: sans-serif; font-family: sans-serif;
perspective: 100px; perspective: 100px;
&:after, &::after,
&:before { &::before {
display: inline-block; display: inline-block;
transition: all .4s ease; transition: all .4s ease;
width: 100%; width: 100%;
@ -160,35 +160,36 @@ limitations under the License.
border-radius: 4px; border-radius: 4px;
} }
&:after { &::after {
content: attr(data-tg-on); content: attr(data-tg-on);
background: #02C66F; background: #02c66f;
transform: rotateY(-180deg); transform: rotateY(-180deg);
} }
&:before { &::before {
background: #FF3A19; background: #ff3a19;
content: attr(data-tg-off); content: attr(data-tg-off);
} }
&:active:before { &:active::before {
transform: rotateY(-20deg); transform: rotateY(-20deg);
} }
} }
&:checked + .mx_DevTools_tgl-btn { &:checked + .mx_DevTools_tgl-btn {
&:before { &::before {
transform: rotateY(180deg); transform: rotateY(180deg);
} }
&:after { &::after {
transform: rotateY(0); transform: rotateY(0);
left: 0; left: 0;
background: #7FC6A6; background: #7fc6a6;
} }
&:active:after { &:active::after {
transform: rotateY(20deg); transform: rotateY(20deg);
} }
} }
} }
/* stylelint-enable no-descending-specificity */

8
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -17,19 +17,19 @@ limitations under the License.
// ICONS // ICONS
// ========================================================== // ==========================================================
.mx_RoomSettingsDialog_settingsIcon:before { .mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/feather-customised/settings.svg');
} }
.mx_RoomSettingsDialog_securityIcon:before { .mx_RoomSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg'); mask-image: url('$(res)/img/feather-customised/lock.svg');
} }
.mx_RoomSettingsDialog_rolesIcon:before { .mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url('$(res)/img/feather-customised/users-sm.svg'); mask-image: url('$(res)/img/feather-customised/users-sm.svg');
} }
.mx_RoomSettingsDialog_warningIcon:before { .mx_RoomSettingsDialog_warningIcon::before {
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
} }

3
res/css/views/dialogs/_SetEmailDialog.scss
View file

@ -31,6 +31,3 @@ limitations under the License.
box-shadow: none; box-shadow: none;
border: 1px solid $accent-color; border: 1px solid $accent-color;
} }
.mx_SetEmailDialog_email_input_placeholder {
}

16
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -17,34 +17,34 @@ limitations under the License.
// ICONS // ICONS
// ========================================================== // ==========================================================
.mx_UserSettingsDialog_settingsIcon:before { .mx_UserSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg'); mask-image: url('$(res)/img/feather-customised/settings.svg');
} }
.mx_UserSettingsDialog_voiceIcon:before { .mx_UserSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/feather-customised/phone.svg'); mask-image: url('$(res)/img/feather-customised/phone.svg');
} }
.mx_UserSettingsDialog_bellIcon:before { .mx_UserSettingsDialog_bellIcon::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg'); mask-image: url('$(res)/img/feather-customised/notifications.svg');
} }
.mx_UserSettingsDialog_preferencesIcon:before { .mx_UserSettingsDialog_preferencesIcon::before {
mask-image: url('$(res)/img/feather-customised/sliders.svg'); mask-image: url('$(res)/img/feather-customised/sliders.svg');
} }
.mx_UserSettingsDialog_securityIcon:before { .mx_UserSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg'); mask-image: url('$(res)/img/feather-customised/lock.svg');
} }
.mx_UserSettingsDialog_helpIcon:before { .mx_UserSettingsDialog_helpIcon::before {
mask-image: url('$(res)/img/feather-customised/help-circle.svg'); mask-image: url('$(res)/img/feather-customised/help-circle.svg');
} }
.mx_UserSettingsDialog_labsIcon:before { .mx_UserSettingsDialog_labsIcon::before {
mask-image: url('$(res)/img/feather-customised/flag.svg'); mask-image: url('$(res)/img/feather-customised/flag.svg');
} }
.mx_UserSettingsDialog_flairIcon:before { .mx_UserSettingsDialog_flairIcon::before {
mask-image: url('$(res)/img/feather-customised/flair.svg'); mask-image: url('$(res)/img/feather-customised/flair.svg');
} }

2
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_CreateKeyBackupDialog_primaryContainer { .mx_CreateKeyBackupDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px padding: 20px;
} }
.mx_CreateKeyBackupDialog_primaryContainer::after { .mx_CreateKeyBackupDialog_primaryContainer::after {

2
res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
padding-left: 45px; padding-left: 45px;
padding-bottom: 10px; padding-bottom: 10px;
&:before { &::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg"); mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-fg-color;

2
res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_RestoreKeyBackupDialog_primaryContainer { .mx_RestoreKeyBackupDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px padding: 20px;
} }
.mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_passPhraseInput,

2
res/css/views/directory/_NetworkDropdown.scss
View file

@ -36,7 +36,7 @@ limitations under the License.
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 16px; top: 16px;
width: 0 width: 0;
} }
.mx_NetworkDropdown_networkoption { .mx_NetworkDropdown_networkoption {

8
res/css/views/elements/_AccessibleButton.scss
View file

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AccessibleButton:focus {
outline: 0;
}
.mx_AccessibleButton { .mx_AccessibleButton {
cursor: pointer; cursor: pointer;
} }
.mx_AccessibleButton:focus {
outline: 0;
}
.mx_AccessibleButton_disabled { .mx_AccessibleButton_disabled {
cursor: default; cursor: default;
} }

1
res/css/views/elements/_AddressSelector.scss
View file

@ -21,7 +21,6 @@ limitations under the License.
max-height: 116px; max-height: 116px;
overflow-y: auto; overflow-y: auto;
border-radius: 3px; border-radius: 3px;
background-color: $primary-bg-color;
border: solid 1px $accent-color; border: solid 1px $accent-color;
cursor: pointer; cursor: pointer;
} }

14
res/css/views/elements/_Dropdown.scss
View file

@ -51,13 +51,6 @@ limitations under the License.
background: $primary-fg-color; background: $primary-fg-color;
} }
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.mx_Dropdown_option { .mx_Dropdown_option {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
@ -65,6 +58,13 @@ limitations under the License.
padding-right: 8px; padding-right: 8px;
} }
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.mx_Dropdown_option div { .mx_Dropdown_option div {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

10
res/css/views/elements/_Field.scss
View file

@ -110,12 +110,12 @@ limitations under the License.
max-width: calc(100% - 20px); // 100% of parent minus margin and padding 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:focus + label,
.mx_Field input:not(:placeholder-shown) + label, .mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label, .mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + 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 {
transition: transition:
font-size 0.25s ease-out 0s, font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s, color 0.25s ease-out 0s,
@ -144,6 +144,9 @@ limitations under the License.
color: $greyed-fg-color; color: $greyed-fg-color;
} }
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_Field_valid { .mx_Field_valid {
&.mx_Field, &.mx_Field,
&.mx_Field:focus-within { &.mx_Field:focus-within {
@ -167,6 +170,7 @@ limitations under the License.
color: $input-invalid-border-color; color: $input-invalid-border-color;
} }
} }
/* stylelint-enable no-descending-specificity */
.mx_Field_tooltip { .mx_Field_tooltip {
margin-top: -12px; margin-top: -12px;

21
res/css/views/elements/_ManageIntegsButton.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_ManageIntegsButton_error { .mx_ManageIntegsButton_error {
position: relative; position: relative;
float: right;
cursor: not-allowed; cursor: not-allowed;
} }
@ -25,18 +26,6 @@ limitations under the License.
top: -5px; 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 { .mx_ManageIntegsButton_errorPopup {
position: absolute; position: absolute;
top: 110%; top: 110%;
@ -51,3 +40,11 @@ limitations under the License.
text-align: center; text-align: center;
z-index: 1000; z-index: 1000;
} }
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
display: none;
}
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
display: inline;
}

12
res/css/views/elements/_RichText.scss
View file

@ -13,12 +13,6 @@
padding-left: 5px; 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 */ /* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill { .mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none; text-decoration: none;
@ -64,6 +58,12 @@
padding-right: 5px; 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_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar,
.mx_GroupPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar,

8
res/css/views/elements/_ToggleSwitch.scss
View file

@ -44,10 +44,10 @@ limitations under the License.
top: 0; top: 0;
} }
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: 23px; // 48px switch - 20px ball - 5px padding = 23px left: 23px; // 48px switch - 20px ball - 5px padding = 23px
} }
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
}

2
res/css/views/elements/_Tooltip.scss
View file

@ -36,7 +36,7 @@ limitations under the License.
border-bottom: 7px solid transparent; border-bottom: 7px solid transparent;
} }
.mx_Tooltip_chevron:after { .mx_Tooltip_chevron::after {
content: ''; content: '';
width: 0; width: 0;
height: 0; height: 0;

3
res/css/views/globals/_MatrixToolbar.scss
View file

@ -44,8 +44,7 @@ limitations under the License.
flex: 1; flex: 1;
} }
.mx_MatrixToolbar_link .mx_MatrixToolbar_link {
{
color: $accent-fg-color !important; color: $accent-fg-color !important;
text-decoration: underline !important; text-decoration: underline !important;
cursor: pointer; cursor: pointer;

3
res/css/views/messages/_CreateEvent.scss
View file

@ -37,6 +37,3 @@ limitations under the License.
.mx_CreateEvent_header { .mx_CreateEvent_header {
font-weight: bold; font-weight: bold;
} }
.mx_CreateEvent_link {
}

2
res/css/views/messages/_DateSeparator.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
border-bottom: 1px solid $panel-divider-color; border-bottom: 1px solid $panel-divider-color;
} }
.mx_DateSeparator > date { .mx_DateSeparator > div {
margin: 0 25px; margin: 0 25px;
flex: 0 0 auto; flex: 0 0 auto;
} }

6
res/css/views/rooms/_AppsDrawer.scss
View file

@ -42,7 +42,6 @@ $AppsDrawerBodyHeight: 273px;
.mx_AddWidget_button { .mx_AddWidget_button {
order: 2; order: 2;
cursor: pointer; cursor: pointer;
padding-right: 12px;
padding: 0; padding: 0;
margin: 5px auto 5px auto; margin: 5px auto 5px auto;
color: $accent-color; color: $accent-color;
@ -270,7 +269,6 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppIconTile_image { .mx_AppIconTile_image {
padding: 10px; padding: 10px;
width: 75%;
max-width: 100px; max-width: 100px;
max-height: 100px; max-height: 100px;
width: auto; width: auto;
@ -361,8 +359,8 @@ form.mx_Custom_Widget_Form div {
} }
@keyframes mx_AppLoading_spinner_fadeIn_animation { @keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 } from { opacity: 0; }
to { opacity: 1 } to { opacity: 1; }
} }

41
res/css/views/rooms/_Autocomplete.scss
View file

@ -8,18 +8,13 @@
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
max-height: 50vh; max-height: 50vh;
overflow: auto overflow: auto;
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
}
/* a "block" completion takes up a whole line */ /* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block { .mx_Autocomplete_Completion_block {
height: 34px; height: 34px;
@ -50,6 +45,22 @@
margin: 0 3px; 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_container_truncate {
.mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_subtitle, .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.selected,
.mx_Autocomplete_Completion:hover { .mx_Autocomplete_Completion:hover {
background: $selected-color; background: $selected-color;
@ -81,14 +85,3 @@
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}

17
res/css/views/rooms/_EntityTile.scss
View file

@ -85,10 +85,6 @@ limitations under the License.
overflow: hidden; overflow: hidden;
} }
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
font-size: 13px;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-fg-color;
@ -102,23 +98,24 @@ limitations under the License.
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
.mx_EntityTile_offline_beenactive .mx_EntityTile_name .mx_EntityTile_offline_beenactive .mx_EntityTile_name {
{
opacity: 0.5; opacity: 0.5;
} }
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
.mx_EntityTile_offline_neveractive .mx_EntityTile_name .mx_EntityTile_offline_neveractive .mx_EntityTile_name {
{
opacity: 0.25; opacity: 0.25;
} }
.mx_EntityTile_unknown .mx_EntityTile_avatar, .mx_EntityTile_unknown .mx_EntityTile_avatar,
.mx_EntityTile_unknown .mx_EntityTile_name .mx_EntityTile_unknown .mx_EntityTile_name {
{
opacity: 0.25; opacity: 0.25;
} }
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
font-size: 13px;
}
.mx_EntityTile_subtext { .mx_EntityTile_subtext {
font-size: 11px; font-size: 11px;
opacity: 0.5; opacity: 0.5;

172
res/css/views/rooms/_EventTile.scss
View file

@ -126,6 +126,27 @@ limitations under the License.
line-height: 57px !important; 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. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
@ -135,9 +156,17 @@ limitations under the License.
background-color: $event-selected-color; 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:hover .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
{
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -167,14 +196,6 @@ limitations under the License.
.mx_EventTile_sending .mx_RoomPill { .mx_EventTile_sending .mx_RoomPill {
opacity: 0.5; 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 { .mx_EventTile_notSent {
color: $event-notsent-color; color: $event-notsent-color;
@ -185,11 +206,11 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
--lozenge-color: $event-redacted-fg-color; --lozenge-color: $event-redacted-fg-color;
--lozenge-border-color: $event-redacted-border-color; --lozenge-border-color: $event-redacted-border-color;
display: block; display: block;
width: 100%;
height: 22px; height: 22px;
width: 250px; width: 250px;
border-radius: 11px; border-radius: 11px;
background: repeating-linear-gradient( background:
repeating-linear-gradient(
-45deg, -45deg,
var(--lozenge-color), var(--lozenge-color),
var(--lozenge-color) 3px, var(--lozenge-color) 3px,
@ -199,14 +220,13 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
} }
.mx_EventTile_highlight, .mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_highlight .markdown-body opacity: 0.4;
{
color: $event-highlight-fg-color;
.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 { .mx_EventTile_contextual {
@ -231,27 +251,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
text-decoration: none; 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 { .mx_EventTile_readAvatars {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -297,11 +296,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
overflow-y: hidden; overflow-y: hidden;
} }
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
opacity: 1;
}
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
display: block; display: block;
position: absolute; position: absolute;
@ -368,22 +362,31 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
padding-left: 5px; 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_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
padding-left: 60px; 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_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px; padding-left: 78px;
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { /* End to end encryption stuff */
border-left: $e2e-verified-color 5px solid; .mx_EventTile:hover .mx_EventTile_e2eIcon {
} opacity: 1;
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
} }
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@ -393,12 +396,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
width: auto; 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) // 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_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon { .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
@ -417,35 +414,40 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
/* Various markdown overrides */ /* Various markdown overrides */
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile_content .markdown-body { .mx_EventTile_content .markdown-body {
font-family: inherit !important; font-family: inherit !important;
white-space: normal !important; white-space: normal !important;
line-height: inherit !important; line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: 14px; 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 { pre, code {
font-family: $monospace-font-family !important; font-family: $monospace-font-family !important;
// deliberate constants as we're behind an invert filter // deliberate constants as we're behind an invert filter
color: #333; 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 { .mx_EventTile_pre_container {
@ -466,17 +468,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
background-image: url($copy-button-url); background-image: url($copy-button-url);
} }
.mx_EventTile_body pre { .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
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; visibility: visible;
} }
@ -485,8 +477,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_content .markdown-body h3, .mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4, .mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5, .mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6 .mx_EventTile_content .markdown-body h6 {
{
font-family: inherit !important; font-family: inherit !important;
color: inherit; color: inherit;
} }
@ -494,8 +485,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
/* Make h1 and h2 the same size as h3. */ /* Make h1 and h2 the same size as h3. */
.mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2 .mx_EventTile_content .markdown-body h2 {
{
font-size: 1.5em; font-size: 1.5em;
border-bottom: none !important; // override GFM border-bottom: none !important; // override GFM
} }
@ -523,6 +513,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
/* end of overrides */ /* end of overrides */
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_EventTile { .mx_EventTile {
padding-top: 4px; padding-top: 4px;
@ -600,3 +593,4 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
} }
} }
} }
/* stylelint-enable no-descending-specificity */

2
res/css/views/rooms/_JumpToBottomButton.scss
View file

@ -55,7 +55,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_JumpToBottomButton_scrollDown:before { .mx_JumpToBottomButton_scrollDown::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;

3
res/css/views/rooms/_MemberInfo.scss
View file

@ -82,9 +82,6 @@ limitations under the License.
display: block; display: block;
} }
.mx_MemberInfo_avatar .mx_BaseAvatar {
}
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { .mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in; cursor: zoom-in;
} }

3
res/css/views/rooms/_MemberList.scss
View file

@ -88,7 +88,7 @@ limitations under the License.
} }
.mx_MemberList_invite.mx_AccessibleButton_disabled { .mx_MemberList_invite.mx_AccessibleButton_disabled {
background-color: $greyed-fg-color;; background-color: $greyed-fg-color;
cursor: not-allowed; cursor: not-allowed;
} }
@ -97,5 +97,4 @@ limitations under the License.
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center left; background-position: center left;
padding-left: 25px; padding-left: 25px;
} }

7
res/css/views/rooms/_MessageComposer.scss
View file

@ -128,10 +128,9 @@ limitations under the License.
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@keyframes visualbell @keyframes visualbell {
{ from { background-color: #faa; }
from { background-color: #faa } to { background-color: $primary-bg-color; }
to { background-color: $primary-bg-color }
} }
.mx_MessageComposer_input_error { .mx_MessageComposer_input_error {

12
res/css/views/rooms/_PinnedEventTile.scss
View file

@ -44,6 +44,12 @@ limitations under the License.
margin-right: 10px; margin-right: 10px;
} }
.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp { .mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block; display: inline-block;
} }
@ -52,12 +58,6 @@ limitations under the License.
display: block; display: block;
} }
.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile_unpinButton { .mx_PinnedEventTile_unpinButton {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;

2
res/css/views/rooms/_ReplyPreview.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
max-height: 50vh; max-height: 50vh;
overflow: auto overflow: auto;
} }
.mx_ReplyPreview_section { .mx_ReplyPreview_section {

17
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -78,6 +78,14 @@ limitations under the License.
display: none; 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_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
&.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator { &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
position: absolute; position: absolute;
@ -88,13 +96,4 @@ limitations under the License.
pointer-events: none; pointer-events: none;
z-index: 100; z-index: 100;
} }
.mx_IndicatorScrollbar_leftOverflowIndicator {
background: linear-gradient(to left, $panel-gradient);
} }
.mx_IndicatorScrollbar_rightOverflowIndicator {
background: linear-gradient(to right, $panel-gradient);
}
}

1
res/css/views/rooms/_RoomHeader.scss
View file

@ -22,7 +22,6 @@ limitations under the License.
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
margin: auto; margin: auto;
height: 52px; height: 52px;
align-items: center;
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;

43
res/css/views/rooms/_RoomTile.scss
View file

@ -25,6 +25,11 @@ limitations under the License.
position: relative; position: relative;
} }
.mx_RoomTile:focus {
filter: none !important;
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile_menuButton { .mx_RoomTile_menuButton {
display: none; display: none;
flex: 0 0 16px; flex: 0 0 16px;
@ -34,13 +39,6 @@ limitations under the License.
background-position: center; 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 { .mx_RoomTile_tooltip {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -48,7 +46,6 @@ limitations under the License.
left: -12px; left: -12px;
} }
.mx_RoomTile_nameContainer { .mx_RoomTile_nameContainer {
display: flex; display: flex;
align-items: center; align-items: center;
@ -109,6 +106,15 @@ limitations under the License.
text-overflow: ellipsis; 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 { .collapsed {
.mx_RoomTile { .mx_RoomTile {
margin: 0 2px; margin: 0 2px;
@ -135,13 +141,12 @@ limitations under the License.
} }
} }
.mx_RoomTile_badge { // toggle menuButton and badge on hover/menu displayed
flex: 0 1 content; .mx_RoomTile_menuDisplayed,
border-radius: 0.8em; .mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
padding: 0 0.4em; .mx_RoomTile_menuButton {
color: $accent-fg-color; display: block;
font-weight: 600; }
font-size: 12px;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge, .mx_RoomTile_unreadNotify .mx_RoomTile_badge,
@ -150,8 +155,7 @@ limitations under the License.
} }
.mx_RoomTile_highlight .mx_RoomTile_badge, .mx_RoomTile_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed .mx_RoomTile_badge.mx_RoomTile_badgeRed {
{
background-color: $warning-color; background-color: $warning-color;
} }
@ -176,11 +180,6 @@ limitations under the License.
transform: scale(1.05, 1.05); transform: scale(1.05, 1.05);
} }
.mx_RoomTile:focus {
filter: none !important;
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile_arrow { .mx_RoomTile_arrow {
position: absolute; position: absolute;
right: 0px; right: 0px;

4
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
width: 38px; width: 38px;
} }
.mx_TopUnreadMessagesBar:after { .mx_TopUnreadMessagesBar::after {
content: "·"; content: "·";
position: absolute; position: absolute;
top: -8px; top: -8px;
@ -49,7 +49,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_TopUnreadMessagesBar_scrollUp:before { .mx_TopUnreadMessagesBar_scrollUp::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 38px; width: 38px;

6
res/css/views/settings/_Notifications.scss
View file

@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_UserNotifSettings_tableRow .mx_UserNotifSettings_tableRow {
{
display: table-row; display: table-row;
} }
@ -26,8 +25,7 @@ limitations under the License.
width: 16px; width: 16px;
} }
.mx_UserNotifSettings_labelCell .mx_UserNotifSettings_labelCell {
{
padding-bottom: 8px; padding-bottom: 8px;
width: 400px; width: 400px;
display: table-cell; display: table-cell;

4
res/css/views/settings/_ProfileSettings.scss
View file

@ -105,7 +105,7 @@ limitations under the License.
margin: auto; margin: auto;
} }
.mx_ProfileSettings_avatarOverlayImg:before { .mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-placeholder-fg-color; background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-customised/upload.svg"); mask: url("$(res)/img/feather-customised/upload.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -119,7 +119,7 @@ limitations under the License.
right: 0; right: 0;
} }
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before { .mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-fg-color !important; background-color: $settings-profile-overlay-fg-color !important;
} }

2
src/components/views/messages/DateSeparator.js
View file

@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component {
} }
render() { render() {
return <h2 className="mx_DateSeparator"><hr /><date>{ this.getLabel() }</date><hr /></h2>; return <h2 className="mx_DateSeparator"><hr /><div>{ this.getLabel() }</div><hr /></h2>;
} }
} }

30
yarn.lock
View file

@ -2295,6 +2295,11 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0" randombytes "^2.0.0"
randomfill "^1.0.3" randomfill "^1.0.3"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
currently-unhandled@^0.4.1: currently-unhandled@^0.4.1:
version "0.4.1" version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@ -5977,6 +5982,15 @@ postcss-selector-parser@^3.1.0:
indexes-of "^1.0.1" indexes-of "^1.0.1"
uniq "^1.0.1" uniq "^1.0.1"
postcss-selector-parser@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
dependencies:
cssesc "^3.0.0"
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-syntax@^0.36.2: postcss-syntax@^0.36.2:
version "0.36.2" version "0.36.2"
resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c" resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
@ -5987,6 +6001,11 @@ postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
postcss-value-parser@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d"
integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==
postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.7: postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.7:
version "7.0.17" version "7.0.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
@ -7364,6 +7383,17 @@ stylelint-config-standard@^18.2.0:
dependencies: dependencies:
stylelint-config-recommended "^2.2.0" stylelint-config-recommended "^2.2.0"
stylelint-scss@^3.9.0:
version "3.9.0"
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.9.0.tgz#45e5e42c28c180ec410ac95ab70fb0b49688cbb6"
integrity sha512-6uB2TPfIA/HybB7gERPFaBWHDBWhoLSjKoG0rQtsQ4LNOvWzJ205Q8JA2x9zZSXOJXatonlT9aGA1tyNBJrmcg==
dependencies:
lodash "^4.17.11"
postcss-media-query-parser "^0.2.3"
postcss-resolve-nested-selector "^0.1.1"
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.0.0"
stylelint@^9.10.1: stylelint@^9.10.1:
version "9.10.1" version "9.10.1"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.10.1.tgz#5f0ee3701461dff1d68284e1386efe8f0677a75d" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.10.1.tgz#5f0ee3701461dff1d68284e1386efe8f0677a75d"