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

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into soru/spoilers

Browse source
This commit is contained in:
Sorunome 2019-08-28 20:23:24 +02:00
commit fe9ae46ffb
No known key found for this signature in database
GPG key ID: 63E31F7B5993A9C4
389 changed files with 23061 additions and 5544 deletions
Download patch file Download diff file Expand all files Collapse all files

65
res/css/_common.scss
View file

@ -104,17 +104,17 @@ input[type=text], input[type=password], textarea {
color: $primary-fg-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
/* Required by Firefox */
textarea {
font-family: $font-family;
color: $primary-fg-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
// This is used to hide the standard outline added by browsers for
// accessible (focusable) components. Not intended for buttons, but
// should be used on things like focusable containers where the outline
@ -129,6 +129,13 @@ textarea {
// appear to be part of the input
.mx_Dialog, .mx_MatrixChat {
.mx_textinput > input[type=text],
.mx_textinput > input[type=search] {
border: none;
flex: 1;
color: $primary-fg-color;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
@ -147,13 +154,6 @@ textarea {
.mx_textinput {
display: flex;
align-items: center;
> input[type=text],
> input[type=search] {
border: none;
flex: 1;
color: $primary-fg-color;
}
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
@ -166,9 +166,7 @@ textarea {
/*** panels ***/
.dark-panel {
background-color: $dark-panel-bg-color;
}
.dark-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
@ -209,25 +207,25 @@ textarea {
/* Expand thumbs on hoverover */
.gm-scrollbar {
border-radius: 5px ! important;
border-radius: 5px !important;
}
.gm-scrollbar.-vertical {
width: 6px;
transition: width 120ms ease-out ! important;
transition: width 120ms ease-out !important;
}
.gm-scrollbar.-vertical:hover,
.gm-scrollbar.-vertical:active {
width: 8px;
transition: width 120ms ease-out ! important;
transition: width 120ms ease-out !important;
}
.gm-scrollbar.-horizontal {
height: 6px;
transition: height 120ms ease-out ! important;
transition: height 120ms ease-out !important;
}
.gm-scrollbar.-horizontal:hover,
.gm-scrollbar.-horizontal:active {
height: 8px;
transition: height 120ms ease-out ! important;
transition: height 120ms ease-out !important;
}
// These are magic constants which are excluded from tinting, to let themes
@ -271,14 +269,6 @@ textarea {
justify-content: center;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 0px;
box-shadow: none;
}
.mx_Dialog {
background-color: $primary-bg-color;
color: $light-fg-color;
@ -390,7 +380,7 @@ textarea {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color ! important;
border: 1px solid $accent-color;
color: $accent-color;
background-color: $button-secondary-bg-color;
}
@ -407,7 +397,7 @@ textarea {
filter: brightness($focus-brightness);
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent-color;
min-width: 156px;
@ -425,6 +415,14 @@ textarea {
opacity: 0.7;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 0px;
box-shadow: none;
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
// These classes were brought in from the old UserSettings and are included here to avoid
// breaking the app.
@ -561,3 +559,12 @@ textarea {
.mx_Username_color8 {
color: $username-variant8-color;
}
@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
}
@define-mixin mx_Settings_tooltip {
// So it fits in the space provided by the page
max-width: 120px;
}

19
res/css/_components.scss
View file

@ -50,7 +50,6 @@
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@ -62,6 +61,7 @@
@import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_RestoreKeyBackupDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@ -70,6 +70,9 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@ -87,9 +90,9 @@
@import "./views/elements/_Field.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_MemberEventListSummary.scss";
@import "./views/elements/_MessageEditor.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_ReplyThread.scss";
@ -98,9 +101,10 @@
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_ToolTipButton.scss";
@import "./views/elements/_Tooltip.scss";
@import "./views/elements/_TooltipButton.scss";
@import "./views/elements/_Validation.scss";
@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
@ -116,7 +120,8 @@
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_ReactionDimension.scss";
@import "./views/messages/_ReactionQuickTooltip.scss";
@import "./views/messages/_ReactionTooltipButton.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@ -130,7 +135,9 @@
@import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss";
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_BasicMessageComposer.scss";
@import "./views/rooms/_E2EIcon.scss";
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@ -153,6 +160,7 @@
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SearchableEntityList.scss";
@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@ -163,6 +171,8 @@
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
@ -173,6 +183,7 @@
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";

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

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -39,7 +40,11 @@ limitations under the License.
z-index: 5001;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
.mx_ContextualMenu_right {
right: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
@ -54,19 +59,11 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
right: 1px;
.mx_ContextualMenu_left {
left: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_left {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
@ -81,19 +78,11 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
left: 1px;
.mx_ContextualMenu_top {
top: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_top {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
@ -108,19 +97,11 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
top: 1px;
.mx_ContextualMenu_bottom {
bottom: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_bottom {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}
@ -135,24 +116,6 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
bottom: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;

14
res/css/structures/_GenericErrorPage.scss
View file

@ -2,18 +2,16 @@
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.mx_GenericErrorPage_box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline;
width: 500px;
height: 200px;
min-height: 125px;
border: 1px solid #f22;
padding: 10px;
padding: 10px 10px 20px;
background-color: #fcc;
}

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

@ -24,13 +24,13 @@ limitations under the License.
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 70px */
flex: 0 0 70px;
/* Collapsed LeftPanel 50px */
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 140px;
/* TagPanel 70px + Collapsed LeftPanel 50px */
flex: 0 0 120px;
}
.mx_LeftPanel_tagPanelContainer {

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

@ -35,13 +35,6 @@ limitations under the License.
flex: 1;
}
.mx_RoomDirectory .gm-scroll-view {
// little hack because gemini doesn't seem to detect
// the scrollbar width well in this instance
// when using css scrollbars
scrollbar-width: thin;
}
.mx_RoomDirectory_createRoom {
background-color: $button-bg-color;
border-radius: 4px;

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

@ -143,7 +143,7 @@ limitations under the License.
}
.mx_RoomSubList_labelContainer {
margin-right: 14px;
margin-right: 8px;
margin-left: 2px;
}

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

@ -63,7 +63,6 @@ limitations under the License.
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
height: 100%;
}

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

@ -22,7 +22,7 @@ limitations under the License.
display: flex;
align-items: center;
min-width: 0;
padding: 0 7px;
padding: 0 4px;
overflow: hidden;
}

16
res/css/structures/auth/_Login.scss
View file

@ -30,6 +30,7 @@ limitations under the License.
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;
}
.mx_AuthBody a.mx_Login_sso_link:link,
@ -62,6 +63,15 @@ limitations under the License.
margin-bottom: 12px;
}
.mx_Login_error.mx_Login_serverError {
text-align: left;
font-weight: normal;
}
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: $orange-warning-color;
}
.mx_Login_type_container {
display: flex;
align-items: center;
@ -73,9 +83,9 @@ limitations under the License.
}
.mx_Login_type_label {
flex-grow: 1;
flex: 1;
}
.mx_Login_type_dropdown {
min-width: 200px;
.mx_Login_underlinedServerName {
border-bottom: 1px dashed $accent-color;
}

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

@ -58,12 +58,12 @@ limitations under the License.
color: $authpage-primary-color;
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field_labelAlwaysTopLeft label {
.mx_Field textarea:not(:placeholder-shown) + label {
background-color: $authpage-body-bg-color;
}
@ -72,7 +72,6 @@ limitations under the License.
}
.mx_Field input {
width: 100%;
box-sizing: border-box;
}
@ -110,7 +109,6 @@ limitations under the License.
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px;
flex: 1;
}
.mx_AuthBody_fieldRow > .mx_Field:first-child {

8
res/css/views/auth/_InteractiveAuthEntryComponents.scss
View file

@ -49,10 +49,14 @@ limitations under the License.
}
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: $accent-color-50pct;
background-color: $accent-color-darker;
cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsPolicy {
display: block;
}
}
.mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px;
}

34
res/css/views/auth/_ServerConfig.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,24 +15,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerConfig_fields {
display: flex;
margin: 1em 0;
}
.mx_ServerConfig_fields .mx_Field {
flex: 1;
margin: 0 5px;
}
.mx_ServerConfig_fields .mx_Field:first-child {
margin-left: 0;
}
.mx_ServerConfig_fields .mx_Field:last-child {
margin-right: 0;
}
.mx_ServerConfig_help:link {
opacity: 0.8;
}
.mx_ServerConfig_error {
display: block;
color: $warning-color;
}
.mx_ServerConfig_identityServer {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s;
&.mx_ServerConfig_identityServer_shown {
transform: scaleY(1);
}
}

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

@ -18,6 +18,18 @@ limitations under the License.
padding: 6px;
}
.mx_RoomTileContextMenu_tag_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block;
}
.mx_RoomTileContextMenu_tag_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px;
padding-right: 20px;
@ -45,18 +57,6 @@ limitations under the License.
color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_tag_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
}
.mx_RoomTileContextMenu_tag_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
@ -72,10 +72,6 @@ limitations under the License.
color: $warning-color;
}
.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
/* Something to indicate that the icon is the set tag */
}
.mx_RoomTileContextMenu_notif_picker {
position: absolute;
top: 16px;

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

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

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

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

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

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

4
res/css/views/dialogs/_DeactivateAccountDialog.scss
View file

@ -21,3 +21,7 @@ limitations under the License.
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
margin-top: 60px;
}
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
width: 300px;
}

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

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

2
res/css/views/dialogs/_GroupAddressPicker.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GroupAddressPicker_checkboxContainer{
.mx_GroupAddressPicker_checkboxContainer {
margin-top: 10px;
display: flex;
}

67
res/css/views/dialogs/_MessageEditHistoryDialog.scss Normal file
View file

@ -0,0 +1,67 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
text-align: center;
}
.mx_MessageEditHistoryDialog {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.mx_MessageEditHistoryDialog_scrollPanel {
flex: 1 1 auto;
}
.mx_MessageEditHistoryDialog_error {
color: $warning-color;
text-align: center;
}
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: 14px;
padding: 0;
color: $primary-fg-color;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px;
}
.mx_EditHistoryMessage_deletion {
color: rgb(255, 76, 85);
background-color: rgba(255, 76, 85, 0.1);
text-decoration: line-through;
}
.mx_EditHistoryMessage_insertion {
color: rgb(26, 169, 123);
background-color: rgba(26, 169, 123, 0.1);
text-decoration: underline;
}
.mx_EventTile_line, .mx_EventTile_content {
margin-right: 0px;
}
.mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px;
padding: 0 8px;
}
}

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

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

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

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

1
res/css/views/dialogs/_SetPasswordDialog.scss
View file

@ -21,7 +21,6 @@ limitations under the License.
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}

