Merge remote-tracking branch 'origin/experimental' into dbkr/sas
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import "../../light/css/_paths.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "_dharma.scss";
|
||||
@import "../../../../res/css/_components.scss";
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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: ../../..;
|
||||
@@ -1,3 +1,4 @@
|
||||
@import "_paths.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "_base.scss";
|
||||
@import "../../../../res/css/_components.scss";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user