Merge remote-tracking branch 'origin/experimental' into dbkr/sas

This commit is contained in:
David Baker
2019-01-23 17:32:18 +00:00
172 changed files with 1885 additions and 661 deletions
+2 -2
View File
@@ -160,7 +160,7 @@ textarea {
padding: 0 58px 36px;
width: 60%;
max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
max-height: 80%;
overflow-y: auto;
}
@@ -171,7 +171,7 @@ textarea {
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-background-bg-color;
background-color: $dialog-backdrop-color;
opacity: 0.8;
}
+15 -4
View File
@@ -8,7 +8,6 @@
@import "./structures/_GroupView.scss";
@import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss";
@import "./structures/_LoginBox.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NotificationPanel.scss";
@@ -18,12 +17,21 @@
@import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss";
@import "./structures/login/_Login.scss";
@import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
@import "./views/auth/_AuthFooter.scss";
@import "./views/auth/_AuthHeader.scss";
@import "./views/auth/_AuthHeaderLogo.scss";
@import "./views/auth/_AuthPage.scss";
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_ServerConfig.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@@ -49,6 +57,7 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@@ -59,6 +68,7 @@
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_HexVerify.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@@ -75,8 +85,6 @@
@import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss";
@import "./views/groups/_GroupUserSettings.scss";
@import "./views/login/_InteractiveAuthEntryComponents.scss";
@import "./views/login/_ServerConfig.scss";
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_MEmoteBody.scss";
@@ -95,6 +103,7 @@
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberDeviceInfo.scss";
@import "./views/rooms/_MemberInfo.scss";
@@ -122,6 +131,8 @@
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/tabs/_GeneralSettingsTab.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss";
+1 -1
View File
@@ -54,7 +54,7 @@ limitations under the License.
&:before {
background-color: $accent-fg-color;
mask: url('../../img/icons-create-room.svg');
mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
+5 -5
View File
@@ -105,7 +105,7 @@ limitations under the License.
.mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-color;
color: $roomsublist-background;
background-image: url('../../img/icons-room-add.svg');
background-image: url('$(res)/img/icons-room-add.svg');
background-repeat: no-repeat;
background-position: center;
border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
.mx_RoomSubList_chevron {
pointer-events: none;
background-image: url('../../img/topleft-chevron.svg');
background-image: url('$(res)/img/topleft-chevron.svg');
background-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
@@ -155,7 +155,7 @@ limitations under the License.
position: sticky;
left: 0;
right: 0;
height: 30px;
height: 35px;
content: "";
display: block;
z-index: 100;
@@ -163,10 +163,10 @@ limitations under the License.
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -30px;
margin-top: -35px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -30px;
margin-bottom: -35px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
+6 -2
View File
@@ -116,7 +116,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner {
flex: 1;
background-image: url('../../img/typing-indicator-2x.gif');
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-position: center 367px;
background-size: 25px;
background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: $greyed-fg-color;
mask: url('../../img/feather-icons/search-input.svg');
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
@@ -171,6 +171,10 @@ limitations under the License.
.mx_RoomView_MessageList {
list-style-type: none;
padding: 18px;
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
box-sizing: border-box;
}
.mx_RoomView_MessageList li {
+1 -1
View File
@@ -16,7 +16,7 @@ limitations under the License.
.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url('../../img/icons-close.svg');
background-image: url('$(res)/img/icons-close.svg');
background-repeat: no-repeat;
width: 16px;
height: 16px;
+92
View File
@@ -0,0 +1,92 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 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_TabbedView {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100%;
}
.mx_TabbedView_tabLabels {
width: 136px;
height: 100%;
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
height: 20px;
margin-bottom: 6px;
position: relative;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
// TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange;
}
.mx_TabbedView_maskedIcon {;
margin-left: 6px;
margin-right: 9px;
width: 14px;
height: 14px;
display: inline-block;
}
.mx_TabbedView_maskedIcon:before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
mask-position: center;
content: '';
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
margin-left: 70px;
flex-grow: 1;
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
min-width: 560px;
}
+2 -2
View File
@@ -130,12 +130,12 @@ limitations under the License.
}
.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
mask: url('../../img/feather-icons/users.svg');
mask: url('$(res)/img/feather-icons/users.svg');
mask-position: center 11px;
}
.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
mask: url('../../img/feather-icons/life-buoy.svg');
mask: url('$(res)/img/feather-icons/life-buoy.svg');
mask-position: center 9px;
}
+1 -1
View File
@@ -173,7 +173,7 @@ limitations under the License.
padding: 0px;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-family: $font-family;
font-size: 16px;
}
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 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.
@@ -14,41 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Login {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_Login_box {
width: 300px;
min-height: 450px;
padding-top: 50px;
padding-bottom: 50px;
margin: auto;
}
.mx_Login_logo {
text-align: center;
height: 150px;
margin-bottom: 45px;
}
.mx_Login_logo img {
max-height: 100%
}
.mx_Login_support {
text-align: center;
font-size: 13px;
@@ -115,19 +81,6 @@ limitations under the License.
color: $primary-fg-color;
}
.mx_Login_links {
display: block;
text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_links a:link {
color: $primary-fg-color;
}
.mx_Login_prompt {
padding-top: 15px;
padding-bottom: 15px;
+23
View File
@@ -0,0 +1,23 @@
/*
Copyright 2019 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_AuthBody {
width: 500px;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
padding: 25px 60px;
box-sizing: border-box;
}
@@ -1,5 +1,6 @@
/*
Copyright 2017 OpenMarket Ltd
Copyright 2019 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.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LoginBox {
.mx_AuthButtons {
min-height: 24px;
height: unset !important;
padding-top: 13px !important;
@@ -22,13 +23,13 @@ limitations under the License.
order: 4;
}
.mx_LoginBox_loginButton_wrapper {
.mx_AuthButtons_loginButton_wrapper {
text-align: center;
width: 100%;
}
.mx_LoginBox_loginButton,
.mx_LoginBox_registerButton {
.mx_AuthButtons_loginButton,
.mx_AuthButtons_registerButton {
margin-top: 3px;
height: 40px;
border: 0px;
+30
View File
@@ -0,0 +1,30 @@
/*
Copyright 2019 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_AuthFooter {
text-align: center;
width: 100%;
font-size: 14px;
opacity: 0.72;
margin: 20px 0;
}
.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
color: $accent-fg-color;
margin: 0 22px;
}
+21
View File
@@ -0,0 +1,21 @@
/*
Copyright 2019 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_AuthHeader {
width: 206px;
padding: 25px 50px;
box-sizing: border-box;
}
+23
View File
@@ -0,0 +1,23 @@
/*
Copyright 2019 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_AuthHeaderLogo {
margin-top: 15px;
}
.mx_AuthHeaderLogo img {
width: 100%;
}
+40
View File
@@ -0,0 +1,40 @@
/*
Copyright 2019 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_AuthPage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-color: $authpage-bg-color;
}
.mx_AuthPage h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_AuthPage_modal {
display: flex;
margin: 100px auto auto;
border-radius: 4px;
// Not currently supported in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
backdrop-filter: blur(10px);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}
+1 -1
View File
@@ -61,7 +61,7 @@ limitations under the License.
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-family: $font-family;
font-size: 16px;
}
@@ -0,0 +1,63 @@
.mx_UserSettingsDialog_header {
font-size: 24px;
display: block;
text-align: center;
color: $dialog-title-fg-color;
margin-top: 16px;
margin-bottom: 24px;
padding: 0;
}
.mx_UserSettingsDialog_close {
position: absolute;
top: 16px;
right: 25px;
}
.mx_UserSettingsDialog_closeIcon {
width: 16px;
height: 16px;
display: inline-block;
}
.mx_UserSettingsDialog_closeIcon:before {
mask: url('$(res)/img/feather-icons/cancel.svg');
background-color: $dialog-close-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// ICONS
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
mask-image: url('$(res)/img/feather-icons/sliders.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
mask-image: url('$(res)/img/feather-icons/help-circle.svg');
}
@@ -24,7 +24,7 @@ limitations under the License.
padding-bottom: 10px;
&:before {
mask: url("../../img/e2e/lock-warning.svg");
mask: url("$(res)/img/e2e/lock-warning.svg");
mask-repeat: no-repeat;
background-color: $primary-fg-color;
content: "";
@@ -21,3 +21,24 @@ limitations under the License.
.mx_AccessibleButton {
cursor: pointer;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
.mx_AccessibleButton_hasKind {
padding: 10px 25px;
text-align: center;
border-radius: 4px;
display: inline-block;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}
@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding-right: 10px;
background-color: $plinth-bg-color;
border-radius: 3px;
background-image: url('../../img/icon-return.svg');
background-image: url('$(res)/img/icon-return.svg');
background-position: 8px 70%;
background-repeat: no-repeat;
text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
.mx_DirectorySearchBox_clear {
display: inline-block;
vertical-align: middle;
background: url('../../img/icon_context_delete.svg');
background: url('$(res)/img/icon_context_delete.svg');
background-position: 0 50%;
background-repeat: no-repeat;
width: 15px;
+81
View File
@@ -0,0 +1,81 @@
/*
Copyright 2019 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.
*/
/* TODO: Consider unifying with general input styles in _dharma.scss */
.mx_Field {
position: relative;
margin: 1em 0;
}
.mx_Field input,
.mx_Field select {
font-weight: normal;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
}
.mx_Field input:focus,
.mx_Field select:focus {
outline: 0;
border-color: $input-focused-border-color;
}
.mx_Field input::placeholder {
transition: color 0.25s ease-in 0s;
color: transparent;
}
.mx_Field input:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s;
color: $greyed-fg-color;
}
.mx_Field label {
transition:
font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
position: absolute;
left: 0px;
top: 0px;
margin: 7px 8px;
padding: 2px;
}
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field select:focus + label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
top: -14px;
background-color: $field-focused-label-bg-color;
}
.mx_Field input:focus + label,
.mx_Field select:focus + label {
color: $input-focused-border-color;
}
+1 -1
View File
@@ -50,7 +50,7 @@ limitations under the License.
max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain;
/* background-image: url('../../img/trans.png'); */
/* background-image: url('$(res)/img/trans.png'); */
pointer-events: all;
}
+1 -1
View File
@@ -22,7 +22,7 @@ limitations under the License.
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-image: url('$(res)/img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
+2 -2
View File
@@ -291,8 +291,8 @@ limitations under the License.
}
/* always override hidden attribute for blocked and warning */
.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
.mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
display: block;
}
@@ -0,0 +1,69 @@
/*
Copyright 2019 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.
*/
@charset "utf-8";
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
// 12 because height is 50 but button is only 38 = 12+(50-38) = 24
bottom: 12px;
right: 24px;
width: 38px;
// give it a fixed height so the badge doesn't make
// it taller and pop upwards when visible
height: 50px;
text-align: center;
}
.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 12px;
line-height: 14px;
text-align: center;
// to be able to get it centered
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $secondary-accent-color;
background-color: $warning-color;
}
.mx_JumpToBottomButton_scrollDown {
position: relative;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
}
+1 -1
View File
@@ -83,7 +83,7 @@ limitations under the License.
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('../../img/feather-icons/user-add.svg');
background-image: url('$(res)/img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
+4 -3
View File
@@ -66,15 +66,16 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_errorPopup {
position: absolute;
top: 110%;
left: -125%;
width: 348%;
padding: 2%;
left: -275%;
width: 550%;
padding: 30%;
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: $accent-color;
color: $accent-fg-color;
text-align: center;
z-index: 1000;
}
.mx_RoomSettings_unbanButton {
display: inline;
+1 -1
View File
@@ -29,7 +29,7 @@ limitations under the License.
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
+2 -2
View File
@@ -32,7 +32,7 @@ limitations under the License.
width: 37px;
height: 37px;
background-color: $accent-color;
mask: url('../../img/feather-icons/search-input.svg');
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
}
@@ -55,7 +55,7 @@ limitations under the License.
.mx_SearchBar_cancel {
background-color: $warning-color;
mask: url('../../img/cancel.svg');
mask: url('$(res)/img/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
@@ -54,7 +54,7 @@ limitations under the License.
position: absolute;
width: 38px;
height: 38px;
mask: url('../../img/icon-jump-to-first-unread.svg');
mask: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
+1 -1
View File
@@ -61,7 +61,7 @@ limitations under the License.
}
.mx_WhoIsTypingTile_label > span {
background-image: url('../../img/typing-indicator-2x.gif');
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
@@ -0,0 +1,25 @@
.mx_GeneralSettingsTab_profile {
display: flex;
}
.mx_GeneralSettingsTab_profileControls {
flex-grow: 1;
}
.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralSettingsTab_profileAvatar {
width: 88px;
height: 88px;
margin-left: 13px;
}
.mx_GeneralSettingsTab_profileAvatar div {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
background-color: #ccc;
}
@@ -0,0 +1,17 @@
.mx_SettingsTab_heading {
font-size: 20px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_SettingsTab_subheading {
font-size: 14px;
display: block;
font-family: $font-family-semibold;
color: $primary-fg-color;
margin-bottom: 10px;
}
.mx_SettingsTab_section {
margin-top: 10px;
}
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="#" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#9fa9ba" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<circle cx="6" cy="6" r="6"/>
<path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 352 B

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<rect width="11" height="6.6" y="5.4" rx="1.2"/>
<path d="M2.444 5.4V3c0-1.657 1.368-3 3.056-3s3.056 1.343 3.056 3v2.4"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 369 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.636 11V7.111M2.636 4.889V1M7 11V6M7 3.778V1M11.364 11V8.222M11.364 6V1M1 7.111h3.273M5.364 3.778h3.272M9.727 8.222H13"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 345 B

+32
View File
@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
width="18.666187"
height="8.7375822"
viewBox="0 0 18.666187 8.7375818"
version="1.1"
style="fill:none">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path2-8-3"
style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 17.909095,0.75599092 9.3330939,7.987602 0.75709259,0.75599092" />
</svg>

After

Width:  |  Height:  |  Size: 1016 B

+2 -2
View File
@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message_dark.svg";
$copy-button-url: "../../img/icon_copy_message_dark.svg";
$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+2 -1
View File
@@ -1,4 +1,5 @@
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_base.scss";
@import "_dark.scss";
@import "../../../../res/css/_components.scss";
+44 -11
View File
@@ -1,5 +1,3 @@
@import "_fonts.scss";
// XXX: check this?
/* Nunito lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
@@ -7,6 +5,7 @@
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
@@ -73,6 +72,10 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
@@ -94,6 +97,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
@@ -171,8 +179,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg";
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -184,6 +192,20 @@ $lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;
@@ -191,6 +213,10 @@ $room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
/*** form elements ***/
// .mx_textinput is a container for a text input
@@ -200,8 +226,8 @@ $memberstatus-placeholder-color: $roomtile-name-color;
.mx_MatrixChat {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
display: block;
margin: 9px;
@@ -245,8 +271,8 @@ input[type=password] {
}
.dark-panel {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
@@ -255,8 +281,8 @@ input[type=password] {
}
.light-panel {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
color: $input-lighter-fg-color;
background-color: $input-lighter-bg-color;
@@ -275,7 +301,7 @@ input[type=search].mx_textinput_icon {
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('../../img/feather-icons/search-input.svg');
background-image: url('$(res)/img/feather-icons/search-input.svg');
}
// dont search UI as not all browsers support it,
@@ -293,6 +319,13 @@ input[type=search]::-webkit-search-results-decoration {
.input[type=search]::-moz-placeholder {
color: #a5aab2;
}
// Override Firefox's UA style so we get a consistent look across browsers
input::placeholder,
textarea::placeholder {
opacity: initial;
}
// ***** Mixins! *****
@define-mixin mx_DialogButton {
+8 -8
View File
@@ -11,37 +11,37 @@
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 600;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 700;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
}
/*
@@ -51,14 +51,14 @@
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
+2 -1
View File
@@ -1,3 +1,4 @@
@import "../../light/css/_paths.scss";
@import "_fonts.scss";
@import "_dharma.scss";
@import "../../../../res/css/_components.scss";
+31 -4
View File
@@ -1,11 +1,10 @@
@import "_fonts.scss";
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;
@@ -68,6 +67,7 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-border-dark-color: #b8b8b8;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
@@ -75,6 +75,10 @@ $button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
$input-focused-border-color: #238cf5;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
// used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5);
@@ -90,6 +94,11 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #454545;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
@@ -162,8 +171,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg";
$edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -179,6 +188,20 @@ $imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;
@@ -186,6 +209,10 @@ $room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
// ***** Mixins! *****
@define-mixin mx_DialogButton {
+8 -8
View File
@@ -7,42 +7,42 @@
*/
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@@ -54,14 +54,14 @@
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
+3
View File
@@ -0,0 +1,3 @@
// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
// This value is overridden by external themes in `riot-web`.
$res: ../../..;
+2 -1
View File
@@ -1,3 +1,4 @@
@import "_paths.scss";
@import "_fonts.scss";
@import "_base.scss";
@import "../../../../res/css/_components.scss";