13
res/css/views/dialogs/_BugReportDialog.scss → res/css/views/dialogs/_SlashCommandHelpDialog.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2017 OpenMarket Ltd
Copyright 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.
@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BugReportDialog .mx_Field {
flex: 1;
.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
margin-bottom: 2px;
}
.mx_BugReportDialog_field_input {
// TODO: We should really apply this to all .mx_Field inputs.
// See https://github.com/vector-im/riot-web/issues/9344.
flex: 1;
.mx_SlashCommandHelpDialog .mx_Dialog_content {
margin-top: 12px;
margin-bottom: 34px;
}

62
res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss Normal file
View file

@ -0,0 +1,62 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_TabbedIntegrationManagerDialog .mx_Dialog {
width: 60%;
height: 70%;
overflow: hidden;
padding: 0;
max-width: initial;
max-height: initial;
position: relative;
}
.mx_TabbedIntegrationManagerDialog_container {
// Full size of the dialog, whatever it is
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.mx_TabbedIntegrationManagerDialog_currentManager {
width: 100%;
height: 100%;
border-top: 1px solid $accent-color;
iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
}
}
.mx_TabbedIntegrationManagerDialog_tab {
display: inline-block;
border: 1px solid $accent-color;
border-bottom: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 10px 8px;
margin-right: 5px;
}
.mx_TabbedIntegrationManagerDialog_currentTab {
background-color: $accent-color;
color: $accent-fg-color;
}

47
res/css/views/dialogs/_TermsDialog.scss Normal file
View file

@ -0,0 +1,47 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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.
*/
/*
* To avoid visual glitching of two modals stacking briefly, we customise the
* terms dialog sizing when it will appear for the integrations manager so that
* it gets the same basic size as the IM's own modal.
*/
.mx_TermsDialog_forIntegrationsManager .mx_Dialog {
width: 60%;
height: 70%;
box-sizing: border-box;
}
.mx_TermsDialog_termsTableHeader {
font-weight: bold;
text-align: left;
}
.mx_TermsDialog_termsTable {
font-size: 12px;
width: 100%;
}
.mx_TermsDialog_service, .mx_TermsDialog_summary {
padding-right: 10px;
}
.mx_TermsDialog_link {
mask-image: url('$(res)/img/external-link.svg');
background-color: $accent-color;
width: 10px;
height: 10px;
}

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

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

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

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

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

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

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

@ -13,10 +13,10 @@ 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_RestoreKeyBackupDialog_primaryContainer {
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
padding: 20px
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
}
.mx_RestoreKeyBackupDialog_passPhraseInput,

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

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

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

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessibleButton:focus {
outline: 0;
}
.mx_AccessibleButton {
cursor: pointer;
}
.mx_AccessibleButton:focus {
outline: 0;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
@ -79,3 +79,22 @@ limitations under the License.
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_kind_link {
color: $button-link-fg-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: $button-link-fg-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}

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

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

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

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

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

@ -42,12 +42,6 @@ limitations under the License.
margin-right: 5px;
}
.mx_EditableItemList_newItem .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
}
.mx_EditableItemList_label {
margin-bottom: 5px;
}
}

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

