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

Merge branch 'develop' of https://github.com/vector-im/riot-web into rxl881/visualCue

Browse source
This commit is contained in:
Richard Lewis 2017-11-10 16:22:33 +00:00
commit 83373bcf6e
125 changed files with 15083 additions and 1379 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/skins/vector/css/_common.scss
View file

@ -38,8 +38,8 @@ body {
-webkit-font-smoothing: subpixel-antialiased;
}
div.error {
color: red;
div.error, div.warning {
color: $warning-color;
}
h2 {
@ -87,6 +87,11 @@ textarea {
transition: opacity 0.2s ease-in-out;
}
.mx_fadable.mx_fadable_faded {
opacity: 0.3;
pointer-events: none;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
Stop the scrollbar view from pushing out the container's overall sizing, which causes
flexbox to adapt to the new size and cause the view to keep growing.

10
src/skins/vector/css/_components.scss
View file

@ -20,7 +20,10 @@
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_CreateRoomDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_GroupAddressPicker.scss";
@import "./matrix-react-sdk/views/dialogs/_QuestionDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_SetMxIdDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss";
@import "./matrix-react-sdk/views/elements/_AccessibleButton.scss";
@ -28,10 +31,13 @@
@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
@import "./matrix-react-sdk/views/elements/_Dropdown.scss";
@import "./matrix-react-sdk/views/elements/_EditableItemList.scss";
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
@import "./matrix-react-sdk/views/elements/_RichText.scss";
@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
@import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
@import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
@import "./matrix-react-sdk/views/messages/_MEmoteBody.scss";
@ -50,6 +56,8 @@
@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
@ -74,10 +82,12 @@
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
@import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
@import "./vector-web/views/dialogs/_DevtoolsDialog.scss";
@import "./vector-web/views/dialogs/_SetEmailDialog.scss";
@import "./vector-web/views/dialogs/_SetPasswordDialog.scss";
@import "./vector-web/views/directory/_NetworkDropdown.scss";
@import "./vector-web/views/elements/_ImageView.scss";
@import "./vector-web/views/elements/_InlineSpinner.scss";
@import "./vector-web/views/elements/_Spinner.scss";
@import "./vector-web/views/globals/_MatrixToolbar.scss";
@import "./vector-web/views/messages/_DateSeparator.scss";

191
src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
View file

@ -17,6 +17,11 @@ limitations under the License.
.mx_GroupView {
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mx_GroupView_error {
@ -25,15 +30,15 @@ limitations under the License.
.mx_GroupView_header {
max-width: 960px;
margin: auto;
height: 70px;
min-height: 70px;
align-items: center;
display: flex;
margin-bottom: 20px;
padding-bottom: 10px;
}
.mx_GroupView_header_view {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px;
}
.mx_GroupView_header_avatar, .mx_GroupView_header_info {
@ -51,6 +56,23 @@ limitations under the License.
pointer-events: none;
}
.mx_GroupView_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;
cursor: text;
}
.mx_GroupView_editable:focus {
border-bottom: 1px solid $accent-color ! important;
outline: none;
box-shadow: none;
}
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
color: $accent-color;
cursor: pointer;
}
.mx_GroupView_avatarPicker {
position: relative;
}
@ -70,8 +92,13 @@ limitations under the License.
flex: 1;
}
.mx_GroupView_saveButton, .mx_GroupView_cancelButton {
display: table-cell;
.mx_GroupView_header_rightCol {
display: flex;
align-items: center;
}
.mx_GroupView_textButton {
display: inline-block;
}
.mx_GroupView_header_groupid {
@ -95,10 +122,6 @@ limitations under the License.
border-bottom: 1px solid transparent;
}
.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input {
width: 400px;
}
.mx_GroupView_header_shortDesc {
vertical-align: bottom;
float: left;
@ -126,6 +149,102 @@ limitations under the License.
top: 5px;
}
.mx_GroupView_body {
flex-grow: 1;
}
.mx_GroupView_rooms {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 200px;
user-select: none;
}
.mx_GroupView h3 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-bottom: 10px;
}
.mx_GroupView_rooms_header .mx_AccessibleButton {
padding-left: 14px;
margin-bottom: 14px;
height: 24px;
}
.mx_GroupView_group {
border-top: 1px solid $primary-hairline-color;
}
.mx_GroupView_group_disabled {
opacity: 0.3;
pointer-events: none;
}
.mx_GroupView_rooms_header_addRow_button {
display: inline-block;
}
.mx_GroupView_rooms_header_addRow_button object {
pointer-events: none;
}
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
line-height: 24px;
padding-left: 28px;
color: $accent-color;
}
.mx_GroupView_rooms .mx_RoomDetailList {
flex-grow: 1;
border-top: 1px solid $primary-hairline-color;
padding-top: 10px;
word-break: break-word;
}
.mx_GroupView .mx_RoomView_messageListWrapper {
justify-content: flex-start;
}
.mx_GroupView_membershipSection {
color: $greyed-fg-color;
margin-top: 10px;
}
.mx_GroupView_membershipSubSection {
justify-content: space-between;
display: flex;
}
.mx_GroupView_membershipSection_description {
/* To match textButton */
line-height: 34px;
}
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
margin-right: 10px;
}
.mx_GroupView_membershipSection .mx_GroupView_textButton {
margin-right: 0px;
margin-top: 0px;
margin-left: 8px;
}
.mx_GroupView_memberSettings_toggle label {
cursor: pointer;
user-select: none;
}
.mx_GroupView_memberSettings input {
margin-right: 6px;
}
.mx_GroupView_featuredThings {
margin-top: 20px;
}
@ -142,16 +261,64 @@ limitations under the License.
margin-top: 10px;
}
.mx_GroupView_featuredThings_container {
display: flex;
}
.mx_GroupView_featuredThings_addButton,
.mx_GroupView_featuredThing {
cursor: pointer;
display: table-cell;
text-align: center;
width: 100px;
margin: 0px 20px;
}
.mx_GroupView_featuredThing {
position: relative;
}
.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
position: absolute;
top: -7px;
right: 11px;
opacity: 0.4;
}
.mx_GroupView_featuredThing .mx_BaseAvatar {
/* To prevent misalignment with mx_TintableSvg (in addButton) */
vertical-align: initial;
}
.mx_GroupView_featuredThings_addButton object {
pointer-events: none;
}
.mx_GroupView_featuredThing_name {
word-wrap: break-word;
}
.mx_GroupView_uploadInput {
display: none;
}
.mx_GroupView_editLongDesc {
.mx_GroupView_body .gm-scroll-view > *{
margin: 11px 50px 0px 68px;
}
.mx_GroupView_groupDesc textarea {
width: 100%;
max-width: 100%;
height: 150px;
}
.mx_GroupView_groupDesc_placeholder {
background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color;
border-radius: 10px;
text-align: center;
cursor: pointer;
padding: 100px 20px;
margin: 20px 0px;
}

13
src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss
View file

@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LoginBox {
min-height: 24px;
height: unset !important;
padding-top: 13px !important;
padding-bottom: 14px !important;
}
.mx_LoginBox_loginButton_wrapper {
text-align: center;
width: 100%;
@ -21,13 +28,13 @@ limitations under the License.
.mx_LoginBox_loginButton,
.mx_LoginBox_registerButton {
margin-top: -8px;
margin-top: 3px;
height: 40px;
border: 0px;
border-radius: 40px;
margin-left: 4px;
margin-right: 4px;
width: 80px;
min-width: 80px;
background-color: $accent-color;
color: $primary-bg-color;
@ -35,4 +42,6 @@ limitations under the License.
cursor: pointer;
font-size: 15px;
padding: 0 11px;
word-break: break-word;
}

143
src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
View file

@ -14,31 +14,138 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MyGroups_joinCreateBox {
display: table;
.mx_MyGroups {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.mx_MyGroups .mx_RoomHeader_simpleHeader {
margin-left: 0px;
}
.mx_MyGroups_header {
/* Keep mid-point of create button aligned with icon in page header */
margin-left: 2px;
display: flex;
flex-wrap: wrap;
}
.mx_MyGroups_headerCard {
flex: 1 0 50%;
margin-bottom: 30px;
min-width: 400px;
display: flex;
align-items: center;
}
.mx_MyGroups_createBox, .mx_MyGroups_joinBox {
display: table-cell;
width: 40%;
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
margin-right: 13px;
height: 50px;
}
.mx_MyGroups_joinCreateHeader {
font-weight: bold;
margin-bottom: 10px;
}
.mx_MyGroups_joinCreateButton {
float: left;
margin: 10px;
}
.mx_MyGroups_joinCreateButton object {
.mx_MyGroups_headerCard_button object {
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
pointer-events: none;
}
.mx_MyGroups_content {
clear: left;
.mx_MyGroups_headerCard_header {
font-weight: bold;
margin-bottom: 10px;
}
.mx_MyGroups_headerCard_content {
padding-right: 15px;
}
/* Until the button is wired up */
.mx_MyGroups_joinBox {
visibility: hidden;
/* When joinBox wraps onto its own row, it should take up zero height so
that there isn't an awkward gap between MyGroups_createBox and
MyGroups_content.
*/
height: 0px;
margin: 0px;
}
.mx_MyGroups_content {
margin-left: 2px;
flex: 1 0 0;
display: flex;
flex-direction: column;
}
.mx_MyGroups_content h3 {
margin-bottom: 10px;
}
.mx_MyGroups_placeholder {
background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color;
line-height: 400px;
border-radius: 10px;
text-align: center;
}
.mx_MyGroups_joinedGroups .gm-scroll-view {
border-top: 1px solid $primary-hairline-color;
overflow-x: hidden;
display: flex;
flex-direction: row;
flex-flow: wrap;
align-content: flex-start;
}
.mx_MyGroups_joinedGroups .gm-scroll-view .mx_GroupTile {
min-width: 300px;
max-width: 33%;
flex: 1 0 300px;
height: 75px;
margin: 10px 0px;
display: flex;
align-items: flex-start;
cursor: pointer;
}
.mx_GroupTile_profile {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.mx_GroupTile_profile h3.mx_GroupTile_name,
.mx_GroupTile_profile .mx_GroupTile_groupId,
.mx_GroupTile_profile .mx_GroupTile_desc {
padding-right: 10px;
}
.mx_GroupTile_profile h3.mx_GroupTile_name {
margin: 0px;
font-size: 15px;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 13px;
}
.mx_GroupTile_profile .mx_GroupTile_desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
max-height: 36px;
overflow: hidden;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
opacity: 0.7;
}

10
src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
View file

@ -150,6 +150,16 @@ limitations under the License.
display: block;
}
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: 50px;
color: $primary-fg-color;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_RoomStatusBar {
min-height: 40px;

43
src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
View file

@ -68,7 +68,7 @@ limitations under the License.
min-width: 0px;
max-width: 960px;
width: 100%;
margin: auto;
margin: 0px auto;
overflow: auto;
border-bottom: 1px solid $primary-hairline-color;
@ -80,17 +80,32 @@ limitations under the License.
max-width: 1920px ! important;
}
.mx_RoomView_topUnreadMessagesBar {
.mx_RoomView_body {
order: 3;
flex: 1 1 0;
flex-direction: column;
display: flex;
}
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
order: 1;
}
.mx_RoomView_body .mx_RoomView_messagePanel {
order: 2;
}
.mx_RoomView_body .mx_RoomView_statusArea {
order: 3;
}
.mx_RoomView_messagePanel {
.mx_RoomView_body .mx_MessageComposer {
order: 4;
}
flex: 1 1 0;
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
}
@ -131,18 +146,6 @@ limitations under the License.
clear: both;
}
.mx_RoomView_invitePrompt {
order: 2;
min-width: 0px;
max-width: 960px;
width: 100%;
margin: auto;
margin-top: 12px;
margin-bottom: 12px;
}
li.mx_RoomView_myReadMarker_container {
height: 0px;
margin: 0px;
@ -160,8 +163,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_statusArea {
order: 5;
width: 100%;
flex: 0 0 auto;
@ -236,8 +237,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView .mx_MessageComposer {
order: 6;
width: 100%;
flex: 0 0 auto;
margin-right: 2px;

20
src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
View file

@ -80,6 +80,16 @@ limitations under the License.
cursor: pointer;
}
.mx_UserSettings_button.mx_UserSettings_buttonSmall {
height: 36px;
padding: 4px;
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
margin-right: 5px;
line-height: 12px;
}
.mx_UserSettings_button.danger {
background-color: $warning-color;
}
@ -242,6 +252,16 @@ input.mx_UserSettings_phoneNumberField {
display: none;
}
.mx_UserSettings_avatarPicker_imgContainer {
display: inline-block;
}
.mx_UserSettings_avatarPicker_remove {
display: inline-block;
float: right;
margin-right: -15px;
}
.mx_UserSettings_advanced_spoiler,
.mx_UserSettings_link {
cursor: pointer;

8
src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
View file

@ -67,6 +67,10 @@ limitations under the License.
margin-bottom: 14px;
}
.mx_Login_field_disabled {
opacity: 0.3;
}
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
@ -87,6 +91,10 @@ limitations under the License.
color: $accent-fg-color;
}
.mx_Login_submit:disabled {
opacity: 0.3;
}
.mx_Login_label {
font-size: 13px;
opacity: 0.8;

11
src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
View file

@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ChatInviteDialog {
/* XXX: padding-left is on mx_Dialog but padding-right has subsequently
* been added on other dialogs. Surely all our dialogs should have consistent
* right hand padding?
*/
padding-right: 58px;
}
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input,
.mx_ChatInviteDialog_input:focus
@ -52,9 +60,8 @@ limitations under the License.
}
.mx_ChatInviteDialog_error {
position: absolute;
margin-top: 10px;
color: $warning-color;
line-height: 36px;
}
.mx_ChatInviteDialog_cancel {

27
src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss
View file

@ -33,3 +33,30 @@ limitations under the License.
background-color: $primary-bg-color;
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0px;
}
.mx_CreateGroupDialog_input_group {
display: flex;
}
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
border: 1px solid $input-border-color;
text-align: center;
}
.mx_CreateGroupDialog_prefix {
border-right: 0px;
border-radius: 3px 0px 0px 3px;
}
.mx_CreateGroupDialog_suffix {
border-left: 0px;
border-radius: 0px 3px 3px 0px;
}

33
src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateRoomDialog.scss Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CreateRoomDialog_details_summary {
outline: none;
}
.mx_CreateRoomDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_CreateRoomDialog_input {
font-size: 15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
}

25
src/skins/vector/css/matrix-react-sdk/views/dialogs/_GroupAddressPicker.scss Normal file
View file

@ -0,0 +1,25 @@
/*
Copyright 2017 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GroupAddressPicker_checkboxContainer{
margin-top: 10px;
display: flex;
}
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
/* Stop flex from shrinking the checkbox */
width: 20px;
}

18
src/skins/vector/css/matrix-react-sdk/views/dialogs/_QuestionDialog.scss Normal file
View file

@ -0,0 +1,18 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_QuestionDialog {
padding-right: 58px;
}

4
src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
View file

@ -18,6 +18,10 @@ limitations under the License.
position: relative;
}
.mx_Dropdown_disabled {
opacity: 0.3;
}
.mx_Dropdown_input {
position: relative;
border-radius: 3px;

62
src/skins/vector/css/matrix-react-sdk/views/elements/_EditableItemList.scss Normal file
View file

@ -0,0 +1,62 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_EditableItemList {
margin-top: 12px;
margin-bottom: 0px;
}
.mx_EditableItem {
display: flex;
margin-left: 56px;
}
.mx_EditableItem .mx_EditableItem_editable {
border: 0px;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
max-width: 400px;
margin-bottom: 16px;
}
.mx_EditableItem .mx_EditableItem_editable:focus {
border-bottom: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
.mx_EditableItem .mx_EditableItem_editablePlaceholder {
color: $settings-grey-fg-color;
}
.mx_EditableItem .mx_EditableItem_addButton,
.mx_EditableItem .mx_EditableItem_removeButton {
padding-left: 0.5em;
position: relative;
cursor: pointer;
visibility: hidden;
}
.mx_EditableItem:hover .mx_EditableItem_addButton,
.mx_EditableItem:hover .mx_EditableItem_removeButton {
visibility: visible;
}
.mx_EditableItemList_label {
margin-bottom: 8px;
}

10
src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
View file

@ -3,7 +3,8 @@
// --Matthew
.mx_UserPill,
.mx_RoomPill {
.mx_RoomPill,
.mx_AtRoomPill {
border-radius: 16px;
display: inline-block;
height: 20px;
@ -24,7 +25,9 @@
padding-right: 5px;
}
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me {
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color;
background-color: $mention-user-pill-bg-color;
padding-right: 5px;
@ -39,7 +42,8 @@
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar {
.mx_RoomPill .mx_BaseAvatar,
.mx_AtRoomPill .mx_BaseAvatar {
position: relative;
left: -3px;
top: 2px;

51
src/skins/vector/css/matrix-react-sdk/views/elements/_ToolTipButton.scss Normal file
View file

@ -0,0 +1,51 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ToolTipButton {
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
border: 2px solid $neutral-badge-color;
border-radius: 20px;
color: $neutral-badge-color;
transition: opacity 0.2s ease-in;
opacity: 0.6;
line-height: 11px;
text-align: center;
cursor: pointer;
}
.mx_ToolTipButton:hover {
opacity: 1.0;
}
.mx_ToolTipButton_container {
position: relative;
top: -18px;
left: 4px;
}
.mx_ToolTipButton_helpText {
width: 200px;
text-align: center;
line-height: 17px !important;
}

21
src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss Normal file
View file

@ -0,0 +1,21 @@
/*
Copyright 2017 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GroupRoomTile {
position: relative;
color: $primary-fg-color;
cursor: pointer;
}

27
src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
View file

@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AppsDrawer {
margin-bottom: 3px;
}
// .mx_AppsDrawer {
// }
.mx_AppsContainer {
display: flex;
@ -51,11 +50,13 @@ limitations under the License.
.mx_AppTile {
max-width: 960px;
width: 50%;
margin: 0 5px 2px 0;
margin-right: 5px;
border: 1px solid $primary-hairline-color;
border-radius: 2px;
// height: 350px;
// display: inline-block;
}
.mx_AppTile:last-child {
margin-right: 1px;
}
.mx_AppTile_non_native {
@ -73,12 +74,16 @@ limitations under the License.
// display: inline-block;
}
.mx_AppTile, .mx_AppTileFullWidth {
margin-top: 3px;
}
.mx_AppTileMenuBar {
// height: 15px;
margin: 0;
padding: 2px 10px;
// background-color: $e2e-verified-color;
// border-bottom: 1px solid $primary-hairline-color;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
}
@ -120,8 +125,8 @@ limitations under the License.
display: block;
}
.mx_CloseAppWidget {
}
// .mx_CloseAppWidget {
// }
.mx_AppTileMenuBarWidgetPadding {
margin-right: 5px;
@ -239,3 +244,7 @@ form.mx_Custom_Widget_Form div {
align-items: center;
font-weight: bold;
}
.mx_AppLoading iframe {
display: none;
}

10
src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
View file

@ -28,7 +28,8 @@ limitations under the License.
width: 26px;
}
.mx_EntityTile_avatar {
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
@ -48,12 +49,15 @@ limitations under the License.
right: 6px;
}
.mx_EntityTile_name {
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
@ -64,8 +68,6 @@ limitations under the License.
.mx_EntityTile_name_hover {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_EntityTile_chevron {

17
src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
View file

@ -45,7 +45,6 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */
overflow-y: hidden;
@ -57,6 +56,22 @@ limitations under the License.
line-height: 22px;
}
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
opacity: 0.5;
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
}
.mx_EventTile .mx_SenderProfile .mx_Flair img {
vertical-align: -2px;
margin-right: 2px;
border-radius: 8px;
}
.mx_EventTile .mx_MessageTimestamp {
display: block;
visibility: hidden;

16
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
View file

@ -94,3 +94,19 @@ limitations under the License.
cursor: pointer;
}
.mx_MemberInfo label {
font-size: 13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
display: inline-block;
max-width: 180px;
vertical-align: text-top;
}
.mx_MemberInfo input[type="radio"] {
vertical-align: -2px;
margin-right: 5px;
margin-left: 8px;
}

17
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
View file

@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberList {
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
height: 100%;
margin-top: 12px;
@ -44,7 +46,9 @@ limitations under the License.
flex: 1 1 0px;
}
.mx_MemberList_query {
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid $input-border-color;
@ -57,13 +61,17 @@ limitations under the License.
width: 189px;
}
.mx_MemberList_query::-moz-placeholder {
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder {
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
@ -84,6 +92,7 @@ limitations under the License.
}
*/
.mx_GroupMemberList_invited h2,
.mx_MemberList_invited h2 {
text-transform: uppercase;
color: $h3-color;

67
src/skins/vector/css/matrix-react-sdk/views/rooms/_PinnedEventTile.scss Normal file
View file

@ -0,0 +1,67 @@
/*
Copyright 2017 Travis Ralston
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_PinnedEventTile {
min-height: 40px;
margin-bottom: 5px;
width: 100%;
border-radius: 5px; // for the hover
}
.mx_PinnedEventTile:hover {
background-color: $event-selected-color;
}
.mx_PinnedEventTile .mx_PinnedEventTile_sender {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: block;
padding-bottom: 3px;
}
.mx_PinnedEventTile .mx_EventTile_content {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
}
.mx_PinnedEventTile .mx_BaseAvatar {
float: left;
margin-right: 10px;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block;
}
.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile_unpinButton {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.mx_PinnedEventTile_gotoButton {
display: inline-block;
font-size: 0.8em;
}

37
src/skins/vector/css/matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2017 Travis Ralston
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_PinnedEventsPanel {
border-top: 1px solid $primary-hairline-color;
}
.mx_PinnedEventsPanel_body {
max-height: 300px;
overflow-y: auto;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_header {
margin: 0;
padding-top: 8px;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_cancel {
margin: 12px;
float: right;
display: inline-block;
}

40
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
View file

@ -60,6 +60,10 @@ limitations under the License.
padding-right: 12px;
}
.mx_RoomHeader_textButton_danger {
background-color: $warning-color;
}
.mx_RoomHeader_cancelButton {
order: 2;
cursor: pointer;
@ -138,10 +142,17 @@ limitations under the License.
.mx_RoomHeader_name,
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
.mx_RoomHeader_avatarPicker_edit {
.mx_RoomHeader_avatarPicker_edit,
.mx_RoomHeader_avatarPicker_remove {
cursor: pointer;
}
.mx_RoomHeader_avatarPicker_remove {
position: absolute;
top: -11px;
right: -9px;
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: $accent-color;
}
@ -165,7 +176,7 @@ limitations under the License.
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 42px;
max-height: 38px;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px;
@ -174,6 +185,7 @@ limitations under the License.
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
column-width: 960px;
}
.mx_RoomHeader_avatar {
@ -187,8 +199,12 @@ limitations under the License.
object-fit: cover;
}
.mx_RoomHeader_avatarPicker {
margin-top: 23px;
position: relative;
}
.mx_RoomHeader_avatarPicker_edit {
position: absolute;
margin-left: 16px;
margin-top: 4px;
}
@ -217,3 +233,21 @@ limitations under the License.
.mx_RoomHeader_voipButtons {
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
position: relative;
}
.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}

26
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
View file

@ -21,9 +21,7 @@ limitations under the License.
}
.mx_RoomSettings_leaveButton,
.mx_RoomSettings_unbanButton,
.mx_RoomSettings_integrationsButton,
.mx_RoomSettings_integrationsButton_error {
.mx_RoomSettings_unbanButton {
position: relative;
height: 36px;
background-color: $accent-color;
@ -36,25 +34,37 @@ limitations under the License.
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomSettings_integrationsButton_error {
position: relative;
cursor: not-allowed;
}
.mx_RoomSettings_integrationsButton_error img {
position: absolute;
right: -5px;
top: -5px;
}
.mx_RoomSettings_leaveButton,
.mx_RoomSettings_integrationsButton,
.mx_RoomSettings_integrationsButton_error {
float: right;
}
.mx_RoomSettings_integrationsButton_error {
pointer: not-allowed;
.mx_RoomSettings_integrationsButton_error .mx_RoomSettings_integrationsButton_errorPopup {
display: none;
}
.mx_RoomSettings_integrationsButton_error:hover .mx_RoomSettings_integrationsButton_errorPopup {
display: inline;
}
.mx_RoomSettings_integrationsButton_errorPopup {
position: absolute;
top: 110%;
left: -26%;
width: 150%;
left: -125%;
width: 348%;
padding: 2%;
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: $accent-color;
color: $accent-fg-color;
text-align: center;
}
.mx_RoomSettings_unbanButton {
display: inline;

6
src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
View file

@ -42,4 +42,8 @@ limitations under the License.
.mx_VideoView_localVideoFeed video {
width: auto;
height: 100%;
}
}
.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
transform: scale(-1, 1);
}

8
src/skins/vector/css/themes/_base.scss
View file

@ -22,6 +22,14 @@ $warning-color: #ff0064;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: #ff0064; // $warning-color
$pinned-color: #888;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
$preview-bar-bg-color: #f7f7f7;
// left-panel style muted accent color

6
src/skins/vector/css/themes/_dark.scss
View file

@ -20,6 +20,9 @@ $focus-brightness: 200%;
// red warning colour
$warning-color: #ff0064;
// groups
$info-plinth-bg-color: #454545;
$other-user-pill-bg-color: rgba(255, 255, 255, 0.1);
$preview-bar-bg-color: #333;
@ -131,6 +134,9 @@ $progressbar-color: #000;
}
// markdown overrides:
.mx_EventTile_content .markdown-body pre:hover {
border-color: #808080 !important; // inverted due to rules below
}
.mx_EventTile_content .markdown-body {
pre, code {
filter: invert(1);

13
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View file

@ -78,6 +78,7 @@ limitations under the License.
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel .mx_GroupRoomList,
.mx_RightPanel_blank {
order: 2;
flex: 1 1 0;
@ -93,30 +94,26 @@ limitations under the License.
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 35px;
font-size: 14px;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon {
display: inline-block;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
display: inline-block;
vertical-align: top;
padding-left: 10px
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout {

1
src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
View file

@ -100,6 +100,7 @@ limitations under the License.
display: inline;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
height: 15px;
border-radius: 11px;
background-color: $plinth-bg-color;

166
src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss Normal file
View file

@ -0,0 +1,166 @@
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
.mx_DevTools_label_left {
float: left;
}
.mx_DevTools_label_right {
float: right;
}
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow
{
display: table-row;
}
.mx_DevTools_inputLabelCell
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_inputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
.mx_DevTools_inputCell input
{
display: inline-block;
border: 0;
border-bottom: 1px solid $input-underline-color;
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_DevTools_tgl {
display: none;
// add default box-sizing for this scope
&,
&:after,
&:before,
& *,
& *:after,
& *:before,
& + .mx_DevTools_tgl-btn {
box-sizing: border-box;
&::selection {
background: none;
}
}
+ .mx_DevTools_tgl-btn {
outline: 0;
display: block;
width: 7em;
height: 2em;
position: relative;
cursor: pointer;
user-select: none;
&:after,
&:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
&:after {
left: 0;
}
&:before {
display: none;
}
}
&:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
}
.mx_DevTools_tgl-flip {
+ .mx_DevTools_tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
perspective: 100px;
&:after,
&:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
top: 0;
left: 0;
backface-visibility: hidden;
border-radius: 4px;
}
&:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
&:before {
background: #FF3A19;
content: attr(data-tg-off);
}
&:active:before {
transform: rotateY(-20deg);
}
}
&:checked + .mx_DevTools_tgl-btn {
&:before {
transform: rotateY(180deg);
}
&:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
&:active:after {
transform: rotateY(20deg);
}
}
}

24
src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img {
margin: 0px 6px;
vertical-align: -3px;
}