@ -18,6 +18,8 @@ limitations under the License.
.mx_Field {
display: flex;
flex: 1;
min-width: 0;
position: relative;
margin: 1em 0;
border-radius: 4px;
@ -42,6 +44,7 @@ limitations under the License.
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
flex: 1;
}
.mx_Field select {
@ -107,12 +110,12 @@ limitations under the License.
max-width: calc(100% - 20px); // 100% of parent minus margin and padding
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field_labelAlwaysTopLeft label {
.mx_Field textarea:not(:placeholder-shown) + label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
@ -141,6 +144,9 @@ limitations under the License.
color: $greyed-fg-color;
}
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_Field_valid {
&.mx_Field,
&.mx_Field:focus-within {
@ -164,6 +170,7 @@ limitations under the License.
color: $input-invalid-border-color;
}
}
/* stylelint-enable no-descending-specificity */
.mx_Field_tooltip {
margin-top: -12px;

4
res/css/views/elements/_ImageView.scss
View file

@ -128,8 +128,8 @@ limitations under the License.
}
.mx_ImageView_link {
color: $lightbox-fg-color ! important;
text-decoration: none ! important;
color: $lightbox-fg-color !important;
text-decoration: none !important;
}
.mx_ImageView_button {

91
res/css/views/elements/_InteractiveTooltip.scss Normal file
View file

@ -0,0 +1,91 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_InteractiveTooltip_wrapper {
position: fixed;
z-index: 5000;
}
.mx_InteractiveTooltip {
border-radius: 3px;
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 10px;
font-weight: 600;
padding: 6px;
z-index: 5001;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_top {
position: absolute;
left: calc(50% - 8px);
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_top {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(135deg);
border-radius: 0 0 0 3px;
top: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_bottom {
position: absolute;
left: calc(50% - 8px);
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_bottom {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
border-radius: 0 0 0 3px;
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}

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

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

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

@ -20,6 +20,5 @@ limitations under the License.
.mx_PowerSelector .mx_Field select,
.mx_PowerSelector .mx_Field input {
width: 100%;
box-sizing: border-box;
}

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

@ -13,12 +13,6 @@
padding-left: 5px;
}
.mx_EventTile_body .mx_UserPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_GroupPill {
cursor: pointer;
}
/* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
@ -33,7 +27,7 @@
}
.mx_UserPill_selected {
background-color: $accent-color ! important;
background-color: $accent-color !important;
}
/* More specific to override `.markdown-body a` color */
@ -64,6 +58,12 @@
padding-right: 5px;
}
.mx_EventTile_body .mx_UserPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_GroupPill {
cursor: pointer;
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar,
.mx_GroupPill .mx_BaseAvatar,
@ -79,7 +79,7 @@
.mx_Markdown_ITALIC {
font-style: italic;
/*
/*
// interestingly, *not* using the explicit italic font
// variant seems yield better results.
@ -87,7 +87,7 @@
// https://github.com/google/fonts/issues/1726
transform: skewX(-14deg);
display: inline-block;
*/
*/
}
.mx_Markdown_CODE {

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

@ -25,4 +25,4 @@ limitations under the License.
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
}

19
res/css/views/elements/_TextWithTooltip.scss Normal file
View file

@ -0,0 +1,19 @@
/*
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_TextWithTooltip_tooltip {
display: none;
}

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

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

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

@ -36,8 +36,8 @@ limitations under the License.
border-bottom: 7px solid transparent;
}
.mx_Tooltip_chevron:after {
content:'';
.mx_Tooltip_chevron::after {
content: '';
width: 0;
height: 0;
border-top: 6px solid transparent;
@ -55,7 +55,7 @@ limitations under the License.
border-radius: 4px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
z-index: 2000;
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
line-height: 14px;

9
res/css/views/elements/_ToolTipButton.scss → res/css/views/elements/_TooltipButton.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2017 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ToolTipButton {
.mx_TooltipButton {
display: inline-block;
width: 11px;
height: 11px;
@ -33,17 +34,17 @@ limitations under the License.
cursor: pointer;
}
.mx_ToolTipButton:hover {
.mx_TooltipButton:hover {
opacity: 1.0;
}
.mx_ToolTipButton_container {
.mx_TooltipButton_container {
position: relative;
top: -18px;
left: 4px;
}
.mx_ToolTipButton_helpText {
.mx_TooltipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;

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

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

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

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

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

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

31
res/css/views/messages/_MessageActionBar.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -26,11 +27,30 @@ limitations under the License.
top: -18px;
right: 8px;
user-select: none;
// Ensure the action bar appears above over things, like the read marker.
z-index: 1;
// Adds a previous event safe area so that you can't accidentally hover the
// previous event while trying to mouse into the action bar or from the
// react button to its tooltip.
&::before {
content: '';
position: absolute;
// tooltip safe mousing area + tooltip overhang +
// action bar + action bar offset from event
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
height: calc(20px + 100%);
top: -20px;
left: -58px;
z-index: -1;
cursor: initial;
}
> * {
white-space: nowrap;
display: inline-block;
position: relative;
width: 27px;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
@ -53,6 +73,11 @@ limitations under the License.
}
}
.mx_MessageActionBar_maskButton {
width: 27px;
}
.mx_MessageActionBar_maskButton::after {
content: '';
position: absolute;
@ -65,6 +90,10 @@ limitations under the License.
background-color: $message-action-bar-fg-color;
}
.mx_MessageActionBar_reactButton::after {
mask-image: url('$(res)/img/react.svg');
}
.mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/reply.svg');
}

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

@ -15,4 +15,6 @@ limitations under the License.
*/
.mx_MessageTimestamp {
color: $event-timestamp-color;
font-size: 10px;
}

29
res/css/views/messages/_ReactionQuickTooltip.scss Normal file
View file

@ -0,0 +1,29 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ReactionsQuickTooltip_buttons {
display: grid;
grid-template-columns: repeat(4, auto);
}
.mx_ReactionsQuickTooltip_label {
text-align: center;
}
.mx_ReactionsQuickTooltip_shortcode {
padding-left: 6px;
opacity: 0.7;
}

31
res/css/views/messages/_ReactionTooltipButton.scss Normal file
View file

@ -0,0 +1,31 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ReactionTooltipButton {
font-size: 16px;
padding: 6px;
user-select: none;
cursor: pointer;
transition: transform 0.25s;
&:hover {
transform: scale(1.2);
}
}
.mx_ReactionTooltipButton_selected {
opacity: 0.4;
}

15
res/css/views/messages/_ReactionsRow.scss
View file

@ -16,4 +16,19 @@ limitations under the License.
.mx_ReactionsRow {
margin: 6px 0;
color: $primary-fg-color;
}
.mx_ReactionsRow_showAll {
text-decoration: none;
font-size: 10px;
font-weight: 600;
margin-left: 6px;
vertical-align: top;
&:hover,
&:link,
&:visited {
color: $accent-color;
}
}

10
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_ReactionsRowButton {
display: inline-block;
display: inline-flex;
height: 20px;
line-height: 21px;
margin-right: 6px;
@ -35,3 +35,11 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color;
}
}
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}

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

@ -23,4 +23,4 @@ limitations under the License.
display: inline;
position: relative;
top: 5px;
}
}

2
res/css/views/room_settings/_ColorSettings.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
position: absolute;
left: 10px;
top: 4px;
cursor: default ! important;
cursor: default !important;
}
.mx_ColorSettings_roomColorPrimary {

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

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -42,7 +43,6 @@ $AppsDrawerBodyHeight: 273px;
.mx_AddWidget_button {
order: 2;
cursor: pointer;
padding-right: 12px;
padding: 0;
margin: 5px auto 5px auto;
color: $accent-color;
@ -198,7 +198,7 @@ $AppsDrawerBodyHeight: 273px;
border-radius: 2px;
}
.mx_AppTileBody{
.mx_AppTileBody {
height: $AppsDrawerBodyHeight;
width: 100%;
overflow: hidden;
@ -234,7 +234,7 @@ $AppsDrawerBodyHeight: 273px;
background-color: $lightbox-bg-color;
border: 1px solid rgba(0, 0, 0, 0);
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 3px;
margin: 5px;
@ -248,7 +248,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppIconTile:hover {
border: 1px solid $accent-color;
box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
}
.mx_AppIconTile_content {
@ -270,9 +270,8 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppIconTile_image {
padding: 10px;
width: 75%;
max-width:100px;
max-height:100px;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
}
@ -312,7 +311,7 @@ form.mx_Custom_Widget_Form div {
}
.mx_AppPermissionWarningText {
max-width: 400px;
max-width: 90%;
margin: 10px auto 10px auto;
color: $primary-fg-color;
}
@ -323,7 +322,12 @@ form.mx_Custom_Widget_Form div {
}
.mx_AppPermissionWarningTextURL {
display: inline-block;
max-width: 100%;
color: $accent-color;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_AppPermissionButton {
@ -361,11 +365,11 @@ form.mx_Custom_Widget_Form div {
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 }
to { opacity: 1 }
from { opacity: 0; }
to { opacity: 1; }
}
.mx_AppLoading iframe {
display: none;
display: none;
}

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

@ -8,18 +8,13 @@
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
overflow: auto;
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
@ -32,7 +27,7 @@
}
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
@ -50,11 +45,27 @@
margin: 0 3px;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
}
.mx_Autocomplete_Completion_container_truncate {
.mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions*/
/* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap;
overflow: hidden;
@ -62,13 +73,6 @@
}
}
/* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
}
.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: $selected-color;
@ -81,14 +85,3 @@
font-weight: 400;
opacity: 0.4;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}

62
res/css/views/elements/_MessageEditor.scss → res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,24 +15,31 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MessageEditor {
border-radius: 4px;
padding: 3px;
// this is to try not make the text move but still have some
// padding around and in the editor.
// Actual values from fiddling around in inspector
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_BasicMessageComposer {
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
content: var(--placeholder);
opacity: 0.333;
width: 0;
height: 0;
overflow: visible;
display: inline-block;
pointer-events: none;
white-space: nowrap;
}
.mx_MessageEditor_editor {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
padding: 3px 6px;
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
}
&.mx_BasicMessageComposer_input_error {
animation: 0.2s visualbell;
}
.mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
max-height: 200px;
overflow-x: auto;
span.mx_UserPill, span.mx_RoomPill {
@ -59,32 +67,8 @@ limitations under the License.
}
}
.mx_MessageEditor_buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 5px;
position: absolute;
left: 0;
background: $header-panel-bg-color;
z-index: 100;
right: 0;
margin: 0 -110px 0 0;
padding-right: 147px;
.mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
}
.mx_MessageEditor_AutoCompleteWrapper {
.mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}
}
.mx_EventTile_last .mx_MessageEditor_buttons {
position: static;
margin-right: -147px;
}

63
res/css/views/rooms/_EditMessageComposer.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
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_EditMessageComposer {
padding: 3px;
// this is to try not make the text move but still have some
// padding around and in the editor.
// Actual values from fiddling around in inspector
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
max-height: 200px;
padding: 3px 6px;
&:focus {
border-color: $accent-color-50pct;
}
}
.mx_EditMessageComposer_buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 5px;
position: absolute;
left: 0;
background: $header-panel-bg-color;
z-index: 100;
right: 0;
margin: 0 -110px 0 0;
padding-right: 147px;
.mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
}
}
.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}

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

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

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

@ -56,13 +56,17 @@ limitations under the License.
color: $primary-fg-color;
font-size: 14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow-y: hidden;
overflow: hidden;
cursor: pointer;
padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
line-height: 17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 65px);
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
@ -89,8 +93,6 @@ limitations under the License.
display: block;
visibility: hidden;
white-space: nowrap;
color: $event-timestamp-color;
font-size: 10px;
left: 0px;
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
@ -120,8 +122,29 @@ limitations under the License.
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px ! important;
line-height: 52px ! important;
font-size: 48px !important;
line-height: 57px !important;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
visibility: visible;
}
/* this is used for the tile for the event which is selected via the URL.
@ -133,9 +156,17 @@ limitations under the License.
background-color: $event-selected-color;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body {
color: $event-highlight-fg-color;
.mx_EventTile_line {
background-color: $event-highlight-bg-color;
}
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
{
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
background-color: $event-selected-color;
}
@ -154,7 +185,7 @@ limitations under the License.
}
.mx_EventTile_encrypting {
color: $event-encrypting-color ! important;
color: $event-encrypting-color !important;
}
.mx_EventTile_sending {
@ -172,25 +203,30 @@ limitations under the License.
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
--lozenge-color: $event-redacted-fg-color;
--lozenge-border-color: $event-redacted-border-color;
display: block;
width: 100%;
height: 22px;
width: 250px;
border-radius: 11px;
background: repeating-linear-gradient(
-45deg,
$event-redacted-fg-color,
$event-redacted-fg-color 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
background:
repeating-linear-gradient(
-45deg,
var(--lozenge-color),
var(--lozenge-color) 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: $warning-color;
.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
opacity: 0.4;
}
div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
--lozenge-color: $event-notsent-color;
--lozenge-border-color: $event-notsent-color;
}
.mx_EventTile_contextual {
@ -215,27 +251,6 @@ limitations under the License.
text-decoration: none;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
visibility: visible;
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
@ -243,6 +258,7 @@ limitations under the License.
height: 14px;
top: 29px;
user-select: none;
z-index: 1;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
@ -299,11 +315,6 @@ limitations under the License.
filter: none;
}
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
opacity: 1;
}
.mx_EventTile_e2eIcon {
display: block;
position: absolute;
@ -370,22 +381,31 @@ limitations under the License.
padding-left: 5px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
padding-left: 60px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
opacity: 1;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@ -395,12 +415,6 @@ limitations under the License.
width: auto;
}
/*
.mx_EventTile_verified .mx_EventTile_e2eIcon {
display: none;
}
*/
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
@ -414,39 +428,45 @@ limitations under the License.
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
cursor: pointer;
}
/* Various markdown overrides */
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile_content .markdown-body {
font-family: inherit ! important;
white-space: normal ! important;
line-height: inherit ! important;
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: 14px;
}
/* have to use overlay rather than auto otherwise Linux and Windows
Chrome gets very confused about vertical spacing:
https://github.com/vector-im/vector-web/issues/754
*/
.mx_EventTile_content .markdown-body pre {
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
.mx_EventTile_content .markdown-body code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
}
.mx_EventTile_content .markdown-body {
pre, code {
font-family: $monospace-font-family ! important;
font-family: $monospace-font-family !important;
// deliberate constants as we're behind an invert filter
color: #333;
}
pre {
// have to use overlay rather than auto otherwise Linux and Windows
// Chrome gets very confused about vertical spacing:
// https://github.com/vector-im/vector-web/issues/754
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
}
}
.mx_EventTile:hover .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
.mx_EventTile_pre_container {
@ -467,17 +487,7 @@ limitations under the License.
background-image: url($copy-button-url);
}
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre
{
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
{
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
visibility: visible;
}
@ -486,19 +496,17 @@ limitations under the License.
.mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6
{
font-family: inherit ! important;
.mx_EventTile_content .markdown-body h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2
{
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none ! important; // override GFM
border-bottom: none !important; // override GFM
}
.mx_EventTile_content .markdown-body a {
@ -507,7 +515,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body .hljs {
display: inline ! important;
display: inline !important;
}
/*
@ -524,6 +532,9 @@ limitations under the License.
/* end of overrides */
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
@ -596,8 +607,9 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}
/* stylelint-enable no-descending-specificity */

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

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

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

@ -57,6 +57,7 @@ limitations under the License.
}
.mx_MemberDeviceInfo_deviceId {
word-break: break-word;
font-size: 13px;
}

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

@ -43,6 +43,8 @@ limitations under the License.
.mx_MemberInfo_name h2 {
flex: 1;
overflow-x: auto;
max-height: 50px;
}
.mx_MemberInfo h2 {
@ -80,9 +82,6 @@ limitations under the License.
display: block;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
}
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in;
}
@ -124,7 +123,7 @@ limitations under the License.
}
.mx_MemberInfo_createRoom_label {
width: initial ! important;
width: initial !important;
cursor: pointer;
}

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

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

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

@ -122,16 +122,15 @@ limitations under the License.
// FIXME: rather unpleasant hack to get rid of <p/> margins.
// really we should be mixing in markdown-body from gfm.css instead
.mx_MessageComposer_editor > :first-child {
margin-top: 0 ! important;
margin-top: 0 !important;
}
.mx_MessageComposer_editor > :last-child {
margin-bottom: 0 ! important;
margin-bottom: 0 !important;
}
@keyframes visualbell
{
from { background-color: #faa }
to { background-color: $primary-bg-color }
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
}
.mx_MessageComposer_input_error {

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

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

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

@ -17,4 +17,4 @@ limitations under the License.
.mx_PresenceLabel {
font-size: 11px;
opacity: 0.5;
}
}

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

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

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

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

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

@ -22,7 +22,6 @@ limitations under the License.
.mx_RoomHeader_wrapper {
margin: auto;
height: 52px;
align-items: center;
display: flex;
align-items: center;
min-width: 0;
@ -107,7 +106,7 @@ limitations under the License.
}
.mx_RoomHeader_settingsHint {
color: $settings-grey-fg-color ! important;
color: $settings-grey-fg-color !important;
}
.mx_RoomHeader_searchStatus {
@ -134,17 +133,17 @@ limitations under the License.
}
.mx_RoomHeader_placeholder {
color: $settings-grey-fg-color ! important;
color: $settings-grey-fg-color !important;
}
.mx_RoomHeader_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
border-bottom: 1px solid $strong-input-border-color !important;
min-width: 150px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid $accent-color ! important;
border-bottom: 1px solid $accent-color !important;
outline: none;
box-shadow: none;
}

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

@ -32,7 +32,7 @@ limitations under the License.
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
}

18
res/css/views/rooms/_RoomPreviewBar.scss
View file

@ -39,6 +39,16 @@ limitations under the License.
margin: 10px 10px 10px 0;
flex: 0 0 auto;
}
.mx_RoomPreviewBar_footer {
font-size: 12px;
line-height: 20px;
.mx_Spinner {
vertical-align: middle;
display: inline-block;
}
}
}
.mx_RoomPreviewBar_dark {
@ -70,7 +80,7 @@ limitations under the License.
flex-direction: row;
padding: 3px 8px;
&>* {
& > * {
margin-left: 12px;
}
}
@ -81,7 +91,7 @@ limitations under the License.
display: flex;
flex-direction: column;
&>* {
& > * {
margin: 4px;
}
}
@ -99,7 +109,7 @@ limitations under the License.
.mx_RoomPreviewBar_message {
flex-direction: column;
&>* {
& > * {
margin: 5px 0 20px 0;
}
}
@ -110,7 +120,7 @@ limitations under the License.
padding: 7px 50px;//extra wide
}
&>* {
& > * {
margin-top: 12px;
}
}

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

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

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

@ -15,17 +15,22 @@ limitations under the License.
*/
.mx_RoomUpgradeWarningBar {
max-height: 235px;
background-color: $preview-bar-bg-color;
padding-left: 20px;
padding-right: 20px;
overflow: scroll;
}
.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
display: flex;
text-align: center;
height: 235px;
background-color: $event-selected-color;
align-items: center;
flex-direction: column;
justify-content: center;
display: flex;
background-color: $preview-bar-bg-color;
-webkit-align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.mx_RoomUpgradeWarningBar_header {

53
res/css/views/rooms/_SendMessageComposer.scss Normal file
View file

@ -0,0 +1,53 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_SendMessageComposer {
flex: 1;
display: flex;
flex-direction: column;
font-size: 14px;
justify-content: center;
margin-right: 6px;
// don't grow wider than available space
min-width: 0;
.mx_BasicMessageComposer {
flex: 1;
display: flex;
flex-direction: column;
// min-height at this level so the mx_BasicMessageComposer_input
// still stays vertically centered when less than 50px
min-height: 50px;
.mx_BasicMessageComposer_input {
padding: 3px 0;
// this will center the contenteditable
// in it's parent vertically
// while keeping the autocomplete at the top
// of the composer. The parent needs to be a flex container for this to work.
margin: auto 0;
// max-height at this level so autocomplete doesn't get scrolled too
max-height: 140px;
overflow-y: auto;
}
}
.mx_SendMessageComposer_overlayWrapper {
position: relative;
height: 0;
}
}

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

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

7
res/css/views/settings/_DevicesPanel.scss
View file

@ -26,8 +26,13 @@ limitations under the License.
font-weight: bold;
}
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
height: 48px; // make this tall so the table doesn't move down when the delete button appears
}
.mx_DevicesPanel_header > div {
display: table-cell;
vertical-align: bottom;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
@ -48,4 +53,4 @@ limitations under the License.
.mx_DevicesPanel_myDevice {
font-weight: bold;
}
}

17
res/css/views/settings/_EmailAddresses.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,6 +16,8 @@ limitations under the License.
*/
.mx_ExistingEmailAddress {
display: flex;
align-items: center;
margin-bottom: 5px;
}
@ -24,20 +27,12 @@ limitations under the License.
vertical-align: middle;
}
.mx_ExistingEmailAddress_email {
vertical-align: middle;
}
.mx_ExistingEmailAddress_email,
.mx_ExistingEmailAddress_promptText {
flex: 1;
margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px;
}
.mx_EmailAddresses_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
margin-left: 5px;
}

13
res/css/views/settings/_IntegrationsManager.scss
View file

@ -29,3 +29,16 @@ limitations under the License.
width: 100%;
height: 100%;
}
.mx_IntegrationsManager_loading h3 {
text-align: center;
}
.mx_IntegrationsManager_error {
text-align: center;
padding-top: 20px;
}
.mx_IntegrationsManager_error h3 {
color: $warning-color;
}

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

@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserNotifSettings_tableRow
{
.mx_UserNotifSettings_tableRow {
display: table-row;
}
@ -26,8 +25,7 @@ limitations under the License.
width: 16px;
}
.mx_UserNotifSettings_labelCell
{
.mx_UserNotifSettings_labelCell {
padding-bottom: 8px;
width: 400px;
display: table-cell;
@ -71,3 +69,26 @@ limitations under the License.
.mx_UserNotifSettings_notifTable .mx_Spinner {
position: absolute;
}
.mx_NotificationSound_soundUpload {
display: none;
}
.mx_NotificationSound_browse {
color: $accent-color;
border: 1px solid $accent-color;
background-color: transparent;
}
.mx_NotificationSound_save {
margin-left: 5px;
color: white;
background-color: $accent-color;
}
.mx_NotificationSound_resetSound {
margin-top: 5px;
color: white;
border: $warning-color;
background-color: $warning-color;
}

22
res/css/views/settings/_PhoneNumbers.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,6 +16,8 @@ limitations under the License.
*/
.mx_ExistingPhoneNumber {
display: flex;
align-items: center;
margin-bottom: 5px;
}
@ -24,22 +27,23 @@ limitations under the License.
vertical-align: middle;
}
.mx_ExistingPhoneNumber_address {
vertical-align: middle;
}
.mx_ExistingPhoneNumber_address,
.mx_ExistingPhoneNumber_promptText {
flex: 1;
margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px;
margin-left: 5px;
}
.mx_PhoneNumbers_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
.mx_ExistingPhoneNumber_verification {
display: inline-flex;
align-items: center;
.mx_Field {
margin: 0 0 0 1em;
}
}
.mx_PhoneNumbers_input {

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

@ -22,11 +22,6 @@ limitations under the License.
flex-grow: 1;
}
.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
.mx_ProfileSettings_controls .mx_Field #profileTopic {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em;
}
@ -48,7 +43,6 @@ limitations under the License.
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
@ -76,6 +70,7 @@ limitations under the License.
text-align: center;
vertical-align: middle;
font-size: 10px;
cursor: pointer;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
@ -110,7 +105,7 @@ limitations under the License.
margin: auto;
}
.mx_ProfileSettings_avatarOverlayImg:before {
.mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-customised/upload.svg");
mask-repeat: no-repeat;
@ -124,7 +119,7 @@ limitations under the License.
right: 0;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-fg-color !important;
}

12
res/css/views/messages/_ReactionDimension.scss → res/css/views/settings/_SetIdServer.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,12 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ReactionDimension {
width: 42px;
display: flex;
justify-content: space-evenly;
.mx_SetIdServer .mx_Field_input {
@mixin mx_Settings_fullWidthField;
}
.mx_ReactionDimension_disabled {
opacity: 0.4;
.mx_SetIdServer_tooltip {
@mixin mx_Settings_tooltip;
}

37
res/css/views/settings/_SetIntegrationManager.scss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_SetIntegrationManager .mx_Field_input {
@mixin mx_Settings_fullWidthField;
}
.mx_SetIntegrationManager {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_SetIntegrationManager > .mx_SettingsTab_heading {
margin-bottom: 10px;
}
.mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading {
display: inline-block;
padding-left: 5px;
}
.mx_SetIntegrationManager_tooltip {
@mixin mx_Settings_tooltip;
}

15
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -24,6 +24,10 @@ limitations under the License.
color: $primary-fg-color;
}
.mx_SettingsTab_heading:nth-child(n + 2) {
margin-top: 30px;
}
.mx_SettingsTab_subheading {
font-size: 16px;
display: block;
@ -37,9 +41,8 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 14px;
padding-bottom: 12px;
display: block;
margin: 0 100px 0 0; // Align with the rest of the view
margin: 10px 100px 10px 0; // Align with the rest of the view
}
.mx_SettingsTab_section .mx_SettingsFlag {
@ -67,12 +70,6 @@ limitations under the License.
word-break: break-all;
}
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
// These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections.
margin-top: 30px;
}
.mx_SettingsTab a {
color: $accent-color-alt;
}
}

4
res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss
View file

@ -17,7 +17,3 @@ limitations under the License.
.mx_GeneralRoomSettingsTab_profileSection {
margin-top: 10px;
}
.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
width: 100%;
}

2
res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss
View file

@ -21,4 +21,4 @@ limitations under the License.
.mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px;
margin-bottom: 5px;
}
}

2
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
View file

@ -31,4 +31,4 @@ limitations under the License.
.mx_SecurityRoomSettingsTab_encryptionSection {
margin-bottom: 25px;
}
}

30
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
View file

@ -14,33 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GeneralUserSettingsTab_changePassword,
.mx_GeneralUserSettingsTab_themeSection {
display: block;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
display: block;
margin-right: 100px; // Align with the other fields on the page
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right
@mixin mx_Settings_fullWidthField;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
display: block;
width: 100%;
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
.mx_GeneralUserSettingsTab_languageInput {
@mixin mx_Settings_fullWidthField;
}
.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_languageInput {
margin-right: 100px; // Align with the other fields on the page
}
.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
}

2
res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
View file

@ -21,4 +21,4 @@ limitations under the License.
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}
}

2
res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss
View file

@ -16,4 +16,4 @@ limitations under the License.
.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px; // Give some spacing between the title and the first elements
}
}

10
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
View file

@ -15,13 +15,5 @@ limitations under the License.
*/
.mx_PreferencesUserSettingsTab .mx_Field {
margin-right: 100px; // Align with the rest of the controls
}
.mx_PreferencesUserSettingsTab .mx_Field input {
display: block;
// Subtract 10px padding on left and right
// This is to keep the input aligned with the rest of the tab's controls.
width: calc(100% - 20px);
@mixin mx_Settings_fullWidthField;
}

2
res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
View file

@ -54,4 +54,4 @@ limitations under the License.
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}
}

7
res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss
View file

@ -14,13 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VoiceUserSettingsTab .mx_Field select {
width: 100%;
max-width: 100%;
}
.mx_VoiceUserSettingsTab .mx_Field {
margin-right: 100px; // align with the rest of the fields
@mixin mx_Settings_fullWidthField;
}
.mx_VoiceUserSettingsTab_missingMediaPermissions {

45
res/css/views/terms/_InlineTermsAgreement.scss Normal file
View file

@ -0,0 +1,45 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
font-size: 14px;
a {
color: $accent-color;
text-decoration: none;
}
.mx_InlineTermsAgreement_checkbox {
margin-top: 10px;
input {
vertical-align: text-bottom;
}
}
}
.mx_InlineTermsAgreement_link {
display: inline-block;
mask-image: url('$(res)/img/external-link.svg');
background-color: $accent-color;
mask-repeat: no-repeat;
mask-size: contain;
width: 12px;
height: 12px;
margin-left: 3px;
vertical-align: middle;
}

2
res/css/views/voip/_CallView.scss
View file

@ -22,4 +22,4 @@ limitations under the License.
padding: 6px;
font-weight: bold;
font-size: 13px;
}
}

Some files were not shown because too many files have changed in this diff Show more